.hired_trucking_form{



/* 	max-width: 700px; */

/* 	margin: auto; */

position: relative;

}

.ui-timepicker-standard{
	z-index: 20!important;
}



.hired_trucking_form > .content{

	width: 100%!important;

	margin: 0px!important;

	height: 100%;

	min-height: 40rem;

	background: #fff!important;

/* 	border: 1px solid #D6D9D5; */

/* 	padding-top: 20px; */

}



.hired_trucking_form > .steps .number{

	display: none

}





.wizard > .content > .body{

	width: 100%!important;

	height: 100%!important;

	float: unset!important;

	position: unset!important;

	padding-bottom: 60px!important;

}





.hired_trucking_form > .content > fieldset{



	border: 0px!important;

}


.hired_trucking_form ._back_btn{
	margin-left: 15px;
}



.hired_trucking_form  legend{

	padding: 0px!important;

}





/* .wizard > .steps{

	margin-bottom: 30px;

} */



.wizard > .steps > ul {

	max-width: 600px;

	margin: auto;

	overflow: hidden;

	display: flex;

	justify-content: center;

}



.hired_trucking_form > .steps > ul > li, .wizard > .actions > ul > li{



	width: auto;

}



.wizard > .steps > ul > li{

	float: unset!important;

	margin: 0px!important;

}



.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active{

	margin: 0px!important;

	padding: 5px!important;

	border-radius: 50%!important;

	height: 40px;

	width: 40px!important;

	text-align: center;

	line-height: initial;

	font-size: 16px;

	font-weight: 500;

	display: flex!important;

	align-items: center;

	justify-content: center;

	position: relative;
	z-index: 4;

}



.hired_trucking_form > .steps > ul li{

	list-style: none;

	/* display: inline-block; */

	flex: 0 0 25%;

	position: relative;

	text-align: center;

}



.hired_trucking_form > .steps > ul li:after {

	content: "";

	position: absolute;

	width: 100%;

	height: 1px;

	background-color: #ddd;

	top: 50%;

	left: 50%;

	z-index: 2;

	transform: translate(-50%, -50%);

}



.hired_trucking_form > .steps > ul li.current:after {



	background-color: #2184be!important;



}





.hired_trucking_form > .steps > ul li.done:after {



	background-color: #9dc8e2!important;



}



.hired_trucking_form > .steps > ul li:last-child:after {

	display: none;

}





.hired_trucking_form > .steps > ul li:last-child {

	flex: 0!important;

}



.wizard > .actions{

	position: absolute!important;

	bottom: 20px;

}



.hired_trucking_form > .actions ul{

	display: flex!important;

	padding: 0 12px!important;

}



.hired_trucking_form > .actions ul li:first-child a{

	background: #333!important;

}



.hired_trucking_form > .content > .body input {

	display: block;

	border: 1px solid #E1E3E6!important;

	border-radius: 5px;

	padding: 8px!important;

	font-size: 16px;

	margin-bottom: 15px;

	width: 100%;

	height: 40px;

	color: #333;

}



.hired_trucking_form > .content > .body label{

	/* font-size: 1.5rem!important; */

	color: #454342;

	font-weight: 500;

}





.hired_trucking_form > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{

	font-size: 16px;

	padding: 5px 30px!important;

}



.hired_trucking_form ._frow{

	display: grid;

	width: 100%;

	grid-template-columns: auto 50%;

	gap: 20px;

	margin: 15px 0;

}

/* .hired_trucking_form textarea{
	padding: 15px;
} */

._form_new_user textarea{
	padding: 15px;
}

._frow_3{
	display: grid !important;
	grid-template-columns: 31% 31% 31%;
	gap: 20px;
}

.__form-title{

	margin-bottom: 15px;
	font-size: 18px;
}

._frow_1{
	display: grid !important;
	grid-template-columns: 100%;
	margin: 20px 0;
}




/* .hired_trucking_form ._fcol{

} */



.hired_trucking_form .remove_load_multiple{

	border: 1px solid #F00;

	font-size: 16px;

	border-radius: 5px;

	padding: 4px;

	background-color: #fff;

	cursor: pointer;

	display: block;

	width: 100px;

	text-align: center;

	float: right;

	color: #F00;

	font-weight: 600;

}

._hourly_load_add .remove_hourly_load{

	border: 1px solid #F00;

	font-size: 16px;

	border-radius: 5px;

	padding: 4px;

	background-color: #fff;

	cursor: pointer;

	display: block;

	width: 100px;

	text-align: center;

	float: right;

	color: #F00;

	font-weight: 600;

}


