/*
 Theme Name:   Service Finder Child
 Description:  Service Finder Child Theme
 Author:       Hylpers
 Author URI:   https://hylpers.com
 Template:     service-finder
 Version:      1.0.0
*/

@import url("../service-finder/style.css");

/* Custom CSS */


/**********************
 *	BOOTSTRAP/GLOBAL OVERRIDE
 **********************/
@media (min-width: 1200px) {
	.container {
		width: 1300px;
	}
}

/**********************
 *	HELPER CLASSES
 **********************/
.box-shadow{
    box-shadow: 0px 0px 25px 0px #ededed;
}
.d-none{
    display: none !important;
    visibility: hidden;
}
.bs-example{
    margin: 50px;
}
.bs-example a{
    font-size: 22px;        
    text-decoration: none;
    margin: 0 10px;
}


/**********************
 *	HEADER
 **********************/
header#header-part {
    border-bottom: 5px solid #00C08B;
}
.header-style6 .extra-nav .extra-cell a.btn {
	background: #00C08B;
	font-size: 16px;
	border: 2px solid #00C08B;
}
ul#primary-menu {
    margin-right: 30px;
}
.navbar-nav>li>a{
    line-height: inherit;
    font-weight: 500;
}
.sf-header-inner .extra-nav .extra-cell a.btn{
	color:white;
}
.sf-header-inner.is-sticky .extra-nav .extra-cell a.btn {
    background-color: #00C08B;
    color: #FFFFFF;
    border: 2px solid #00C08B;
}
.header-style6 .extra-nav .sf-notifications {
    width: 80px;
}
.fs-customer-status2 ul.dropdown-menu.arrow-up {
    font-size: 15px;
    min-width: 188px;
    top: 42px;
}
.fs-customer-status2 ul.dropdown-menu.arrow-up li{
	margin-bottom: 5px;
}
#header-part .slogan{
    text-align: center;
    flex-grow: 1;
    font-size: 40px;
    color: #000000;
    margin-left: 30px;
}
.header-style6.is-sticky .main-bar{
    box-shadow: 0px 0px 10px 5px #37373729;    
}
#header-part .slogan-mobile-wrap {
    display: block;
    text-align: center;
    background: #5bbc8e;
    color: white;
    padding: 14px 0;
    font-size: 24px;
    line-height: normal;
}

/**********************
 *	Mobile Header & Nav Menu
 **********************/
@media only screen and (max-width: 480px) {
    #header-part .logo-header {
        width: 130px;
        margin-top: 10px;
        margin-bottom: 7px;
        height: 40px;
	}
    #header-part .navbar-toggle{
        margin: 10px 0;
    }
	body.hyp-not-loggedin .sf-header-home:not(.is-sticky) .extra-nav {
		margin-top: 4px;
	}
	body.hyp-not-loggedin .header-style6 .extra-nav .extra-cell a.btn {
		font-size: 16px;
		font-weight: 500;
		color: white;
	}
	.hyp-not-loggedin .header-style6 .extra-nav .extra-cell a.btn, .hyp-not-loggedin .header-style6.is-sticky .extra-nav .extra-cell a.btn {
        color: black;
	}
    body.hyp-not-loggedin .extra-nav {
        padding: 0px 0;
    }
    .hyp-not-loggedin .extra-nav .extra-cell:nth-child(3) {
        display: none;
    }
    .hyp-not-loggedin .is-sticky .extra-nav {
        padding: 8px 0 !important;
    }
    #header-part .slogan-mobile-wrap {
        padding: 8px 0;
        font-size: 18px;
    }
}


/**********************
 *	BODY
 **********************/
