@keyframes wave-animation {
    0% {
        transform: rotate(0deg)
    }

    10% {
        transform: rotate(-10deg)
    }

    20% {
        transform: rotate(12deg)
    }

    30% {
        transform: rotate(-10deg)
    }

    40% {
        transform: rotate(9deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.wave-on-hover:hover {
    animation-name: wave-animation;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    transform-origin: 50% 100%
}

.bullet-heart {
    background: 0 0 !important;
    position: relative;
    width: 8px;
    height: 8px
}

.bullet-heart:after, .bullet-heart:before {
    content: "";
    background-color: var(--bs-text-muted);
    width: 5px;
    height: 8px;
    position: absolute;
    display: block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transform: rotate(-45deg);
    transform-origin: top;
    left: -50%
}

.bullet-heart:after {
    transform: rotate(45deg);
    left: 50%
}

.menu-link:hover .bullet-heart:after, .menu-link:hover .bullet-heart:before {
    background-color: var(--bs-text-danger) !important
}

@media (min-width: 992px) {
    .header {
        min-height: 100px
    }
}

a > *, button > * {
    pointer-events: none
}

a.custom-list.bg-light h5 {
    font-weight: 900 !important
}

/*.menu-accordion .menu-item .menu-link {
    padding: .35rem 1rem !important
}*/
.fs-small {
    font-size: smaller
}

span.required {
    color: var(--bs-danger)
}

span.required:after {
    content: ""
}

.has-error .help-inline, .has-error .help-block, .has-error .form-label {
    color: var(--bs-danger) !important
}

.form-label {
    margin-top: 2px;
    display: block
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible
    }

    90% {
        opacity: 1;
        visibility: visible
    }

    100% {
        opacity: 0;
        visibility: hidden;
        display: none
    }
}

.fadeOut {
    animation: fadeOut 8s ease-in;
    opacity: 0;
    visibility: collapse;
    z-index: 10001
}

.fadeOutFast {
    animation: fadeOut 2s ease-in;
    opacity: 0;
    visibility: collapse;
    z-index: 10001
}

.emoji-wrapper {
    height: 400px;
    overflow: auto
}

.emoji-wrapper input {
    display: none
}

.emoji-wrapper label {
    padding: .25rem;
    background: #F5F5F5;
    margin: 1px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 2rem;
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center
}

.emoji-wrapper label:hover {
    border-color: #ccc
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: .775rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-gray-700);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: .475rem
}

progress {
    width: 100px;
    height: 6px;
    border: none;
    border-radius: 6px
}

progress::-webkit-progress-bar {
    background-color: var(--bs-gray-100);
    border-radius: 6px
}

progress::-webkit-progress-value {
    background-color: var(--bs-primary);
    border-radius: 6px 0 0 6px
}

progress[value="1"]::-webkit-progress-value, progress[value="100"]::-webkit-progress-value {
    border-radius: 6px
}

[contenteditable] {
    border-bottom: 1px solid transparent
}

[contenteditable]:after {
    content: "\270E";
    color: var(--bs-primary);
    display: inline-block;
    transform: scaleX(-1)
}

[contenteditable]:focus {
    outline: 0;
    border-bottom: 1px dashed var(--bs-primary)
}

.bg-none {
    background: none !important
}

@media print {
    html, body {
        background: #FFF !important
    }

    .no-print, #pnlNotifier, #kt_header_container, #kt_aside, .page-title, #toastr-container, #kt_app_header_container, #kt_app_toolbar, #pnlAssistant {
        display: none !important;
        position: absolute !important; /* Remove from flow */
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    #kt_wrapper {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    .card {
        box-shadow: none !important
    }

    ::-webkit-scrollbar {
        display: none
    }
}

.autocomplete-dropdown {
    position: absolute;
    z-index: 10001;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px #0003;
    max-height: 200px;
    overflow-y: auto
}

.autocomplete-dropdown li {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    width: 100%
}

.autocomplete-dropdown li * {
    pointer-events: none
}

.autocomplete-dropdown li.selected {
    background-color: #f2f2f2
}

.autocomplete-dropdown li:hover {
    background-color: #f2f2f2
}

.autocomplete-dropdown li .img-32 {
    width: 32px;
    height: 32px;
    flex: 0 auto;
    margin-right: 5px
}

input[data-toggle=autocomplete].loading {
    background: url(../App_Assets/images/input-spinner.gif) no-repeat;
    background-position: 99%
}