.hired_trucking_form .add_hourly_load{
	border: 1px solid #3787C3;

	border-radius: 5px;

	width: 120px;

	display: block;

	padding: 4px;

	text-align: center;

	color: #3787C3;

	font-size: 16px;

	font-weight: 600;

	cursor: pointer;
}





.hired_trucking_form .add_load_multiple{

	border: 1px solid #3787C3;

	border-radius: 5px;

	width: 120px;

	display: block;

	padding: 4px;

	text-align: center;

	color: #3787C3;

	font-size: 16px;

	font-weight: 600;

	cursor: pointer;

}



.hired_trucking_form .load_multiple{

	margin-bottom: 30px;

}

.hired_trucking_form .load_multiple p{
	margin: 0px;
}

.hired_trucking_form .load_multiple{
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}

.hired_trucking_form ._hourly_load_add{
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}






.hired_trucking_form .tooltip {

	position: relative;

	display: inline-block;
	opacity: 1!important;

}



.hired_trucking_form .tooltip i{

	font-style: normal;

	background: #333;

	color: #ffff;

	border-radius: 50%;

	padding: 2px 5px;

	font-size: 10px;

	text-decoration: none;

}



.hired_trucking_form .tooltip .tooltiptext {

	visibility: hidden;

	width: max-content;

	background-color: black;

	max-width: 300px;

	color: #fff;

	text-align: center;

	border-radius: 6px;

	padding: 5px 15px;

	position: absolute;

	z-index: 1;

	top: -4px;

	font-size: 14px;

	font-weight: 400;

	line-height: 23px;

	text-align: left;

}



.hired_trucking_form .tooltip:hover .tooltiptext {

	visibility: visible;

}

.wizard > .content > .body label{
	margin-bottom: 0px!important;
	margin-top: 15px;
}

.wizard > .content > .body label.error{

	display: none!important;

}



fieldset img{

	max-width: 200px;

	width: 100%;

}



.img_documents{

	display: flex;

	list-style: none!important;

	flex-wrap: wrap;

}


.img_documents li {
	position: relative;
	list-style: none!important;
}


.img_documents li .far {
	position: absolute;
	color: red;
	right: 10px;
	top: 10px;
}

.f_loader_s{

	position: absolute;

	z-index: 1000;

	transform: translate(-50%, -50%);

	top: 50%;

	left: 50%;

	background: #ffffffd6;

	width: 100%;

	height: 100%;

	text-align: center;

	justify-content: center;

	align-items: center;

	display: none;

}



.f_loader {

	border: 16px solid #f3f3f3;

	border-radius: 50%;

	border-top: 16px solid #3498db;

	width: 120px;

	height: 120px;

	-webkit-animation: spin 2s linear infinite; /* Safari */

	animation: spin 2s linear infinite;



	position: absolute;

	transform: translate(-50%, -50%);

	left: 50%;

	top: 40%;

}



/* Safari */

@-webkit-keyframes spin {

	0% { -webkit-transform: rotate(0deg); }

	100% { -webkit-transform: rotate(360deg); }

}



@keyframes spin {

	0% { transform: rotate(0deg); }

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

}


#clear{
	background: #3787c3;
	color: #fff;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
	margin-top: 10px;
	cursor: pointer;
}

#clear_sup{
	background: #3787c3;
	color: #fff;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
	margin-top: 10px;
	cursor: pointer;
}



.job_type_checkbox{
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.job_type_checkbox input {
	width: auto!important;
	height: fit-content!important;
	margin: 0px!important;
}

.job_type_checkbox div{
	display: flex;
	align-items: center;
	gap: 5px;
}

.job_type_checkbox label{
	margin: 0px!important;
}

#payable_down_t{
	display: none!important;
}


.hour_minute .select2-container{
	width: 120px!important;
}


.add_extra_mail{
	background: #4CAF50;
	border: 1px solid #dfdfdf;
	padding: 10px 15px;
	color: #ffff;
	font-size: 14px;
	border-radius: 5px;
	cursor: pointer;
}

._extra_mail_input{
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
}


.remove_extra_mail{
	background: red;
	color: #ffff;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
}

._sub_btn{
	background: #3787C3;
	color: #ffff!important;
	padding: 10px 8px;
	border-radius: 5px;
	font-size: 14px;
	margin-right: 10px;
	border: 0px;
	cursor: pointer;
	margin-top: 30px;
	max-width: 200px;
	width: 100%;
}