/**
* {
   scrollbar-width: initial;
}
::-webkit-scrollbar {
    width: unset;
}
**/
body, body p{
	font-size: 16px;
	line-height: 26px;
}
#login-Modal .modal-dialog.modal-sm {
    width: 580px;
    max-width: 100%;
}
.after-titile-line{
	display: none;
}
.elementor-widget-sf_element_howitworks .line-bx,
.elementor-widget-sf_element_howitworks .step-no-bx{
    display: none;
}
.why-hylpers section.section-full.sf-overlay-wrapper {
    margin-bottom: 0;
    padding-bottom: 0;
}
.featured-providers .sf-featured-bx .padding-20 {
    min-height: 215px;
}
.sf-featured-thum, .sf-listing-thum, .sf-catagories-listing{
	height: 280px;
}

.provider-sub-category-center .sf-element-bx.equal-col {
    min-height: 75px;
    background: white;
    padding: 10px;
    height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.provider-sub-category-center .icon-bx-md {
    display: none;
}
.provider-sub-category-center .sf-element-bx a {
    font-size: 16px;
}
.provider-sub-category-center .sf-element-bx a:hover {
    text-decoration: underline;
    color: #5bbc8e;
}
.provider-sub-category-center .sf-element-bx.equal-col h5 {
    line-height: 20px;
    margin: 0;
}
.listing-grid-box span.sf-average-question {
    background: #62b815;
    top: 0;
}
.listing-grid-box span.sf-average-question i.fa {
    top: 5px;
    position: absolute;
    left: 5px;
}
.listing-grid-box span.sf-average-question i.fa-check-square-o:before {
    content: "\f00c";
}
.loading-box{
    background-color: rgb(127 127 127 / 90%);    
}
.loading-pic{
    border-radius: 100%;
    background-size: 90%;    
    background-color: white;
    animation: pulse 0.7s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.9); }
  to { transform: scale(1.2); }
}

@media (min-width: 992px) {
	.why-hylpers .col-md-4.col-sm-4.m-b30 {
		width: 25%;
		text-align: left;
		padding: 0;
	}
    .sf-category .col-md-4 {
        width: 25%;
    }
}


/**********************
 *	FORMS - Login Form, Signup Form, Modal Box
 **********************/
.form-control, .bootstrap-select.form-control{
    border: 1px solid #8d8d8d;
    font-size: 15px;
}
#login-Modal div.nsl-container.nsl-container-block .nsl-container-buttons{
    display: flex;
    gap: 20px;	
}
.sf-find-bar .search-form:before, .sf-find-bar-inr .search-form:before,
.btn-advace-wrap .btn-advace-search::after {
	background: #5bbc8e;	
}
.sf-other-logins.sf-other-login-one ul li {
    max-width: 100%;
	padding: 0;
}
div.nsl-container .nsl-button-default {
    width: max-content;
}
div.nsl-container .nsl-button-default div.nsl-button-label-container{
    margin: 0 20px 0 12px;
    font-size: 15px;	
}
#login-Modal .signup-by-role > li .btn:hover, 
#login-Modal .signup-by-role > li .btn-primary.active {
    color: #222 !important;
}
#login-Modal .sf-otp-btn.openotpsignup {
    display: flex;
    align-items: center;
    justify-content: center;
}
#login-Modal .sf-otherlogin-wrap i.fa.fa-mobile {
    font-size: 24px;
    margin-right: 10px;
}
#login-Modal .provider_registration .signup_phone_wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}
#login-Modal .provider_registration .signup_phone_wrap span.signup_phone_code{
    height: 40px;
    line-height: 20px;
    padding: 9px 12px;
    background: #cfcfcf38;
    border: 1px solid #8d8d8d;
}
#otploginsignuppopup .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    color: #222;
    font-size: 15px;
}
#otploginformpopup .col-md-3,
#otpregisterformpopup .col-md-3 {
    margin-right: 0;
    padding-right: 0;
}
#login-Modal .signup-by-role > li{
    flex-direction: column;
}
#login-Modal .signup-by-role .tabRole_desc {
    padding: 10px 0 0;
    line-height: 16px;
}
#login-Modal .signup-by-role .tabRole_desc > span {
    font-size: 12px;
    color: #4f4f4f;
}
form.user-update .form-group label{
    display: flex;
    gap: 10px;    
}
.form-step-bx .form-group, .profile-form-bx .form-group, .modal-body .form-group, .form-group{
    margin-bottom: 15px;
}
.provider_registration .form-control-feedback {
    top: 53px;
}
.provider_registration .has-feedback label ~ .form-control-feedback {
    top: 40px;
}
#login-Modal span.signupotp_note{
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    color: #4f4f4f;
    line-height: 20px;
}
#login-Modal a.signupotp,
#login-Modal a.signupotp-customer{
    text-align: center;
    display: block;
    background: #5bbc8e;
    color: white;
    width: fit-content;
    padding: 8px 12px;
    margin: 15px auto 0; 
}
form.provider_registration input.btn {
    font-size: 18px !important;
    padding: 13px 20px;
    height: 50px;
}
.provider_registration__secondStep {
    display: none;
}
.provider_registration__firstStep,
.provider_registration__secondStep {
    transition: opacity 0.3s ease-in-out;
    opacity: 0; 
    display: none; /* Hidden initially */
}
.provider_registration__firstStep {
    display: block; /* First step is visible initially */
    opacity: 1;
}
.shake {
    animation: shake 0.5s ease-in-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}



