/* Select User */
section#splash {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F87431;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}
section#splash img {
	width: 300px;
	max-width: 100%;
}
main#main-content {
	display: none;
	background: #FFF9F6;
}
main#main-content .logo_n_txt img {
	width: 300px;
	max-width: 100%;
}
main#main-content .logo_n_txt p {
	color: #B3B3B3;
	font-family: Poppins;
	font-size: 14px;
	font-weight: 500;
	margin: 20px 0 10px;
}
main#main-content .all_role_log h3 {
	color: #000;
	font-family: Poppins;
	font-size: 24px;
	font-weight: 600;
}
main#main-content .all_role_log .role-wrap_log {
	display: flex;
	gap: 20px;
}
main#main-content .all_role_log .role-wrap_log a.each_role {
	background: #FFF;
	text-decoration: none;
	display: flex;
	gap: 20px;
	padding: 20px;
	margin: 20px 0;
}
main#main-content .all_role_log .role-wrap_log a.each_role[role="contractor"] {
	border-radius: 24px 0px;
	box-shadow: 0px 6px 6px 0px rgba(248, 116, 49, 0.15);
}
main#main-content .all_role_log .role-wrap_log a.each_role[role="customer"] {
	border-radius: 0px 24px;
	box-shadow: 0px 13px 26px 0px rgba(248, 116, 49, 0.15);
}
main#main-content .all_role_log .role-wrap_log a.each_role .role_icon img {
	width: 75px;
}
main#main-content .all_role_log .role-wrap_log a.each_role .role_detail h4 {
	color: #F87431;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}
main#main-content .all_role_log .role-wrap_log a.each_role .role_detail p {
	color: #000;
	font-family: Poppins;
	font-size: 14px;
	margin: 0;
}
@media(max-width:768px) {
	main#main-content .all_role_log .role-wrap_log {
		display: block;
	}
}
@media (min-width: 768px) {
	section#back_role {
		background-color: #fff;
		max-width: 30%;
	}
}

@media (max-width: 400px) {
	main#main-content .logo_n_txt img {
		width: 185px;
	}
	main#main-content .all_role_log h3 {
		font-size: 18px;
	}
	main#main-content .all_role_log p {
		font-size: 14px;
	}
	main#main-content .all_role_log .role-wrap_log a.each_role .role_icon img {
		width: 55px;
	}
	main#main-content .all_role_log .role-wrap_log a.each_role .role_detail p {
		font-size: 11px;
	}
}

/* Login */
section#back_role {
	background-color: #fff;
}
section#back_role .back_arrow {
	background-color: #F3F3F3;
	padding: 20px;
	border-radius: 50%;
	display: flex;
}
section#back_role .back_arrow:hover {
	cursor: pointer;
}
section#back_role .back_arrow i {
	width: 24px;
	height: 24px;
	font-size: 24px;
}
section#back_role .role_name h3 {
	color: #000;
	font-family: Poppins;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
section#login {
	background-color: #FFF9F6;
}
section#login .login_wrap .login-header h4 {
	color: #000;
	font-family: Poppins;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
section#login .login_wrap .login-body input.form-control {
	height: 52px;
	padding: 10px 30px;
	border-radius: 50px;
	background: #FFF;
}
section#login .login_wrap .login-body input.form-control:hover,
section#login .login_wrap .login-body input.form-control:focus,
section#login .login_wrap .login-body input.form-control:active {
	box-shadow: none;
	outline: none;
	border: 1px solid #4086F4;
}
section#login .login_wrap .login-body button.login_btn {
	background-color: #F87431;
	color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 14px;
	display: block;
	width: 100%;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
}
section#login .login_wrap .login-body .forgot_pass_link {
	width: 100%;
	text-align: center;
	padding: 20px 0;
}
section#login .login_wrap .login-body .forgot_pass_link span {
	color: #00000080;
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	text-decoration: none;
	display: inline-block;
}
section#login .login_wrap .login-body .forgot_pass_link a {
	color: #4086F4;
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px;
	text-decoration-line: underline;
	display: inline-block;
}
section#login .login_wrap .login-body a.register_btn {
	background-color: #D6E6FF;
	color: #4086F4;
	border: 0;
	border-radius: 50px;
	padding: 14px;
	display: block;
	width: 100%;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
}