.form-control.loading {
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.4666665 8.4666669'%3E%3Cpath fill='%23B5B5C3' d='M 4.2324219 0 C 3.1475821 0 2.0637393 0.41281771 1.2382812 1.2382812 C -0.41265486 2.8892064 -0.41265634 5.5776 1.2382812 7.2285156 C 2.8891974 8.8794427 5.5775995 8.8794427 7.2285156 7.2285156 A 0.388006 0.388006 0 0 0 7.2285156 6.6796875 A 0.388006 0.388006 0 0 0 6.6796875 6.6796875 C 5.3253236 8.0340604 3.1414733 8.0340604 1.7871094 6.6796875 C 0.43272699 5.3253231 0.43272551 3.1414842 1.7871094 1.7871094 C 3.1414733 0.43273651 5.3253236 0.43273651 6.6796875 1.7871094 A 0.388006 0.388006 0 0 0 7.2285156 1.7871094 A 0.388006 0.388006 0 0 0 7.2285156 1.2382812 C 6.4030576 0.41281771 5.3172616 0 4.2324219 0 z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 4.2 4.2' to='360 4.2 4.2' dur='650ms' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E")
}

.symbol-label > i.fa {
    color: inherit !important
}

.file-import > small:before {
    background: no-repeat;
    float: left
}

[file-type]:before {
    content: "\f15b";
    min-width: 40px;
    height: 40px;
    background: #546173;
    border-radius: 4px 0 0 4px !important;
    font-family: 'Font Awesome 6 Pro';
    color: #FFF;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    margin-right: 6px
}

[file-type="pdf"]:before {
    background: #c70021;
    color: #c70021;
    content: "\f1c1"
}

[file-type="pdf"]:after {
    color: #c70021
}

[file-type="xls"]:before, [file-type="xlsx"]:before {
    background: #329b5a;
    color: #329b5a;
    content: "\f1c3"
}

[file-type="xls"]:after, [file-type="xlsx"]:after {
    color: #329b5a
}

[file-type="doc"]:before, [file-type="docx"]:before {
    background: #267bd0;
    color: #267bd0;
    content: "\f1c2"
}

[file-type="doc"]:after, [file-type="docx"]:after {
    color: #267bd0
}

[file-type="png"]:before, [file-type="jpg"]:before, [file-type="jpeg"]:before, [file-type="gif"]:before {
    background: #ff9512;
    color: #ff9512;
    content: "\f1c5"
}

[file-type="png"]:after, [file-type="jpg"]:after, [file-type="jpeg"]:after, [file-type="gif"]:after {
    color: #ff9512
}

[file-type="zip"]:before, [file-type="rar"]:before, [file-type="7z"]:before, [file-type="tar"]:before {
    background: #824cca;
    color: #824cca;
    content: "\f1c6"
}

[file-type="zip"]:after, [file-type="rar"]:after, [file-type="7z"]:after, [file-type="tar"]:after {
    color: #824cca
}

[file-type="ods"]:before {
    color: #329b5a;
    background: #329b5a;
    content: "\f0ce"
}

[file-type="ods"]:after {
    color: #329b5a
}

[file-type="odt"]:before {
    color: #267bd0;
    background: #267bd0;
    content: "\f031"
}

[file-type="odt"]:after {
    color: #267bd0
}

[file-type="mp3"]:before, [file-type="wav"]:before, [file-type="aac"]:before, [file-type="ogg"]:before {
    background: #f9c027;
    color: #f9c027;
    content: "\f1c7"
}

[file-type="mp3"]:after, [file-type="wav"]:after, [file-type="aac"]:after, [file-type="ogg"]:after {
    color: #f9c027
}

[file-type="mp4"]:before, [file-type="avi"]:before, [file-type="mov"]:before, [file-type="wmv"]:before {
    background: #3b9ff6;
    color: #3b9ff6;
    content: "\f1c8"
}

[file-type="mp4"]:after, [file-type="avi"]:after, [file-type="mov"]:after, [file-type="wmv"]:after {
    color: #3b9ff6
}

[file-type="txt"]:before {
    background: #AAA;
    content: "\f0f6";
    color: #FFF
}

[file-type="txt"]:after {
    color: #AAA
}

.file-import {
    border-bottom: 1px dashed #ddd;
    position: relative;
    font-size: 12px;
    padding-top: 6px;
    display: flex
}

.file-import > .delete {
    position: absolute;
    right: 0;
    top: 0;
    margin: .25rem 0;
    background: none;
    color: #e54732;
    border: none;
    text-decoration: none;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px
}

.file-import > .delete:hover {
    background: #e54732;
    color: #FFF
}

.file-import > .delete:before {
    content: "\f00d";
    font: normal normal normal 10px/1 'Font Awesome 6 Pro'
}