@media (max-width: 580px) {
    #login-Modal .signup-by-role > li .btn img {
        margin-right: 12px;
    }
    #login-Modal .signup-by-role > li .btn {
        font-size: 14px;
    }
}


/**********************
 *	SEEKER HOMEPAGE
 **********************/
body.page-id-5404 footer,
body.page-id-5441 footer#colophon {
    display: none;
}
[class^="sf-find-bar"] .sf-search-form-element div.search-col-6:nth-child(2),
[class^="sf-find-bar"] .sf-search-form-element div.search-col-6:nth-child(4),
[class^="sf-find-bar"] .sf-search-form-element div.search-col-6:nth-child(5),
.sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(2),
.sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(4),
.sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(5) {
    display: none;
}
[class^="sf-find-bar"] .sf-search-form-element div.search-col-6:nth-child(1),
.sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(1),
[class^="sf-find-bar"] .sf-search-form-element div.search-col-6:nth-child(3),
.sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(3) {
    width: 40%;    
}
body.page .sf-all-provider-search {
    padding: 10px 15px 0px;
}


@media only screen and (max-width: 767px) {
    .sf-find-bar .search-form, 
    .sf-find-bar-inr .search-form {
        margin: 40px 0 0;
    }
    .sf-find-bar .sf-search-form-element div.search-col-6:nth-child(1),
    .sf-find-bar .sf-search-form-element div.search-col-6:nth-child(3) {
        width: 100%;
        margin-bottom: 20px;
    }
    .sf-find-bar .sf-search-form-element .type-search input{
        padding: 15px 10px;
        font-size: 16px;
    }
    body .sf-all-provider-search {
        padding: 0px;
    }
    .sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(1),
    .sf-all-provider-search .sf-search-form-element div.search-col-6:nth-child(3){
        width: 100%;
    }
    .sf-all-provider-search .sf-search-form-element .search-col-6 input{
        padding: 12px 10px;
        font-size: 16px;
    }
    body .hyp-map-listing {
        height: calc(100vh - 350px) !important;
    }
    body .hyp-map-listing .gm-style .gm-style-iw-c {
        max-width: 100% !important;
    }
}


/***************************
 * 	PROVIDER ACCOUNT PROFILE (PUBLIC & DASHBOARD)
 ***************************/
