/* 

Imports
Variables
Global styles
    ~ Typography
    ~ Utilities
    ~ Layout
Components
    ~ Buttons
    ~ Search Input
    ~ Headings
    ~ Disabled link
    ~ icons styling
    ~ checkbox-component
    ~ Confirm Modal
    ~ Custom Modal
    ~ custom-dropdown
    ~ boostrap select
    ~ Modal
    ~ toolTip
    ~ file uploader
    ~ intl tel input
    ~ custom-radio
    ~ ON/OFF toggle button
    ~ delete Header
    ~ delete header responsive
    ~ form
    ~ Sign up form 
    ~ Map Section: Container and Controls
    ~ profile picture card
    ~ business hours
    ~ helpful-notes
    ~ autocomplete search bar
    ~ nav-pills
    ~ media-gallery
    ~ completion/thankYou message box
    ~ spinner icon
    ~ masonry layout
    ~ show-more-link
    ~ carousel
    ~ ratings stars
    ~ pagination
    ~ empty state
    ~ floating input labels
    ~ Footer
    ~ datatables
    ~ share link modal
    ~ profile-status
    ~ status-guide-table
    ~ keywords-list-table
    ~ rounded-tags
    ~ ListItemSaver
    ~ toast
pages
    --------- Styles for pages designed for users who are not signed into the system. -----
    ~ landing page
    ~ categories page
    --------- Styles for pages designed for users who are signed into the system. -----
    ~ member-profile
    ~ advert-cluster page
    ~ plaza-list-page
    ~ gallery-preview-page
    ~ plaza-details-view-page
    ~ post-ads-page
    ~ faq-page 
    ~ member-details-page
    ~ category_details-page
    ~ manage-searches
    ~ templates-page
    ~ transalations-page
    ~ Search-keywords
    ~ hmp (delete later)
    ~ Post Job
    ~ bm-profile
    ~ Settings page
    ~ Home/search page
    ~ bm-profile page
*/



/* ------- Imports ----- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ------ Variables ------- */
:root {
    --color-primary: #083A76;
    --color-secondary: #EB841D;
    --color-text: #4F575F;
    --color-text-muted: #CDD4D8;
    /* Muted or light text for secondary use */
    --color-error: #c81212;
    --color-success: #279d42;
    --color-neutral-light: #7f7f7f;
    --color-link: #0B5EC2;
    --color-border: #E6EBF1;
    --color-input-border: #cfcfcf;
    --color-primary-light: #F2F6F9;
    --color-primary-muted: #B5C4D6;
    --color-status-pending: #FDF5E4;
    --color-pending-border: #F8EBCF;
    --color-pending-info-btn: #C8982C;
    --color-step-background-inactive: #F5F5F6;
    --color-input-background: #F8F9FA;
    --color-info-background: #212529;
    /* --empty-state-color: #888888; */

}

/* ---- Global styles -----  */
html {
    font-size: 16px;
}

body {
    font-family: "Times New Roman", Times, serif;
    overflow-x: hidden !important;
    letter-spacing: .55px;
    scrollbar-width: thin;
    position: relative;
}

section {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ~~ typography ~~ */
a,
a:hover {
    font-size: 1rem;
    color: var(--color-link);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .6px;
}

h1,
h2,
h3 {
    color: var(--color-primary);
}

h3 {
    font-size: 1.39rem;
}

h4 {
    font-size: 1.2rem;
}

p,
ol,
li {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: .55px;
}

label {
    font-size: 1rem;
}



.note-text {
    font-size: .9rem;
}

.secondary-notes {
    color: #494848;
    font-size: .9rem;
}

.error {
    color: var(--color-error);
    font-size: .9rem;
}

.link {
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
}

.text-black {
    color: #000;
}

/* ~~ utilities ~~ */
.full-width {
    width: 100%;
}

.full-height {
    height: 90vh;
}

.width-50 {
    width: 50%;
}

.txt-capitalize {
    text-transform: capitalize;
}

.mr-10 {
    margin-right: 10px;
}

input[type="radio"] {
    cursor: pointer;
}

input[type="radio"]:checked {
    accent-color: var(--color-primary) !important;

}

input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=time]::-webkit-datetime-edit-second-field:focus,
input[type=time]::-webkit-datetime-edit-ampm-field:focus {
    background-color: #b0c7e2;
}

.danger {
    color: var(--color-error) !important;
}

.bg-danger {
    background-color: var(--color-error);
    color: #fff;
}
  .blurred {
            opacity: .4;
        }
.pad-x-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.hidden p {
    color: rgb(168, 167, 167) !important;
}

.container-lg {
    padding-inline: 20px;
}

.plaza .container,
footer .container,
section>.container,
section.container,
.banner .container,
.categories_details.container,
.adverts.container,
.profile_benefits,
.profile_features,
.services {
    padding-inline: 20px !important;
}

/* CSS to ensure equal height */
.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

.equal-height-row>[class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* Ensure flex items grow to fill the container */
.equal-height-row>[class*='col-']>* {
    flex-grow: 1;
}

/* ~~ layout ~~ */
.container {
    padding: 0 25px;
}

.border-cl {
    border: 1px solid rgb(174, 174, 174);
    border-radius: 5px;
}

.bg {
    background-color: #F7F7F7;
}

.alert {
    padding: 10px 10px;
}

.alert {
    font-size: .9rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: .8rem 1rem;
}

.text-md-right {
    text-align: right;
}

/* ~~ buttons ~~ */
/*  */
.btn {
    padding: .4rem 1rem;
    border-radius: .4rem;
}

.btn-back {
    border: 2px solid var(--color-neutral-light);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.051);
}

.btn-submit {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: #fff;
}

.btn-submit:hover {
    color: #fff;
}

/*  */
.primary-btn,
.border-btn,
.back-btn,
.submit-btn {
    background-color: var(--color-primary);
    color: #fff;
    padding: .475rem .85rem;
    border-radius: 5px;
    border: 1px solid var(--color-primary);
    font-size: 1rem;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.primary-btn:not(:disabled):hover,
.border-btn:not(:disabled):hover,
.back-btn:not(:disabled):hover,
.submit-btn:not(:disabled):hover {
    transform: scale(1.05)
}

.primary-btn:not(:disabled):hover:active,
.border-btn:not(:disabled):hover:active,
.back-btn:not(:disabled):hover:active {
    transform: scale(1.05) translateY(0.125rem);
}

.primary-btn:hover {
    color: #fff;
}

.primary-btn:focus,
.back-btn:focus,
.border-btn:focus {
    outline: 0 solid rgba(0, 0, 0, 0)
}

.hollow-btn {
    background-color: transparent;
    border: none;
    /* padding: 5px 0; */
    /* padding: .275rem .85rem; */
    text-decoration: underline;
    cursor: pointer;
}

.borderless-btn {
    background-color: transparent;
    border: none;
    /* padding: 5px 0; */
    text-decoration: none;
    cursor: pointer;
}

.borderless-btn.primary {
    color: var(--color-link);
}

.borderless-btn.underline {
    text-decoration: underline;
}

.back-btn {
    border: 1px solid rgb(227, 226, 226);
    color: black;
}

.border-btn {
    background-color: transparent;
    color: var(--color-primary);
    outline: none;
    transition: background-color color .2s;
    /* padding: .4rem .85rem; */
}

.border-btn:hover {
    background-color: var(--color-primary);
    color: #fff !important;
}

.border-btn a:hover {
    color: #fff !important;
}

.border-btn:hover .primary {
    color: #fff;
    border: 1px solid #fff;
}

/* Style for the disabled button */
.nextbtn[disabled] {
    background-color: #ccc;
    color: #888;
    cursor: not-allowed;
    border: 1px solid #ccc;

}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;

}

.modal-primary-btn {
    background-color: var(--color-primary);
    color: #fff;
    text-transform: capitalize;
    opacity: .9;
}

.modal-primary-btn:hover {
    opacity: 1;
    color: #fff;
}

.edit-btn {
    background-color: #D5DEEA;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
}

.info-item p .edit-btn {
    display: inline-block;
    padding-top: -10px;
}

.info-item p .edit-btn i {
    margin-top: 0px;
    display: block;
    line-height: 2px;
    color: #000;
}

.edit-btn i {
    font-size: 10px;
    color: #000;
}

/* ~~ Search Input ~~ */
.search-bar-container button {
    border-radius: 5px;
}

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 350px;
    width: 100%;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    width: 100%;
    padding: .2rem 1rem .2rem 0 !important;

}

.input-search-icon,
.clear-input-icon {
    display: inline-block;
    width: 30px;
    height: auto;
    object-fit: contain;
}

.search-icon,
.clear-input-icon {
    cursor: pointer;
}

@supports (-webkit-touch-callout: none) {

    .input-search-icon,
    .clear-input-icon {
        width: 20px;
        height: 20px;
        /* Force height for Safari */
    }
}

.clear-input-icon {
    display: none;
    /* Hidden by default */
}

/* ~~ Headings ~~ */
.section-heading {
    font-size: 1.4rem;
}

/* ~~~~ Disabled link ~~~~ */
.disabled-link {
    pointer-events: none;
    color: gray;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ~~ icons styling ~~ */
/* plus-icon */
.add-icon,
.close-icon {
    width: 20px;
    cursor: pointer;
}

.close-icon {
    margin-top: -5px;
    margin-inline: -3px;
    width: 22px;
}

.tag-remove .close-icon {
    width: 20px;
}

.edit-icon {
    color: var(--color-link);
    padding-right: 5px;
}

.delete-icon {
    color: var(--color-error);
    padding-right: 5px;
    font-size: .9rem !important;
}

/* search-icon */
.search-icon {
    color: #a1a1a1;
    font-size: .9rem;
    margin-top: 5px;
}

.search-holder~.search-icon {
    display: none !important;
}

/* period icon */
.period-icon {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    ;
    margin-right: 5px;
    background-color: #000;
}

.period-icon.open {
    background-color: var(--color-success);
}

.period-icon.close {
    background-color: var(--color-error);
}

/* ~~ checkbox-component ~~ */
input[type="checkbox"]:checked {
    accent-color: var(--color-primary);
}

.checkbox-item {
    border: 1px solid var(--color-input-border);
    padding: 10px;
    border-radius: 5px;
    margin: 8px 0;
    cursor: pointer !important;
}

.checkbox-item input[type=checkbox] {
    display: block;
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
}

.extra-services .checkbox-container input[type="checkbox"] {
    margin-top: 4px;
}

.checkbox-item label {
    flex-grow: 1;
    margin-bottom: 0;
    margin-left: 5px;
    display: block;
    cursor: pointer;
    line-height: 21px;
    user-select: none;
}

.checkbox-item.checked {
    background-color: var(--color-primary-light);
}

/* ~~ Confirm Modal ~~ */
/* styling of a success state of confirm modal */
.success-state,
.failure-state {
    max-width: 450px;
    margin: 0 auto;
}

.success-state .success-message,
.failure-state .failure-message {
    color: #000;
}

.confirm-modal .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
}

.confirm-modal .success-state .icon-wrapper {
    background-color: rgba(0, 32, 128, 0.132);
}

.confirm-modal .failure-state .icon-wrapper {
    background-color: rgba(255, 0, 0, 0.117);
}

.confirm-modal .icon-wrapper .icon {
    font-size: 3rem;
}

.confirm-modal .success-state .icon-wrapper .icon {
    color: var(--color-primary);
}

.confirm-modal .failure-state .icon-wrapper .icon {
    color: var(--color-error);
}

.success-state .modal-footer button,
.failure-state .modal-footer button {
    padding: .3rem 4rem;
}

/* ~~ Custom Modal ~~ */
/* Ensure the modal takes full width and height with an offset */
.custom-modal-content {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#confirmLocationModal .modal-dialog,
#provincesModal .modal-dialog,
#regionsModal .modal-dialog,
.full-width-modal .modal-dialog {
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: 100%;
}

#confirmLocationModal .modal-body,
#provincesModal .modal-body,
#regionsModal .modal-body,
.full-width-modal .modal-body {
    height: 100%;
    overflow-y: auto;
}

/* Overlay Close Button */
.custom-overlay-close {
    position: fixed;
    top: 0px;
    /* Offset from the top */
    right: 10px;
    /* Offset from the right */
    z-index: 1055;
    /* Ensure it appears above the modal */
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
    cursor: pointer;
    background-color: transparent;
    height: fit-content;
}

/* Remove Bootstrap background image */
.custom-overlay-close::before {
    content: '\00d7';
    /* Unicode for "×" (close symbol) */
    font-size: 2rem;
    /* Adjust icon size */
    color: rgb(255, 255, 255);
    /* Set the icon color */
    display: inline-block;
    background: transparent !important;
    margin-top: -5px;
}


/* ~~ custom-dropdown ~~ */
.custom-dropdown {
    position: relative;
    border: 1px solid transparent;
}

.custom-dropdown #dropdown-header {
    padding: 2px 10px;
}

.custom-dropdown button,
.dropdown .btn {
    color: var(--color-text);
    font-size: 1rem;
    border: none;
    background-color: var(--color-input-background);
    border: 1px solid #fff;
}

.custom-dropdown i {
    font-size: .8rem;
}

.custom-dropdown:hover {
    border: 1px solid var(--color-primary-muted);
}

.custom-dropdown .dropdown-list,
.dropdown .dropdown-menu {
    float: right;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.082);
    border: 0;
    position: absolute;
    z-index: 111;
    padding: 5px 7px;
}

.custom-dropdown .dropdown-list a,
.dropdown .dropdown-item {
    display: block;
    margin: 0;
    padding: 7px 10px 7px 15px !important;
    text-align: left;
    color: var(--color-text);
    font-size: .9rem;
    border-radius: .25rem;

}

.dropdown li {
    padding-inline: 5px;
}

.custom-dropdown .dropdown-list a span {
    margin-right: 3px;
}

.custom-dropdown .dropdown-list a:hover,
.dropdown .dropdown-item:hover {
    background-color: var(--color-primary-light);
}

/* Add styles for dropdown-below */
.custom-dropdown.dropdown-below .dropdown-list {
    top: 100%;
    left: 0;
}

/* Add styles for dropdown-right */
.custom-dropdown.dropdown-right .dropdown-list {
    top: -2px;
    left: 120%;
}

/* Add border to active dropdown */
.custom-dropdown.active-dropdown {
    border: 1px solid var(--color-primary-muted);
}

.hide-dropdown {
    display: none;
}

.show-dropdown {
    display: block;
}

/* ~~ boostrap select ~~ */
.bootstrap-select {
    width: 100% !important;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    /* max-width: 450px; */
    width: 100%;
    outline: none !important;
}

.bootstrap-select .dropdown-item {
    padding: .38rem 1rem;
    font-size: 1rem;
    border-radius: .3rem;
}

.bootstrap-select .dropdown-item:hover {
    background-color: #f5f5f5;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: var(--color-primary-light);
}

.dropdown-item.active,
.dropdown-item.selected {
    background-color: var(--color-primary-light);
}

.bootstrap-select>.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.50 black !important;
    border: 1px solid var(--color-primary-muted);
    box-shadow: 0 0 0px 0.25 #c7c7c731;
    outline: 2px solid rgba(45, 91, 146, 0.379) !important;

}

.delivery-type-select {
    border-radius: 3px;
    background-color: var(--color-input-background);
    border: 1px solid var(--color-border);
}

.delivery-type-select .dropdown-toggle {
    border: none !important;
}

.delivery-fee-select .dropdown-toggle {
    padding: .43rem .75rem !important;
}

.bootstrap-select .dropdown-menu {
    padding: 5px !important;

}

.bootstrap-select .btn {
    padding: .485rem .75rem;
    border: 1px solid var(--color-border);
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    top: 10px;
    font-size: .7rem;
}

.bootstrap-select button {
    width: 100% !important;
}

.bs-searchbox .form-control:focus {
    border: 2px solid var(--color-border);
    outline: none !important;
}


/* ~~ Modal ~~ */
.modal-body {
    overflow-x: hidden;
}

.modal-header,
.modal-body {
    padding-inline: 20px;
    border-bottom: 0;
}

.modal-header .btn-close {
    font-size: .9rem;
}

.modal-title {
    font-size: 1.2rem;
}

.modal .close {
    box-sizing: content-box;
    font-size: 2rem;
    line-height: .8rem;
    /* padding: .25em .25em; */
    color: #000;
    background-color: transparent;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}

.modal .close:hover {
    opacity: 1;
}

.modal-footer {
    border-top: 0;
}

#confirm_modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
}

.modal .error {
    padding-bottom: 2px;
}

#confirm_modal .modal-content {
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

#confirm_modal .modal-body {
    padding: 5px 20px;
}

/* ~~ toolTip ~~ */
/* Tooltip container */
.toolTip {
    position: relative !important;
    display: inline-block;
    cursor: pointer;
    position: fixed;
    z-index: 111111;
}

.toolTip .info-icon {
    margin-right: 2px;
    color: #212529;
}

/* Tooltip text */
.toolTip .tooltiptext {
    visibility: hidden;
    width: 125px;
    background-color: #212529;
    color: #fff;
    text-align: center;
    font-size: .9rem;
    border-radius: .25rem;
    padding: 5px 0px !important;
    position: absolute;
    bottom: 125%;
    bottom: calc(100% + 10px);
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 111111;
}


/* Show tooltip on hover */
.toolTip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*  */

/*  */
/* ~~ file uploader ~~ */
.upload-container {
    position: relative;
    width: 100%;
    padding: 0;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background-color: #E6EBF1;
    text-align: center;
    height: 100%;
}

#dropArea.highlight {
    border: 2px dashed var(--color-primary);
}

.upload-container .file-upload-icon i {
    font-size: 50px;
    color: var(--color-primary-muted);
}

.upload-container .file-upload-icon img {
    width: 50px;
    object-fit: contain;
}

.upload-container .uplaod-label {
    color: #083A76;
    cursor: pointer;
}

.file-details .file-info {
    border: 1px solid #cfcfcf;
    padding: 10px 15px 0px;
    margin-bottom: 0;
}

.file-details .delete-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f0f0f0;
    cursor: pointer;
}

.file-details .progress-bar {
    height: 4px;
    background-color: #ffffff;
    border-radius: .25rem;
    margin-top: 0px;
}

.file-details .progress {
    height: 100%;
    background-color: #083A76;
    border-radius: .25rem;
    width: 0;
}

#logoFileName {
    cursor: pointer !important;
}

.file-size {
    color: #6d6d6d;
    margin-top: 4px;
    margin-left: 15px !important;
    font-size: .9rem;
}

.file-name {
    color: #000;
}

/* ~~ intl tel input ~~ */
#intel-phone .form-field label {
    top: 25%;
    font-size: 0.9rem;
}

.iti__selected-flag {
    margin-top: 5px;
    padding-top: 0;
    height: fit-content;
    display: flex;
    top: 43%;
    padding-left: 12px;
}



.iti {
    display: block !important;
}

.iti__search-input {
    padding: 5px 10px !important;
}