.pop-info {
    cursor: help;
    width: 20px;
    text-align: center;
    color: #ff4500
}

.pop-info:hover {
    color: #6495ed
}

.pop-info.loading {
    color: #ff4500 !important;
    cursor: progress;
    animation: fa-spin 2s infinite linear
}

.pop-info.loading:before {
    content: "\f1ce";
    font-family: 'Font Awesome 6 Pro';
    display: inline-block;
    animation: fa-spin 2s infinite linear;
    font-weight: 400
}

.pop-info.loaded {
    color: #da70d6
}

.pop-info > span {
    border-bottom: 1px dashed
}

.page-loader.page-loader-custom {
    display: flex;
    justify-content: center;
    align-items: center
}

.widget-loader.widget-loader-custom {
    display: flex;
    justify-content: center;
    align-items: center
}

.widget-loader {
    background-color: var(--bs-body-bg);
    position: relative;
    z-index: 5000;
    display: none
}

span.select2.select2-container.select2-container--bootstrap5 {
    /*width: auto !important; Commented By Prince*/
    flex: 1 1 auto !important
}

.input-group > span.select2.select2-container.select2-container--bootstrap5 {
    width: auto !important
}

.select2-container .select2-results__option.optInvisible {
    display: none
}

.select2-results__options .select2-results__options--nested {
    padding-left: 15px;
    max-height: 100% !important
}

.custom-paginationjs .paginationjs-pages {
    display: flex
}

.custom-paginationjs ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1;
    padding: 0;
    margin: 0
}

.custom-paginationjs a {
    padding: .25rem 1rem;
    border-radius: .375rem;
    background: #fafafa80;
    border: 1px solid #0d6efd;
    color: #0d6efd !important;
    cursor: pointer
}

.custom-paginationjs li > a:hover {
    background: #0d6efd;
    color: #fff !important
}

.custom-paginationjs li.disabled > a {
    border-color: #21252940;
    color: #21252980 !important;
    cursor: not-allowed
}

/* Loader*/
@-webkit-keyframes enter {
    0% {
        opacity: 0;
        top: -10px
    }

    5% {
        opacity: 1;
        top: 0
    }

    50.9% {
        opacity: 1;
        top: 0
    }

    55.9% {
        opacity: 0;
        top: 10px
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        top: -10px
    }

    5% {
        opacity: 1;
        top: 0
    }

    50.9% {
        opacity: 1;
        top: 0
    }

    55.9% {
        opacity: 0;
        top: 10px
    }
}

@-moz-keyframes enter {
    0% {
        opacity: 0;
        top: -10px
    }

    5% {
        opacity: 1;
        top: 0
    }

    50.9% {
        opacity: 1;
        top: 0
    }

    55.9% {
        opacity: 0;
        top: 10px
    }
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -27.5px;
    margin-top: -27.5px
}

.square {
    background: #0FAAE4;
    width: 15px;
    height: 15px;
    float: left;
    top: -10px;
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    opacity: 0;
    -webkit-animation: enter 6s infinite;
    animation: enter 6s infinite
}

.enter {
    top: 0;
    opacity: 1
}

.square:nth-child(1) {
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    animation-delay: 1.8s
}

.square:nth-child(2) {
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    animation-delay: 2.1s
}

.square:nth-child(3) {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    animation-delay: 2.4s;
    background: #103597
}

.square:nth-child(4) {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    animation-delay: .9s
}

