/*
 * Lean public sheet (WEBS-991). A logged-out visit to the homepage or a public category,
 * service, area or comparison page links this file after navigation.css in place of
 * css/custom-css/custom-style.css, custom-style-2.css and css/croppie.css (happytask_print_app_stylesheets() in
 * includes/page-speed.php). It holds the rules of those sheets the pages use, copied as
 * written and in their original order, with url() paths rewritten for this folder. A change
 * to one of these rules that should show on those pages is made here too
 * (docs/agents/search-seo.md, Page speed).
 */
/* css/custom-css/custom-style.css */
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: unset;
  outline-offset: unset;
}
span.text-danger.error {
  position: absolute;
  bottom: -14px;
  left: 0;
}
.mrkt-top_Box,
.text-center {
  text-align: center;
}
div#resume_text p,
li {
  font-size: 16px;
}
.form-control:focus {
  box-shadow: unset;
  border: 1px solid #878787;
}
.marketing-preview_Page h2 {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.17px;
}
section.marketing-preview_Page .container {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
input#phone_number {
  border: 1px solid #c9c9c9;
  padding: 5px 7px;
  border-radius: 8px;
  color: #999;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 15px;
}
button#cancel {
  color: #838383;
  border: 1px solid #eaeaea !important;
}
textarea::placeholder {
  font-weight: 400;
  color: #000 !important;
}
.availabilityCalenderModal h1.modal-title {
  font-size: 19px;
  font-weight: 500;
}
.availabilityCalenderModal .modal-content {
  min-height: 467.141px;
}
.availabilityTimeModal li.inactive_Time {
  position: relative;
  color: #979797;
}
.availabilityTimeModal li.inactive_Time:hover::after,
.availabilityTimeModal ul.timingsTxt li.active_Time:hover:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 53px;
  height: 27px;
  border-radius: 20px;
  transform: translate(-50%, -50%);
}
.availabilityTimeModal li.inactive_Time:hover::after {
  border: 1px solid #b5b5b5 !important;
}
.availabilityTimeModal li.already-booked::before {
  content: "";
  position: absolute;
  width: 50%;
  border-bottom: 1px solid #979797;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.availabilityTimeModal,
.availabilityCalenderModal {
  padding: 20px 10px;
  border: 1px solid #000;
  border-radius: 8px;
  margin: 20px 0;
  position: absolute;
  z-index: 9;
  background-color: #fff;
  left: 0;
  top: 27px;
}
.availabilityCalenderModal {
  min-height: 402px;
}
.tnp-field.tnp-field-email {
  line-height: 1.2;
}
@media (max-width: 1400px) {
.availabilityCalenderModal {
    min-height: unset;
  }
.availabilityTimeModal,
  .availabilityCalenderModal {
    padding: 10px;
    margin: unset;
    top: 47px;
  }
}
@media (max-width: 1366px) {
.availabilityTimeModal,
  .availabilityCalenderModal {
    width: 396px;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
.availabilityTimeModal {
    padding: 10px 0;
  }
.availabilityTimeModal li.inactive_Time:hover::after,
  .availabilityTimeModal ul.timingsTxt li.active_Time:hover:after {
    width: 100%;
    height: 100%;
  }
.availabilityTimeModal,
  .availabilityCalenderModal {
    max-width: 100%;
  }
}
.create-maketing-sections {
  background: #f9fafb;
  padding-top: 24px;
}
@media (max-width: 767px) {
.create-maketing-sections > .container,
  .create-maketing-sections .sp-bsns-main_Container > .container,
  .create-maketing-sections .sp-bsns-main_Container .spBsns_innerContainer > .container {
    padding-left: 0;
    padding-right: 0;
  }
}
/* css/custom-css/custom-style-2.css */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);/
}
input[type="radio"]:focus {
  outline: unset !important;
  box-shadow: unset !important;
  border: unset;
}
body .modal {
  z-index: 1051;
}
.row::before {
  display: none !important;
}
body.modal-open {
  overflow: hidden;
}
body .modal .close {
  position: absolute;
  top: 13px !important;
  left: 10px;
  font-size: 16px !important;
  z-index: 1;
  margin-top: 0;
  opacity: 1;
  color: #000000;
  box-shadow: unset;
  border: unset;
}
body .modal .modal-dialog {
  margin-right: auto;
  margin-left: auto;
}
body .h1,
body .h2,
body .h3,
body h1,
body h2,
body h3 {
  margin: 0;
}
.modal-backdrop.fade.show {
  opacity: 0 !important;
  z-index: -1;
}
.modal.fade .modal-dialog {
  transform: translate(0);
}
body a {
  color: #133072;
}
input#btn_submit.disabled {
  opacity: 0.4;
}
.btn {
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 24px;
  transition: none !important;
}
.btn.btn-orange {
  background-color: #f7880c !important;
  color: #ffffff !important;
}
.tooltip.show {
  opacity: 1 !important;
  z-index: 9999;
  backface-visibility: hidden;
  will-change: transform;
}
ul.nav.nav-tabs {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0 auto;
  float: none;
  border: 0;
}
section#ks {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
}
.modal.fade.in,
.modal.fade.show {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
div#loading {
  top: 15%;
  vertical-align: middle;
  z-index: 99999;
  position: absolute;
}
.fa.fa-heart.active {
  color: #ff0000;
}
.fa {
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.dropdown-toggle {
  padding: 15px 20px 15px 20px;
}
.dropdown-toggle::after {
  right: 20px;
  position: absolute;
  top: 55px;
  transform: translateY(-50%);
  content: "\f078";
  border: unset;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
ul.nav.nav-tabs li:last-child {
  margin-right: 0;
}
li.pick-service {
  color: #979797;
  font-size: 13px;
  margin: 5px 0 10px;
  text-align: center;
  width: 100%;
}
.categories>.box {
  margin-bottom: 30px;
  display: flex;
}
.text {
  margin: 0;
  color: #000;
  width: 100%;
  font-size: 15px;
}
.hidden {
  display: none !important;
}
.info-tooltip-class .tooltip-inner {
  background-color: #ffffff !important;
  color: #000000;
  border: 1px solid #737373;
  max-width: 350px !important;
  width: 100%;
}
textarea#text::placeholder {
  color: #979797 !important;
}
.dropdown-item.active,
.dropdown-item:active {
  color: #000000;
}
#report-step-1 h3 {
  padding-bottom: 10px;
  font-size: 20px;
}
#report-step-1 p {
  font-size: 16px;
}
.order-details .functions {
  padding: 21px 0;
  border-top: 2px solid #f4f4f4;
  width: 100%;
  padding-left: 0;
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}
.faq-title h4 {
  color: #233e7c;
}
.chat-hire-action-btn {
  margin-top: auto;
}
.highlight {
  border: 1px solid #ddd;
  padding: 10px 24px;
  border-radius: 8px;
}
.privacy-policy-page ul {
  padding: 0;
}
.privacy-policy-page ul li {
  color: #353535;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
}
.privacy-policy-page p {
  font-size: 16px;
  line-height: 21px;
  color: #777777;
}
.terms-page p {
  font-size: 16px;
  line-height: 21px;
  color: #777777;
  word-break: break-word;
}
#myCredentials button.close {
  background-color: unset;
  color: #808080;
  top: 13px !important;
}
div#myCredentials iframe#frame {
  width: 100%;
}
.order-details .functions li a {
  border: 1px solid #ccc;
  display: block;
  padding: 6px 13px;
  border-radius: 7px;
}
.order-details .support h1 {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  margin-bottom: 1rem;
}
[data-content]>* {
  padding: 5px 15px !important;
}
#navbar button {
  background-color: rgba(255, 255, 255, 0.6) !important;
  padding: 4px;
  border-radius: 4px;
}
#myCredentials .modal-dialog {
  width: 100%;
  max-width: 800px;
  transform: unset;
}
section.how-it-works {
  margin-bottom: 30px;
}
.chatSupport-box-2 a.msg,
a.call {
  font-size: 15px;
  color: #000;
  font-weight: 500;
}
.border.border-danger {
  border: 1px solid #ff0000 !important;
}
#start-time-tracking.modal.fade .modal-dialog {
  transform: translate(0) !important;
}
a,
aside,
body,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
nav,
p,
section,
label,
span,
td,
li {
  font-family: "Roboto", sans-serif !important;
}
body.modal-open .modal-backdrop.in {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
span.display-hourly-rate {
  display: block !important;
}
#start-time-tracking .modal-content {
  padding: 0 !important;
}
#start-time-tracking .modal-content .service-step-3 {
  padding: 30px 24px !important;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 7px;
  font-weight: 500;
  font-size: 16px;
}
.client-faq-page a.arrow-btn i,
article#post-26631 .terms-page a.arrow-btn i {
  font-size: 27px !important;
}
.client-faq-page .faq-hding-box {
  margin-top: 30px;
}
.client-faq-page .faq-hding-box h2 {
  font-size: 25px;
}
.client-faq-page .faq-hding-box .faq-title h4 {
  font-size: 18px;
}
.privacy-policy-page {
  width: 882px;
  margin: 0 auto;
  max-width: 100%;
}
.privacy-policy-page .policy-top {
  margin-top: 30px;
}
.privacy-policy-page .policy-top a.arrow-btn i {
  font-size: 27px !important;
}
.privacy-policy-page .policy-content {
  margin-top: 30px !important;
}
.client-faq-hding-box {
  text-align: center;
}
.client-faq-hding-box p {
  margin: 0;
}
.faq-title h4 {
  font-size: 18px !important;
}
.page.about-page {
  width: 690px;
  margin: 0 auto;
  max-width: 100%;
}
.pagination.pagination-wrapper .page-numbers:hover,
.current {
  color: #fff !important;
  background-color: #000;
  border-color: #000;
}
.selectService_form_cardNumber input {
  padding-left: 46px;
}
.selectService_form_cardNumber .open-payment-modal {
  position: relative;
}
.selectService_form_cardNumber .open-payment-modal:before {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 18px;
  content: "";
  background-image: url(https://happytask.com/wp-content/themes/e-zhire/images/icons/card_number_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.about-me-error {
  color: #dc3545 !important;
}
#imageModal .modal-dialog {
  max-width: 80%;
}
#imageModal .modal-body img {
  width: 100%;
}
.hire__Affordable_Form .hire__Affordable_input {
  padding: 17px 20px !important;
  border: 1px solid #979797;
  border-radius: 4px !important;
  margin-bottom: 21px;
  font-size: 20px !important;
  color: #000;
}
.hire__Affordable_Form .hire__Affordable_input::placeholder {
  color: #979797;
  font-size: 20px;
  font-weight: 400;
}
.hire__Affordable_submit_btn button.btn {
  width: 100%;
  color: #fff !important;
  background-color: #F7880C !important;
  border: 1px solid #F7880C !important;
  padding: 18px 0;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 700;
}
.hire__Affordable_submit_btn {
  text-align: center;
}
#chat-message-image-section textarea#text {
  border: unset !important;
}
.client_PaymentMethods_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px 0 44px;
}
.delete-card-modal .delete-card-error {
  color: #ff0000a3;
  font-size: 14px;
  margin: 8px 0 0;
}
.client_PaymentColBorder {
  border-bottom: 1px solid #EEEEEE;
  padding: 40px 50px 40px 44px;
}
.payment-methods .client_PaymentColBorder:last-child {
  border-bottom: unset;
}
@media screen and (max-width: 991px) {
.report-profile-section {
    margin-bottom: 160px;
  }
}
@media screen and (max-width: 767px) {
#imageModal .modal-dialog {
    max-width: 100%;
    margin: 0;
    min-height: 100%;
  }
