@media (max-width:992px) {
    .br {
        display: none;
    }
}

p:last-child {
    margin-bottom: 0;
}

/* separator css */
.separator {
    color: #D2D2D2;
    border: 0;
    border-top: 0.5px solid;
}

.separator-dashed {
    height: 0.6px;
    background-image: linear-gradient(90deg, #D2D2D2, #D2D2D2 60%, transparent 60%, transparent 100%);
    background-size: 10px 1px;
    border: none;
}

.scrollbar-design::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.scrollbar-design::-webkit-scrollbar-thumb {
    background: #2678A76b;
    border-radius: 4px;
}

.text-charcoal-blue {
    color: #364153;
}

.text-blue-gray {
    color: #6B7385
}

.bg-light-gray {
    background-color: #F5F5F5;
}

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

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

.input-group-2 .left-icon {
    position: absolute;
    top: .75rem;
    left: 1rem;
    background-color: transparent;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    z-index: 1;
}

/* Only apply left padding when left-icon exists */
.input-group-2:has(.left-icon) .form-control:not(.form-control-lg) {
    padding-left: 3rem !important;
}

/* Large input group with left icon */
.input-group-2.input-group-lg .left-icon {
    top: 1rem;
    left: 1rem;
}

/* Only apply left padding for large inputs when left-icon exists */
.input-group-2.input-group-lg:has(.left-icon) .form-control.form-control-lg {
    padding-left: 3.125rem !important;
}

/* Right icon styles */
.input-group-2 .right-icon {
    position: absolute;
    top: .75rem;
    right: 1rem;
    background-color: transparent;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    z-index: 1;
}

.input-group-2.input-group-lg .right-icon {
    width: 1.5rem;
    top: 1.1875rem;
    right: 1rem;
}

/* Alternative approach for older browsers that don't support :has() */
/* Use these classes instead of :has() selector */

/* Add this class when left icon is present */
.input-group-2.has-left-icon .form-control:not(.form-control-lg) {
    padding-left: 3rem !important;
}

.input-group-2.input-group-md .right-icon {
    top: .75rem;
}

.input-group-2.input-group-sm .right-icon {
    top: .5rem;
}

.input-group-2.has-right-icon .form-control:not(.form-control-md) {
    padding-left: 3.125rem !important;
}

/* Add this class when right icon is present and you want right padding */
.input-group-2.has-right-icon .form-control:not(.form-control-lg) {
    padding-right: 2.5rem !important;
}

.input-group-2.input-group-lg.has-right-icon .form-control.form-control-lg {
    padding-right: 3rem !important;
}

.user-navbar {
    height: clamp(3.625rem, 1.1961rem + 6.747vw, 5.375rem);
    box-shadow: none;
    border: 0;
    background-color: transparent;
}

.sky-effect {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
}

.sky-effect .sky-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

.main-body {
    width: min(800px, 100%);
}

.main-body .suggest-card {
    box-shadow: 0px 1px 2px -1px #0000001A;
    box-shadow: 0px 1px 3px 0px #0000001A;
    background: #FFFFFFE5;
}

@media (min-width:991px) {
    .main-body .arrow-cure-top-move-right {
        position: absolute;
        top: -20px;
        right: 204px;
        width: 124px;
        height: 12px;
    }

    .main-body .arrow-cure-bottom-move-right {
        position: absolute;
        bottom: -20px;
        left: 204px;
        width: 124px;
        height: 12px;
    }
}

.scroll-body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* max-height: calc(100dvh - 17.5rem); */
    flex: 1 1 1.5rem;
    scroll-behavior: smooth;
}

.scroll-body::-webkit-scrollbar {
    display: none;
}