.update-phone .iti__selected-flag {
    margin-top: -17px !important;
    line-height: 10px;
}

.update-phone .iti__dropdown-content {
    margin-top: 20px !important;
}

.update-phone {
    padding-bottom: 70px !important;
}

/* ~~ custom-radio ~~ */
.custom-radio {
    display: inline-block;
    padding: 10px;
    border: 1px solid #eaeaea;
    margin-right: 10px;
    cursor: pointer;
    background-color: var(--light-bg);
    margin: 10px 0;
    border-radius: .25rem;
}

.custom-radio.selected {
    background-color: var(--color-primary-light);
    color: #fff;
}

.custom-radio .radio-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px !important;
    height: 18px;
    border-radius: 50%;
    margin-top: 2px;
    border: 1px solid rgb(119, 119, 119);
}

.custom-radio .radio-icon.selected {
    border: .3rem solid var(--color-primary);

}

.custom-radio .radio-content {
    width: calc(100% - 22px);
    padding-left: 10px;
}

.custom-radio .radio-heading {
    color: #000;
}

.radio-icon-active.selected {
    background-color: var(--color-primary);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
}

.radio-icon-active.selected+.radio-icon {
    border: 1px solid rgb(241, 13, 13);
}

/* ~~ ON/OFF toggle button ~~ */
.toggle {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 18px;
    margin-right: 5px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary-light);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px;
}

.toggle .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.toggle input:checked+.slider {
    background-color: var(--color-primary-muted);
}

.toggle input:focus+.slider {
    box-shadow: 0 0 1px var(--color-primary);
}

.toggle input:checked+.slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

/* ----------------  delete Header  ---------------- */
@media (min-width: 992px) {
    .top-section .nav-btn {
        display: none !important;
    }

}

header {
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
}

header .header-inner {
    width: 100%;
    height: 64px;
    padding: 0 initial;
    background-color: transparent;
}

.inner-header {
    background: var(--color-primary-light);
    padding-bottom: 0px;
    padding-top: 0;
    /* padding-bottom: 30px; */

}

header .only_header {
    padding-bottom: 0 !important;
}


header .header-logo {
    display: inline-block;
    overflow: hidden;
    padding: 21px 38px 21px 5px;
}

header .header-logo img {
    display: block;
    max-height: 35px;
}

header .header-categories {
    display: block;
    position: relative;
    float: left;
    border-left: 1px solid rgba(255, 255, 255, 0.157);
}

header .header-menu {
    float: right;
}

header .header-menu ul {
    height: 64px;
    margin: 10px 0;
}

header .header-menu ul li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    line-height: 64px;
    margin-left: 20px;
    margin-top: 1px;
}

header .header-menu ul li a {
    color: var(--color-primary);
    padding-bottom: 2px;
    font-size: 1rem;
}

header .header-menu ul li a:hover {
    border-bottom: 2px solid var(--color-primary);
}

/* login button */
header .header-menu ul li .login-btn {
    border: 1px solid var(--color-primary);
    color: #fff;
    background-color: var(--color-primary);
    padding: 3px 15px 5px;
    border-radius: 3px;
    transition: .3s;
}

header .header-menu ul li .login-btn:hover {
    color: var(--color-primary);
    background-color: transparent;
    text-decoration: none !important;
}

/* adi talk button */
.adi-talk-btn img {
    width: 21px;
    margin-top: -5px;
}

/* dropdown */
header .header-menu ul li ul.dropdown {
    width: 100%;
    width: 140px;
    height: fit-content;
    position: absolute;
    z-index: 999;
    display: none;
    right: 0px;
    top: 50px;
    padding-left: 0 !important;
    animation: fadeIn .3s;
    line-height: 0;
    box-shadow: 0 0 20px 0 rgb(182, 182, 182);
    padding-left: 0 !important;

}

header .header-menu ul li ul.dropdown::before {
    position: absolute;
    content: '';
    height: 10px;
    width: 10px;
    background-color: #eeeff1;
    right: 10px;
    top: -5px;
    transform: rotate(45deg);
    z-index: -1;
}

header .header-menu ul li:hover ul.dropdown {
    display: block;
}

header .header-menu ul li ul.dropdown li {
    display: block;
    width: 100%;
    background-color: #eeeff1;
    line-height: 40px;
    margin-left: 0;
    float: right;
    cursor: pointer;
}

header .header-menu ul li ul.dropdown li:hover {
    background-color: #dde0e5;
}

header .header-menu ul li ul.dropdown li a {
    padding: 5px;
    padding-left: 20px;
}

header .header-menu ul li ul.dropdown li a:hover {
    border-bottom: 0;
}

.lang-arrow {
    font-size: 15px;
}

#nav-lang a:hover {
    text-decoration: none !important;
}

.fa-check {
    font-size: 16px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

.nav-slider {
    display: block;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* sidebar Menu for logged in users */
#sidebarMenu {
    position: fixed;
    right: -100%;
    top: 0px;
    display: block;
    z-index: 999;
    width: 350px;
    height: 100%;
    transition: .3s;
    background: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.217);
}

#sidebarMenu li a:hover {
    border-bottom: 0;
}

#sidebarMenu.active {
    right: 0;
}

#sidebarMenu .fa-times {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid black;
    text-align: center;
    font-size: 1rem;
    padding-top: 5px;
}


.sidebarMenuInner {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {
    list-style: none;
    color: #4A6C84;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li span {
    display: block;
    /* font-size: 30px; */
    color: #4A6C84;
}

.sidebarMenuInner li a i {
    font-size: 1rem;
}

.sidebarMenuInner li a {
    color: #4A6C84;
    font-weight: 500 !important;
    text-transform: capitalize;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

#sidebarMenu li {
    line-height: normal;
    padding: 15px 0;
}

#sidebarMenu .dropdown-item {
    margin-left: 20px;
}

#sidebarMenu .dropdown-item:hover {
    background-color: transparent;
    color: var(--color-content-primary);
}

li.dropdown button.dropdown-toggle {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}

li.dropdown button.dropdown-toggle {
    color: var(--color-content-primary);
    font-weight: 500;
    font-size: 1rem;
}

li.dropdown button.dropdown-toggle i {
    font-size: 1rem;
}

.dropdown.open .dropdown-menu {
    display: contents;
}

li.dropdown .dropdown-menu a {
    line-height: normal;
    padding: 10px;
}

/* nav */
.sidebar {
    overflow-y: auto;
    position: fixed;
    top: 0px;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    opacity: 0.9;
    z-index: 11111111;
}

nav .nav-categories li {
    display: block;
    position: relative;
}

nav.open {
    left: 0px;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.275);
    opacity: 1;
}

nav .nav-separator {
    width: 100%;
    height: 1px;
    margin: 7px 0;
    background-color: rgba(0, 0, 0, 0.175);
}

.iconmenubar {
    list-style: none;
    display: flex;
    padding-left: 0;
    width: fit-content;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.iconmenubar li {
    text-align: center;
    padding: 15px 5px;
    width: 135px;
    margin: 10px;
    background: #fff;
    border: 2px solid #DFDFDF;
    border-radius: 5px;
}

.iconmenubar a:hover li {
    box-shadow: 0px 0px 20px 0px rgba(235, 235, 235, 1);
}

.iconmenubar li h4 {
    margin-bottom: 0;
    padding-top: 10px;
    font-weight: 600;
    color: var(--color-content-primary);
    font-size: 1rem;
}

/* mobile menu */
header .mobile-menu {
    display: flex;
    width: fit-content;
    float: right;
    list-style: none;
}

header .mobile-menu li {
    line-height: 38px;
    margin: 20px 0;
}

header .mobile-menu li a {
    font-size: 1rem;
}

header .mobile-menu li .login-btn {
    border: 1px solid var(--color-content-primary);
    color: var(--color-content-primary);
    padding: 3px 15px 5px;
    border-radius: 3px;
    transition: .3s;
}

header .mobile-menu li .login-btn:hover {
    color: #fff;
    background-color: transparent;
    background-color: var(--color-content-primary);
}

header .mobile-menu .nav-btn {
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    margin: 12px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

header .mobile-menu .nav-btn a {
    font-size: 25px;
    color: var(--color-content-primary);
}

header .mobile-menu {
    display: none;
}

/* mobile sidebar */

.sidebar ul {
    padding-left: 0;
}

.sidebar ul li {
    position: relative;
    margin: 0;
    line-height: 40px;
}

.sidebar ul li a {
    color: var(--color-content-primary);
    font-weight: 600;
    font-size: 17px;
}

.sidebar ul li a:hover {
    opacity: 0.8;
    text-decoration: none;
}

nav .nav-categories {
    padding: 20px;
}

nav .nav-categories li {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 10px;
    line-height: 30px;
}

nav .nav-categories li a {
    display: block;
    width: 100%;
    font-size: 1rem;
    color: var(--color-content-primary);
    text-decoration: none;
}

nav .nav-categories li img {
    padding-right: 10px;
    width: 40px;
    max-width: fit-content;
}

.nav-categories li h4 {
    margin-bottom: 0;
    font-weight: normal;
    color: var(--color-content-primary);
    font-size: 16px;
}

.d-none-mobile {
    display: block;
}

.d-none-desktop {
    display: none;
}

.nav-links li {
    display: block;
}

.nav-links ul li a {
    font-weight: normal;
}

.nav-links .adi-talk-btn img {
    width: 30px;
    margin-right: -10px;
}

.nav-links a {
    font-weight: normal !important;
}

.nav-links .sidebar-dropdown {
    display: block;
}

.nav-links .sidebar-submenu {
    display: none;
}

/* ~~ form ~~ */

/* form error styling  */
.form-container .error-container {
    margin-top: -12px;
    display: none;
}

.form-container .error-container .error-description {
    color: var(--color-error);

}

.form-container .error-container .error-description {
    margin-left: 3px;
    font-size: .9rem;
}

.form-group .error {
    margin-top: 2px;
}

.form-group input:hover {
    background-color: #fff;
}

/* form floating input styling */
.form-group .form-field {
    position: relative;
    width: 100%;
    margin: 15px 0;
}

.form-field input,
.form-field select {
    border: 1px solid var(--color-primary-muted);
    width: 100%;
    font-size: 1rem;
    padding: 12px 4px;
    outline: none;
    color: #000000;
    background: transparent;
    border-radius: .25rem;
    padding: 22px 0.7rem 5px;
}

.form-field select {
    padding-right: 36px !important;
}

.form-field label {
    position: absolute;
    top: 46%;
    left: 0.5rem;
    padding: 0 4px;
    color: #717171;
    font-size: 1rem;
    font-weight: 100;
    pointer-events: none;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
}

.required::after {
    content: ' *';
    color: rgb(210, 14, 14);
}

.form-field input:focus,
.form-field select:focus {
    padding: 22px 0.7rem 5px;
    box-shadow: 0 0 10px 0 #083a763e;
}

.form-field select:focus {
    padding: 22px 1rem 5px .5rem;
}

.form-field input+label.active {
    top: 25%;
    font-size: 0.9rem;
    color: rgb(103, 103, 103);
}




/* simple input label styling */
.form-controls {
    /* outline: none !important; */
    padding: .43rem .75rem;
    width: 100%;
    border-radius: .25rem;
    background-color: var(--color-input-background);
    transition: .1s ease-in-out;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0px 0px 20px;
    border: 1px solid var(--color-border);
}

.dob-label {
    margin-top: 1.111rem;
}


.radio-button-container {
    margin: .9rem 0 1.111rem;
}

.radio-button-container input[type=radio] {
    width: 1rem;
    margin-top: 2px;
}

.business-type-wrapper .radio-container {
    width: 30px;
    margin-top: 2px;
}


.form-controls:focus {
    border: 2px solid #8aa5c5;
    outline: 4px solid rgba(193, 193, 194, 0.379) !important;
    /* Custom outline style */

}


.form-label {
    font-weight: bold;
    margin-bottom: 0;
    display: block;
    margin: .6rem 0;
}

.form-group .field-instruction {
    margin-top: -.3rem;
    margin-bottom: .7rem;
}

.checkbox {
    width: 20px;
    height: 20px;
}


/* keywords */
#divKeywords .controls {
    margin-bottom: -10px !important;
}

#divKeywords .keyword {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    text-transform: capitalize;
    margin-right: 10px;
    border: 1px solid rgb(199, 197, 197);
}

#divKeywords .keyword a {
    margin-left: 10px;
    color: #000;
}

#divKeywords .keyword a i {
    font-weight: normal;
}

/* ___ multistep form ___ */








#businessOverview {
    width: 100%;
    max-width: 100%;
}

#exceededWords {
    color: var(--color-error);
}

/* word count styling */
.char_count {
    color: rgb(130, 130, 130);
    font-size: .9rem;
}

/* step label styling */


/* submit buttons */
.submit-buttons {
    width: 100%;
    z-index: 9999;
    background-color: #fff;
    padding: 15px 0px;
    border-radius: .25rem;
    margin-top: .5rem;
}

/* text-editor */
.text_editor {
    border: 1px solid var(--color-primary-muted);
    border-radius: .25rem;

}

.text_editor fieldset {
    border-bottom: 1px solid var(--color-primary-muted);
    padding: 5px 0;
}

.text_editor button {
    background-color: transparent;
    border: none;
    width: 23px;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.text_editor i {
    font-size: 1rem;
    margin-top: -8px;
    color: #000;
}

.list_icons {
    width: 32px;
    margin: 0;

}

.text_editor .text {
    max-height: 250px;
    height: 300px;
    overflow-y: auto;
    padding: 5px 12px;
    font-size: 1rem;
}

/* ~~  Sign up form ~~~ */
.sign-up-form {
    background-color: #fff;
    padding: 40px 30px;
    margin: 0 auto;
    max-width: 500px;

}

.sign-up-form h5 {
    font-size: 1rem;
}

.sign-up-form .centered-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-text);
}

.sign-up-form .centered-text::before,
.sign-up-form .centered-text::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #000;
    margin: 0 10px;
}

/* show password icon */
.show-password-icon {
    position: absolute;
    left: 93%;
    top: 26%;
    cursor: pointer;
}

/* remember-checkbox */
.remember-checkbox input[type=checkbox] {
    width: 20px;
    height: 20px;
}

/* other options styling */
.form-container .card-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form-container .card-container .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: .25rem;
    text-decoration: none;
}

.form-container .card-container .card span {
    color: var(--color-text);
}

.form-container .card img {
    width: 35px;
}

.form-container .card .facebook-icon {
    width: 30px;
    margin-right: 6px;
}

.form-container .form-group .error-icon {
    display: none;
}

/* verification options styling */
.verification-options {
    max-width: 300px;
}

.verification-options .verification-option {
    border: 1px solid var(--color-input-border);
    padding: 10px 15px;
    margin-right: 15px;
    width: 50%;
    border-radius: .25rem;
    cursor: pointer;
}

.verification-options .verification-option:hover {
    background-color: var(--color-primary-light);
}

.verification-options .verification-option .icon {
    font-size: 25px;
    object-fit: contain;
}

.verification-options .verification-option .icon i {
    font-size: 20px;
}

.verification-options .verification-option .icon img {
    width: 40px;
    margin-top: -7px;
    object-fit: contain;
}

/* sign-up-container */

.sign-in-container {
    max-width: 500px;
}

.sign-up-container .adi-details {
    padding-top: 20px;
    display: none;
}

.sign-up-container .adi-details h2 {
    color: var(--color-primary);
    font-size: 1.4rem;
}

.sign-up-container .adi-details .feature {
    margin: 10px 0;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.077);
    padding: 15px;
}

.sign-up-container .adi-details h3 {
    color: black;
    font-size: 1rem;
}

.sign-up-container .adi-details h3 i {
    font-size: 1rem;
}

.sign-up-container .flex-column {
    flex: 1;
}

.password-set-success .text-center .circle-check-icon {
    color: var(--color-primary);
    font-size: 2rem;

}



.tab .tag-Container .delete_icon {
    border: 1px solid var(--color-primary-muted);
}

/* ~~ Map Section: Container and Controls ~~ */
.service-area-map .map-container {
    aspect-ratio:  16 / 5;
    background-color: var(--color-primary-light);
    position: relative;
}

.map-container .map {
    width: 100%;
    height: 100%;
}

.btn-show-map {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background-color: var(--color-link);
    color: #fff;
    padding: .3rem .7rem;
}

/* ~~ Profile Picture Card ~~ */
.profile-picture-card {
    max-width: 300px;
    background-color: var(--color-primary-light);
    padding: 20px;
    position: relative;
}

.profile-picture-card .controls {
    position: absolute;
    top: 1px;
    left: 1px;
    display: none;
}

.profile-picture-card .controls button {
    background-color: transparent;
    border: 1px solid transparent;
}

.controls button:hover {
    border: 1px solid var(--color-primary-muted);
}

.controls .dropdown-list a {
    width: 120px;
}

.profile-picture-card .controls i {
    font-size: 1.2rem;
}

.profile-picture-card .image-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.profile-picture-card .image-container {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid var(--color-input-border);
    overflow: hidden;
    margin-inline: auto;
}

.profile-picture-card .placeholder-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.349);
    padding: 10px;
    border-radius: 50%;
    display: block;
}

.profile-picture-card .placeholder-icon i {
    display: block;
}


/* ~~ business hours ~~ */

.business-hours-table .week-day {
    margin: 20px 0 25px;
}

.business-hours-table input {
    padding: 2px 0;
    padding-left: 10px;
    border: 2px solid var(--color-border);
    font-size: .9rem;
}

/* ~~ helpful-notes ~~ */
.helpful-notes {
    color: var(--color-neutral-light);
    font-size: .9rem;
}

/* ~~ autocomplete search bar ~~ */
.searchContainer {
    position: relative;
}

.searchContainer .search-results {
    position: absolute;
    width: 100%;
    max-height: 155px;
    overflow-y: auto;
    height: fit-content;
    z-index: 1111;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-top: none;
    box-shadow: 0 0 20px 0 rgba(202, 202, 202, 0.226);

}

#serviceSearchBar .searchContainer,
#productSearchBar .searchContainer {
    display: none;
}

#serviceSearchBar .searchContainer input,
#productSearchBar .searchContainer input,
#businessKeywordSearchBar input {
    padding: 10px 10px;
    padding: 17px 0.6rem 3px;
    font-size: .9rem;
}

#serviceSearchBar .searchContainer label,
#productSearchBar .searchContainer label,
#businessKeywordSearchBar label {
    font-size: .9rem;
}

#serviceSearchBar .form-field input+label.active,
#productSearchBar .form-field input+label.active,
#businessKeywordSearchBar .form-field input+label.active {
    top: 25%;
    font-size: 0.7rem;
    color: rgb(103, 103, 103);
}

.searchContainer .added-service {
    color: #228b3a;
}

.searchContainer .add-service {
    color: #007bff;
}

.searchContainer .search-results li {
    padding: 8px 10px;
    cursor: pointer;
    border: 1px solid #eeeeee;
    background-color: #fff;
    background-color: #f1f3f4;
}