.dropdown-toggle::after {
    right: 7px;
  }
.dropdown-toggle {
    padding: 15px 13px 15px 7px;
  }
.client-faq-top a.arrow-btn i {
    font-size: 18px !important;
  }
ul.nav.nav-tabs li {
    width: 131px;
    padding: 8px 17px;
  }
.order-details .functions {
    max-width: 100%;
    justify-content: center;
  }
#start-time-tracking .modal-content {
    padding: 14px !important;
  }
p#approve-team-label {
    width: unset !important;
  }
.modal.in {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
#start-time-tracking.modal.fade .modal-dialog {
    max-width: unset !important;
  }
#reviewRatingModal .modal-dialog {
    margin: 0;
    max-width: 100% !important;
    min-height: 100%;
  }
#contactServiceProvider .modal-dialog {
    margin: 0;
    min-height: 100%;
    max-width: 100% !important;
  }
li.pick-service {
    text-align: left;
    padding-bottom: 10px;
    line-height: 12px;
  }
.hire__Affordable_Form .hire__Affordable_input {
    padding: 8px 15px !important;
    font-size: 15px !important;
    margin-bottom: 8px;
  }
.hire__Affordable_Form .hire__Affordable_input::placeholder {
    font-size: 15px;
    font-weight: 400;
  }