/* Register */
section#back_role {
	background-color: #fff;
}
section#back_role .back_arrow {
	background-color: #F3F3F3;
	padding: 20px;
	border-radius: 50%;
	display: flex;
}
section#back_role .back_arrow:hover {
	cursor: pointer;
}
section#back_role .back_arrow i {
	width: 24px;
	height: 24px;
	font-size: 24px;
}
section#back_role .back_to_login h3 {
	color: #000;
	font-family: Poppins;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
section#register {
	background-color: #FFF9F6;
	overflow: hidden;
}
section#register .register_wrap .register-header h4 {
	color: #000;
	font-family: Poppins;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
section#register .register_wrap .register-body input.form-control {
	height: 52px;
	padding: 10px 30px;
	border-radius: 50px;
	background: #FFF;
}
section#register .register_wrap .register-body input.form-control:hover,
section#register .register_wrap .register-body input.form-control:focus,
section#register .register_wrap .register-body input.form-control:active {
	box-shadow: none;
	outline: none;
	border: 1px solid #4086F4;
}
section#register .register_wrap .register-body .nice-select.form-control.cust-nc-slt.wide {
	height: 52px;
	padding: 5px 30px 10px;
	border-radius: 50px;
	background: #FFF;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple {
	border-radius: 50px;
	background: #FFF;
	padding: 5px 10px;
	min-height: 52px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: 1px solid #dee2e6;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple:hover,
section#register .register_wrap .register-body .select2-container .select2-selection--multiple:focus,
section#register .register_wrap .register-body .select2-container .select2-selection--multiple:active {
	border: 1px solid #4086F4;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple .select2-selection__clear {
	top: 10px;
	right: 25px;
	margin: 0;
	padding: 0;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple ul.select2-selection__rendered {
	margin: 0;
	padding: 0 0 0 15px;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple textarea.select2-search__field {
	line-height: 20px;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple ul.select2-selection__rendered li.select2-selection__choice {
	border: none;
	padding: 5px 10px;
	margin: 5px 10px 5px 0;
}
section#register .register_wrap .register-body .select2-container .select2-selection--multiple ul.select2-selection__rendered li.select2-selection__choice .select2-selection__choice__remove {
	display: none;
}
section#register .register_wrap .register-body span.select2-search.select2-search--inline {
	min-width: 300px;
}
section#register .register_wrap .register-body textarea.form-control {
	height: 52px;
	padding: 10px 30px;
	border-radius: 50px;
	background: #FFF;
}
section#register .register_wrap .register-body textarea.form-control:hover,
section#register .register_wrap .register-body textarea.form-control:focus,
section#register .register_wrap .register-body textarea.form-control:active {
	box-shadow: none;
	outline: none;
	border: 1px solid #4086F4;
}
textarea.custautosize {
	overflow-y: hidden;
	resize: none;
}
section#register .register_wrap .register-body #contractor_photos {
	border-radius: 50px;
	border: 1px solid #dee2e6;
}
section#register .register_wrap .register-body button.register_btn {
	background-color: #F87431;
	color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 14px;
	display: block;
	width: 100%;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
}
section#register .register_wrap .register-body .already_acc {
	width: 100%;
	text-align: center;
	padding: 20px 0;
}
section#register .register_wrap .register-body .already_acc span {
	color: #00000080;
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	text-decoration: none;
	display: inline-block;
}
section#register .register_wrap .register-body a.login_btn {
	background-color: #D6E6FF;
	color: #4086F4;
	border: 0;
	border-radius: 50px;
	padding: 14px;
	display: block;
	width: 100%;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
}

/* Inactive Locked */
section#inact_lock_pg {
	height: 100vh;
}
section#inact_lock_pg .go_back .lk_pg_btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
section#inact_lock_pg .go_back .lk_pg_btns a.bck2login,
section#inact_lock_pg .go_back .lk_pg_btns a.cont2admin {
	text-decoration: none;
	color: #FFF;
	text-align: center;
	font-family: Poppins;
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	display: inline-block;
	padding: 12px 30px;
	border-radius: 6px;
	background-color: #F87431;
	min-width: 205px;
}
section#inact_lock_pg .go_back .lk_pg_btns a.bck2login:hover,
section#inact_lock_pg .go_back .lk_pg_btns a.bck2login:focus,
section#inact_lock_pg .go_back .lk_pg_btns a.bck2login:active,
section#inact_lock_pg .go_back .lk_pg_btns a.cont2admin:hover,
section#inact_lock_pg .go_back .lk_pg_btns a.cont2admin:focus,
section#inact_lock_pg .go_back .lk_pg_btns a.cont2admin:active {
	background-color: #17236A;
}

