/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style:none;
margin:0px;
padding:0px;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
p { font-size:14px;}
.lable-text { padding:5px 0; clear:both; width:100%; display:table; font-size:11px; font-weight:bold; text-transform:uppercase;}
.minReq, .quantity {padding:1em 0;}
button:disabled, .nohover:hover {
background-color: #CCC !important;
cursor: not-allowed;
color: #000;
}
.my_profile_tab li{font-weight:bold;cursor:pointer;}
.my_profile_tab li ul{ margin-left: 25px;}
.my_profile_tab li ul li{ border-bottom:0;padding:0;font-size: 16px;line-height: 26px;}
.my_profile_tab li ul li a{padding:0; margin:0;font-weight:normal;}
.content_top {display: flex;justify-content: center; align-items: flex-start;flex-wrap:wrap; max-width: 1400px;margin: auto;gap:20px;}
.hire_worker_popup .Row{display:block;margin-bottom:5px;}
.hire_worker_popup .mybutton, .hire_worker_popup a{ text-transform: none; width: 100%;}
.hire_worker_popup .Cell{width:100%;display: flex;margin-top: 5px;justify-content: flex-start;
align-items: center;}
.hire_worker_popup .job_required{padding: 20px 0;background: #D6D5D5; border-radius: 5px;}
.hire_worker_popup .job_required label{color:#505050;text-align:left;}
.buttondiv .Cell{padding-left:10px;margin-top: 5px;display:flex;}
.homepage .Table{background: #F8F8F8;}
.mt10{margin-top:10px;} .mb10{margin-botton:10px}
.mt0{margin-top:0 !important;}
.submenu ul{list-style: disc !important;padding-left: 15px;}
.black{color:#000;}
.bold{font-weight:bold;}
/*vinay css*/
.pop-close {
position: absolute;
top: -5px;
display: table;
border: 0px solid red;
width: 20px;
right: -15px;
}
.error_signup, .email_message {
color: blue !important;
font-size: 14px;
font-weight: bold;
}
.content {
}
.user_pic { width:150px; border-radius:5px; }
.red {
color:#ff4136;
font-weight:bold;
}
a {
cursor:pointer;
color:#ff4136;
}
.Messages-profile span {
line-height:22px;
}
.fc-header-title h2 {
font-size:1.3em!important;
border-bottom:none!important;
}
.repeat_table table {
width:115%;
font-size:0.8125em;
color:#7B7C7E;
}
.minimum_requirement a, .right a {
width:40px;
float:left;
cursor:pointer;
}
.minimum_requirement a:hover, .minimum_requirement a.active, a.active {
color:#999 !important;
}
.repeat_table2, .repeat_table3, .repeat_table4, .repeat_table5, .minimum_requirement .checkbox, .recived-request-icon .checkbox, .edit_profile .checkbox {
display:none;
}
.edit_profile input[type="text"], .edit_profile input[type="password"], .edit_profile textarea { width:100%;}
.edit_profile select { width:93% !important;}
.three_fourth select { width:89% !important;}
.three_fourth textarea { width:87% !important;}
.edit_profile .mcheckbox { width:93%; border:1px solid #a9a9a9;}
.full_width {
float: left;
width: 100%;
border: 0px solid #FFF;
padding: 1% 0;
}
.rating {
display:none !important;
}
.create_table {
border-top: 1px dotted;
margin-top: 30px;
padding-top: 40px !important;
}
.contacts {
display:none;
background-color: #FFF;
border:1px solid #ff4136;
bottom: 500px;
left: 250px;
position: relative;
}
.contacts tr td {
padding:5px;
}
.search_filter #amount {
border:0;
color:#ff4136;
font-weight:bold;
}
.recived-request-icon .active, .perhour-rating .fa-star:hover, .perhour-rating .active, .lock_unlock a i:hover, .lock_unlock a.active i, .lockunlock .fa-lockm:hover, .lockunlock .fa-umlockm:hover, .lockunlock .active {
cursor:pointer;
color:#ff4136;
}
.lock_unlock a i {
color:#000;
}
.signnup-pop {
background-color: #ff4136;
color: #FFF;
width: 100%;
max-width: 315px;
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
border-radius: 8px;
font-weight: bold;
text-align:center;
}
.search_job .calendar {
cursor:pointer;
}
.search_job .show_calendar {
position: absolute;
right: 0;
top: -53px;
font-size: 0.850em;
font-weight: bold;
width: 165px;
}
.search_job .Messages-profile, .search_user .Messages-profile {
border:1px dotted #D6D5D5;
background:#F8F8F8;
width:90%;
}
.search_job .full_profile {
padding:10px;
float:right;
}
.search_job .addthis_button, .search_user .addthis_button {
padding-right:65px;
}
.hire_worker_popup {
background-color: #646464;
display: block;
left: 12%;
position: absolute;
top: 10%;
width: 91%;
z-index: 99;
}
.hire_worker_popup .Table {
background-color: #9d9d9d;
color: #FFF;
width: 100%;
max-width: 315px;
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
font-weight: bold;
text-align: center;
}
.popup{max-width:80%; background-color: #9d9d9d; width: auto;}
/*.animate, .aanimate{opacity:0;transform: translateY(30px);transition: all .9s cubic-bezier(.645,.045,.355,1) .2s;}
.visible-animation{opacity:1;transform: translateY(0px);} */
strong {
font-weight:bold;
}
.create_job .recived-request-icon{display: flex;justify-content: flex-start; align-items: center;}
.create_job .recived-request-icon div {
width:auto;
position:relative;
padding:0;
}
.create_job .thumbs_action input{ cursor: pointer;}
.create_job .recived-request-icon .thumbs_action {
background-color: #ff4136;
color:#FFFFFF;
opacity:0;
transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
padding: 5px;
position: absolute;
top:25px;
left:0;
}
.create_job .recived-request-icon .thumbs_action p {
width:auto;
min-width:107px;
}
.find_min_req .search_thumb_main div {
float:left;
}
.find_min_req .search_thumb_main {
float:left;
width:auto;
position:relative;
padding:0;
}
.find_min_req .search_thumb_main .thumbf_action {
background-color: #ff4136;
color:#FFFFFF;
display: none;
padding: 5px;
position: absolute;
left:0;
font-size:15px;
top:25px; width:90%;
}
.find_min_req .search_thumb_main .thumbf_action p {
width:auto;
min-width:107px;
}
.search_job .full_grid .Table, .search_user .full_grid .Table {
position:relative;
}
.alert-pop{background-color: #ff4136;
color: #FFF;
width: 100%;
max-width: 360px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
position: fixed;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
border-radius: 8px;
font-weight: bold;
text-align:center;
opacity: 1;
padding: 14px 52px 14px 16px;
box-sizing: border-box;
line-height: 1.4;
pointer-events: auto;
transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
animation: popup-slide-in 0.3s ease-out;
-webkit-animation: popup-slide-in 0.3s ease-out;
}
@keyframes popup-slide-in {
from {
opacity: 0;
transform: translate(-50%, -55%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
@-webkit-keyframes popup-slide-in {
from {
opacity: 0;
-webkit-transform: translate(-50%, -55%);
}
to {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
}
}
.alert-pop #errorVal,
.alert-pop #errorVal span,
.alert-pop #errorVal a {
color:#FFF !important;
font-size: 14px !important;
font-weight: bold;
padding:0 !important;
}
.alert-pop #errorVal {
display: block;
width: 100%;
}
.alert-pop .pop-close {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
cursor: pointer;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.28);
padding: 0 !important;
margin: 0;
width: 28px;
height: 28px;
border-radius: 999px;
color: #FFF !important;
font-size: 18px !important;
font-weight: bold;
line-height: 1;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
display: flex;
align-items: center;
justify-content: center;
}
.alert-pop .pop-close:hover,
.alert-pop .pop-close:focus {
background: rgba(255,255,255,0.24);
}
#errorVal {
}
.testimonials p {
display: none;
}
.quick_list_page .Table, .quick_list_worker .Table {
position:relative;
}
.edit_profile .fa-lockm, .edit_profile .fa-unlockm {
cursor:pointer;
}
.fa-unlockm:before {
content:"\f09c"
}
.fa-lockm:before {
content:"\f023"
}
.checkbox {
overflow: scroll;
height: 105px;
overflow-x:hidden;
width: 93%;
font-size:13px;
padding:5% 0 0 5%;
border:1px solid #a9a9a9;
}
.mcheckbox {
overflow: scroll;
height: 105px;
overflow-x:hidden;
width: 91%;
font-size:13px;
}
.checkbox label, .mcheckbox label {
cursor:pointer;
}
.show_calendar {
background:#ff4136;
padding:5px;
color:#FFF!important;
font-weight:bold;
}
.quick_list_worker .full_grid .Table {
position:relative;
}
.quick_list_worker .Messages-profile {
border:1px dotted #D6D5D5;
background:#F8F8F8;
width:90%;
}
.quick_list_worker .addthis_button {
padding-right:65px;
}
.quick_list_page .calendar {
cursor:pointer;
position:absolute;
top:4px;
right:24px;
height:17px;
}
.quick_list_page .show_calendar {
position: absolute;
right: 20px;
top: -53px;
font-size:0.850em;
font-weight:bold;
}
.quick_list_page .Messages-profile, .search_user .Messages-profile {
border:1px dotted #D6D5D5;
background:#F8F8F8;
width:90%;
}
.quick_list_page .full_profile {
padding:10px;
float:right;
}
.quick_list_page .addthis_button, .search_user .addthis_button {
padding-right:65px;
}
.contact_request .Messages-profile {
border:1px dotted #D6D5D5;
background:#F8F8F8;
width:100%;
}
.contact_request .addthis_button {
padding-right:65px;
}
.contact_request .full_grid .Table {
position:relative;
}
.my_unread_message_count, .unread{
font-weight:bold;
color:#ff4136;
}
span.loading .e-loading {
left:10%;
top:15%;
position:absolute;
}
span.loading {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
div.recived-request-left-panel, a.quick_list {
position:relative;
}
.applied, .addjob {
background-color:#CCC;
}
.applied .Cell a, .addjob .Cell a {
color:#000;
}
a.quick_list {
font-weight:bold;font-size: 14px;
margin-bottom: 10px; width: 100%;
text-align: center;
}
/* Quick list button selected state */
.quick_list.selected {
color: var(--ec-primary);
border-color: var(--ec-primary);
font-weight: bold;
}
.m-star-btn.selected {
color: var(--ec-primary);
border-color: var(--ec-primary);
}
.extra-height {
height:8em;
}
.text-bold {
font-weight:800;
}
.edbutton{z-index: 9;
position: absolute;
top: 37px;
left: 10px;
font-size: 13px;
display: none;
line-height: 25px;
background: grey;
padding: 10px;
border-radius: 5px;
font-weight: bold;}
.edbutton a{color:#FFF;}
.fwquantity{position: relative;margin-top: 10px;
text-align: left;}
.fwquantity a{border: 1px solid #CCC;
border-radius: 15px;
padding: 7px;
color: #505050;}
.fwdate{position: relative;margin-top: 5px;
display: flex;
justify-content: flex-start;
align-items: center;}
.fwdate strong{color:#505050;}
.work_page .fwdate{margin-top: 0;}
/*received to request to work css*/
.rr_to_work .rsection{ display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;}
.rr_to_work .rsection .dc-head-img img{width: 100px;
height: 100px;
border-radius: 50%;}
.rr_to_work .rsection .pprate{width: 100%;
margin: 10px 0;display: flex;
justify-content: center;
align-items: center;}
.rr_to_work .rsection .pprate p{height: 26px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #FFF;
background: grey;
font-size: 20px;
padding: 10px;margin-bottom:0;}
.rr_to_work .jobheading{ color: #000;
font-size: 16px;
border-bottom: 1px dashed silver;
border-color: #000;}
.rr_to_work .rsection .recived-request-left-panel{width: 100%;}
.rr_to_work .rsection .recived-request-left-panel p{margin-top: 5px;}
.rr_to_work .rsection{width:25%;}
.rr_to_work .lsection{width: 70%;}
.lsection .emp{border-bottom: 1px dashed silver;border-color: #ff4136;}
.lsection .dc-head-info h3{border-bottom: 0;margin-bottom: 0;}
.create_job .Row .Cell, .create_quick_job .Row .Cell{width:48%;}
.Row strong{font-size: 14px;color:#505050;}
.fwtime{display: flex;justify-content: flex-start;align-items: flex-start;margin-top: 5px;}
.dc-head-info span{margin-top:10px;}
.fwtime span{margin-left: 5px;margin-top:0;padding:0 !important;}
.fwdate span{border: 1px solid #CCC;
border-radius: 15px;
padding: 7px;
color: #000;margin-left: 5px;margin-top:0;}
.agreement_box{ border: 1px dotted #D6D5D5;
padding: 15px;
border-radius: 5px;
margin: 10px 10px 10px 0;
background: #F8F8F8; width: 100%;
float: left;
max-width: 96%;}
.agreement_box span{ color: #505050; margin-top: 0; display: flex !important;
justify-content: flex-start;
align-items: center;
}
.agreement_box span.cke_voice_label, .agreement_box span.cke_button_label{display:none !important;}
.agreement_box .Row{display: flex;justify-content: space-between;align-items: center;margin-top: 10px;flex-wrap:wrap;}
.agreement_box .Row .Cell small{width: 100%;}
.agreement_box .Row .Cell{width: 48%;font-size:15px;}
.agreement_box .Row .Cell.col-12{width: 100%;}
.displaycenter .Cell{text-align:center;}
.displaycenter button{width:auto; max-width:300px;}
.rr_to_work.inbox .dc-head-info h3 {color: #000;font-size: 1.2em;display: flex;
justify-content: flex-start;
align-items: center;flex-wrap:wrap;}
.rr_to_work.inbox .dc-head-info h3 small{color: #505050;font-size:0.9em;}
.rr_to_work.inbox .dc-head-info span{padding:0;margin-top:5px;}
.rr_to_work.inbox .Messages-profile{margin-top:10px}
.rr_to_work.inbox .Messages-profile p{padding-bottom: 5px;}
.fs10{font-size:10px;}
.fs12{font-size:12px;}
.lgcolor{color:#505050;}
.bcolor{color:#ff4136;}
.user_view .dc-head-info h3{ color: #000;
font-size: 1.3em;
margin: 0 auto;
border-bottom: 0;
border-color: red;}
.find_me_work .Table{background:#F8F8F8;}
.mb10{margin-bottom:10px;}
.create_job .Table, .create_quick_job .Table{background:#F8F8F8; margin-bottom: 10px;}
.create_job .checkbox.mspecific1{border-radius:5px;}
.create_job .checkbox.mspecific1 input{margin-top:5px;}
.create_job .clear{min-height: 0;}
.create_job .one_fourth p, .create_job .one_half p{font-weight:bold;}
.create_job .one_fourth{margin-top:0;}
.create_job .Table.jobref .Cell p{margin-top: 10px; margin-bottom: 3px;}
.my_profile_tab .black{color:#000;}
.my_profile_tab li span{font-size:12px;}
.color0, .color4{background: #ff4136 !important;} /*waiting accepted*/
.color5, .color2, .jobcancel1{background: #000 !important;} /*cancel not this time*/
.recived-request-left-panel p, .recived-request-left-panel select{margin-top:5px}
.Table label{font-size:15px;cursor:pointer;}
.work_page .Table .one_half.fixed-half{width:52%;}
.work_page .Row {display: flex;justify-content: space-between;align-items: flex-start;flex-wrap:wrap;}
.work_page .agreement_box input{width:150px !important;}
#requireddate, #pcsm{width:auto !important;}
.work_page .agreement_box label {min-width: 135px;text-align: right;margin-right: 5px;}
#scsm{width:auto !important;}
.mt5{margin-top:5px !important;}
.work_page .agreement_box .quote_file, [type="file"]{width: 90% !important;color: blue;font-weight:bold;}
/***************** END VINAY CSS ****************/
/*=============================================================================
MODERN FORM SYSTEM - Web 3.0 Design
2-Column Grid Layout with Glassmorphism Cards
=============================================================================*/
/* --- Form Page Container --- */
.form-page {
/* No max-width here; grid1 (73%) + grid2 (25%) handle widths via .content_top flex */
padding: 0;
}
.form-page h2 {
font-family: 'Roboto', sans-serif;
font-size: 1.75em;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 4px;
letter-spacing: -0.3px;
}
.form-page h4 {
font-family: 'Roboto', sans-serif;
font-size: 0.95em;
font-weight: 400;
color: #6b7280;
margin-bottom: 24px;
}
/* --- Form Section Cards --- */
.form-section {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease;
}
.form-section:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
}
.form-section-title {
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 20px;margin-top: 0;
padding-bottom: 12px;
border-bottom: 2px solid #f3f4f6;
display: flex;
align-items: center;
gap: 8px;
}
.form-section-title .section-icon {
width: 28px;
height: 28px;
background: linear-gradient(135deg, #ff4136 0%, #ff6b63 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
flex-shrink: 0;
}
/* --- 2-Column Grid Layout --- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
}
.form-grid .full-width {
grid-column: 1 / -1;
}
/* --- Form Field Group --- */
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field label,
.form-field .field-label {
font-family: 'Roboto', sans-serif;
font-size: 0.8125em;
font-weight: 600;
color: #374151;
letter-spacing: 0.5px;
}
.form-field .field-hint {
font-size: 0.75em;
color: #9ca3af;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* --- Modern Input Styling --- */
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
font-family: 'Roboto', sans-serif;
font-size: 0.9375em;
color: #1f2937;
background: #f9fafb;
border: 1.5px solid #d1d5db;
border-radius: 8px;
padding: 14px 16px;
height: auto;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
.form-field textarea {
min-height: 120px;
resize: vertical;
line-height: 1.6;
}
.form-field input[type="text"]:focus,
.form-field input[type="number"]:focus,
.form-field input[type="url"]:focus,
.form-field input[type="password"]:focus,
.form-field input[type="email"]:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: #ff4136;
background: #fff;
box-shadow: 0 0 0 3px rgba(255, 65, 54, 0.1);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: #9ca3af;
font-weight: 400;
}
/* --- File Input --- */
.form-field input[type="file"] {
font-family: 'Roboto', sans-serif;
font-size: 0.875em;
color: #374151;
padding: 12px 14px;
min-height: 48px;
border: 1.5px dashed #d1d5db;
border-radius: 8px;
background: #f9fafb;
cursor: pointer;
transition: border-color 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.form-field input[type="file"]:hover {
border-color: #ff4136;
}
/* --- Radio & Checkbox Groups --- */
.form-radio-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
padding: 4px 0;
}
.form-radio-group label,
.form-checkbox-group label {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
font-weight: 400;
color: #374151;
cursor: pointer;
padding: 12px 20px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
background: #f9fafb;
transition: all 0.2s ease;
text-transform: none;
}
.form-radio-group label:hover,
.form-checkbox-group label:hover {
border-color: #ff4136;
background: #fff5f5;
}
.form-radio-group input[type="radio"]:checked + span,
.form-radio-group input:checked ~ span {
color: #ff4136;
font-weight: 500;
}
/* --- Skills Checkbox Scrollable Box --- */
.form-skills-box {
max-height: 180px;
overflow-y: auto;
border: 1.5px solid #d1d5db;
border-radius: 8px;
padding: 10px 12px;
background: #f9fafb;
}
/* Hide
tags injected by AJAX */
.form-skills-box br {
display: none;
}
/* Hide standalone checkboxes (they live inside labels now) */
.form-skills-box > input[type="checkbox"] {
display: none;
}
.form-skills-box label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 10px;
margin: 3px 4px;
font-size: 0.875em;
font-weight: 400;
color: #374151;
cursor: pointer;
border: 1.5px solid #e5e7eb;
border-radius: 6px;
background: #fff;
transition: all 0.15s ease;
text-transform: none;
line-height: 1.4;
}
.form-skills-box label:hover {
border-color: #ff4136;
background: #fff5f5;
color: #ff4136;
}
.form-skills-box label input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: #ff4136;
flex-shrink: 0;
}
/* Highlight selected skill labels */
.form-skills-box label:has(input:checked) {
border-color: #ff4136;
background: #fff5f5;
color: #ff4136;
font-weight: 500;
}
/* --- Buttons --- */
.form-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.form-btn-primary {
font-family: 'Roboto', sans-serif;
font-size: 0.9375em;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #ff4136 0%, #ff6b63 100%);
border: none;
border-radius: 8px;
padding: 14px 36px;
cursor: pointer;
transition: all 0.25s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(255, 65, 54, 0.25);
}
.form-btn-primary:hover {
background: linear-gradient(135deg, #e63a30 0%, #ff4136 100%);
box-shadow: 0 4px 14px rgba(255, 65, 54, 0.35);
transform: translateY(-1px);
}
.form-btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(255, 65, 54, 0.25);
}
.form-btn-secondary {
font-family: 'Roboto', sans-serif;
font-size: 0.9375em;
font-weight: 600;
color: #374151;
background: #fff;
border: 1.5px solid #d1d5db;
border-radius: 8px;
padding: 14px 36px;
min-height: 50px;
cursor: pointer;
transition: all 0.25s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-btn-secondary:hover {
border-color: #ff4136;
color: #ff4136;
background: #fff5f5;
}
.form-btn-primary:disabled,
.form-btn-secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* --- Error Banner --- */
.form-error-banner {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
color: #991b1b;
font-size: 0.875em;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.form-error-banner:empty {
display: none;
}
/* --- Inline Field Errors --- */
.form-field .error_signup,
.form-section .error_signup {
color: #dc2626;
font-size: 0.75em;
font-weight: 500;
margin-top: 4px;
display: block;
}
.form-field input.has-error,
.form-field select.has-error,
.form-field textarea.has-error {
border-color: #dc2626;
background: #fef2f2;
}
/* --- Separator / Divider --- */
.form-divider {
border: none;
border-top: 1px solid #e5e7eb;
margin: 20px 0;
}
/* --- 3-Column Sub-Grid (for Category: Industry / Job Title / Skills) --- */
.form-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
/* --- Location Autocomplete List --- */
.form-field #location_list {
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow: auto;
position: absolute;
background: #fff;
z-index: 10;
margin-top: 2px;
}
.form-field #location_list li {
padding: 10px 14px;
cursor: pointer;
font-size: 0.875em;
border-bottom: 1px solid #f3f4f6;
transition: background 0.15s ease;
}
.form-field #location_list li:hover {
background: #fff5f5;
color: #ff4136;
}
.form-field #location_list li:last-child {
border-bottom: none;
}
/* --- Contacts Popup Overlay --- */
.form-contacts-popup {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 20px;
max-width: 400px;
position: absolute;
z-index: 100;
left: 50%;
transform: translateX(-50%);
}
/* --- Success Popup --- */
.form-success-popup {
background: linear-gradient(135deg, #ff4136 0%, #ff6b63 100%);
color: #fff;
border-radius: 12px;
padding: 20px;
text-align: center;
font-weight: 600;
max-width: 340px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
box-shadow: 0 8px 30px rgba(255, 65, 54, 0.3);
}
.form-success-popup .pop-close {
top: -12px;
right: -12px;
}
/*=============================================================================
RESPONSIVE - Form System
=============================================================================*/
@media (max-width: 800px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-grid-3 {
grid-template-columns: 1fr;
}
.form-section {
padding: 20px 16px;
}
.form-actions {
flex-direction: column;
}
.form-btn-primary,
.form-btn-secondary {
width: 100%;
text-align: center;
}
.form-radio-group {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.form-page h2 {
font-size: 1.4em;
}
.form-section {
padding: 16px 12px;
border-radius: 8px;
}
.form-section-title {
font-size: 1em;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
padding: 12px 14px;
font-size: 0.875em;
}
.form-btn-primary,
.form-btn-secondary {
padding: 12px 24px;
}
}
/*=============================================================================
END MODERN FORM SYSTEM
=============================================================================*/
/* start editing from here */
a {
text-decoration:none;
}
.txt-rt {
text-align:right;
}
.txt-lt {
text-align:left;
}
.txt-center {
text-align:center;
}
.float-rt {
float:right ;
}
.float-lt {
float:left ;
}
.clear {
clear:both;
min-height:1em;
}
.pos-relative {
position:relative;
}
.pos-absolute {
position:absolute;
}
.vertical-base {
vertical-align:baseline;
}
.vertical-top {
vertical-align:top;
}
nav.vertical ul li {
display:block;
}
nav.horizontal ul li {
display: inline-block;
}
img {
max-width:100%;border-radius:5px;
}
/*end reset*/
body {
font-family: 'Roboto', sans-serif;
}
.wrap {
width:80%;
margin:0 auto;
transition:all .2s linear;
-moz-transition:all .2s linear;/* firefox */
-webkit-transition:all .2s linear; /* safari and chrome */
-o-transition:all .2s linear; /* opera */
-ms-transition:all .2s linear;
}
/*---start-header----*/
.header {
position: relative;
}
.header_top {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}
.header .header_top .clear{min-height:0;}
.logo {
float:left;
max-width:225px;
}
.top-nav {
float:left;
margin:12px 0;
}
.top-nav ul {
margin-top:0.9em;
}
.top-nav li {
display:inline-block;
position:relative;
}
.top-nav li a {
font-family: 'Roboto', sans-serif; color: #7B7C7E; font-size: 1.2em; margin: 34px 30px 44px;
padding-bottom: 10px;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.top-nav li.active > a, .top-nav li > a:hover {
color:#ff4136; border-bottom: 3px solid #ff6b63;
}
.header .header-phone h2{color: #3f3f3f !important;}
.header-phone{float: right;}
.header-phone h2 a:nth-child(1) { padding-right:5px; color: #3f3f3f;}
.header-phone h2 a:nth-child(2) {
color: #fff;
background: #ff4136; /* Old browsers */
background: -moz-linear-gradient(left, #ff4136 1%, #ff4136 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #ff4136), color-stop(100%, #ff4136)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff4136 1%, #ff4136 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff4136 1%, #ff4136 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff4136 1%, #ff4136 100%); /* IE10+ */
background: linear-gradient(to right, #ff4136 1%, #ff4136 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4136', endColorstr='#ff4136', GradientType=1 ); /* IE6-9 */
z-index:9;
position: relative;
border-radius: 5px;margin-left: 10px;
}
.header-phone h2, .header-phone h4, .header-phone h2 a, .header-phone h4 a {
color: #fff;
font-size:1.1em;
font-family: 'Roboto', sans-serif;
padding:10px;
}
.header-phone img {
vertical-align:middle;
padding-right:5px;
}
.header-phone h4 {
font-size:0.85em;
padding-top: 0;
}
.triangle-arrow {
border-right:64px solid transparent;
border-top:100px solid #ff4136;
display: block;
position: absolute;
height: 0;
width: 0;
right: -64px;
top: 0;
}
.header-search {
float: right;
padding:20px 0;
text-align: center;
}
.header-tagline {
float: right;
padding:20px 0;
text-align: center;
}
.header-tagline2 {
padding:30px 0;
}
.header-tagline h3 {
color:#E2E2E2;
font-family: 'Roboto', sans-serif;
font-size:1em;
text-transform:uppercase;
}
.header-tagline h3 img {
vertical-align:middle;
padding-right:10px;
}
.header-tagline h3 span {
color:#ff4136;
}
.phone-slogan {
overflow: hidden;
z-index: 2;
}
/*---start-content----*/
.slogan {
background:url(../../../application/images/slogon.png) center bottom #ff4136 no-repeat;
padding:30px 0;
}
.content-slogan {
text-align:center;
}
.content-slogan p, .content-slogan a {
font-family: 'Roboto', sans-serif;
color:#FFF;
font-size:2.5em;
width: 82%;
margin: 0 auto;
padding: 20px 0px;
}
.content-slogan a {
color:#3A3A3A;
font-size:0.8em;
text-transform:uppercase;
}
.slogan-sub {
text-align:center;
}
.slogan-sub p {
font-family: 'Roboto', sans-serif;
color:#FFF;
font-size: 0.875em;
line-height:1.8em;
width: 82%;
margin: 0 auto;
padding:0px 0px 20px 0px;
}
.content_top h2 {
font-family: 'Roboto', sans-serif;
color:#ff4136;
font-size: 1.5em;
margin: 0 auto;
border-bottom: 1px dashed #DBDBDB;
padding-bottom:5px;
margin:0 0 1em 0px;
}
.grides {
padding-top:0px;
}
.sub_grid1 {
float:left;
width: 45.2%;
border-bottom: 1px dotted #D6D5D5;
padding-bottom: 15px;
}
.grid_img {
float:left;
width:42%;
}
.grid_img img {
border-radius:5px;
border:1px solid #EBEBEB;
}
.grid_data {
float:left;
width:53%;
margin-left:5%;
}
.grid_data h3 {
font-family: 'Roboto', sans-serif;
color:#000;
font-size:1em;
text-transform:uppercase;
}
.grid_data p {
color:#646464;
font-size: 0.875em;
line-height: 1.6em;
padding:5px 0
}
.grid_data p a {
font-size:0.9em;
color:#ff4136;
cursor:pointer;
font-family: 'Roboto', sans-serif;
}
.sub_grid2 {
float:left;
width: 45.2%;
margin-left:5.6%;
border-bottom: 1px dotted #D6D5D5;
padding-bottom:10px;
}
.divider {
padding:8px 0;
}
.grid1 {width:73%;}
.grid2 {
width: 25%;
}
.grid2 p {
font-size: 14px;
color: #6F6F6F;
line-height: 1.6em;
padding:10px 0;
}
/*---dc-grids----*/
.dc-grids {
padding:50px 0;
}
.dc-head-img {
text-align:center;
width:100%;
}
.dc-head-info-work {
float: left;
margin-left:3%;
margin-top: 10px;
}
.dc-head-info h3 {
font-family: 'Roboto', sans-serif;
color:#ff4136;
font-size: 1.4em;
margin: 0 auto;
border-bottom: 1px dashed silver;
border-color:#ff4136;
}
.dc-head-info h4{color: #ff4136;font-size: 16px;margin-top: 10px;}
.dc-head-info-work h3 {
font-family: 'Roboto', sans-serif;
color:#ff4136;
font-size: 1.3em;
text-transform:capitalize;
margin: 0 auto;
border-bottom: 1px dashed silver;
padding-bottom: 5px;
margin-bottom: 5px;
border-color:#ff4136;
}
.dc-head-info span {
font-family: 'Roboto', sans-serif;
color:#505050;
font-size:0.875em;
}
.dc-head-info-work span {
font-family: 'Roboto', sans-serif;
color:#505050;
font-size:0.875em;
text-transform:normal;
}
.dc-head {
width:33.33%;
float:left;
margin:1em 0;
/*height:17em;*/
}
.dc-profile p {
font-family: 'Roboto', sans-serif;
color:#7B7C7E;
font-size: 0.875em;
padding: 20px 0px;
width: 86%;
line-height: 1.8em;
margin: 0 auto;
height:4em;
}
.dc-profile p:before {
content: url(../../../application/images/quotes_alt.png);
padding-right: 10px;
}
.dc-profile a {
background:#ff4136;
padding: 12px 30px;
display:inline-block;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 0.875em;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
text-transform: uppercase;
border-radius:2em;
-webkit-border-radius:2em;
-moz-border-radius:2em;
-o-border-radius:2em;
}
.dc-profile a:hover {
background:#2C2C2C;
}
.dc-profile {
}
.dc-head {
float:left;
}
/*** Footer ***/
.footer {
background:#fff;box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}
/* GRID OF FOUR ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.group:before, .group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1;
}
.col_1_of_4 {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col_1_of_4:first-child {
margin-left: 0;
} /* all browsers except IE6 and lower */
.span_1_of_4 {
width: 20.8%;
padding:1.5%;
}
.span_1_of_4 h3 {
font-size:1.2em;
color:#CCC;
border-bottom:1px dashed rgba(126, 126, 126, 0.34);
font-family: 'Roboto', sans-serif;
padding-bottom:10px;
margin-bottom:10px;
text-transform:uppercase;
}
.span_1_of_4 p {
font-size:0.9em;
padding:5px 0;
color:#8B8B8B;
line-height: 1.8em;
font-family :Arial, Helvetica, sans-serif;
}
.span_1_of_4 p span a {
font-family: 'Roboto', sans-serif;
color:#ff4136;
}
.span_1_of_4 p span a:hover {
color:#FFF;
}
.social-icons li {
display:inline-block;
margin:10px 5px;
}
.social-icons ul li img {
background:#fff;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
}
.social-icons ul li img:hover {
background:#000;
}
.location {
margin-top:10px;
}
.location li, .address ul li {
font-size:.9em;
color:#8B8B8B;
display:block;
margin:10px 0;
}
.Testimonials_desc p span.up {
padding-right:10px;
}
.Testimonials_desc p span.down {
padding-left:10px;
}
.Testimonials_desc p span.down img {
vertical-align:middle;
}
.Testimonials_desc h5 {
font-size:1em;
color:#808080;
font-family: 'Roboto', sans-serif;
text-align:right;
}
.copy-right {
padding:20px 0;
background:#FFF;
}
.copy-right p {
font-family: 'Roboto', sans-serif;
color:#777;
font-size: 0.875em;
text-align:left;
}
.copy-right p.company_name {
float:left;
}
.copy-right p.design {
float:right;
}
.copy-right p span {
font-family: 'Roboto', sans-serif;
font-size:2em;
color:#31A0A7;
}
.copy-right p a {
text-decoration:underline;
color:#ff4136;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.copy-right p a:hover {
text-decoration:none;
}
/*-----our-staff----*/
.our-staff h5 {
font-family: 'Roboto', sans-serif;
color: #7B7C7E;
font-size: 1.7em;
margin: 0 auto;
border-bottom: 1px dashed silver;
padding-bottom: 12px;
margin: 20px 0 29px 0px;
border-color: rgba(160, 134, 211, 0.41);
text-transform: uppercase;
}
.projects-bottom-paination ul li {
display:inline-block;
}
.projects-bottom-paination {
text-align: center;
padding-top: 27px;
}
.projects-bottom-paination li a {
font: 400 12px/1.2em Arial;
color: #5a5a5a;
padding:11px 18px;
background: #fff;
text-decoration: none;
text-shadow: none;
display:block;
border: 1px solid #E2E2E2;
margin-top: 16px;
font-family: 'Roboto', sans-serif;
}
.projects-bottom-paination li.active> a, .projects-bottom-paination li> a:hover {
background:#ff4136;
color:#fff;
}
.project-top-patination ul li {
display:inline-block;
}
.project-top-patination ul li a {
border-right: 1px solid rgba(192, 192, 192, 0.33);
padding-right:20px;
color:#7B7C7E;
font: 400 15px/22px Arial;
font-family: 'Roboto', sans-serif;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
text-transform:uppercase;
}
.project-top-patination ul li a:hover {
color:#ff4136;
}
.project-top-patination p {
font: 400 15px/22px Arial;
color:#ff4136;
padding-left:20px;
font-family: 'Roboto', sans-serif;
text-transform:uppercase;
}
.project-top-patination {
padding: 15px 0px;
border: 1px dashed silver;
border-left: none;
margin: 0px 0 35px 0px;
border-right: none;
border-color:rgba(255, 175, 44, 0.35);
}
/*---about----?*/
.content {
padding:20px 0;
margin-top: 15px;
background: #fff;
border-radius: 16px;
margin-bottom: 20px;
}
.about-topgrid1 {
width: 29%;
float: left;
margin-right: 5%;
margin-bottom:30px;
}
.about h5 {
color: #000;
font-size: 30px;
padding: 10px 0px;
}
.about-topgrid1 h3 {
font-family: 'Roboto', sans-serif;
padding: 15px 0px 15px 0px;
border-bottom: 1px solid rgba(51, 51, 51, 0.09);
margin-bottom: 13px;
color:#ff4136;
font-size: 1.5em;
text-transform: uppercase;
}
.about-topgrid1 h4 {
color: #7E7E7E;
font-family: 'Roboto', sans-serif;
font-size: 18px;
line-height: 1.5em;
padding: 10px 0px;
}
.about-topgrid1 p {
font-size: 0.8125em;
color:#7E7E7E;
line-height: 1.5em;
font-family: 'Roboto', sans-serif;
padding: 4px 0px 8px 0px;
}
/*----about-histore----*/
.about-histore {
float:left;
width:30%;
}
.about-histore h3 {
font-family: 'Roboto', sans-serif;
padding: 15px 0px 15px 0px;
border-bottom: 1px solid rgba(51, 51, 51, 0.09);
margin-bottom: 13px;
color: #ff4136;
font-size: 1.5em;
text-transform: uppercase;
}
.about-histore ul li span {
color: #000;
font-family: 'Roboto', sans-serif;
font-size: 14px;
padding: 15px 0px 15px 0px;
margin-bottom: 13px;
float: left;
width:45px;
}
.about-histore ul li p {
font-size: 0.8125em;
color:#7E7E7E;
line-height: 1.5em;
font-family: 'Roboto', sans-serif;
padding: 4px 0px 8px 0px;
float: right;
width:85%;
}
/*----about-services---*/
.about-services h3 {
font-family: 'Roboto', sans-serif;
padding: 15px 0px 15px 0px;
border-bottom: 1px solid rgba(51, 51, 51, 0.09);
margin-bottom: 13px;
color:#ff4136;
font-size: 1.5em;
text-transform: uppercase;
}
.about-services h4 {
color: #7E7E7E;
font-family: 'Roboto', sans-serif;
font-size: 18px;
line-height: 1.5em;
}
.about-services p {
font-size: 0.8125em;
color:#7E7E7E;
line-height: 1.5em;
font-family: 'Roboto', sans-serif;
padding: 4px 0px 8px 0px;
}
.about-services ul li a img {
vertical-align:middle;
padding-right: 4px;
}
.about-services {
width:30%;
float:left;
margin-left:5%;
}
.about-services ul li a {
color: #7B7C7E;
font-family: 'Roboto', sans-serif;
font-size: 13px;
line-height: 2.3em;
}
.about-services ul li a:hover {
color:#ff4136;
}
/***********--services--****************/
.services-top {
border-bottom: 1px dotted #999;
padding: 20px 0;
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.group:before, .group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1;
}
.col_1_of_4 {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col_1_of_4:first-child {
margin-left: 0;
} /* all browsers except IE6 and lower */
.span_1_of_4 {
width: 20.8%;
padding:1.5%;
}
.span_1_of_4 h3 {
text-transform: uppercase;
color:#ff3f34;
margin: 5px 0px;
padding-bottom: 8px;
font-family: 'Roboto', sans-serif;
line-height:25px;
}
.span_1_of_4 h3 span {
color:#4D4D4D;
font-size:0.8em;
}
.span_1_of_4 p {
font-size: 0.85em;
color: #888;
line-height: 1.8em;
padding:5px 0;
}
.services_list li a {
font-size: 0.8em;
color:#888;
display:block;
padding: 8px 0px 8px 15px;
background:url(../../../application/images/marker.png) no-repeat 0;
font-family: 'Roboto', sans-serif;
}
.services_list li a:hover {
color:#555;
}
.col_1_of_2 {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col_1_of_2:first-child {
margin-left: 0;
}
.span_1_of_2 {
width: 46.2%;
padding:1.5%;
}
.span_1_of_2 h3 {
font-size: 1.6em;
text-transform: uppercase;
color:#4D4D4D;
margin: 5px 0px;
padding-bottom: 8px;
font-family: 'Roboto', sans-serif;
line-height:25px;
}
.span_1_of_2 p span {
font-size:1em;
padding:5px 0;
color:#949494;
font-weight:bold;
line-height: 1.8em;
}
.span_1_of_2 p {
font-size:0.85em;
color:#888;
line-height: 1.8em;
}
.span_1_of_2 h4 span {
color:#ff4136;
padding-right:5px;
}
.span_1_of_2 h4 {
font-size:1em;
color:#777;
text-transform:uppercase;
font-family: 'Roboto', sans-serif;
margin-top:15px;
}
.treatment_img {
width: 13%;
float: left;
margin-right: 3%;
}
.treatment_img img {
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;
}
.treatment-desc {
width: 84%;
float: left;
margin-right: 0px;
}
.hair_treatment {
margin:20px 0;
}
/*---contact----*/
/* Contact Form ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.group:before, .group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1;
}
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left:0;
}
.span_2_of_3 {
width: 63.1%;
padding:1.5% 1.5% 1.5% 0%;
}
.span_1_of_3 {
width: 29.2%;
padding:1.5%;
}
.span_2_of_3 h3, .span_1_of_3 h3 {
font-family: 'Roboto', sans-serif;
color:#ff4136;
font-size: 1.2em;
margin: 0 auto;
text-transform: uppercase;
padding: 0px 0px 10px 0px;
}
/************************************************/
.header-search [type="text"], .header-search textarea {
padding:8px;
display:block;
width:98%;
border: none;
outline:none;
color:#444;
font-size:1.2em;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid rgba(192, 192, 192, 0.31);
-webkit-appearance:none;
}
/***********************************************/
.contact-form {
position:relative;
padding-bottom:10px;
}
.contact-form div {
vertical-align:top;
}
.contact-form span {
display:block;
}
.contact-form input[type="text"], .contact-form textarea {
padding:8px;
display:block;
width:98%;
border: none;
outline:none;
border: 1px solid rgba(192, 192, 192, 0.31);
-webkit-appearance:none;
}
.contact-form textarea {
resize:none;
height:120px;
}
.contact-form input[type="text"]:focus, .contact-form textarea:focus {
border:1px solid rgba(192, 192, 192, 0.72)
}
.btn-placeholder { overflow:hidden; width:92%; }
.button-link-style {
background:#ff4136;
padding: 12px 32px;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 1em;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
text-transform: uppercase;
border:none;
outline: none;
cursor: pointer;
text-align:center;
display: Table;
}
.button-link-style a { color:#FFF !important; text-decoration:none;}
.mybutton {
border-radius:5px;
background:#ff3f34;
padding: 12px 15px;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 1em;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
text-transform: uppercase;
border:none;
outline: none;
cursor: pointer;
display: inherit;
width:max-content;
position:relative;
}
.smallbutton{padding: 5px;font-size: 14px; text-transform: none;}
button, input[type="submit"], input[type="button"]{min-width:auto;text-align: center;}
.repeat_table1 .mybutton {background:#202020;}
.repeat_table1 .mybutton-gray {background: gray !important;}
.search_job .search_filter .mybutton, .search_user .search_filter .mybutton {
width: 165px !important;
}
.mybutton:hover {
background-color:#202020;
}
.mybutton:active {
background-color:#202020;
}
.mybutton-black {
border-radius:5px;
background:#202020;
padding: 12px 32px;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 1em;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
text-transform: uppercase;
border:none;
outline: none;
cursor: pointer;
}
.mybutton-black:hover {
background-color:#ff4136;
}
.mybutton-black:active {
background-color:#202020;
}
.mybutton-gray {
background:#646464;
font-family: 'Roboto', sans-serif;
color: #FFF;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
text-transform: uppercase;
border:none;
outline: none;
cursor: pointer;
padding: 9px 20px;
border-radius: var(--ec-radius-sm);
}
.mybutton-gray:hover {
background-color:#202020;
}
.mybutton-gray:active {
background-color:#202020;
}
.fixed_for_mobile {
}
.fixed_for_mobile .left_align {
float:left;
}
.company_address {
padding-top:26px;
}
.company_address p {
font-size: 0.8125em;
color: #7B7C7E;
font-family: 'Roboto', sans-serif;
line-height: 1.8em;
}
.company_address p span {
text-decoration:underline;
color:#555;
cursor:pointer;
}
.map {
margin-bottom:15px;
}
.grid2 ul li a, .grid2 p {
color: #646464;
font-size: 0.875em;
padding: 5px 0;
width:100%;
}
.UnderLine {
padding:0 0.5em; background: #fff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}
.UnderLine li, .UnderLine p {
border-bottom: 1px dashed #DBDBDB;
color: #646464;
font-size: 0.875em;
line-height: 2.6em;
padding: 5px 0;
width:100%;
}
.ProfileTab ul {
margin-top:0.9em;
}
.ProfileTab li {
display:inline-block;
position:relative;
}
.ProfileTab li a {
font-family: 'Roboto', sans-serif;
color: #7B7C7E;
text-transform: uppercase;
font-size: 0.8em;
padding:34px 30px 44px;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.ProfileTab li.active > a, .ProfileTab li > a:hover {
color:#fff;
background:#ff4136;border-radius:5px 5px 0px 0px;
}
/* .ProfileTab li > a:hover:before, .ProfileTab li.active > a:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 10px solid #ff4136;
border-bottom: 0 solid rgba(0, 0, 0, 0)!important;
border-right: 10px solid rgba(0, 0, 0, 0)!important;
border-left: 10px solid rgba(0, 0, 0, 0)!important;
left: 50%;
top: -12px;
margin-left: -10px;
} */
.ProfileTab {
height: 1em;
padding: 0.4em 0;
position: relative;
z-index: 9;
margin-bottom:0.5em;
}
.ProfileTab ul, .ProfileTab ul li {
margin:0;
padding:0;
}
.ProfileTab ul li {
float:left;
}
.ProfileTab ul li a {
padding: 1em;
color: #000000;
font-size: 0.8em;
background-color: #ededed;
line-height: normal !important;
border-radius: 5px 5px 0px 0px;margin-left: 5px;
}
.circle-orange, .circle-gray {
font-size:80%;
}
.circle-orange {
background:#ff4136;
padding:1px;
border-radius:3em;
-webkit-border-radius:3em;
-moz-border-radius:3em;
-o-border-radius:3em;
color:#FFF;
}
.circle-gray {
background:#AAAA;
border:1px solid #EEE;padding: 5px 10px;
border-radius: 15px;
}
.circle-gray a {
color:#7b7c7e
}
/***************** Table *******************************/
.fixed-width {
width:108% !important;
margin-top:0%;
}
#slider-range {
width:90%;
margin:auto;
}
.Table-without-border {
display: table;
font-family: 'Roboto', sans-serif;
width:100%;
padding:0 0 10px 0;
font-size: 100%;
border: 0px dotted #D6D5D5;
}
.Table {
display: table;
font-family: 'Roboto', sans-serif;
width:96%;
padding:10px;
font-size: 100%;
border: 1px solid #CCC;
border-radius: 5px;
}
.Title {
display: table-caption;
text-align: left;
font-weight: bold;
font-size: larger;
margin:0;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: left;
}
.Row {
display: flex;flex-wrap:wrap;
position: relative;
justify-content: space-between;
align-items: center;
margin: 2px 10px 2px 10px;
}
.Cell {
display: table-cell;
border:0em solid;
}
.Table1, .repeat_table1, .repeat_table2, .repeat_table3, .repeat_table4, .repeat_table5, .repeat_table6, .repeat_table7, .repeat_table8 {
display: table;
font-family: 'Roboto', sans-serif;
width:100%;
font-size: 100%;
}
.Table1 .content select, .repeat_table1 .content select, .repeat_table2 .content select, .repeat_table3 .content select, .repeat_table4 .content select, .repeat_table5 .content select, .repeat_table6 .content select, .repeat_table7 .content select, .repeat_table8 .content select {
width: 93% !important;
}
.Table1 .Cell, .repeat_table1 .Cell, .repeat_table2 .Cell, .repeat_table3 .Cell, .repeat_table4 .Cell, .repeat_table5 .Cell, .repeat_table6 .Cell, .repeat_table7 .Cell, .repeat_table8 .Cell {
width:24% !important;
}
.hide{display:none;}
.cke_voice_label, .cke_button_label {
display: none !important;
}
/**************************************************************/
.drp-dwn select {
display:none;
}
.background-red, .background-black, .background-gray, .border-all {
margin:1em 0;
padding:1em !important;
}
.background-red {
background:#ff4136;
}
.background-black {
background:#111;
}
.background-gray {
background:#D6D5D5;
}
.border-bottom {
border-bottom: 1px dotted #D6D5D5;
}
.border-all {
border: 1px dotted #D6D5D5;
width:96%;
display:table;border-radius:5px;background: #F8F8F8;
}
.or {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E6E6E6;
border-radius: 100%;
color: #787878;
float: left;
font-size: 18px;
font-weight: 700;
height: 46px;
line-height: 43px;
margin: 92px auto auto -25px;
text-align: center;
width: 46px;
}
.content select {
padding:0.5em; border: 1px solid rgba(192, 192, 192, 1);
border-radius: 5px;
}
.content .time_from, .content .time_to{width:250px;}
.content textarea {
resize:none;
height:120px;
}
.open .thumbs_action{opacity: 1 !important;}
.content input[type="url"], .content input[type="number"], .content input[type="text"], .content input[type="password"], .contact-form textarea {
padding:0.5em;
border:1px solid rgba(192, 192, 192, 1); border-radius:5px;width:100%;
}
.contact-form textarea {height: 80px;}
.content input[type="text"]:focus, .contact-form textarea:focus {
border:1px solid rgba(192, 192, 192, 0.72)
}
.float-left {
float:left ;
}
.float-right {
float:right ;
}
.Messages-profile {
border: 1px dotted #D6D5D5;
background: #F8F8F8;
font-size: 0.875em;
padding:10px; border-radius: 5px;
}
.v-align-top {
vertical-align:top;
}
.perhour-profile-rate {
background:#AAAA;
border:1px solid #EEE;
padding:1px;
border-radius:5em;
-webkit-border-radius:3em;
-moz-border-radius:3em;
-o-border-radius:3em;
width:5em;
height:5em;
text-align:center;
vertical-align:middle;
line-height:5em;
font-size:100%;
letter-spacing : -1px;margin-bottom:10px;margin:auto;
}
.user_view .recived-request-left-panel p{margin-top:5px;}
.sepline{border-bottom: 1px solid grey;padding: 0;
margin: 0;
margin-bottom: 8px;}
.displayflex{ display: flex;
justify-content: flex-start;
align-items: center;}
.current_jobs strong, .previous_jobs strong, .work_page strong{font-size:14px;}
.current_jobs .mybutton.backgrey{border-radius: 5px 5px 0 0;}
.appbutton{ border-radius:5px; width: max-content;
border: 2px solid grey;
padding: 10px;
background: grey;
color: #FFF;}
.perhour-rating {
font-size: larger;
padding:0.5em 0;
font-weight:bold;display:none;
}
.recived-request-icon {
font-size:large;
padding:0.5em 0;
}
.recived-request-icon a {
display:inline-block;
color:#222;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
cursor:pointer;
margin:2px !important;
padding-right:7px;
}
.recived-request-icon a:hover {
color:#ff4136;
}
.recived-request-left-panel .mybutton, .recived-request-left-panel .mybutton-gray, .recived-request-left-panel .mybutton-black {
font-size:70%;
}
video {
width: 100% !important;
height: auto !important;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.one_half, .two_third, .one_third, .one_fourth, .one_third_plus, .three_fourth {
margin:1% 2% 1% 0%;
text-align:left;
}
.last_suburb{ width:39% !important; }
.one_half_suburb{ width:55% !important; }
.two_third {
width:61%;
}
.one_third {
width:31%;
}
.three_fourth {
width:75%;
}
.last {
clear:right;
}
.one_third_plus {
width:34%;
}
.width_hundred {
width:100%;
display:table;
}
.margin-right-link {
margin-right:5%;
}
.lock_unlock {
position: absolute;
right: 20px;
margin-top: -4px;
}
.one_half_home {
width:50%;
margin:auto;
}
.content-title {
font-size:750%;
font-weight:bold;
text-align:center;
}
/*p.speech:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
bottom: -3.5em;
border: 25px solid;
border-color: #ff4136 transparent transparent #ff4136;
}
p.speech:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
border-color: #fff transparent transparent #fff;
}
p.speech {
position: relative;
width: 200px;
text-align: center;
margin-bottom:3em;
padding:1em;
background-color: #fff;
border: 8px solid #ff4136;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #ff4136;
-moz-box-shadow: 2px 2px 4px #ff4136;
box-shadow: 2px 2px 4px #ff4136;
}
*/
/* ================================================================
CARD LAYOUT SYSTEM - Contacts & Search Pages
Unified styling for desktop/mobile card layouts
================================================================ */
.contacts-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: transparent;
}
.contacts-heading {
font-size: 1.65rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.025em;
margin: 0 0 20px;
line-height: 1.2;
}
.contacts-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.contacts-nav-btn {
align-items: center;
gap: 6px;
}
.secondary{border: 1px solid #e5e7eb;}
.contacts-nav-btn:hover {
background: #e8281e;
border-color: #e8281e;
color: #fff;
text-decoration: none;
}
/* ========== DESKTOP CARD ========== */
.desktop-cards {
display: block;
}
.d-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
margin-bottom: 12px;
transition: box-shadow .18s ease, transform .18s ease;
}
.d-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.10);
transform: translateY(-1px);
}
.d-card-highlight {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 22px;
border-bottom: 1px solid #f3f4f6;
}
.d-card-logo {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.d-card-logo img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e5e7eb;
display: block;
}
.d-card-overview {
flex: 1;
min-width: 0;
}
.d-card-title {
font-size: .95rem;
font-weight: 600;
color: #111827;
margin: 0 0 2px;
line-height: 1.3;
}
.d-card-company {
font-size: .8rem;
color: #6b7280;
margin: 0;
line-height: 1.4;
}
.d-card-rate {
font-size: .95rem;
font-weight: 700;
color: #e8281e;
text-align: center;
min-width: 65px;
flex-shrink: 0;
}
.m-star-btn {
background: none;
border: none;
font-size: 1.5rem;
color: #d1d5db;
cursor: pointer;
transition: color .15s;
padding: 4px 8px;
}
.m-star-btn:hover,
.m-star-btn.selected {
color:var(--ec-primary);
}
.d-card-body {
padding: 0 22px 16px;
font-size: .9rem;
color: #374151;
}
.d-card-body p {
margin: 0 0 12px;
font-size: .8rem;
color: #6b7280;
line-height: 1.5;
}
.d-card-body p:last-child {
margin-bottom: 0;
}
.d-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 12px;
}
.d-card-grid:last-child {
margin-bottom: 0;
}
.d-field-label {
font-size: .75rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.d-field-value {
font-size: .9rem;
color: #374151;
line-height: 1.5;
}
.d-field-value-role {
font-weight: 600;
}
.d-field-value-skills {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.d-card-links {
padding-top: 12px;
}
.d-card-link {
font-size: .8rem;
color: #2563eb;
text-decoration: none;
}
.d-card-link:hover {
text-decoration: underline;
}
.d-card-actions {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 22px;
border-top: 1px solid #f3f4f6;
}
.d-actions-spacer {
flex: 1;
}
.send_message_box {
display: none;
padding: 14px 22px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
}
.send_message_box textarea {
width: 100%;
min-height: 60px;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 8px 12px;
font-size: .85rem;
resize: vertical;
box-sizing: border-box;
font-family: inherit;
line-height: 1.5;
}
.send_message_box .mybutton {
margin-top: 8px;
padding: 8px 16px;
background: #e8281e;
color: #fff;
border: none;
border-radius: 6px;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.send_message_box .mybutton:hover {
background: #c41e16;
}
/* ========== DESKTOP BUTTONS ========== */
.d-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: .8rem;
font-weight: 600;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all .15s;
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
}
.d-btn-primary {
background: #e8281e;
color: #fff;
}
.d-btn-primary:hover {
background: #c41e16;
}
.d-btn-gray {
background: #f3f4f6;
color: #374151;
border-color: #e5e7eb;
}
.d-btn-gray:hover {
background: #050505;
}
.d-btn-dark {
background: #111827;
color: #fff;
}
.d-btn-dark:hover {
background: #1f2937;
}
.d-btn-outline {
background: transparent;
color: #374151;
border-color: #d1d5db;
}
.d-btn-outline:hover {
background: #f9fafb;
}
/* ========== MOBILE CARD ========== */
.mobile-cards {
display: none;
}
.m-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
margin-bottom: 12px;
transition: box-shadow .18s ease;
}
.m-card:active {
box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.m-card-highlight {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid #f3f4f6;
}
.m-card-logo {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.m-card-logo img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e5e7eb;
display: block;
}
.m-card-info {
flex: 1;
min-width: 0;
}
.m-card-title {
font-size: .9rem;
font-weight: 600;
color: #111827;
margin: 0 0 2px;
line-height: 1.3;
}
.m-card-sub {
font-size: .75rem;
color: #6b7280;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
.m-card-rate {
font-size: .95rem;
font-weight: 700;
color: #e8281e;
text-align: center;
min-width: 55px;
flex-shrink: 0;
}
.m-card-details {
padding: 12px 16px;
border-bottom: 1px solid #f3f4f6;
}
.m-card-details p {
margin: 0 0 8px;
font-size: .8rem;
color: #6b7280;
line-height: 1.5;
}
.m-card-details p:last-child {
margin-bottom: 0;
}
.m-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 8px;
}
.m-detail-label {
font-size: .7rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.m-detail-value {
font-size: .85rem;
color: #374151;
line-height: 1.5;
}
.m-job-titles-link {
display: block;
font-size: .75rem;
color: #2563eb;
text-decoration: none;
margin-top: 8px;
}
.m-job-titles-link:active {
text-decoration: underline;
}
.m-card-actions {
display: flex;
gap: 6px;
padding: 12px;
}
/* ========== MOBILE BUTTONS ========== */
.m-btn-primary {
background: #e8281e;
color: #fff;
}
.m-btn-primary:active {
background: #c41e16;
}
.m-btn-gray {
background: #f3f4f6;
color: #374151;
border-color: #e5e7eb;
}
.m-btn-gray:active {
background: #e5e7eb;
}
.m-btn-outline {
background: transparent;
color: #374151;
border-color: #d1d5db;
}
.m-btn-outline:active {
background: #f9fafb;
}
/* ========== EMPTY STATE ========== */
.contacts-empty {
background: #fff;
border: 1.5px dashed #d1d5db;
border-radius: 16px;
padding: 64px 24px;
text-align: center;
}
.contacts-empty-icon {
display: block;
margin: 0 auto 18px;
width: 52px;
height: 52px;
opacity: .25;
}
.contacts-empty-title {
font-size: 1.05rem;
font-weight: 600;
color: #111827;
margin: 0 0 6px;
}
.contacts-empty-sub {
font-size: .85rem;
color: #9ca3af;
margin: 0;
}
/* ========== PAGINATION ========== */
.contacts-pagination,
.ec-pagination {
margin-top: 28px;
display: flex;
justify-content: center;
width: 100%;
}
.contacts-pagination ul,
.ec-pagination ul {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.contacts-pagination li,
.ec-pagination li {
display: flex;
align-items: center;
justify-content: center;
}
.contacts-pagination a,
.contacts-pagination span,
.ec-pagination a,
.ec-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e5e7eb;
background: #fff;
color: #374151;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.contacts-pagination li.active a,
.contacts-pagination li.active span,
.contacts-pagination span.current,
.ec-pagination li.active a,
.ec-pagination li.active span,
.ec-pagination span.current {
background: var(--ec-primary-gradient);
border-color: transparent;
color: #fff;
box-shadow: 0 10px 22px rgba(232,40,30,.18);
}
.contacts-pagination a:hover,
.ec-pagination a:hover {
background: #fff5f3;
border-color: #f4b2ab;
color: var(--ec-primary);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.contacts-pagination li.active a:hover,
.contacts-pagination li.active span:hover,
.ec-pagination li.active a:hover,
.ec-pagination li.active span:hover {
background: var(--ec-primary-gradient);
border-color: transparent;
color: #fff;
transform: none;
}
.contacts-pagination li.prev a,
.contacts-pagination li.next a,
.contacts-pagination li.first a,
.contacts-pagination li.last a,
.ec-pagination li.prev a,
.ec-pagination li.next a,
.ec-pagination li.first a,
.ec-pagination li.last a {
font-size: 15px;
font-weight: 700;
}
@media (max-width: 768px) {
.contacts-pagination ul,
.ec-pagination ul {
gap: 6px;
}
.contacts-pagination a,
.contacts-pagination span,
.ec-pagination a,
.ec-pagination span {
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 9px;
font-size: 12px;
}
}
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
.desktop-cards { display: none; }
.mobile-cards { display: block; }
}
/** speach **/
.speech {
padding-top:10px;
}
.edit_profile.speech { width: 40% !important; }
.speech_:after {
content: "";
position: absolute;
bottom: -29px;
left: 16%;
border-style: solid;
border-width: 29px 18px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.speech_:before {
content: "";
position: absolute;
top: 100%;
left: 15%;
border-style: solid;
border-width: 33px 22px 0;
border-color: #ff4036 transparent;
display: block;
width: 0;
z-index: 0;
}
/** speach **/
.background-gray1 { margin-bottom:2em;}
.search-btn {
background:#F1F1F1;
}
.menuitem {
line-height:1em;
margin-top: 1em;
font-weight: 800;
width: 100%;
display: table;
position: relative;
}
.submenu {
width: 100%;
line-height:1.3em;
font-size:14px;
margin:1em 0;
}
.hspace {
margin:0 1em 1em 0;
height:6em;
width:6em;
}
.myspace {
}
.fix-height { height:60px;}
#addthis {
width:100%;
clear:both;
margin:1% 0;
position:relative;
}
.addthistop {
position:relative;
top:5px;
left:-6em;
}
.graybg {
background:#f1f1f1;
border:1px solid #f3f3f3;
height:26em;
}
.graybg p {
padding:1em;
}
.profileimg {
margin-bottom:1em;
height:20em;
overflow:hidden;
}
.profileimg img {
width:100% !important;
}
/*
.quick_list_page .quantity, .search_job .quantity {
height: 40px;
position: absolute;
width: 90px !important;
left: -72px;
display:none;
}
*/
.mybutton.backgrey {
background: none repeat scroll 0 0 #646464 !important;
}
.our-staff .dc-grids .dc-head {
}
.edit_profile .dc-head-img {
position:relative;
}
.edit_profile .licenses_file {
position:relative;
width:98%
}
.remove_img img {
height: 20px;
width:20px;
position: absolute;
right: -24px;
top:0;
}
.contact-form .cell .one_half { padding-top:0; padding-bottom:0; margin:0% 1%;}
.contact-form .full_grid { padding:0; margin:0;}
.footer .section.group{ height:245px;display: flex;justify-content: center;}
.up { float: left; padding-right: 10px;}
.down{ float:right;}
.sharethis{z-index:9; right:62px; background:#FFF;display:none;}
.search_user .sharethis{right:10px;}
.user_contacts .sharethis, .contact_request .sharethis{right:160px;}
.quick_list_worker .sharethis, .quick_list_page .sharethis{top:5px;}
/*----responsive-design - Mobile styles start here-----*/
.lockunlock p{font-weight: bold;}
.view_contractor_profile{border: 1px dotted #D6D5D5;
background: #F8F8F8;
font-size: 0.875em;
padding: 10px;
border-radius: 5px;
text-align: center;}
span.specific_skills{ font-size: 14px;}
.lsection .specific_skills{ overflow: hidden;height: 35px;}
@media only screen and (max-width: 1366px) and (min-width: 1280px) {
.wrap {
width:90%;
}
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
.wrap {
width:90%;
}
.ProfileTab ul li a {
margin:0;
}
.lock_unlock { right:2%;}
}
@media only screen and (max-width: 1024px) {
.wrap {
width:90%;
}
.top-nav li a {
font-size:0.95em;
padding: 34px 15px 47px;
}
.content-slogan p, .content-slogan a {
width:100%;
}
.about-histore ul li p {
width:78%;
}
.social-icons li {
margin:10px 1px;
}
.header-phone h2, .header-phone h4, .header-phone h2 a, .header-phone h4 a {
font-size:1.1em;
}
}
@media (max-width:800px) {
.work_page .Table .one_half.fixed-half {width: auto;}
/* .grides {display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;} */
.homepage .grides {display: block}
.grid2, .grid1{width:100%; margin: 5px;}
.agreement_box .Row .Cell{width: 100%;}
.fwquantity {
position: relative;
left: 0;
margin-top: 10px;
text-align: left;
}
.fwdate {
position: relative;
right: 0;
margin-top: 5px;
display: flex;
justify-content: flex-start;
align-items: center;}
#addthis {height: auto;}
.wrap {
width:95%;
}
.logo { width:60%;}
.header-phone {
font-size:0.6em;
margin-top:1.5em;
height:auto;
border-radius:10px;
width: 200px;
}
.content_top h2 {
font-size:1.2em;width:100%;
}
.grid_img {
width:35%;
}
.grid_data {
width:59%;
}
.content-slogan p {
font-size:2em;
}
ul.address li {
font-size:0.7em;
}
.dc-grids {
padding:20px 0;
}
.dc-head-info h3 {
font-size:1.2em;
}
.dc-head { height:290px;}
.dc-head-info-work h3 {
font-size:1.2em;
}
.services_list li a {
font-size:0.7em;
}
.grid1 {
width:100%;
padding:2%;
}
.triangle-arrow {
display:none;
}
.last {
float:none !important;
clear:both;
}
/* .Table {
margin-top:1em;
margin-bottom:2em;
border-bottom:1px solid #F8F8F8;
border-left:0px solid #fff;
border-right:0px solid #fff;
} */
.search_filter { display:none;}
.contact-form .one_half { padding-top:0 !important; padding-bottom:0 !important; margin:0% ;}
, .mybutton-gray, button { text-align:center; width:100%; display:inline; }
.one_half, .two_third, .one_third, .one_fourth, .three_fourth .one_third_plus, .one_half_home {padding: 1% 2% 1% 0%;}
.checkbox {padding: 1%; width:95.5%;}
.copy-right p.company_name { float:none; text-align:center; }
/** speach **/
.speech {
padding: 14%;
}
.speech:after {
bottom: -29px;
left: 16%;display:none;
}
.speech:before {
left: 14%; display:none;
}
.float-right { float:none;}
/** speach **/
#invitef, #fsearch{left:2% !important; right:1% !important;}
.mybutton, .mybutton-black {
display: inline-block;
}
}
@media (max-width:786px) {
.rr_to_work .rsection, .rr_to_work .lsection{width: 100%;}
#find_me_worker_page.rr_to_work .rsection{width: 40%;}
#find_me_worker_page .Row {align-items: flex-start;}
.view_contractor_profile{border: 1px dotted #D6D5D5;
background: #F8F8F8;
font-size: 0.875em;
padding: 10px;
border-radius: 5px;
text-align: center;}
.grid1 {
width:94%;
padding:3%;
}
.triangle-arrow {
display:none;
}
.content-title {
font-size:350%;
font-weight:bold;
text-align:center;
}
.one_half, .two_third, .one_third, .one_fourth, .one_third_plus, .one_half_home {
width:auto;
margin:auto;
}
.last {
float: left !important;
}
.edit_profile input[type="text"], .edit_profile input[type="password"], .edit_profile textarea { width:100% !important;}
.footer .wrap { width:100%; display:table;}
#invitef, #fsearch{left:2% !important; right:1% !important;}
.mybutton, .mybutton-black {
display: inline-block;
}
}
@media (max-width:640px) {
.wrap {
width:95%;
}
.btn-placeholder { font-size:90%; width:95%;}
.top-nav li a {
font-size: 0.75em;
padding: 37px 5px 47px;
}
.header-phone h2 {
font-size:1.2em;
}
.header-phone h4 {
font-size:0.75em;
}
.header-tagline h3 {
font-size:0.8em;
}
.content, .content_top {
padding: 0;
}
.dc-head { height:390px;}
.grid_data p {
font-size:0.8em;
}
.grid1 {
width:94%;
padding:0 3%;
}
.slogan {
padding:0;
}
.content-slogan p {
font-size:1.5em;
}
.dc-head-info {
width:92%;
}
.dc-head-info-work {
}
.span_1_of_4 {
width:94%;
padding:1% 3%;
}
.col_1_of_4 {
margin:0;
}
.about-topgrid1, .about-histore, .about-services {
width:94%;
padding:3%;
margin:0;
}
.project-top-patination {
margin:20px 0 0 0;
padding:5px 0;
}
.about-histore ul li p {
width:88%;
}
.projects-bottom-paination {
padding:0 0 10px 0;
}
.services_list li a {
font-size:0.85em;
}
.triangle-arrow {
display:none;
}
.content-title {
font-size:350%;
font-weight:bold;
text-align:center;
}
.one_half, .two_third, .one_third, .one_fourth, .one_third_plus, .one_half_home {
width:auto;
margin:auto;
padding: 5px 0%;margin-bottom: 5px;
}
.last {
float:left !important;
clear:both;
}
.copy-right p.company_name { padding: 0% 3%;}
#invitef, #fsearch{left:2% !important; right:1% !important;}
.mybutton, .mybutton-black {
display: inline-block;
}
}
@media (max-width:480px) {
.mmt10{margin-top:10px;}
.mh{display:none !important;}
.dc-head-info h3{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;}
.dc-head-info h3 small{width:100%;}
.rr_to_work .lsection{width:100%;padding: 0 0 10px 0;}
#find_me_worker_page.rr_to_work .lsection {
width: 60%;
padding: 0 0 10px 0;
}
.rr_to_work .rsection .dc-head-img img {
width: 80px;
height: 80px;}
a.quick_list {margin-bottom: 0;}
#find_me_worker_page.rr_to_work .rsection .pprate p {
height: 12px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #FFF;
background: grey;
font-size: 16px;
padding: 10px;
margin-bottom: 0;
}
.create_job .Row .Cell, .create_quick_job .Row .Cell, .contact-form{width:100% !important;}
.create_job .Row .Cell label{width: -webkit-fill-available;}
.wrap { margin: 15px;}
.wrap.rr_to_work.inbox { margin: 0;}
.wrap.rr_to_work.inbox .Table-without-border{padding: 0 2% 2% 2%;}
.wrap.rr_to_work.inbox .Table-without-border .displaycenter .Cell {margin-top: 2%;}
.displaycenter button { width: 100%;}
.one_half_suburb { width:100% !important;}
.header_top {
padding:5px 0;
}
.logo { width:100%;}
.logo, .top-nav {
float:none;
text-align:center;
}
.top-nav {
display:none;
}
.header-phone {
width:100%;
font-size:0.8em;
margin-top:1em;
border-radius:0px;
}
.header-tagline h3 {
font-size:0.65em;
}
.sub_grid1, .sub_grid2 {
float:none;
width:100%;
}
.sub_grid2 {
margin-left:0;
padding-top:20px;
}
.grid_data p {
font-size:0.85em;
}
.dc-head {
float:none;
width:100%;
height:auto;
padding-bottom:20px;
}
.dc-profile p {
padding:5px 0;
}
.dc-head-info {
width:60%;
}
.dc-head-info-work {
}
.triangle-arrow {
border-top:87px solid #ff4136;
}
.header-tagline2 {
padding:20px 0;
}
.span_1_of_3, .span_2_of_3 {
width:94% !important;
padding:3% 3% 3% 0%;
}
.col {
margin: 0;
}
.triangle-arrow {
display:none;
}
.header-search {
float:none !important;
}
.Table {
font-size:90%;
}
.Cell {
width:100%;
display:block;
}
.displayflex{ display: flex;
justify-content: flex-start;
align-items: center;}
.Cell .one_half, .Cell .two_third, .Cell .one_third, .Cell .one_fourth, .Cell .one_third_plus, .Cell .one_half_home { width:100%; margin:0; padding:0;}
.Cell .one_half select {}
.checkbox { width:96.2%}
.header-search [type="text"], .header-search textarea {
padding:0;
}
.header-phone {
padding:0;
float:none;
height:3em;
}
.header-phone h2, .header-phone h4, .header-phone h2 a, .header-phone h4 a {
text-align:center;
font-size:100%;
margin:0;
padding-top: 0.6em;
}
.drp-dwn select {
padding:10px;
outline: none;
display: block !important;
width: 100%;
color: #000;
border: 1px solid rgb(92, 72, 87);
background: grey;
color:#FFF;
cursor: pointer;
font-size: 1.6rem;
border-radius: 15px;
}
.one_half, .two_third, .one_third, .one_fourth, .one_third_plus, .one_half_home {
width:100%;
margin:auto;
}
.content-title {
font-size:300%;
font-weight:bold;
text-align:center;
}
.mybutton, .mybutton-gray {
width:100%;
}
.content select {width: 100%;}
#location_search{margin-top:10px;}
.float-right, .float-left, .float-lt, .float-rt {
float:none;
}
/** speach **/
.speech {
padding:5%;
}
.speech:after {
bottom: -29px;
left: 36%;
}
.speech:before {
left: 35%;
}
/** speach **/
#invitef, #fsearch{left:2% !important; right:1% !important;}
.mybutton, .mybutton-black {
display: inline-block;
}
}
@media only screen and (max-width:320px) {
.wrap {
width:100%;
}
.top-nav {
display:none !important;
}
.header-tagline h3 {
margin-bottom:10px;
}
.grides {
padding-top:10px;
}
.content-slogan p {
font-size:1.2em;
}
.slogan-sub p {
width:100%;
font-size:0.8em;
}
.dc-profile a {
padding:8px 15px;
}
.dc-profile p, .our-staff .dc-grids .dc-head {
height:auto;
overflow:visible;
}
.about-histore ul li p {
width:82%;
}
.span_1_of_2 {
width:94%;
padding:3%;
}
.col_1_of_2 {
margin:0;
}
.contact-form input[type="text"], .contact-form textarea {
width:95%;
}
.triangle-arrow {
display:none;
}
.header-search {
float:none !important;
}
.Table {
font-size:90%;
}
.Cell {
font-size:75%;
}
.header-search [type="text"], .header-search textarea {
padding:1%;
margin:1%;
}
.header-phone {
padding:0;
float:none;
height:3em;
}
.header-phone h2, .header-phone h4, .header-phone h2 a, .header-phone h4 a {
text-align:center;
font-size:100%;
margin:0;
padding-top: 0.6em;
}
.mybutton, .backgrey {
width:100% !important;
}
.drp-dwn select {
padding:5px;
outline: none;
display: block !important;
width: 100%;
color: #000;
border: 1px solid rgb(92, 72, 87);
background: rgba(255, 255, 255, 0.59);
cursor: pointer;
}
.one_half, .two_third, .one_third, .one_fourth, .one_third_plus, .one_half_home {
width:95%;
}
.content-title {
font-size:150%;
font-weight:bold;
text-align:center;
}
.Table {
margin-bottom:2em;
margin-top:1em;
border-bottom:1px solid #F8F8F8;
border-left:0px solid #fff;
border-right:0px solid #fff;
}
.float-right, .float-left, .float-lt, .float-rt {
float:none;
}
.background-red, .background-black, .background-gray, .border-all {
padding:2% 1% !important;
}
.edit_profile select {
width:96% !important;
}
.lock_unlock {
margin-top: -18% !important;
}
.edit_profile .mcheckbox {
width:95%;
}
.btn-placeholder { width:95%;}
}
.addjob .Cell ul li a { cursor:pointer; color:#ff4136; }
ul.sharethis { position:absolute;padding:4px; opacity:0;
transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out; border:1px solid #ff4136; right:-7px; top:75px; }
.search_user ul.sharethis { right:-7px; top:22px; }
#invitef, #fsearch{position:absolute;z-index:99; background-color:#FFF;border:1px solid #ff4136;padding:10px;padding:10px;display:none; right:46%;border-radius:5px;}
.open{opacity:1 !important;z-index: 1 !important;}
.slowa{border-radius:5px;opacity:0;z-index: -1; transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out;}
.pop-close {
top: -30px;
}
.Table-without-border .Row input {
margin-top: 8px;
}
.Table-without-border .Row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.current_jobs .Table .Row {
border-bottom: 1px solid #ddd;display:flex;
}
.current_jobs .Table .Row:last-child {
border-bottom: none !important;
}
.current_jobs .Table .Row .Cell {
padding: 6px ;
}
.current_jobs .Table .Row > .Cell p.circle-gray {
margin-left: 5px;
}
.create_job input[type="file"]:active, .create_job input[type="file"]:focus {
color: #ff4136;
}
@media(max-width: 1025px) {
.one_third select, .one_fourth select, .one_third.last input, .one_third.last select {
width: 100%;
max-width: 100%;
min-width: auto;
}
.grid2.right_tab_profile_bits {
margin-top: 30px;
margin-left: 0;
}
}
@media (max-width: 800px) {
.work_page .Table .one_half.fixed-half {
width: 100%;
}
}
@media(max-width: 600px) {
.two_third.last .mybutton {
margin-right: 10px !important;
}
.signnup-pop a.pop-close {
top: -29px;
right: -15px;
z-index: 999999999999999;
}
.signnup-pop {
left: 48%;
}
/* Alert popup mobile improvements */
.alert-pop {
left: 50% !important;
max-width: 85vw;
top: 50% !important;
transform: translate(-50%, -50%) !important;
padding: 14px 48px 14px 14px !important;
}
.alert-pop .pop-close {
top: 50% !important;
right: 10px !important;
transform: translateY(-50%) !important;
width: 30px;
height: 30px;
}
.alert-pop .pop-close img {
width: 20px;
height: 20px;
}
.mybutton, .mybutton-black, .appbutton, .mybutton-gray, .quantity.job_reject_accept {
display: flex;
width: 100%;
max-width: -webkit-fill-available;
text-align: center;
justify-content: center;
align-items: center;
}
.buttondiv .Cell {
padding-left: 0px;
}
.current_jobs .Table .Row:last-child {
border-bottom: 1px solid #ddd !important;
}
table.contacts {
width: 100% !important;
}
}
@media(max-width: 375px) {
.signnup-pop {
max-width: 77%;
}
}
/* ============================================================
HYBRID CARD DESIGN SYSTEM - Global Reusable Classes
============================================================ */
:root {
--ec-primary: #ff4136;
--ec-primary-dark: #e52f1e;
--ec-primary-light: #ff6b63;
--ec-primary-gradient: linear-gradient(135deg, #ff4136 0%, #ff6b63 100%);
--ec-dark: #202020;
--ec-gray-btn: #646464;
--ec-nav-text: #7B7C7E;
--ec-muted: #505050;
--ec-bg: #f5f4f1;
--ec-white: #ffffff;
--ec-card-bg: #ffffff;
--ec-border: #e5e7eb;
--ec-border-light: #f0f0f0;
--ec-light-bg: #F8F8F8;
--ec-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--ec-shadow-lg: 0 10px 25px rgba(0,0,0,0.06);
--ec-shadow-hover: 0 8px 24px rgba(255,65,54,0.15);
--ec-radius-sm: 6px;
--ec-radius-md: 10px;
--ec-radius-lg: 16px;
}
/* ---------- Page Title Bar ---------- */
.page-title-bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.page-title-bar h2 {
font-size: 22px;
font-weight: 600;
color: var(--ec-dark);
}
.page-title-bar .result-count {
font-size: 13px;
color: var(--ec-nav-text);
}
/* ---------- Desktop Card (.d-card) ---------- */
.d-card {
background: var(--ec-card-bg);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-md);
overflow: hidden;
box-shadow: var(--ec-shadow-sm);
transition: all 0.3s;
margin-bottom: 20px;
}
.d-card:hover {
box-shadow: var(--ec-shadow-hover);
border-color: var(--ec-primary);
transform: translateY(-2px);
}
/* Card Highlight Header */
.d-card-highlight {
padding: 16px 20px;
background: linear-gradient(135deg, #fff5f3, #fffaf9);
border-bottom: 2px solid var(--ec-primary);
display: flex;
gap: 16px;
align-items: center;
}
.d-card-logo {
width: 56px;
height: 56px;
background: var(--ec-light-bg);
border-radius: 8px;
flex-shrink: 0;
border: 1px solid var(--ec-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.d-card-logo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.d-card-overview {
flex: 1;
min-width: 0;
}
.d-card-title {
font-size: 16px;
font-weight: 600;
color: var(--ec-dark);
line-height: 1.3;
}
.d-card-company {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: var(--ec-nav-text);
}
.d-card-company span {
color: var(--ec-muted);
white-space: nowrap;
}
.d-card-rate {
flex-shrink: 0;
background: var(--ec-primary-gradient);
color: white;
padding: 6px 14px;
border-radius: var(--ec-radius-sm);
font-size: 13px;
font-weight: 600;
min-width: 80px;
text-align: center;
}
.d-card-rate.quote-badge {
background: linear-gradient(135deg, var(--ec-dark), #444);
font-size: 12px;
}
/* Card Body */
.d-card-body {
padding: 16px 20px;
}
.d-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.d-field-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--ec-nav-text);
letter-spacing: 0.5px;
margin-bottom: 3px;
}
.d-field-value {
font-size: 13px;
color: var(--ec-dark);
font-weight: 500;
}
/* Role field — clamp to one line */
.d-field-value-role {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.d-card-links {
display: flex;
gap: 16px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ec-border-light);
}
.d-card-link {
font-size: 12px;
font-weight: 500;
color: var(--ec-primary);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
/* Card Actions Bar */
.d-card-actions {
padding: 12px 20px;
background: var(--ec-light-bg);
border-top: 1px solid var(--ec-border);
display: flex;
align-items: center;
gap: 10px;
}
.d-card-actions select {
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: var(--ec-radius-sm);
font-size: 12px;
color: var(--ec-muted);
background: white;
cursor: pointer;
}
.d-btn {
padding: 9px 20px;
border-radius: var(--ec-radius-sm);
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
display: inline-block;
}
.d-btn-primary { background: var(--ec-primary-gradient); color: white; }
.d-btn-gray { background: var(--ec-gray-btn); color: white; }
.d-btn-dark { background: var(--ec-dark); color: white; }
.d-btn-outline { background: white; color: var(--ec-muted); border: 1px solid #d1d5db; }
.d-actions-spacer { flex: 1; }
/* Message Box inside desktop card */
.d-card .send_message_box {
padding: 12px 20px;
border-top: 1px solid var(--ec-border-light);
background: var(--ec-light-bg);
}
.d-card .send_message_box textarea.message {
width: 100%;
min-height: 80px;
padding: 10px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-size: 13px;
resize: vertical;
margin-bottom: 8px;
box-sizing: border-box;
}
/* ---------- Mobile Card (.m-card) ---------- */
.m-card {
background: var(--ec-card-bg);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-md);
overflow: hidden;
box-shadow: var(--ec-shadow-sm);
margin-bottom: 12px;
}
.m-card:active { transform: scale(0.99); }
.m-card-highlight {
padding: 12px 14px;
background: linear-gradient(135deg, #fff5f3, #fffaf9);
border-bottom: 2px solid var(--ec-primary);
display: flex;
gap: 10px;
align-items: center;
}
.m-card-logo {
width: 44px;
height: 44px;
background: var(--ec-light-bg);
border-radius: 8px;
flex-shrink: 0;
border: 1px solid var(--ec-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.m-card-logo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.m-card-info { flex: 1; min-width: 0; }
.m-card-title {
font-size: 14px;
font-weight: 600;
color: var(--ec-dark);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.m-card-sub { font-size: 11px; color: var(--ec-nav-text); }
.m-card-rate {
flex-shrink: 0;
background: var(--ec-primary-gradient);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
}
.m-card-rate.quote-badge {
background: linear-gradient(135deg, var(--ec-dark), #444);
font-size: 10px;
}
/* Star button in mobile card header */
.m-star-btn {
flex-shrink: 0;
background: none;
border: 1px solid grey;
color: #ccc;
font-size: 20px;
cursor: pointer;
padding: 0 2px;
line-height: 1;
transition: color 0.2s;
border-radius: 50px;
}
.m-star-btn:hover, .m-star-btn.active {
color: var(--ec-primary);
}
/* Quantity select in mobile card actions */
.m-qty-select {
flex: 1;
padding: 8px 4px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-size: 11px;
min-height: 44px;
background: white;
cursor: pointer;
max-width: 80px;
}
.m-card-details { padding: 12px 14px; }
.m-detail-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 10px;
}
.m-detail-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--ec-nav-text);
letter-spacing: 0.4px;
margin-bottom: 2px;
}
.m-detail-value { font-size: 12px; color: var(--ec-dark); font-weight: 500; }
.m-card-actions {
padding: 10px 14px;
background: var(--ec-light-bg);
border-top: 1px solid var(--ec-border);
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.m-btn {
flex: 1;
border-radius: var(--ec-radius-sm);
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.4px;
border: none;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.m-btn-primary { background: var(--ec-primary-gradient); color: white; }
.m-btn-gray { background: var(--ec-gray-btn); color: white; }
.m-btn-dark { background: var(--ec-dark); color: white; }
.m-btn-outline { background: white; color: var(--ec-muted); border: 1px solid #d1d5db; }
/* Mobile Card Links */
.m-card-links {
display: flex;
gap: 12px;
padding: 0 14px 12px;
}
.m-card-link {
font-size: 11px;
font-weight: 500;
color: var(--ec-primary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}
.m-card-link:hover {
border-bottom-color: var(--ec-primary);
}
/* Message Box inside mobile card */
.m-card .send_message_box {
padding: 10px 14px;
border-top: 1px solid var(--ec-border-light);
background: var(--ec-light-bg);
}
.m-card .send_message_box textarea.message {
width: 100%;
min-height: 60px;
padding: 8px;
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-sm);
font-size: 13px;
resize: vertical;
margin-bottom: 8px;
box-sizing: border-box;
}
/* ---------- Responsive Breakpoints ---------- */
.desktop-cards { display: block; position: relative; }
.mobile-cards { display: none; }
@media (max-width: 1024px) {
.d-card-grid { grid-template-columns: repeat(2, 1fr); }
.d-card-actions { flex-wrap: wrap; }
.d-actions-spacer { display: none; }
}
@media (max-width: 768px) {
.desktop-cards { display: none !important; }
.mobile-cards { display: block !important; }
}
/* ---------- Pagination Styling ---------- */
.search_job .projects-bottom-paination {
display: flex;
justify-content: center;
gap: 4px;
padding: 16px 0;
}
.search_job .projects-bottom-paination a,
.search_job .projects-bottom-paination span {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ec-radius-sm);
font-size: 12px;
font-weight: 500;
color: var(--ec-muted);
border: 1px solid var(--ec-border);
background: white;
text-decoration: none;
}
.search_job .projects-bottom-paination span.current,
.search_job .projects-bottom-paination a:hover {
background: var(--ec-primary-gradient);
color: white;
border-color: transparent;
}
/* ==========================================================================
FIND ME WORKER PAGE - Card Overrides (search_user.php)
Scoped to #find_me_worker_page to avoid conflicts with search_job.php
========================================================================== */
/* Worker card: d-card-grid uses 2-col layout (title narrow, skills wide) */
#find_me_worker_page .d-card-grid, .rr_to_work .d-card-grid {
grid-template-columns: 1fr 3fr;
margin-bottom: 16px;
}
/* Worker card: m-detail-grid uses label/value layout (not 2 equal cols) */
#find_me_worker_page .m-detail-grid {
grid-template-columns: 1fr 3fr;
}
/* Worker card: d-card-company location text should truncate */
#find_me_worker_page .d-card-company span {
overflow: hidden;
text-overflow: ellipsis;
}
/* Worker card: Skills value - allow wrapping with line clamp */
#find_me_worker_page .d-field-value-skills {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
/* Worker card: mobile subtitle with line-clamp */
#find_me_worker_page .m-card-sub {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
/* Worker card: mobile detail value with line-clamp */
#find_me_worker_page .m-detail-value {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
/* Worker card: role field single-line truncation */
#find_me_worker_page .d-field-value-role {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
/* Worker card: "View all X Job Titles" link styling */
#find_me_worker_page .d-card-links a.d-card-link,
#find_me_worker_page .m-job-titles-link {
font-size: 12px;
color: var(--ec-primary);
font-weight: 600;
text-decoration: none;
}
#find_me_worker_page .m-job-titles-link {
display: block;
padding: 6px 0 2px;
}
/* ── Badge / Pill styling for comma-separated values ──────────── */
.uv2-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
align-items: center;
}
.uv2-badge {
display: inline-flex;
align-items: center;
gap: 0;
background: #f0f0f0;
color: #4b5563;
font-size: .775rem;
font-weight: 500;
padding: 4px 10px;
border-radius: 14px;
border: 1px solid #e5e7eb;
white-space: nowrap;
}
/* Worker card: responsive grid fallback */
@media (max-width: 1024px) {
#find_me_worker_page .d-card-grid {
grid-template-columns: 1fr 2fr;
}
}
@media (max-width: 640px) {
.current_jobs .mj2-card {flex-direction: unset;}
.mj2-job-type, .mj2-meta, .mj2-badge.mj2-badge-amber, .pw2-job-type, .pw2-meta, .pw2-badge.pw2-badge-amber{display:none !important;}
.m-detail-value{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.form-section-title{margin-bottom: 10px;margin-top: 0;padding-bottom: 10px;}
.page-title-bar h2{margin:0;}
.header_top .wrap { margin: 5px 15px;}
.wk2-info-row.full, .wk2-info-row, .wk2-quote-row {
display: flex;
flex-wrap: wrap;
}
.wk2-info-row strong {
width: 100%;
}
.uv2-badges strong{ width: auto; }
.btn-primary { font-size: 12px;}
.m-btn {font-size: 10px;min-height: auto;padding: 5px 10px;}
.m-qty-select{font-size: 10px; min-height: 25px;}
button:disabled {font-size: 10px; min-height: 35px; font-weight: 600; }
.mybutton, .mybutton-black, .appbutton, .mybutton-gray, .quantity.job_reject_accept, .form-btn-primary, .form-btn-secondary { font-size: 12px; min-height: 35px; padding: 5px 5px; font-weight: 600;display: flex; justify-content: center; align-items: center;}
}