@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	padding: 0;
	margin: 0 !important;
	box-sizing: border-box;
	font-family: "Montserrat", serif;
}

img {
	width: 100%;
}

/*********main css***********/
section.main {
	display: flex;
	gap: 20px;
	background: #f2f2f2;
	padding: 20px;
	align-items: flex-start;
	min-height: 100vh;
}

aside {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	width: 100%;
	max-width: 300px;
	position: sticky;
	top: 20px;
}

.logout_div ul {
	padding: 15px !important;
	list-style: none !important;
	background: #fff;
	border-radius: 10px;
}

.logout_div:not(.active) {
	display: none;
}

.location h5 {
	font-size: 14px;
	display: flex;
	flex-direction: column;
}

.location h5 span {
	display: block;
	font-weight: 500;
	color: #858585;
}

.profile {
	display: flex;
	padding: 12px 18px 12px 12px;
	background: #fff;
	border-radius: 12px;
	gap: 12px;
	align-items: center;
}

.profile img {
	max-width: 44px;
	border-radius: 50%;
}

.profile .user_name {
	display: flex;
	flex-direction: column;
	row-gap: 0px;
	font-size: 13px;
	color: #888;
	width: 100%;
	line-height: 1.25;
}

/****************nav*************/
aside nav ul {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
	background: #fff;
	padding: 12px;
	border-radius: 12px;
	list-style: none;
}

aside nav ul li a {
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	color: #000000;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}

aside nav ul li.active>a,
aside nav ul li:hover>a {
	background: #a6b8dc;
}

aside nav ul li a img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

li:not(.active) .submenu {
	display: none;
}

.alert {
	padding: 15px 15px 30px;
	background: #fff;
	border-radius: 10px;
	display: flex;
	row-gap: 15px;
	flex-direction: column;
}

.alert h5 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
	color: red;
}

.alert h5 span {
	background: #fff;
	padding: 5px;
	border-radius: 5px;
	font-size: .9em;
	color: #000;
}

/*************main css********/
main {
	width: 100%;
	display: flex;
	gap: 15px;
	flex-direction: column;
}

main iframe {
	border-radius: 10px;
}

