body {
    font-family: 'Dancing Script', cursive;
    transform-origin: 0 0!important;
    width: 100%!important;
    height: 100%!important;
}
.font-dancing {
    font-family: 'Dancing Script', cursive;
}
@font-face {
    font-family: 'Kaushan';
    src: url('../fonts/KaushanScript-Regular.ttf') format('truetype');
}
.font-times {
    font-family: 'Times New Roman', Times, serif!important;
}
.font-Book {
    font-family: "Book Antiqua", Palatino, serif!important;
}
.font-Kaushan {
    /* font-family: "Satisfy", cursive!important; */
    font-family: 'Kaushan';
    
}
.font-Poppins {
    font-family: "Poppins", sans-serif !important;
    /* font-weight: 100 !important;
    font-size: 20.41px !important;
    line-height: 30.62px !important; */
}
#diagnosis_date, #display_diagnosis_date {
    color: #000!important;
}
#diagnosis_date:focus,
#diagnosis_date:valid {
    color: #000 !important;
}

#patient_dob, #display_patient_dob {
    color: #000!important;
}
#patient_dob:focus,
#patient_dob:valid {
    color: #000 !important;
}

#date_of_birth, #display_date_of_birth {
    color: #000!important;
}

#date_of_birth:focus,
#date_of_birth:valid {
    color: #000 !important;
}
.flatpickr-calendar {
    font-family: "Poppins", sans-serif !important;
}
.font-Roboto {
    font-family: "Roboto", sans-serif !important;
}
.font {
    font-family: 'Times New Roman', Times, serif!important;
    color: #fff!important;
    font-size: 18px!important;
}
.font:hover {
    border: none!important;
}
.font-head {
    font-size: 36px !important;
    font-weight: 400 !important;
}