.search-results li p {
    margin: 0;
}

.search-results li:hover {
    background-color: #fff;
}

.search-results li span {
    color: #797979;
    font-size: .8rem;
}

.clear-icon {
    position: absolute;
    top: 60%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
    color: #808080;
    font-size: 1.2rem;
}

/* ~~ nav-pills ~~ */
.nav-pills .nav-link {
    background-color: var(--color-input-background);
    color: #000;
    cursor: pointer;
    position: relative;
    padding-inline: 10px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.nav-pills .nav-link.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
}




/* ~~ media-gallery ~~ */

/* media Gallery Modal */
#galleryModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 1140px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-height: 88vh;
    height: fit-content;
    overflow-y: auto;
    background-color: #fff;
}

#galleryModal .modal-header {
    display: flex;
    justify-content: space-between;
    height: 60px;
}

#galleryModal .modal-header .upload-new-files {
    height: fit-content;
    padding: 3px 5px;
    font-size: .85rem;
}

#galleryModal .modal-header .btn-close {
    padding: 0;
    margin-left: 7px;
}

#galleryModal .media-gallery-alert {
    font-size: .9rem;
}

#galleryModal .modal-content {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    overflow-y: auto;

}

#galleryModal .modal-title {
    font-size: 1rem;
}

#galleryModal .modal-body {
    max-height: 430px;
    overflow-y: auto !important;
    background-color: #fff;
    padding-bottom: 0;
    /* padding-top: 0; */
}

.media-gallery-container .gallery {
    height: 100%;
    padding-bottom: 10px;
    /* overflow-y: scroll !important; */
}

.media-gallery-container .gallery img,
.media-gallery-container .gallery video {
    height: 120px;
    object-fit: contain;
}

.media-gallery-container .gallery-media,
.media-gallery-container .previews {
    overflow-y: auto !important;

}

.media-gallery-container .previews {
    display: none;
}

.media-gallery-container .gallery-media {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 30px;
    margin-right: 0px;
}

.media-gallery-container .gallery-media .media-item {
    margin-bottom: 5px;
}

.media-gallery-container .gallery-media .media-item .media-container {
    position: relative;
    cursor: pointer;
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-primary-muted);
}

.media-container.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.media-gallery-container .gallery-media .media-item .media-container .image-clickable,
.media-gallery-container .gallery-media .media-item .media-container .video-thumbnail {
    width: 100%;
    height: 70px;
    transition: transform 0.3s ease;
    object-fit: cover;

}

.media-gallery-container .gallery-media .media-item .media-container:hover img,
.media-gallery-container .gallery-media .media-item .media-container:hover video {
    transform: scale(1.05);
}

.media-gallery-container .gallery-media .media-item .media-container.selected {
    border: 1px solid var(--color-link);
}

.media-gallery-container .gallery-media .media-item .media-container .image-checkbox {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    cursor: pointer;
    /* width: 25px;
    height: 25px; */
    background-color: var(--color-link);
    text-align: center;
    /* line-height: 25px; */
}

.media-gallery-container .gallery-media .media-item .media-container.selected .image-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;

}

.media-gallery-container .gallery-media .media-item .media-container .image-checkbox .checkbox-icon {
    font-size: .8rem;
    color: #fff;
    display: block;
    margin: .5rem .4rem .4rem !important;

}

/* Apply the animation to the media-container */
#galleryModal .gallery-media .media-item .thunder-animation {
    animation-name: thunderEffect;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    border: 1px solid var(--color-error);
}

/* gallery items preview */

.media-gallery-container .previews .media-preview {
    padding-top: 15px;
    margin-bottom: 15px;
    background-color: #eff3f7;
    position: relative;
    border: 1px solid var(--color-input-border);
    width: 80%;
    margin-left: 16px;

}

.media-gallery-container .previews .media-preview .media-preview-body {
    padding-left: 15px;

}

.media-gallery-container #selectedMediaPreviewContainer {
    position: absolute;
    left: 20px;
    bottom: 50px;
    width: 250px;
    background-color: #fff;
    position: fixed;
    max-height: 350px;
    overflow-y: auto;
    padding-bottom: 10px;
    border: 2px solid var(--color-primary-muted);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.203);
    z-index: 1111111;
}

#galleryModal #selectedMediaPreviewContainer .btn-close {
    font-size: .8rem;
}

.media-gallery-container .previews #selectedMediaPreviews img,
.media-gallery-container .previews #selectedMediaPreviews video {
    height: 80px;
    width: 67%;
    border: 1px solid var(--color-input-border);

}

.media-gallery-container #selectedMediaPreviews .media-preview .name {
    font-size: .9rem;
    color: #626262;
    margin-bottom: 0;
}

.media-gallery-container #selectedMediaPreviews .media-preview .size {
    font-size: .8rem;
    color: rgb(132, 132, 132);
    margin-top: -2px;
}

.media-gallery-container #selectedMediaPreviews .media-preview .image-dimensions {
    margin-top: -5px;
}

.media-gallery-container #selectedMediaPreviews .media-preview .deselect-btn {
    position: absolute;
    top: -6px;
    right: -5px;
    z-index: 1111;
}

.media-gallery-container #selectedMediaPreviews .media-preview .deselect-btn i {
    font-size: 1rem;
    color: black;
    z-index: 1111;
}

.media-gallery-container #selectedMediaPreviews .media-preview .deselect-btn:hover i {
    color: var(--color-error);
}

#galleryModal #limitErrorAlert {
    position: absolute;
    top: 10px;
    right: 45px;
}

#galleryModal #selectedMediaPreviews .media-preview .media-preview-footer {
    padding-left: 15px;
    background-color: #ffffff;
}

#galleryModal #selectedMediaPreviews .media-preview .media-preview-footer button {
    font-size: .9rem;
    margin-right: 0;
    padding-left: 0;
}

#galleryModal #selectedMediaPreviews .media-preview .media-preview-footer .deleteMedia {
    margin-right: 0;
}

.media-gallery-container .add-selected-media-btn {
    padding: .1rem !important;
}

/* Edit media section */
.media-gallery-container .edit-Media {
    background-color: #fff;
    margin-bottom: 40px;
    height: 600px;
}

.media-gallery-container .back-btn-container {
    margin-top: -10px;
}

.media-gallery-container .back-btn-container button i {
    font-size: 1.2rem;
}

.media-gallery-container .edit-Media .edit-media-preview {
    background-color: rgba(0, 0, 0, 0.262);
    height: 300px;
    width: 100%;
}

.media-gallery-container .edit-Media .media-details {
    max-width: 500px;
    margin: auto;
    width: 90%;
}

.media-gallery-container .edit-Media .size-details .title {
    font-size: .9rem;
}

.media-gallery-container .edit-Media .size-details .file-size-info {
    padding-left: 5px;
    margin: 0;
}

/* uploaded media preview */
.media-gallery-container .modal-upload-container {
    max-width: 950px;
    margin: 0 auto;
    margin-bottom: 40px;
    min-height: 400px;
    height: 100%;
    border: 1px solid var(--color-primary-muted);

}

.media-gallery-container .uploaded-media-preview {
    max-height: 470px;
    /* height: fit-content; */
    overflow-y: auto;

}

.media-gallery-container .uploaded-media-preview .uploaded-media-item {
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    border: 1px solid var(--color-primary-muted);
    width: 90%;
    margin-inline: auto;

}

.media-gallery-container .uploaded-media-preview .uploaded-media-item:first-child {
    margin-top: 10px;
}

.media-gallery-container .uploaded-media-preview .uploaded-media-item:last-child {
    margin-bottom: 20px;
}

.media-gallery-container .uploaded-media-preview .uploaded-media-image {
    width: 25%;

}

.media-gallery-container .uploaded-media-image img,
.media-gallery-container .uploaded-media-image video {
    width: 100%;
    border: 1px solid var(--color-input-border);
    height: 70px;
    object-fit: contain;
}

.media-gallery-container .uploaded-media-preview .uploaded-media-details {
    flex-grow: 1;
    padding-left: 10px;
}

.media-gallery-container .uploaded-media-preview .uploaded-media-details p {
    margin: 0;
    font-size: .9rem;
}

.media-gallery-container .uploaded-media-preview .uploaded-media-details .uploaded-media-size {
    color: rgb(132, 132, 132);
    font-size: .8rem;
}

/* progress bar */
.media-gallery-container .uploaded-media-preview .progress-Bar .item-bar {
    position: relative;
    height: .2rem;
    width: 100%;
    margin-top: 5px;
    background-color: var(--color-primary-light);
    border-radius: .15rem;
}

.media-gallery-container .uploaded-media-preview .item-bar .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: .2rem;
    margin: 0;
    background-color: var(--color-success);
    border-radius: .25rem;
    transition: width 100ms ease;
}

.media-gallery-container .uploaded-media-item .delete-uploaded-media {
    position: absolute;
    top: -6px;
    right: -5px;
    z-index: 1111;
    opacity: 1;
}

.media-gallery-container .uploaded-media-item .delete-uploaded-media i {
    font-size: 1rem;
    color: black;
    z-index: 1111;
}

.media-gallery-container .uploaded-media-item .delete-uploaded-media:hover i {
    color: var(--color-error);
}

.media-gallery-container .uploaded-media-item .item_value {
    font-size: .8rem;
    color: rgb(132, 132, 132);
}

.media-gallery-container .uploaded-media-item .upload-progress {
    margin-top: -4px;
}

.video-thumbnail {
    position: relative;
    height: 100%;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.422);

}

.play-icon i {
    color: #fff;
    display: block;
    padding-left: 9px;
    font-size: .9rem;
}

/* submit button */
#galleryModal #AddMediaButtonContainer {
    background-color: #eff3f7;
    /* margin-top: 10px; */
    text-align: right;
    padding: 10px 20px;
    width: 100%;
    z-index: 1111;
    /* position: fixed; */
}

/* ~~~~ Media section design  ~~~~~~*/
.media-section .upload-container {
    margin: 5px 0;
    padding: 10px 0;
}

.media-section .upload-container .secondary-notes {
    max-width: 250px;
}

.media-section .media-item {
    position: relative;
    margin: 5px 0;
}

.media-section .media-item img,
.media-section .media-item video {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.media-section .delete-icon {
    position: absolute;
    right: -7px;
    top: -5px;
    background-color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 0;
    transition: .1s ease-in-out;
}

.media-section .delete-icon i {
    color: #fff;
    font-size: .7rem;
}

.media-section .delete-icon:hover {
    background-color: var(--color-error);
}


/* ~~ completion/thankYou message box ~~ */
.completion-message-container {
    background-color: #fff;
    max-width: 700px;
    /* height: 450px; */
    margin: auto;
}

.completion-message-container .thank-you-card {
    border-radius: 5px;
    height: 100% !important;
    width: 100% !important;
    background: url('../images/confett.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}

.thank-you-card .thank-you-content {
    width: 95%;
}

.thank-you-card .thank-you-content h3 {
    margin-bottom: 20px;
    /* margin-top: -10px; */
}

.thank-you-card .thank-you-content p {
    max-width: 500px;
    margin-inline: auto;
}

.btn-mobile-width {
    width: 100%;
    margin-bottom: 10px;
}

/* ~~ Spinner icon ~~ */
.spinner-Holder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  ~~~~ masonry layout ~~~~ */
.masonry {
    --gap: .8em;
    --columns: 2;
    max-width: 60rem;
    margin: 0 auto;
    display: column;
    columns: var(--columns);
    gap: var(--gap);

}

.masonry>* {
    break-inside: avoid;
    margin-bottom: var(--gap);
}

@supports (grid-template-rows: masonry) {
    .masonry {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-template-rows: masonry;
        grid-auto-flow: dense;
        /* align-tracks: stretch; */
    }


    .masonry>* {
        margin-bottom: 0em;
    }
}

.flow>*+* {
    margin-top: var(--flow-space, var(--spacer));
}

/* ~~~ show-more-link ~~~ */
.show-more-link {
    color: var(--color-link) !important;
    font-size: 1rem;
    padding-left: 0;
}

/* ~~~~~ carousel ~~~~ */
.gallery-container {
    display: flex;
    overflow: hidden;
}

.gallery-container .gallery-item {
    flex: 0 0 32.8%;
    position: relative;
    /* Only display 3 images at a time */
}

.gallery-container .gallery-item .delete-icon {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 1.3rem;
    height: 1.3rem;
    color: white;
    border-radius: 50%;
    text-align: center;
    /* line-height: 20px; */
    cursor: pointer;


}

.gallery-container .gallery-item .delete-icon i {
    font-size: 1.1rem;
    color: var(--color-error);
    display: block;
}

.carousel-navigation {
    display: flex;
    justify-content: flex-end;
    /* Align navigation to the right */
}
.carousel-navigation img{
    width: 1.3rem;
}
.carousel-prev,
.carousel-next {
    background-color: #f3f3f3;
    border: 1px solid var(--color-border);
    padding: 0.1rem .5rem;
    cursor: pointer;
    width: 2.222rem;
    height: 2.222rem;
    border-radius: 20px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-prev {
    margin-right: 5px;
}

.carousel-prev:hover,
.carousel-next:hover {
    border: 1px solid var(--color-primary-muted);
    color: var(--color-primary);
    background-color: #D5DEEA;
}


.carousel-prev[disabled],
/* Styling for disabled previous button */
.carousel-next[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.gallery-container .img-responsive {
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Maintain a 16:9 aspect ratio */
    object-fit: cover;
    object-position: center;

}

#carousel-gallery {
    display: flex;
    transition: all 0.5s ease;
    list-style-type: none;
    padding-left: 0;
    gap: 5px;
}

#image-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    justify-content: center;
    align-items: center;
    z-index: 1111;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Hidden state */
    transition: opacity 0.6s ease-in-out, visibility 0s 0.6s; /* Smooth transition */
}
#image-preview-modal.show {
    visibility: visible; /* Make the modal visible */
    opacity: 1; /* Fully visible */
    transition: opacity 0.6s ease-in-out, visibility 0s 0s; /* Apply visibility immediately */
}
#image-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    color: white;
}

.img-cont {
    height: 100%;
    width: 50%;
    margin: auto;
    object-fit: contain;
}

#preview-prev,
#preview-next {
    position: absolute;
    top: 50%;
    font-size: 16px;
    color: white;
    cursor: pointer;
    background: #151515;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preview-prev:hover,
#preview-next:hover {
    background-color: #2e2e2e;
}
#preview-prev img,
#preview-next img{
    color: #fff;
}
#preview-prev {
    left: 20px;
}

#preview-next {
    right: 20px;
}

.no-scroll {
    overflow: hidden;
}

#preview-prev:disabled,
#preview-next:disabled {
    background-color: #151515;
}

#preview-prev:disabled:hover,
#preview-next:disabled:hover {
    background-color: #151515;
}

#close-preview {
    padding: 0;
    position: absolute;
    top: 9px;
    right: 20px;
    font-size: 30px;
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

video {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background-color: black;
}

.video-thumbnail {
    opacity: 0.8;
    object-fit: cover;
    background-color: black;
}

.video-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}
 /* Video thumbnail container */
 .video-thumbnail-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}

/* Wrapper for the play icon */
.play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    background-color: rgba(0, 0, 0, 0.553);
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    z-index: 1111;
}

/* Play button styling */
.play-button {
    color: white;
    font-size: 1.3rem; 
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    /* opacity: 0.8; */
    transition: opacity 0.3s ease;
    background-color: transparent;
    text-align: center;
    padding-left: .6rem;
}

.play-button:hover {
    opacity: 1;
}

/* Style for video thumbnail */
.video-thumbnail {
    width: 100%; 
    height: auto;  
}



/* ~~~~~~~ ratings ~~~~~~~~ */
.rating-section .overall-ratings {
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 5px;
}

.rating-section .average-rating {
    width: 40%;
    border-right: 1px solid var(--color-border);
}

.rating-section .rating-display {
    width: 60%;
    padding-left: 20px;
}

.rating-value {
    font-size: 1.2rem;
    margin-bottom: 0rem;
}

.star-rating {
    display: flex;

}

.star {
    position: relative;
    width: 20px;
    height: 20px;
    background: rgb(231, 231, 231);
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
    /* Shape of a star */
}

.star.filled {
    background: #FFA41C;
}


.rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}

.stars {
    display: flex;
}

.star {
    font-size: 10px;
    color: rgb(231, 231, 231);
}

.star.filled {
    color: #FFA41C;
}

.total-rating-count {
    font-size: .9rem;
}

.progress-bar {
    flex: 1;
    background: rgb(231, 231, 231);
    height: 6px;
    border-radius: 5px;
    overflow: hidden;
    margin-left: 10px;
}

.progress {
    height: 100%;
    background: rgb(231, 231, 231);
    border-radius: 5px;

}

.rating-count {
    padding-left: 10px;
    font-size: 14px;
    width: 30px;
}

.rating-display .star {
    width: 15px;
    height: 15px;
}

.reviews-section {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
}

.reviews-section .product-link {
    font-size: .9rem;
    color: #000;
    margin-top: 5px;
}

.reviews-section .product-link a {
    text-decoration: underline;
    color: #000;
    font-size: .9rem;
}

.reviews-section .truncated-text {
    margin-bottom: 0;
}

.reviews-section .truncated-text p {
    margin-bottom: 0;
}

.reviews-section .user-info {
    font-size: .9rem;
    margin-top: 10px;
}

.reviews-section .star {
    width: 15px;
    height: 15px;
}