.square:nth-child(5) {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.square:nth-child(6) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.square:nth-child(8) {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s
}

.square:nth-child(9) {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    animation-delay: .6s
}

.clear {
    clear: both
}

.last {
    margin-right: 0
}

/*.loader-overlay {position: fixed;top: 0;left: 0; height: 100%;width: 100%;opacity: 0.9;background: #666;background: radial-gradient(ellipse at center, #666666 0%,#333333 100%);}
li.loader-1-7 {transform: rotate(30deg);}
li.loader-2-8 {transform: rotate(60deg);}
li.loader-3-9 {transform: rotate(90deg);}
li.loader-4-10 {transform: rotate(120deg);}
li.loader-5-11 {transform: rotate(150deg);}
.loader-12-6:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 100ms;animation-delay: 100ms;}
.loader-1-7:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 200ms;animation-delay: 200ms;}
.loader-2-8:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 300ms;animation-delay: 300ms;}
.loader-3-9:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 400ms;animation-delay: 400ms;}
.loader-4-10:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 500ms;animation-delay: 500ms;}
.loader-5-11:after {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 600ms;animation-delay: 600ms;}
.loader-12-6:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 700ms;animation-delay: 700ms;}
.loader-1-7:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 800ms;animation-delay: 800ms;}
.loader-2-8:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 900ms;animation-delay: 900ms;}
.loader-3-9:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 1000ms;animation-delay: 1000ms;}
.loader-4-10:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 1100ms;animation-delay: 1100ms;}
.loader-5-11:before {-webkit-animation: fade 1200ms infinite linear;animation: fade 1200ms infinite linear;-webkit-animation-delay: 1200ms;animation-delay: 1200ms;}*/
/*.page-sidebar-fixed .loader > .fa { position: absolute; top: calc(50% - 41px); left: calc(50% - 26px); height: 52px; width: 52px; text-align: center; color: #EEE; }
.page-full-width .loader > .fa { position: absolute; top: calc(50vh - 26px); left: calc(50vw - 26px); height: 52px; width: 52px; text-align: center; color: #EEE; }*/
/*.page-sidebar-fixed .loader > .fa-lightbulb-on {position: absolute;top: calc(50% - 41px);left: calc(50% - 26px);height: 52px;width: 52px;text-align: center;color: #EEE;}
.page-full-width .loader > .fa-lightbulb-on {position: absolute;top: calc(50vh - 26px);left: calc(50vw - 26px);height: 52px;width: 52px;text-align: center;color: #EEE;}*/
.chartWrapper {
    height: 400px;
    width: 100%;
    position: relative;
    overflow: hidden
}

.chartWrapper .amPieChart {
    height: 400px;
    width: 100%
}

.aspNetDisabled, .btn.aspNetDisabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .8
}

.input-group .select2-container--bootstrap5 .select2-selection {
    min-height: calc(1.20em + 1.5rem + 2px)
}

/**UI for chat assistant starts**/
.assistant.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000
}

.assistant .chat-button {
    /*width: 60px;
    height: 60px;
    border-radius: 50%;
   background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
    transition: transform .3s ease
}

.assistant .chat-button:hover {
    transform: scale(1.1)
}

.assistant .chat-box {
    position: fixed;
    bottom: 90px;
    right: 20px;
    resize: both;
    overflow: auto;
    /* Required for resize to work */
    min-height: 300px;
    min-width: 300px;
    width: 300px;
    max-width: 90vw;
    /* Optional: Limits to viewport width */
    max-height: 85vh;
    /* Optional: Limits to viewport height */
    /* width: 300px;
    height: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.assistant .chat-box.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.assistant .chat-body {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    /* Adjusts to fit, minus header height */
    overflow-y: auto
}

.assistant .chat-header {
    cursor: move;
    /* Indicates draggability */
    user-select: none
    /* Prevents text selection while dragging */
}

.assistant #btnAskAI.chat-button {
    /*width: 60px;
    height: 60px;
    border-radius: 50%;*/
    /* Circular shape */
    /*background-color: #007bff;*/
    /* A vibrant blue; adjust as needed */
    /*color: white;
    font-size: 24px;*/
    /* For the '+' symbol */
    /*border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
    /* Subtle shadow for depth */
    cursor: pointer;
    transition: transform .3s ease
    /* Smooth scaling on hover */
}

.assistant #btnAskAI.chat-button:hover {
    transform: scale(1.1)
    /* Slight enlarge effect on hover */
}

/* Pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

.assistant .chat-box.pulse {
    animation: pulse .3s ease-in-out
}

.assistant .close-btn {
    transition: transform .3s ease
}

.assistant .close-btn:hover {
    transform: rotate(90deg)
}

.assistant .resize-handle {
    position: absolute;
    background: #0000001a;
    /* Visible for debugging; remove later if desired */
    z-index: 10
}

.assistant .top, .assistant .bottom {
    width: 100%;
    height: 8px;
    left: 0
}

.assistant .left, .assistant .right {
    height: 100%;
    width: 8px;
    top: 0
}

.assistant .chat-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    outline: none;
    font-size: 14px
}

.assistant .chat-input:focus {
    border-color: #0056d2;
    box-shadow: 0 0 4px #0056d233
}

.assistant .user-message {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #e3f2fd;
    /* Light blue for user */
    border-radius: 16px 16px 0 16px;
    align-self: flex-end;
    max-width: 80%;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.4
}

.assistant .bot-message {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f1f1f1;
    /* Light gray for bot */
    border-radius: 16px 16px 16px 0;
    align-self: flex-start;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.4
}

.assistant .suggestions-header {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    font-style: italic
}

.assistant .suggestion-option {
    padding: 6px 12px;
    margin: 4px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s,border-color .2s
}