.text-shadow {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.text-header-shadow {
    text-shadow: 2px 5px 6px rgba(0, 0, 0, 0.5);
}
/* navbar styling starts */
.magnifying-start {
    border-radius: 12px 0px 0px 12px!important;
    background-color: #fff;
}
.magnifying-end {
    border-radius: 0px 12px 12px 0px!important;
}
.nav-link {
    font-size: 24px!important;
}
.bg-transparent {
    background-color: transparent!important;
}
.fa-magnifying-glass, .fa-microphone {
    cursor: pointer;
}
/* navbar styling ended */

.bg-h-100 {
    height: 104vh!important;
}
.bg-image {
    margin-top: -120px!important;
    background-image: url('../img/bricks/bg1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-body {
    margin-top: -68px!important;
    background-image: url('../img/bg2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-explore {
    margin-top: -64px!important;
    background-image: url('../img/bg3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* .img-about-body {
    margin-top: -130px!important;
    background-image: url('../img/bg-about.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} */
.img-register-body1 {
    margin-top: -45px!important;
    background-image: url('../img/bg-register.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-register-body2 {
    /* margin-top: -70px!important; */
    background-image: url('../img/bg-bricks.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img2-register-body {
    margin-top: -79px!important;
    background-image: url('../img/bg-register2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.img-login-bg {
    margin-top: -85px!important;
    background-image: url('../img/login-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-patient-dashboard-bg {
    background-image: url('../img/no-bg.webp');  /* Use your image URL */
    background-size: contain;
    background-position: bottom center; /* Align the image to the bottom */
    background-repeat: no-repeat;
    width: 100%; /* Ensures the image stretches across the full width */
    height: 50vh; /* Control the height of the background section */
    position: relative;
    z-index: 0; /* Ensures it's below other content */
}
.img-cloud {
    margin-top: -60px!important;
    background-image: url('../img/bg-cloud.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-cloud-1 {
    margin-top: -70px!important;
    background-image: url('../img/new/cloud-bg-1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-cloud-2 {
    margin-top: -70px!important;
    background-image: url('../img/new/cloud-bg-2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.brick-bg-img {
    background-image: url('../img/bricks/brick-bg1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.body-after-margin {
    padding-top: 80px!important;
}

.navbar {
    background-color: transparent !important;
    z-index: 1030;
}
.navbar-collapse {
    position: absolute;
    right: 0;
    background-color: transparent;
    z-index: 1020;
}
.custom-logo-margin {
    margin-bottom: -7vh;
    width: 80px;
}
.navbar-collapse.show {
    display: block;
}
.form-control:focus {
    color: none!important;
    background-color: none!important;
    border-color: #DEE2E6!important;
    outline: none!important;
    box-shadow: none!important;
}
.leaves-margin {
    padding-top: 67vh!important;
    /* padding-bottom: 12vh!important; */
}
.leaf-top-margin {
    margin-top: -20px!important;
}

/* Unique Animations for Each Leaf */
@keyframes shiver1 {
    0% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-2deg) translateX(-2px); }
    50% { transform: rotate(2deg) translateX(2px); }
    75% { transform: rotate(-1deg) translateX(-1px); }
    100% { transform: rotate(1deg) translateX(1px); }
}

@keyframes shiver2 {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(1deg) translateY(-2px); }
    50% { transform: rotate(-1deg) translateY(2px); }
    75% { transform: rotate(1deg) translateY(-1px); }
    100% { transform: rotate(-1deg) translateY(1px); }
}

@keyframes shiver3 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(1deg) scale(1.02); }
    50% { transform: rotate(-2deg) scale(1.01); }
    75% { transform: rotate(1deg) scale(1.03); }
    100% { transform: rotate(-1deg) scale(1.02); }
}

@keyframes shiver4 {
    0% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(-2deg) translate(2px, -2px); }
    50% { transform: rotate(3deg) translate(-2px, 2px); }
    75% { transform: rotate(-1deg) translate(1px, -1px); }
    100% { transform: rotate(2deg) translate(-1px, 1px); }
}

@keyframes shiver5 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(1deg) scale(0.98); }
    50% { transform: rotate(-1deg) scale(1.01); }
    75% { transform: rotate(1deg) scale(0.99); }
    100% { transform: rotate(-1deg) scale(1); }
}

@keyframes shiver6 {
    0% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(2deg) translateX(3px); }
    50% { transform: rotate(-1deg) translateX(-2px); }
    75% { transform: rotate(3deg) translateX(2px); }
    100% { transform: rotate(-2deg) translateX(-1px); }
}

@keyframes shiver7 {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-1deg) translateY(3px); }
    50% { transform: rotate(2deg) translateY(-2px); }
    75% { transform: rotate(-2deg) translateY(2px); }
    100% { transform: rotate(1deg) translateY(-1px); }
}

@keyframes shiver8 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-1deg) scale(1.03); }
    50% { transform: rotate(2deg) scale(1.01); }
    75% { transform: rotate(-3deg) scale(1.02); }
    100% { transform: rotate(1deg) scale(1.01); }
}

@keyframes shiver9 {
    0% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(2deg) translate(-3px, 3px); }
    50% { transform: rotate(-2deg) translate(2px, -3px); }
    75% { transform: rotate(1deg) translate(-1px, 2px); }
    100% { transform: rotate(-1deg) translate(1px, -2px); }
}

@keyframes shiver10 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-1deg) scale(1.02); }
    50% { transform: rotate(3deg) scale(1.01); }
    75% { transform: rotate(-2deg) scale(1.03); }
    100% { transform: rotate(2deg) scale(1); }
}
@keyframes shiver11 {
    0% { 
        transform: rotate(0deg) translateX(0); 
    }
    50% { 
        transform: rotate(1deg) translateX(-1.8px); 
    }
    100% { 
        transform: rotate(0deg) translateX(0.5px); 
    }
}

/* Assign animations to each leaf */
.leaf1 { animation: shiver1 1.5s infinite alternate; }
.leaf2 { animation: shiver2 1.6s infinite alternate; }
.leaf3 { animation: shiver3 1.7s infinite alternate; }
.leaf4 { animation: shiver4 1.8s infinite alternate; }
.leaf5 { animation: shiver5 1.9s infinite alternate; }
.leaf6 { animation: shiver6 1.5s infinite alternate; }
.leaf7 { animation: shiver7 1.6s infinite alternate; }
.leaf8 { animation: shiver8 1.7s infinite alternate; }
.leaf9 { animation: shiver9 1.8s infinite alternate; }
.leaf10 { animation: shiver10 1.9s infinite alternate; }
.comingsoon { animation: shiver11 1s infinite alternate ease-in-out;  }
/* Disable animation on hover */
.leaf:hover {
    animation: none;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #ffffff;
    background-color: #28BAED;
    width: 100%;
}
.bricks-position {
    margin-top: 98px !important;
}