/* Password Views */
section#foc_pass_views .foc_passcard .foc_card-body {
	background-color: #fff;
	padding: 35px;
	border-radius: 20px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
section#foc_pass_views .foc_passcard .foc_card-body input.form-control {
	height: 52px;
	padding: 10px 30px;
	border-radius: 50px;
	background: #FFF;
}
section#foc_pass_views .foc_passcard .foc_card-body input.form-control:hover,
section#foc_pass_views .foc_passcard .foc_card-body input.form-control:focus,
section#foc_pass_views .foc_passcard .foc_card-body input.form-control:active {
	box-shadow: none;
	outline: none;
	border: 1px solid #4086F4;
}
section#foc_pass_views .foc_passcard .foc_card-body button.passsubmit {
	background-color: #F87431;
	color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 14px 30px;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
}

/* Admin Views */
#main-admin-views {
	flex: 1;
}
#main-admin-views #top-banner {
	background-color: #F87431;
	padding: 20px 0;
	color: white;
	width: 100%;
}
#main-admin-views #top-banner h4 {
	font-size: 14px;
}
#main-admin-views .dt-search {
	text-align: right;
}

@media(min-width:768px) {
	#main-admin-views {
		flex: 1;
		padding: 0;
		width: calc(100% - 250px);
	}
	#main-admin-views #top-banner {
		padding: 20px 0;
	}
}

/* Inner Page */
.inner_foc_opg #top-banner {
	background-color: #F87431;
	padding: 20px 0;
	color: white;
	width: 100%;
}
.inner_foc_opg .foc_card {
	border-radius: 12px;
}
.inner_foc_opg .foc_card button.btn.btn-primary {
	background-color: #f87430;
	color: #fff;
}

/* Home */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
	background-color: #ffd4bf;
	border-radius: 10px;
}
main#app {
	min-height: 100vh;
	position: relative;
	background-color: #FFF9F6;
}
.dash_wrap .grt_wrap h4 {
	color: #FFF;
	font-family: Poppins;
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.dash_wrap .grt_wrap .log_obtn {
	display: inline-block;
	position: absolute;
	top: 20%;
	right: 20px;
}
section#bottom_nav {
	background-color: white;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}
section#bottom_nav .each_nav {
	text-decoration: none;
}
section#bottom_nav .each_nav svg {
	width: 40px;
	height: 40px;
	fill: #ADADAD;
	padding: 10px 0 5px;
}
#bottom_nav .each_nav.active {
	color: #F87431;
}
#bottom_nav .each_nav.active svg {
	fill: #F87431;
}
section#bottom_nav .each_nav h5 {
	color: #ADADAD;
}
#bottom_nav .each_nav.active h5 {
	color: #F87431;
}
#bottom_nav h5 {
	margin: 5px 0 0;
	font-size: 12px;
}


#main-content-comm {
	flex: 1;
}

#main-content-comm #top-banner {
	background-color: #F87431;
	padding: 20px 0 60px;
	color: white;
	width: 100%;
}
#main-content-comm #top-banner .greeting-profile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
#main-content-comm #top-banner .profile-avatar {
	margin-right: 15px;
}

#main-content-comm #top-banner .user-actions {
	display: flex;
	align-items: center;
}

#main-content-comm #top-banner h4 {
	font-size: 14px;
}

#main-content-comm #top-banner h2 {
	font-size: 20px;
}
.profile-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.search-bar-container {
	margin-top: -30px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
}

.search-bar {
	background-color: white;
	border-radius: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.search-bar .search-input-group {
	display: flex;
	align-items: center;
}
#main-content-comm .search-bar input {
	flex-grow: 1;
	border: none;
	outline: none;
	font-size: 16px;
	padding: 10px 15px;
	background: transparent;
}

#main-content-comm .recent-jobs h3 {
	font-size: 18px;
	font-weight: 600;
	color: #000;
}

#main-content-comm .more-link {
	font-size: 14px;
	font-weight: 500;
}

#main-content-comm .job-card {
	background-color: #fff;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	margin-bottom: 15px;
}
#main-content-comm .job-card .job-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}


#main-content-comm .job-card h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: #000;
}
#main-content-comm .job-card .job-meta {
	font-weight: 500;
	font-size: 12px;
}
#main-content-comm .job-card .date {
	font-size: 12px;
	color: #888;
}
#main-content-comm .job-card p {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}
#main-content-comm .job-card .job-description {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#main-content-comm .job-details {
	font-size: 12px;
	color: #888;
}