.text-gradient {
    background: linear-gradient(90deg, #015C91 0%, #001B2B 97.6%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
    background: linear-gradient(90deg, #0381CB 0%, #03BACB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-offcanvase {
    width: min(1138px, 100%);
    --bs-offcanvas-height: 90vh;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 9999;
}

.legal-offcanvase .offcanvas-header {
    position: sticky;
    top: -1px;
}

.footer-card {
    width: fit-content;
    max-width: 90vw;
    min-width: 300px;
}

@media (max-width:576px) {
    .footer-card {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .user-navbar .navbar-other .btn {
        padding: .625rem .75rem !important;
        border-radius: 10px !important;
    }
}

.footer-card .navigation-box {
    width: 100%;
    padding: clamp(0.5rem, -0.0205rem + 1.4458vw, 0.875rem);
    background-color: #FFF;
    border: 0.5px solid #D9D9D980;
    border-radius: 16px;
    box-shadow: 0px 6px 15px -3px #00000014;
    box-shadow: 0px 4px 6px -4px #0000001A;
    border: 0.5px solid #D9D9D980;
}

.footer-card .card-preview {
    max-width: 600px;
    margin-bottom: 10px;
}

@media (min-width:576px) {
    .footer-card .card-preview {
        min-width: 400px;
    }
}

.footer-card .card-preview .img-card {
    width: 62px;
    height: 62px;
    border-radius: 2.88px;
}

.footer-card .card-preview .img-card .file-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-card .card-preview .img-card .cancel-primary-button {
    position: absolute;
    top: -7px;
    right: -7px;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.footer-card .send-btn {
    width: 40px;
    height: 40px;
}

.footer-card .loader-box {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 15.56px;
    background: #4F8DB829;
    box-shadow: 0px 0px 6.67px 0px #0000000D;

}

.footer-card .loader-box .loader {
    border: 3px solid #4F8DB8;
    border-top: 3px solid transparent;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.main-body .message-sent {
    color: #FFF;
    width: clamp(300px, 100%, 520px);
    padding: 12px 16px;
    border-radius: 14px;
    border-bottom-right-radius: 0;
    background-color: #2678A7;
    margin-left: auto;
    box-shadow: 0px 0px 4px 0px #0000001F;
}

.main-body .message-recessive {
    max-width: clamp(37.25rem, 2vw, 6.25rem);
    padding: 12px 16px;
    border-radius: 14px;
    border-bottom-left-radius: 0;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #0000001F;
    margin-right: auto;
}

.main-body .message-sent .img-preview {
    max-width: 99px;
    height: 99px;
    object-fit: cover;
    border-radius: 4px;
}

.main-body .message-sent .audio-player {
    width: 100%;
    height: 50px;
    background: #FFFFFF14;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    position: relative;
}

.main-body .message-sent .progress-bar {
    flex-grow: 1;
    height: 4px;
    background: #E7EAEE4D;
    margin: 0 .75rem;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
}

.main-body .message-sent .progress {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
}

.main-body .message-sent .progress::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}

.typing-animation {
    display: flex;
    align-items: center;
    gap: 6px;
}

.typing-animation .dot {
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
    background: #E5E4E4;
    width: 8px;
    height: 8px;
}

.typing-animation .dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-animation .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-animation .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        background: #E5E4E4;
    }

    40% {
        transform: scale(1.2);
        background: #C6C6C6;
    }

}

.phone-group .input-group-text {
    background-color: #F9F9F9;
}

.phone-group .select2.select2-container {
    width: 100px;
}

.phone-group .select2-container--default .select2-selection--single {
    border: 0;
    background-color: transparent;
    text-align: start;
}

.phone-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    border: 0;
    padding: 12px 38px 12px 14px;
}

.phone-group .select2-container--default .select2-selection--multiple .select2-search::after,
.phone-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 1.1875rem;
}

.speak-btn {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #3C7DFFB2, #3cb4ff60, #F0F5BE);
    background-size: 200% 200%;
    backdrop-filter: blur(68px);
    box-shadow: 0px 0.9px 9.31px -0.9px #0000001A;
    position: relative;
    border: 0;
    animation: gradientMove 5s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.speak-btn .dots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .1094rem;
}

.speak-btn .dot {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: white;
    padding: 0;
    animation: bounce 1.2s infinite ease-in-out;
}

.speak-btn .dot:nth-child(1) {
    animation-delay: 0s;
}

.speak-btn .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.speak-btn .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-2px);
    }
}

.expert-btn {
    background: url(../imgs/icons/pdf-icon.png), linear-gradient(112.43deg, #2A83B7 18.35%, #FDDB9F 235.65%);
    background-position: bottom right;
    background-repeat: no-repeat;
    border: 0.5px solid #D9D9D980;
    padding: 14px 16px 14px 16px;
    max-height: 100%;
    box-shadow: 0px 6px 15px -3px #00000014;
    box-shadow: 0px 4px 6px -4px #0000001A;
    color: #FFF !important;
    border-radius: 16px;
    width: 100%;
    text-wrap: unset;
    word-break: break-all;
    flex-shrink: 0;
}

@media (min-width:768px) {
    .expert-btn {
        width: 146px;
        padding: 14px 57px 14px 16px;
    }
}

@media (min-width:991px) {
    .scroll-lg-section {
        max-height: calc(100vh - 2.25rem);
        overflow-y: auto;
    }
}

.dash-head {
    color: #fff;
    background: url(../imgs/shape/dashboard-header-bg.png), #001E30;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

:root {
    --table-radius: 10px;
}

.table-radius table {
    border-radius: var(--table-radius);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-radius tr th:first-child {
    border-top-left-radius: var(--table-radius);
}

.table-radius tr th:last-child {
    border-top-right-radius: var(--table-radius);
}

.table-radius tr:last-child td:first-child {
    border-bottom-left-radius: var(--table-radius);
}

.table-radius tr:last-child td:last-child {
    border-end-end-radius: var(--table-radius);
}

.table-cell {
    background: #F8F9F9;
}

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

/* Session Details */
.table-container .dataTables_info {
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.table-container .dataTables_wrapper .previous .page-link,
.table-container .dataTables_wrapper .next .page-link {
    border: 0 !important;
}

.table-container .dataTables_wrapper .pagination-block label {
    margin: 0;
}

.table-container .dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    justify-content: flex-end;
}

/* Page buttons */
.table-container .dataTables_wrapper .dataTables_paginate .page-item .page-link {
    font-size: 14px;
    border-radius: 8px;
    margin: 0 2px;
    color: #333;
    border: 1px solid #ddd;
    padding: 6px 12px;
    transition: background 0.3s;
}

.table-container .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background-color: #f5f5f5;
}

.table-container .dataTables_wrapper .custom-select {
    font-size: 14px !important;
}

/* Active page */
.table-container .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #2678A7;
    color: #fff;
    border-color: #2678A7;
}

/* Disabled buttons (Prev/Next when not clickable) */
.table-container .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: #aaa;
    pointer-events: none;
    background-color: #f9f9f9;
}

/* Expert Modal Country code */
.country-code-dropdown .select2-container {
    width: 125px !important;
}

/* .grecaptcha-badge {
    display: none !important;
} */

.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: 4px !important;
    top: 100px !important;
} 

.grecaptcha-badge:hover {
    width: 256px !important;
}