.card-body .noti-close-btn, 
.hasCropImage .noti-close-btn {
    font-size: 16px;
    height: auto;
    padding: 10px 15px;
}
.sf-search-benner,
.user-update div#aon-gallery-panel {
    display: none;
}
.breadcrumb-row {
    padding: 10px 0;
}
.breadcrumb-row ul li a {
    font-size: 14px;
}
body.author.hyp-loggedin h4 {
    margin-top: 0;
}
.provider-details .provider-logo img{
    margin-bottom: 0;
}
.provider-details .provider-logo .sf-provider-name{
    display: none;
}
.provider-details h4.sf-company-name {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.provider-details h4.sf-company-name span.telr_verified{
    background-image: url(images/telr_verified.png);
    background-size: cover;
    display: block;
    width: 35px;
    height: 35px;
    position: relative;
}
.provider-details .provider-text {
    min-height: 180px;
}
.provider-details .provider-text .tagline {
    margin-bottom: 10px;
    display: block;
}
.provider-details .btn,
.provider-details .aon-messenger-header-chat-popup a.singlechatpopup {
    width: 100%;
    font-size: 14px;
    padding: 10px 10px;
    height: auto;
    text-transform: uppercase;
}
.provider-details .aon-messenger-header-chat-popup a.singlechatpopup {
    background: #00c08b;
}
.provider-social .rating-container {
    display: flex;
    gap: 7px;
}
.pro-setting .sf-submit-btns.clearfix {
    border-top: 1px solid #dddddd;
    box-shadow: 0px 0px 20px -10px #9f9f9f;
}
.user-update .aon-card {
    box-shadow: 0px 0px 25px 0px #ededed;
}
#panel-4 label[for='paymentviatelr']:before {
    top: 15px;
}
#panel-4 label[for='paymentviatelr'] img {
    width: 250px;
    height: auto;
}

/*** Top bar chat/message notification ***/
.topbar_chat_notifs {
    position: relative;
    color: #999;
    font-size: 24px;
    width: 80px;
    height: 69px;
    line-height: 60px;
    text-align: center;
}
.topbar_chat_notifs a.aon-show-chat {
    border: none;
    font-size: 14px;
}
.topbar_chat_notifs a.aon-show-chat i.fa{
    font-size: 26px;
}
.topbar_chat_notifs span.refresh-total-count{
    background: #F04F53;
    color: white;
    padding: 1px 5px;
    border-radius: 100%;
    top: -12px;
    position: relative;
    font-weight: bold;
    font-family: Arial;
}
.aon-admin-messange span, 
.aon-admin-notification span.sf-notifications{
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;    
}
.sf-break-timing{
    display: none;
}
.sf-languages-list li img{
    margin-right: 5px;    
}
.aon-service-price,
.aon-service-price .sf-fix-hours{
    font-size: 16px;
    margin-left: 0;
    color: #3f3f3f;
}
.aon-service-price .sf-fix-hours:before{
    display: none;
}
.aon-service-bx {
    border: 1px solid #5bbc8e;
    padding: 3px;
}

/*** Provider Book Now step ***/
.myform.book-now .form-step-bx{
    position: relative;
}
.myform.book-now .form-step-bx h6{
    display: flex;    
}
.myform.book-now .form-step-bx h6 strong {
    position: relative;
    left: -10px;
}
body.author .shared-bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
}
#bookings-grid button.btn {
    padding: 10px;
    margin-bottom: 20px;
}
.card.aon-card .ser-card-body {
    padding: 15px 20px;
}
.card.aon-card .ser-card-title{
    margin: 0;
}
.card.aon-card .ser-card-amount{
    margin: 10px 0;
}
.content-admin-main{
    margin-bottom: 30px;    
}
.content-admin-main .card.aon-card .panel.ser-card-default{
    margin: 0;
}
.telr-error {
    background: #df5f5b;
    color: white;
    padding: 8px 0;
    text-align: center;
}
div#timeslotbox {
    display: none;
}
.docs-preview-buttons .site-button.outline.green {
    background: #5bbc8e !important;
    padding: 15px 40px !important;
    color: white !important;
}
.select2-container--default .select2-selection--multiple{
    padding-bottom: 10px;
    padding-top: 5px;    
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #f10000;    
    font-size: 2em;
    border-right: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    padding-left: 25px;    
}
.select2-container--open .select2-dropdown {
    left: 0;
    top: 35px;
    box-shadow: 0px 0px 20px -10px #252525;
}