.review {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.review.show {
    opacity: 1;
}

.truncated-text {
    margin: 10px 0;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-image {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* ~~~~~~~ Pagination ~~~~~~ */

.pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.pagination .page {
    border: 1px solid transparent;
    padding: 0.167rem 0.667rem;
    cursor: pointer;
    border-radius: 6px;
    background-color: transparent;
    opacity: 1;
    border-radius: 20px;
    font-size: .9rem;
    color: #000;
}


.pagination .page.active {
    border: 1px solid var(--color-primary-muted);
    color: var(--color-primary);
    background-color: #D5DEEA;
}

.pagination .page.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.pagination .navigation-button {
    background-color: #F2F7FA;
    border-radius: 50%;
    border: none;
    width: 2.222rem;
    height: 2.222rem;
}

.pagination .navigation-button i {
    font-size: .9rem;
    color: #000;
}

.pagination .page-numbers-container {
    background-color: #F2F7FA;
    margin: 0 10px;
    border-radius: 20px;
    padding: 0 0px;
    display: flex;
    align-items: center;
}


.pagination button:hover,
.pagination .page.active:hover {
    border: 1px solid var(--color-primary-muted);
    color: var(--color-primary);
    background-color: #D5DEEA;

}

.pagination button:disabled:hover {
    border: none;
    color: #ccc;
    background-color: #f3f3f3;
}

/* ~~~~~~~   empty state ~~~~~~ */
.empty-state {
    padding: 20px 0;
    text-align: center;

}

.empty-state p {
    color: #888888;
    font-size: .9rem;
    user-select: none;
}

/* ~~~~~~~  floating input labels ~~~~~~ */
.controls {
    text-align: left;
    position: relative;
}

.controls input,
.controls select,
.controls textarea {
    padding: 7px 15px;
    font-size: 1rem;
    border: 1px solid var(--color-primary-muted);
    width: 100%;
    margin-bottom: 18px;
    color: rgb(51, 51, 51) !important;
    font-weight: 300;
    border-radius: 5px;
    transition: all .3s
}

.business_hours .controls input[type="text"] {
    margin-bottom: 0px;
}

.controls input[type="text"]:focus,
.controls input[type="text"]:hover,
.controls select:focus,
.controls select:hover,
.controls textarea:focus,
.controls textarea:hover {
    outline: none;
    border: var(--color-primary);
}

.controls select {
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 7px 15px;
    font-size: 1rem;
    border: 1px solid var(--color-primary-muted);
    width: 100%;
    margin-bottom: 18px;
    color: rgb(51, 51, 51) !important;
    font-weight: 300;
    border-radius: 5px;
    transition: all .3s
}

.controls label {
    color: var(--color-primary);
    cursor: text;
}

.controls label {
    position: absolute;
    left: 8px;
    top: 8px;
    width: auto;
    min-width: 60px;
    color: rgb(110, 110, 110);
    font-size: 1rem;
    display: inline-block;
    padding: 0px 5px;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    transition: color .3s, top .3s, background-color .8s;
    background-color: rgba(255, 255, 255, 1);
}

.controls label.active {
    top: -16px;
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 1);
    width: auto;
}

.controls label.time_active {
    display: none;
}

select.floatLabel2 {
    padding-left: 10px;
}

input[readonly] {
    background-color: #fff;
}


/* ----------------  Footer  ---------------- */
footer {
    background-color: var(--color-primary);
    position: relative;
}

footer .pt-20 {
    padding-top: 30px;
}

/* footer buttons */

/* footerTop */
footer .footertop {
    background-color: white;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.123) 0px 7px 29px 0px;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;

}

footer .footertop p {
    display: inline-block;
    color: var(--color-text) !important;
    padding-right: 0 !important;
    width: 80%;
}

/* footer calltoaction */
footer .footertop .primary-btn {
    display: inline-block;
    width: fit-content;

}

footer .content {
    padding-top: 60px;
    padding-bottom: 45px;
}


footer .content p,
footer .footer-links a {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 2px 0;
}

footer .footer-links a:hover {
    text-decoration: underline !important;
}

footer .content h3,
footer h4 {
    color: #fff;
}

footer .content h3 {
    font-size: 1.39rem;

}

footer .content p {
    font-size: 1rem;
    padding-right: 60px;
}


/* Footer buttons */
footer .secondary-btn {
    background-color: var(--color-secondary);
    color: #fff;
    border: 1px solid transparent;
    margin-right: .5rem;

}

footer .secondary-btn:hover {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

footer .btn-share {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

footer .btn-share:hover {
    background-color: var(--color-secondary);
    color: #fff;
    border: 1px solid var(--color-secondary);
}

footer .content h4 {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

/* footer links */
footer .content .d-flex a {
    margin-top: -10px;
}

footer .content .footer-links a {
    display: block;
    margin: 2px 0;
}

/* footer multilang container */
.footer-multi-lang {
    background-color: var(--color-text-muted);
    border-radius: 3px;
    padding: 4px 20px;
    margin-top: 10px;
    cursor: pointer;
    display: none;
    font-size: 1rem;
}

.footer-multi-lang .lang-arrow {
    float: right;
    margin-top: 5px;
}

.langs-lists {
    background-color: #fff;
    padding: 4px 20px;
    display: none;
    width: 75%;

}

.langs-lists a {
    color: black !important;
    display: block;
    padding: 5px 0;
    font-size: 1rem;
    border-bottom: 1px solid rgb(235, 233, 233);
}

.active-dropdown {
    display: block;
}

/* footer bottom */
footer .footer-bottom p {
    background-color: var(--color-footer-bottom);
    text-align: center;
    color: var(--color-text-muted);
    font-size: .89rem;
    padding: 8px 0;
    margin-bottom: 0;
}




/* ~~~~~ datatables  ~~~~~~~ */
.table-responsive {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.dataTables_filter,
.dataList_length {
    margin-bottom: 20px !important;
}

.trackOrders_tbl table {
    width: 600px;
    overflow-x: auto;
}

.dataTable thead {
    background-color: #F2F7FA !important;
}

.dataTable {
    margin-bottom: 20px !important;
}

.dataTable th,
.dataTable td,
.dataTables_info {
    font-size: .9rem;
}

/* ~~~~~~~ share link modal ~~~~~~~~ */
.share-link {
    background-color: var(--color-primary-light);
    padding: 2rem 1rem;
    border-radius: .5rem;
    margin-bottom: 2rem;
}

.share-link .share-link-container {
    display: flex;
    justify-content: center;
}

.share-link .share-link-container .share-link-url {
    overflow: hidden;
    flex: 1;
    padding: 5px;
    padding-top: 10px;
    background-color: #fff;
    margin-right: .3rem;
    cursor: text;

}

.share-link .share-link-container .share-link-url::-webkit-scrollbar {
    display: none;
}

.share-link .share-link-container .share-link-url p {
    user-select: text;
    /* display: inline-block; */
    white-space: nowrap;
    overflow: hidden;
    -webkit-user-select: text;
    margin-bottom: 0;
}

.share-link-feedback {
    color: var(--color-success);
    margin-top: .4rem;
    font-size: .85rem;
    display: none;
}

/* ~~~~~~~ profile-status ~~~~~~~~ */
.profile-status,
.modify-pause {
    padding: .2rem .5rem;
    font-size: .9rem;
    border-radius: 1rem;
    margin-top: .2rem;
}

.modify-pause {
    border: 1px solid var(--color-primary-muted);
    margin-left: .2rem;
    color: var(--color-text);
    background-color: transparent;
}

.modify-pause:hover {
    background-color: var(--color-primary-light);
}

.profile-status.active {
    background-color: #DFF5D8;
    color: #217a00;
}

.profile-status.paused {
    background-color: #FFF3CD;
    color: #856404;
}

.profile-status.pending {
    background-color: #FEE2E2;
    color: #D32F2F;
}

.profile-status.suspended {
    background-color: #FDE3D6;
    color: #C62828;
}

.profile-status.deactivated {
    background-color: #ECEFF1;
    color: #37474F;
}

.profile-status.close {
    background-color: #F0F0F0;
    color: #616161;
}

.settings-container .profile-status {
    margin-left: .3rem;

}

/* ~~~~~~~ status-guide-table ~~~~~~~~ */
.status-guide-table {
    max-width: 900px;
    width: 100%;
    border-collapse: collapse;
}

.status-guide-table table,
th,
td {
    border: 1px solid #dddddd;
}

.status-guide-table th,
td {
    padding: 12px;
    text-align: left;
}

.status-guide-table th {
    background-color: #f2f2f2;
}

.status-guide-table .profile-status {
    width: fit-content;
}

.status-guide-table p {
    margin-bottom: 0;
    font-size: .9rem;
}

/* ~~~~~~~ keywords-list-table ~~~~~~~~ */
.keywords-list {
    border: 1px solid var(--color-border);
}

.keywords-list,
.tag-Container {
    clear: both;
    /* max-height: 250px;
    height: fit-content;
    overflow-y: auto; */
}

.keywords-list .add-icon {
    margin-right: 0;
}

.keywords-list .keyword {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    cursor: pointer;
}

.keywords-list .keyword.added {
    background-color: var(--color-primary-light);
}

.keywords-list .keyword p {
    margin-bottom: 0;
}

/*  ~~~~~~~ rounded-tags  ~~~~~~~ */
.tag-Container {
    border: 1px solid var(--color-border);
    padding: 10px;
    margin-bottom: .8rem;
}

.tag-Container .selected-tags {
    display: flex;
    flex-wrap: wrap;
}

.tag-item {
    display: inline-block;
    width: fit-content;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-primary-light);
    padding: .2rem .7rem .2rem;
    border-radius: 2.222rem;
    margin: 5px 0;
    margin-right: .4rem;
    display: flex;
    justify-content: space-between;
}

.tag-item .tag-text {
    margin-right: 5px;
    text-transform: capitalize;
}

.tag-item.pending {
    background-color: var(--color-status-pending);
    border: 1px solid var(--color-pending-border);
}

.tag-item.pending p {
    color: #c9982d;

}

.tag-item.pending .delete_icon {
    color: #c9982d;
}

.tag-item p {
    display: inline;
    /* margin-right: .5rem; */
    margin-bottom: 0;
    font-size: .9rem;
}

.tag-item .delete_icon {
    color: #8ca0b8;
    cursor: pointer;
    font-size: .8rem;
    border: 1px solid var(--color-primary-muted);
    transition: .1s all;
}

.tag-item .delete_icon:hover {
    background-color: #000;
}

/* ~~~~~ ListItemSaver ~~~~~~ */
/* List Item Styles */
#existingLists {
    max-height: 300px;
    overflow-y: auto;
}

#existingLists .list,
#listModal .creat-list {
    border: 1px solid var(--color-border);
    border-radius: .3rem;
    padding: .6rem 1rem;
    margin-top: .7rem;
    cursor: pointer;
    transition: .2s;
    color: #000;
}

#existingLists .list:first-child {
    margin-top: 0;
}

#existingLists .list:hover {
    background-color: #f8f8f8;
}

#existingLists .list .list-name {
    user-select: none;
}

/* Heart Icon Styles */
#existingLists .list .icon {
    margin-right: .5rem;
    width: 1.2rem;
}

#existingLists .list .icon {
    fill: none;
    stroke: var(--color-primary-muted);
    stroke-width: 2;
}

/* Saved List Styles */
#existingLists .list.saved-list {
    border: 1px solid var(--color-border);
    background-color: #f8f8f8;
}

#existingLists .list.saved-list .icon {
    fill: #FF385C !important;
    stroke: #FF385C;
}

/* Create List Modal Styles*/
#listModal .creat-list {
    background-color: var(--color-primary-light);
    width: 100%;
    text-align: left;
    padding-inline: .9rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#listModal .creat-list:hover {
    background-color: var(--color-border);
}

#listModal .creat-list img {
    margin-top: -3px;
    width: 1.3rem;
}

/* Heart Icon Styles (For Action Button) */
.heart-icon {
    width: 1rem;
    fill: none;
    stroke: black;
    stroke-width: 2;
    cursor: pointer;
    display: inline-block;
}

.heart-icon.saved {
    fill: #FF385C;
    stroke: none;
}

/* ~~~~~ Toast ~~~~~~~ */

/* Toast Container */
#toast-container,
#inToastContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
  

}
#toast-container{
    max-width: 700px;
    min-width: 350px;
    width: fit-content;
    height: fit-content;
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
   
    align-items: center;  
}
#inToastContainer{
    margin-top: -1rem;
}
/* Toast Styles */
.toasts {
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: .7rem 1rem;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.111);
    z-index: 111111;
}
.toasts.no-title {
    align-items: center; /* Center the icon and message horizontally */
  }
.toasts .icon-wrapper {
    width: 2rem;
    height: 2rem;
    /* background: #fff; */
    border-radius: 50%;
    box-sizing: border-box;
    padding: .4rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

}

.toasts .icon {
    background: var(--primary);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    position: relative;
}

.toasts .icon::before,
.toasts .icon::after {
    position: absolute;
    content: "";
    background: var(--secondary);
    border-radius: 5px;
    top: 50%;
    left: 50%;
}

.toasts .toast-message {
    padding: 5px 20px 5px 10px;
    flex: 1;
}

.toasts .toast-message h4,
.toasts .toast-message p {
    margin: 0;
    line-height: 1.2em;
}

.toasts .toast-message h4 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: #404040;
}

.toasts .toast-message p {
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .05em;
    color: #606060;
}

.toasts .toast-close {
    position: relative;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease-in-out;
}

.toasts .toast-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.toasts .toast-close::before,
.toast-close::after {
    position: absolute;
    content: '';
    height: 12px;
    width: 1px;
    border-radius: 5px;
    background: #606060;
    top: 50%;
    left: 50%;
    transition: background 0.2s ease-in-out;
}

.toasts .toast-close:hover::before,
.toast-close:hover::after {
    background: #404040;
}

.toasts .toast-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.toasts .toast-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.toasts .timer {
    width: 0%;
    height: 4px;
    background: var(--primary);
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-right-radius: 5px;
    box-shadow: 0 0 8px var(--primary);
}

.toasts .timer-animation {
    animation: countdown 5s linear forwards;
}

@keyframes countdown {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}


/* Success Styling  */

.toasts.success {
    --primary: #279d42;
    --secondary: #E3FEE6;
}

.toasts.success .icon {
    transform: rotate(-45deg);
}

.toasts.success .icon::before {
    width: 10px;
    height: 3px;
    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
}

.toasts.success .icon::after {
    width: 3px;
    height: 6px;
    transform: translate(calc(-50% - 3px), calc(-50% - 1px));
}


/* Warning Styling  */
.toasts.warning {
    --primary: #F29208;
    --secondary: #FFEEDF;
}

.toasts.warning .icon::before {
    width: 3px;
    height: 3px;
    transform: translate(-50%, calc(-50% + 4px));
}

.toasts.warning .icon::after {
    width: 3px;
    height: 7px;
    transform: translate(-50%, calc(-50% - 2px));
}


/* Error Styling  */

.toasts.error {
    --primary: #E63435;
    --secondary: #FFEAEC;
}

.toasts.error .icon::before {
    width: 3px;
    height: 3px;
    transform: translate(-50%, calc(-50% + 4px));
}

.toasts.error .icon::after {
    width: 3px;
    height: 7px;
    transform: translate(-50%, calc(-50% - 2px));
}

/* Info Styling */

.toasts.info {
    --primary: #42C0F2;
    --secondary: #CFEFFC;
}

.toasts.info .icon::before {
    width: 3px;
    height: 7px;
    transform: translate(-50%, calc(-50% + 2px));
}

.toasts.info .icon::after {
    width: 3px;
    height: 3px;
    transform: translate(-50%, calc(-50% - 4px));
}


/* =========== Pages styling ============= */
/* ~~~~~~ member-profile ~~~~~~~~ */
/* flex parent container */
.business-cards-container {
    max-width: 600px;
    margin: 0 auto;
}
.business-cards-container .bb-1 {
    border-bottom: none;
}
.business-cards-container a.primary-btn:hover {
    color: #fff;
}

.business-cards-container #businessCardsHolder {
    flex-direction: column;
    gap: 0;
}

/* business card */
.business-cards-container .business-card {
    border-radius: 0px;
    margin: 0px 0;
   
    /* background-color: #000; */
}

.business-cards-container .business-card h3 {
    font-size: 1.2rem;
    color: #000;
}


#column1 {
    width: 45% !important;
}

#column2 {
    width: 55% !important;
}
#column2 .business-card{
    margin-left: 2rem;
}
.ptb-1 {
    padding-bottom: 1rem;
    padding-top: 1rem;
}
/* ..  profile-info .. */
.business-cards-container .profile-info {
    background-color: var(--color-primary-light);
    position: relative;
    padding: 0;

}

/* business header */
.business-cards-container .profile-info .business-header {
    width: 50%;
    text-align: center;
    padding-inline: 15px;
    padding-top: 1.2rem;
    padding-bottom: 0;
}

.business-cards-container .profile-info .business-details {
    width: 50%;
}
.business-cards-container .profile-info .business-details #starIcon{
    width: 1.2rem;
    margin-right: 3px;
    margin-top: -4px;
}
.business-cards-container .profile-info .business-header .logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
}

.business-cards-container .profile-info .business-header .logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; 
    display: none; /* Hide by default */

}

.business-cards-container .profile-info .business-header .placeholder-logo {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-muted);
    color: #000;
    font-size: 36px;
    border-radius: 50%;
    font-weight: bold;
}
.business-cards-container .profile-info .business-header .logo .status-indicator {
    position: absolute;
    width: 1.1rem; 
    height: 1.1rem;;
    bottom: 5px; 
    right: 5px;
    background-color: var(--color-error); 
    border: 3.5px solid #fff; 
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); 
}

/* Green status */
.business-cards-container .profile-info .business-header .logo .status-indicator.green {
    background-color: green;
}
.business-cards-container .profile-info .business-header .logo .status-indicator.red {
    background-color: red;
}
.business-cards-container .profile-info .business-header .logo .edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0%, 0%);
    border: none;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-with-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: unset;
    transition: none;
    padding: .375rem 1rem;
    border-radius: .25rem;
    border: 1px solid var(--color-primary);
    background-color: #fff;
    color: var(--color-primary);
}

.btn-with-icon:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-delete {
    background-color: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);

}

.btn-delete:hover {
    background-color: var(--color-error);
    color: #fff;
}

.business-cards-container .profile-info .business-header .business-name {
    font-size: 1.2rem;
    margin-bottom: 0;
    color: #000;
}

.business-cards-container .profile-info .business-header .business-status-info,
.business-cards-container .profile-info .business-header .busi-uname {
    font-size: .85rem;
}

.business-cards-container .profile-info .business-header .at-symbol {
    font-size: .7rem;
}

.business-cards-container .profile-info .business-details {
    padding-left: 20px;
    padding-top: 1.2rem;
    padding-bottom: .8rem;
}

.business-cards-container .profile-info .business-details .info-box .info-label {
    font-size: .9rem;
    margin-bottom: 0;
}

.business-cards-container .profile-info .business-details .info-box .star-icon {
    font-size: .9rem;
}

.business-cards-container .profile-info .business-details .info-box h4 {
    font-size: 1rem;
}

.business-cards-container .profile-info .business-details .info-box a {
    text-decoration: none;
}

.business-cards-container .profile-info .business-details .info-box a h4 {
    color: #000;
}

/* business actions */
.business-cards-container .business-actions,
.business-cards-container .action-group {
    border-top: 1px solid var(--color-primary-muted);
    padding: 10px;
    flex-wrap: wrap;

}

.business-cards-container .action-group {
    border-top: none;
}

.business-cards-container .business-actions a,
.business-cards-container .action-group a {
    font-size: .9rem;
    display: inline-block;
    margin: 0 .1rem 0px;
    padding: 5px 6px;
    border-radius: 7px;
    color: var(--color-text);
    text-decoration: none;
}

.business-cards-container .action-group img {
    width: 25px;
    object-fit: contain;

}

.business-cards-container .business-actions a {
    background-color: #d5deea;
    transition: .3s ease;

}

.business-cards-container .business-actions a:hover {
    background-color: #fff;
}

.business-cards-container .business-actions img {
    width: 17px;
    height: 17px;
    margin-top: -4px;

}

.business-cards-container .action-group a {
    text-decoration: underline;
    margin: 0 2px;
}

.business-cards-container .business-actions i {
    margin-right: 2px;
    color: var(--color-primary);
}

.business-cards-container .action-group img {
    width: .9rem;
    object-fit: contain;
    margin-right: 3px;
}