#main-content-comm .job-details .location i {
	margin-right: 5px;
	color: #4086F4;
}


@media (min-width: 768px) {
	main#app {
		display: flex;
	}
	#sidebar {
		width: 250px;
		min-height: 100vh;
		background-color: #F87431;
		padding: 20px;
	}
	#main-content-comm {
		flex: 1;
		padding: 0;
		width: calc(100% - 250px);
	}
	#main-content-comm #top-banner {
		padding: 20px 0;
	}
	.search-bar-container {
		margin-top: 20px;
	}
	#main-content-comm #top-banner .banner-content {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}
	#main-content-comm #top-banner h4 {
		margin: 0;

	}
	.dash_wrap .grt_wrap {
		background-image: none;
	}
	.dash_wrap .grt_wrap p#greeting-web {
		color: #FFF;
		font-family: Poppins;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}
	.grt_wrap_web .log_obtn {
		text-align: end;
	}
}

@media (max-width: 767px) {
	.dash_wrap .grt_wrap {
		position: relative;
		background-image: url(/images/dash-bg.svg);
		background-size: 100% 115%;
		background-position-y: bottom;
		min-height: 160px;
		padding: 20px;
	}
	.dash_wrap .grt_wrap p#greeting-mobile {
		color: #FFF;
		font-family: Poppins;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}
	#main-content-comm #top-banner {
		border-radius: 0 0 30px 30px;
		padding: 20px 0 40px;
	}
	#main-content-comm #sidebar {
		display: none;
	}

	#main-content-comm #bottom_nav {
		display: block;
	}
	.search-bar-container {
		padding: 0 15px;
	}
	#main-content-comm #top-banner .greeting-profile {
		/* flex-direction: column; */
		align-items: flex-start;
	}

	#main-content-comm #top-banner .user-actions {
		margin-top: 15px;
		align-self: flex-end;
	}
	#main-content-comm .job-card .job-description {
		-webkit-line-clamp: 3;
	}
}
@media (min-width: 768px) {
	#main-content-comm #bottom_nav {
		display: none;
	}
}


.notification-bell {
	position: relative;
	display: inline-block;
}
.notification-bell .message-counter {
	position: absolute;
	top: -10px;
	right: -10px;
	background: red;
	color: white;
	border-radius: 50%;
	padding: 4px;
	font-size: 10px;
	width: 18px;
	height: 18px;
	text-align: center;
}
@media (min-width: 768px) {
	.not_aside {
		height: 99vh;
		overflow-y: scroll;
	}
}
@media (max-width: 767px) {
	.notification-bell .message-counter {
		top: 0px;
		right: 24px;
	}
}

/* Privacy & Terms */
section#privacy_terms_pg .logo_n_txt a img {
	max-width: 200px;
}
section#privacy_terms_pg .logo_n_txt p {
	margin: 20px 0;
	font-size: 13px;
}
section#privacy_terms_pg .jst_legal_wrap {
	background-color: #ffffff;
	padding: 35px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
}
section#privacy_terms_pg .jst_legal_wrap ol > li {
	margin-bottom: 15px;
}
section#privacy_terms_pg .jst_legal_wrap li p {
	margin-bottom: 0;
}
section#privacy_terms_pg .jst_legal_wrap a {
	color: #F87431;
	text-decoration: none;
}
section#privacy_terms_pg .jst_legal_wrap a:hover,
section#privacy_terms_pg .jst_legal_wrap a:focus,
section#privacy_terms_pg .jst_legal_wrap a:active {
	color: #000;
}
#foc_cust_reg_form .form-check a {
	text-decoration: none;
	color: #e56c2c;
}
#foc_cust_reg_form .form-check a:hover,
#foc_cust_reg_form .form-check a:focus,
#foc_cust_reg_form .form-check a:active {
	color: #000;
}
@media (max-width: 767px) {
	section#privacy_terms_pg .jst_legal_wrap {
		padding: 30px 20px;
	}
	section#privacy_terms_pg .jst_legal_wrap ol,
	section#privacy_terms_pg .jst_legal_wrap ul {
		padding-left: 20px;
	}
	section#privacy_terms_pg .jst_legal_wrap p,
	section#privacy_terms_pg .jst_legal_wrap li {
		font-size: 14px;
	}
}