.hire__Affordable_submit_btn button.btn {
    padding: 9px 0;
    font-size: 15px;
  }
.client_PaymentMethods_content {
    padding: 0 6px 0 6px;
  }
.client_PaymentColBorder {
    padding: 40px 6px;
  }
.report-profile-section {
    margin-bottom: 100px;
  }
}
.order-details .row::after,
.order-details .row::before,
.work-content-box .row::after,
.work-content-box .row::before,
.download .row::after,
.download .row::before,
.footer-section .row::after,
.footer-section .row::before,
.modal#shareSpProfile .row::after,
.modal#shareSpProfile .row::before,
.modal#paymentRecieptModal .row::after,
.modal#paymentRecieptModal .row::before {
  display: none;
}
.page.about-page h2.about-heading,
.page.about-page h1.about-heading {
  font-family: 'Roboto', sans-serif !important;
  color: #1a1a1a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.page.about-page h1.about-heading.ht-brand-line .ht-brand-line__name {
  display: block;
  font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em;
  color: #1a1612;
}
.page.about-page h1.about-heading.ht-brand-line .ht-brand-line__task {
  font-size: inherit; line-height: inherit; font-weight: inherit;
  color: #F7880C;
}
.page.about-page h1.about-heading.ht-brand-line .ht-brand-line__comma {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.page.about-page h1.about-heading.ht-brand-line .ht-brand-line__rest {
  display: block; max-width: 340px; margin: 6px auto 0;
  font-size: 18px; line-height: 26px; font-weight: 400; letter-spacing: 0;
  color: #4a4642; text-wrap: balance;
}
.page.about-page h1.about-heading.ht-brand-line .ht-brand-line__rest::first-letter { text-transform: uppercase; }
.page.about-page .abt-layout {
  background: #fff !important;
  border: 1px solid #ececf0 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(20,22,28,.06), 0 8px 24px rgba(20,22,28,.05) !important;
  padding: 4px 40px !important;
  margin: 28px auto 56px !important;
}
.page.about-page .abt-box {
  margin: 0 !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid #ececf0 !important;
  max-width: 64ch;
}
.page.about-page .abt-box:last-child {
  border-bottom: 0 !important;
}
.page.about-page .sub-heading {
  display: block;
  font-family: 'Roboto', sans-serif !important;
  color: #1a1a1a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.page.about-page .abt-column p {
  font-family: 'Roboto', sans-serif !important;
  color: #4a4a4a !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}
.page.about-page .abt-box p {
  margin: 0 0 14px !important;
}
.page.about-page .abt-box p:last-child {
  margin-bottom: 0 !important;
}
.faq-page .faq-hding-box,
.client-faq-page .client-faq-hding-box {
  text-align: center;
  color: #8a8a8a;
}
.faq-page .faq-hding-box h2.faq-hding,
.faq-page .faq-hding-box h1.faq-hding,
.client-faq-page .client-faq-hding-box h2.client-faq-hding,
.client-faq-page .client-faq-hding-box h1.client-faq-hding {
  font-family: 'Roboto', sans-serif !important;
  color: #1a1a1a !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.faq-page .faq-top,
.client-faq-page .client-faq-top {
  margin-top: 44px !important;
  align-items: flex-start !important;
}
.faq-page .faq-top a.arrow-btn,
.client-faq-page .client-faq-top a.arrow-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 9px 15px !important;
  border: 1px solid #ececf0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.faq-page .faq-top a.arrow-btn:hover,
.client-faq-page .client-faq-top a.arrow-btn:hover {
  background: #f4f4f7 !important;
  border-color: #dcdce2 !important;
}
.faq-page .faq-top a.arrow-btn i,
.client-faq-page .client-faq-top a.arrow-btn i {
  font-size: 15px !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
}
.faq-page .faq-top a.arrow-btn:after,
.client-faq-page .client-faq-top a.arrow-btn:after {
  content: "Back";
}
body .faq-page .faq-content,
body .client-faq-page .client-faq-content {
  background: #fff !important;
  border: 1px solid #ececf0 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(20,22,28,.06), 0 8px 24px rgba(20,22,28,.05) !important;
  padding: 0 !important;
  overflow: hidden;
  max-width: 820px;
  margin: 24px auto 56px !important;
}
.faq-page .faq-question,
.client-faq-page .faq-question {
  padding: 20px 52px 20px 24px !important;
  position: relative;
}
.faq-page .faq-question:hover,
.client-faq-page .faq-question:hover {
  background: #f4f4f7;
}
.faq-page .faq-title h4,
.client-faq-page .faq-title h4 {
  font-family: 'Roboto', sans-serif !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.faq-page .faq-title:after,
.client-faq-page .faq-title:after {
  content: "" !important;
  position: absolute;
  right: 22px;
  top: 0;
  bottom: 0;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 16px 16px !important;
}
@media (max-width: 600px) {
.page.about-page h2.about-heading,
  .page.about-page h1.about-heading {
    font-size: 23px !important;
  }
.page.about-page .abt-layout {
    padding: 2px 22px !important;
    border-radius: 14px !important;
  }
.page.about-page .abt-box {
    padding: 22px 0 !important;
  }
.page.about-page .sub-heading {
    font-size: 18px !important;
  }
.faq-page .faq-hding-box h2.faq-hding,
  .faq-page .faq-hding-box h1.faq-hding,
  .client-faq-page .client-faq-hding-box h2.client-faq-hding,
  .client-faq-page .client-faq-hding-box h1.client-faq-hding {
    font-size: 22px !important;
  }
body .faq-page .faq-content,
  body .client-faq-page .client-faq-content {
    border-radius: 14px !important;
  }
.faq-page .faq-question,
  .client-faq-page .faq-question {
    padding: 16px 44px 16px 18px !important;
  }
.faq-page .faq-title h4,
  .client-faq-page .faq-title h4 {
    font-size: 15px !important;
  }
.faq-page .faq-title:after,
  .client-faq-page .faq-title:after {
    right: 16px;
  }
}
@keyframes cwoPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
body:has(.modal.cwo-restyle.show) .modal-backdrop ~ .modal-backdrop{display:none !important;}
.terms-page h1.terms-hding,
.privacy-policy-page h1.policy-hding {
  font-size: 25px;
  font-weight: 500;
  color: #000;
  text-align: center;
}