/*  */
.action-website {
    position: relative;
    display: inline-block;
    padding-right: 20px;
}

.action-website .edit-btn {
    position: absolute;
    top: 10%;
    right: -0px;
    transition: right 0.3s, opacity 0.3s;
}

.action-website:hover .edit-btn {
    right: 0;
    opacity: 1;
}

/* business status */
.business-cards-container .profile-info .business-status {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid var(--color-primary-muted);
    border-radius: 25px;
    padding: 3px 10px;
    display: flex;
    align-items: center;
}

/* - map location  - */
.business-cards-container .location-map .map-container {
    width: 100%;
    aspect-ratio: 16 / 10 !important;
    /* Maintain a 16:9 aspect ratio */
    background-color: #fff;
    border: 1px solid var(--color-border);
    position: relative;
}


.business-cards-container .location-map .show-map-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: inline-block;
    background-color: var(--color-link);
    color: #fff;
    font-size: .9rem;
    padding: .3rem .6rem;
}

.business-cards-container .about {
    padding-top: 10px;
}

.business-cards-container #businessOverview p {
    margin-bottom: 0;
}

.business-cards-container .about-info-items .info-item {
    padding: .4em 0rem;
    background: rgb(255, 255, 255);
    background-color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: left;
    padding-right: 20px;
    margin-bottom: -.3rem;

}
.business-cards-container .about-info-items .staff-detail{
    align-items: center;
}

.business-cards-container .about-info-items .info-item .info-content {
    flex: 1;
}

.business-cards-container .about-info-items .info-item p {
    margin-bottom: 0;
    color: #636363;
    display: inline-block;
}

.business-cards-container .about-info-items .info-icon {
    width: 25px;
    margin-right: .5rem;
}

.business-cards-container .about-info-items .info-icon img {
    object-fit: contain;
}



.business-cards-container .about-info-items .working-hours-container .see-all-hours-btn {
    padding-left: .5rem;
}

/* business keywords */
.business-card .keyword-list a {
    display: inline-block;
    padding: .3rem .5rem;
    font-size: .95rem;
    background-color: var(--color-primary-light);
    color: var(--color-text);
    text-decoration: none;
    margin-right: .1rem;
    margin-bottom: .6rem;
    border-radius: .3rem;
    transition: all .1s ease-in-out;
}

.business-card .keyword-list a:hover {
    background-color: var(--color-border);
}

/*  - masonry - */
#profileAboutHeading {
    display: none;
}

.aboutEdit-show-on-mobile {
    display: flex;
}

.business-info-masonry {
    --gap: .2rem;
}

.business-info-masonry .info-item {
    padding: .4em 0rem;
    background: rgb(255, 255, 255);
    background-color: #fff;
    display: flex;
    padding-right: 20px;
    margin-bottom: 0;
}

.business-info-masonry .info-item .info-content {
    flex: 1;
}

.business-info-masonry .info-item p {
    margin-bottom: 0;
    color: #636363;
    /* flex: 1; */
    display: inline-block;
    /* margin-left: .7rem; */
}

.business-info-masonry .info-item .info-icon {
    color: var(--color-secondary);
    font-size: 1.2rem;
    display: block;
    margin-top: 2px;
    width: 40px !important;
}

.business-info-masonry .delivery-info .delivery-cost {
    font-weight: bold;
    display: block;
}

.business-info-masonry .delivery-info p {
    padding-right: 1rem;
}

/* opening hours and open/close status */
#workingHoursModal .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: .7rem;
}

#workingHoursModal .header h3 {
    color: #000;
    font-size: 1.4rem;
}

.business-hours {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding: 0px 0px 15px;
}

.business-hours table {
    width: 100%;
}

.business-hours table tr {
    border: 0;
    border-bottom: 1px solid rgb(199, 199, 199);
}

.business-hours table tr:last-child {
    border-bottom: none;
}

.business-hours table td:first-child {
    width: 40%;
}

.business-hours table td {
    text-align: center;
    border: none;

}

.business-hours table tr .day-of-week {
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: capitalize;
}

.today {
    color: var(--color-link);
}
.red-text{
    color: rgb(230, 5, 5);;
}
.business-status-label.open,
.business-status-label.closed{
    margin-right: .6rem;
}
.open:after {
    content: " Open";
    color: var(--color-success);

}

.closed:after {
    content: " Closed";
    color: rgb(230, 5, 5);
    vertical-align: middle;
}

/* ~~~~~~ landing page ~~~~~~~~ */
.banner {
    background-color: #083A76;
    width: 100%;
    position: relative;
    margin-bottom: 80px;
}

.banner .circle {
    width: 100%;
    background-color: #083A76;
    height: 100%;
    position: absolute;
    top: 100px;
    border-radius: 50%;
    z-index: 0;
}

.banner .circle .circlee {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #094081;

}

.banner .circle .circle1 {
    margin-left: 20px;
}

.banner .circle .circle2 {
    margin-top: -50px !important;
    margin-left: 5px;
}

.banner .circle .circle3 {
    display: block;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background-color: #094081;
    margin-left: 90px;
    margin-top: -40px;
}

.banner .right-circles {
    float: right;
    margin-right: 20px;
    position: absolute;
    bottom: 130px;
    right: 0px;
}

/* banner header */
.banner .inner-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1111;
}

.banner .inner-header .header-menu a {
    color: #fff;
}

.banner .header-menu ul li a:hover {
    border-bottom: 2px solid #fff;
}

.banner .inner-header .header-menu .dropdown {
    box-shadow: none;

}

.banner .inner-header .header-menu .dropdown a {
    color: var(--color-primary);
}

.banner .inner-header .login-btn {
    background-color: var(--color-secondary);
    color: #fff;

}

.banner .inner-header .login-btn:hover {
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);

}

.banner .mobile-menu .nav-btn a {
    font-size: 25px;
    color: #fff;
}

/* banner text */
.banner .text {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 140px;
    padding-bottom: 80px;
    margin: 0 auto;
    max-width: 930px;
}

.banner .text h2 {
    font-size: 3.5rem;
    color: var(--color-secondary);
}

.banner .text h4 {
    font-size: 1.5rem;
    color: rgb(226, 225, 225);
    font-weight: 500;
    margin-top: -5px;
}

.banner .text ol {
    display: inline-block;
    text-align: left;
    padding: 5px 0;
    margin-bottom: 0;
    max-width: 85%;
}

.banner .text p,
.banner .text ol li {
    color: rgb(228, 227, 227);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5rem;
}

.banner .btn_group .white-btn {
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid white;
}

.banner .btn_group .white-btn:hover {
    background-color: transparent;
    color: #fff;
}

.banner .btn_group .readmore-btn {
    background-color: transparent;
    color: #fff;
    border: 1px solid white;
}

.banner .btn_group .readmore-btn:hover {
    background-color: #fff;
    color: var(--color-primary);
}

/* business profile */
.business-profile {
    display: flex;
    padding: 20px 0 0;
}

.business-profile p {
    margin-right: 60px;
}

.business-profile .business-profile__img {
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    height: 280px;
    background: linear-gradient(#083a76e0, #083a76d2), url('../images/welcome-img.jpg');
    background-position: center;
    margin-bottom: -20px;
}

.business-profile .business-profile__img h4 {
    position: relative;
    color: var(--color-secondary);
    font-weight: 500;
    font-size: 1.7rem;
}

.business-profile .business-profile__img h4 .arrow-up {
    color: var(--color-success);
    font-size: 2rem;
}

.business-profile .business-profile__img h4 .arrow-down {
    color: var(--color-error);
    font-size: 2rem;
}

.business-profile .business-profile__img h4::before {
    content: '';
    width: 15%;
    height: 2px;
    background-color: var(--color-secondary);
    position: absolute;
    top: 20px;
    left: -50px;
}

.business-profile .business-profile__img h4::after {
    content: '';
    width: 15%;
    height: 2px;
    background-color: var(--color-secondary);
    position: absolute;
    top: 20px;
    right: -50px;
}

.business-profile .link {
    color: var(--color-primary);
}

/* categories */
.categories {
    background-color: #F8F8F8;
    margin-bottom: 120px;
}

.categories .category .category_header {
    background-color: var(--color-primary);
    padding: 15px 0 10px;
    border-radius: 10px 10px 0 0;
    padding-left: 50px;
    position: relative;
}

.categories .category .category_header .category_no {
    width: 35px;
    height: 35px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.1rem;
    position: absolute;
    bottom: -15px;
    left: 15px;
}

.categories .category .category_header h4 {
    color: #fff;
    font-size: 1rem;
}

.categories .category .category_body {
    background-color: #fff;
    padding-top: 20px;
    padding-left: 70px;
    padding-bottom: 30px;
}

.categories .category .category_body p {
    line-height: 1.4rem;
    position: relative;
}

.categories .category .category_body p::before {
    content: '';
    width: 17px;
    height: 4px;
    background-color: var(--color-primary);
    position: absolute;
    top: 12px;
    left: -25px;
}

.categories .text-left {
    text-align: left;
}

/* ----------------  categories-page  ---------------- */
.categories_details {
    padding-top: 40px;
    padding-bottom: 40px;
}

.categories_details h4 {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.categories_details .category {
    display: flex;
    border-radius: 5px;
    background-color: #F2F7FA;
    padding: 10px 10px;
    transition: .2s ease-in-out;
    margin: 10px 0;
    width: 100%;
    text-decoration: none;
}

.categories_details .category:hover,
.categories_details .category:focus {
    background: var(--color-primary);
    color: #fff;
}

.categories_details .category .cat_no p {
    width: 35px;
    height: 35px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 0;
    margin-right: 5px;
    font-size: 1rem;

}

.categories_details .category .cat_name p {
    margin: 0;
    margin-top: 5px;
    font-size: 1rem;
    color: #000;
    transition: .2s ease-in-out;
}

.categories_details .category:hover>.cat_name p {
    color: #fff !important;

}


/* ----------------  advert-cluster page  ---------------- */
.advert-cluster-page {
    padding: 90px 0;
}

.adverts {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.adverts .col-lg-15 {
    border: none;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.adverts .advert {
    margin: 5px;
    background-color: #F2F7FA;
    text-align: center;
    padding: 2rem .8rem .8rem;
    width: 100%;
    border-radius: 5px;
    text-decoration: none;
}

.adverts .advert:hover {
    background-color: var(--color-primary-light);
}

.adverts .advert>div:first-child {
    width: 60px;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
}

.adverts .advert img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}

.adverts h4 {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.adverts p {
    margin-top: 10px;
}

.adverts .cluster_name {
    color: var(--color-secondary);
}

.adverts .categories_details .category {
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: #F2F7FA;
    margin: 8px 0;
}

.adverts .categories_details .category:hover,
.adverts .categories_details .category:focus {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.adverts .categories_details .category .cat_no p {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    background-color: var(--color-primary);
}

.adverts .categories_details .category .cat_name p {
    margin-top: 0 !important;
}

.adverts .categories_details .category:hover .cat_name p {
    color: #000 !important;
}



/* ----------------  plaza-list-page ---------------- */
.plaza {
    background-color: #f8f8f8;
}

.gray-bg1 {
    border-radius: 15px;
}

.gray-bg1 .less-gutter input {
    border: none;
    margin-bottom: 1px;
    outline: none;
    color: #000;

}

/* list/grid button */
.layout_btn {
    border: 1px solid var(--color-border);
    background-color: #fff;
    color: #000;
    padding: 0px 6px;
}

#list.active,
#grid.active,
#list2.active,
#grid2.active {
    background-color: var(--color-primary-light);
}

/* sidebar */
.filters_sidebar {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 295px;
    margin-right: 24px;
    padding: 20px;
    position: sticky;
    top: 0;
    overflow-y: scroll;
    max-height: calc(100vh - 10px);
    transition: all .5s ease-in-out;
}

.close_sidebar {
    display: none;
}

/* Scrollbar width */
.filters_sidebar::-webkit-scrollbar {
    width: 5px;
}

/* Scrollbar thumb (the draggable part) */
.filters_sidebar::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
    border-radius: 20px;
}

/* Scrollbar track (the background part) */
.filters_sidebar::-webkit-scrollbar-track {
    background-color: #eeeeee;
}

.filters_sidebar .filter {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.filters_sidebar h3 {
    font-size: 1rem;
    text-transform: capitalize;
}

.filters_sidebar .price_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px
}

.filters_sidebar .price,
.filters_sidebar .price_flex {
    position: relative;
}

.filters_sidebar .price_flex input {
    width: 95%;
}

.filters_sidebar .price label {
    font-style: normal;
    font-weight: 500;
    font-size: .9rem;
    line-height: 24px;
    color: var(--color-text);
    margin-bottom: 6px;
}

.filters_sidebar input {
    padding-left: 20px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    z-index: 1;
    background: transparent;
    color: #555658 !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

.filters_sidebar input:focus {
    outline: 0 !important;
}

.filters_sidebar .price_flex span {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 9;
    font-size: .9rem;
}

.filters_sidebar .checkbox_text {
    font-size: .9rem;
    margin-left: 5px;
    color: var(--color-text);
    text-transform: capitalize;
}

.filters_sidebar .checkboxHolder label {
    cursor: pointer;
    top: 3px;
    position: relative;
}

.filters_sidebar .checkboxHolder input[type=checkbox] {
    margin: 4px 0 0;
    line-height: normal;
    width: 17px;
    height: 17px;
    font-size: .9rem;
    cursor: pointer;
}

.filters_sidebar .filter_dropdown {
    display: block;
    cursor: pointer;
}

.filters_sidebar .clear_all {
    font-size: .9rem;
    color: var(--color-link);
    text-decoration: underline !important;
}

.filters_sidebar .list-unstyled {
    list-style: none;
}

.filters_sidebar .list-unstyled li {
    display: inline-block;
    color: var(--color-text);
    background-color: #F2F7FA;
    border: 1px solid var(--color-border);
    padding: 4px 8px;
    margin: 4px 0;
    margin-right: 5px;
    border-radius: 4px;

}

.filters_sidebar .list-unstyled li a {
    text-decoration: none;
}

.filters_sidebar .list-unstyled li span {
    color: var(--color-text);
    font-size: .9rem;
}

.filters_sidebar .list-unstyled li:hover {
    background-color: #E0ECF3;
    color: #fff;
}

.filters_sidebar .list-unstyled li .close {
    font-size: 1rem;
    color: #000;
    margin-top: 2px;
    margin-left: 10px;
}

.filters_sidebar .fa-chevron-down,
.search_results .filter_icon {
    font-size: .8rem;
    color: var(--color-text);
}

/* search results */
.search_results {
    width: calc(100% - 295px);
}

.talent-sec .search_results {
    width: 100%;
}

.talent-sec .search_results .job_searchbar {
    width: 72%;
}

#talent {
    width: 100%;
}



.search_results .results_no {
    font-size: .9rem;
}

.search_results .links a {
    color: var(--color-primary);
    text-decoration: underline !important;
}

/* products_list */
#products {
    gap: 10px;
    /* justify-content: space-between; */
}

#products .item {
    width: 32%;
}

#products .job_item {
    width: 49%;
}

#talent .job_item {
    width: 32%;
}

.view-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    padding: 0;
}

.thumbnail {
    padding: 0px !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    width: 100%;
    border: 1px solid #fff;
}

/* list view */
.item.list-group-item,
.job_item.list-group-item {
    float: none;
    width: 100%;
    background-color: transparent;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 !important;
    border: 0;
}

.item.list-group-item {
    margin-bottom: 10px !important;
}

.item.list-group-item .img-event {
    float: left;
    width: 250px;
    height: 150px !important;

}

.item.list-group-item .img-event img {
    width: 100%;
    height: 100%;
}


.item.list-group-item .list-group-image {
    margin-right: 10px;
}

.item.list-group-item .thumbnail {
    margin-bottom: 0px;
    display: inline-block;
}

.item.list-group-item .caption {
    float: left;
    width: calc(100% - 250px);
    margin: 0;
}

.item.list-group-item:before,
.item.list-group-item:after {
    display: table;
    content: " ";
}

.item.list-group-item:after {
    clear: both;
}

/* grid-view */
.service-head-boxx {
    height: 100%;
    border: 1px solid var(--color-border);
}

.service-head-boxx .thumbnail {
    height: 100%;
}

.service-head-boxx:hover {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.196);
    padding-bottom: 0 !important;
}

.service-head-boxx .img-event {
    height: 150px;
    width: 100%;
    cursor: pointer;
}

.service-head-boxx .img-event img {
    width: 100%;
    height: 100%;
}

.service-head-boxx h4 {
    margin-bottom: 4px;
    margin-top: 5px;
    color: var(--color-primary) !important;
    font-size: 1rem;
}

.service-head-boxx h4 a {
    color: var(--color-text) !important;
    font-size: 1.1rem !important;
    display: inline-block;
    margin-bottom: 3px;
}

.service-head-boxx .service_details {
    padding: 10px 12px 0;
    margin: 0 0px;
}

.service_details .text span {
    display: block;
}

.service-head-boxx .service_details .text {
    cursor: pointer;
}

.service-head-boxx p {
    font-size: 16px;
}

.service-head-boxx .location {
    font-size: 16px;
    margin-bottom: 0px;
}

.service-head-boxx .service_details_bottom {
    border-top: 1px solid var(--color-border);
    margin-top: 10px;
    padding-top: 5px;

}

.service-head-boxx .service_details_bottom .price {
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.service-head-boxx .service_details_bottom .price span {
    font-size: .8rem;
    padding-right: 5px;
}

.service-head-boxx .service_details .links {
    width: fit-content;
}


.service-head-boxx .service_details .links .btn {
    padding: 0;
}

.service-head-boxx .service_details .links .icon {
    position: relative;
    cursor: pointer;
    display: inline;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-right: 2px;
    border-radius: 10px;

}

.service-head-boxx .service_details .links .tooltip {
    position: absolute;
    top: 0;
    left: -10px;
    font-size: 14px;
    width: fit-content;
    background: var(--color-text);
    color: #fff;
    padding: 5px 8px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.service-head-boxx .service_details .links .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    /* width: fit-content; */
    background: #fff;
    bottom: 3px;
    left: -50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: translate(-50%) rotate(45deg);
    -moz-transform: translate(-50%) rotate(45deg);
    -ms-transform: translate(-50%) rotate(45deg);
    -o-transform: translate(-50%) rotate(45deg);
    -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.service-head-boxx .service_details .links .icon:hover .tooltip {
    top: -30px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.service-head-boxx .service_details .links .icon:hover span,
.service-head-boxx .service_details .links .icon:hover .tooltip {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.01);
}

.service-head-boxx .icon .plaza-btn {
    width: 35px;
    height: 30px;
    vertical-align: middle;
    /* padding-top: 5px; */
    background-color: #F2F7FA;

}

.service-head-boxx .icon .plaza-btn img {
    margin-left: -5px;
}

/* buttons */
.plaza-btn {
    color: var(--color-primary);
}

.plaza-btn:hover {
    color: var(--color-primary);

}

/* sort_dropdown   */
.sort_dropdown {
    position: relative;

}

.sort_dropdown button,
.search_results .filter_btn {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: var(--color-primary-light);
    border: 1px solid transparent;
    border-radius: 2px;
}

.search_results .filter_btn {
    display: none;
}

.sort_dropdown button:hover,
.search_results .filter_btn:hover {
    border: 1px solid var(--color-primary-muted);
}


.sort_dropdown i {
    font-size: .8rem;
}



.sort_dropdown .sort_dropdown__items {
    float: right;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.082);
    position: absolute;
    right: 0;
    z-index: 111;
    transition: all .5s ease-in;
}

.sort_dropdown__items a {
    display: block;
    border: 1px solid #F2F7FA;
    width: 200px;
    margin: 0;
    padding: 7px 10px 7px 15px;
    text-align: left;
    color: var(--color-text);
    font-size: .9rem;
    text-decoration: none;
}

.sort_dropdown__items a:hover {
    background-color: #F2F7FA;
}

.hide_dropdown {
    display: none;
}

.show_dropdown {
    display: block;
}

/* pagination */
.pagination_page span {
    color: #7e7e7e;
    font-size: .9rem;
}

.pagination_page .primary-btn {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding-inline: 40px;
    margin-top: 12px;
}

.pagination_page .primary-btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* compare results */
#overlay_compare {
    position: fixed;
    z-index: 1111;
    bottom: 43px;
    left: 0%;
    width: 100%;
}