.assistant .suggestion-option:hover {
    background: #f0f7ff;
    border-color: #0056d2
}

.assistant .suggestions-container {
    margin-top: 10px
}

.assistant .suggestion-option {
    cursor: pointer;
    padding: 5px
}

.assistant .suggestion-option.disabled {
    color: #888;
    cursor: not-allowed
}

.assistant .suggestions-nav {
    margin-top: 5px
}

.assistant .suggestions-nav a {
    color: #007bff;
    text-decoration: none;
    cursor: pointer
}

.assistant .suggestions-nav a:hover {
    text-decoration: underline
}

.assistant .message-container {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column
}

.assistant .message-container.user {
    align-items: flex-end
}

.assistant .message-container.bot {
    align-items: flex-start
}

.assistant .message-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 4px
}

.assistant .user-message {
    padding: 10px 14px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 16px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.5;
    animation: fadeIn .3s ease
}

.assistant .bot-message {
    padding: 10px 14px;
    background: #f1f5f9;
    color: #1f2937;
    border-radius: 16px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.5;
    animation: fadeIn .3s ease
}

.assistant .typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 16px;
    max-width: 80%
}

.assistant .typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #6b7280;
    /* Gray dots */
    border-radius: 50%;
    margin: 0 2px;
    animation: typing 1s infinite
}

.assistant .typing-indicator span:nth-child(2) {
    animation-delay: .2s
}

.assistant .typing-indicator span:nth-child(3) {
    animation-delay: .4s
}

.assistant .loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #6b7280;
    font-size: 14px;
    font-style: italic
}

.assistant .loading-indicator .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-top: 2px solid #1e40af;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px
}

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

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

@keyframes typing {
    0%,100% {
        transform: translateY(0);
        opacity: .5
    }

    50% {
        transform: translateY(-4px);
        opacity: 1
    }
}

.assistant .top {
    top: -4px;
    cursor: n-resize
}

.assistant .bottom {
    bottom: -4px;
    cursor: s-resize
}

.assistant .left {
    left: -4px;
    cursor: w-resize
}

.assistant .right {
    right: -4px;
    cursor: e-resize
}

.assistant .top-left {
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    cursor: nw-resize
}

.assistant .top-right {
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    cursor: ne-resize
}

.assistant .bottom-left {
    bottom: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    cursor: sw-resize
}

.assistant .bottom-right {
    bottom: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    cursor: se-resize
}

.assistant-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000
    /* Ensures it stays on top of other content */
}

.assistant-dropdown {
    position: fixed;
    /*absolute;*/
    bottom: 100px;
    /* Positions the menu above the FAB */
    right: 20px;
    display: flex;
    flex-direction: column;
    /* Vertical stack */
    align-items: flex-end;
    gap: 10px;
    /* Space between options */
    z-index: 999
    /* Below FAB but above other content */
}

.assistant-dropdown div {
    background-color: #f8f9fa;
    /* Light gray background */
    color: #333;
    padding: 10px 15px;
    border-radius: 20px;
    /* Rounded edges */
    box-shadow: 0 2px 4px #0000001a;
    /* Subtle shadow */
    cursor: pointer;
    transform: translateY(20px);
    /* Start position for animation */
    opacity: 0;
    /* Hidden initially */
    transition: transform .3s ease,opacity .3s ease
    /* Smooth animation */
}

.assistant-dropdown div.show {
    transform: translateY(0);
    /* Move into place */
    opacity: 1
    /* Fully visible */
}

.glanceSuccess {
    -webkit-animation: glanceSuccess 2s;
}

@-webkit-keyframes glanceSuccess {
    0% {
        background: white;
    }

    50% {
        background: var(--bs-success);
    }

    100% {
        background: white;
    }
}

.glanceError {
    -webkit-animation: glanceError 2s;
}

@-webkit-keyframes glanceError {
    0% {
        background: white;
    }

    50% {
        background: var(--bs-danger);
    }

    100% {
        background: white;
    }
}

/**UI for chat assistant ends**/

/*.F, .Female, .Girl {
    background: #ffe5ff !important;
    color: #ff37f9 !important;
}

.F::after, .Female::after, .Girl::after {
    font-family: 'Font Awesome 6 Pro';
    content: "\f182";
    font-size: medium;
    font-weight: 600;
}

.M, .Male, .Boy {
    background: #e5f6ff !important;
    color: #42b7fb !important;
}

.M::after, .Male::after, .Boy::after {
    font-family: 'Font Awesome 6 Pro';
    content: "\f183";
    font-size: medium;
    font-weight: 600;
}

.backdrop-blur {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}*/