select.error{
	background: rgb(251, 227, 228);
	border: 1px solid #fbc2c4;
	color: #8a1f11;
}

.wizard select{
	color: #333;
}


#support-ticket-form ._sub_btn{
	max-width: 200px;
}

._support-ticket-messages{
	display: grid;
	margin-top: 30px;
}

._support-ticket-messages textarea{
	padding: 10px;
}

._support-ticket-messages label{
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}


.support-ticket-section{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.support-ticket-list ul{
	list-style: none;
	padding: 0px;
	max-height: 400px;
	overflow-y: auto;
}

.support-ticket-list{
	flex: 0 0 500px;
}

.support-ticket-user{
	display: flex;
	align-items: center;
	gap: 10px;
}

.support-ticket-user i{
	font-size: 30px;
}

.__user_info ._user_name{
	font-weight: 600;
	font-size: 16px;
	display: block;
	height: 20px;
}

.support-ticket-list li {
	border-bottom: 1px solid #ebebeb;
	padding: 15px 0px;
	margin-bottom: 10px;
}

.support-ticket-list li:last-child{
	border-bottom: 0px!important;

}

.support-ticket-messages{
	font-size: 16px;
	line-height: 27px;
	margin-top: 15px;
}

.__user_info ._reply_date{
	font-size: 14px;
}

.support-ticket-info{
	flex: 0 0 290px;
}

.support-ticket-info ul{
	background: #F3FDF9;
	list-style: none;
	padding: 15px;
	border-radius: 5px;
	width: 100%;
}

.support-ticket-info ul li {
	display: flex;
	font-size: 14px;
	padding-bottom: 10px;
}

.support-ticket-info ul li> span {
	flex: 0 0 90px;
	font-weight: bold;
}

.__new{
	background: #27ae60!important;
}


table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>*{

	box-shadow: none!important;
}

table.dataTable.stripe>tbody>tr.odd, table.dataTable.display>tbody>tr.odd{

	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);

}


div.form-group:has(> select.error) .select2-selection  { 

	background: rgb(251, 227, 228);
	border: 1px solid #fbc2c4;
	color: #8a1f11;

}


div._fcol:has(> select.error) .select2-selection  { 

	background: rgb(251, 227, 228);
	border: 1px solid #fbc2c4;
	color: #8a1f11;

}

.see_more{
	color: #ffff !important;
	border-radius: 5px;
}



/* worksheet table css */

table.data_table>thead>tr>th, table.data_table>thead>tr>td {
	padding: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	font-weight: bold;
	text-align: left;
}

table.data_table>tbody>tr:nth-child(even), table.data_table>tbody>tr:nth-child(even) {
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
}

table.data_table tbody tr {
	background-color: transparent;
}

table.data_table tbody th, table.data_table tbody td {
	padding: 8px 10px;
}

.page-numbers {
	padding: .3em .4em;
	margin-left: 2px;
	cursor: pointer;
	border-radius: 2px;
	line-height: 27px;
	height: 33px;
}

.page-numbers.current{
	background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); 
	border: 1px solid rgba(0, 0, 0, 0.3); 
	padding: .3em .4em;
	margin-left: 2px;
	cursor: pointer;
	border-radius: 2px;
}

.page-numbers:hover{
	background:#333;
	color: #ffff;
}

.paginate_btn{
	margin-top: 30px;
	display: flex;
	justify-content: end;
	align-items: center;
}

table.data_table {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

table.data_table tbody {
	font-size: 14px;
}

.worksheets_status_show{
	display: flex;
	width: 100%;
/* 	justify-content: space-between; */
	gap: 15px;
	flex-wrap: wrap;
	border-bottom: 1px solid #9e9e9ed1;
	padding-bottom: 15px;
}

.worksheets_status_show input{
	width: 153px!important;
	padding: 0px!important;
	line-height: 0px;
	height: 37px!important;
}

.worksheets_status_show ._sub_btn{
	width: 100px;
	margin: 0px;
}


/* worksheet table css */


@media only screen and (max-width: 900px) {

	.hired_trucking_form ._frow{



		grid-template-columns: 100%;

		gap: 5px;

	}

	.support-ticket-list{
		flex: 0 0 100%;
	}

	.support-ticket-section{
		flex-direction: column-reverse;
	}

	.support-ticket-info{
		flex: 0 0 100%;
	}

}





@media only screen and (max-width: 400px) {



	.hired_trucking_form > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{

		font-size: 14px;

		padding: 5px 15px!important;

	}

}