#overlay_compare .product_thumb {
    background-color: var(--light-bg);
    border: 1px solid #e7e6e6;
    position: relative;
    margin: 10px 0px;
    width: 24%;
}

#overlay_compare .products {
    box-shadow: 0 0 20px 0 rgba(20, 20, 20, 0.195);
    max-width: 700px;
    width: 60%;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    border: 1px solid #dde5eb;
    padding-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
}

#overlay_compare .product_thumb .delete_btn {
    position: absolute;
    right: -13px;
    top: -15px;
    border: 0;
    z-index: 1111;
    background-color: transparent;
    color: rgb(185, 16, 16);

}

#overlay_compare .product_image {
    width: 100%;
    height: 100px;
}

#overlay_compare .product_image img {
    width: 100%;
    height: 100%;
}

#overlay_compare .product_meta {
    padding: 10px 5px;
}

#overlay_compare .product_meta p {
    margin: 0;
}

#overlay_compare .product_meta .title {
    font-size: .8rem;
}

#overlay_compare .product_meta .price {
    font-size: .9rem;
    color: #000;
}

#overlay_compare .products .btn {
    padding: .3rem 1rem;
}

#overlay_compare .products .back-btn {
    border: 2px solid #6C757D;
    background-color: var(--color-text);
    color: #fff;
}

#overlay_compare .products .primary-btn:hover {
    color: #fff;
}

body.no-scroll {
    overflow: hidden;
    /* Hide vertical scrollbar */
}


/* ----------------  gallery-preview-page ---------------- */
.gallery {
    height: fit-content;
    padding-bottom: 0;
    overflow-y: hidden;
}

/* tabs */
.gallery .nav-tabs {
    justify-content: center;
    border-top: 1px solid rgb(228, 227, 227);
    border-bottom: 0;
    /* margin: 5px 0; */
}

.gallery .nav-tabs button {
    color: var(--color-text);
    font-size: 1rem;
    padding: 3px 0;
    display: inline-block;
    margin: 5px 15px 10px;
    border: none;



}

.gallery .nav-tabs button.active {
    color: #000;
    border-bottom: 2px solid var(--color-secondary) !important;
}

.expanded_carousel {
    height: fit-content;
    position: relative;
    margin-bottom: 40px;
}


.gallery .swiper {
    height: 94%;
    position: relative;
    width: 100%;
}

.gallery .thumbs .swiper-slide {
    width: 20%;
    height: 100%;
    opacity: 0.9;
}

.gallery .thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--color-secondary);
}

.gallery .thumbs .swiper-wrapper {
    justify-content: center;
}

.gallery .thumbs {
    height: fit-content;
    box-sizing: border-box;
    margin-top: 20px;
    position: relative;
}

.gallery .fa-chevron-left {
    color: var(--color-secondary);
    margin-right: 30px;
}

.gallery .go-back {
    color: var(--color-secondary);
    font-size: 1rem;
    display: block;
    margin-top: -2px;
    margin-left: -20px;
}

.gallery .header .details {
    border-right: 1px solid var(--color-primary-muted);
    padding-right: 40px;
    padding: 10px 0;
}

.gallery .header {
    padding: 10px 0;
    background-color: #F2F7FA;
}

.gallery .product_details {
    width: 100%;
    display: none !important;
}

.gallery .header h3 {
    color: var(--color-primary);
    font-size: 1.39rem;
    position: relative;
    margin-bottom: 0;
}

.gallery .header p {
    margin: 0;
}

.gallery .header .price {
    color: var(--color-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 10px;
}

.gallery .imperfection {
    padding: 30px 0;
    text-align: center;
    max-width: 700px;
    width: 100%;
    background-color: var(--color-primary-light);
    padding: 30px;

}

.gallery .disclaimer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    padding-bottom: 5px;
    margin: 0 auto;
}

.gallery .disclaimer i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.swiper-button-prev:after {
    content: 'prev';
    font-size: 1rem;
}

.swiper-button-next:after {
    content: 'next';
    font-size: 1rem;
}

.swiper-button-next,
.swiper-button-prev {
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: .6rem;
}

/* ----------------  plaza-details-view-page ---------------- */
.product_carousel {
    width: 100%;
}

.product_details {
    width: 100%;
    padding-top: 20px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
}


.swiper {
    width: 100%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    width: 100%;
}

.mySwiper2 {

    height: auto;
}

.mySwiper {
    height: auto;
    box-sizing: border-box;
    padding: 0px 0;

}

.mySwiper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 4px;

}

.mySwiper .swiper-slide,
.mySwiper4 .swiper-slide {
    width: 20%;
    height: auto;
    opacity: 0.8;
}

.mySwiper .swiper-slide-thumb-active,
.mySwiper4 .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--color-secondary);
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.1rem !important;
}

.product_carousel .swiper-slide {
    height: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    position: relative;
}

.product_carousel .swiper-slide img {
    height: auto;
}

.product_details .section-heading {
    margin-bottom: 5px !important;
}

.product_details .price {
    font-size: 1.3rem;
    color: var(--color-secondary);
    margin-top: 0px;
}

.product_details .price span {
    font-size: 1.1rem;
}

.product_details .location {
    color: var(--color-text);
}

.product_details .contact {
    background-color: var(--color-primary-light);
    padding: .3rem .5rem;
    border-radius: .4rem;

}

.product_details .contact h4 {
    font-size: 1rem;
}

.product_features .feature .fa-check {
    background-color: white;
    color: var(--color-primary);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.079);
    float: left;
}

.product_details .primary-btn:hover {
    color: #fff;
}

/* table styling */
.product_features .feature table {
    width: 100%;
    margin-top: 20px;
}

.product_features .feature table tr,
.product_features .feature table td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;

}

.product_features .feature table .title {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-text);
    width: 35%;
}

.location_map {
    width: 100%;

}

.location_map iframe {
    width: 100%;
    height: 100%;
    background-color: #F2F7FA;

}

.product_features .location_map #map_div {
    height: auto !important;
    width: 100%;
    border: 1px solid var(--color-border);

}

/* ----------------  post-ads-page ---------------- */
.form_holder {
    max-width: 600px;
    min-height: 330px;
    padding: 1rem 0px 1rem;
    border-radius: 5px;
    background: #fff;
    /* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.043); */
    overflow: hidden;
    margin: 30px auto;

}

.form_holder>.d-flex {
    display: flex;
    align-items: center;
}

.form_holder h6 {
    margin: 0;
}

.form_holder h6,
.form_holder h5 {
    color: var(--color-primary);
    width: 20%;
    font-size: 1rem;
}

.form_holder h6 {
    width: fit-content;
    margin-right: .5rem;
}

.form_holder h5 {
    width: 100%;
    font-size: 1.1rem;
    text-align: center;
    text-transform: none;
}

.form_holder p {
    margin-top: -5px;
}

.form_holder .inputs_holder {
    width: 100%;
}

.form_holder .location {
    display: flex;
    align-items: center;
    width: fit-content;
}

.form_holder .location span {
    width: fit-content;
    margin-top: 0px;
}

.form_holder .location input[type=radio] {
    width: 20px;
    height: 20px;
    margin-left: .8rem;
    margin-right: .4rem;
}

.form_holder .other_address {
    background-color: #fbfbfb;
    padding: 20px;
    padding-bottom: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    display: none;
    margin: 10px 0 20px;
}

.form_holder .spot_location {
    color: var(--color-secondary);
    text-decoration: underline !important;
}

.form_holder .upload_btn {
    background-color: transparent;
    color: var(--color-primary);
    border: none;
    margin-left: 10px;
}

/* post_ads_images */
.form_holder .file-area {
    text-align: center;
}

.file-area .file-dummy {
    background-color: transparent;
    border: 2px dashed #07306244;
    padding: 1rem .5rem .3rem !important;
    position: relative;
}

.file-area .file-dummy img {
    width: 3.5rem;
    height: auto;
}

.form_holder .back_btn {
    color: rgb(59, 59, 59);
    font-size: 1rem;
}

.images_previews h6 {
    padding-top: 1rem;
}

.images_previews .preview {
    width: 33.3%;
    height: 120px;
    padding: 6px 4px;
    position: relative;

}

.images_previews .preview img {
    width: 100%;
    height: 100%;
    position: relative;
}

.form_holder .close {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #050404;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_holder .close span {
    color: #fff;
}

#myModal_map .modal-content {
    padding-bottom: 60px;
}

#myModal_map .modal-dialog {
    width: 90%;
    max-width: 1250px;
}

#myModal_map #save_button {
    z-index: 999;
    position: absolute;
    left: 43% !important;
}

/* -------------- faq-page  ---------*/
.accordionMenu {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
}

.accordionMenu input[type=checkbox] {
    display: none;
}

.accordionMenu .accordianHeader {
    display: block;
    padding: .7rem .9rem;
    background: #fff;
    font-size: 1rem;
    color: #000;
    position: relative;
    cursor: pointer !important;
    border: 1px solid var(--color-border);
    font-weight: 500;
    margin-bottom: 12px;
    padding-right: 20px;
    font-weight: bold;
    border-radius: 5px;
}

.accordionMenu .accordianHeader::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border: transparent transparent transparent #000;
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 10;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.accordionMenu .content {
    max-height: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}

.accordionMenu .content .inner {
    font-size: 1rem;
    color: #4F575F;
    background: #fff;
    padding: 15px 15px;
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.084);
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    border-top: 0;

}

.accordionMenu .content .inner p {
    margin: 5px 0;
}

.accordionMenu input[type=radio]:checked+.accordianHeader {
    margin-bottom: 0 !important;
}

.activeAccordian+.accordianHeader {
    margin-bottom: 0 !important;
}

.accordionMenu input[type=radio]:checked+.accordianHeader:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

}

.activeAccordian+.accordianHeader:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

}

.accordionMenu input[type=radio]:checked+.accordianHeader+.content {
    max-height: 2000px;
    height: auto;
}

.activeAccordian+.accordianHeader+.content {
    max-height: 2000px;
    height: auto;
}

.accordionMenu form textarea {
    height: 100px;
}


/* -------------- member-details-page  ---------*/
.memberDetails_tabs {
    margin-top: 30px;
    margin-bottom: -30px;

}

.memberDetails_tabs .tabs {
    max-width: 550px;
    min-height: 330px;
    border-radius: 5px;
    background: #fff;
    margin: 0 auto;
}

.memberDetails_tabs .tabs .tab-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.tabs .tab-header>div {
    width: calc(100%/2);
    text-align: left;
    color: rgb(131, 130, 130);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: capitalize;
    outline: none;
}

.memberDetails_tabs .tabs .tab-header>div.active {
    color: var(--color-primary);
}

.memberDetails_tabs .tabs .tab-indicator {
    position: relative;
    width: calc(100%/2);
    height: 5px;
    background-color: var(--color-secondary);
    border-radius: 5px;
    transition: all 500ms ease-in-out;

}

.memberDetails_tabs .tabs .tab-body {
    position: relative;
    height: calc(100% -60px);
    color: black;
}

.memberDetails_tabs .tabs .tab-body h2 {
    color: violet;
}

.memberDetails_tabs .tabs .tab-body>div {
    position: absolute;
    top: -200%;
    opacity: 0;
    margin-top: 5px;
    transform: scale(0.9);
    transition: opacity 500ms ease-in-out 0ms,
        transform 500ms ease-in-out;
    width: 100%;

}

.memberDetails_tabs .tabs .tab-body>div.active {
    top: 0px;
    opacity: 1;
    transform: scale(1);
    margin-top: 0px;
}

.memberDetails_tabs .controls input {
    width: 100% !important;
    position: relative;
    margin-bottom: 0;
}

.memberDetails_tabs .controls i {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1rem;
    color: #808080;
    cursor: pointer;
}

.memberDetails_tabs .controls .fa-eye {
    color: var(--color-primary);
}

.memberDetails_tabs .controls {
    display: flex;
    align-items: center;
}

.memberDetails_tabs .controls>div {
    flex: 1;
    display: flex;
    align-items: center;
}

.memberDetails_tabs .controls .input-form {
    width: 100%;
    flex-grow: 1;
    padding-right: 35px;
}

.memberDetails_tabs .controls .fa-eye-slash {
    position: absolute;
    right: 15px;
    cursor: pointer;
}

.memberDetails_tabs .controls .generate_btn {
    margin-left: 5px;
}

.memberDetails_tabs .generate_btn {
    width: fit-content;
    background-color: var(--color-primary);
    padding-inline: .3rem !important;
    color: #fff;
    border: 1px solid var(--color-primary);
}

.memberDetails_tabs #newPwdeye {
    position: absolute;
    top: 10px;
    right: 150px;
}

.memberDetails_tabs .back-btn {
    background-color: var(--color-text);
    color: #fff;
}

.memberDetails_tabs .submit-btn:hover {
    color: #fff;
}


/* ----------------  category_details-page  ---------------- */
.categoryHero_section {
    background-color: #F0F0F0;
}

.categoryHero_section .container,
.profile_benefits,
.profile_offerings .container,
.profile_steps .container,
.profile_features {
    max-width: 1140px !important;

}

.categoryHero_section,
.profile_benefits,
.profile_offerings,
.profile_features,
.profile_steps {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.categoryHero_section img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    object-position: 80% 80%;
}

