body {
    font-family: "Red Hat Text" !important;
    font-size: 14px;
    background: #f5f8fa !important;
}

.d-block {
    display: block;
}

.btn {
    font-size: 13px !important;
}

.f-right {
    float: right !important;
}

.fd-col {
    flex-direction: column;
}

.f-wrap {
    flex-wrap: wrap;
}

.bg-trans {
    background: transparent;
}

/* .bg-black {
    background: #000;
} */

.bg-lightblue {
    background: #d3e9f7 !important;
}

.of-contain {
    object-fit: contain;
}

.of-y-auto {
    overflow-y: auto !important;
}

.of-y-auto::-webkit-scrollbar {
    color: #0d1a92ab;
    border-radius: 40px;
    height: 5px;
    width: 2px;
    display: none;
}

.of-y-auto::-webkit-scrollbar-track {
    background-color: #0d1a923b;
    border-radius: 40px;
}

.of-y-auto::-webkit-scrollbar-thumb {
    background-color: #0d1a9233;
    border-radius: 50px;
}

.of-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #0d1a92;
    width: 3px;
}

.of-y-auto0 {
    overflow-y: auto !important;
    scrollbar-width: 3px;
    scrollbar-color: #ffffff75 rgb(83, 83, 83) 75;
}

.of-y-auto0::-webkit-scrollbar {
    color: #0d1a92ab;
    border-radius: 40px;
    height: 5px;
    width: 4px;
}

.of-y-auto0::-webkit-scrollbar-track {
    border-radius: 40px;
}

.of-y-auto0::-webkit-scrollbar-thumb {
    background-color: #e1e1e1 !important;
    border-radius: 50px;
}

.of-y-auto0::-webkit-scrollbar-thumb:hover {
    background-color: #acacac !important;
    width: 3px;
}

.br-1_54rem {
    border-radius: 1.54rem;
}

.br-1_625rem {
    border-radius: 1.625rem;
}

.br-2rem {
    border-radius: 2rem;
}

.br-10 {
    border-radius: 10px;
}

.br-30 {
    border-radius: 30px;
}

.br-50p {
    border-radius: 50%;
}

.wh-in {
    width: inherit !important;

    height: inherit !important;
}

.w-in {
    width: inherit !important;
}

.w-10 {
    width: 10% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-49 {
    width: 49% !important;
}

.w-60 {
    width: 60% !important;
}

.w-95 {
    width: 95% !important;
}

.w-90 {
    width: 90% !important;
}

.w-99 {
    width: 99% !important;
}

.w-100 {
    width: 100% !important;
}

.h-in {
    height: inherit !important;
}

.w-auto {
    width: 100% !important;
}

.h-auto {
    height: auto !important;
}

.h-3 {
    height: 3% !important;
}

.h-4 {
    height: 4% !important;
}

.h-5 {
    height: 5% !important;
}

.h-7 {
    height: 7% !important;
}

.h-8 {
    height: 8% !important;
}

.h-10 {
    height: 10% !important;
}

.h-12 {
    height: 12% !important;
}

.h-15 {
    height: 15% !important;
}

.h-20 {
    height: 20% !important;
}

.h-25 {
    height: 25% !important;
}

.h-30 {
    height: 30% !important;
}

.h-35 {
    height: 35% !important;
}

.h-40 {
    height: 40% !important;
}

.h-45 {
    height: 45% !important;
}

.h-49 {
    height: 49% !important;
}

.h-50 {
    height: 50% !important;
}

.h-55 {
    height: 55% !important;
}

.h-60 {
    height: 60% !important;
}

.h-65 {
    height: 65% !important;
}

.h-70 {
    height: 70% !important;
}

.h-73 {
    height: 73% !important;
}

.h-75 {
    height: 75% !important;
}

.h-80 {
    height: 80% !important;
}

.h-83 {
    height: 83% !important;
}

.h-85 {
    height: 85% !important;
}

.h-88 {
    height: 88% !important;
}

.h-89 {
    height: 89% !important;
}

.h-90 {
    height: 90% !important;
}

.h-91 {
    height: 91% !important;
}

.h-92 {
    height: 92% !important;
}

.h-93 {
    height: 93% !important;
}

.h-94 {
    height: 94% !important;
}

.h-95 {
    height: 95% !important;
}

.h-98 {
    height: 98% !important;
}

.h-99 {
    height: 99% !important;
}

.w-95p {
    width: 95% !important;
}

.f-14 {
    font-size: 14px;
}

.p-3p {
    /* padding: 3%; */
    padding: 1%;
}

.pt-5p {
    padding-top: 5%;
}

.pt-2p {
    padding-top: 2%;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-5 {
    padding-right: 5px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-5 {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.px-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.px-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-6 {
    margin-top: 6px !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-25 {
    margin-top: 25px !important;
}

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

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

.ml-5 {
    margin-left: 5px;
}

.m-0 {
    margin: 0 !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
}

.w-fit {
    width: fit-content !important;
}

.w-web {
    width: -webkit-fill-available;
}

.margin-bottom {
    margin-bottom: 10px;
}

.sweet-alert p {
    font-size: 12px !important;
}

.ai-end {
    align-items: end !important;
}

.ai-flex-start {
    align-items: flex-start !important;
}

.jc-start {
    display: flex !important;
    justify-content: start !important;
}

.jc-cent {
    display: flex !important;
    justify-content: center !important;
}

.jc-end {
    display: flex;
    justify-content: end !important;
}

.jc-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0;
}

.jc-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jc-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-f {
    float: right !important;
    display: flex;
    align-items: center;
}

.message-panel .btn {
    font-size: 13px !important;
    padding: 12px 24px;
}

.normal-content p {
    font-size: 10px !important;
    margin-bottom: 5px;
    /* display: flex; */
}

.normal-content .fa {
    font-size: 16px !important;
}

.message-content .text-justify {
    font-size: 14px !important;
}

.left-side-slide p {
    font-size: 12px !important;
}

#adPopUp form {
    margin: 0 !important;
}

/* .ui-background ul.nav.nav-tabs.un-sidebar-tab.un-member-list {
    margin-right: 10px;
} */

.navbar-collapse ul li a.last-login {
    font-size: 14px;
    font-weight: 500;
    color: #0d1a92 !important;
    padding: 10px !important;
}

.navbar-collapse ul li a.last-login p {
    font-size: 12px;
    font-weight: 400;
    color: #000;
}

.row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.navbar-brand {
    padding: 14px 10px;
}

.f-12 {
    font-size: 12px;
}

.icon-group-right {
    position: relative;
}

.header .dropdown {
    position: relative;
}

.menu-items {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    min-width: 58px;
    z-index: 9999;
}

.menu-items a {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: #333;
}

.main-chat-div {
    height: 100% !important;
    display: flex;
    justify-content: center;
}

.un-massage-header .right-content {
    padding: 0px 5px !important;
}

.un-inner-content {
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.un-side-col {
    height: 100%;
}

.msg-not-found p {
    font-size: 14px !important;
}

.ui-block.row.chat-section {
    background: #fff;
}

.pr {
    padding-right: 5px !important;
}

.min-ads {
    background: #0d1a92;
    display: flex;
    align-items: center;
    /* overflow-x: scroll;
    overflow-y: hidden; */
    padding: 0 1rem;
    height: 15% !important;
}

.story-container::-webkit-scrollbar {
    color: #ffffff4d;
    border-radius: 40px;
    width: 5px;
    height: 4px;
}

.story-container::-webkit-scrollbar-track {
    background-color: #ffffff4d;
}

.story-container::-webkit-scrollbar-thumb {
    background-color: #ffffff80;
}

.story-container::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff;
}

.loadMoreAdvertsRes {
    border-radius: 50%;
    padding: 20px 10px !important;
    background: #fff !important;
    color: #0d1a92 !important;
}

.block-img {
    margin-right: 10px;
}

.logo-img {
    height: 35px;
    width: 35px;
    border-radius: 50px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #0d1a92;
}

.favorite-list-items {
    height: 72% !important;
}

.messenger-desktop-img {
    width: 100%;
    cursor: pointer;
    height: 15rem;
    border-radius: 15px;
    object-fit: contain;
    overflow: hidden;
}

.story-container {
    display: flex;
    padding: 0.5rem 0 0;
    overflow-x: auto;
}

.story-sub-container {
    margin-left: 10px;
}

.story-circle {
    cursor: pointer;
    justify-content: center;
    width: 10%;
}

.story-circle span {
    text-align: center;
}

.story-circle-img {
    height: 45px;
    border-radius: 50%;
    background: #0d1a92;
    object-fit: cover;
    padding: 0 11px !important;
}

.story-sub-container .advert-content.story-circle-img {
    background: #cdcdcd;
}

.story-sub-container .advert-content.story-circle-img p {
    font-size: 18px !important;
    font-family: "Red Hat Text" !important;
}

.story-circle span {
    color: #fff;
}

#story-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
}

.popup-image {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.ui-background {
    background: #0d1a92;
    border-radius: 45px;
    height: 100%;
}

.tab-content-bg {
    background: #fff;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 0;
    height: 100%;
}

.nav-css {
    margin: 0px 5px;
    height: 100% !important;
}

.ui-side-tab {
    border-radius: 30px;
}

.ui-side-tab ul.nav.nav-pills li {
    display: flex;
    justify-content: center;
}

.ui-background .ui-side-tab ul.nav.nav-pills li a {
    font-size: 12px !important;
    text-transform: capitalize;
    font-family: "Red Hat Text";
    font-weight: 400;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    width: 98%;
    line-height: 16px;
}

.ui-background .ui-side-tab ul.nav.nav-pills li a:hover {
    color: #fff !important;
}

.ui-side-tab ul.nav.nav-pills li.active a:hover {
    color: #0d1a92 !important;
}

.ui-background .ui-side-tab ul li.active a {
    color: #0d1a92 !important;
    background: #fff !important;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.ui-background .ui-side-tab ul li.active a:hover {
    color: #0d1a92 !important;
}

.ui-side-tab ul li a i {
    margin-bottom: 1rem;
}

.un-chat-col {
    padding: 0;
}

.chat-margin {
    margin-top: 20px;
}

.search-chat-users {
    background: #f9fafe;
}

.desktop-user-list ul.nav.nav-tabs.un-sidebar-tab li a {
    padding: 4px;
    border-radius: 5px !important;
}

.chat-middle-one {
    height: 100% !important;
}

.un-massage-header .un-image-text.d-flex {
    padding: 10px !important;
}

.typing-area-row {
    padding-bottom: 10px;
}

.left-text-advert {
    position: absolute;
    bottom: 2.3%;
    right: 49.5%;
}

.right-text-advert {
    position: absolute;
    bottom: -2.1%;
    left: 50%;
}

.emojionearea .emojionearea-editor {
    overflow: hidden !important;
}

/*
a.btn-attach i:before {
    background: #fff !important;
    color: #0d1a92 !important;
    font-weight: 600 !important;
    transform: rotate(360deg) !important;
}
*/

.img-div {
    /* margin: 10px 0px 0px 0px; */
    width: 100%;
    cursor: pointer;
    margin: 10px 0px;
    /* border-radius: 1.5rem; */
    border-radius: 20px;
    padding-bottom: 10px;
    /* box-shadow: 0px 0px 10px -2px #ccd0d2; */
    box-shadow: 1px 1px 2px 4px #ccd0d2;
}

.ads-info {
    padding: 10px 0px 0px;
    display: flex;
    align-items: center;
}

.ads-info-text {
    font-size: 12px;
    font-weight: 500 !important;
    line-height: 2rem;
    width: 74%;
    flex-direction: column;
    align-items: flex-start !important;
}

.ads-info-text a {
    color: #000;
}

.in-ads-info-text {
    font-size: 16px;
    font-weight: 500 !important;
    line-height: 2rem;
    width: 100%;
    flex-direction: column;
    align-items: flex-start !important;
}

.ads-icon-section {
    display: flex;
    align-items: center;
}

.ad-img-div {
    position: relative;
    border-radius: 2rem;
    /* border: 1px solid black; */
}

.border-blue {
    border: 1px solid #0d1a92;
}

.ad-img-div i.fa.fa-play {
    background: #000000b3 !important;
}

.ad-img-div i.fa.fa-play::before {
    color: #fff !important;
    font-size: 18px !important;
    position: absolute;
    left: 14px;
}

.ad-img-div .advert-video-play {
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;
    color: white !important;
    font-size: 24px !important;
    z-index: 1 !important;
}

.ads-icon {
    font-weight: 100 !important;
}

.advert-panel-body p {
    font-size: 12px !important;
    line-height: 1.3;
}

.advert-panel-body p span {
    font-size: 12px;
    line-height: 1.3;
}

.ads-info {
    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after,
    [class*=" flaticon-"]:after {
        margin-left: 0 !important;
    }
}

/* .icon-group-right {
    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after,
    [class*=" flaticon-"]:after {
        margin-left: 0 !important;
    }
} */

.modal-body .row .pop_up_icon {
    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after,
    [class*=" flaticon-"]:after {
        margin-left: 5px !important;
    }
}

.pop_up_icon {
    margin: 0 10px 0 0;
    font-size: 16px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.adPopUp .modal-dialog {
    width: 75% !important;
}

.adPopUp .modal-dialog .modal-content {
    border-radius: 15px !important;
    height: 100% !important;
    border: 2px solid #0d1a92;
    background: #d3e9f7;
}

.adPopUp .modal-dialog .modal-content .row {
    margin: 0 !important;
}

/*
.adPopUp .modal-body {
    padding: 0 15px !important;
}
*/

a:hover,
a:focus {
    /* Comment for black color on focus set for all */
    /* color: #000 !important; */
}

.fa-2x {
    font-size: 2rem !important;
}

.post-small-text {
    margin-bottom: 10px !important;
    line-height: 2rem;
    font-weight: 600 !important;
}

.post-magic-footer {
    justify-content: end;
}

.post_icon i::before {
    font-size: 14px !important;
    position: absolute !important;
    top: 25% !important;
    right: 6% !important;
}

.post_icon::after {
    height: 65% !important;
    position: absolute !important;
    right: 35px !important;
    top: 6px !important;
}

#postmagic-mail .content-btn {
    padding: 10px 60px 10px 20px;
}

.tab-content.postmagic {
    padding: 10px 9px;
}

.un-inner-block {
    margin-bottom: 15px;
}

.small-margin {
    margin: 12px 0 !important;
}

.magic-margin {
    margin-top: 22px;
    height: auto !important;
}

.popUp-img {
    width: 99.9%;
    object-fit: contain;
    border-radius: 10px;
}

.magic-section-h {
    height: 95% !important;
}

.magic-section-align {
    justify-content: center;
    align-items: center;
}

.magic-p-h {
    height: 5%;
}

.magic-option-h {
    height: 92%;
    flex-direction: column;
}

.tab-content.postmagic .side-form-footer .btn-form-sidebar {
    padding: 7px 15px;
}

.postmagic .tab-dropdown > :nth-child(3) {
    width: 100% !important;
}

/* Trending*/

/*
.ads-in-textarea {
    background: #d3e9f7;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
*/

.div-second .all-messages::-webkit-scrollbar {
    width: 4px;
    height: 2px;
    border-radius: 10px;
}

.div-second .all-messages::-webkit-scrollbar-thumb {
    width: 4px;
    border-radius: 10px;
    background-color: #0d1a92;
}

.div-second .all-messages::-webkit-scrollbar-track {
    width: 4px;
    border-radius: 10px;
    background-color: #1f2c9cc5;
}

.font-small {
    font-size: 10px !important;
}

.sign-up-in-text{
    margin-left: 5px;
    font-size: 13px !important;
}

.un-inner-content .font-small {
    font-size: 12px !important;
}

.h-max {
    height: max-content;
}

.fw-900 {
    font-weight: 900 !important;
}

.w-25 {
    width: 25%;
}

.w-74 {
    width: 74%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
}

.mx-0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.mx-1 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

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

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.advert-text {
    font-size: 14px !important;
}

.post-ad-btn {
    background: #d3e9f7 !important;
}

.search-result-msg-band-footer {
    padding: 0;
}

.post-ad-btn {
    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after,
    [class*=" flaticon-"]:after {
        font-size: 14px !important;
        margin-left: 0 !important;
    }
}

/* .chat-middle-one,
#user-list-items {
    scrollbar-width: 3px;
    scrollbar-color: #ffffff75 #aeb6ff42;
} */

.thumbnail {
    box-shadow: none !important;
    margin-top: 0px;
    margin-bottom: 0px !important;
}

#thumbnail {
    padding-left: 0;
    padding-bottom: 0.3rem;
    display: flex;
    align-items: center;
    list-style: none !important;
    width: auto !important;
    height: 100% !important;
    overflow-x: auto;
    margin-bottom: 0 !important;
    scrollbar-width: 3px;
    scrollbar-color: #ffffff75 rgb(83, 83, 83) 75;
}

#thumbnail::-webkit-scrollbar {
    color: #0d1a92ab;
    border-radius: 40px;
    height: 5px;
    width: 4px;
}

#thumbnail::-webkit-scrollbar-track {
    border-radius: 40px;
}

#thumbnail::-webkit-scrollbar-thumb {
    background-color: #e1e1e1 !important;
    border-radius: 50px;
}

#thumbnail::-webkit-scrollbar-thumb:hover {
    background-color: #acacac !important;
    width: 3px;
}

#thumbnail li.active {
    border: 2px solid #0d1a92;
}

.trend_img {
    height: 100%;
    width: 90px;
    margin-right: 5px;
    margin-left: 5px;
    object-fit: contain !important;
}

/* .un-community {
    margin-left: auto;
    margin-right: auto;
    padding-top: 6px;
    padding-bottom: 6px;
} */

.community-h {
    background-color: #fff !important;
    border-radius: 2rem !important;
    border: 0 !important;
}

.community-section {
    height: 80% !important;
    padding: 1rem;
}

@media (max-width: 1600px) {
    .community-section {
        height: 75% !important;
    }
}

.row-pad-0 {
    border-radius: 1.625rem;
    border: 1px solid #ababab80;
}

.post-ad-w {
    width: 25% !important;
}

.list-ad-w {
    width: 74% !important;
    background: #f5f8fa;
}

.div2-h {
    height: 100%;
}

.un-content {
    height: 100%;
}

.advert_text_height p {
    margin: 0 !important;
}

.advert_text_height span {
    font-size: 14px !important;
}

.c-chat {
    background: #d3e9f7 !important;
    border-top-left-radius: 1.6rem;
    border-top-right-radius: 1.6rem;
    padding: 10px;
    height: 7%;
    display: flex;
    align-items: center;
}

.c-border {
    border: 1px solid #0d1a92 !important;
}

.trend-ad-img {
    width: 95% !important;
    height: -webkit-fill-available;
    border-radius: 15px;
}

.sm-btn-parent a:hover {
    color: #ffffff !important;
}

.SM-btn {
    background: #fff !important;
    color: #0d1a92 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 2% 4% !important;
    border-radius: 10px !important;
}

.community-section-2 .SM-btn {
    background: #0d1a92 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 1.5% 4% !important;
    border-radius: 20px !important;
}

/* Target only the specific <a> tag inside .loadmoreSection */
/* .loadmoreSection .loader-class a.loadMore {
    padding: 2% 5% !important;
    font-size: 12px !important;
    background: #0d1a92 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
} */

.community-section-2 .message-panel {
    height: 93%;
}

.community-section-2 .message-panel #PostPanelBody.h-10 {
    height: 10%;
}

@media (max-width: 991px) {
    .community-section-2 .message-panel #PostPanelBody.h-20 {
        height: 25% !important;
    }
}

.community-section-2 .message-panel .allmessagesHeight.h-65 {
    height: 65%;
}