.zabuto_calendar .selected {
    background: #42b981 !important;
    color: #ffffff;
    font-weight: 600;
}
form div.zabuto_calendar .badge-today.selected {
    background: #42b981 !important;
    color: white !important;
    font-size: 16px;
}
.hasCropImage .crop-img-area.profileimagewrapper{
    box-shadow: -4px 0px 20px -9px #595959;
}
.crop-img-area.profileimagewrapper .sf-cropimg-table .crop-img-left {
    padding-top: 80px;
}
#image-submit-fixed {
    padding: 0 0 30px;
}
#image-submit-fixed button[type='submit'] {
    padding: 15px 40px;
    font-size: 16px;
}
.hasCropImage .profileimagewrapper .noti-close-btn {
    left: -74px;
}
body.hasCropImage #content:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(37 37 37 / 75%);
    z-index: 999;
}

/*** My Services section ***/
.add-new-service .modal-footer {
    border: none;
}
.my-services-body .sf-bd-data-tb-head {
    text-align: left;
}
.my-services-body .sf-bd-data-tb-head {
    text-align: left;
    display: flex;
    column-gap: 10px;
}

/***************************
 * 	PROVIDER LISTINGS, SEARCH RESULTS, OR FILTER RESULTS
 ***************************/
 .page-content .sf-category-des {
    padding-top: 30px;
}
.result-listing .sf-thum-bx {
    width: 400px;
    float: left;
    min-height: 220px;
    margin-right: 30px;
    background-size: contain;
    background-color: white;
    border: 1px solid #8f8f8f;
    height: 240px;
}
.sf-provider-bx.item h4.sf-title {
    display: none;
}
.sf-provider-bx .sf-company-name > a {
    color: #212222;
    margin-bottom: 20px;
    display: block;
    font-size: 24px;
    font-weight: 500;
}


/***************************
 * 	SEEKER ACCOUNT/EDIT PROFILE
 ***************************/
 .customer-update .aon-staff-avtar-footer{
    min-height: auto;  
 }
 .customer-update .aon-card {
    box-shadow: 0px 0px 25px 0px #ededed;
}
.ws-poptab-all a,
.popup-tabs .nav-tabs .nav-item .nav-link.active,
.user-welcome-list li:last-child,
.user-welcome-list li:last-child a {
    background: #371750 !important;   
}
form.customer-update input[name="phone"] {
    padding-left: 90px;
}
form.customer-update i.fa-phone{
    width: 78px;
    background: #5bbc8e47;    
}
form.customer-update i.fa-phone > span{
    margin-left: 7px;
    font-family: Mulish, sans-serif;
    font-size: 14px;    
}
body.logged-in .aon-admin-heading{
    margin-bottom: 20px;    
}
.ehf-template-service-finder .sf-booking-incomplete,
.ehf-template-service-finder .sf-booking-upcoming,
.ehf-template-service-finder .sf-booking-completed,
.ehf-template-service-finder .sf-payment-status {
    font-size: 13px;
    border-radius: 0;
    vertical-align: text-bottom;
    line-height: normal;
    height: 28px;
    display: inline-block;
    padding: 4px 10px;
}
.ehf-template-service-finder .sf-booking-incomplete,
.ehf-template-service-finder .sf-payment-status{
    background-color: #c5801d;  
}
.ehf-template-service-finder .sf-payment-status.paid {
    background: #89bd57;
}

@media screen and (min-width: 768px) {
    .extra-cell.fs-customer-status2 + .extra-cell {
        display: none;
    }
}