.categoryHero_section .heading {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.categoryHero_section .sub_heading {
    font-size: 1.2rem;
    color: var(--color-text);
}

.profile_benefits ol {
    padding-left: 24px;
}

.profile_benefits .image {
    height: 600px;
    width: 100%;


}

.profile_benefits .image img {
    height: 100%;
    width: 100%;
}

.profile_offerings {
    background-color: #F8F8F8;
}

.profile_offerings .image {
    height: 280px;
    margin-top: 0 !important;

}

.profile_offerings .image img {
    height: 100%;
}

.profile_steps {
    background: linear-gradient(#032956ca, #042f63da), url(../images/secbg1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top;
}

.profile_steps .section-heading {
    color: #fff;
}

.profile_steps .primary-btn {
    background-color: var(--color-secondary);
}

.profile_steps p,
.profile_steps ol li {
    color: #e8e8e8;
}

.profile_steps ol li {
    margin-left: -10px;
}

.profile_steps ol li {
    line-height: .8rem;
}

.profile_steps .secondary-btn {
    background-color: #fff;
    color: #000;
    padding: .475rem .85rem;
    border-radius: 5px;
    border: 1px solid #fff;
    font-size: 1rem;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.profile_steps .secondary-btn:not(:disabled):hover {
    transform: scale(1.05)
}

.profile_steps .secondary-btn:not(:disabled):hover:active {
    transform: scale(1.05) translateY(0.125rem);
}

.profile_features img {
    /* max-height: 540px !important; */
    height: 100%;
    width: 100%;
}

.profile_features .text {
    height: fit-content;
    margin-top: 20px;
}

.profile_features ol {
    padding-left: 20px;
}

.profileContent .text {
    margin-top: 24px;
}

.profileContent .feature {
    background-color: #F0F0F0;
    text-align: center;
    padding: 10px 0;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.profile_features .row {
    display: flex;
    align-items: stretch !important;
}


/* ----------------  manage-searches   ---------------- */
/* selected services */
.services {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.services .section-heading {
    font-size: 1.2rem;
}

.selected_services .service_box {
    display: inline-block;
    width: fit-content;
    border: 1px solid var(--color-primary-muted);
    padding: .2rem 10px .2rem 10px;
    border-radius: 40px;
    margin: 5px 0;
    margin-right: 5px;

}

.selected_services .service_box p {
    display: inline;
    margin-right: 10px;
    margin-bottom: 0;
}

.delete_icon {
    display: inline-block;
    color: #AA0B0B;
    font-size: .8rem;
    width: 22px;
    height: 22px;
    border: 1px solid #AA0B0B;
    border-radius: 50%;
    text-align: center;
    padding-top: 3px;
    margin-top: 1px;
    cursor: pointer;
}

.delete_icon:hover {
    color: #fff;
    background-color: #AA0B0B;
}

/* search input */
/* .searchInput {
    max-width: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0 15px;
}

.search-holder {
    flex: 1;
    position: relative;
}

.search-holder input {
    width: 100%;
    padding-right: 30px;
    margin-bottom: 0;
} */

/* .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
} */

/* .searchElse-btn-holder {
    margin-left: 5px;
}

.searchElse-btn-holder .btn {
    white-space: nowrap;
} */


/* Search Keywords  */
.search_keywords {
    margin: 20px 0;
    padding: 15px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

.search_keywords .info_btn {
    display: inline-block;
    margin-top: -3px;
}

.search_keywords a .fa-question {
    font-size: .9rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    margin-left: 20px;
    background-color: var(--color-secondary);
    color: #fff;

}

.search_keywords .keywords p {
    display: inline-block;
    border: 1px solid var(--color-primary-muted);
    padding: 5px 10px 8px;
    border-radius: 40px;
    margin: 4px 0;
    margin-right: 5px;
    font-size: 0.94rem;

}

.search_keywords .keywords a {
    display: inline-block;
    margin-right: 10px;
    text-decoration: underline !important;
    font-size: 0.94rem;
}

/* keywords list */
.keywords_list {
    padding-inline: 15px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0px;
}

.keywords_list .keyword {
    padding: 8px 7px 8px;
}

.keywords_list .keyword p {
    margin-bottom: 0;
}

/* ----------------  templates-page  ---------------- */
.templates {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.templates .template_holder {
    width: 100%;
    margin-right: 0;
}

.templates .domain_link {
    font-size: 1rem;
    margin-right: 0rem;
    margin-bottom: 0;
    float: none;
    text-align: center;
}

.templates .template_box {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.147);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 5px;
}

.templates .template_box img {
    width: 100%;
    height: auto;
}

.templates .template_box .bottom_links {
    padding: 8px 0;
    background-color: var(--color-primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.templates .template_box .bottom_links a {
    font-size: .9rem;
    display: inline-block;
    padding: 4px 10px;
    text-decoration: none;
}

.templates .template_box .bottom_links .customize_btn {
    border: 1px solid var(--color-secondary);
    background-color: var(--color-secondary);
    color: #fff;
    border-radius: 5px;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.templates .template_box .bottom_links .select_btn {
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 5px;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.templates .template_box .bottom_links .customize_btn:not(:disabled):hover,
.templates .template_box .bottom_links .select_btn:not(:disabled):hover {
    transform: scale(1.05)
}

.templates .template_box .bottom_links .customize_btn:hover:active,
.templates .template_box .bottom_links .customize_btn:hover:active {
    transform: scale(1.05) translateY(0.125rem);
}

.templates .template_box .bottom_links .preview_btn {
    border: 1px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-content-primary);
    border-radius: 5px;
    margin-left: 7px;
    transition: background-color .2s, color .1s;
}

.templates .template_box .bottom_links .preview_btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* ----------------  transalations-page  ---------------- */
.translations {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.translations .form_group .controls {
    width: 90%;
}

.translations .form_group .controls input {
    margin-bottom: 10px;
}

.translations .search_results table {
    width: 100%;
    margin-top: 10px;

}

.translations .search_results table th,
.translations .search_results table td {
    border: 1px solid var(--color-primary-muted);
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.translations .search_results table th {
    color: var(--color-primary);
    font-size: 1.1rem;

}

.translations .search_results table td {
    color: var(--color-text);
    font-size: 1rem;
}

.translations .modal-content {
    margin: auto;
}

.translations form .primary-btn {
    margin-left: 5px;
    margin-right: 0px;
}

.translations .col-md-7 .primary-btn {
    margin-left: 0;
}

.translations #suggestion_modal {
    padding-right: 0 !important;
    margin: 20px 0px !important;
    padding: 0 0px;
    width: 100%;
}

/* ----------------  Search-keywords ----------------   */
.offered-keywords {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.offered-keywords .pending_keyword {
    background-color: var(--color-secondary);
    cursor: pointer;
}

.offered-keywords .pending_keyword p {
    color: #fff;
}

.offered-keywords .pending_keyword .delete_icon {
    color: #fff;
    border: 1px solid #fff;
}

.offered-keywords .message_box {
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
}

.offered-keywords .message_box p {
    margin-bottom: 5px;
}

.offered-keywords #addWord_btn {
    display: none;
}

.offered-keywords #noResults_found {
    display: none;
}

.offered-keywords #addWord_cancel {
    display: none;
}

.offered-keywords #keyword_type {
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.offered-keywords .searchInput {
    margin-top: 2rem;
}

/* ----------------  hmp  ---------------- */
.searchForm {
    margin-top: 40px;

}

#searchAroundd,
#placetoSearch {
    max-width: 500px;
}

#searchAroundd input,
#placetoSearch input {
    padding-top: .475rem;
    padding-bottom: .475rem;
}

.voice-icon {
    display: none;
}

.quickSearchesSection-buttons {
    float: right;
}

.quickSearchesSection-buttons .info-btn {
    float: right;
}

.result-box {
    position: relative;
    background: #F2F7FA;
    border-radius: 10px;
    padding: 1.3rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.126);
}

.resultBox-container {
    margin-bottom: 10px;
    margin-top: 30px;
}

.result-box:hover {
    background: var(--color-primary-light);
}

.result-box span.result-number {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-secondary);
    color: #ffffff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: .89rem;
}

.result-box img {
    margin-bottom: 10px;
    width: 30%;
    height: auto;
    object-fit: contain;
}

.result-box.text-center h5 {
    font-size: 1rem;
    margin-top: 5px;
    color: var(--color-primary);

}

/* active result box styling */
.resultBox-container .activeResultBox {
    background-color: var(--color-primary);
}

.resultBox-container .activeResultBox h5 {
    color: white;
}

.activee {
    border: 1px solid #cddce7;
    margin: 10px 4px;
    padding: 20px 25px 5px;
    border-radius: 5px;
}

.row_restaurant .result-box {
    margin-bottom: 30px;
    background: #f5f5f5;
}

.row_restaurant .result-box:hover {
    background: #E5E5E5;
}

#selected_cat a {
    text-decoration: none;
}


/* ----------- post job ------- */
.form-container {
    background-color: #fafafa;
}

.form-container h4 {
    font-size: 1.2rem;
    color: #000;
}

.form-container h5 {
    font-size: 1rem;
    color: #000;
}

.form-container .myform {
    padding: 20px 15px 20px;
}

.form-container .form {
    max-width: 600px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.077);
    margin: 0 auto;
    position: relative;
}

.form-container input {
    border-radius: 5px;
}

.form-container input:focus,
.form-container textarea:focus {
    background-color: #fff;
}









.form-container input.err {
    border-bottom: 4px solid rgb(197, 9, 9) !important;
}

.form-container .form_subheading {
    font-size: 1rem;
}

.form-container .tab .controls {
    margin: .5rem 0;
}

.form-container .table .salary_modal .table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--color-primary-muted);
    border-collapse: collapse;

}

.form-container .table {
    border: 1px solid var(--color-primary-muted);

}

.salary_modal .table {
    border: 1px solid var(--color-primary-muted);
}

.form-container .table .text,
.salary_modal .table .text {
    padding: 10px;
}

.form-container textarea,
.salary_modal textarea,
.modal textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    padding: 5px 12px;
    font-size: 1rem;
    border-radius: 5px;
}

.form-container .table input,
.form-container .table select,
.salary_modal .table input,
.salary_modal .table select {
    width: 100%;
    margin-right: 10px;
    padding-bottom: 0 !important;
    /* margin-bottom: 15px !important; */
    /* margin-top: 10px; */
    padding-left: 3px !important;
    border: none !important;
}

.form-container .table select,
.salary_modal .table select {
    /* margin-top: 14px; */
    width: 90px !important;
}

.form-container select {
    text-transform: capitalize;
}

.form-container .table .field span,
.salary_modal .table .field span {
    /* margin-top: 10px; */
    color: var(--color-content-secondary);
    margin-left: 10px;
}

#starting-at {
    display: none;
}

#divKeywords .controls {
    margin-bottom: -10px !important;
}

#divKeywords .keyword {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    text-transform: capitalize;
    margin-right: 10px;
    border: 1px solid rgb(199, 197, 197);
}

#divKeywords .keyword a {
    margin-left: 10px;
    color: #000;
    text-decoration: none;
    font-size: .8rem;
    cursor: pointer;
}

#divKeywords .keyword a i {
    font-weight: normal;
}

.form-container .btns {
    display: flex;
    justify-content: space-between;
    align-items: normal;
}

.form-container .prev-stp {
    border: none;
    font-weight: 400;
    background-color: transparent;
    /* padding: 1rem 0rem; */
    border-radius: 7px;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem;
    padding-left: 0;
}

.form-container .nextbtn {
    margin-left: auto;

}

/* ----------- bm-profile page ------- */
/* .service-area-map .select-picker{
    max-width: 500px;
} */

/* ----------- Settings page ------- */
.settings-container {
    padding: 40px 0;
}

.settings-container .edit-btn {
    background-color: var(--color-primary-light);
}

.settings-container .form-container {
    max-width: 950px;
    margin: 0 auto;
}

.settings-container .form-container h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.settings-container .steps-labels-container .step-label {
    cursor: pointer;
}

.settings-container .form-container {
    background-color: #fff;
    padding: 0;
    padding-top: 0;

}

.settings-container .business-section {
    border: 1px solid var(--color-border);
    border-radius: .4rem;
    margin-bottom: 30px;
    padding: 1rem 1.2rem;

}

.settings-container .business-section .section-header {
    margin-bottom: .3rem;
}

/* info-item */
.settings-container .business-section .info-item {
    padding-bottom: .4rem;
}

.settings-container .business-section .info-item h5 {
    color: var(--color-text);
}

/* category-item */
.settings-container .business-section .category-item {
    margin-bottom: 1rem;
}

.settings-container .business-section .category-item i {
    font-size: .8rem;
    margin-inline: .5rem;
}

.settings-container .business-section .category-item p {
    margin-bottom: 0;
}

.settings-container .business-section .category-item .sub-categories span::after {
    content: " , ";
}

.settings-container .business-section .category-item .sub-categories span:last-child::after {
    content: "";
}

/* list-items */
.settings-container .business-section .list-items {
    margin-bottom: .4rem;
}

.settings-container .business-section .list-items p {
    display: inline-block;
    border: 1px solid var(--color-border);
    background-color: var(--color-primary-light);
    padding: .4rem;
    border-radius: 5px;
    font-size: .9rem;
    margin-bottom: .3rem;
}

#editContactInfo .iti__selected-flag {
    margin-top: 5px;
    padding-top: 0;
    height: fit-content;
    display: flex;
    top: 20%;
    padding-left: 12px;
}

/* puase profile modal */
#puaseProfile h3 {
    margin-bottom: 5px;
    font-size: 1.25rem;
}

#puaseProfile .reason-form-group {
    margin-bottom: 0 !important;
}

#puaseProfile input[type=checkbox],
#editDatesModal input[type=checkbox] {
    width: .9rem;
    height: .9rem;
    margin-right: .3rem;
}

#pauseProfile.disabled,
#deactivateProfile.disabled {
    opacity: 0.5;
    cursor: not-allowed;

}

.status-text {
    text-transform: capitalize;
}

/* ------- Home/search page ---------- */


/* ------- bm-profile page Start from here ---------- */
.step-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.check-icon {
    color: #fff;
}

.step-form-wrapper .form-header h3 {
    color: #000;
    font-size: 1.6rem;
}

.step-form-wrapper .steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;

}

.step-form-wrapper .steps .step {
    margin-right: 1rem;
    display: flex;
    align-items: center;
    margin-bottom: .3rem;
    background-color: #fff;
    border: 1px solid var(--color-border);
    width: 100%;
    padding: .5rem;
    border-radius: .3rem;
}

.step-form-wrapper .step .step-number {
    width: 2rem;
    height: 2rem;
    border-radius: .3rem;
    background-color: var(--color-step-background-inactive);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .4rem;
}

.step-form-wrapper .step.active .step-number {
    background-color: var(--color-primary);
    color: #fff;
}

.step-form-wrapper .step.active {
    background-color: var(--color-primary-light);
}

.step-content .text-start p {
    font-size: .9rem;
    color: var(--color-neutral-light);
}

.step-content .expandable-box {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.step-content .expandable-box.active .box-body {
    display: block;
}

.step-form-wrapper .form-body .step-content {
    display: none;
}

.step-form-wrapper .form-body .step-content.active {
    display: block;
}

.step-content .expandable-box .box-header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    cursor: pointer;
}

.step-content .expandable-box .box-header,
.step-content .expandable-box .box-body {
    padding: .6rem 1rem;
}

.step-content .expandable-box.active .box-header {
    background-color: #F2F6F9;
}

.step-content .expandable-box .box-header h4 {
    color: #000;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: .1rem;
}

.step-content h4 {
    font-size: 1.1rem;
}


.step-content .expandable-box .box-body {
    display: none;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.step-content .form-controls {
    max-width: 450px;
}

.underline {
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    margin: 10px 0 20px;
}

#no-results-message {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    margin-bottom: 25px;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.service-area-map {
    display: none;
}

.service-area-map .added-Keywords {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.service-area-map .tag-item {
    background: transparent;

}

.selection-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    margin-right: 15px;
    background-color: var(--color-input-background);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.selection-box:hover {
    background-color: #fff;
}

.selection-box.selected {
    border-color: #000;
    background-color: var(--color-primary-light);
}

.selection-box .icon {
    font-size: 20px;
    margin-right: 10px;
    color: var(--color-info-background);
}

.selection-box .text {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-info-background);
}

/*  */
.selections .tag-item {
    border-radius: .3rem;
    background-color: transparent;
    text-transform: capitalize;
}

#map-container {
    flex-grow: 1;
}

.selected-area {
    color: var(--color-link);
}

/* ------- bm-profile page Ending here ---------- */


/* Define the thunder-like effect animation */
@keyframes thunderEffect {
    0% {
        transform: translateX(-2px);
    }

    25% {
        transform: translateX(2px);
    }

    50% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}



/* ÷++++++++++++++++++++++++++++++++++++ */
@media (max-width: 415px) {

    .media-section .media-item img,
    .media-section .media-item video {
        width: 100%;
        height: 95px;
    }

}

@media (max-width: 1200px) {

    /* - masonry */
    .business-info-masonry {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 217px) {

    .gallery-container .gallery-item {
        flex: 0 0 31% !important;
    }

    .video-icon-overlay {
        font-size: 22px;
    }

    .img-cont {
        width: 100%;
        object-fit: contain;
    }

    #preview-prev,
    #preview-next {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

@media (min-width: 315px) {

    .gallery-container .gallery-item {
        flex: 0 0 32% !important;
    }

    .video-icon-overlay {
        font-size: 28px;
    }

    .img-cont {
        width: 100%;
        object-fit: contain;
    }

    #preview-prev,
    #preview-next {
        background-color: rgba(0, 0, 0, 0.3);
    }

}

@media (min-width: 576px) {

    /* tooltip */
    .toolTip .tooltiptext {
        width: 140px;
    }

    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .plaza .container,
    footer .container,
    section>.container,
    section.container,
    .banner .container,
    .services.container,
    .categories_details.container,
    .adverts.container,
    .profile_benefits,
    .profile_features {
        max-width: 100% !important;
        padding-inline: 30px !important;
    }

    #galleryModal .modal-title {
        font-size: 1.1rem;
    }

    #galleryModal .modal-header .btn-close {
        padding: 0;
        margin-left: 7px;
        margin-right: 4px;
    }

    #galleryModal .modal-xl {
        max-width: 1140px;
    }

    #mediaGalleryContent .gallery-media .col-lg-15 {
        width: 25% !important;

    }

    .custom-radio .radio-icon {
        height: 22px;
        width: 22px !important;
    }

    .media-gallery-container .gallery-media .media-item .media-container .image-clickable,
    .media-gallery-container .gallery-media .media-item .media-container .video-thumbnail {
        width: 100%;
        height: 95px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .media-section .upload-container,
    .media-section .media-item img,
    .media-section .media-item video {
        height: 115px;

    }

    #serviceSearchBar .searchContainer,
    #productSearchBar .searchContainer {
        display: block;
    }

    .search-icon {
        display: none;
    }



    .media-section .delete-icon {
        position: absolute;
        right: -5px;
        top: -5px;
        width: 20px;
        height: 20px;

        transition: .1s ease-in-out;
    }

    .media-section .delete-icon i {
        color: #fff;
        font-size: .75rem;
    }

    /* .container {
        padding: 0 18px;
    } */

    #confirm_modal .modal-dialog {
        /* display: block; */
        position: absolute;
        margin: 20px auto;
        left: 50%;
        top: 50%;
        padding: 30px;
        min-width: 500px;
        transform: translate(-50%, -50%);
        /* height: 100%; */
        margin: 0;
    }

    #confirm_modal .modal-content {
        width: 500px;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* ---  member-details-page --- */
    .memberDetails_tabs #newPwdeye {
        position: absolute;
        top: 10px;
        right: 165px;
    }

    /* ----category_details-page ---- */
    .categoryHero_section,
    .profile_benefits,
    .profile_offerings,
    .profile_features,
    .profile_steps {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* --- templates-page --- */
    .templates .domain_link {
        float: right;
        margin-right: 2rem;
    }


    /* ------ settings page ---- */
    .settings-container .business-section {
        padding: 1rem 2rem;
    }

    .settings-container .form-container {
        background-color: #fff;
        padding: 1.4rem 2rem;

    }

    /* Profile media gallery */
    .gallery-container .gallery-item {
        flex: 0 0 32.3% !important;
    }

    .img-cont {
        width: 70%;
        object-fit: contain;
    }

    .video-icon-overlay {
        font-size: 40px;
    }

    #preview-prev,
    #preview-next {
        background-color: #151515;
    }

    /* bm-profile */
    .step-form-wrapper .steps {
        display: flex;
        flex-direction: row;
        width: fit-content;
        flex-wrap: wrap;
    }

    .step-form-wrapper .steps .step {
        margin-right: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
        border: none;
        width: auto;
        padding: 0;
        border-radius: 0;
    }

    .step-form-wrapper .step.active {
        background-color: transparent;
    }


}

@media (min-width: 768px) {
    #business-tags-h3{
        display: none;
    }
    .business-cards-container .bb-1 {
        border-bottom: 1px solid var(--color-border);
    }
    .container-lg {
        padding-inline: 30px;
    }

    .business-cards-container {
        max-width: 1140px;
        margin: 0 auto;
    }

    section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .adverts {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .sign-up-container .adi-details {
        display: unset;
    }

    #galleryModal .modal-title {
        font-size: 1.3rem;
    }

    #galleryModal .gallery,
    #galleryModal .previews {
        height: 470px;
        overflow-y: auto;
    }

    #galleryModal .gallery-media {
        padding-bottom: 0px;
    }

    .media-gallery-container #selectedMediaPreviewContainer {
        position: unset;
        height: 470px;
        border: none;
        box-shadow: 0 0;
        position: unset;
        max-height: 100%;
        width: 100%;
        padding-left: 15px;
        border-left: 1px solid var(--color-primary-muted);

    }

    .media-gallery-container #selectedMediaPreviewContainer .btn-close {
        display: none;
    }

    .media-gallery-container .previews {
        display: block !important;
    }

    .media-gallery-container .gallery-media .media-item .media-container .image-clickable,
    .media-gallery-container .gallery-media .media-item .media-container .video-thumbnail {
        width: 100%;
        height: 80px;
        transition: transform 0.3s ease;
    }

    .media-gallery-container .previews .media-preview {
        margin-left: 0px;
        width: 90%;
    }

    .media-gallery-container .previews #selectedMediaPreviews img,
    .media-gallery-container .previews #selectedMediaPreviews video {
        height: 70px;
        width: 60%;
        border: 1px solid var(--color-input-border);

    }

    .media-gallery-container .uploaded-media-preview {
        height: fit-content;
        max-height: 480px;
    }

    .media-gallery-container .uploaded-media-preview .uploaded-media-item {
        width: 90%;
        margin-inline: auto;
    }

    #mediaGalleryContent .gallery-media .col-lg-15 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        border: 0;
        width: 20% !important;

    }

    .upload-container .file-upload-icon img {
        width: 100px;

    }

    .media-section .media-item img,
    .media-section .media-item video {
        width: 100%;
        height: 110px;
    }

    .bootstrap-select .dropdown-item {
        padding: .38rem 1.5rem;
        font-size: 1rem;
        border-radius: .3rem;
    }

    .btn-mobile-width {
        display: inline-block;
        width: auto;
        margin-bottom: 0;
    }

    .bootstrap-select {
        width: 100% !important;
    }

    /* ~~~~~~ member-profile ~~~~~~~~ */
    .business-cards-container #businessCardsHolder {
        flex-direction: row;
        gap: 10px;
    }

    .business-cards-container .profile-info .business-header {
        width: 60%;
    }

    .business-cards-container .profile-info .business-details {
        width: 40%;
    }

    #profileAboutHeading {
        display: block;
    }

    .opening-hours-table tr td:first-child {
        font-weight: bold;
        padding-right: 20px;
    }

    /* gallery-preview-page */
    .gallery .thumbs {
        height: auto;
        padding: 20px 0;
        margin-top: 8px;
        position: absolute;
        bottom: 80px;
    }

    .gallery .header {
        padding: 25px 0;
    }

    /* __ plaza-details-view-page __ */
    .product_carousel {
        width: 50%;
        margin-right: 10px;
        padding-top: 20px;
    }

    .product_features .feature {
        width: 100%;
        padding-right: 0px;
    }

    .location_map {
        width: 100%;
    }

    /* -------------- faq-page  ---------*/
    .accordionMenu {
        padding: 60px 20px;
    }

    /* -------------- transalations-page  ---------*/

    .translations form .primary-btn {
        margin-left: 5px;
        margin-right: -20px;
    }

    /* -------------- datatables  ---------*/
    .trackOrders_tbl table {
        width: 100% !important;
    }


    /* ------ landing page ---- */
    .categories .text-left {
        text-align: right;
    }

    /* Profile media gallery */
    .img-cont {
        width: 60%;
        object-fit: contain;
    }

    #preview-prev,
    #preview-next {
        background-color: rgba(21, 21, 21, 0.7);
    }

    #preview-prev:hover,
    #preview-next:hover {
        background-color: #2e2e2e;
    }

    .gallery-container .gallery-item {
        flex: 0 0 32% !important;
    }

    #preview-prev,
    #preview-next {
        background-color: #151515;
    }

    /* bm-profile */
    .step-content .expandable-box .box-header,
    .step-content .expandable-box .box-body {
        padding: .6rem 1.5rem;
    }

}