.b-radius {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

.trend-ad-text {
    height: 100%;
    width: 100%;
    border-radius: 1.625rem;
    background: #fff;
}

.modal-body .trend-ad-div {
    height: 100%;
    background: #000;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.panel-body .trend-ad-div {
    height: 100%;
    background: #000;
}

.trend-ad-div i.fa.fa-play {
    background: #fff !important;
}

.trend-ad-div .advert-video-play {
    position: absolute !important;
    top: 40px !important;
    left: 40px !important;
    color: white !important;
    font-size: 24px !important;
    z-index: 1 !important;
    margin: 0 !important;
}

.trend-ad-div i.fa.fa-play::before {
    color: #000 !important;
    font-size: 18px !important;
    position: absolute;
    left: 14px;
}

.community-advert-data .panel-heading {
    height: 20% !important;
}

.all-messages .un-community-all .sender-info .normal-content.p-block {
    padding: 5px 15px 0;
}

#confirm-modal .modal-dialog .modal-content .modal-header h5 {
    font-size: 18px !important;
}

#confirm-modal .modal-dialog .modal-content .modal-body p {
    font-size: 14px !important;
}

.trending-height .customSlider ul#customSlider li {
    overflow-x: hidden !important;
}

.custom-arrow-height {
    height: 3% !important;
}

.business-like-comment-section {
    height: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: start;
}

.view-edit-delete-section {
    height: 50% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: start;
}

/* Footer*/

.custom-footer {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25) !important;
}

/* extra*/

.img-div .advert-text {
    font-weight: 400;
}

.un-community .icon-group-right a i:before {
    margin: 0 10px !important;
}

.un-chat.h-100 .signupNote img {
    width: 90%;
}

.fa-thumbs-o-up:before {
    margin-left: 10px;
}

.fa-thumbs-up:before {
    margin-left: 10px;
}

.fa-comment-o:before {
    margin-left: 10px;
}

.ads-info .fa-thumbs-o-up:before {
    margin-left: 0px;
}

.ads-info .fa-thumbs-up:before {
    margin-left: 0px;
}

.showMoreAdvert#showMoreAdvert {
    padding: 10px 5px !important;
    border-radius: 10px;
}

.content-right {
    float: right !important;
}

.custom-header .nav.navbar-nav > li > a.active {
    font-weight: 600 !important;
}

.signupNote p {
    font-size: 14px !important;
    line-height: 1.5;
}

.comm-text textarea {
    resize: none;
}

.col-lg-9.d-flex a {
    display: flex;
}

.message-text textarea ::placeholder {
    color: #000 !important;
}

.ui-sidebar-profile-icon,
.un-image-text.d-flex .un-member-icon,
.un-chat-icon,
.msg-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

.un-massage-header i:before,
.bg-icon i:before {
    color: #0d1a92;
    font-size: 16px;
}

#select-gif-modal h3 {
    margin: 0 11px !important;
}

/* Outer container for enabling scrolling and positioning arrows */

.swiper-container {
    display: flex;
    align-items: center;
    overflow-x: auto;
    margin-bottom: 0;
}

/* Swiper arrows styles */

.swiper-arrows {
    width: 30px;
    height: 30px;
    background-color: #000;
    cursor: pointer;
}

.swiper-arrow-prev {
    margin-right: 10px;
}

.swiper-arrow-next {
    margin-left: 10px;
}

#adPopUp .col-md-5 .of-y-auto::-webkit-scrollbar,
#adPopUp .col-md-12 .of-y-auto::-webkit-scrollbar {
    display: block;
}

#PostPanelBody .of-y-auto::-webkit-scrollbar {
    display: block;
    width: 3px;
}

#PostPanelBody .of-y-auto::-webkit-scrollbar-track {
    background-color: #e1e1e1 !important;
    border-radius: 40px;
}

#PostPanelBody .of-y-auto::-webkit-scrollbar-thumb {
    background-color: #acacac !important;
    border-radius: 50px;
}

#PostPanelBody .of-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #949292 !important;
    width: 3px;
}

/*Register Page*/

.signup .small-container {
    height: 100%;
}

.sign-up .custom-form .bottom-footer .content-btn {
    margin-bottom: 0 !important;
}

/* #register11 {
    margin-top: 6px;
} */

/* #login11 {
    margin-top: 6px;
    margin-bottom: 6px;
} */

.custom-heading p {
    font-size: 14px !important;
}

.custom-check label {
    font-size: 12px;
    line-height: 1.2;
}

.custom-form input ~ .form-control-placeholder {
    font-size: 14px !important;
}

.sign-up.section-spacer .profile-section i {
    top: 80px;
    left: 85px;
}

#profile_img-error {
    position: unset;
}

a.text-blue.font-medium.resend-activation-link.margin-content.font-medium {
    margin: 10px 0 10px 10px;
}

.other-content p {
    margin-top: 11px;
}

.modal-body .modal-ad {
    height: 100%;
}

/*About Us*/

.about-content p {
    font-weight: 400;
    font-size: 14px !important;
    /* line-height: 1.3; */
}

.about-content ul {
    line-height: 1.3;
}

.row.section-spacer .background-image {
    padding: 15px !important;
}

/*My Account*/

.profile-tab-section .nav-tabs {
    border-bottom: none !important;
}

/* .business-head.about-content {
    height: 12% !important;
} */

/*My Business*/

.my-business-content .section-spacer {
    padding: 1rem 0;
}

.my-business-content {
    padding: 6px 0;
    margin-left: auto;
    margin-right: auto;
}

.my-business-content .business-logo {
    /* width: 45% !important; */
    /* height: 100% !important; */
    width: 100px !important;
    height: 100px !important;
    border: 3px solid #0d1a92;
}

.contact-sec-line .normal-content p {
    font-size: 14px !important;
    margin-bottom: 5px;
}

.my-business-content .normal-content .inline-div p {
    font-size: 14px !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

.business-post-h {
    height: 100%;
}

.my-business-content hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.content-text.advert-thubms p {
    font-size: 10px !important;
}

.my-business-content .row-pad-0 .border-btn {
    padding: 2% 2.5% !important;
}

.my-business-content .content-text {
    border: none;
}

.my-business-content .magic-message-body {
    background-color: #fff !important;
}

.my-business-content .scroll-band .f-trash.flaticon-waste-bin {
    background: transparent !important;
    color: #0d1a92 !important;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.inline-div h4 {
    font-size: 16px;
    padding-bottom: 5px;
}

.business_detail h4 {
    font-size: 16px;
    padding-bottom: 5px;
}

.my-business-content .un-inner-block {
    margin-bottom: 10px;
}

.business-data .profile-nam-titile {
    font-size: 18px;
}

.my-business-content .action-button a img {
    height: 34px;
    width: 34px;
}

.my-business-content .number-count {
    padding-left: 0;
}

#comment-section .like-comment-section {
    background: #efefef;
}

#comment-section .custom-message {
    color: #000;
    font-size: 12px !important;
    white-space: pre-line;
}

#comment-section strong {
    color: #000;
}

#comment-section span.un-chat-time {
    font-size: 9px;
}

#comment-section .un-inner-content {
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 8px;
}

.my-business-content {
    [class^="flaticon-"]:before,
    [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after,
    [class*=" flaticon-"]:after {
        margin-left: 0;
    }
}

.mob-description {
    display: none;
}

.business-posts {
    width: 100%;
    border: 2px solid white;
    border-radius: 2rem;
    height: 20rem;
}

.business-comment-sec {
    height: 62% !important;
}

.business-post-feed {
    height: 89% !important;
}

@media (max-width: 1600px) {
    .business-post-feed {
        height: 84% !important;
    }
    .business-comment-sec {
        height: 57% !important;
    }
}

.business-ad-timestamp {
    display: flex;
    width: 65% !important;
}

.edit-delete-icons {
    width: 35% !important;
    display: flex;
    justify-content: flex-start !important;
}

.comment-modal-body {
    border: none !important;
}

#advert-add-modal .row-pad-0 .border-btn,
#advert-edit-modal .row-pad-0 .border-btn {
    padding: 1.5% 4% !important;
}

.pop-up-heading {
    font-size: 18px !important;
}

.options-list {
    line-height: 1.3;
}

.help-block {
    color: red !important;
    font-weight: 400;
    font-size: 14px !important;
}

.mob-post-comment-sec {
    display: none;
}

.mob-post-sec {
    display: none;
}

.inner-content-h {
    height: 35% !important;
}

@media (max-width: 1600px) {
    .inner-content-h {
        height: 40% !important;
    }
}

.my-business-content span.un-chat-time {
    font-size: 10px;
}

.my-business-content i.fa.fa-play {
    top: 10%;
    left: 5%;
}

.my-business-content .content-text.advert-thubms p {
    font-size: 12px !important;
}

#advert-add-modal .gallary-modal-close-icon,
#advert-edit-modal .gallary-modal-close-icon {
    /* border-radius: 0 !important; */
    background-color: transparent !important;
}

#advert-add-modal .gallary-modal-close-icon {
    top: 2px;
    right: 13px;
}

.small-close-icon .flaticon-close {
    height: 25px;
    width: 25px;
    padding: 5px;
    border: 2px solid #000;
    color: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -7px;
    margin-top: 7px;
}

.small-close-icon [class^="flaticon-"]:before,
.small-close-icon [class*=" flaticon-"]:before,
.small-close-icon [class^="flaticon-"]:after,
.small-close-icon [class*=" flaticon-"]:after {
    margin-left: 0 !important;
    font-size: 12px;
}

#advert-add-modal .modal-dialog {
    height: 85%;
}

#advert-edit-modal .modal-dialog {
    height: 85%;
}

#select-gif-modal.modal {
    /* top: 15%; */
    height: 100%;
}

#select-gif-modal .modal-dialog {
    height: 50%;
    min-height: 50% !important;
    margin-top: 10%;
}

#select-gif-modal .modal-body .gif-border.active {
    border: 2px solid #0d1a92;
}

/* Default style for all browsers */
.gif-checkbox-style {
    position: absolute;
    top: 3%;
    height: 5%;
    margin: 0 !important;
}

#advert-add-modal .comment-modal-body,
#select-gif-modal .gif-modal-body {
    background: #fff;
    border-radius: 35px;
    border: 2px solid #0d1a92;
    overflow: inherit;
    max-height: none;
}

#advert-add-modal .modal-content {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#select-gif-modal .modal-content {
    box-shadow: none !important;
    border: none !important;
}

.my-business-content .show-links-div {
    line-height: 1.5;
}

.gif-modal-body {
    border: none !important;
}

#select-gif-modal .nav-pills > li.active > a,
#select-gif-modal .nav-pills > li.active > a:hover,
#select-gif-modal .nav-pills > li.active > a:focus {
    background-color: transparent;
}

#select-gif-modal .nav-pills > li + li > a {
    margin-left: 0 !important;
}

.blocked-user .table > thead > tr > th {
    border-bottom: none;
}

/*Sent Items*/

.MyMessagedataTable-note {
    font-size: 16px !important;
}

/*message*/

.forwarded-message {
    margin-bottom: 5px !important;
    color: #6d78db !important;
    font-weight: 500 !important;
    font-size: 10px !important;
}

.forwarded-message i::before {
    margin: 0px !important;
    font-size: 12px !important;
    margin-right: 3px !important;
}

.emojionearea .emojionearea-button {
    top: 5px !important;
}

.note-editable {
    background-color: #d3e9f7 !important;
}

.note-editor.panel-default {
    padding-left: 0;
}

.business-page .address iframe {
    width: 100%;
    height: auto;
}

.business-page .address video {
    width: 100%;
    height: auto;
}

.select2-selection--single .select2-selection__clear {
    background-color: transparent;
    border: none;
    margin-right: 25px;
}

.select2-results > .select2-results__options::-webkit-scrollbar {
    width: 4px;
}

.select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #e1e1e1;
    box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}

.select2-results > .select2-results__options::-webkit-scrollbar-track {
    border-radius: 4px;
    box-shadow: inset 0 0 10px #e1e1e1;
}

.add-comment-section textarea::-webkit-scrollbar {
    width: 0;
}

.post-advertisement .err-graphic_maxlength,
.edit-advertisement .err-graphic_maxlength,
.edit-advertisement .err-graphic_minlength,
.edit-advertisement .err-graphic_length {
    float: right;
    margin-right: 10px;
}

.select2-container {
    z-index: 9999 !important;
    width: 100% !important;
}

iframe.popUp-img {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

iframe.popUp-img-fb {
    width: 50%;
}

.panel-heading {
    padding: 0;
}

.panel.panel-default {
    box-shadow: none;
    border: none;
}

@media screen and (max-width: 1380px) {
    .navbar-header {
        min-width: 5px;
    }

    .options.clear {
        padding: 10px;
    }
}

@media (min-width: 1200px) {
    .modal-lg {
        width: 1150px !important;
    }

    .right-content .header {
        display: none;
    }

    .header .dropdown {
        display: none;
    }

    .menu-items {
        display: flex;
        position: static;
        background-color: transparent;
        border: none;
        padding: 0;
        min-width: auto;
    }

    .menu-items a {
        display: inline-block;
        padding: 0 5px;
    }
}

@media (max-width: 1200px) {
    .menu-button {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 20px;
        height: 16px;
        cursor: pointer;
    }

    .menu-button span {
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: background-color 0.3s ease-in-out;
    }

    .menu-items {
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
    }

    .menu-items.show {
        display: block;
    }
}

@media (max-width: 1199px) {
    .menu-items {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3),
            0 6px 20px 0 rgba(0, 0, 0, 0.1);
    }

    .menu-items {
        [class^="flaticon-"]:before,
        [class*=" flaticon-"]:before,
        [class^="flaticon-"]:after,
        [class*=" flaticon-"]:after {
            margin-left: 0 !important;
        }
    }

    .mob-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.row-pad-0 .border-btn {
    border-radius: 10px;
    border: 2px solid #0d1a92;
    color: #000;
    padding: 5% 5% !important;
    transition: all 0.5s ease 0s;
}

.mob-icons a,
.mob-icons button {
    margin-right: 5px;
    border: 0;
}

@media (width: 1024px) and (height: 768px) {
    .ui-background .ui-side-tab ul.nav.nav-pills li a {
        padding: 17px 10px;
    }
}

@media (max-width: 1400px) {
    body {
        font-size: 12px !important;
    }

    .navbar-brand {
        padding: 5px 10px !important;
    }

    .custom-header .nav > li > a {
        padding: 15px 10px !important;
    }

    .navbar-collapse ul li a.last-login {
        padding: 5px !important;
    }

    .custom-header .container.full-container {
        width: 1047px !important;
    }

    /* .font-small {
        font-size: 10px !important;
    } */

    .un-community-all .font-small {
        font-size: 8px !important;
    }

    .customSlider .business-slogan {
        font-size: 10px !important;
    }

    .pop_up_icon {
        font-size: 13px !important;
    }

    .back-logo {
        width: 40px !important;
        height: 40px !important;
    }

    /* .business-logo {
        height: 40px !important;
    } */

    .custom-footer {
        padding: 10px 0 !important;
    }

    .row-pad-0 .submit-btn {
        padding: 5% 10% !important;
    }

    .advert-text {
        font-size: 12px !important;
    }

    .customSlider .panel-title img {
        width: 40px !important;
        max-height: 40px !important;
    }

    .all-messages .sender-info .sender-img.msg-title {
        width: 40px !important;
        height: 40px !important;
    }

    .sender-img.msg-title.on-profile-click:before {
        width: 40px !important;
        height: 40px !important;
    }

    strong {
        font-size: 13px !important;
    }

    .message-content .text-justify {
        font-size: 14px !important;
    }

    .un-community .icon-group-right a i:before {
        font-size: 14px !important;
    }

    .btn {
        font-size: 10px !important;
    }

    .fa-2x {
        font-size: 1.7rem !important;
    }

    .advert_text_height span {
        font-size: 10px !important;
    }

    .SM-btn {
        font-size: 10px !important;
    }

    .ui-background .ui-side-tab ul.nav.nav-pills li a {
        font-size: 10px !important;
    }

    .un-image-text.d-flex .un-member-icon {
        width: 35px !important;
        height: 35px !important;
    }

    .un-massage-header i:before {
        font-size: 12px !important;
    }

    .logo-img {
        height: 30px;
        width: 30px;
    }

    .ads-info-text span {
        margin-left: 5px;
    }

    .contact-sec-line .normal-content p {
        font-size: 10px !important;
        margin-bottom: 3px;
    }

    .contact-sec-line .normal-content a {
        font-size: 10px !important;
        margin-bottom: 3px;
    }

    .my-business-content .normal-content .inline-div p {
        font-size: 10px !important;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .my-business-content hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .content-text.advert-thubms p {
        font-size: 5px !important;
    }

    .my-business-content .scroll-band .f-trash.flaticon-waste-bin {
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: start;
        align-items: center;
        border-radius: 50%;
    }

    .inline-div h4 {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .business_detail h4 {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .my-business-content h6 {
        font-size: 12px;
    }

    .business-data .profile-nam-titile {
        font-size: 14px !important;
    }

    #comment-section .like-comment-section {
        background: #efefef;
    }

    #comment-section .custom-message {
        color: #000;
        font-size: 9px !important;
        white-space: pre-line;
    }

    #comment-section strong {
        font-size: 12px !important;
    }

    #comment-section span.un-chat-time {
        font-size: 5px;
    }

    #comment-section .send-icon i.fa-paper-palne:before {
        font-size: 14px !important;
    }

    .my-business-content .number-count {
        font-size: 12px;
    }

    .my-business-content .fa-2x {
        font-size: 1.5rem !important;
    }

    .pop-up-heading {
        font-size: 14px !important;
    }

    /* .help-block {
        color: red !important;
        font-weight: 400;
        font-size: 10px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    } */

    .tab-content.postmagic .post-header-right .post-small-text,
    .tab-content.postmagic .post-header-right .post-small-text {
        font-size: 14px !important;
    }

    /* .tab-form-custom-placeholder form.normal-tab-form label {
        font-size: 12px !important;
    } */

    /* .tab-form-custom-placeholder form.normal-tab-form input::placeholder {
        font-size: 10px !important;
    } */

    /* .tab-form-custom-placeholder form.normal-tab-form textarea::placeholder {
        font-size: 10px !important;
    } */
    /*
    #postmagic-mail .select2-container .select2-selection__placeholder {
        font-size: 10px !important;
    } */

    #postmagic-mail .content-btn {
        padding: 5px 60px 5px 20px;
        /* margin-bottom: 10px; */
    }

    .img-div .font-small {
        font-size: 10px !important;
    }

    .my-business-content .row-pad-0 .border-btn {
        padding: 1.5% 2% !important;
        display: block;
    }

    .my-business-content .business-logo {
        /* width: 45% !important; */
        /* height: 100% !important; */
        width: 80px !important;
        height: 80px !important;
    }

    .business-page-height {
        height: 650px !important;
    }

    .trending-height {
        height: 650px !important;
    }

    .register-height {
        height: 650px !important;
    }

    .sign-in-height {
        height: 650px !important;
    }

    .reset-password-height {
        height: 650px !important;
    }

    .forgot-password-height {
        height: 650px !important;
    }

    .favourite-height {
        height: 650px !important;
    }

    .blocked-user-height {
        height: 650px !important;
    }

    .user-databox-height {
        height: 650 !important;
    }

    .sign-up.section-spacer .profile-section i {
        top: 45px;
        left: 50px;
    }

    .advert-modal-right-arrow {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid #fff;
    }

    .advert-modal-left-arrow {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 20px solid #fff;
    }

    .right-text-advert {
        bottom: -3%;
    }

    .custom-arrow-height {
        height: 5% !important;
    }

    .small-close-icon .flaticon-close {
        margin-right: 0;
        margin-top: 0;
    }

    /* #select-gif-modal .modal-dialog {
        height: 80%;
    } */

    .note-editor .note-editable {
        min-height: 180px;
        height: 200px;
    }

    .min-ads {
        display: none;
    }

    .nav-css li {
        margin: 2rem 0;
    }

    .ui-background .ui-side-tab ul li.active a {
        padding: 40px 0px !important;
    }

    .navbar-collapse ul li a.last-login {
        display: flex;
        flex-flow: column;
    }

    .row-pad-0 .submit-btn {
        border-radius: 20px;
        border: 2px solid #0d1a92;
        color: #000;
        padding: 0.8rem 1.5rem;
        transition: all 0.5s ease 0s;
    }

    .adPopUp .modal-dialog .modal-content .row {
        display: flex;
        align-items: center;
    }
}