/*************************
 * 	GOOGLE MAP & PREVIEW THUMBNAIL
 *************************/
#geolocation-button, #gmap-full, #gmap-next, 
#gmap-prev, #gmapstreet, #gmapzoomplus, #gmapzoomminus{
    font-size: 12px;
    width: 35px;
    height: 34px;
    line-height: 34px;	
}
#gmap-controls-wrapper {
    margin-top: -140px;
}
.home .hyp-map-listing {
    height: calc(100vh - 25vw) !important;
}
.home .sf-all-provider-search{
    top: -10px;
    position: relative;
}
.sf-map-row .map-marker {
    background: red !important;
}
.hyp-map-listing .hyp-map-innerbox{
    padding-top: 5px;    
}
#gmap_wrapper .map-minmax-price {
    display: none;
}
.hyp-map-innerbox div#star-rating-container4 {
    margin-bottom: 10px;
}
.hyp-map-innerbox .map-company {
    display: none;
}
.hyp-map-listing .info_details .map-review-give{
    color: #2fad71 !important;
}
.hyp-map-listing .info_details .map-review-give,
.hyp-map-listing .info_details .map-city{
    color: #000;    
    padding: 6px 0px 3px !important;
}
.hyp-map-innerbox .map-category {
    margin-top: 10px;
    display: flex;
    width: fit-content;
    padding: 4px 12px;
    margin-bottom: 5px;
    letter-spacing: 1.5px;
    font-weight: 500;
    background: transparent;
    color: black;
    padding: 0;
    letter-spacing: 0;
}
.info_details .hyp-map-listing .map-minmax-price{
    letter-spacing: 0.3px;    
}
.hyp-map-listing .hyp-map-media{
    position: relative;
}
.info_details span.telr_verified {
    background-image: url(images/telr_verified.png);
    background-size: cover;
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: 5px;
    right: 6px;
}
body.page .hyp-map-listing .hyp-pro-name{
    padding: 8px 15px;
    bottom: -40px;
    font-size: 12px;
}
body.page .hyp-map-listing .hyp-pro-name:hover, 
body.page .hyp-map-listing > a:hover {
    background: #00C08B;
}


@media only screen and (max-width: 767px){
    .home .hyp-map-listing {
        height: calc(55vh) !important;
    }
}


/*************************
 * 	Hylpers Tooltip Feature
 *************************/
.pro-setting span.fa[data-toggle='tooltip']{
    font-size: 18px;
    color: #381753;
    cursor: pointer;
    padding: 5px 5px 5px 0;
}
.pro-setting .form-group label{
    align-items: center;
}
.card label .trigger,
.aon-admin-heading label .trigger {
    font-size: 14px;
    color: aliceblue;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    position: relative;

    background: url(https://hylpers.ae/wp-content/uploads/2025/03/information_2.png) no-repeat 0 0;
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
    border: none;
}
.card label,
.aon-admin-heading label{
    display: flex;
    column-gap: 10px;
    margin-bottom: 15px;    
}
.card label [role=tooltip],
.aon-admin-heading label [role=tooltip] {
    width: calc(100% + 300px);
    height: auto;
    padding: 12px;
    line-height: 1.5;
    border-radius: 4px;
    background-color: #371750;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 15px);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
    z-index: 9999;
    color: white;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.card label [role=tooltip].active,
.aon-admin-heading label [role=tooltip].active {
    opacity: 1;
    visibility: visible;
}
.card label [role=tooltip]::before,
.aon-admin-heading label [role=tooltip]::before {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #003249;
}
h4.with_tooltip, 
.aon-card-header h4.with_tooltip {
    display: flex;
    column-gap: 10px;
    align-items: center;
}
h4.with_tooltip label, 
.aon-card-header h4.with_tooltip label{
    margin: 0;
    text-transform: none;
}


/**********************
 *	FOOTER
 **********************/