.main_content {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.main_content .assets {
	width: calc(100% * 2 / 3);
}

.mpg_store {
	width: calc(100% / 3);
}

.assets {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

.assets_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.assets_header h2,
main h2 {
	font-size: 21px;
	font-weight: 700;
	display: flex;
	gap: 10px;
}

.assets_header input,
.mpg_store input {
	padding: 12px;
	border: none;
	border-radius: 10px;
	padding-left: 35px;
	background-image: url(../images/search-icon.svg);
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: 12px center;
	line-height: 1;
	outline: none;
}

/**********card assets***********/
.assets_list {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	max-height: calc(249px);
	overflow-y: scroll;
}

.rank_list {
	max-height: calc(230px);
	overflow-y: scroll;
}

.assets_list::-webkit-scrollbar,
.rank_list::-webkit-scrollbar {
	display: none;
}

.card_ass {
	padding: 13.5px;
	background: #fff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.card_ass[style="display: block;"],
.rank[style="display: block;"] {
	display: flex !important;
}

img.ass_img {
	max-width: 50px;
	background: #e0e0e0;
	padding: 7px;
	border-radius: 10px;
}

.name_ass {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	font-size: 14px;
}

span.list_id {
	font-weight: 500;
}

span.bottom_text {
	display: inline;
}

span.bottom_text img.arrow {
	display: inline;
	max-width: 16px;
	vertical-align: bottom;
	opacity: .2;
	margin: 0px 3px;
}

.weight {
	width: 100%;
	max-width: 150px;
	font-weight: 600;
	font-size: 18px;
}

.status {
	width: 100%;
	max-width: 120px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: #888;
}

.status span.dot {
	width: 10px;
	height: 10px;
	background: #a6b8db;
	border-radius: 50%;
	aspect-ratio: 1;
}

.status.green span.dot {
	background: #037847;
}

.weight span {
	font-size: .75em;
	font-weight: normal;
}

.top_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top_header img {
	max-width: 24px;
}

.mpg_store {
	padding: 15px 15px 15px;
	background: #fff;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	row-gap: 15px;
}

.top_header h4 {
	font-size: 16px;
	font-weight: 700;
}

/***********rank css************/
.rank_list {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.rank {
	background: #fff;
	border: 1px solid #ddd;
	padding: 12px 15px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.rank img {
	max-width: 32px;
}

.rank h5 {
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 14px;
	color: #000;
	align-items: center;
}

.rank h5 span {
	font-weight: 400;
	border: 1px solid #ddd;
	padding: 6px;
	border-radius: 5px;
}

div#carouselExampleAutoplaying .carousel-inner {
	display: flex;
}

div#carouselExampleAutoplaying .carousel-inner .carousel-item {
	min-width: 100%;
}

.custom_carousel p {
	text-align: center;
	font-size: 14px;
	color: red;
}

div.custom_carousel {
	padding: 0px 10px;
}

div.custom_carousel button {
	position: absolute;
	width: 24px;
	height: 24px;
	top: calc(50% - 12px);
	background: #000;
	padding: 5px;
	border-radius: 50%;
}

div.custom_carousel button:last-child {
	right: -25px;
}

div.custom_carousel button:nth-last-child(2) {
	left: -25px;
}

.mpg_store .top_header {
	display: flex;
	position: relative;
}

.mpg_store .top_header h4 {
	width: 100%;
}

.mpg_store .top_header:not(.active) .input_search_mpg {
	width: 100%;
	max-width: 36px;
	overflow: hidden;
}

.mpg_store .top_header:not(.active) .input_search_mpg input {
	padding: 10px;
	font-size: 0px;
	background-position: center;
	background-size: cover;
}

.mpg_store .top_header.active .input_search_mpg input {
	border: 1px solid #ddd;
	width: 100%;
}

.mpg_store .top_header.active h4 {
	position: absolute;
	visibility: hidden;
}

.input_search_mpg {
	width: 100%;
}

/**********************user details card popup***************/
.map_frame {
	position: relative;
}

.unit_details {
	padding: 15px;
	background: #fff;
	border-radius: 15px;
	display: none;
	flex-direction: column;
	row-gap: 8px;
	position: absolute;
	bottom: 20px;
	top: auto;
	max-width: 80%;
	left: 10%;
	width: 100%;
}

.unit_details.active {
	display: flex;
}

.unit_details .profile {
	padding: 0px;
	background: transparent;
}

.unit_details img.close {
	position: absolute;
	right: -11px;
	width: 24px;
	background: #fff;
	filter: invert(1);
	padding: 7px;
	border-radius: 50%;
	top: -12px;
}

.unit_details h4 {
	display: flex;
	justify-content: space-between;
}

.unit_details h4,
.unit_details h4 * {
	font-size: 16px !important;
	font-weight: bold;
}

.unit_details h4 span {
	font-size: .75em !important;
	font-weight: normal !important;
}

.with_truck_img {
	display: flex;
	justify-content: space-between;
}

.with_truck_img img:last-child {
	max-width: 60px;
}

.with_truck_img span.user_name span:not(.det) {
	font-weight: 700 !important;
	color: #000;
}

.order {
	border: 1px solid #ddd;
	border-radius: 15px;
	display: flex;
}

.order_cards {
	padding: 15px;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	width: calc(100% / 3);
}

.order_cards h5 {
	font-size: 12px;
	font-weight: 700;
}

.dates h6 {
	font-size: 10px;
	display: flex;
}

.dates h6 span:not(.time):first-child {
	min-width: 80px;
}

.dates {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.order_cards:nth-child(2) {
	border: 1px solid #ddd;
	border-top: none;
	border-bottom: none;
}

img.route {
	aspect-ratio: 3 / 1.5;
	border-radius: 10px;
	max-width: 150px;
}

.diagnostics h6 {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
}

.diagnostics {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

span.view_all_diag {
	font-size: 10px;
	color: blue;
}

span.address::before {
	content: "";
	height: 10px;
	width: 10px;
	border: 1px solid #ddd;
	display: block;
	position: absolute;
	left: -20px;
	top: 4px;
	border-radius: 5px;
}

span.address {
	position: relative;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	min-width: calc(100% - 80px);
}

span.address span.time {
	color: blue;
	width: auto;
}

.with_truck_img .profile img {
	max-width: 36px;
}

.menu_toggle {
	max-width: 21px;
	cursor: pointer;
}

/*********************************overview page css**************************/
.overview , .safety {
	padding: 20px;
	background: #fff;
	border-radius: 20px;
}

.header_with_filter_options {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.category {
	display: flex;
	align-content: center;
	padding: 0px;
	list-style: none;
	gap: 10px;
}

.category li.active {
	background: #a6b8db;
}

.category li {
	padding: 5px 16px;
	background: #a6b8db;
	border-radius: 22px;
	background: #f6faff;
	font-size: 13px;
}

.attr_filters , .safe_filters {
	padding: 10px 0px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.overview input , .safety input {
	padding: 8px 15px;
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid #ddd;
	color: #898989;
}

.attr_side ul , .safe_side ul {
	display: flex;
	align-items: center;
	gap: 25px;
	list-style: none;
	font-size: 13px;
	padding: 0px;
}

.attr_side ul .down , .safe_side ul .down {
	font-size: 10px;
	display: block;
	transform: scale(1, .7) rotateX(180deg);
}

.attr_side li , .safe_side li {
	display: flex;
	gap: 3px;
	align-items: center;
}


#cusTable th {
	background: #f7f7f7;
	padding: 10px 15px;
	font-size: 11px;
	font-weight: normal;
	color: #808080;
}

#cusTable th .down {
	display: inline-block;
	transform: rotateX(180deg) scale(1, 0.5);
}

.two_data {
	display: flex;
	flex-direction: column;
	row-gap: 0px;
}

.ft_16 {
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 3px;
}

.ft_12 {
	font-size: 11px;
}

.ft_16.dark {
	font-weight: 600;
}

.ft_16 img {
	width: 12px;
	height: auto;
}

#cusTable {
	width: calc(100% + 40px);
	margin-left: -20px !important;
}

.light {
	color: #888;
}

.dark {
	color: #595959;
}

.status_table {
	font-size: 11px;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 5px 10px;
	text-align: center;
	border-radius: 20px;
	background: #f5f5f5;
	justify-content: center;
	width: auto;
	float: left;
}

.dot {
	display: block;
	width: 8px;
	height: 8px;
	background: #ddd;
	border-radius: 50%;
}

#cusTable td {
	padding: 10px 15px;
	text-align: left;
}

.action img {
	width: 15px;
	opacity: .7;
	cursor: pointer;
}

.action_list {
	padding: 5px 0px;
	font-size: 12px;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .05);
	border-radius: 15px;
	list-style: none;
	color: #888;
	position: absolute;
	right: 0px;
	left: auto;
	width: 100%;
	min-width: 150px;
	background: #fff;
	z-index: 9;
}

.action_list:not(.act) {
	display: none;
}

.action_list li {
	padding: 6px 15px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.action_list li:last-child {
	border: none;
}

#cusTable td.action {
	position: relative;
}

.fuel_level {
	display: flex;
	font-size: 12px;
	align-items: center;
	gap: 10px;
}

.fuel_level .bar {
	width: 50px;
	height: 5px;
	border-radius: 3px;
	background-image: linear-gradient(to right, #037847 87%, #fff 87%);
	border: 1px solid #ddd;
}

#cusTable tr:not(:last-child) td {
	border-bottom: 1px solid #ddd;
}

.status_table.gactive {
	background: #0378471c;
	color: #037847;
}

.status_table.gactive .dot {
	background: #037847;
}

.status_table.bgactive .dot {
	background: #fff;
}

.status_table.bgactive {
	background: #037847;
	color: #fff;
}

nav[aria-label="Page navigation example"] ul li a {
	font-size: 12px;
}

nav[aria-label="Page navigation example"] {
	display: flex;
	justify-content: end;
	margin-top: 15px !important;
}

/****************overview popup******************/
.popup_form:not(.act_pop) {
	display: none;
}

.popup_form {
	display: flex;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .5);
	align-items: center;
	justify-content: center;
	padding: 50px 20px;
}

.form_content {
	padding: 30px;
	background: #fff;
	border-radius: 20px;
	max-height: calc(100vh - 100px);
	overflow-y: scroll;
	max-width: 550px;
}

.form_content form {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.form_group {
	display: flex;
	flex-direction: column;
	row-gap: 7px;
	width: 100%;
}

form .form_control {
	padding: 11px 15px;
	line-height: 1;
	border: 1px solid #ddd;
	border-radius: 7px;
	outline: none;
	font-size: 13px;
	width: 100%;
}

.form_content::-webkit-scrollbar {
	display: none;
}

.add_attribute {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 10px;
	cursor: pointer;
}

.add_attribute img {
	width: 20px;
}

.group_custom {
	display: flex;
	gap: 15px;
	width: 100%;
}

.group_custom .form_group:first-child {
	width: calc(100% - 165px);
}

.group_custom .form_group:not(:first-child) {
	max-width: 150px;
}

.form_group label {
	font-size: 14px;
	font-weight: 500;
}

.add_aux {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	width: 100%;
	gap: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 7px;
	font-size: 13px;
	cursor: pointer;
}

.add_aux img {
	width: 10px;
	transform: rotate(45deg);
}

.edit_option input {
	width: 100%;
}

.edit_option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.edit_option span.edit_field {
	padding: 11px 25px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor: pointer;
}

.input_radio_options {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 10px;
	overflow: hidden;
}
.option_radio.l_blu {
    background: skyblue;
}

.option_radio {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 13px;
	border-right: 1px solid #ddd;
	font-size: 12px;
	text-align: center;
	width: 100%;
	cursor: pointer;
}

.option_radio input {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0;
}

.option_radio:last-child {
	border-right: none;
}

.option_radio:first-child {
	max-width: 45px;
}

.option_radio:nth-child(2) {
	max-width: 90px;
}

.option_radio:nth-last-child(2) {
	max-width: 95px;
}

label.small {
	font-weight: normal;
	font-size: 12px;
}

form h5 {
	font-weight: 600;
}

.coaching_box {
	padding-left: 30px;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	padding-top: 20px;
}
.coaching_box.disable {
    opacity: .5;
    pointer-events: none;
}
.check_div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.check_div input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

.label_coach_event {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

span.pos_rel {
	position: relative;
	width: 100%;
}

span.pos_rel span.unit {
	font-size: 13px;
	position: absolute;
	right: 15px;
	top: calc(50% - 10px);
}

.speed_limit {
	display: flex;
	align-items: center;
	gap: 15px;
}

.action_form_buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.take_picture {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
}

span.take_picture_button {
	padding: 9px 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 12px;
}

.action_form_buttons button {
	padding: 7px 20px;
	font-size: 13px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-weight: 500;
}

.action_form_buttons div {
	display: flex;
	gap: 15px;
}

.action_form_buttons button.save {
	background: #0369ea;
	color: #fff;
	border-color: #0369ea;
}
/*****************pair assets*******************/
.popup_form.pair_assets .form_content , .popup_form.more_filter .form_content {
    padding: 0px;
}
.header_popup {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}
.header_popup h5 {
    font-size: 18px;
    font-weight: 600;
}
.group_field_options {
    display: flex;
    padding: 20px 15px;
    gap: 15px;
    width: 100%;
}
.group_field_options .form_group {
    width: calc(100% / 2 - 7.5px);
}
.pair_assets form {
    gap: 0;
}
.pair_assets .action_form_buttons {
    padding: 20px 15px;
    display: flex;
    justify-content: flex-end;
}
/********************search with options************************/
.dropdown_container {
	position: relative;
	width: 250px;
}

.search-box {
	width: 100%;
	display: flex;
	align-items: center;
}

.search-box input {
	outline: none;
	flex: 1;
	border: 1px solid #ddd;
}

.clear-btn {
	cursor: pointer;
	display: none;
	padding: 0 8px;
	font-size: 18px;
	color: #888;
}

.drop_down {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-height: 150px;
	overflow-y: auto;
	display: none;
	flex-direction: column;
	row-gap: 7px;
	padding: 15px;
}

.drop_down div {
	cursor: pointer;
	font-size: 13px;
}
.drop_down div:hover {
	color: #a6b8db;
}
.edit_option:not(.act_vin) .vin_cancel {
    display: none;
}
.vin_cancel {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
}
.edit_option.act_vin {
    flex-direction: column;
    row-gap: 10px;
}
.edit_option.act_vin .edit_vin {
    display: none;
}
.edit_option.act_vin .edit_vin {
    display: none;
}
.vin_cancel span {
    padding: 8px 25px !important;
}
.aux_input_inn {
    width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
.aux_input_inn .group_custom {
    position: relative;
    padding-right: 30px;
    display: flex;
    align-items: center;
}
span.close_aux_input , span.close_attri {
    position: absolute;
    right: 0px;
    width: 12px;
    bottom: 12px;
	cursor: pointer;
}
input.engine_hour {
    padding: 0px;
    background: transparent !important;
    border: none;
}
.add_attributes_code .group_custom {
    position: relative;
    padding-right: 30px;
}
.add_attributes_code {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
/***************pair assets select********************************/
.link_container { position: relative; width: 100%; display: flex; align-items: center; }
#link_search { width: 100%; border: 1px solid #ccc; border-radius: 4px; }
.link_clear_btn { position: absolute; right: 10px; cursor: pointer; display: none; font-size: 18px; color: red; }
.link_dropdown { position: absolute; width: 100%; top: 40px; background: white; border: 1px solid #ccc; display: none; max-height: 150px; overflow-y: auto; z-index: 1000; }
.link_dropdown div { padding: 8px; cursor: pointer; font-size: 12px; }
.link_dropdown div:hover { background: #f0f0f0; }

/***************tag dropdown***********************/
.tags_div_main {
    display: flex;
    width: 100%;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 8px 15px 8px 10px;
    position: relative;
}
.tags_div_main input.tag_input {
    border: none;
    padding: 0px;
	outline: none;
}
.tags_div_main .tag_dropdown {
    position: absolute;
    width: 100%;
    background: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 7px;
    left: 0;
    top: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    cursor: pointer;
}
.tag_items {
    font-size: 13px;
}
.tags_div_main .tag_dropdown:not(.sh) {
    display: none;
}
.selected_tags {
    display: flex;
    gap: 5px;
}
.tag_div {
    padding: 3px 5px;
    font-size: 11px;
    display: flex;
    gap: 7px;
    background: #a6b8db;
    border-radius: 5px;
    color: #fff;
}
.tag_div span.close_tag {
	cursor: pointer;
}

/************************registration page***********************/
section.registration {
	background: url(../images/bg_register.webp);
	background-position: center center;
	background-size: cover;
	min-height: 100vh;
	padding: 50px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.register_form_card {
    padding: 60px;
    width: 100%;
    max-width: 700px;
    background: rgba(0,0,0,.5);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}
.register_form_card h4 {
    font-size: 24px;
    color: #fff;
    text-align: center;
    font-weight: 600;
}
.register_form_card label {
    color: #fff;
}
.register_form_card form {
    display: none;
    flex-direction: column;
    row-gap: 20px;
}
.register_form_card .form_control {
    padding: 15px;
}
.register_form_card span {
    color: #fff;
}
.register_form_card .form_control[type="submit"] {
    background: #A6B8DB;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    border-color: #A6B8DB;
}
.register_form_card h5 {
    color: #fff;
}
.register_form_card label.center span {
    font-weight: bold;
}
.register_form_card label.center {
	text-align: center;
}
span.info_icon img {
    width: 16px;
    display: inline;
}
span.info_icon {
    position: relative;
}
span.info_icon span.info {
    padding: 15px;
    background: #000;
    border-radius: 10px;
    position: absolute;
    min-width: 288px;
    visibility: hidden;
}
span.info_icon img:hover ~ span.info {
    visibility: visible;
}
.register_form_card form.act_reg {
    display: flex;
}
label.center span , span.forgot_pass {
	cursor: pointer;
}

/************************safety page*****************************/
.safety_more_filters {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-left: 0px;
    border-right: 0px;
    margin: 0px -20px !important;
}
img.change_gridto {
    max-width: 32px;
	cursor: pointer;
}
._safety_fleft {
    display: flex;
    align-items: center;
    gap: 20px;
}
.date_filter {
    display: flex;
	position: relative;
	cursor: pointer;
}
.tags_filter, .event_types, .more_filters {
	position: relative;
	cursor: pointer;
}
img.chev {
    width: 8px;
}
span.date_f {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}
span.date_f img {
    max-width: 12px;
}
span.date {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tags_filter .fil_cont {
    background: #E5F0FC;
    border-radius: 10px;
}
span.fil_cont {
    padding: 7px 15px;
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 14px;
}
span.fil_cont img {
    max-width: 18px;
}
.safety_more_filters .down , .safety_actions .down {
    font-size: 10px;
    display: block;
    transform: scale(1, .7) rotateX(180deg);
}
span.badge_tag {
    background: #0369EA;
    color: #fff;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    border-radius: 10px;
}
/**********Safety list*******************/
.safety_list {
    padding: 20px 0px;
}
.list_item {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.list_item .list {
    padding: 20px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.list_item:not(.grid_items) .list .img_list {
	max-width: 300px;
}
.list_item .list .img_list img {
    border-radius: 20px;
}
.list_cont {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}
p.name_safety {
    display: flex;
    gap: 10px;
    align-items: center;
}
p.name_safety span.name {
    font-weight: 600;
}
span.dot.orange {
    background: #EF6706;
}
.safety_ldetail p {
    accent-color: #CCD3DB;
}
.safety_ldetail {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}
.safety_actions {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.safety_actions span.dismiss {
    text-decoration: underline;
}
span.need_review {
    padding: 10px 15px;
    background: #CCD3DB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.list_item.grid_items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.list_item.grid_items .list {
    width: calc(100% / 2 - 10px);
    flex-direction: column;
    padding: 15px 15px 30px;
}
/*****************safety details page ***************************/
.safety_single_details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    border-top: 1px solid #ddd;
    padding: 10px 20px;
    margin: 0px -20px !important;
}
.left_details {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.left_details .arr_rev {
	max-width: 20px;
	transform: rotate(180deg);
}
.left_details img {
	max-width: 20px;
}
span.name_det {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.2;
}
span.name_d {
    font-weight: 600;
}
span.det_date {
    opacity: .65;
}
span.edit_label {
    color: #0369EA;
}
.video_outside {
	margin: 0 -20px !important;
	width: calc(100% + 40px);
}
.single_safety_details {
    padding: 20px 0px;
}
.single_safety_details .left_details span {
    opacity: 1;
}

.tag_add img {
    max-width: 8px;
}
.tag_add {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 12px;
}
.tag_add li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    background: #E5E9ED;
    border-radius: 15px;
}
span.add_tag {
    padding: 5px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
span.add_tag img {
    transform: rotate(45deg);
}
.upper_details {
    display: flex;
    align-items: center;
    gap: 30px;
}
.single_safety_details {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.form_data_single_safety label {
    font-size: 14px;
}
.form_data_single_safety .form_control {
    padding: 10px 0px;
    font-size: 14px;
    border: none;
}
.form_data_single_safety select.form_control {
    padding: 10px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 13px;
}
.form_data_single_safety {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    padding: 15px 0px;
    border: 1px solid #ddd;
    border-left: 0px;
    border-right: 0px;
}
.form_data_single_safety .form_group {
    width: 100%;
    display: flex;
    flex-direction: column;
}
span.form_control.underline {
    display: flex;
    align-items: center;
    gap: 10px;
}
img.truck_i {
    max-width: 20px;
}
.form_data_single_safety .form_group:not(:nth-child(2)) {
    max-width: 220px;
}
span.form_control.red {
    color: #DF2036;
}
.safety_blue {
    padding: 20px;
    background: #A6B8DB;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.blue_top {
    gap: 10px;
    display: flex;
    align-items: center;
}
.blue_top img {
    width: 24px;
}
.delivery_details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.view_trip {
    font-size: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #0369EA;
}
.view_trip span.dot {
    background: #000;
}
.delivery_details ul {
    padding: 0px;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.delivery_details li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.delivery_details li span.circle {
    position: relative;
    background: #607184;
    width: 32px;
    aspect-ratio: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.delivery_details li span.address::before {
    display: none;
}
.delivery_details li span.del_details {
    font-size: 14px;
}
.delivery_details li span.del_details span.address {
    font-weight: 500;
}
.delivery_details li span.del_details span:not(.address) {
    opacity: .6;
    font-size: 13px;
}
.delivery_details li img.loc {
    width: 20px;
}
.delivery_details li:first-child span.circle::before {
    content: "";
    height: 100%;
    width: 4px;
    background: #607184;
    position: absolute;
    left: calc(50% - 2px);
    top: 100%;
}
.initial_tab {
    border-bottom: 1px solid #ddd;
    display: flex;
}
.initial_tab span.int_tab {
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #808080;
    font-weight: 500;
    align-items: center;
    gap: 10px;
}
.initial_tab span.int_tab span.badge_gray {
    background: #f7f7f7;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1;
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.comment {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    max-width:650px;
}
.comment .form_group {
    padding-top: 15px;
}
.comment .form_group input {
    padding: 12px 15px;
}
.custom_safety_filter:not(.sh) {
	display: none;
}

/***************filters dropdown css*****************************/
.custom_safety_filter {
	position: absolute;
	width: 100%;
	top: 100%;
	background: #fff;
	border: 1px solid #ddd;
	padding: 0;
	border-radius: 15px;
	min-width: 270px;
	overflow: hidden;
	z-index: 99;
}
.custom_safety_filter li {
	list-style: none;
	padding: 0px;
	display: flex;
	gap: 6px;
	font-size: 13px;
}
.custom_safety_filter ul {
	padding: 0px;
	display: flex;
	flex-direction: column;
	row-gap: 7px;
	padding: 15px;
	max-height: 180px;
	overflow: scroll;
}
.custom_safety_filter ul h6 {
	font-size: 14px;
}
.event_head {
	padding: 10px;
	background: #f7f7f7;
}
.event_head input {
	padding: 6px 15px;
	font-size: 12px;
	width: 100%;
}
.more_filter form {
	padding: 20px;
	gap: 10px;
}
.more_filter form select {
	background: transparent;
}
.more_filter form select option {
	font-family: Montserrat !important;
}
.more_filter .action_form_buttons {
	margin: 10px -20px 0px !important;
	width: calc(100% + 40px );
	padding: 15px 20px 0px;
}
/*******************responsive css*******************************/
@media (min-width:1025px) {
	.menu_toggle {
		display: none;
	}

	main iframe:not(.small) {
		height: calc(100vh - 410px);
	}
}

@media (max-width:1024px) {

	.location,
	.mobile_res {
		display: flex;
		justify-content: space-between;
	}

	aside {
		position: fixed;
		top: 0;
		left: -100%;
		padding: 20px;
		width: 100%;
		max-width: 320px;
		height: 100%;
		background: #fff;
		z-index: 11;
		transition-duration: 1s;
	}

	aside.active {
		left: 0;
		transition-duration: 1s;
	}

	aside nav ul {
		padding: 0px;
	}

	aside nav ul li a {
		font-size: 13px;
		padding: 10px;
	}

	aside nav ul li a img {
		width: 20px;
		height: 20px;
		object-fit: contain;
	}

	aside nav ul {
		gap: 0;
	}

	.profile {
		padding: 0px;
	}

	main::after {
		content: "";
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .25);
		display: none;
	}

	main.active::after {
		display: block;
	}

	.location .menu_toggle img {
		max-width: 18px;
	}

	#cusTable td {
		padding: 8px 10px;
		text-align: left;
	}

	.ft_16 {
		font-size: 12px;
	}
}

@media (max-width:767px) {
	.order {
		flex-direction: column;
		gap: 10px;
		padding: 15px;
	}

	.order_cards {
		width: 100%;
		border: none !important;
		padding: 0px;
	}

	.order_cards:last-child {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	img.route {
		max-width: 60px;
		border-radius: 5px;
	}

	.main_content {
		flex-direction: column;
	}

	.main_content .assets {
		width: 100%;
	}

	.assets_header h2,
	main h2 {
		font-size: 16px;
	}

	.assets_header input,
	.mpg_store input {
		max-width: 160px;
		font-size: 12px;
	}

	img.ass_img {
		max-width: 36px;
	}

	.card_ass {
		padding: 12px;
	}

	.name_ass {
		font-size: 12px;
		width: 100%;
		gap: 0px;
	}

	.status {
		font-size: 0px;
		max-width: 10px;
	}

	.weight {
		max-width: 50px;
		font-size: 14px;
	}

	.mpg_store {
		width: 100%;
	}

	.mpg_store .top_header.active .input_search_mpg input {
		max-width: 100%;
	}

	.dates {
		row-gap: 7px;
	}

	.map_frame iframe {
		height: 550px;
	}

	.unit_details {
		bottom: 80px;
		max-width: 90%;
		left: 5%;
	}

	.rank h5 {
		font-size: 13px;
	}

	.rank img {
		max-width: 27px;
	}


	#cusTable thead {
		display: none;
	}

	#cusTable tbody {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding: 20px;
	}

	#cusTable tbody tr {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
		padding: 20px;
		border: 1px solid #ddd;
		border-radius: 12px;
		position: relative;
		background-color: #fff;
	}

	#cusTable tr td:not(:last-child) {
		border-bottom: 1px solid #ddd;
	}

	#cusTable td {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10px 0px;
		align-items: center;
	}

	#cusTable tr td:last-child,
	#cusTable tr td:nth-last-child(2) {
		border: none;
	}

	#cusTable tr td::before {
		font-weight: 500;
		font-size: 13px;
	}

	#cusTable tr td:first-child::before {
		content: "Name";
	}

	#cusTable tr td:nth-child(2)::before {
		content: "Location";
	}

	#cusTable tr td:nth-child(3)::before {
		content: "Last Trip";
	}

	#cusTable tr td:nth-child(4)::before {
		content: "Status";
	}

	#cusTable tr td:nth-child(5)::before {
		content: "Current Fuel Level";
	}

	#cusTable tr td:nth-child(6)::before {
		content: "Current Driver";
	}

	#cusTable tr td:nth-child(7)::before {
		content: "License Plate";
	}

	#cusTable tr td:last-child {
		position: absolute;
		right: 17px;
		top: 23px;
		width: auto;
		z-index: 1;
	}

	#cusTable tr td:first-child {
		padding-right: 30px;
	}

	.two_data .ft_16 {
		justify-content: flex-end;
	}

	.attr_filters {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.attr_filters #searchInput {
		width: 100%;
		display: none;
	}

	.attr_filters {
		padding: 10px 0px 0px;
	}

	.overview {
		padding: 0px;
		background: transparent;
		border-radius: 0px;
	}

	.overview .over_main_header {
		padding: 20px;
		background: #fff;
		row-gap: 10px;
		position: sticky;
		top: 0px;
		z-index: 9999;
		width: calc(100% + 40px);
		margin: -20px -20px 0px !important;
		border-radius: 0px;
		display: flex;
		flex-direction: column;
	}

	.category li {
		padding: 5px 12px;
		font-size: 11px;
	}

	.header_with_filter_options {
		justify-content: space-between;
		width: 100%;
	}

	.coaching_box {
		padding-left: 0px;
	}

	.form_content {
		padding: 20px;
	}

	.option_radio:first-child,
	.option_radio:nth-child(2),
	.option_radio {
		max-width: 100% !important;
		justify-content: center;
		border-bottom: 1px solid #ddd;
	}

	.input_radio_options {
		flex-direction: column;
	}

	.option_radio:last-child {
		border-bottom: none;
	}

	.speed_limit {
		font-size: 12px;
	}

	.take_picture,
	form .form_control,
	.form_group label,
	form .form_control {
		font-size: 12px;
	}

	span.take_picture_button {
		padding: 9px 12px;
		font-size: 11px;
	}
}