.mob-icons {
    display: flex;
}

@media (max-width: 991px) {
    .mob-icons {
        flex-direction: row;
    }
    .row-pad-0 .submit-btn {
        padding: 2% 5% !important;
    }
}

@media (min-width: 991px) {
    .mob-close-btn,
    .mob-top-arrows {
        display: none;
    }
}

/* @media (max-height: 768px) {
    .main-chat-div {
        padding-right: 0 !important;
        padding-left: 5px !important;
    }

    .nav-css {
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 5px;
        scrollbar-width: none;
    }

    .nav-css::-webkit-scrollbar {
        color: #0d1a92ab;
        border-radius: 40px;
        height: 5px;
        width: 3px;
        margin-right: 5px;
        display: none;
    }

    .nav-css::-webkit-scrollbar-track {
        border-radius: 40px;
    }

    .nav-css::-webkit-scrollbar-thumb {
        border-radius: 50px;
    }

    .nav-css::-webkit-scrollbar-thumb:hover {
        width: 3px;
    }

    .h-7 {
        height: 10% !important;
    }

    .h-8 {
        height: 10% !important;
    }

    .h-83 {
        height: 79% !important;
    }

    .h-94 {
        height: 88% !important;
    }

    .emojionearea .emojionearea-editor {
        align-items: center;
    }

    .user-list-items {
        height: 79% !important;
    }

    #recentusers .user-list-items {
        height: 72% !important;
    }

    #favouriteusers .nav-pills {
        margin-bottom: 4px;
    }

    .favorite-list-items {
        height: 61% !important;
    }

    #magicsearchtab .nav-pills {
        margin-bottom: 0px;
    }

    h4 {
        color: #0d1a92;
        font-family: 'Red Hat Text';
        font-size: 30px !important;
        padding-bottom: 25px !important;
    }

    img.profile-img {
        width: 60px !important;
        height: 60px !important;
    }

    .my-business-content .edit-delete-icons a img {
        width: 13px;
        height: 13px;
    }

    .my-business-content .like-comment-section img {
        width: 13px;
        height: 13px;
    }

    .my-business-content .content-text.advert-thubms p {
        font-size: 11px !important;
    }

    .my-business-content span.un-chat-time {
        font-size: 7px;
    }

    #comment-section .custom-message {
        font-size: 12px !important;
        white-space: pre-line;
    }

    #comment-section span.un-chat-time {
        font-size: 8px;
    }

    .my-business-content {

        [class^="flaticon-"]:before,
        [class*=" flaticon-"]:before,
        [class^="flaticon-"]:after,
        [class*=" flaticon-"]:after {
            margin-left: 0;
        }
    }
} */

@media (max-width: 991px) {
    .postmagic-sidebar ul.nav.nav-pills.postmagic li {
        white-space: normal;
    }

    .nav-f {
        float: left !important;
        align-items: baseline;
    }

    .main-chat-div {
        height: 15% !important;
    }

    .sign-in.ui-messenger.section-spacer {
        padding: 0 !important;
    }

    .ui-background ul.nav.nav-pills {
        width: 100%;
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
        margin: 0;
        z-index: 1;
        position: relative;
    }

    .ui-background ul.nav.nav-pills::-webkit-scrollbar {
        color: #ffffff4d;
        border-radius: 40px;
        width: 5px;
        height: 4px;
    }

    .ui-background ul.nav.nav-pills::-webkit-scrollbar-track {
        background-color: #ffffff4d;
    }

    .ui-background ul.nav.nav-pills::-webkit-scrollbar-thumb {
        background-color: #ffffff80;
    }

    .ui-background ul.nav.nav-pills::-webkit-scrollbar-thumb:hover {
        background-color: #ffffff;
    }

    .ui-background .ui-side-tab ul li.active a {
        color: #fff !important;
        background: #0d1a92 !important;
        font-weight: 800 !important;
    }

    .ui-background .ui-side-tab ul li.active {
        border-bottom: 3px solid;
        margin-bottom: 5px !important;
    }

    .ui-background .ui-side-tab ul.nav.nav-pills li a {
        padding: 10px;
    }

    .ui-side-tab ul.nav.nav-pills li.active a:hover {
        color: #fff !important;
    }

    .ui-background {
        width: 100%;
    }

    .ui-side-tab {
        width: 100%;
    }

    .container {
        padding: 0 !important;
    }

    .navbar-header {
        width: 100% !important;
    }

    .tab-content-bg {
        width: 100%;
        border-radius: 40px;
        height: 75%;
    }

    .ads-background {
        display: none;
    }

    .main-chat-div {
        padding: 0 1rem !important;
    }

    .un-chat-col {
        padding: 2rem;
    }

    .ui-background {
        border-radius: 0;
        background: #fff;
    }

    .ui-side-tab {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        /* border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px; */
    }

    .row-pad-0 .border-btn {
        border-radius: 10px;
        border: 2px solid #0d1a92;
        color: #000;
        padding: 0.7rem 1rem;
        transition: all 0.5s ease 0s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* .community-section-1 {
        height: 70vh !important;
    }

    .community-section-2 {
        height: 70vh !important;
    } */

    .trending-height {
        height: auto !important;
    }

    .register-height {
        height: auto !important;
    }

    .sign-in-height {
        height: auto !important;
    }

    .reset-password-height {
        height: auto !important;
    }

    .forgot-password-height {
        height: auto !important;
    }

    .favourite-height {
        height: auto !important;
    }

    .blocked-user-height {
        height: auto !important;
    }

    .user-databox-height {
        height: auto !important;
    }

    .adPopUp .modal-dialog .modal-content {
        height: 95% !important;
        overflow-y: scroll;
    }

    /* .business-head.about-content {
        height: 9% !important;
    } */

    .modal-body .modal-ad {
        height: fit-content;
        margin-bottom: 10px;
    }

    .business-page-height {
        height: auto !important;
    }

    /* .row-pad-0 {
        margin: 10px 0;
    } */

    .band-description {
        display: flex;
        flex-direction: column;
    }

    .business-post-h {
        height: 80rem;
    }

    .mob-description {
        display: flex;
    }

    .des-description {
        display: none;
    }

    .my-business-content .row-pad-0 .border-btn {
        flex-direction: row;
    }

    .my-business-content .business-logo {
        /* width: 15% !important; */
        /* height: 100% !important; */
        width: 70px !important;
        height: 70px !important;
    }

    .web-post-comment-sec {
        display: none;
    }

    .mob-post-comment-sec {
        display: block;
        height: 90%;
        background: #efefef;
        padding: 15px;
        border-radius: 1.625rem;
    }

    .mob-post-comment-sec .nav-pills > button,
    .mob-post-comment-sec .nav-pills > button:hover,
    .mob-post-comment-sec .nav-pills > button:focus {
        background-color: #efefef !important;
        color: #0d1a92 !important;
        font-weight: 600;
    }

    .mob-post-comment-sec .nav-pills > button {
        color: #0d1a92;
    }

    .mob-post-comment-sec .nav-pills > button.active {
        border-bottom: 3px solid #0d1a92;
    }

    .my-business-content a:hover,
    .my-business-content a:focus {
        color: #0d1a92 !important;
    }

    .business-comment-sec {
        display: none;
    }

    .mob-post-sec {
        display: block;
    }

    .row-pad-0 {
        border: none;
    }

    .business-post-feed {
        height: 100% !important;
    }

    .my-business-content .tab-content {
        height: 90% !important;
    }

    .my-business-content .typing-icon-group .btn-send.send {
        padding-bottom: 0;
        background: #efefef;
    }

    .container {
        width: 750px !important;
    }

    .my-business-content a.btn-attach i:before,
    .my-business-content a.btn-send i:before {
        margin: 0 !important;
    }

    .business-contact {
        flex-direction: column;
    }

    .inner-content-h {
        height: 15rem !important;
    }

    #advert-add-modal .modal-dialog {
        height: auto;
    }

    #advert-edit-modal .modal-dialog {
        height: auto;
    }

    .my-account-height {
        height: auto !important;
    }

    .profile-tab-section .ui-side-tab ul {
        display: block;
    }

    .left-text-advert {
        bottom: 3%;
    }

    .right-text-advert {
        bottom: -1.5%;
    }

    .magic-section-align {
        align-items: flex-start;
        margin-top: 10px;
    }

    .magic-section-h {
        height: 90% !important;
    }

    .desk-close-btn,
    .desk-top-arrows {
        display: none;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .story-circle {
        width: 80px;
        height: 80px;
    }

    .tab-content-bg {
        border-radius: 30px;
    }

    .ui-side-tab ul {
        display: flex;
        justify-content: center;
    }

    .ui-side-tab ul li {
        padding-left: 16px;
        padding-right: 16px;
    }

    .user-list-items {
        height: 75% !important;
    }

    #recentusers .user-list-items {
        height: 72% !important;
    }

    #favouriteusers .nav-pills {
        margin-bottom: 4px;
    }

    .favorite-list-items {
        height: 61% !important;
    }

    #magicsearchtab .nav-pills {
        margin-bottom: 0px;
    }
}

@media (min-width: 768px) {
}

@media (max-width: 768px) {
    .view-content-advert-data {
        width: 100% !important;
    }

    .my-business-content hr {
        display: none;
    }

    div.tab-pane {
        height: 100% !important;
    }
}