@media (min-width : 992px) {
    html {
        font-size: 18px;
    }

    .container-lg {
        padding-inline: 15px;
    }

    .plaza .container,
    footer .container,
    section>.container,
    section.container,
    .banner .container,
    .services.container,
    .categories_details.container,
    .adverts.container,
    .profile_features,
    .profile_steps .container,
    .profile_offerings .container,
    .profile_benefits,
    .categoryHero_section .container {
        max-width: 960px !important;
        padding-inline: 15px;
    }

    .dob-label {
        margin-top: 0;
    }

    .custom-radio {
        padding: 15px;
    }

    #galleryModal .modal-xl {
        max-width: 1140px;
    }

    .media-gallery-container .gallery-media .media-item .media-container .image-clickable,
    .media-gallery-container .gallery-media .media-item .media-container .video-thumbnail {
        width: 100%;
        height: 100px;
        transition: transform 0.3s ease;
    }

    .media-gallery-container .previews .media-preview {
        width: 90%;
    }

    .media-gallery-container .previews #selectedMediaPreviews img,
    .media-gallery-container .previews #selectedMediaPreviews video {
        height: 80px;
        width: 60%;
        border: 1px solid var(--color-input-border);

    }

    .media-gallery-container .gallery-media {
        margin-right: 0px;
    }

    .col-lg-15 {
        width: 20%;
        float: left;
    }

    .media-section .upload-container,
    .media-section .media-item img,
    .media-section .media-item video {
        height: 150px;
    }

    .media-section .upload-container {
        margin-bottom: 10px;
    }

    .media-section .upload-container .secondary-notes {
        max-width: 200px;
    }

    /* profile into */
    #column1 {
        width: 45% !important;
    }

    #column2 {
        width: 55% !important;
    }

    /* gallery-preview-page */
    .swiper {
        position: relative;
    }

    .swiper-button-next {
        position: absolute;
        top: 45%;
        right: 10px;

    }

    .swiper-button-prev {
        position: absolute;
        top: 45%;
        left: 10px;

    }

    .gallery {
        height: 100vh;
        padding-bottom: 50px;
    }

    .expanded_carousel {
        height: 600px;
    }


    .gallery .go-back {
        display: none;
    }

    .gallery .product_details {
        width: 100%;
        display: flex !important;
    }

    .gallery .header .details {
        padding-right: 40px;
    }

    /* __ plaza-details-view-page __ */
    .product_carousel {
        width: 50%;
        margin-right: 30px;
    }

    .product_features .feature {
        padding-right: 40px;
    }

    .mySwiper {
        height: auto;
    }

    /* __ category_details-page __ */
    .categoryHero_section img {
        width: 90%;
    }

    /* Profile media gallery */
    .gallery-container .gallery-item {
        flex: 0 0 32% !important;
    }

    .img-cont {
        width: 50%;
        object-fit: contain;
    }
}

@media (min-width : 1200px) {

    .plaza .container,
    footer .container,
    section>.container,
    section.container,
    .banner .container,
    .categories_details.container,
    .adverts.container,
    .services.container,
    .profile_features,
    .profile_steps .container,
    .profile_offerings .container,
    .profile_benefits,
    .categoryHero_section .container {
        max-width: 1140px !important;

    }

    .sign-up-form {
        padding: 40px 40px;
    }

    .sign-up-container .adi-details {
        padding-left: 60px;
    }

    .media-gallery-container .gallery-media .media-item .media-container img,
    .media-gallery-container .gallery-media .media-item .media-container video {
        width: 100%;
        height: 95px;
        transition: transform 0.3s ease;
    }

    .media-section .upload-container,
    .media-section .media-item img,
    .media-section .media-item video {
        height: 160px;
    }

    /* profile into */
    #column1 {
        width: 35% !important;
    }

    #column2 {
        width: 65% !important;
    }

    .business-info-masonry {
        --gap: .8em;
        --columns: 2;
        max-width: 60rem;
        margin: 0 auto;
        display: column;
        columns: var(--columns);
        gap: var(--gap);

    }

    .rating-section .average-rating {
        width: 25%;
    }

    .rating-section .rating-display {
        width: 50%;
    }

    .business-info-masonry .delivery-info .delivery-cost {
        font-weight: bold;
        display: inline;
    }

    /* __ plaza-details-view-page __ */
    .mySwiper2 {
        width: 100%;
    }

    .mySwiper2 {
        height: 350px;
    }

    /* Profile media gallery */
    .gallery-container .gallery-item {
        flex: 0 0 32.5% !important;
    }


    #preview-prev,
    #preview-next {
        background-color: rgba(21, 21, 21, 0.7);
    }

    #preview-prev:hover,
    #preview-next:hover {
        background-color: #2e2e2e;
    }

    .img-cont {
        width: 50%;
        object-fit: contain;
    }

}

@media (min-width : 1400px) {
   
    .plaza .container,
    footer .container,
    section>.container,
    section.container,
    .banner .container,
    .services.container,
    .categories_details.container,
    .adverts.container {
        max-width: 1320px !important;

    }
}

/* col-lg-15 */
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    width: 20%;
    float: left;
    border: 1px solid var(--color-primary-muted);
    border-collapse: separate;
    border-collapse: collapse;
}

#mediaGalleryContent .gallery-media .col-lg-15 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    border: 0;
    width: 33.3%;
}

@media (max-width: 992px) {
    .col-md-15 {
        width: 25%;
        float: left;
    }

    /* --- plaza-list-page */
    .filters_sidebar {
        width: 240px;
    }

    .search_results {
        width: calc(100% - 240px);
    }

    #products .item {
        width: 48.5%;
    }

    .service-head-boxx .img-event {
        height: 130px;
        cursor: pointer;
    }

    #overlay_compare .product_image {
        width: 100%;
        height: 70px;
    }


}

@media (max-width: 768px) {
    .col-md-15 {
        width: 33%;
        float: left;
    }

    /* --- plaza-list-page --- */
    .overlay__ {
        background-color: #00000092;
        position: fixed;
        /* Fixed position */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;

    }

    .filters_sidebar {
        position: fixed;
        top: 0% !important;
        left: -100%;
        margin-right: -50%;
        /* transform: translate(-50%, -100%); */
        width: 70%;
        height: 100vh;
        padding-inline: 50px;
        z-index: 11111;
    }

    .search_results {
        position: relative;
        width: 100%;
    }

    #products .item {
        width: 32%;
    }

    .search_results .filter_btn {
        display: block;
    }

    .showSidebar {

        position: absolute;
        left: 0;
        top: 0;
    }


    .hide_sidebar {
        top: -100%;
    }

    .close_sidebar {
        display: block;
        position: absolute;
        top: 0;
        right: 0%;
        background-color: transparent;
        color: #000;
        z-index: 1111111;
        border: none;
        font-size: 1.4rem;
    }

    .overlay_active {
        display: block;
        position: fixed;
    }

    .service-head-boxx .img-event {
        height: 120px;
        cursor: pointer;
    }

    #overlay_compare .product_thumb {
        width: 48%;
    }

    #overlay_compare .product_image {
        width: 100%;
        height: 90px;
    }

    #overlay_compare .product_thumb .delete_btn {
        position: absolute;
        right: -12px;
        top: -13px;

    }

    #overlay_compare .product_meta .title {
        font-size: .9rem;
    }


}

@media (max-width: 567px) {
    .col-md-15 {
        width: 50%;
        float: left;
    }

    /* ---  plaza-list-page --- */
    .gray-bg1 {
        padding-inline: 30px;
    }

    #products {
        justify-content: space-between;
    }

    #products .item {
        width: 48.5%;
    }

    .filters_sidebar {
        width: 85%;
        padding-inline: 25px;
        padding-top: 30px;
    }

    .service-head-boxx {
        width: 100%;
        margin: 0 0;
    }

    .service-head-boxx .img-event {
        height: 180px;
        cursor: pointer;
    }

    .service-head-box .thumbnail {
        height: 110px;
        width: 45%;
    }

    .service-head-box .service_details_bottom {
        padding-bottom: 10px;
        padding-top: 5px;
    }

    .service-head-box .service_details_bottom .price span {
        font-size: 1rem;
        padding-right: 2px;

    }

    .service-head-box .service_details_bottom .service_details_bottom {
        display: flex;
        flex-direction: column !important;
    }

    .service-head-box .service_details {
        padding-inline: 5px;
        width: 55%;
    }

    .service-head-box .service_details p {
        font-size: 15px;
    }

    .service-head-box .service_details_bottom .price {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    .service-head-box .service_details_bottom .links a {
        display: inline-block;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: #f3f3f3;
    }

    .gray-bg1 {
        padding: 0 15px;
    }

    #overlay_compare .products {
        width: 90%;
    }

    #overlay_compare .product_thumb .delete_btn {
        position: absolute;
        right: 0px;
        top: 0px;

    }


    .service-head-boxx .img-event {
        height: 120px;
        cursor: pointer;
    }

    .item.list-group-item .img-event {
        float: left;
        width: 148px !important;
        height: 110px !important;

    }

    .item.list-group-item .caption {
        float: left;
        width: calc(100% - 148px);
        margin: 0;
    }

    .service-head-boxx .service_details {
        padding: 10px 5px 0 10px;
        margin: 0 0px;
        margin-inline: 0;
    }

    .service-head-boxx .service_details p {
        margin-top: 0;
    }

    .service-head-boxx .service_details .price {
        margin-bottom: 0;
    }

    .service-head-boxx .service_details_bottom .price span {
        font-size: 1.1rem;
    }

    .service-head-boxx .service_details h4 {
        margin-top: 0px;
        margin-bottom: 2px;
    }

    .item.list-group-item h4 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .item.list-group-item .service_details_bottom {
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        padding-top: 5px;
    }

    .service-head-boxx .icon .plaza-btn i {
        margin-left: -5px;
    }

}

/* ----------- delete header responsive --------- */
@media (max-width:1200px) {
    .iconmenubar li {
        width: 105px !important;
        padding: 10px;
    }
}

@media (max-width:767px) {
    header .header-menu ul {
        height: 100%;
        overflow-x: scroll;
        margin: 10px 0;
    }

    #sidebarMenu {
        width: 310px;

        height: 90%;
        padding-bottom: 15px;
    }

    li.dropdown .dropdown-menu a {
        padding: 10px 0;
    }

    .fr-hero-details-products img {
        max-width: 100%;
    }

    .filters .nice-select {
        width: 170px !important;
    }

    .fr3-details .fr3-job-detail {
        display: block;
    }

    .adi-go-data .register-holder {
        margin: 10px auto;
    }

    .services-filter-2 h4 {
        font-size: 14px;
    }

    .result-box span.result-number {

        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        /*z-index: 2;*/
    }

    .fr-c-details {
        margin-top: 30px;
    }

    .fr3-job-detail .fr3-job-img.plaza-listing {
        float: none;
    }

    .fr-expert .fr-expert-content {
        float: none;
    }

    .fr3-job-detail .fr3-job-img {
        margin-right: 0;
    }

    .fr3-job-detail .fr3-job-img img {
        max-width: 100%;
    }

    .data-table-holder h4 {
        text-align: center;
    }

    .map-main-tabs ul.nav {
        display: block;
    }

    .radius-search .nice-select {
        width: auto;
    }

    .counter-area .counter-holder .counter-box:first-child:after {
        content: '';
        position: absolute;
        display: none;
    }

    .btn-group-spacing {
        display: block;
    }

    .btn-group-spacing button {
        margin: 0;
        margin-bottom: 8px;
    }

    .account-section ul.progress-nav.progress-function {
        padding-left: 0;
    }

    .inner-header {
        background: var(--color-primary-light);
        padding-bottom: 30px;
    }

    .iti.iti--allow-dropdown {
        margin-bottom: 10px !important;
    }

    .inner-header .breadcrumb-section h3 {
        padding-top: 15px;
        font-size: 28px;
    }

    header .mobile-menu {
        display: flex;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: 0.5px;
    }

    .iconmenubar {
        display: none;
    }

    header .header-logo {
        padding-left: 0px;
        padding-right: 0px;
    }


    header .header-menu .ul-base li {
        display: none;
    }

    header .header-menu .ul-base li.mob-show,
    header .header-menu .ul-base .sidebarMenuInner li {
        display: block;
    }

    header .header-inner {
        padding: 0;
    }



    .search-section h3 {
        font-size: 30px;
    }

    .search-section h5 {
        font-size: 20px;
    }

    .search-container {
        padding-top: 10px;
    }


    .imagepart {
        margin-top: 20px;
    }

    .second-section {
        padding: 40px 0;
    }

    .second-section .row {
        padding: 20px;
    }

    .second-section h4 {
        text-align: center;
        padding-bottom: 15px;
    }

    .pro-btn {
        text-align: center;
    }

    .ocean-section {
        padding: 40px 0;
        margin-bottom: 0;
    }

    .ocean-section h3 {
        font-size: 24px;
    }

    .ocean-section p {
        padding-bottom: 0;
    }

    .textpart2 h5 {
        font-size: 24px;
    }

    .categories-section {
        padding: 20px;
        position: relative;
        margin: 0;
    }

    .infobox ul {
        padding-left: 20px;
    }

    .infobox {
        padding: 10px 0;
    }

    .cat-btn {
        text-align: left;
    }

    .fourth-section {
        padding: 40px 0;
    }

    .fourth-section {
        padding: 40px 0;
    }

    .fourth-section .row {
        padding: 20px;
    }

    .fourth-section h4 {
        text-align: center;
        padding-bottom: 15px;
    }

    .footer-top-part {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .logoimage img {
        width: 80%;
        padding-bottom: 20px;
    }

    .footermenu {
        padding-left: 0;
        display: block;
        float: none;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    .infobox ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    .footermenu li {
        padding-left: 0;

    }

    .footer-bottom-part {
        padding: 10px 0;
    }

    .footer-bottom-part p {
        margin-bottom: 0;
    }

    .d-none-mobile {
        display: none;
    }

    .d-none-desktop {
        display: block;
    }

}


@media (min-width:768px) and (max-width:1024px) {
    #sidebarMenu {
        width: 330px;
        overflow: scroll;
        height: 94%;
        padding-bottom: 15px;
    }

    header .header-menu ul {
        height: 100%;
    }

    .fr-hero-details-information h3 {
        font-size: 20px;
    }

    .adi-go-data .register-holder h4 {
        font-size: 18px;
    }

    .adi-go-data .btn.btn-success {
        margin-bottom: 10px;
    }

    header .mobile-menu {
        display: flex;
    }

    .iconmenubar {
        display: none;
    }

    header .header-inner {
        padding: 0;
    }



    header .header-logo img {
        max-height: 30px;
    }

    .search-section h3 {
        font-size: 40px;
    }

    .text-part {
        padding-top: 40px;
    }

    .first-section {
        margin-top: 0;
    }

    .first-section .row {
        align-items: center;
    }

    .ocean-section h3 {
        font-size: 30px;
    }

    .ocean-section p {
        padding-bottom: 20px;
    }

    .categories-section {
        position: relative;
        margin: 0;
    }

    .textpart2 p {
        font-size: 16px;
        padding-bottom: 0;
    }

    .infobox {
        padding: 10px 0;
    }

    .ocean-section {
        padding: 40px 0;
        margin-bottom: 0;
    }



    .footermenu li {
        padding-left: 10px;
    }

    .footermenu {
        padding: 0;
    }

    .footer-top-part {
        padding: 40px 0 20px;
    }

    .footer-bottom-part {
        padding: 5px 0;
    }

    .footer-bottom-part p {
        margin-bottom: 0;
    }
}

@media (min-width:991px) and (max-width:1024px) {
    header .header-menu ul {
        float: right;
    }
}


@media(min-width: 767px) {
    .progress-nav li {
        height: 7px
    }

    .progress-nav li:before {
        width: 25px;
        height: 25px;
        top: -9px;
        background-size: 60%;
        font-size: 15px
    }

    .progress-nav li.active:before {
        width: 28px;
        height: 28px;
        border-width: 8px;
        top: -11px
    }

    .progress-nav li.active~li:before {
        width: 22px;
        height: 22px;
        top: -7px
    }

    .progress-nav li a {
        font-size: 20px;
        bottom: calc(100% + 23px)
    }
}

@media (min-width: 992px) {
    .data-table-holder table.dataTable {
        display: table;
    }

}

/*  */
@media (max-width: 1200px) {
    .header-menu {
        width: fit-content !important;
        display: flex;
        justify-content: center;
    }

}

@media (max-width:1024px) {
    header .header-menu .ul-base li {
        display: none;
    }

    header .nav-btn.nav-slider {
        float: right;
        margin-top: 22px;
        text-align: end;
    }

    /* .inner-header{
		height: 200px;
	} */
    .header-menu {
        display: none;
    }
}

@media (max-width:567px) {
    .inner-header {
        height: fit-content;
    }
}