/* .bricks-position {
    margin-top: 180px;
    width: 100%;
} */

/* ipad devices */
/* @media (min-width: 768px) and (max-width: 1024px) {
    .bricks-position {
        margin-top: 182px!important;
    }
    .tour-page-link {
        margin-top: 22%;
    }
} */

/* Media query for MacBook devices */
/* @media (min-width: 1440px) and (max-width: 2560px) {
    .bg-h-100 {
        height: 100vh !important;
    }

    .leaves-margin {
        padding-top: 57vh !important;
    }
    .navbar-collapse {
        top: 60% !important;
    }
    .tour-page-link {
        margin-top: 164px !important;
    }
    .font {
        font-size: 16px !important;
    }
} */

/* .btn-danger {
    background-color: #E7242A!important;
    font-size: 20px!important;
}
.btn-danger1 {
    color: #fff!important;
    background-color: #CC2D3A!important;
    font-size: 20px!important;
}

.custom-btn1 {
    padding: 20px 40px!important;
    margin-left: -16px!important;
}
.custom-btn2 {
    padding: 20px 55px!important;
    margin-right: -28px!important;
}
.custom-btn3 {
    padding: 20px 58px!important;
    margin-left: -16px!important;
}
.custom-btn4 {
    padding: 20px 73px!important;
    margin-right: -28px!important;
}
.btns-mt-3 {
    margin-top: 6px!important;
}
.mountain {
    margin-top: 115px;
} */
.bg-footer {
    background-color: #EFEFEF;
    z-index: 9999;
}
.links-border {
    width: 20%!important;
    border-bottom: 3px solid #000;
}
.bg-footer ul li {
    margin: 8px 0;
}
.bg-footer ul li a {
    text-decoration: none;
    color: #000;
}
.fa-play {
    color: #878787;
    padding-right: 10px;
}
.copyright {
    font-family: 'Times New Roman', Times, serif!important;
    border-top: 1px solid #C4C4C4;
}
.footer-font {
    font-size: 12px!important;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    .footer-font {
        font-size: 12px!important;
    }
    .bg-image {
        width: 100%!important;
        /* height: 36vh!important; */
        height: 30vh!important;
        margin-top: -15px !important;
    }
    .bricks-position {
        margin-top: 25px!important;
    }
    .leaves-margin {
        padding-top: 17vh!important;
    }
    .custom-logo-margin {
        width:80px!important;
        height: auto;
        margin-bottom: 0vh!important;
        /* margin-top: 12px!important; */
    }
    .navbar-collapse {
        padding: 16px 16px 16px 16px!important;
        top: 70%!important;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.9)!important;
    }
    /* .custom-btn1, .custom-btn2, .custom-btn3, .custom-btn4 {
        display: none!important;
    }
    .btn-danger1, .btn-danger {
        width: 100%;
    } */

    .tour-page-link {
        width: 25%;
        margin-top: 0%;
        margin-top: 0px!important;
    }
    .tour-page-link p {
        font-size: 12px!important;
    }
    .mountain {
        margin-top: 0px!important;
        padding-top: 20px!important;
    }
    .font {
        color: #fff!important;
        font-size: 6px!important;
    }
    /* .bg-footer .mob-margin {
        margin-top: 727px;
    } */
    .btns-mt-3 {
        margin-top: -13px !important;
    }
    .img-body {
        margin-top: -103px!important;
        background-image: url('../img/mob-bg2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* .custom-logo-margin {
        margin-top: 16px!important;
    } */
    /* .mob-create {
        top: 16%!important;
    } */
}