@media (max-width: 767px) {
    .fav-msg .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .blocked-user .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .container {
        width: auto !important;
    }

    .view-content-advert-data {
        width: 100% !important;
    }

    .ui-block {
        margin-left: -5px;
    }

    .custom-header .navbar-brand > img {
        margin-left: 50px;
    }

    .un-chat-mobile .un-chat-main-content {
        overflow-y: scroll !important;
    }

    .un-chat-col {
        padding: 0;
    }

    .un-side-col {
        height: auto;
    }

    .un-massage-header {
        margin-bottom: 0 !important;
        background: #fff;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ui-tab-content .icon-group-right {
        float: right !important;
    }

    .tab-content .un-message-band {
        background: #0d1a9200 !important;
    }

    .ui-background .ui-side-tab ul li.active a {
        padding: 5px 20px;
    }

    .ui-side-tab ul li a {
        padding: 5px 20px;
    }

    .nav-css li {
        margin: 0 1rem !important;
    }

    .typing-area-row {
        padding-bottom: 0px;
    }

    .resp-panel {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .un-chat {
        height: 77% !important;
        overflow-y: scroll;
    }

    .un-chat.h-100 {
        height: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .un-chat.h-100 .signupNote img {
        width: 53%;
    }

    .community-advert-data .panel-heading {
        height: 35% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upload-picture .text-right {
        margin-top: 0 !important;
    }

    .magic-p-h {
        height: 10%;
    }

    .magic-option-h {
        height: 82%;
    }

    .magic-section-h {
        height: 95% !important;
    }
}

@media (min-width: 576px) {
    .m-class {
        padding: 1rem;
        height: 20%;
    }
}

@media (max-width: 576px) {
    .sign-up .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sign-in.ui-messenger.section-spacer {
        background: #0d1a9200;
    }

    .ui-background {
        background: #0d1a9200;
    }

    .main-chat-div {
        height: 12% !important;
    }

    .m-class {
        margin: 20px 0 0;
        height: 15%;
    }

    .post-ad-w {
        width: 100% !important;
    }

    .list-ad-w {
        width: 100% !important;
    }

    .resp-media {
        flex-direction: column;
        align-items: center !important;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .row-pad-0 .border-btn {
        border-radius: 10px;
        border: 2px solid #0d1a92;
        color: #000;
        padding: 1rem 7rem;
        transition: all 0.5s ease 0s;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .tab-content-bg {
        background: transparent;
        height: 55% !important;
    }

    .min-ads {
        height: 15% !important;
    }

    .h-8 {
        height: 22% !important;
    }

    .col-lg-9.d-flex a {
        display: block;
    }

    .signup .small-container {
        height: auto;
    }

    .profile-section i {
        width: 20px;
        height: 20px;
    }

    .sign-up.section-spacer .profile-section i {
        top: 45px;
        left: 45px;
    }

    /* .trend-ad-div {
        height: 60% !important;
    } */

    .advert-main-modal .jb_close_btn {
        margin-bottom: 15px;
    }

    #magicsearchtab .nav-pills {
        justify-content: center !important;
    }

    #magicsearchtab .nav-pills li {
        margin-bottom: 10px !important;
    }

    .tab-content.postmagic {
        height: 100% !important;
    }

    ul.postmagic {
        justify-content: center !important;
    }

    ul.postmagic li {
        margin-bottom: 10px !important;
    }

    /* .row-pad-0 {
        margin: 10px;
    } */

    .business-post-btn-sec {
        padding: 40px 10px;
    }

    .business-post-h {
        height: 50rem;
    }

    .my-business-content .row-pad-0 .border-btn {
        flex-direction: column;
    }

    .advert-media .content-text p.business-ad-timestamp {
        display: none !important;
    }

    .edit-delete-icons {
        width: 100% !important;
        justify-content: end !important;
    }

    .my-business-content .inline-div p.slogan,
    .my-business-content .inline-div p.site {
        text-align: left !important;
    }

    .mob-post-comment-sec {
        height: 84%;
    }

    .my-business-content .business-logo {
        /* width: 15% !important; */
        width: 50px !important;
        height: 50px !important;
    }

    .inner-content-h {
        height: 10rem !important;
    }

    .advert-modal-right-arrow {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 18px solid #fff;
    }

    .advert-modal-left-arrow {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 18px solid #fff;
    }

    .business-posts {
        height: 25rem;
    }

    .left-text-advert {
        bottom: 3.5%;
        right: 0;
        left: 2%;
    }

    .right-text-advert {
        bottom: -2%;
        left: 10%;
    }

    .no-messages-founf-div img,
    .no-matching-found-div img {
        height: auto;
    }

    .mob-text-display-none {
        display: none;
    }

    .magic-section-h {
        height: 100% !important;
    }

    .magic-option-h {
        height: auto;
    }

    .mob-fd-col {
        display: flex;
        flex-direction: column;
    }

    #postmagic-mail .post-header-right {
        margin-bottom: 5px;
    }

    .my-business-content i.fa.fa-play {
        top: 12%;
        left: 15%;
    }

    .my-business-content i.fa.fa-play {
        width: 30px;
        height: 30px;
    }

    .business-like-comment-section {
        justify-content: center;
        /* padding-top: 15%; */
    }

    .view-edit-delete-section {
        justify-content: end;
        /* padding-top: 15%; */
    }

    .search-result-msg-band-header {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .search-band-left {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    i.fa.fa-play {
        top: 15%;
        left: 10%;
        width: 30px;
        height: 30px;
    }

    .trend-ad-div i.fa.fa-play::before {
        font-size: 16px !important;
        left: 10px;
    }

    .modal-body .modal-ad {
        padding-left: 0;
        padding-right: 0;
    }

    .ads-in-textarea {
        padding-top: 5%;
    }
}

/* ----------- Phase7 sprint1 client changes ----------- */
/* Magic finder changes - Start */
.nav-pills > li > a {
    border-radius: 30px !important;
}

/* Add scrolling for only form field button is sticky for magic word details form - Start */
.magic-finder-scrolling-ff {
    /* max-height: 350px; */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar while still allowing scrolling */
.magic-finder-scrolling-ff::-webkit-scrollbar {
    width: 0; /* Hide scrollbar for webkit (Chrome, Safari, etc.) */
}

.magic-finder-scrolling-ff {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}
/* Add scrolling for only form field button is sticky for magic word details form - End */

/* Add scrolling for only form field button is sticky for personal profile details form - Start */
.magic-finder-scrolling-sf {
    /* max-height: 350px !important;  */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Hide scrollbar while still allowing scrolling */
.magic-finder-scrolling-sf::-webkit-scrollbar {
    width: 0; /* Hide scrollbar for webkit (Chrome, Safari, etc.) */
}

.magic-finder-scrolling-sf {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}
/* Add scrolling for only form field button is sticky for personal profile details form - End */

/* placeholder set for both form */
form.normal-tab-form input::placeholder {
    padding-left: 10px;
}

/* input field padding set for both form */
form.magic-form-input-desgin input {
    padding: 0 10px !important;
}
/* Magic finder changes - End */

/* Increase the size of profile photo in the middle section when any chat is open */
img.w-100.un-member-icon.round-img {
    width: 45px !important;
    height: 45px !important;
}

/* Chat Section icon and profile name width set - Start */
@media (min-width: 1200px) {
    .col-lg-6.icon-section-grp {
        width: 42%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp {
        width: 58%;
        padding-right: 0 !important;
    }
}

@media (min-width: 1200px) {
    /* fav and blocked user icon (2 icons) */
    .col-lg-6.icon-section-grp.fav-blocked-user-icon {
        width: 20%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.fav-blocked-user-icon {
        width: 80%;
        padding-right: 0 !important;
    }

    /* fav and block and clear and export chat icons (4 icons) */
    .col-lg-6.icon-section-grp.chat-msg-icon {
        /* width: 30%; */
        width: 35%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.chat-msg-icon {
        /* width: 70%; */
        width: 65%;
        padding-right: 0 !important;
    }

    /* third */
    .col-lg-6.icon-section-grp.busi-profile-user-icon {
        width: 35%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.busi-profile-user-icon {
        width: 65%;
        padding-right: 0 !important;
    }

    /* all icons (6 icons) */
    .col-lg-6.icon-section-grp.all-chat-icon {
        /* width: 42%; */
        width: 45%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.all-chat-icon {
        /* width: 58%; */
        width: 55%;
        padding-right: 0 !important;
    }

    /* business or profile and other all icons (5 icons) */
    .col-lg-6.icon-section-grp.bus-or-prof-all-chat-icon {
        width: 35%;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.bus-or-prof-all-chat-icon {
        width: 65%;
        padding-right: 0 !important;
    }

    .col-lg-6.text-section-grp.fav-blocked-pro-bus-icon {
        width: 72% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-section-grp.fav-blocked-pro-bus-icon {
        width: 33% !important;
        padding-left: 0 !important;
    }
}
/* Chat Section icon and profile name width set - End */

/* All user Section icon and profile name width set - Start */
@media (min-width: 1200px) {
    /* fav and block icon only (2 icons)*/
    .col-lg-6.h-100.text-alluser-grp.fav-block-icon {
        width: 80%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.fav-block-icon {
        width: 20%;
        padding-left: 0 !important;
    }

    /* all six icons (6 icons) */
    .col-lg-6.h-100.text-alluser-grp.all-icon-alluser {
        width: 58%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.all-icon-alluser {
        width: 42%;
        padding-left: 0 !important;
    }

    /* bussiness or profile only one icon (total 5 icons) */
    .col-lg-6.icon-alluser-grp.busi-or-profile-icon {
        width: 35%;
        padding-left: 0 !important;
    }

    .col-lg-6.h-100.text-alluser-grp.busi-or-profile-icon {
        width: 65%;
        padding-right: 0 !important;
    }

    /* fav and block and export and clear chat icon (4 icons) */
    .col-lg-6.h-100.text-alluser-grp.fav-block-clear-export-icon {
        width: 70%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.fav-block-clear-export-icon {
        width: 30%;
        padding-left: 0 !important;
    }

    /* fav and business and profile and block icon (4 icons) */

    .col-lg-6.h-100.text-alluser-grp.busi-prof-fav-block-icon {
        width: 68% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.busi-prof-fav-block-icon {
        width: 32% !important;
        padding-left: 0 !important;
    }
}
/* All user Section icon and profile name width set - End */

/* Guest - All user Section icon and profile name width set - Start */
@media (min-width: 1200px) {
    /* fav icon only (1 icons)*/
    .col-lg-6.h-100.text-guest-alluser-grp.fav-g-icon {
        width: 90%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-guest-alluser-grp.fav-g-icon {
        width: 10%;
        padding-left: 0 !important;
    }

    /* fav-business-profile icon only (3 icons)*/
    .col-lg-6.h-100.text-guest-alluser-grp.fav-pro-bus-g-icon {
        width: 75%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-guest-alluser-grp.fav-pro-bus-g-icon {
        width: 25%;
        padding-left: 0 !important;
    }

    /* profile or business icon and favourite icon (2 icons) */
    .col-lg-6.h-100.text-guest-alluser-grp.pro-or-bus-fav-g-icon {
        width: 80%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-guest-alluser-grp.pro-or-bus-fav-g-icon {
        width: 20%;
        padding-left: 0 !important;
    }
}
/* Guest - All user Section icon and profile name width set - End */

/* Without verified user - All user Section icon and profile name width set - Start */
@media (min-width: 1200px) {
    /* fav icon only (1 icons)*/
    .col-lg-6.text-unverified-alluser-grp.h-100.fav-uv-icon {
        width: 90%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-unverified-alluser-grp.fav-uv-icon {
        width: 10%;
        padding-left: 0 !important;
    }

    /* fav-business-profile icon only (3 icons)*/
    .col-lg-6.text-unverified-alluser-grp.h-100.fav-pro-bus-uv-icon {
        width: 75%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-unverified-alluser-grp.fav-pro-bus-uv-icon {
        width: 25%;
        padding-left: 0 !important;
    }

    /* profile or business icon and favourite icon (2 icons) */
    .col-lg-6.text-unverified-alluser-grp.h-100.pro-or-bus-fav-uv-icon {
        width: 80%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-unverified-alluser-grp.pro-or-bus-fav-uv-icon {
        width: 20%;
        padding-left: 0 !important;
    }
}
/* Without verified user - All user Section icon and profile name width set - End */

/* Favourite user and message icon and profile name width set - Start */
@media (min-width: 1200px) {
    /* fav or unfav and block and unblock icon (2 icons) */
    .col-lg-6.text-fav-user-grp.fav-fav-block-icon {
        width: 80%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.fav-fav-block-icon {
        width: 20%;
        padding-left: 0 !important;
    }

    /* all icons of fav user section (6 icons) */
    .col-lg-6.text-fav-user-grp.fav-all-icon {
        width: 58%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.fav-all-icon {
        width: 42%;
        padding-left: 0 !important;
    }

    /* favourite icon and clear and export chat block icon (4 icons) */
    .col-lg-6.text-fav-user-grp.fav-fav-chat-block-icon {
        width: 70%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.fav-fav-chat-block-icon {
        width: 30%;
        padding-left: 0 !important;
    }

    /* Bussiness or profile and all icons (5 icons) */
    .col-lg-6.text-fav-user-grp.bus-or-prof-all-fav-icon {
        width: 65%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.bus-or-prof-all-fav-icon {
        width: 35%;
        padding-left: 0 !important;
    }

    /* Bussiness and profile and block and fav icons (4 icons) */
    .col-lg-6.text-fav-user-grp.bus-pro-fav-block-fav-icons {
        width: 70%;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.bus-pro-fav-block-fav-icons {
        width: 30%;
        padding-left: 0 !important;
    }
}
/* Favourite user and message icon and profile name width set - End */

/* Here, set custom width when screen width 1200 to 1300px */
/* @media screen and (min-width: 1200px), screen and (max-width:1300px) { */
@media (min-width: 1200px) and (max-width: 1300px) {
    /* fav chat section*/
    /* all icons of fav user section (6 icons) */
    .col-lg-6.text-fav-user-grp.fav-all-icon {
        width: 52% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.fav-all-icon {
        width: 48% !important;
        padding-left: 0 !important;
    }

    /* favourite icon and clear and export chat block icon (4 icons) */
    .col-lg-6.text-fav-user-grp.fav-fav-chat-block-icon {
        width: 65% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.fav-fav-chat-block-icon {
        width: 35% !important;
        padding-left: 0 !important;
    }

    /* Bussiness or profile and all icons (5 icons) */
    .col-lg-6.text-fav-user-grp.bus-or-prof-all-fav-icon {
        width: 60% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.bus-or-prof-all-fav-icon {
        width: 40% !important;
        padding-left: 0 !important;
    }

    /* Bussiness and profile and block and fav icons (4 icons) */
    .col-lg-6.text-fav-user-grp.bus-pro-fav-block-fav-icons {
        width: 65% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-fav-user-grp.bus-pro-fav-block-fav-icons {
        width: 35% !important;
        padding-left: 0 !important;
    }

    /* all user section*/
    /* all six icons (6 icons) */
    .col-lg-6.h-100.text-alluser-grp.all-icon-alluser {
        width: 52% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.all-icon-alluser {
        width: 48% !important;
        padding-left: 0 !important;
    }

    /* bussiness or profile only one icon (total 5 icons) */
    .col-lg-6.icon-alluser-grp.busi-or-profile-icon {
        width: 40% !important;
        padding-left: 0 !important;
    }

    .col-lg-6.h-100.text-alluser-grp.busi-or-profile-icon {
        width: 60% !important;
        padding-right: 0 !important;
    }

    /* fav and block and export and clear chat icon (4 icons) */
    .col-lg-6.h-100.text-alluser-grp.fav-block-clear-export-icon {
        width: 65% !important;
        padding-right: 0 !important;
    }

    .col-lg-6.icon-alluser-grp.fav-block-clear-export-icon {
        width: 35% !important;
        padding-left: 0 !important;
    }

    /* chat section */
    /* fav and block and clear and export chat icons (4 icons) */
    .col-lg-6.icon-section-grp.chat-msg-icon {
        width: 35% !important;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.chat-msg-icon {
        width: 65% !important;
        padding-right: 0 !important;
    }

    /* third */
    .col-lg-6.icon-section-grp.busi-profile-user-icon {
        width: 40% !important;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.busi-profile-user-icon {
        width: 60% !important;
        padding-right: 0 !important;
    }

    /* all icons (6 icons) */
    .col-lg-6.icon-section-grp.all-chat-icon {
        width: 48% !important;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.all-chat-icon {
        width: 52% !important;
        padding-right: 0 !important;
    }

    /* business or profile and other all icons (5 icons) */
    .col-lg-6.icon-section-grp.bus-or-prof-all-chat-icon {
        width: 40% !important;
        padding-left: 0 !important;
    }

    .col-lg-6.text-section-grp.bus-or-prof-all-chat-icon {
        width: 60% !important;
        padding-right: 0 !important;
    }
}

/* space between 2 rows needs to be reduce the overall popup size in message details popup in my sent items */
.table-lg.msg-details > tbody > tr > td {
    padding: 8px 20px !important;
}

/* Message detail popup requires to be round shaped rectangle in my sent items */
.message-details-style {
    border-radius: 25px;
}

/* For hashtag UI changes phase7 sprint1 - Start */
.hashtag-container {
    display: inline-block;
    width: 100%;
    padding: 0px 0px 0px 5px;
}
.hashtag-item {
    font-size: 14px;
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 2px 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.margin-top-cls {
    margin-top: 25px;
}
/* For hashtag UI changes phase7 sprint1 - End */

/* hashtag UI changes */
li.select2-selection__choice {
    margin: 5px 2px !important;
    background-color: transparent !important;
    color: #0d1a92 !important;
    border: 2px solid #0d1a92;
    border-radius: 20px !important;
    padding: 2px 5px !important;
    span {
        margin-top: 0 !important;
        font-size: 20px !important;
    }
}

/* span.select2-selection.select2-selection--multiple{
    padding: 2px !important;
} */

/* arrow in magic finder */
.personalprofileicon::before {
    color: #0d1a92;
    font-size: 12px !important;
}

.custom_selece .select2-search__field {
    margin-top: 2px !important;
    margin-left: 7px !important;
    padding: 7px 0 !important;
    padding-left: 8px !important;
}

.custom_selece
    .select2-selection__rendered
    .select2-search.select2-search--inline {
    font-size: 12px !important;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
    /* margin-top: 2px !important; */
    /* padding: 7px !important; */
    /* margin-left: 7px !important; */
}

/* input.select2-search__field {
    padding-left: 8px !important;
} */

span.select2-selection.select2-selection--multiple {
    padding-left: 5px;
}

.select2-selection__rendered {
    padding: 2px !important;
}

/* .global_messenger_delete[tooltip]:not([flow])::after,
.global_messenger_delete[tooltip][flow^="up"]::after {
    bottom: unset;
    right: auto;
    left: -55px;
    margin-top: 4px;
}
.global_messenger_delete[tooltip]:not([flow])::before,
.global_messenger_delete[tooltip][flow^="up"]::before {
    bottom: 0;
    border-top-width: 0;
    border-bottom-color: #1a1a1a;
}
.global_messenger_delete i::before {
    margin-left: 5px !important;
} */

@media screen and (max-width: 1024px) {
    div.sidebar_nav button {
        font-size: 10px;
    }
}

.icon-info-popup {
    background: #ffffff;
    color: #0d1a92;
    border: 1px solid #0d1a92 !important;
    border-color: #0d1a92;
    border-radius: 11px !important;
}

/* i.icon.bg-group-icon.fa.fa-bullhorn {
    font-size: large;
    color : #0d1a92;
}

button.active.alreadyActive i.icon.bg-group-icon.fa.fa-bullhorn {
    color : white;
} */

i.icon.bg-group-icon.flaticon-world-wide-web {
    font-size: x-large;
    color : #0d1a92;
}

button.active.alreadyActive i.icon.bg-group-icon.flaticon-world-wide-web {
    color : white;
}


p.text-center.text-black.fw-bold {
    font-size: 13px;
}

.title-of-drawing-tool{
    font-size: 11px;
}

.icon-div-style {
    padding-right: 10px;
    border-radius: 13px;
    border: 1px #0d1a92 solid;
    cursor: pointer;
}

.icon-div-style img {
    padding: 10px;
    width: 50px;
    height: 50px;
}

.icon-info-text {
    display: flex;
    text-align: left;
    /* font-weight: 420 !important; */
}

.cancel-btn-create-bg .content-btn::after {
    content: none !important;
}

.cancel-btn-create-bg button.content-btn {
    border: 2px solid #0d1a92;
}

.extra-field-text {
    font-size: 12px;
    font-weight: 500;
}

.text-color-blue{
    color: #0d1a92;
}

.custom-font-size{
    font-size:15px;
}

@media (min-width: 1367px) {  /* Apply for screens larger than 1366px */
    #message_content {
        max-height: 160px; /* Approximate height for 4 rows */
    }
}

/* Ensure Fancybox modal is always on top */
.fancybox__container {
    z-index: 10000 !important;
}

/* Make sure the inner content has rounded corners */
.fancybox__content {
    border-radius: 25px !important;
    overflow: hidden !important;
    /* background-color: #e6f2ff !important;  */
}

/* Force iframe or video to inherit the same radius */
.fancybox__content iframe,
.fancybox__content video {
    border-radius: 25px !important;
    display: block;
    width: 100%;
    height: 100%;
    /* background-color: #e6f2ff !important;  */
}

body .fancybox__content {
    background-color: #d3e9f7;
}

.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,
.fancybox__carousel .fancybox__slide.has-map .fancybox__content,
.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content {
    width: 100%;
    height: 100vh !important;  /* Full viewport height */
    max-height: 100vh !important; 
}

/* Make the iframe inside Fancybox take full height */
.fancybox__iframe {
    width: 100%;
    height: 100vh !important; /* Full viewport height */
    border: none;
    overflow: hidden;
}

/* close button position set */
/* .fancybox__content>.carousel__button.is-close {
    top: 5px !important;
    right: 8px !important;
} */

/* background opacity set */
.fancybox__backdrop {
   background: rgba(0, 0, 0, 0.7) !important; /* soft black overlay */
}

.media-preview-for-messenger {
    height: 100%;
    width: 150px;
    text-align: center;
    /* background-color: #002F6C; */
    background-color: #0d1a92;
    padding: 10px;
    border-radius: 10px;
    color: white;
    font-family: Arial, sans-serif;
    cursor: pointer;
}

.media-icon-for-messenger {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
    transition: transform 0.2s ease;
}

.media-icon-for-messenger:hover {
    transform: scale(1.05);
}

.media-name-for-messenger {
    color: #ffffff !important;
    /* color: #ff6600 !important; */
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.media-info-for-messenger {
    color: #ffffff !important;
    font-size: 12px;
    margin-top: 2px;
    color: lightgray;
}

.media-name-for-messenger:hover {
    color: #ffffff !important;
    /* color: #ff6600 !important; */
}

.media-info-for-messenger:hover {
    color: #ffffff !important;
}

/* Flex container */
.custom-message-wrapper {
    display: flex;
    width: 100%;
    height: 250px;
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* border: 1px solid #e0e0e0; */
}

/* Message box styling - takes 70% */
.custom-message-box {
    width: 70%;
    padding: 0 25px;
    overflow-y: auto;
    background-color: #ffffff;
}

/* Attachment section styling - takes 30% */
.custom-attachment-box {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    border-left: 1px solid #e0e0e0;
}

/* Thumbnail image */
.custom-thumbnail-img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: fill;
    transition: transform 0.2s ease;
    /* border: 1px solid #ccc;
    border-radius: 8px; */
}

.custom-thumbnail-img:hover {
    transform: scale(1.05);
}

.attachment-preview-wrapper {
    gap: 1rem;
    padding: 0.5rem 0;
}

.file-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
    text-align: center;
}

.preview-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
    transition: transform 0.2s ease;
}

.preview-thumbnail:hover {
    transform: scale(1.05);
}

.file-preview-label {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #333;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-filename-label {
    font-size: 0.85rem;
    color: #333;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Modal Css of share link on posts */
.share-options .share-option {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s;
}

.share-options .share-option:last-child {
    border-bottom: none;
}

.share-option:hover {
    background-color: #f8f9fa;
    cursor: pointer;
    border-radius: 8px;
}

.share-icon {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    margin-left: 12px;
    flex-shrink: 0;
}

.share-label {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.share-icon-style:before{
    font-size: 18px !important;
}

.custom-toast-style {
    width: 280px !important;
    background-color: #d1e7dd !important;
    color: #000000 !important;
}

a.small-close-icon.font-small {
    position: relative;
    z-index: 10000;
}

i.fa.fa-chevron-left.view-content-advert-data{
    z-index: 10000;
}

i.fa.fa-chevron-right.view-content-advert-data{
    z-index: 10000;
}

/* For navigationbar icon css */
a.fancybox__button.file-media-download-link{
    font-size: 10px;
    color: #ffffff !important;
    stroke: none !important;
}

a.fancybox__button.file-media-download-link:hover{
    font-size: 10px;
    color: #0d1a92 !important;
    stroke: none !important;
}

button.carousel__button.fancybox__button--close {
    font-size: 10px;
    color: #ffffff !important;
}

button.carousel__button.fancybox__button--close:hover {
    font-size: 10px;
    color: #0d1a92 !important;
}

.fancybox__content :focus:not(.carousel__button.is-close){
    outline: none !important;
}

/* .fancybox__toolbar{
    top: -5px !important;
} */

button.carousel__button.is-close{
    display: none;
}

.accordion-body{
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/*-------------------------------------
  invx2025 - Business Center Module
  Author: Himanshu Makwana
--------------------------------------*/

/*=====================================
  Menu added css : Set sidebar Business Center tab menu
=====================================*/

.business_center_white_img {
    width: 25px !important;
    height: 30px !important;
}

.business_center_blue_img {
    width: 25px !important;
    height: 30px !important;
}

#business-center-tab:not(.active) .BusinessCenterBlueIcon {
    display: none;
}

#business-center-tab.active .BusinessCenterWhiteIcon {
    display: none;
}

.BusinessCenterWhiteIcon,
.BusinessCenterBlueIcon {
    transition: opacity 0.5s ease; /* Smooth fade */
}

/*=====================================
  Manage Business Center
=====================================*/

.product-cards-row{
    margin-right: 0;
    margin-left: 0;
}

.manage-business-center-tabs {
    /* border-bottom: 1px solid #e0e0e0; */
    border-bottom: 1px solid #ACACAC;
}

.manage-business-center-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #3C3C3C;
    font-weight: 500;
    padding: 12px 20px;
    /* margin-right: 40px; */
    background: none;
    border-radius: 0;
    font-style: Medium;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0px;
}

.manage-business-center-tabs .nav-link:hover {
    border-bottom-color: #0D1A92;
    color: #0D1A92;
}

.manage-business-center-tabs .nav-link.active {
    color: #0D1A92;
    border-bottom-color: #0D1A92;
    background: none;
}

.manage-business-center-tabs .nav-link:focus {
    box-shadow: none;
}
/* For tab section of manage Business Center */

/* .upload_gated_content_white_img {
    width: 22px !important;
    height: 30px !important;
}

.upload_gated_content_blue_img {
    width: 22px !important;
    height: 30px !important;
} */

.manage-business-back-btn {
    background: none;
    border: none;
    color: #0D1A92;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    transition: background-color 0.2s;
}

.custom-remove-icon-border{
    padding: 10px;
    border-radius: 30px;
    border: 1px solid #ED4C5C;
    background-color: #ffffff;
    font-family: none;
    line-height: normal;
}

/* .header .dropdown{
    display: block !important;
} */

.price-txt{
    font-family: Red Hat Text;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.custom-edit-icon-border{
    padding: 10px;
    border-radius: 30px;
    border: 1px solid #0D1A92;
    background-color: #ffffff;
    font-family: none;
    line-height: normal;
}

.custom-view-btn{
    width: 170px;
    padding: 12px 16px;
    height: 40;
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;

    font-family: Red Hat Text;
    font-weight: 500;
    font-size: 16px;
    line-height: 74%;
    letter-spacing: 0%;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.custom-view-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

.manage-ecommerce-main-title{
    font-family: Red Hat Text;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0D1A92;
}

.manage-product-card {
    /* background: white;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    border: 1px solid #0D1A921A;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto; */
    width: 100%;
    margin: 10px 0px;
    border-radius: 15px;
    padding-bottom: 10px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.manage-product-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}


.business-card-details{
    /* padding: 20px 10px; */
    padding: 12px 10px;
    border-bottom: 1px solid #0D1A921A;
}

.product-name {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    margin-bottom: 5px;
    color: #000000;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px; /* Adjust based on your layout */
}

.edit-product-category {
    display: inline-flex; /* inline-flex instead of flex for natural width */
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    padding: 8px 12px;
    color: #212121;
    background-color: #F3F3F3;
    font-weight: 400;
    font-size: 12px;
    margin: 10px 0;
    border: 1px solid #F3F3F3;
    white-space: nowrap; /* Prevent text from wrapping */
}

.item-price {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Red Hat Text;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0D1A92;
    /* padding-bottom: 15px;
    border-bottom: 1px solid #0D1A921A;  */
}

.global-icon-set{
    justify-content: space-between;
    display: flex;
    align-items: center;
    color: #0D1A92;
}

.btn-group-actions {
    /* padding-top: 5px; */
    padding: 12px 12px 8px;
    display: flex;
    /* gap: 15px; */
    gap: 8px;


    justify-content: space-between;
    align-items: center;

}

.center-edit-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.btn-sm-custom {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.dropdown-toggle::after {
    margin-left: 8px;
}

.header-actions {
    gap: 10px;
}

.my-order-btn-line:after {
    content: "";
    position: absolute;
    right: 31%;
    width: 1px;
    height: 38%;
    background: #000;
    top: 30%;
}

.vertical-divider-advert {
    width: 2px;
    height: 20px;
    background-color: #CDCDCD;
    margin: 0 8px;
}

.vertical-divider {
    width: 1px;
    height: 35px;
    background-color: #CDCDCD;
    margin: 0 10px;
}

.radio-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.radio-option {
    display: flex;
    align-items: center;
    /* padding: 12px 16px; */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
    flex: 1; /* This makes each option take 50% width */
    justify-content: flex-start;
}

.radio-option:hover {
    /* border-color: #007bff;
    background-color: #f8f9ff; */
    border-color: #0d1a92 !important;
    box-shadow: none !important;
}

.radio-option.selected {
    border-color: #0d1a92;
    background-color: #f0f7ff;
}

.radio-option input[type="radio"] {
    /* width: 15px;
    height: 15px; */
    width: 13px;
    height: 13px;
    margin-top: 0px !important;
    margin-right: 2px !important;
    /* margin: 0px !important; */
    cursor: pointer;
    accent-color: #0D1A92; 
    border: 1px solid #ddd;
    /* border-radius: 50%; */
    /* position: relative; */
    transition: all 0.2s ease;
}

.radio-option label {
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
}

.radio-option.selected label {
    color: #0d1a92;
}

.my-order-btn {
    transition: all 0.2s ease;
    cursor: pointer;
}

button.btn.my-order-btn:active:focus{
	outline: none;
}

button.btn.my-order-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #ffffff;
    color: #0D1A92;
    padding: 11px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.my-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

.my_order_blue_img, .my_order_white_img {
    height: 18px;
    width: 18px;
}

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

/* button.btn.btn-secondary-custom {
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 16px;
    width: 157;
    height: 40;
    gap: 10px;
    border-radius: 10px;
    font-family: Red Hat Text;
    font-weight: 600;
    line-height: 93%;
    letter-spacing: 0%;

    display: flex;
    justify-content: center;
    align-items: center
} */


button.btn.add-product-service-btn:active:focus{
	outline: none;
}

button.btn.add-product-service-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.add-product-service-btn:hover {
    background: #ffffff;
    color: #0D1A92;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

.field-note{
    font-family: Red Hat Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 13px;
    line-height: 17px;
}

.form-box-style{
    padding: 20px;
    background-color: #F9F9F9;
    border-radius: 10px;
}


/** scroll in listing product */
.manage-products-listing-scroll {
    padding-right: 15px;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 1366px) {
    .manage-products-listing-scroll {
        max-height: 63vh;
    }
}

@media screen and (min-width: 1920px) {
    .manage-products-listing-scroll {
        max-height: 65vh;
    }
}

.manage-products-listing-scroll::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.manage-products-listing-scroll::-webkit-scrollbar {
    width: 3px;
}

.manage-products-listing-scroll::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}
/** scroll in listing product */

.manage-order-btn {
    transition: all 0.2s ease;
    cursor: pointer;
}

button.btn.manage-order-btn:active:focus{
    outline: none;
}

button.btn.manage-order-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #ffffff;
    color: #0D1A92;
    padding: 10px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.manage-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

#manageProductDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#manageProductDetailsModal .modal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;

    background-color: #d3e9f7;
    border: 2px solid #0d1a92;
}

#manageProductDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
}

#manageProductDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}


.arrow-img-prev-seller,
.arrow-img-next-seller {
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border: 1px solid #606060;
    border-radius: 50%;
    color: #606060;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.arrow-img-prev-seller:hover,
.arrow-img-next-seller:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

.arrow-img-prev-seller:active,
.arrow-img-next-seller:active {
    transform: scale(0.95);
}

/* Hide arrows on very small screens for better UX */
@media (max-width: 480px) {
    .arrow-img-navigation {
        right: 0.5rem;
        bottom: 10px;
    }
    
    .arrow-img-prev-seller,
    .arrow-img-next-seller {
        width: 24px;
        height: 24px;
    }
    
    .arrow-img-prev-seller svg,
    .arrow-img-next-seller svg {
        width: 12px;
        height: 12px;
    }
}

/*=====================================
  Add product button css
=====================================*/

button.btn.add-product-btn:active:focus{
	outline: none;
}

button.btn.add-product-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    /* border-radius: 6px; */
    font-size: 14px !important;
    /* width: 157; */
    /* height: 40; */
    gap: 10px;
    border-radius: 10px;
    /* font-family: Red Hat Text; */
    font-weight: 500;
    line-height: 93%;
    /* letter-spacing: 0%; */

    display: flex;
    /* justify-content: center; */
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.add-product-btn:hover {
    background: #ffffff;
    color: #0D1A92;

    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

/*=====================================
  Add Service button css
=====================================*/

button.btn.add-service-btn:active:focus{
	outline: none;
}

button.btn.add-service-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    /* border-radius: 6px; */
    font-size: 14px !important;
    /* width: 157; */
    /* height: 40; */
    gap: 10px;
    border-radius: 10px;
    /* font-family: Red Hat Text; */
    font-weight: 500;
    line-height: 93%;
    /* letter-spacing: 0%; */

    display: flex;
    /* justify-content: center; */
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.add-service-btn:hover {
    background: #ffffff;
    color: #0D1A92;

    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

/*=====================================
  Manage Product Image silder css
=====================================*/

.manage-product-image.custom-slider {
    padding: 5px;
    width: 100%;
    height: 160px; /* Keep this fixed for consistency */
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Slide wrapper */
.custom-slider .slides {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

/* Each slide */
.custom-slider .slide {
    width: 100%;
    height: 100%;
    display: none;
    flex-shrink: 0;

    border-radius: 10px;
}

/* Show active slide */
.custom-slider .slide.active {
    display: block;
}

/* Image styling */
.custom-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #0D1A921A;
    /* background-color: #e0e0e0; */
}

/* Dot container */
.custom-slider .dots {
    position: absolute;
    bottom: 14px;
    left: 1rem;
    display: flex;
    gap: 5px;
    z-index: 2;
    transform: none; /* REMOVE translateX */
}

/* Each dot */
.custom-slider .dot {
    width: 7px;
    height: 7px;
    background-color: #8f8f8f;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Active dot */
.custom-slider .dot.active {
    background-color: #0d1a92;
}

/* Arrow Navigation Styles */
.arrow-img-navigation {
    position: absolute;
    bottom: 14px;
    right: 1rem;
    display: flex;
    gap: 8px;
    z-index: 3;
}

.arrow-img-prev,
.arrow-img-next {
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border: 1px solid #606060;
    border-radius: 50%;
    color: #606060;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.arrow-img-prev:hover,
.arrow-img-next:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

.arrow-img-prev:active,
.arrow-img-next:active {
    transform: scale(0.95);
}

/* Hide arrows on very small screens for better UX */
@media (max-width: 480px) {
    .arrow-img-navigation {
        right: 0.5rem;
        bottom: 10px;
    }
    
    .arrow-img-prev,
    .arrow-img-next {
        width: 24px;
        height: 24px;
    }
    
    .arrow-img-prev svg,
    .arrow-img-next svg {
        width: 12px;
        height: 12px;
    }
}

/*=====================================
  List Business Product
=====================================*/

.price-txt-list{
    font-family: Red Hat Text;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.item-price-list {
    font-family: Red Hat Text;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0D1A92;
    /* padding-bottom: 15px;
    border-bottom: 1px solid #0D1A921A;  */
}

.main-container {
    display: flex;
    height: calc(100vh - 64px);
    max-height: 100%; 
    overflow: auto;
    overflow-x: hidden;
    padding-top: 3px; 
    border-radius: 2rem
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 0 30px;
    background: white;
    border-radius: 2rem;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.product-card {
    cursor: pointer;
    width: 100%;
    margin: 10px 0px;
    border-radius: 15px;
    padding-bottom: 10px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    transition: all 0.3s ease;
    height: 100%;
    background-color: #ffffff;
}

.product-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.listing-view-btn{
    /* width: 170px; */
    padding: 8px 16px;
    /* height: 40; */
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;

    font-weight: 500;
    font-size: 16px;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.listing-view-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

.list-product-image.lisitng-custom-slider {
    padding: 5px;
    width: 100%;
    height: 160px; /* Keep this fixed for consistency */
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Slide wrapper */
.lisitng-custom-slider .slides {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

/* Each slide */
.lisitng-custom-slider .slide {
    width: 100%;
    height: 100%;
    display: none;
    flex-shrink: 0;
    border-radius: 10px;
}

/* Show active slide */
.lisitng-custom-slider .slide.active {
    display: block;
}

/* Image styling */
.lisitng-custom-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #0D1A921A;
    /* background-color: #e0e0e0; */
}

/* Dot container */
.lisitng-custom-slider .dots {
    position: absolute;
    bottom: 14px;
    left: 1rem;
    display: flex;
    gap: 5px;
    z-index: 2;
    transform: none; /* REMOVE translateX */
}

/* Each dot */
.lisitng-custom-slider .dot {
    width: 7px;
    height: 7px;
    background-color: #8f8f8f;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Active dot */
.lisitng-custom-slider .dot.active {
    background-color: #0d1a92;
}

.listing-product-main-title{
    font-family: Red Hat Text;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0D1A92;
}

.product-info {
    padding: 10px 10px;
}

.product-category {
    display: inline-flex; /* inline-flex instead of flex for natural width */
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    padding: 8px 12px;
    color: #212121;
    background-color: #F3F3F3;
    font-weight: 400;
    font-size: 12px;
    margin: 10px 0;
    border: 1px solid #F3F3F3;
    white-space: nowrap; /* Prevent text from wrapping */
}

.product-description {
    color: #212121;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* Show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px; /* Adjust based on your layout */
    min-height: 3em;
}

.product-footer {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.btn-primary-buy-now {
    /* width: 13rem; */
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 1px solid #0D1A92;
}

@media (max-width: 768px) {
    .content-area {
        padding: 20px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* width */
.main-container::-webkit-scrollbar {
    width: 4px;
    height: 2px;
    border-radius: 10px;
}

/* Track */
.main-container::-webkit-scrollbar-track {
    width: 4px;
    border-radius: 10px;
    background-color: rgba(31, 44, 156, 0.7725490196);
}

/* Handle */
.main-container::-webkit-scrollbar-thumb {
    width: 4px;
    border-radius: 10px;
    background-color: #0d1a92;
}

.product-service-name {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    margin-bottom: 5px;
    color: #000000;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px; /* Adjust based on your layout */
}

/* button.btn.go-to-my-cart-btn:active:focus{
	outline: none;
} */
a.btn.go-to-my-cart-btn:focus,
a.btn.go-to-my-cart-btn:active {
    outline: none;
    box-shadow: none;
}

/* button.btn.go-to-my-cart-btn { */
a.btn.go-to-my-cart-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background-color: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    /* font-family: Red Hat Text; */
    font-weight: 500;
    line-height: 93%;
    /* letter-spacing: 0%; */

    display: flex;
    /* justify-content: center; */
    align-items: center;
    text-decoration: none; /* prevent underline */
    transition: all 0.3s ease;
}

/* button.btn.go-to-my-cart-btn:hover { */
a.btn.go-to-my-cart-btn:hover{
    background-color: #ffffff;
    color: #0D1A92 !important;

    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

#productDetailsModal .btn-close,
#serviceDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    color: #000000 !important;
    background-color: #F3F3F3;
    padding: 10 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#productDetailsModal .modal-footer,
#serviceDetailsModal .modal-footer {
    background-color: #F3F3F3;
    /* background-color: #d3e9f7; */
    border-top: 1px solid #9999997a;
}

/** scroll in listing product */
.listing-product-grid-scroll, 
.listing-service-grid-scroll {
    padding-right: 15px;
    max-height: 57vh;
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 1366px) {
    .listing-product-grid-scroll,
    .listing-service-grid-scroll {
        max-height: 57vh;
    }
}

@media screen and (min-width: 1920px) {
    .listing-product-grid-scroll,
    .listing-service-grid-scroll {
        max-height: 60vh;
    }
}

.listing-product-grid-scroll::-webkit-scrollbar-track,
.listing-service-grid-scroll::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.listing-product-grid-scroll::-webkit-scrollbar,
.listing-service-grid-scroll::-webkit-scrollbar {
    width: 3px;
}

.listing-product-grid-scroll::-webkit-scrollbar-thumb,
.listing-service-grid-scroll::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}
/** scroll in listing product */
/* List of products and services page */

/*=====================================
  Product details pop modal
=====================================*/

#manageProductDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    color: #000000 !important;
    background-color: #F3F3F3;
    padding: 8 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#manageProductDetailsModal .modal-footer{
    background-color: #F3F3F3;
    border-top: 1px solid #9999997a;
}

#manageProductDetailsModal .color-option input[type="radio"]:checked + .color-swatch {
    border-color: #999999 !important;
    outline: none !important;
    outline-offset: unset !important;
    transform: none !important;
}

.product-details-title {
    font-size: 24px;
    font-weight: 500;
    /* color: #000000; */
    color: #0d1a92;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: normal;

    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines before ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-details-category {
    display: inline-flex; /* inline-flex instead of flex for natural width */
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    padding: 8px 12px;
    color: #212121;
    background-color: #D3E9F7;
    font-weight: 400;
    font-size: 12px;
    margin: 10px 0;
    /* border: 1px solid #F3F3F3; */
    border: 1px solid #ACACAC;
    white-space: nowrap; /* Prevent text from wrapping */
}

.product-details-tag {
    display: inline-flex;
    justify-content: center;
    background: #D3E9F7;
    font-size: 12px;
    margin-bottom: 10px;
    max-width: 100px !important;
    gap: 10px;
    border-radius: 30px;
    padding: 5px;
    border: 1px solid #ACACAC;
    font-weight: 400;
    color: #212121;
}


.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.product-details-btn-close{
    z-index: 2;
}

.section-title-details {
    font-weight: 500;
    color: #212121;
    font-size: 14px;
    /* border-top: 1px solid #0D1A921A; */
    border-top: 1px solid #9999997a;
    padding: 10px 0px;
}

.product-details-description {
    color: #212121;
    line-height: 1.6;
    margin-bottom: 5px;
    font-size: 13px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.features-list li {
    color: #212121;
    font-size: 13px;
    padding: 2px 0;
    position: relative;
    padding-left: 15px;
}

.features-list li:before {
    content: "•";
    color: #212121;
    font-weight: bold;
    position: absolute;
    left: 0;
}

#productDetailsModal .modal-dialog,
#serviceDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#productDetailsModal .modal-content,
#serviceDetailsModal .modal-content {
    background-color: #d3e9f7;
    border: 2px solid #0d1a92;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;
}

#productDetailsModal .scroll-product-details,
#serviceDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
}

#productDetailsModal .product-details-footer,
#serviceDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

.scroll-product-details{
    padding-right: 15px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll-product-details::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.scroll-product-details::-webkit-scrollbar {
    width: 3px;
}

.scroll-product-details::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}


.custom-swiper-wrapper {
    /* position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden; */
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* spacing between arrow and thumbs */
    overflow: hidden;
}

/* .swiper-thumbs {
    gap: 8px;
    scroll-behavior: smooth;
} */

.thumb-wrapper img {
    border-radius: 12px;
    transition: 0.3s ease;
    cursor: pointer;
}

.thumb-wrapper img.active {
    border: 1px solid #0D1A92;
}

/* .product-swiper-container {
    display: flex;
    align-items: center;
    margin-bottom: 0;
} */

.product-swiper-container {
    flex: 1; /* take all remaining width between arrows */
    overflow: hidden;
}

.product-swiper-container {
    flex: 1; /* take all remaining width between arrows */
    overflow: hidden;
}

/* .swiper-thumbs {
    width: 462px;
    display: flex;
    overflow-x: auto;
    padding: 12px 0px;
}

.swiper-thumbs::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.swiper-thumbs::-webkit-scrollbar {
    height: 3px;
}

.swiper-thumbs::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
} */

.swiper-thumbs {
    width: 450px;
    display: flex;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* IE & Edge */
    justify-content: flex-start;
}

.swiper-thumbs .thumb-wrapper:first-child {
    margin-left: auto;
}
.swiper-thumbs .thumb-wrapper:last-child {
    margin-right: auto;
}

.swiper-thumbs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.swipe-img {
    height: 80px;
    width: 90px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0; /* don’t shrink thumbs */
}

/* .swipe-img {
    height: 80px;
    width: 90px;
    object-fit: cover;
    border-radius: 20px;
} */

.swipe-img.active {
    height: 80px;
    width: 90px;
    border: 1px solid #0D1A92;
    border-radius: 20px;
}

.price-text-footer{
    font-size: 26px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-box {
  font-weight: 700;
  color: #0D1A92;
  width: 56px;
  text-align: center;
  border: none;
  padding: 8px 10px;
  font-size: 18px;
  outline: none;
}

/* Hide the number input spin buttons */
.input-box::-webkit-inner-spin-button,
.input-box::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-box[type="number"] {
  -moz-appearance: textfield;
}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* Arrow buttons */
.swiper-arrow-prev-btn,
.swiper-arrow-next-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: #F3F3F3;
    color: #000;
    /* width: 32px;
    height: 32px; */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* border: 2px solid #fff; */
    border: 2px solid #999999;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

.swiper-arrow-prev-btn {
    left: 0;
}

.swiper-arrow-next-btn {
    right: 0;
}


.section-box {
    margin-bottom: 10px;
}


/* .section-field-title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 500;
    color: #212121;
} */

.color-options {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.color-option {
    position: relative;
    padding: 5px 4px;
    /* border: 2px solid #ccc; */
    border: 2px solid #9999997a;
    background-color: #F3F3F3;
    border-radius: 4px;
    /* cursor: pointer; */
    /* margin-right: 6px; */
    /* margin: 0px !important; */
    transition: all 0.2s ease-in-out;
}

.color-option input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

.color-option input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* .color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.color-option input[type="radio"]:checked + .color-swatch {
    border-color: #333;
    transform: scale(1.1);
} */
.color-swatch {
    /* width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: inline-block;
    cursor: pointer; */
    border: 1px solid #999999;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.color-swatch.active {
    /* border: 2px solid #333; */
    border-color: #000;
}

/* .color-option input[type="radio"]:checked + .color-swatch {
    border-color: #333;
    outline: 2px solid #0d1a92;
    outline-offset: 1px;
    transform: scale(1.05);
} */
.color-option:has(input[type="radio"]:checked) {
    border-color: #333;
    outline: 2px solid #0d1a92;
    outline-offset: 1px;
    transform: scale(1.05);
}

input[name="size"] {
    display: none;
}

input[name="size"]:checked + .size-label {
    /* background-color: #000;
    color: #fff;
    border-color: #000; */
    border-color: #333;
    outline: 2px solid #0d1a92;
    outline-offset: 1px;
    transform: scale(1.05);
}

.color-option input[type="radio"]:focus + .color-swatch {
    /* outline: 1px solid #0d1a92;
    outline-offset: 2px; */
}

.product-color-black { background-color: #000000; }
.product-color-blue { background-color: #0066ff; }
.product-color-pink { background-color: #ff00ff; }
.product-color-gray { background-color: #888888; }
.product-color-orange { background-color: #ff6600; }

.size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.size-option {
    position: relative;
}

.size-option input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.size-label {
    padding: 5px 8px;
    /* border: 2px solid #ccc; */
    border: 2px solid #9999997a;
    background-color: #F3F3F3;
    border-radius: 4px;
    cursor: pointer;
    /* margin-right: 6px; */
    margin: 0px !important;
    transition: all 0.2s ease-in-out;
    /* display: block;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 40px;
    text-align: center; */
}

/* .size-option input[type="radio"]:checked + .size-label {
    background: #333;
    color: white;
    border-color: #333;
} */

.size-option input[type="radio"]:hover + .size-label {
    border-color: #0d1a92;
}

.size-option input[type="radio"]:focus + .size-label {
    outline: 1px solid #0d1a92;
    /* outline-offset: 2px; */
}

.selection-display {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #0066cc;
}

.selection-display h4 {
    margin: 0 0 8px 0;
    color: #333;
}

.selection-display p {
    margin: 0;
    color: #666;
}

.add-to-cart-btn {
    padding: 8px 30px;
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 500;
    font-size: 16px;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.add-to-cart-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

.go-to-cart-btn {
    padding: 8px 30px;
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 500;
    font-size: 16px;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.go-to-cart-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

.purchasing-note{
    padding: 20px 15px !important;
    border: 1px solid #ACACAC !important;
}

/* .add-to-cart-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
} */

.quantity {
    /* width: 128px; */
    width: 146px;
    height: 42px;
    display: flex;
    border: 1px solid #0D1A92;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quantity button {
  font-weight: 700;
  background: #0D1A921A;
  color: #0D1A92;
  border: none;
  cursor: pointer;
  font-size: 30px;
  width: 45px;
  height: auto;
  text-align: center;
}

.quantity button:hover {
  background: #0D1A92;
  color: #ffffff;
}


/*=====================================
  Product Details Image silder css
=====================================*/

.product-image.details-custom-slider {
    /* padding: 5px; */
    width: 100%;
    /* max-width: 480px;  */
    height: 300px;     /* fixed height */
    background: #d3e9f7;
    /* border: 1px solid #0d1a9238; */
    border: 1px solid #9999997a;
    /* border-radius: 10px; */
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

/* Slide wrapper */
.details-custom-slider .slides {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

/* Each slide */
.details-custom-slider .slide {
    width: 100%;
    height: 100%;
    display: none;
    flex-shrink: 0;
}

/* Show active slide */
.details-custom-slider .slide.active {
    display: block;
}

/* Image styling */
.details-custom-slider .slide img {
    /* background-color: #e0e0e0; */
    border-radius: 16px;
    width: 100%;
    max-width: 480px;  /* or any fixed width */
    height: 300px;     /* fixed height */
    object-fit: contain; /* ensures image scales without distortion */
    /* margin: 10px auto; */
    display: block;
}

/* Dot container */
.details-custom-slider .dots {
    position: absolute;
    bottom: 14px;
    left: 1rem;
    display: flex;
    gap: 5px;
    z-index: 2;
    transform: none; /* REMOVE translateX */
}

/* Each dot */
.details-custom-slider .dot {
    width: 7px;
    height: 7px;
    background-color: #8f8f8f;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Active dot */
.details-custom-slider .dot.active {
    background-color: #0d1a92;
}


/** Product Details Image silder css - End **/

/*=====================================
  Add Product pop up modal css
=====================================*/

/* For add product pop up modal */
.add-product-modal .modal-dialog {
    max-width: 800px;
    margin: 1rem auto;
}

.add-product-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.add-product-modal .modal-header {
    padding: 20px !important;
    border-bottom: none;
}

.add-product-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
}

.add-product-modal .close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-product-modal .modal-body {
    /* padding: 20px 30px 30px; */
    padding: 5px 30px 30px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.add-product-modal .modal-body::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.add-product-modal .modal-body::-webkit-scrollbar {
    width: 3px;
}

.add-product-modal .modal-body::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}

.add-product-modal .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.add-product-modal .form-group {
    flex: 1;
}

.add-product-modal .form-group.full-width {
    flex: 1 1 100%;
}

.add-product-modal .form-label {
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
    display: block;

    font-family: Red Hat Text;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;

}

.add-product-modal .form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid #ACACAC;
    border-radius: 8px;
    /* padding: 12px; */
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.add-product-modal .form-control:focus, .form-select:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

.add-product-modal .upload-area {
    border: 1px dashed #ACACAC;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}

.add-product-modal .upload-area:hover {
    border-color: #0d1a92;
}

.add-product-modal .upload-btn {
    border: 1px solid #0d1a92;
    color: #0d1a92;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 8px;
    font-weight: 500;
    line-height: 100%;
}

.add-product-modal .upload-info {
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    /* line-height: 100%; */
}


.add-product-modal .image-size-info{
    font-weight: 400;
    font-size: 12px;
    /* line-height: 100%; */
    color: #212121;
}

.add-product-modal .uploaded-images {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); */
    gap: 15px;
    margin-top: 10px;
}

.add-product-modal .image-item {
    /* position: relative;
    aspect-ratio: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa; */

    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    padding: 6px;
    transition: border 0.3s;

}

.add-product-modal .image-item img {
    /* width: 100%;
    height: 100%;
    object-fit: fill; */
        width: 100%;
    height: 100px;
    object-fit: fill;
    border-radius: 6px;
}

.add-product-modal .image-remove {
    /* position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; */
    position: absolute;
    top: 6px;
    right: 6px;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    line-height: 18px;
    padding: 0;
    text-align: center;
}

.add-product-modal .image-options {
    /* position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 10px; */
    /* text-align: center;
    margin-top: 6px; */
    gap: 4px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 4px !important;
}

.add-product-modal .image-options input[type="radio"] {
    /* margin-right: 3px; */
    accent-color: #0d1a92;
    /* margin-right: 4px; */
}

.add-product-modal .image-options label {
    color: #666;
    font-size: 10px;
    margin: 0;
}

.add-product-modal .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.add-product-modal .tag-item {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.add-product-modal .tag-remove {
    background: none;
    border: none;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
}

.add-product-modal .color-options {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-product-modal .color-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.add-product-modal .color-remove {
    background: none;
    border: none;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
}

.add-product-modal .country-options {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-product-modal .country-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.add-product-modal .country-remove {
    background: none;
    border: none;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
}

.add-product-modal .radio-group {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

.add-product-modal .radio-option {
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.add-product-modal .btn-primary {
    background: #4A90E2;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
}

.add-product-modal .text-danger {
    color: #dc3545;
    font-size: 12px;
    text-decoration: none;
}

.add-product-modal .remove-all {
    color: #dc3545;
    font-size: 12px;
    text-decoration: none;
    float: right;
    margin-top: 5px;
}

.add-product-modal .checkbox-group {
    margin-top: 8px;
}

.add-product-modal .checkbox-option {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.add-product-modal-footer{
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #EFEFEF;
}

.add-product-modal .upload_image_title{
    font-weight: 500;
    font-size: 13px;
    color: #000000;
}

.add-product-modal .remove-all-images-icon{
    color: #ED4C5C;
    font-weight: 400;
    font-size: 13px;
}

.add-product-modal .flaticon-close::before {
    margin-left: 0px;
    font-size: 12px;
    color: #ED4C5C;
}


.country-container-style {
    padding-right: 6px !important;
}

.price-container-style {
	padding-right: 6px !important;
    padding-left: 6px !important;
}

.remove-btn-style{
    top: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
}


button.btn.btn-sm.remove-country-btn:active,
button.btn.btn-sm.remove-country-btn:hover {
    outline: unset;
    box-shadow: unset;
    border: unset;
}

div#addMoreCountryAndPriceFieldBtnContainer,
div#editAddMoreCountryAndPriceFieldBtnContainer,
div#addMoreCountryAndPriceFieldBtnContainerForService,
div#editAddMoreCountryAndPriceFieldBtnContainerForService {
    border: 1px solid #0D1A92;
    border-radius: 6px;
    text-transform: capitalize;
    background: #ffffff;
    color: #0D1A92;
    /* color: #ffffff; */
}

button#addMoreCountryAndPriceFieldBtn,
button#editAddMoreCountryAndPriceFieldBtn,
button#editServiceAddMoreCountryAndPriceFieldBtn,
button#addMoreCountryAndPriceFieldBtnService {
    font-weight: 500;
    padding: 8px;
    color: #0D1A92 !important;
    background: #ffffff !important;
}

button#addMoreCountryAndPriceFieldBtn:hover,
button#editAddMoreCountryAndPriceFieldBtn:hover,
button#editServiceAddMoreCountryAndPriceFieldBtn:hover,
button#addMoreCountryAndPriceFieldBtnService:hover {
    color: #0D1A92 !important;
    background: #ffffff !important;
}

button#addMoreCountryAndPriceFieldBtn:active:focus,
button#editAddMoreCountryAndPriceFieldBtn:active:focus,
button#editServiceAddMoreCountryAndPriceFieldBtn:active:focus,
button#addMoreCountryAndPriceFieldBtnService:active:focus {
	outline: none;
}


span.add_more_style {
    font-weight: 600;
    font-size: 11px;
}

button.btn.btn-sm.remove-country-btn.focus,
button.btn.btn-sm.remove-country-btn:hover {
    box-shadow: unset;
    border: unset;
    box-shadow: unset;
    outline: unset;
    text-decoration: unset;
}

.add-product-modal i.fa.fa-times {
    color: #ED4C5C;
    background: #ffffff;
    padding: 4px 4px;
    border-radius: 4px;
    border: 1px solid #ED4C5C;
}
/* For Add product pop modal - End */


/*=====================================
  Edit product modal
=====================================*/

.edit-product-modal-footer{
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #EFEFEF;
}

button.btn.edit-product-service-btn:active:focus{
	outline: none;
}

button.btn.edit-product-service-btn {
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.edit-product-service-btn:hover {
    background: #ffffff;
    color: #0D1A92;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346);
}

.edit-radio-option {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
    flex: 1; /* This makes each option take 50% width */
    justify-content: flex-start;
    padding: 8px;
    gap: 5px;
}

.edit-radio-option:hover {
    /* border-color: #007bff;
    background-color: #f8f9ff; */
    border-color: #0d1a92 !important;
    box-shadow: none !important;
}

.edit-radio-option.selected {
    border-color: #0d1a92;
    background-color: #f0f7ff;
}

.edit-radio-option input[type="radio"] {
    width: 13px;
    height: 13px;
    margin-top: 0px !important;
    margin-right: 2px !important;
    /* margin: 0px !important; */
    cursor: pointer;
    accent-color: #0D1A92; 
    border: 1px solid #ddd;
    /* border-radius: 50%; */
    /* position: relative; */
    transition: all 0.2s ease;
}

.edit-radio-option label {
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
}

.edit-radio-option.selected label {
    color: #0d1a92;
}

/*=====================================
  My Cart Page CSS
=====================================*/
.my-cart-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px;
}

.my-cart-header {
    display: flex;
    align-items: center;
    /* margin-bottom: 30px; */
    padding-bottom: 15px;
    /* border-bottom: 1px solid #e9ecef; */
}


.my-cart-product-item {
    /* width: 100%;
    cursor: pointer;
    margin: 10px 0px;
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    display: flex;
    align-items: center;
    padding: 16px 20px; */
    display: grid;
    /* grid-template-columns: 7fr 2fr 2fr 1fr; */
    grid-template-columns: 6fr 2fr 3fr 1fr;
    align-items: center;
    /* gap: 16px; */
    gap: 10px;
    /* padding: 16px 20px; */
    padding: 10px 12px;
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.my-cart-product-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.my-cart-product-item .product-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.my-cart-remove-btn-container {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .my-cart-product-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .my-cart-remove-btn-container {
        justify-content: flex-start;
    }
}

.grid-header {
    display: grid;
    /* grid-template-columns: 7fr 2fr 2fr 1fr; */
    grid-template-columns: 10fr 4fr 5fr 1fr;
    align-items: center;
    /* gap: 16px; */
    margin-bottom: 16px;
}

.my-cart-header-title{
    font-weight: 500;
    font-size: 16px;
    color: #606060;
    margin-left: 12px;
}

.my-cart-back-btn {
    background: none;
    border: none;
    color: #0D1A92;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    transition: background-color 0.2s;
}

.my-cart-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    color: #0D1A92;
}

.my-cart-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;

    padding: 5px 15px 15px;
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
}


@media screen and (max-width: 1366px) {
    .my-cart-main {
        max-height: 65vh;
    }
}

@media screen and (min-width: 1920px) {
    .my-cart-main {
        max-height: 67vh;
    }
}

.my-cart-main::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.my-cart-main::-webkit-scrollbar {
    width: 3px;
}

.my-cart-main::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .my-cart-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.my-cart-products-section {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.my-cart-product-image {
    /* width: 60px;
    height: 60px; */
    width: 70px;
    height: 70px;
    /* background: linear-gradient(135deg, #8b7355, #6d5a47); */
    border-radius: 8px;
    margin-right: 16px;
    flex-shrink: 0;
}

.my-cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-color: #F5F6FB;
    padding: 5px;
}

.my-cart-product-details {
    flex-grow: 1;
    margin-right: 16px;
    /* width: 220px; */
    width: 100px;
}

.my-cart-product-name {
    color: #000000;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 18px;

    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-cart-product-color,
.my-cart-product-size {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 20px;
}

.my-cart-product-color-label,
.my-cart-product-size-label {
    font-weight: 400;
    font-size: 13px;
    color: #3C3C3C;
}


.my-cart-product-color-value,
.my-cart-product-size-value {
    width: 60%;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.my-cart-color-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #0000FF; /* Replace with dynamic color */
    border: 1px solid #999999;
}

.my-cart-product-price {
    align-items: center;
    justify-content: center;
    display: flex;
    color: #0D1A92;
    font-weight: 700;
    font-size: 20px;
}

.my-cart-remove-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ed4c5c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #dc2626;
    transition: all 0.2s;
}

.my-cart-remove-btn:hover {
    background: #fecaca;
}

.my-cart-clear-btn {
    border: none;
    background-color: #ED4C5C1A;
    color: #ED4C5C;
    cursor: pointer;
    padding: 8px 0;
    /* margin-top: 16px; */
    transition: color 0.2s;
    font-weight: 500;
    font-size: 16px;
    gap: 10px;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    bottom: 20;
    left: 20;
}

.my-cart-clear-btn:hover {
    background-color: #fecaca;
    text-decoration: none;
}

.my-cart-summary-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
    position: sticky;
    /* top: 20px; */
    /* background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: fit-content;
    position: sticky;
    top: 20px; */
}

/* Block 1: Payment Summary */
.my-cart-payment-summary-block {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}


.my-cart-summary-title {
    margin-bottom: 10px;
    color: #000000;
    font-weight: 600;
    font-size: 18px;
}

.my-cart-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    align-items: center;
}

.my-cart-summary-label {
    font-weight: 400;
    font-size: 14px;
    color: #3C3C3C;
}

.my-cart-summary-value {
    font-weight: 600;
    font-size: 16px;
    color: #3C3C3C;
}

.my-cart-summary-value.discount {
    font-weight: 600;
    font-size: 16px;
    color: #23B950;
}

.my-cart-total-row {
    display: flex;
    justify-content: space-between;
}

.my-cart-total-label {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}

.my-cart-total-value {
    font-weight: 600;
    font-size: 18px;
    color: #0D1A92;
}

/* Block 2: Delivery & Email Form */
.my-cart-form-block {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.my-cart-form-title {
    margin-bottom: 12px;
    color: #000000;
    font-weight: 500;
    font-size: 14px;
}

.my-cart-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.my-cart-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ACACAC !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
}

input.form-control.my-cart-input{
    color: #000000;
    font-size: 14px !important;
}

textarea.form-control.my-cart-input{
    color: #000000;
    font-size: 14px !important;
}

 /* Block 3: Payment Method */
.my-cart-payment-block {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.my-cart-payment-section {
    margin: 24px 0;
}

.my-cart-payment-option {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    border: 1px solid #ACACAC;
    border-radius: 8px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.my-cart-payment-option:hover {
    border-color: #0D1A92;
}

.my-cart-payment-option.selected {
    border-color: #0D1A92;
}

.my-cart-payment-radio {
    margin-right: 12px;
}
/* 
.my-cart-payment-option input[type="radio"] {
    accent-color: #0D1A92; 
} */

.my-cart-payment-option input[type="radio"] {
    width: 15px;
    height: 15px;
    margin-top: 0px !important;
    margin-right: 3px !important;
    cursor: pointer;
    accent-color: #0D1A92; 
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.my-cart-payment-icon {
    width: 25;
    height: 25;
    margin-right: 10px;
}


.my-cart-quantity {
    width: 110px;
    height: 34px;
    display: flex;
    border: 1px solid #0D1A92;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-cart-quantity button {
  font-weight: 700;
  background: #0D1A921A;
  color: #0D1A92;
  border: none;
  cursor: pointer;
  font-size: 21px;
  width: 30px;
  height: auto;
  text-align: center;
}

.my-cart-quantity button:hover {
  background: #0D1A92;
  color: #ffffff;
}


.input-box-qty-value {
    width: 55px;
    text-align: center;
    border: none;
    padding: 8px 10px;
    outline: none;
    font-weight: 700;
    color: #0D1A92;
    font-size: 16px;
}

/* Hide the number input spin buttons */
.input-box-qty-value::-webkit-inner-spin-button,
.input-box-qty-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-box-qty-value[type="number"] {
  -moz-appearance: textfield;
}

.full-divider {
  height: 1px;
  background-color: #EFEFEF; /* Tailwind's gray-300 */
  margin: 16px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.my-cart-payment-title{
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

a.btn.my-cart-checkout-btn {
    justify-content: center;
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background-color: #0D1A92;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

a.btn.my-cart-checkout-btn:hover{
    background-color: #ffffff;
    color: #0D1A92;
}

a.btn.my-cart-checkout-btn:focus{
    background-color: #0D1A92;
    color: #ffffff !important;
}

/*=====================================
  Payment Success Page CSS
=====================================*/

.thank-you-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.thank-you-container {
    background: white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    max-width: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.thank-you-icon-container img{
    animation: thank-you-pulse 2s infinite;
    /* width: 100px; */
    margin-right: 20px;
    height: 150px;
}

@keyframes thank-you-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.thank-you-title {
    color: #289E4E;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
}

.thank-you-order-label {
    color: #3C3C3C;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
}

.thank-you-order-label span{
    color: #3C3C3C;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
}

.thank-you-amount-section {
    margin: 20px 135px;
    padding: 10px;
    background-color: #8280FF0D;
    border-radius: 8px;
}

.thank-you-amount-label {
    color: #000000;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.thank-you-amount {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #23B950;
}

/* .thank-you-back-btn {
    padding: 8px 16px;
    color: #ffffff;
    background-color: #0D1A92;
    border-radius: 10px;
    border: 1px solid #0D1A92;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
}

.thank-you-back-btn:hover {
    color: #0D1A92;
    background-color: #ffffff;
} */
.thank-you-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.thank-you-back-btn {
    flex: 1; /* Makes both buttons take equal available space */
    max-width: 150px; /* Optional: controls max size */
    padding: 10px 20px;
    color: #0D1A92;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #0D1A92;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.thank-you-back-btn:hover {
    color: #ffffff;
    background-color: #0D1A92;
}

/*=====================================
  Payment Cancel Page CSS
=====================================*/

.payment-cancel-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.payment-cancel-container {
    background: white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    max-width: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.payment-cancel-icon-container img{
    animation: cross-icon 2s infinite;
    /* width: 100px; */
    margin-right: 20px;
    height: 150px;
}

@keyframes cross-icon {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.payment-cancel-title {
    color: #ff9500;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
}

.payment-cancel-order-label {
    color: #3C3C3C;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
}

.payment-cancel-order-label span{
    color: #3C3C3C;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
}

.payment-cancel-amount-section {
    margin: 20px 135px;
    padding: 10px;
    background-color: #8280FF0D;
    border-radius: 8px;
}

.payment-cancel-amount-label {
    color: #000000;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.payment-cancel-amount {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #ff9500;
}

.payment-cancel-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.payment-cancel-back-btn {
    flex: 1; /* Makes both buttons take equal available space */
    max-width: 150px; /* Optional: controls max size */
    padding: 10px 20px;
    color: #0D1A92;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #0D1A92;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.payment-cancel-back-btn:hover {
    color: #ffffff;
    background-color: #0D1A92;
}

/*=====================================
  My Order For Buyer Page CSS
=====================================*/

.my-order-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px;
}

.my-order-container-box {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px;
}

.my-order-header {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.my-order-back-btn {
    background: none;
    border: none;
    color: #0D1A92;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    transition: background-color 0.2s;
}

.my-order-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    color: #0D1A92;
}

.my-order-card {
    /* background: #fff; */
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #0D1A921A;
    overflow: hidden;
    transition: all 0.3s ease;
}

.my-order-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.my-order-header-box {
    /* padding: 1.5rem; */
    padding: 15px 20px;
    background-color: #FFFFFF;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); */
}

.my-order-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.my-order-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.my-order-info-second{

    gap: 1rem;
    align-items: center;
}

.my-order-id {
    color: #3C3C3C;
    font-weight: 500;
    font-size: 18px;
}

.my-order-id span {
    margin-left: 2px;
    color: #000000;
    font-weight: 500;
    font-size: 18px;
}

.my-order-status {
    background: #FF7E0C;
    color: #ffffff;
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.my-order-date {
    font-weight: 500;
    font-size: 16px;
    color: #212121;
}

.my-order-date-title{
    color: #3C3C3C;
    font-weight: 500;
    font-size: 14px;
}

.my-order-buyer-address-label{
    color: #3C3C3C;
    font-weight: 500;
    font-size: 14px;
}

.my-order-buyer-address-value {
    font-weight: 500;
    font-size: 16px;
    color: #212121;
    white-space: nowrap;      /* Prevents line breaks */
    overflow: hidden;         /* Hides overflow text */
    text-overflow: ellipsis;  /* Shows "..." when text is truncated */
    max-width: 600px;         /* Adjust width as per your layout */
    display: inline-block;    /* Needed for ellipsis to work */
    vertical-align: middle;
}

@media screen and (max-width: 1366px) {
    .my-order-buyer-address-value {
         max-width: 600px;  
    }
}

@media screen and (min-width: 1920px) {
    .my-order-buyer-address-value {
         max-width: 700px;  
    }
}

.my-order-total {
    color: #3C3C3C;
    font-weight: 500;
    font-size: 16px;
    text-align: right;
}

.my-order-total span{
    margin-left: 3px;
    font-weight: 700;
    font-size: 18px;
    color: #0D1A92;
    text-align: right;
}

.my-order-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.my-order-invoice-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-order-track-btn {
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    background: #0D1A92;
    color: #ffffff !important;
    border: 1px solid #0D1A92;
}

.my-order-track-btn:focus {
    background: #0D1A92;
    color: #ffffff !important;
}

.my-order-track-btn:hover {
    background: #ffffff;
    color: #0D1A92 !important;
}

.my-order-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fff;
}

.my-order-details.expanded {
    max-height: 1000px;
}

.my-order-products {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.my-order-expand-icon {
    /* float: right; */
    transition: transform 0.3s ease;
    color: #0d1a92;
    background-color: #0d1a9217;
    padding: 10px;
    border-radius: 60px;
    height: 29px;
    width: 28px;
    align-items: center;
}

.my-order-card.expanded .my-order-expand-icon {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .my-order-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-order-info {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .my-order-actions {
        align-self: stretch;
        justify-content: space-between;
    }

    .my-order-product-grid {
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(2, 1fr);
    }

    .my-order-product-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.download-icon-for-invoice{
    height: 20px;
    width: 20px;
    margin-right: 4px;
}

.download-title-for-invoice{
    font-weight: 500;
    font-size: 14px;
    color: #0D1A92;
}

/** scroll in my order */
.my-orders-grid-scroll {
    padding-right: 15px;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 1366px) {
    .my-orders-grid-scroll {
        max-height: 75vh;
    }
}

@media screen and (min-width: 1920px) {
    .my-orders-grid-scroll {
        max-height: 80vh;
    }
}

.my-orders-grid-scroll::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.my-orders-grid-scroll::-webkit-scrollbar {
    width: 3px;
}

.my-orders-grid-scroll::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}
/** scroll in my order */

.buy-again-quantity {
    /* width: 128px; */
    width: 115px;
    height: 35px;
    display: flex;
    border: 1px solid #0D1A92;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.buy-again-quantity button {
  font-weight: 700;
  background: #0D1A921A;
  color: #0D1A92;
  border: none;
  cursor: pointer;
  font-size: 25px;
  width: 40px;
  height: auto;
  text-align: center;
}

.buy-again-quantity button:hover {
  background: #0D1A92;
  color: #ffffff;
}

.buy-again-input-box {
  font-weight: 700;
  color: #0D1A92;
  width: 55px;
  text-align: center;
  border: none;
  padding: 8px 10px;
  font-size: 18px;
  outline: none;
}

/* Hide the number input spin buttons */
.buy-again-input-box::-webkit-inner-spin-button,
.buy-again-input-box::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.buy-again-input-box[type="number"] {
  -moz-appearance: textfield;
}

.my-order-quantity {
    /* width: 128px; */
    width: 146px;
    height: 42px;
    display: flex;
    border: 1px solid #0D1A92;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-order-quantity button {
  font-weight: 700;
  background: #0D1A92;
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 30px;
  width: 45px;
  height: auto;
  text-align: center;
}

.my-order-quantity button:hover {
  background: #0D1A92;
  color: #ffffff;
}

/* ============================== */


.my-order-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.my-order-product-item {
    position: relative; /* Required for absolute positioning inside */
    /* display: flex; */
    /* grid-template-columns: 7fr 2fr 2fr 1fr; */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    /* margin: 10px 0; */
    transition: all 0.3s ease;
    
}

.my-order-pro-info {
    padding: 10px 10px;
}

.my-order-product-item .my-order-pro-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.my-order-product-image {
    width: 95px;
    height: 100px;
    /* background: linear-gradient(135deg, #8b7355, #6d5a47); */
    border-radius: 8px;
    margin-right: 10px;
    flex-shrink: 0;
}

.my-order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-color: #F5F6FB;
    padding: 5px;
}

.my-order-product-details {
    flex-grow: 1;
    margin-right: 16px;
    width: 220px;
}

.my-order-product-name {
    color: #000000;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 18px;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.my-order-product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 20px;
}

.my-order-product-price-label {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}

.my-order-product-price-value {
    width: 60%;
    font-weight: 500;
    font-size: 18px;
    color: #0D1A92;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-order-buy-again-div{
    display: flex;
    align-items: center;
}

.my-order-buy-again-btn {
    padding: 6px 12px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    background: #0D1A92;
    color: #ffffff !important;
    border: 1px solid #0D1A92;
}

.my-order-buy-again-btn:hover {
    background: #ffffff;
    color: #0D1A92 !important;
}


.my-order-view-details-div {
    position: absolute;
    top: 12px;
    right: 12px;
}

.my-order-view-details-btn {
    padding: 8px 14px;
    background-color: #ffffff;
    color: #0D1A92;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #0D1A92;
}

.my-order-view-details-btn:hover {
    color: #0D1A92 !important;
}


.buyer-order-details-business {
    /* margin-top: 10px; */
    padding: 10px;
    /* border-top: 1px solid #eee; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-radius: 0 0 10px 10px;
    background: #F9F9F9;
    border-radius: 10px;
}

.buyer-order-details-business-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buyer-order-details-business-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.buyer-order-details-business-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buyer-order-details-business-name {
    font-size: 15px;
    font-weight: 500;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px; /* adjust based on design */
}

.buyer-order-details-business-name a {
    color: #212121 !important;
}

.order-actions-wrapper {
    display: flex;
    justify-content: space-between; /* push message to the right */
    align-items: center;
    flex-wrap: wrap; /* in case it shrinks on small screens */
    gap: 1rem;
    margin-top: 10px;
}

.buyer-order-details-business-action {
    flex-shrink: 0;
}

.buyer-order-details-message-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #0D1A92;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

/* .buyer-order-details-message-btn:hover {
    background: #0D1A92;
    color: #fff;
} */

/*=====================================
  Order Track pop up modal css
=====================================*/

/* For track my order pop up modal */
.track-my-order-modal .modal-dialog {
    max-width: 800px;
    margin: 1rem auto;
}

.track-my-order-modal .modal-content {
    border-radius: 20px;
    border: 1px solid #ACACAC;
}

.track-my-order-modal .modal-header {
    padding: 20px !important;
    border-bottom: none;
}

.track-my-order-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
}

.track-my-order-modal .btn-close {
    font-size: 12px;
    color: #212121 !important;
    background-color: #0D1A920D;
    padding: 10 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-my-order-id {
    text-align: right;
}

.track-my-order-id-label {
    color: #3C3C3C;
    font-weight: 400;
    font-size: 13px;
}

.track-my-order-id-value {
    margin-top: 2px;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
}

.track-my-order-modal .modal-body {
    /* padding: 20px 30px 30px; */
    padding: 5px 20px 20px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.track-my-order-modal .modal-body::-webkit-scrollbar-track {
    background: #CFD4FF;
}

.track-my-order-modal .modal-body::-webkit-scrollbar {
    width: 3px;
}

.track-my-order-modal .modal-body::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}

.track-my-order-product-item {
    /* position: relative; 
    display: flex; */
    /* grid-template-columns: 7fr 2fr 2fr 1fr; */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    box-shadow: 0px 2px 5px 0px #ccd0d2;
    /* margin: 10px 0; */
    transition: all 0.3s ease;
}

.track-my-order-pro-info {
    /* padding: 10px 10px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.track-my-order-left {
    width: 80%;
    display: flex;
    align-items: center; /* This vertically centers the image and details */
    gap: 16px;
}

.track-my-order-product-image {
    width: 75px;
    height: 74px;
    border-radius: 8px;
    margin-right: 10px;
    flex-shrink: 0;
}

.track-my-order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-color: #F5F6FB;
    padding: 5px;
}

.track-my-order-product-details {
    width: 75%;
    /* flex-grow: 1; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin-right: 16px;
    width: 220px; */
}

.track-my-order-product-name {
    color: #000000;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 18px;
    /* width: 65%; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.track-my-order-product-price {
    /* display: flex;
    align-items: center; */
    gap: 8px;
    line-height: 20px;
}

.track-my-order-product-price-label {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
}

.track-my-order-product-price-value {
    width: 60%;
    font-weight: 500;
    font-size: 18px;
    color: #0D1A92;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-order-track-container {
    max-width: 500px;
    margin: 2rem auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.my-order-track-title {
    font-weight: 500;
    font-size: 14px;
    color: #5C5C5C;
    padding: 8px 18px;
}

.my-order-track-content {
    padding: 15px 12px;
}

.my-order-track-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 13px;
    position: relative;
}

.my-order-track-step:last-child {
    margin-bottom: 0;
}

.my-order-track-step::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 20px;
    width: 2px;
    height: calc(100% + 1rem);
    background: #e9ecef;
}

.my-order-track-step:last-child::after {
    display: none;
}

.my-order-track-step.completed::after {
    background: #28a745;
}

.my-order-track-icon-wrapper {
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    position: relative;
    z-index: 1;
}

.my-order-track-step.completed .my-order-track-icon-wrapper {
    background: #28a745;
    color: white;
}

.my-order-track-step.pending .my-order-track-icon-wrapper {
    background: #e9ecef;
    border: 2px solid #dee2e6;
    color: #6c757d;
}

.my-order-track-step.cancelled .my-order-track-icon-wrapper {
    background: #dc3545;
    border: 2px solid #dee2e6;
    /* color: #dc3545; */
}

span.cross_arrow {
    color: #ffffff;
}

.my-order-track-step-content {
    flex: 1;
    padding-top: 2px;
}

.my-order-track-step-title {
    margin-bottom: 0.5rem;
    color: #000000;
    font-weight: 500;
    font-size: 15px;
}

.my-order-track-step.pending .my-order-track-step-title {
    color: #6c757d;
}

.my-order-track-step-details {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.my-order-track-detail-group {
    flex: 1;
}

.my-order-track-detail-label {
    margin-bottom: 0.25rem;
    font-weight: 400;
    font-size: 13px;
    color: #3C3C3C;
}

.my-order-track-detail-value {
    color: #3C3C3C;
    font-weight: 500;
    font-size: 13px;
}

.my-order-track-step.pending .my-order-track-detail-value {
    color: #adb5bd;
}

.my-order-track-icon {
    font-size: 14px;
}

@media (max-width: 576px) {
    .my-order-track-container {
        margin: 1rem;
        border-radius: 8px;
    }

    .my-order-track-step-details {
        flex-direction: column;
        gap: 1rem;
    }
}


.my-order-reject-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    background: #ED4C5C;
    color: #ffffff !important;
    border: 1px solid #ED4C5C;
}

.my-order-reject-btn:hover {
    background: #ffffff;
    color: #ED4C5C !important;
}

.my-order-accept-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    background: #23B950;
    color: #ffffff !important;
    border: 1px solid #23B950;
}

.my-order-accept-btn:hover {
    background: #ffffff;
    color: #23B950 !important;
}



.seller-order-details-selection-row {
    margin-left: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 576px) {
    .seller-order-details-selection-row {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

.seller-order-details-selection-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.seller-order-details-selection-label {
    color: #212121;
    font-weight: 500;
    font-size: 14px;
}

.seller-order-details-color-option {
    border: 1px solid #999999;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.seller-order-details-color-option.seller-order-details-selected {
    border-color: #0D1A92;
    transform: scale(1.1);
}

/* .seller-order-details-color-option.seller-order-details-black {
    background-color: #000000;
} */

.seller-order-details-color-option.seller-order-details-white {
    background-color: #fff;
}

.seller-order-details-color-option.seller-order-details-silver {
    background-color: #c0c0c0;
}


.seller-order-details-size-option {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 20px;
    width: 20px;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    color: #0D1A92;
}

.border-set-for-color{
    padding: 5px;
    border: 1px solid #0D1A92;
    border-radius: 1px;
}

 #trackOrderViewDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#trackOrderViewDetailsModal .modal-content {
    background-color: #d3e9f7;
    border: 2px solid #0d1a92;

    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;
}

#trackOrderViewDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
}

#trackOrderViewDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

#trackOrderViewDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    color: #000000 !important;
    background-color: #F3F3F3;
    padding: 8 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#trackOrderViewDetailsModal .modal-footer{
    background-color: #F3F3F3;
    /* background-color: #F3F3F3; */
    border-top: 1px solid #9999997a;
}
/* For track my order pop modal - End */

/*=====================================
  Seller My order css
=====================================*/

 #sellerOrderViewDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#sellerOrderViewDetailsModal .modal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;

    background-color: #d3e9f7;
    border: 2px solid #0d1a92;
}

#sellerOrderViewDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
    max-height: 58vh;
}


@media screen and (max-width: 1366px) {
    #sellerOrderViewDetailsModal .scroll-product-details {
        max-height: 58vh;
    }
}

@media screen and (min-width: 1920px) {
    #sellerOrderViewDetailsModal .scroll-product-details {
        max-height: 62vh;
    }
}


#sellerOrderViewDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}


.delivery-status-label{
    font-weight: 500;
    font-size: 14px;
    color: #000000;
}

button.btn.update-order-status-btn{
    border-radius: 8px;
    padding: 8px 15px;
    background-color: #0D1A92;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px !important;
    text-transform: capitalize;
    border: 1px solid #0D1A92;
}

button.btn.update-order-status-btn:hover{
    border: 1px solid #0D1A92;
    color: #0D1A92;
    background-color: #ffffff;
}

button.btn.update-order-status-btn:active:focus{
	outline: none;
}

#sellerOrderViewDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    color: #000000 !important;
    background-color: #F3F3F3;
    padding: 8 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#sellerOrderViewDetailsModal .modal-footer{
    background-color: #F3F3F3;
    /* background-color: #EFEFEF; */
    border-top: 1px solid #9999997a;
}

.manage-seller-order-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem;
    /* border-bottom: 1px solid #e5e5e5; */
    padding: 10px 0;
}

.manage-seller-order-col {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    /* min-width: 150px; Adjust as needed */
}

/* Remove left border for first column */
.manage-seller-order-col:first-child {
    border-left: none;
    padding-left: 0;
}

/* Column widths */

.manage-seller-order-row.w-100 { flex: 0 0 100%; max-width: 100%; }
.manage-seller-order-col.w-10 { flex: 0 0 10%; max-width: 10%; }
.manage-seller-order-col.w-15 { flex: 0 0 15%; max-width: 15%; }
.manage-seller-order-col.w-25 { flex: 0 0 25%; max-width: 25%; }
.manage-seller-order-col.w-20 { flex: 0 0 20%; max-width: 20%; }
.manage-seller-order-col.w-30 { flex: 0 0 30%; max-width: 30%; }

.manage-seller-order-title {
    /* font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 3px;

     */
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    color: #3C3C3C;
}

.manage-seller-order-value {
    /* font-size: 14px; */
    /* font-weight: 600; */
    color: #212121;
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    font-weight: 500;
    font-size: 16px;

    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-line-clamp: 1;       /* show max 1 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;         /* override nowrap */
}

/* Divider like in your screenshot */
.manage-seller-order-col + .manage-seller-order-col {
    /* border-left: 1px solid #dcdcdc;
    padding-left: 1.5rem; */
}

/* Responsive handling */
@media screen and (max-width: 768px) {
    .manage-seller-order-row {
        flex-direction: column;
        /* align-items: flex-start;
        gap: 0.8rem; */
    }

    .manage-seller-order-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
}

.seller-order-details-business-action {
    margin-left: auto; /* ensures message goes to right */
}

.seller-order-details-message-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #0D1A92;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #F9F9F9;
    cursor: pointer;
}

.view-description-btn{
    font-weight: 500;
    font-size: 12px;
    color: #0D1A92;
}

.view-description-btn:hover{
    color: #0D1A92;
}

/* .clear-search-icon {
    z-index: 10;
    position: absolute;
    right: 127px;  
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: #3c3c3c;
    font-weight: bolder;
}

.clear-search-icon:hover {
    font-weight: bolder;
    color: #000000;
} */

/*=====================================
  Add service Modal from Seller css
=====================================*/

.add-service-modal-tier {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.add-service-modal-tier-header {
    border-radius: 8px;
    /* padding: 12px; */
    font-size: 14px;
    transition: border-color 0.3s ease;
    width: 100%;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    background-color: #ffffff;
    text-align: left;
    padding: .375rem .75rem;
    cursor: pointer;
    border: 1px solid #EFEFEF;
    background: #fff;
    
}

.add-service-modal-tier-header:focus {
    outline: none;
}

.add-service-modal-tier-body {
    padding: 10px 10px;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

.add-service-modal-textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: none;
}

.pricing-tier-expand-icon {
    font-size: 15px;
    position: relative;
    /* top: 3px; */
    transition: transform 0.3s ease;
    color: #0D1A92;
}

.add-service-modal-tier.expanded .pricing-tier-expand-icon {
    transform: rotate(180deg);
}

.add-service-modal-arrow {
    transition: transform 0.3s ease;
}
.add-service-modal-arrow.rotate {
    transform: rotate(180deg);
}
.add-service-modal-item {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.add-service-modal-actions i {
    cursor: pointer;
    margin-left: 10px;
    color: #001f9c;
}

button.btn.add-service-modal-add-btn:active:focus{
	outline: none;
}

button.btn.add-service-modal-add-btn {
    margin-top: 22px;
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 8px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.add-service-modal-add-btn:hover {
    background: #ffffff;
    color: #0D1A92;
    /* transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346); */
}

.add-service-modal-toggle{
    width: 110px;
    font-weight: 500;
    font-size: 12px;
    color: #0D1A92;
}

.add-service-modal-toggle a:hover, a:focus{
    color: #0D1A92 !important;
}

.add-service-modal-add-on-name{
    font-weight: 500;
    font-size: 14px;
    color: #000000;
}

.add-service-modal-add-on-price{
    font-weight: 500;
    font-style: Medium;
    font-size: 13px;
    color: #3C3C3C;
}

/*=====================================
  view service Modal from Seller css
=====================================*/

.custom-service-view-btn{
    width: 170px;
    padding: 12px 16px;
    height: 40;
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;

    font-family: Red Hat Text;
    font-weight: 500;
    font-size: 16px;
    line-height: 74%;
    letter-spacing: 0%;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.custom-service-view-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

#manageViewServiceDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#manageViewServiceDetailsModal .modal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;
    
    background-color: #d3e9f7;
    border: 2px solid #0d1a92;
}

#manageViewServiceDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
}

#manageViewServiceDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

#manageViewServiceDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    color: #000000 !important;
    background-color: #F3F3F3;
    padding: 8 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#manageViewServiceDetailsModal .modal-footer{
    background-color: #F3F3F3;
    /* background-color: #EFEFEF; */
    border-top: 1px solid #9999997a;
}

#manageViewServiceDetailsModal .color-option input[type="radio"]:checked + .color-swatch {
    border-color: transparent !important;
    outline: none !important;
    outline-offset: unset !important;
    transform: none !important;
}

.service-details-category {
    display: inline-flex; /* inline-flex instead of flex for natural width */
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    padding: 8px 12px;
    color: #212121;
    background-color: #D3E9F7;
    font-weight: 400;
    font-size: 12px;
    margin: 10px 0;
    /* border: 1px solid #F3F3F3; */
    border: 1px solid #ACACAC;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Section Titles */
.view-service-details-section-title {
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin-bottom: 8px;
}

/* Add-ons grid */
.view-service-details-addons-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 per row */
    gap: 6px; /* row-gap col-gap */
}

.view-service-details-addon {
    /* align-items: center;
    position: relative;
    padding-left: 22px; */
    /* align-items: center;
    position: relative;
    padding-left: 0;
    display: flex;
    gap: 6px; */
    display: flex;
    /* align-items: flex-start; */
    align-items: center;
    gap: 12px;
    cursor: pointer;
    /* border: 1px solid #ddd; */
    border: 1px solid #9999997a;
    border-radius: 6px;
    padding: 6px;
    /* background: #fafafa; */
    background: #d3e9f7;
    transition: 0.2s;
}

.view-service-details-addon:hover {
    border-color: #0D1A92;
    background: #f3f6ff;
}

/* Hide default checkbox */
.view-service-details-addon input[type="checkbox"] {
    /* display: none; */
    /* position: absolute;
    opacity: 0; */
    /* margin-top: 0;
    width: 16px;
    height: 16px;
    accent-color: #0D1A92;
    background-color: #0D1A921A;
    border-radius: 4px;
    cursor: pointer; */
    /* margin-top: 2px; */
    width: 15px;
    height: 15px;
    accent-color: #0D1A92;
    border-radius: 4px;
    cursor: pointer;
}

.view-service-details-addon.addon-selected {
    border-color: #0D1A92;
    background: #d3e9f7;
}

.readonly-input {
    pointer-events: none;
}

.addon-text {
    display: flex;
    flex-direction: column;
}

.addon-title {
    display: inline-block;
    max-width: 166px;  /* adjust for grid width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Red Hat Text;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
}

.addon-price {
    font-size: 12px;
    color: #0D1A92;
    font-weight: 500;
    display: inline-block;
    max-width: 166px;  /* adjust for grid width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 
.view-service-details-addon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid #bbb;
    background: #fff;
} */

/* Checked state via :has() */
/* .view-service-details-addon:has(input[type="checkbox"]:checked)::before {
    background: #0D1A92;
    border-color: #0D1A92;
    content: "✔";
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* Only show first 6 addons */
.view-service-details-addons-list .view-service-details-addon:nth-child(n+5) {
    display: none;
}

/* Expanded state (show all) */
.view-service-details-addons-list.expanded .view-service-details-addon {
    display: flex;
}

.view-service-details-view-all{
    font-weight: 500;
    font-size: 12px;
    color: #0D1A92;
}

.view-service-details-view-all:hover{
    color: #0D1A92;
}

/* Pricing Tier */
.view-service-details-section {
    margin-bottom: 10px;
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    overflow: hidden;
}

.view-service-details-section-header {
    border-radius: 8px;
    /* padding: 12px; */
    font-size: 14px;
    transition: border-color 0.3s ease;
    width: 100%;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    /* background-color: #ffffff; */
    background-color: #d3e9f7;
    text-align: left;
    padding: .375rem .75rem;
    cursor: pointer;
    border: 1px solid #9999997a;
    /* background: #fff; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.view-service-details-section-header:focus {
    outline: none;
}

.view-service-details-section-body {
    padding: 10px 10px;
    /* border-top: 1px solid #ddd; */
    border: 1px solid #9999997a;
    background: #fafafa;
    border-radius: 8px;
}

.view-service-details-section.expanded .pricing-tier-expand-icon {
    transform: rotate(180deg);
}

.view-service-details-pricing-desc{
    font-weight: 400;
    font-size: 13px;
    color: #212121;
}


.pricing-tier-view-details {
    font-size: 12px;
    font-weight: 500;
    color: #0D1A92;
    display: flex;
    align-items: center;
    gap: 8px;
}


.view-service-details-pricing-title {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #000000;

}

.view-service-details-pricing-section {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    /* padding-left: 1rem; */
    /* min-width: 150px; Adjust as needed */
}


/* Align radio + title */
.pricing-tier-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Style radio input */
.pricing-tier-radio {
    accent-color: #0D1A92; /* modern browsers */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Highlight border when selected */
.pricing-tier-radio:checked:focus-visible {
    outline: none;
}

/* highlight entire section when selected */
.pricing-tier-radio:checked ~ span,
.pricing-tier-radio:checked {
    font-weight: 500;
    color: #0D1A92;
}

.pricing-tier-radio:checked ~ .view-service-details-tier-price{
    font-weight: 500;
    color: #0D1A92;
}

.pricing-tier-radio:checked {
    border-color: #0D1A92;
}

.addons-price {
    margin-left: 6px;
    padding-bottom: 3px;
    font-size: 16px;
    font-weight: 500;
}

.view-service-details-tier-price{
    color: #000000;
    font-weight: 400;
    font-size: 12px;
}

.price-vertical-divider {
    width: 1px;
    height: 20px;
    background-color: #CDCDCD;
    margin: 0 6px;
}





button.btn.edit-service-modal-add-btn:active:focus{
	outline: none;
}

button.btn.edit-service-modal-add-btn {
    margin-top: 22px;
    border: 1px solid #0D1A92;
    text-transform: capitalize;
    background: #0D1A92;
    color: #ffffff;
    padding: 10px 8px;
    font-size: 14px !important;
    gap: 10px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 93%;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

button.btn.edit-service-modal-add-btn:hover {
    background: #ffffff;
    color: #0D1A92;
    /* transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 81, 162, 0.346); */
}

.edit-service-modal-tier-header {
    border-radius: 8px;
    /* padding: 12px; */
    font-size: 14px;
    transition: border-color 0.3s ease;
    width: 100%;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    background-color: #ffffff;
    text-align: left;
    padding: .375rem .75rem;
    cursor: pointer;
    border: 1px solid #EFEFEF;
    background: #fff;
    
}

.edit-service-modal-tier-header:focus {
    outline: none;
}

.edit-service-modal-tier-body {
    padding: 10px 10px;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

.edit-service-modal-tier {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.edit-service-modal-tier-header {
    border-radius: 8px;
    /* padding: 12px; */
    font-size: 14px;
    transition: border-color 0.3s ease;
    width: 100%;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    background-color: #ffffff;
    text-align: left;
    padding: .375rem .75rem;
    cursor: pointer;
    border: 1px solid #EFEFEF;
    background: #fff;
    
}

.edit-service-modal-tier-header:focus {
    outline: none;
}

.edit-service-modal-tier-body {
    padding: 10px 10px;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

.edit-service-modal-tier.expanded .pricing-tier-expand-icon {
    transform: rotate(180deg);
}

.edit-service-modal-toggle{
    width: 110px;
    font-weight: 500;
    font-size: 12px;
    color: #0D1A92;
}

.edit-service-modal-toggle a:hover, a:focus{
    color: #0D1A92 !important;
}

.service-details-title {
    font-size: 24px;
    font-weight: 500;
    /* color: #000000; */
    color: #0d1a92;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: normal;

    display: -webkit-box;
    -webkit-line-clamp: 1;     /* number of lines before ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-listing-view-btn{
    /* width: 170px; */
    padding: 8px 16px;
    /* height: 40; */
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;

    font-weight: 500;
    font-size: 16px;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.service-listing-view-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

/*=====================================
  checkout service Modal from Seller css
=====================================*/

.get-service-btn {
    padding: 8px 30px;
    gap: 10px;
    border: 1px solid #0D1A92;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 500;
    font-size: 16px;
    background-color: #0D1A92;
    color:#FFFFFF;
}

.get-service-btn:hover{
    border: 1px solid #0D1A92;
    background-color: #FFFFFF;
    color: #0D1A92;
}

#checkoutModal .modal-title {
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

#checkoutModal .modal-dialog .modal-content {
    border-radius: 18px !important;
    padding: 8px;
    margin-top: 70px;
}

#checkoutModal .modal-header {
    padding: 10px !important;
}

#checkoutModal .btn-close {
    font-size: 10px;
    color: #212121 !important;
    background-color: #0D1A920D;
    padding: 10 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#checkoutModal .checkout-modal-title {
    font-weight: 400;
    font-size: 14px;
    color: #3C3C3C;
}

#checkoutModal .service-tier-price {
    font-weight: 600;
    font-size: 16px;
    color: #0D1A92;
}

#checkoutModal .service-addons-price {
    font-weight: 600;
    font-size: 16px;
    color: #23B950;
}

#checkoutModal .modal-body {
    border-top: 1px solid #EFEFEF !important;
    /* border-bottom: 1px solid #EFEFEF !important; */
}

#checkoutModal .modal-body {
    padding: 20px 12px 20px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#checkoutModal .modal-body::-webkit-scrollbar-track {
    background: #CFD4FF;
}

#checkoutModal .modal-body::-webkit-scrollbar {
    width: 3px;
}

#checkoutModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}

#checkoutModal .checkout-modal-total-title {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}

#checkoutModal .checkout-modal-total-price {
    font-weight: 600;
    font-size: 18px;
    color: #0D1A92;
}

.pricing-divider {
    padding: 10px;
    border-top: 1px solid #EFEFEF !important;
}

#checkoutModal .modal-footer {
    display: block;
    justify-content: center;
}

.my-cart-service-payment-block {
    /* float: left; */
    background-color: #ffffff;
    /* border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
}


.my-cart-service-payment-title {
    justify-content: left;
    display: flex;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    padding-bottom: 16px;
}

#checkoutModal .my-cart-payment-option {
    padding: 8px 8px !important;
}

span#payment_method-error {
    justify-content: left;
    display: flex;
}

.my-cart-service-address-block {
    text-align: left;
}

.my-cart-service-address-block .my-cart-input,
.my-cart-service-address-block textarea.my-cart-input {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    padding: 10px 12px;
    width: 100%;
    resize: none; /* prevent dragging resize */
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease;
}

.my-cart-service-address-block .my-cart-input:focus,
.my-cart-service-address-block textarea.my-cart-input:focus {
    border-color: #0D1A92;
    box-shadow: 0 0 0 2px rgba(13, 26, 146, 0.1);
}

.my-cart-service-address-block label.my-cart-form-title {
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin-bottom: 6px;
    display: block;
}

.my-cart-service-address-block .error {
    font-size: 12px;
    color: #E53935;
    display: block;
    margin-top: 4px;
}

/* Make modal larger to fit 2-column */
#checkoutModal .modal-dialog {
  max-width: 800px;
}

/* Order summary column border */
#checkoutModal .border-end {
  border-right: 1px solid #EFEFEF !important;
}

/* Balance padding between columns */
#checkoutModal .col-md-5,
#checkoutModal .col-md-7 {
  padding-top: 10px;
  padding-bottom: 10px;
}

#checkoutModal .my-cart-payment-option input[type="radio"] {
    width: 15px;
    height: 15px;
    margin-right: 8px !important;
}

/*=====================================================
  View Service Details Modal from Buyer css In My Order
=======================================================*/

 #trackOrderServiceViewDetailsModal .modal-dialog {
    min-width: 70vw;
    max-width: 1000px;
    margin-top: 30px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

#trackOrderServiceViewDetailsModal .modal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    overflow: hidden;

    background-color: #d3e9f7;
    border: 2px solid #0d1a92;
}

#trackOrderServiceViewDetailsModal .scroll-product-details {
    flex: 1;
    overflow-y: auto;
    padding-left: 10px; /* optional for better UX */
    padding-right: 10px; /* optional for better UX */
}

#trackOrderServiceViewDetailsModal .product-details-footer {
    position: relative;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: #EFEFEF !important;
    border-bottom-right-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
}

#trackOrderServiceViewDetailsModal .btn-close {
    opacity: 1;
    font-size: 10px;
    /* color: #212121 !important; */
    color: #000000 !important;
    /* background-color: #0D1A920D; */
    background-color: #F3F3F3;
    padding: 8 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

#trackOrderServiceViewDetailsModal .modal-footer{
    /* background-color: #EFEFEF; */
    background-color: #F3F3F3;
    border-top: 1px solid #9999997a;
}
/* For track my order pop modal - End */


.blurred {
    filter: blur(2px);
    pointer-events: none;
    /* background: rgba(255,255,255,0.3); */
    /* background: linear-gradient(135deg, rgba(0, 51, 153, 0.6), rgba(0, 102, 204, 0.5), #0d1a92f5); */
    background: linear-gradient(135deg, rgb(0 51 153 / 42%), rgb(0 102 204 / 29%), #0d1a92c9);
    border-radius: 30px;
}

.paid-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border-radius: 1rem; */
}

.paid-box {
    background: rgb(255 255 255 / 77%);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px #000;
}

.lock-icon {
    font-size: 30px;
}

.paid-content-label{
    font-weight: 500;
    font-size: 16px;
    color: #0D1A92;
    margin: 10px 0px;
}

button.btn.unlock-btn{
    font-weight: 500;
    font-size: 14px !important;
    background-color: #0D1A92;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid #0D1A92;
    text-transform: capitalize;
}

button.btn.unlock-btn:hover{
    background-color: #ffffff;
    color: #0D1A92;
}

button.btn.unlock-btn:focus,
button.btn.unlock-btn:active{
    text-decoration: none;
    outline: none;
    outline-offset: unset;
    background-color: #ffffff;
    color: #0D1A92;
    border: 1px solid #0D1A92 !important;
}

img.paid_content-img{
    width: 50px;
    height: 50px;
}

/*=====================================================
  Exclusive Content Modal checkout
=======================================================*/

#checkoutExclusiveContentModal .modal-body{
    padding: 25px !important;
}

#checkoutExclusiveContentModal .my-cart-payment-option {
    padding: 10px 10px;
}

#checkoutExclusiveContentModal .my-cart-payment-option input[type="radio"]{
    margin-right: 8px !important;
}


/* #checkoutExclusiveContentModal .pricing-section-paid-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #FFC831;
    border-radius: 16px;
    background: linear-gradient(157.17deg, #FFC831 -8.02%, rgba(255, 255, 255, 0.5) 73.03%, #FFC831 154.07%);
   
} */

#checkoutExclusiveContentModal .modal-header {
    display: grid;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */
    width: 100%;
}

#checkoutExclusiveContentModal .pricing-section-paid-content {
    margin: 0 auto;  /* let it center itself */
    padding: 12px 40px;
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        #FFD766 0%,
        #FFF8E1 50%,
        #FFC831 100%
    );
    border: 1px solid #FFD766;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
}

#checkoutExclusiveContentModal .pricing-details-label {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}

#checkoutExclusiveContentModal .pricing-details-price {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    color: rgba(13, 26, 146, 1);
}

#checkoutExclusiveContentModal .pricing-details-subtitle {
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}


#checkoutExclusiveContentModal .modal-header {
    position: relative;
}

#checkoutExclusiveContentModal .btn-close {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 10px;
    font-size: 10px;
    color: #000000 !important;
    background-color: #0D1A920D;
    padding: 11 !important;
    border-radius: 50px;
    width: 8px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}


#checkoutExclusiveContentModal .paid-content-title {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    margin-top: -5px;
    padding: 0 12px;
}

#checkoutExclusiveContentModal .paid-content-title-text {
    width: 360px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0D1A92;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.3px;

    /* Ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Optional subtle underline style (UX Highlight) */
#checkoutExclusiveContentModal .paid-content-title-text::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #FFC831;
    margin: 6px auto 0;
    border-radius: 4px;
}


input#paid_advert_toggle,
input#edit_paid_advert_toggle {
    width: 32px;
    height: 18px;
}

input#paid_advert_toggle:focus,
input#edit_paid_advert_toggle:focus {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    /* border-color: rgba(0, 0, 0, 0.05) !important; */
    outline: none !important;
    outline-offset: unset !important;
    box-shadow: none !important;
}

.form-switch .form-check-input:focus {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
} 

.form-switch .form-check-input:checked {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: #0D1A92;
} 

.form-check-input:active {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    filter: brightness(90%) !important;
}

.post-media-title-label{
    color: #000000 !important;
    font-weight: 500;
}

.post-media-label{
    padding-right: 4px;
}

.add-advert-scroll {
    max-height: 75vh;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.add-advert-scroll::-webkit-scrollbar-track {
    background: #CFD4FF;
    height: 10px;
}

.add-advert-scroll::-webkit-scrollbar {
    width: 2px;
}

.add-advert-scroll::-webkit-scrollbar-thumb {
    background-color: #8D98FF;
    border-radius: 10px;
}

.form-group.advert-submit.m-0.h-15.publish-final-form {
    position: absolute;
    bottom: 10px;
    right: 25px;
}

button.btn.btn-primary.Advertsubmit.padding-remove.written-advert.post-advert-verified.border-btn.btn-radius.text-white.bg-blue.btn-form-sidebar.publish-final-btn {
    padding: 15px 40px !important;
}

#advert-edit-modal .row-pad-0 .publish-final-btn {
    padding: 15px 40px !important;
}

/* --------------- */

img.premium-content-img {
    width: 22px;
    height: 21px;
}

/*=====================================
  radio and select inputs readonly
=====================================*/
/* -------product details seller side hide------------- */
/* Make all radio inputs readonly (non-clickable) */
#manageProductDetailsModal .size-option,
#manageProductDetailsModal .color-option {
    pointer-events: none !important; /* Prevent clicking */
    /* opacity: 0.9; */
}

#manageProductDetailsModal .color-swatch,
#manageProductDetailsModal .size-label {
    cursor: default !important;
}

/* -------Serivce details seller side hide------------- */
/* Hide radio buttons */
#manageViewServiceDetailsModal input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Hide checkbox squares */
#manageViewServiceDetailsModal input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Make parent clickable area non-interactive */
#manageViewServiceDetailsModal .view-service-details-addon,
#manageViewServiceDetailsModal .pricing-tier-left {
    pointer-events: none !important;
    opacity: 1 !important; /* Keep UI normal */
}

/* -------product details seller side hide sales overview page------------- */
/* Make all radio inputs readonly (non-clickable) */
#salesOverviewProductDetailsModal .size-option,
#salesOverviewProductDetailsModal .color-option {
    pointer-events: none !important; /* Prevent clicking */
    /* opacity: 0.9;  */
}

#salesOverviewProductDetailsModal .color-swatch,
#salesOverviewProductDetailsModal .size-label {
    cursor: default !important;
}

/* -----Serivce details seller side hide sales overview page----- */
/* Hide radio buttons */
#salesOverviewServiceDetailsModal input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Hide checkbox squares */
#salesOverviewServiceDetailsModal input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Make parent clickable area non-interactive */
#salesOverviewServiceDetailsModal .view-service-details-addons,
#salesOverviewServiceDetailsModal .pricing-tier-left {
    pointer-events: none !important;
    opacity: 1 !important; /* Keep UI normal */
}

/* -------- Video Controls Hide----------------- */
/* Hide native controls */
.no-controls::-webkit-media-controls {
    display: none !important;
}
.no-controls::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Parent wrapper */
.video-wrapper {
    position: relative;
    cursor: pointer;
}

/* Play icon overlay */
.video-play-overlay {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.play-icon {
    width: 40px !important;
    height: 40px !important;
    opacity: 0.9;
    cursor: pointer;
    border: unset !important;
}
/* -------------------------- */


/* ------Extra---------------- */


.video_style_for_item{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

#editProductForm .blockUI.blockOverlay {
    border-radius: 30px;
}


#checkoutExclusiveContentModal a.tooltip {
    opacity: 1 !important;
    position: relative;
}

#checkoutExclusiveContentModal a.tooltip span {
    display: none;
}

#checkoutExclusiveContentModal a.tooltip:hover span {
    border: #000000 1px solid;
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
    display: block;
    z-index: 100;
    background: #ffffff;
    color: #000000;
    left: 150px;
    margin: 15px;
    position: absolute;
    top: 15px;
    text-decoration: none;
    max-width: 450px;     /* max width */
    width: auto;          /* auto fit content */
    white-space: normal;  /* allow wrapping for long text */
    word-break: break-word;
}