/* Registration page styling */
.card-bg {
    border-radius: 16px 16px 0px 0px;
}
.card-bg, .btn-gradient {
    background: linear-gradient(140deg, #0C204D 25%, #2D86AD 50%);
    color: #fff!important;
}
.form-border {
    border: var(--bs-border-width) solid #1773d0;
    /* border: 1px solid;
    border-image: linear-gradient(to right, #EF555E, #A096C8, #5F64AE) 1;
    border-radius: var(--bs-border-radius)!important; */
}
.form-border:focus {
    border-color: #1773d0 !important;
    box-shadow: none!important;
}
.text-forgot {
    color: #934397!important;
    padding-bottom: 10px;
}
.link {
    text-decoration: none;
}
.truncated-text {
    max-width: 100ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inner-shadow {
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 -6px 6px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}
.btn-explore {
    background: linear-gradient(to right, #556FFD, #FD66C4)!important;
    padding: 1rem!important;
    width: 150px!important;
}
.btn-active{
    width: 125px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--button-strock, #4E78FF);
    background: linear-gradient(90deg, rgba(172, 192, 255, 0.50) 0%, rgba(241, 164, 249, 0.50) 100%);
}
.btn-inactive{
    width: 125px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--button-strock, #4E78FF);
    background-color: transparent;
}
.font-color {
    background: linear-gradient(140deg, #0D224F 25%, #2D86AD 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-btn:hover {
    border: 2px solid #4E4EAF!important;
}
/* .link {
    color: #000;
} */
.d-none {
    display: none!important;
}
.choices__inner {
    background-color: #ffffff!important;
    border: 1px solid #ffffff!important;
    border-radius: 6.5px!important;
}
.choices__input {
    background-color: #ffffff!important;
    margin-bottom: 0px!important;
    padding: 0px!important;
}
.btn-yellow {
    background: linear-gradient(140deg, #FFD04E 25%, #FF8C45 50%);
    color: #000!important;
}
.font-inter {
    font-family: 'Inter', sans-serif !important;
}
.choices__input, .choices__item, .choices__item--selectable, .is-selected {
    font-family: "Poppins", sans-serif !important;
}
.p-cabs {
    text-transform: uppercase;
}
.img-admin-dashboard-body {
    margin-top: -70px!important;
    background-image: url('../img/admin/bg-admin-dashboard.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.admin-body {
    padding-top: 85px !important;
}
.btn-admin-dashboard {
    background-color: #5CACE2!important;
    color: #fff!important;
}

.query-count {  /* Or a more specific class name if needed */
    font-size: 5rem; /* Adjust font size (e.g., 2rem, 2.5em, 40px) */
}

.roboto-font {
    font-family: Roboto, sans-serif;  /* Include a fallback font */
}

/* Optional: If you want to keep the 1.5rem size */
.roboto-font p {
    font-size: 1.5rem;
}
.border {
    border: #007fff!important;
}
.m-p-0{
    margin: 0px!important;
    padding: 0px!important;
}
.btn-light-gradient {
    background: linear-gradient(140deg, #A9BFFC 25%, #F5A3F9 50%);
    color: #fff!important;
}
@media (min-width: 992px) { /* For large screens */
    .responsive-container {
        max-height: 80vh; /* 80% of the viewport height */
        overflow-y: auto;
        }
        }

@media (max-width: 991px) { /* For tablets */
    .responsive-container {
        max-height: 70vh; /* 70% of the viewport height */
        overflow-y: auto;
    }
}

@media (max-width: 767px) { /* For mobile */
    .responsive-container {
        max-height: 60vh; /* 60% of the viewport height */
        overflow-y: auto;
    }
}
/* Scrollbar */
.sidebar{
    background-color: rgba(250, 250, 250, 0.5);
    max-height:650px;
    overflow-y: auto;
    padding-right: 0px;
    box-sizing: border-box;
}

.sidebar::-webkit-scrollbar-track {
    background: #BBE0E9;
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #28BAED;
    border-radius: 10px;
    height: 5px;
}

.sidebar::-webkit-scrollbar {
    width: 12px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

::-webkit-scrollbar {
    width: 12px;/* For vertical scrollbar */
    height: 8px; /* For horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #28BAED;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #28BAED;
}

.text-skyblue {
    color: #5CACE2!important;
}
.text-light-red {
    color: #EC6D6D!important;
}
/* Button effects */
.hug-btn-hover {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    color: black;
    transition: background-color 0.3s ease-in-out;
    font-size: 14px;
}

/* Hover Effect */
.hug-btn-hover:hover {
    background-color: #DFFBFF !important;
}

/* Icon Styling */
.hug-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Separator Line */
.hug-separator {
    width: 1px;
    height: 16px;
    background-color: #ccc;
}

/* Loader Style */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue color */
    border-radius: 50%;
    animation: spin 2s linear infinite;
    z-index: 9999; /* Ensure loader is always on top */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide the loader when background is loaded */
.loaded .loader {
    display: none;
}


.custom_loader {
    width: 25px;
    height: 25px;
    border: 3px solid #ccc;
    border-top: 3px solid #5C2C90;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* Add this CSS to your stylesheets */
.hover-effect:hover {
    background-color: #0C204D !important;
    color: #fff!important;
}
/* Added to prevent the copy paste of elements by the user */

/* {
    user-drag: none !important;
    -webkit-user-drag: none !important;
    user-select: text !important;
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
} */
/* For default Styling of Profile pic based on Cancer Type */
.rotating-wrapper {
    width: 53px;
    height: 0px;
    position: relative;
}

.rotating-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: conic-gradient(
      red, yellow, green, cyan, blue, magenta, red
    );
    animation: rotate 4s linear infinite;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
}

.center-profile-image {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    position: absolute;
    padding: 2px;
    z-index: 2;
}

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
.custom-close-button-modal-gradient {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(107.83deg, #EC1C24 -10.92%, #CC1F4A -2.73%, #B32368 5.47%, #A1257D 13.66%, #96268A 20.68%, #93278F 28.88%, #7F288F 37.07%, #5C2C90 56.97%, #422E91 75.69%, #333091 93.25%, #2E3192 106.13%);
    color: #4DE4F7 ;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    padding: 0;
    cursor: pointer;
    opacity: 1;
}
.skeleton-chat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #d1d5db;
    position: relative;
    overflow: hidden;
}

.skeleton-lines {
    flex: 1;
}

.skeleton-line {
    height: 12px;
    border-radius: 8px;
    background: #d1d5db;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.skeleton-line.short {
    width: 60%;
}

/* Animation */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.skeleton-line::before,
.skeleton-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 1.5s infinite;
}
/* In your static/css/main.css or equivalent global stylesheet */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.two-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

 .highlight-reply {
    animation: highlight-blink 3s ease-out forwards;
    animation-iteration-count: 1;
    background-color: #6BE4F2;
    transition: background-color 3s ease;
    border-radius: 10px;
}
.dropdown-menu-end li a {
    font-size: 20px!important;
    border-bottom: 1px solid #afafaf!important;
}
li form .dropdown-item {
    font-size: 20px!important;
}
/* Hide the built-in Microsoft Edge password visibility icon */
input[type="password"]::-ms-reveal {
    display: none !important;
}
@keyframes highlight-blink {
    0% {
        background-color: #6BE4F2;
    }
    25% {
        background-color: #6be4f2ad;
    }
    50% {
        background-color: #6be4f26e;
    }
    75% {
        background-color: #6be4f238;
    }
    100% {
        background-color: transparent;
    }
}

.note-dropzone {
    display: none !important;
    pointer-events: none;
    height: 0 !important;
}


.emoji-picker {
    width: 250px !important;  /* Adjust width as needed */
    overflow-y: auto; /* Vertical scroll */
    overflow-x: hidden; /* No horizontal scroll */
    border: 1px solid #ccc; /* Border for the picker */
    border-radius: 5px; /* Rounded corners */
    background-color: #fff; /* White background */
    padding: 10px; /* Padding around the emojis */
    position: absolute; /* Ensures it's positioned correctly */
    z-index: 1000; /* Ensure it's above other elements */
}

.emoji-item {
    font-size: 20px; /* Adjust size of emojis */
    display: inline-block; /* Keep emojis inline */
    margin: 5px; /* Spacing between emojis */
    cursor: pointer; /* Pointer on hover */
}

.emoji-item:hover {
     transform: scale(1.5) translateY(-2px);
    background-color: #f0f0f0; /* Light grey hover effect */
    border-radius: 5px; /* Optional: Rounded hover effect */
}


.swal-popup-background {
    background-image: url('/static/img/new/mob_bg3.webp');
    background-size: cover;
    background-position: center;
}