/* Loader styles */
    body {
        color: #fff !important;
    }

    .loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        /* Ensure it's above other elements */
    }

    .loader {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #7459fe;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }

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

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

    .peerConnectionState-new {
        color: cornflowerblue;
    }

    .peerConnectionState-connecting {
        color: orange;
    }

    .w-100 {
        width: 100%;
    }

    .modal th {
        font-size: 16px;
        text-transform: uppercase;
    }

    .peerConnectionState-connected {
        color: green;
    }

    .peerConnectionState-disconnected,
    .peerConnectionState-closed,
    .peerConnectionState-failed {
        color: red;
    }

    .iceConnectionState-new {
        color: cornflowerblue;
    }

    .iceConnectionState-checking {
        color: orange;
    }

    .iceConnectionState-connected,
    .iceConnectionState-completed {
        color: green;
    }

    .peerConnectionState-disconnected,
    .peerConnectionState-closed,
    .peerConnectionState-failed {
        color: red;
    }

    .iceGatheringState-new {
        color: cornflowerblue;
    }

    .iceGatheringState-gathering {
        color: orange;
    }

    .iceGatheringState-complete {
        color: black;
    }

    .signalingState-stable {
        color: green;
    }

    .signalingState-have-local-offer,
    .signalingState-have-remote-offer,
    .signalingState-have-local-pranswer,
    .signalingState-have-remote-pranswer {
        color: cornflowerblue;
    }

    .signalingState-closed {
        color: red;
    }

    .streamingState-streaming {
        color: green;
    }

    .streamingState-empty {
        color: grey;
    }

    /* added css from here */
    body * {
        font-family: "Mulish", sans-serif;
        text-align: left;
    }

    body {
        background-color: #000;
        /* background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgb(1, 1, 32) 35%, rgb(12, 1, 32) 100%); */
        color: white;
    }

    #content {
        width: 820px;
        position: relative;
        margin: 0 auto;
    }

    #buttons {
        clear: both;
        padding: 0 0 0 0;
        text-align: center;
    }

    button {
        padding: 5px 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        margin: 0 5px;
        background-color: #7459fe;
        color: #fff;
    }

    table {
        text-align: left;
    }

    button:hover {
        background-color: #9480ff;
        cursor: pointer;
        transition: all 0.2s ease-out;
    }

    #status {
        clear: both;
        padding: 5px 0 0 0;
        text-align: left;
        display: inline-block;
        zoom: 1;
        line-height: 140%;
        font-size: 15px;
    }

    #status div {
        padding-bottom: 10px;
    }

    #video-wrapper {
        /* background: url(./images/bg.png); */
        height: 400px;
        background-position: top;
    }

    #video-wrapper div {
        /* width: 400px; */
        /* margin: 0 auto;
        padding: 5px 0 0 0; */
    }

    .fw-bold {
        font-weight: bold;
    }

    video {
        display: block;
        /*border:1px solid;*/
        /*border-radius: 50%;*/
        background-color: #000000;
    }

    main {
        grid-area: main;
        /* padding: 10px; */
        /* display: grid; */
        display: block;
        grid-template-rows: 748px 1fr;
    }

    textarea {
        width: 100%;
        padding: 10px;
        background-color: #000;
        border: 1px solid #dedede;
    }

    .products {
        display: flex;
        overflow-x: auto;
        margin-top: 80px;
    }

    .product-card {
        flex: 0 0 272px;
        height: 512px;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        margin-right: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .chatbot {
        /* padding: 10px; */
        padding-top: 0px;
        text-align: center;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* max-height: 600px; */
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .modal-content {
        position: relative;
        margin: 50px auto;
        max-width: 544px;
        background-color: rgba(2, 0, 36, 1);
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .modal-content input {
        border-radius: 5px !important;
        padding: 5px;
    }

    .modal-content select {
        width: 97%;
    }

    .modal-buttons {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .settings-input {
        width: 100%;
        margin: 5px 0;
    }

    #container {
        margin-right: 30px;
        margin-left: 30px;
    }

    .d-none {
        display: none !important;
    }

    input {
        /* background-color: transparent !important; */
        background-color: #313131 !important;
        /* border: 1px solid #dedede; */
        border: none !important;
        border-radius: 10px !important;
        color: white !important;
    }

    input::placeholder {
        color: #777 !important;
    }

    textarea {
        border-radius: 10px !important;
        background-color: #313131 !important;
        border: none !important;
        color: white !important;
        width: 100%;
    }

    select {
        color: #ffffff;
        padding: 10px;
        background-color: transparent !important;
        border-radius: 10px;
        border: none !important;
        background-color: #04104d !important;
        margin: 10px 5px;
    }

    option {
        /* color: #04104d !important; */
        background-color: #313131;
        padding: 10px;
        color: white;
    }

    .row-mainn {
        display: flex;
        padding: 20px;
    }

    .one-item {
        width: 55%;
    }

    .two-item {
        width: 45%;
    }

    .btnrespon {
        width: 45% !important;
    }

    @media screen and (min-width: 601px) and (max-width: 800px) {
        .row-mainn {
            display: flex !important;
            flex-direction: column-reverse !important;
        }

        .one-item {
            width: 100%;
        }

        .two-item {
            width: 100%;
        }

        .btnrespon {
            width: 100% !important;
        }

        /* #video-wrapper {
            height: 400px;
        }

        #talk-video {
            width: 600px !important;
            height: 600px !important;
        } */
    }

    @media screen and (max-width: 600px) {
        .row-mainn {
            display: flex !important;
            flex-direction: column-reverse !important;
        }

        .one-item {
            width: 100%;
        }

        .two-item {
            width: 100%;
        }


        #drawingCanvas{
        
            top: 35px !important;
        }
    }

    @media screen and (max-width: 600px) {
        #show_selected_filename {
            bottom: 80px;
        }
    }

    @media screen and (max-width: 400px) {
        #video-wrapper {
            height: 310px !important;
        }

        /* #talk-video {
            width: 300px !important;
            height: 300px !important;
        } */

    }

    #talk-video {
        /* width: 350px;
        height: 350px; */
        float: unset !important;
    }



    audio {
        /* filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%); */
        width: 250px;
        height: 45px;
        margin-top: 5px;
        margin-bottom: 5px;
    }


    .resizable-div {
        position: relative;
        /* width: 350px; */
        width: 100%;
        min-height: 50px;
        /* border: 1px solid #000; */
        overflow: auto;
        /* resize: auto; */
        /* background-color: #04104d !important;
        background-color: #04104d !important; */
    }

    #txtMsg {
        min-width: 100px;
        resize: both !important;
    }

    /* Resizable Div */


    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .popup-content {
        background-color: #04104d !important;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    #passwordInput {
        margin: 10px;
        padding: 5px;
    }

    #submitButton {
        padding: 10px 20px;
        background-color: #0074d9;
        color: white;
        border: none;
        cursor: pointer;
    }


    .onoffswitch {
        display: inline-block;
        position: relative !important;
        width: 90px !important;
        margin: auto;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    .onoffswitch2 {
        display: inline-block;
        position: relative !important;
        width: 90px !important;
        margin-let: auto;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    .onoffswitch-checkbox {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .onoffswitch-label {
        display: block !important;
        overflow: hidden !important;
        cursor: pointer !important;
        border: 2px solid #999999 !important;
        border-radius: 20px !important;
    }

    .onoffswitch-inner {
        display: block !important;
        width: 200% !important;
        margin-left: -100% !important;
        transition: margin 0.3s ease-in 0s !important;
    }

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block !important;
        float: left !important;
        width: 50% !important;
        height: 30px !important;
        padding: 0 !important;
        line-height: 30px !important;
        font-size: 14px !important;
        color: white !important;
        font-family: Trebuchet, Arial, sans-serif !important;
        font-weight: bold !important;
        box-sizing: border-box !important;
    }

    .onoffswitch-inner:before {
        content: "ON" !important;
        padding-left: 10px !important;
        background-color: #009245 !important;
        color: #FFFFFF !important;
    }

    .onoffswitch-inner:after {
        content: "OFF" !important;
        padding-right: 10px !important;
        background-color: #992222 !important;
        color: #FFFFFF !important;
        text-align: right !important;
    }

    .onoffswitch-switch {
        display: block;
        height: 22px;
        width: 18px;
        margin: 6px !important;
        background: #FFFFFF !important;
        position: absolute;
        top: 0;
        bottom: 0 !important;
        right: 56px !important;
        border: 2px solid #999999;
        border-radius: 20px !important;
        transition: all 0.3s ease-in 0s !important;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
        margin-left: 0 !important;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
        right: 0px !important;
    }


    .ui-datepicker-month,
    .ui-datepicker-year {
        background: #ffb132 !important;
    }

    .rounded-img-video {
        border: 1px solid black !important;
        border-radius: 50% !important;
    }

    label {
        align-self: center !important;
    }

    .form-control {
        color: white;
    }

    input[type=file] {
        margin-bottom: 5px !important;
    }

    .mobile-userinput {
        position: fixed !important;
        bottom: 5px !important;
        z-index: 10000;
    }


    .dropbtn {
        color: white;
        border: none;
    }

    .dropup {
        position: relative;
        display: inline-block;
    }

    .dropup-content {
        display: none;
        /* position: absolute; */
        background-color: #f1f1f1;
        min-width: 170px;
        /* bottom: 50px; */
        /* top: 37.4%; */
        margin-top: -220px;
        /* margin-right: 120px; */
        margin-left: 120px;
        z-index: 1;
    }

    .dropup-content-desktop {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 170px;
        /* bottom: 50px; */
        /* top: 37.4%; */
        margin-top: -420px;
        margin-right: 120px;
        z-index: 1;
    }

    .dropup-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropup-content-desktop a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropup-content a:hover {
        background-color: #ccc
    }

    .dropup-content-desktop a:hover {
        background-color: #ccc
    }

    .dropup:hover .dropup-content {
        display: block;
    }

    .dropup:hover .dropup-content-desktop {
        display: block;
    }

    .dropup:focus .dropup-content {
        display: block;
    }

    .dropup:focus .dropup-content-desktop {
        display: block;
    }

    .dropup:active .dropup-content {
        display: block;
    }

    .dropup:active .dropup-content-desktop {
        display: block;
    }

    .active-dropup {
        display: block;
    }


    .video-size-toggler {
        position: absolute;
        right: 0px;
        padding: 5px 5px;
        background: transparent;
        margin: 0px;
    }

    .mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-3 {
        margin-bottom: 1rem !important;
    }

    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-5 {
        margin-bottom: 3rem !important;
    }

    .btn-node {
        display: inline-block;
    }


    .css-1pobewq {
        margin-top: 8px;
        margin-bottom: 8px;
        width: 100%;
    }

    .css-1eo4jfh {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
    }

    .css-1edscsk {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        cursor: pointer;
        font-size: 12px;
        line-height: 16px;
    }

    .css-143ueja {
        border-radius: 6px;
        background: #484343;
        display: flex;
        width: 20px;
        height: 20px;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        opacity: 0.5;
        margin-right: 8px;
    }

    .css-1eo4jfh button {
        background-color: unset;
        color: unset;
        line-height: unset;
        padding: 0;
    }


    .base-timer {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .base-timer__svg {
        transform: scaleX(-1);
    }

    .base-timer__circle {
        fill: none;
        stroke: none;
    }

    .base-timer__path-elapsed {
        stroke-width: 7px;
        stroke: grey;
    }

    .base-timer__path-remaining {
        stroke-width: 7px;
        stroke-linecap: round;
        transform: rotate(90deg);
        transform-origin: center;
        transition: 1s linear all;
        fill-rule: nonzero;
        stroke: currentColor;
    }

    .base-timer__path-remaining.green {
        color: rgb(65, 184, 131);
    }

    .base-timer__path-remaining.orange {
        color: orange;
    }

    .base-timer__path-remaining.red {
        color: red;
    }

    .base-timer__label {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
    }


    .typing-indicator {
        background-color: #E6E7ED;
        will-change: transform;
        width: auto;
        border-radius: 50px;
        padding: 10px;
        display: table;
        margin: 0 auto;
        position: relative;
        -webkit-animation: 2s bulge infinite ease-out;
        animation: 2s bulge infinite ease-out;
    }

    .typing-indicator span {
        height: 8px;
        width: 8px;
        float: left;
        margin: 0 1px;
        background-color: #9E9EA1;
        display: block;
        border-radius: 50%;
        opacity: 0.4;
    }

    .typing-indicator span:nth-of-type(1) {
        -webkit-animation: 1s blink infinite 0.3333s;
        animation: 1s blink infinite 0.3333s;
    }

    .typing-indicator span:nth-of-type(2) {
        -webkit-animation: 1s blink infinite 0.6666s;
        animation: 1s blink infinite 0.6666s;
    }

    .typing-indicator span:nth-of-type(3) {
        -webkit-animation: 1s blink infinite 0.9999s;
        animation: 1s blink infinite 0.9999s;
    }

    @-webkit-keyframes blink {
        50% {
            opacity: 1;
        }
    }

    @keyframes blink {
        50% {
            opacity: 1;
        }
    }

    @-webkit-keyframes bulge {
        50% {
            transform: scale(1.05);
        }
    }

    @keyframes bulge {
        50% {
            transform: scale(1.05);
        }
    }


    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        grid-gap: 10px;
    }

    .image-grid img {
        width: 100%;
        height: auto;
        cursor: pointer;
    }

    .image-grid img:hover {
        border: 2px solid white;
    }

    .image-grid .selectedImg {
        border: 2px solid #7459fe;
    }


    input[type=range] {
        margin: 20px 0;
        width: 100%;
        border: 0px;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #03a9f4;
        border-radius: 25px;
    }

    input[type=range]::-webkit-slider-thumb {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -8px;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #03a9f4;
    }

    .range-wrap {
        /* width: 500px; */
        position: relative;
    }

    .range-value {
        position: absolute;
        top: -240%;
    }

    .range-value span {
        width: 30px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background: #03a9f4;
        color: #fff;
        font-size: 12px;
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        border-radius: 6px;
    }

    .range-value span:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 10px solid #03a9f4;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        margin-top: -1px;
    }


    fieldset {
        display: none;
        height: 60vh;
        overflow: auto;
    }

    fieldset.show {
        display: block;
    }

    select:focus,
    input:focus {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 1px solid #2196F3 !important;
        outline-width: 0 !important;
        font-weight: 400;
    }

    button:focus {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        outline-width: 0;
    }

    .tabs {
        margin: 2px 5px 0px 5px;
        padding-bottom: 10px;
        cursor: pointer;
    }

    .tabs:hover,
    .tabs.active {
        border-bottom: 1px solid #2196F3;
    }

    a:hover {
        text-decoration: none;
        color: #1565C0;
    }

    .box {
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 10px;
    }

    .modal-backdrop {
        background-color: #64B5F6;
    }

    .justify-content-between {
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .flex-wrap {
        flex-wrap: wrap !important;
    }

    .border-0 {
        border: 0px !important;
    }

    .flex-item {
        /* margin-right: 10px; //Adjust the margin as needed */
        display: flex;
        align-items: center;
    }

    .flex-item input[type="radio"],
    .flex-item input[type="checkbox"] {
        margin-top: 0px;
        margin-right: 5px;
        /* Adjust the margin as needed */
    }

    @media screen and (max-width: 768px) {
        .tabs h6 {
            font-size: 12px;
        }
    }

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


    
    /* ================================my styling===================================================================================================== */
    
    #lyman {
        text-align: center;
        /* position: absolute; */
        top: 40%;
        right: 26%;
    }

    #txtMsg {
        background-color: #313131 !important;
        color: white !important;
        border: #313131 !important;
        /* max-width: 400px !important; */
        border-radius: 0px !important;
    }

    #talk-video,#talk-img {
        
        object-fit: cover;
        width: -webkit-fill-available;    
            /* height: 873px;  */
            height: 100vh; 
        /* width: -webkit-fill-available;
        ;
        height: -webkit-fill-available;
        ; */
    }
    #talk-video1{
        height: 100%;
        /* object-fit: cover; */
        width: 100%;
    }

    .row-mainn {
        margin-top: 30px;
    }

    .resizable-div {
        margin: auto;
        /* border:1px solid #000; */
        color: white
    }

    #mic-send-container {
        position: relative;
        /* display: inline-block;
           width: min-content;
           margin-top: auto;
           margin-left: -50px !important;
           margin: auto;
           margin-bottom: 10px;" */
    }

    .one-item {
        width: 100%;
    }

    [id^="model-response-"] {
        /* text-align: right !important;
  margin: 0px;
  border: 1px solid #48403a;
    background-color: #48403a !important;
    border-radius: 10px;
    padding: 8px;
    width: fit-content;
    float: right; */
        background: rgba(29, 29, 29, .95);
        opacity: .8;
        border-radius: 0 16px 16px;
        color: #fff;

    }

    .break-words-users {
        margin: 0px;
        padding: 8px;
        width: fit-content;
        float: inline-end;
        background: rgba(73, 73, 73, .7);
        opacity: .8;
        border-radius: 16px 0 16px 16px;
        color: #fff;
    }

    /* .leading-snug{
    border: 1px solid #48403a;
    background-color: #48403a !important;
    border-radius: 10px;
} */


    .container-lyman {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 1 1 0%;
        overflow: hidden;
        user-select: text;
        max-width: 500px;
        margin: 20px auto 0px;
        isolation: isolate;


        border-radius: 20px;
    
        /* Smooth Glass Effect */
        /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(20, 20, 20, 0.9)); */
        background: linear-gradient(135deg, rgb(255 255 255 / 90%), rgb(255 255 255 / 90%));
        backdrop-filter: blur(10px);
    
        /* Edge Glow Effect */
        /* box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1),
                    0 0 20px rgba(0, 150, 255, 0.5); */

        box-shadow:  inset 0 0 15px rgba(255, 255, 255, 0.1), 0 0 20px #ffffff;
    
        /* Thin border to enhance the edge effect */
        border: 2px solid rgba(255, 255, 255, 0.2);

        /* ==above commented== */
        /* max-width: 400px; */
        /* max-height: 652px; */
        /* border: 1px solid rgb(219, 219, 219); */
        /* border-radius: 8px; */
    }



    

    .input-dialog {
        scrollbar-width: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8px;
        overflow: auto;
        min-height: 50px;
        /* max-height: 200px; */
        max-height: 300px;
        padding: 80px 10px 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, black), color-stop(97%, black), to(transparent));
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 50%, black 97%, transparent);
        mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, black), color-stop(97%, black), to(transparent));
        mask-image: linear-gradient(to bottom, transparent, black 50%, black 97%, transparent);
        z-index: 2;
    }

    [id^="model-response-"] {
        /* text-align: right !important;
  margin: 0px;
  border: 1px solid #48403a;
    background-color: #48403a !important;
    border-radius: 10px;
    padding: 8px;
    width: fit-content;
    float: right; */
        padding: 8px;
        /* margin-top: 40px; */
        background: rgba(29, 29, 29, .95);
        opacity: .9;
        border-radius: 0 16px 16px;
        color: #fff;
        width: fit-content;
    }

    .input-dialog .didagent__message__container .didagent__message__assistant {
        /* background: rgba(29, 29, 29, .95); */
        opacity: .8;
        border-radius: 0 16px 16px;
        color: #fff;
    }

    .input-dialog .didagent__message__container .didagent__message {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        font-family: inherit;
        margin: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        /* white-space: break-spaces; */
        word-wrap: break-word;
        font-size: .875em;
        max-width: 100%;
    }

    .didagent__embedded__container * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .didagent__main__input {
        position: relative;
        bottom: 0px;
        margin-bottom: 0px;
        /* margin-top: auto; */
        width: 100%;
        height: 74px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 5px;
        padding: 0 6px 6px;
        z-index: 2;
    }

    .didagent__main__input .didagent__main__input__container {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 8px;
        overflow: hidden;
        isolation: isolate;
    }

    .didagent__box__blur {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #494949b3;
        -webkit-backdrop-filter: blur(24px);
        /* backdrop-filter: blur(24px); */
    }

    .didagent__main__input .didagent__main__input__container>input {
        position: relative;
        border: none;
        outline: none;
        resize: none;
        font-family: inherit;
        font-size: 14px;
        text-align: left;
        width: 100%;
        height: 100%;
        background: transparent;
        padding: 0 16px;
        color: #fff;
        caret-color: var(--did-primary-900);
        font-size: 16px;
    }

    .didagaent__send__button,
    .upload-documents-btn,
    .camera-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 8px;
        background-color: transparent;
        height: 100%;
        aspect-ratio: 1;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    ::-webkit-scrollbar {
        width: 12px;
        /* Adjust as needed */
    }

    /* Set the thumb color (the draggable part) */
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        /* Set the desired opacity */
    }

    /* Set the track color (the area not covered by the thumb) */
    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.2);
        /* Set the desired opacity */
    }

    /* will change later on */
    @media (max-width: 768px) {
        #sidebar {
            min-width: 10%;
        }
    }

    @media (max-width: 510px) {


        #talk-video,#talk-img {
            /* width: 400px;
                height: 650px; */
            width: -webkit-fill-available;
            ;
            height: -webkit-fill-available;
            ;
        }
        #video-wrapper {
            height: 347px !important;
        }

        .didagent__main__input .didagent__main__input__container>input {
            font-size: 16px !important;
        }

        .didagent__main__input {
            display: flex !important;
            height: 60px;
            gap: 3px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
        }

        .responsive-svg {
            width: 20px;
            height: 20px;
            font-size: 20px !important;
        }

        .dropup-content a {
            color: black;
            padding: 2px;
            text-decoration: none;
            display: block;
            width: 170px;
        }

        .dropup-content {
            top: 30.9%;
            left: 15.5%;
        }



        /* =============03-06-2024=================== */
        .hamburger {
            display: block !important;
            width: 100%;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            /* margin: 2px; */
        }

        

        .responsive-svg-upload {
            bottom: 1px;
            position: relative;
            margin: 0px !important;
        }

        .responsive-svg-hamburger {
            top: 1px;
            position: relative;
            text-align: center;
        }

        .responsive-svg-camera {
            top: 2px;
            position: relative;
            text-align: center;
        }

        .responsive-svg-xmark {
            top: 2px;
            position: relative;
            text-align: center;
        }



        #upload-documents-btn {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            /* margin: 2px; */
        }
        /* #camera-btn-mobile */
        #camera-btn
        ,#camera-btn-mobile-close {
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
            margin: 2px !important;
        }


        #sidebar {
            display: none !important;
        }

        .dropbtn {

            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            margin-bottom: 2px;
          
        }


        .desktop-child1 {
            display: none;
        }

        .desktop-child2 {
            width: 100% !important;
        }

        /* .input-dialog {
            display: block !important;
        } */

        /* ==================3-11-2024=================== */
        #navbar {
            display: none !important;
        }

   
        .container-lyman {
            height: 100%;
            margin: 0px !important;
            max-width: 100%;
            border: none;
        }

        .main-content {
            padding: 0px !important;
            height: 100%;
        }

        .video-wrapper-child1 {
            height: 100vh;
        }

        #talk-video,#talk-img {
            object-fit: cover;
        }

        #video-size-toggler {
            display: none !important;
        }


        #first {
            background-color: #0b0a0a;
            height: 100%;
            min-height: 10px;
        }

        #separator {
            cursor: row-resize;
            background-color: #aaa;
            /* background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>); */
            background-repeat: no-repeat;
            background-position: center;
            height: 30px;
            width: 100%;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            text-align: center;
            z-index: 40;
        }

        .didagent__header .hamburger-i,
        #toggle-divider,
        .didagent__agent_name {
            display: block ;
        }

        /* .desktop-container {
            height: 100% !important;
        } */
        #app{
            /* min-height: 93vh !important; */
        }
        .camera-ice{
            height: 18px;
            width: 26px !important;
            /* margin-top: 4% !important; */
        }



        .app-lay{
            min-height: unset !important;
        }




        .push-span{
            font-size: 9px !important;
        }

       

    }

 /* .app-lay{
            min-height: 100vh;
        } */

    @media (max-width: 400px) {

        /*
    #talk-video {
    width: 315px !important;
    height: 514px !important;
} */
        /* .didagent__main__input {
margin-top: 154px;
} */

#talk-video,#talk-img {
    /* width: 400px;
        height: 650px; */
    width: -webkit-fill-available;
    ;
    height: -webkit-fill-available;
    ;
}
        /* .input-dialog {
            display: block !important;
        } */

        .container {
            padding: 0px !important;
        }

        .container-lyman {
            height: 500px;
            display: flex;
            flex-direction: column;
        }

        .didagent__main__input {
            display: flex !important;
            height: 55px;
            gap: 2px;
            padding-left: 3px;
            padding-right: 3px;
            padding-bottom: 3px;



            margin-bottom: 0px;
            bottom: 0;
            position: relative;
            /* margin-top: auto; */
        }

        #video-wrapper {
            height: 200px !important;
            /* height: 337px !important; */
        }

        /* .break-words-users {
            padding: 4px;
        } */

        .responsive-svg {
            width: 20px;
            height: 20px;
            font-size: 20px !important;

        }

        .didagent__main__input .didagent__main__input__container>input {
            font-size: 14px !important;
        }

        .dropup-content a {
            color: black;
            padding: 2px;
            text-decoration: none;
            display: block;
            width: 170px;
        }

        .dropup-content {
            top: 30.9%;
            left: 15.5%;
        }


        /* =============03-06-2024=================== */
        .hamburger {
            display: block !important;
            width: 100%;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            /* margin: 2px; */
        }

        .responsive-svg-upload {
            bottom: 1px;
            position: relative;
            margin: 0px !important;
        }

        .responsive-svg-hamburger {
            top: 1px;
            position: relative;
            text-align: center;
        }

        .responsive-svg-camera {
            top: 2px;
            position: relative;
            text-align: center;
        }

        .responsive-svg-xmark {
            top: 2px;
            position: relative;
            text-align: center;
        }

        #upload-documents-btn {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            /* margin: 2px; */
        }
        /* #camera-btn-mobile, */
        #camera-btn,
        #camera-btn-mobile-close {
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
            margin: 2px !important;
        }


        #sidebar {
            display: none !important;
        }

        .dropbtn {

            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            margin-bottom: 2px;
       
        }

        .desktop-child2 {
            width: 100%;
        }

        .desktop-child1 {
            display: none;
        }

        .desktop-child2 {
            width: 100% !important;
        }



        /* ==================3-11-2024=================== */
        #navbar {
            display: none !important;
        }

       

        .main-content {
            padding: 0px !important;
            height: 100%;
        }

        .container-lyman {
            height: 100%;
            margin: 0px !important;
            max-width: 100%;
            border: none;
        }

        .video-wrapper-child1 {
            height: 100vh;
        }

        #video-size-toggler {
            display: none !important;
        }

        .input-dialog {
            padding: 0px !important;
            scrollbar-color: #181212 #181212;
        }

        #first {
            background-color: #0b0a0a;
            height: 100%;
            min-height: 10px;
        }

        #separator {
            cursor: row-resize;
            background-color: #aaa;
            /* background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>); */
            background-repeat: no-repeat;
            background-position: center;
            height: 12px;
            width: 100%;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }



        .didagent__header .hamburger-i,
        #toggle-divider,
        .didagent__agent_name {
            display: block;
        }

/* 
        .desktop-container {
            height: 100% !important;
        } */


        #app{
            /* min-height: 93vh !important; */
        }

        .camera-ice{
            height: 18px;
            width: 26px !important;
            /* margin-top: 4% !important; */
        }
    }

    .dropbtn {
        width: 100%;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        margin-bottom: 2px;
    }
    .container {
        display: none;
    }

    .didagent__header .hamburger-i,
        #toggle-divider,
        .didagent__agent_name {
            display: block ;
        }

        #separator {
            cursor: row-resize;
            background-color: #aaa;
            background-repeat: no-repeat;
            background-position: center;
            height: 18px;
            width: 100%;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            text-align: center;
            z-index: 40;
        }

    .hamburger {
        display: block !important;
        width: 100%;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        /* margin: 2px; */
    }

    /* =============03-06-2024=================== */

    /* .hamburger {
        display: none;
    } */

    /* .responsive-svg-upload {
        margin-top: 25%;
    } */


    #upload-documents-btn,
    #camera-btn,
    #camera-btn-mobile, #camera-btn-mobile-close {
        width: 100%;

        /* border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        margin: 2px; */
    }



    #send-openai-button,
    #empty-openai-field {
        width: 100%;
        position: relative;
        /* left: -35px; */
        /* top: 5px; */
    }


    audio::-webkit-media-controls-panel {
        background-color: rgba(150, 150, 150, 0.2);
    }

    audio::-webkit-media-controls-enclosure {
        background-color: rgba(150, 150, 150, 0.2);
    }


    /* test work 03-07-2024===================================== */
    .didagent__header {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 8px 12px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-box-flex: 1;
        /* -ms-flex: 1; */
        /* flex: 1; */
        /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 6, 4, .3)), color-stop(20%, rgba(9, 6, 4, 0)));
        background: linear-gradient(180deg, #0906044d, #09060400 20%); */
        /* z-index: 99999; */
    }

    .didagent__header .didagent__header-left {
        opacity: 0.7;
        padding: 5px;
        /* background: #161616; */
        margin-top: 20px;
        border-radius: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8px;
    }


    .didagent__header .didagent__header__name {
        user-select: text;
        font-size: 1em;
        font-weight: 500;
        margin: 0;
        color: var(--color, --did-secondary-700);
    }

    .didagent__agent_name {
        user-select: text;
        font-size: 1em;
        font-weight: 500;
        margin: 0;
        color: var(--color, --did-secondary-700);
        padding: 0px !important;
        background: none;
    }


    /* ==========code for desktop view============= */
    .desktop-container {
        display: flex;
        width: 100%;
        height: 96%;
    }

    /* body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 93vh;
        margin: 0;
    } */

    .desktop-chat-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .messages {
        width: 100%;
        height: 300px;
        background-color: #252424;
        overflow-y: auto;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .message {

        padding: 8px;
        margin-bottom: 5px;
        border-radius: 4px;
    }

    .design-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #252424;
        padding: 10px;
        border-radius: 8px;
    }

    .button-group {
        display: flex;
        align-items: center;
    }

    .icon-button,
    .clear-input {
        background-color: transparent;
        border: none;
        cursor: pointer;
        margin: 0 5px;
    }

    .clear-input {
        display: flex;
        align-items: center;
        color: #888;
    }

    .input-field {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        height: 40px;
    }

    .upload-btn,
    .send-btn {
        background-color: #4CAF50;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }



    .upload-btn {
        margin-right: 5px;
    }

    .button-group button {
        margin-right: 10px;
        /* Adjust the margin as needed */
    }

    /* ============================03-08-2024============================ */
    .desktop-child1 {
        width: 50%;

    }

    #thinkingDots {
        display: none;
        /* margin-top: 80px; */
        padding: 8px;
        /* margin-top: 40px; */
        background: rgba(29, 29, 29, .95);
        opacity: .9;
        border-radius: 0 16px 16px;
        color: #fff;
        width: fit-content;

    }

    .thinking-dots {
        font-size: 14px;
        position: relative;
        animation: moveUpDown 1.5s infinite;
    }

    @keyframes moveUpDown {

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

        50% {
            transform: translateY(-10px);
        }
    }

    /* .input-dialog {
        display: none;
    } */

    /* .didagent__main__input {
        display: none;
    } */


    #camera-btn-mobile{
        /* border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px; */
        margin-bottom: 2px;
    }

    #upload-documents-btn{
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }


    /* ======for modal testing=================== */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1000;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        /* overflow: auto; */
        overflow: hidden !important;
        /* Enable scroll if needed */
        /* background-color: rgba(0, 0, 0, 0.4); */
        backdrop-filter: blur(5px);
        /* Black w/ opacity */
    }

    /* Modal content */
    .hamburger-modal-content {
        /* background-color: #494949b3; */
        background-color: #0e0e0eb3;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 20px;
        padding-top: 0px;
        /* border: 1px solid #888; */
        /* width: 80%; */
        height: 80%;
        overflow: auto;
        scrollbar-width: none;
        scrollbar-color: #0e0e0eb3 #0e0e0eb3;
    border-radius: 10px;
    margin-top: 8%;
    }

    /* Close button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.dropdown {
    position: relative;
  }
  
 

  .quick-a{
    padding: 2px !important;
  }

  .quick-menu, .quick-menu-camera {
    padding: 2px !important;
    min-width: 90px !important;
    right: 0px;
    position: absolute !important;
    background-color: #353535 !important;


}

.dropdown-item:hover {
    /* background: rgb(212, 187, 252) !important; */
    color: white !important;
}
  .quick-menu a , .quick-menu-camera a  {
    color: white;
}
 
  #jenny-dropdown-btn{
    background: none;
  }

  button#jenny-dropdown-btn::after {
    display: none !important;
}
.container-question{
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between;
    position: relative;
}
.question{
        /* width: calc(50% - 10px); */
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        /* background-color: #f0f0f0; */
        /* border: 1px solid #ccc; */
        border-radius: 10px;
        box-sizing: border-box;
        /* color: black; */
        /* opacity: 0.5; */
        /* background-color: #000000; */

}

#question-0-span{
    margin: 8px !important;
    padding: 8px;
    width: fit-content;
    float: inline-end;
    background: rgba(73, 73, 73, .7);
    opacity: .8;
    border-radius: 16px 0 16px 16px;
    color: #fff;

}

/* [id^="question-"] {
    margin: 0px;
    padding: 8px;
    width: fit-content;
    float: inline-end;
    background: rgba(73, 73, 73, .7);
    opacity: .8;
    border-radius: 16px 0 16px 16px;
    color: #fff;
} */

.span-0{
    display: none !important;
}


.custom-dropdown {
    width: 100% !important;
    padding: 0.5rem !important;
    /* border-radius: 5px !important; */
    /* border: 1px solid #ccc !important; */
    background-color: #313131  !important;
  
    color: white !important;
}

h6 {


    font-weight: 700 !important;

  }

  #advertisement{
    /* background-color: #36312C; */
    z-index: 9999;
    display: flex;
    height: 28px;
    align-items: center;
    justify-content: space-around;
    /* border-bottom: 2px solid; */
    /* border-top: 2px solid #000; */
  }

  #advertisement.green {
    background-color: green !important;
}

.btn-default{
    background-color: #494949b3 !important;
}

  

/* #toggleCameraDetailsIcon{
    position: absolute;
    color: white;
    right: 10px;
    top: 10px;
    z-index: 444;
} */

.fa-beat-fade{
    background: rgb(112 211 112 / 46%) !important;
}

#sidebar{
    display: none !important;
}

#navbar{
    display: none;
}


#stop-openai-button{
    display: none;
    background: rgb(243 32 32 / 46%);
}

.desktop-child2{
    height: 96%;
}

#input-5{
    /* display: flex;
    flex-direction: column; */

    width: 54px;
}

.hamburger-full-screen{
    height: 50%;
    display: block ;
    width: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 2px;
}

#expand-chat-messages{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 2px;
}
.dropbtn-full-screen {

    height: 50%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    /* margin: 2px; */
    width: 100%;
  
}
.unset-border-radius {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

#exit-openai-button{
    display: none;
}


/* #mute-openai-button{
    display: none;
} */

@media (max-width: 768px) {
    .container-lyman{
        margin: 0px;

        max-width: -webkit-fill-available;
    }

    #talk-video,#talk-img {
        object-fit: cover;
        width: -webkit-fill-available;
        /* height: 1028px; */
    }
    .desktop-container{
        height: 93vh !important;
        /* height: 100vh !important; */
    }

    #app{
        /* min-height: 93vh !important; */
    }


    #input-0{

        width: 50px;
        /* display: flex;
        justify-content: start; */
    }
    #input-last{
        width: 50px;
        /* display: flex;
        justify-content: end; */
    }

    #previous-button{
        width: 45%;
    }
    
    #next-button{
        width: 45%;
    }
}



canvas {
    display: block;
    width: 100%;
}

.info {
    display: inline-block;
    float: right;
    margin: 15px 20px 0;
}




.sticky-header{
    display: flex;
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #0e0e0d f;
    border: none;
    /* border-radius: inherit; */
    padding-left: 24px;
    padding-right: 24px;

    background: #202021;
    margin-left: -20px;
    align-items: center;
    height: 50px;
}


.myspinner {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.20);
}



.right-body-child ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    text-align-last: center;

}

.right-body-child li {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #f0f0f0;
    text-decoration: none; /* Ensure text decoration is none */
    transition: background-color 0.3s;
}

.right-body-child li:hover {
    background-color: #333;
}


.sub-menu {
    position: absolute;
    /* left: -103.5%; Initially positioned off the left side */
    left: -96%; /* Initially positioned off the left side */

    background-color: #313131; /* Change this to match your design */

    border: 1px solid #313131; /* Change this to match your design */
}




#let-talk:hover + .sub-a, .sub-a:hover{
    display: block !important;

}

#private-talk:hover + #sub-menu-pm,#sub-menu-pm:hover {
    display: block !important;
}


/* ==========================draw styling=================== */
.toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: #272727;
    opacity: 0.7;
    justify-content: space-between;
}

.toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

#pencilBtn img,#eraserBtn img, #brushSizeBtn img, #clearBtn img {
    width: 24px;
    height: 24px;
}

.color-palette {
    display: none;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 40px;
}

.color-palette .color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.brush-size-slider {
    display: none;
    margin-bottom: 10px;
    width: 50% !important;
    z-index: 99999;
    position: absolute;
    margin: 0px !important;
    margin-top: 40px !important;

}

/* canvas {
    border: 1px solid #000;
    z-index: 1000;
   
    top: 40;
} */


#drawingCanvas{
    position: fixed;
    border: none;
    z-index: 1000;
    width: auto;
    /* top: 55px; */
    top: 33px;
}



/* =============================16-05-2024=============================== */
.auto_visual_switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px; /* Adjusted size */
            width: 16px; /* Adjusted size */
            left: 2px; /* Adjusted position */
            bottom: 2px; /* Adjusted position */
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: green;
}

input:checked + .slider:before {
    transform: translateX(15px);
}


.camera-btn{
    /* border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; */
    margin-bottom: 2px;
}



.toolbar-1, .toolbar-2, .toolbar-3{

    display: flex;
    justify-content: center;
    align-items: center;
}

.toolbar-1{
    margin-left: 3px;
}
.toolbar-3{
    margin-right: 3px;
}

.toolbar-item {
    margin: 0 3px; /* Adjust the margin value as needed */
    
}


 /* Custom styles for SweetAlert */
 .swal-theme {
    background-color: #333;
    color: #fff;
    border: 2px solid #555;
    width: max-content;
}

.swal-modal{
    background-color: #333;
}

.swal-title, .swal-text {
    color: #fff;
}

.swal-button {
    background-color: #555;
    color: #fff;
}

.swal-button:hover {
    background-color: #777;
}
.swal-icon--info{
    background-color: red;
}
.styled-text {
    text-align: left;
    font-family: Arial, sans-serif;
}

.styled-text p {
    margin: 0;
}


/* ==================22-05-2024=================== */
.agent-box-1245{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#talk-openai-live-button{
    /* border-top-left-radius: 0px;
    border-top-right-radius: 0px; */
    height: 100%;
}
#talk-openai-button{

    height: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 2px !important;
}

#advertisement a{

    color: white;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px;

}

.advertisement a:hover {
    background-color: #000;
}

@media (max-width: 600px) {

#audio-visualization-div{
    /* bottom: 150px !important; */
}

}

.selected-link {
    background-color: black;
    color: white; /* This ensures the text is visible on a black background */
}

@media  (max-width: 850px) {
    .container-lyman{
        max-width: 100% !important;
        margin: 0px;
    }

}
#openAgentMod{
    width: 100%;
    margin-bottom: 2px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.empty-openai-field{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.advertisement-container_1 {
    display: flex !important;
    border-top: 2px solid #000;
    /* overflow: hidden; */
    /* overflow: hidden; */
    position: relative;
    background-color: #36312C;



}

.advertisement {
    overflow-x: auto;
    scrollbar-width: none;
    width: 90%;
}

.setting-item {
    flex: 0 0 auto;
    width: 70px;
    text-align: center;
}

.scroll-buttons {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
}

.scroll-buttons div {
    padding: 5px;
    cursor: pointer;
}


/* subSettings-1

display: flex;
flex-direction: column;
bottom: 30px;
position: absolute;
width: 70px;
padding: 5px;
z-index: 9999;
cursor: pointer;
background: grey; */

[id^="subSettings-"] {
    display: flex;
    flex-direction: column;
    bottom: 30px;
    position: absolute;
    width: 70px;
    padding: 5px;
    z-index: 9999;
    cursor: pointer;
    background: #36312C; 
    border-radius: 7px;
    text-align: center;

}


#talk-openai-live-button.active {
    background-color: green;
  }
  #talk-openai-live-button.inactive {
    background-color: red;
  }


#input-0{

    width: 50px;
    display: flex;
    justify-content: end;
    margin-left: auto;
}
#input-last{
    width: 50px;
    display: flex;
    justify-content: start;
    margin-right: auto;
}

/* .bottom_menu_bottons_1,.bottom_menu_bottons_2,.bottom_menu_bottons_5{
    display: none !important;
    width: 54px;
} */


#visualization-canvas-div{
    /* width: 90%; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121111;
    border-radius: 20px;
}

#livekit-mic-button{
    margin-bottom: 2px;
    /* display: none; */
}

.bar2 {
    width: 20px;
    height: 3px;
    /* background-color: gray; */
    /* margin: 0 5px; */
    margin: 0px 5px -45px;
    border-radius: 5px;
    box-shadow: 0 0 10px gray;
    transform-origin: center;
}

.bar {
    width: 30px;
    height: 3px;
    /* background-color: #00eaff; */
    margin: 0 8px;
    border-radius: 5px;
    box-shadow: 0 0 10px #bfc3c3;
    transform-origin: bottom;
}

#bar-visualization{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* margin-top: auto; */
    /* z-index: 44;  */
    z-index: auto;
    position: relative;
    top: 10%;
}

#nprogress {
    position: fixed;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    z-index: 9999; /* Ensure it's above other content */
    /* background-color: #009245; */
}

#volume-slider-agent{
    position: absolute;
        top: 4px;
        right: 2px;
        display: flex;
        z-index: 4;
        height: 100%;
        transform: rotate(270deg);
        /* transform-origin: 50% 50%; */
        width: 150px;
        position: relative;
        float: right;
}

#volume-sec{
    display: flex;
    /* justify-content: end; */
    align-items: center;
}

/* .push-to-talk-button{
    display: none;
} */

.push-span{
    text-align: center; 
    font-size: 12px; 
    font-weight: 700; 
    user-select: none; 
}
.bm-hidden {
    display: none !important;
}

/* .bm-1-1, .bm-1-2, .bm-1-3, .bm-1-4, .bm-1-5, .bm-2-5, .bm-6-1, .bm-7-2, .bm-7-3, .bm-7-4 {
    display: none !important;
} */

#fa-cartet-left-span,#fa-cartet-right-span{
    font-size: 10px;
    display: flex;
    color: black;
    position: absolute;
    top: 43%;
    left: 28%;
    user-select: none;
}

.bb-t{
    font-size: 10px;
display: flex;
justify-content: center;
align-items: end;
margin-top: 6px;
text-align: center;
user-select: none;
font-size: 8px;
font-weight: 500;
line-height: initial;

}

.set-min-and-default-width{
    min-width: 50px;
    width: 50px;
}

.b-res-width{
    min-width: 50px;
    width: 50px;
}


@media (max-width: 400px) {
    .b-res-width{
        min-width: 40px;
        width: 45px;
    }
    .set-min-and-default-width{
        min-width: 40px;
        width: 45px;
    }
    #input-0,#input-last{
        width: 40px;

    }

}

#live-speak-gpt4o,#camera-btn-mobile,#livekit-mic-button{
    width: 100%;
    margin-bottom: 2px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#type_keyboard,#livekit-screenshare-button{
    width: 100%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}


.pulse {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.character {
    fill: #f08140;
  }
  
  .svg-eyes {
    stroke: #000000;
    stroke-width: 3;
    fill: none;
  }

  .mouth {
    stroke: #000000;
    stroke-width: 4;
    fill: none;
  }

 
  @keyframes bubble {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(0.1);
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(0, -150px) scale(1);
    }
  }

  .s-s{
    /* margin-left: 20px; */
    /* padding-top: 20px; */
    /* padding-right: 20px; */
    /* padding-left: 20px; */
    /* display: none; */
    /* overflow-x: auto; */
    /* margin-top: 20px; */
    /* width: 70%; */
    width: 100%;
    min-width: 200px;
    height: 100%;
  }

  #drawingCanvasRepl{
    position: absolute;
    /* width: max-content; */
    height: 95%;
    top: 35px;
    left: 0;
  }


  #shared-video-repl{
    width: 100%;
    height: 100%;
  }

  #videoCanvasContainerRepl{
    position: relative;
    width: auto;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgb(255, 255, 255);
    overflow: auto;
    scrollbar-color: #ff0000 #000000;
  }


  .result {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #3c4043;
}
.result h2 {
    margin: 0;
    font-size: 18px;
    color: #8ab4f8;
}
.result a {
    text-decoration: none;
    color: #8ab4f8;
}
.result a:hover {
    text-decoration: underline;
}
.result .displayLink {
    font-size: 14px;
    color: #bdc1c6;
}
.result .htmlSnippet {
    margin: 10px 0;
    font-size: 14px;
}
.result img {
    max-width: 50px;
    border-radius: 50%;
    display: block;
    margin-right: 10px;
}

/* ===========youtube plugin=================== */
/* Container for video results */
.youtube-results-container {
    background-color: black;
    color: white;
    padding: 20px;
}

/* Styling each video item */
.video-item {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(255, 17, 17);
    padding-bottom: 15px;
}

/* Styling for video thumbnail */
.thumbnail img {
    max-width: 120px;
    /* height: -webkit-fill-available; */
    border: 2px solid rgb(255, 17, 17);
    border-radius: 5px;
}

/* Styling for video details */
.video-details {
    margin-left: 15px;
    flex-grow: 1;
}

/* Styling for video title */
.video-title {
    color: #00aaff; /* Blue color for the video title */
    font-size: 18px;
    text-decoration: none;
}

/* Change title color on hover */
.video-title:hover {
    color: #0088cc;
}

/* Styling for channel and published date */
.channel, .publish-date, .description {
    color: white;
    margin: 5px 0;
}

/* Ensure responsive behavior */
@media (max-width: 768px) {
    .video-item {
        flex-direction: column;
        align-items: center;
    }
    .thumbnail img {
        max-width: 100%;
    }
    .video-details {
        margin-left: 0;
        text-align: center;
    }
}


#open-window-iframe{
    width: 100%;
    height: 100%;
}
#drawingCanvasRepl{
display: none;
}

/* toolcall backend============= */
.source-container {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.source-heading {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.source-content {
    display: flex;
    align-items: flex-start;
}

.source-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}

.source-details {
    max-width: calc(100% - 100px);
}

.source-link {
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
}

.source-link:hover {
    text-decoration: underline;
}

.source-description {
    font-size: 0.9rem;
    color: #333;
}


.stop-generating-response{
    margin-left: 9%;
}



.custom-wrapper {
    display: flex;
    position: relative;
    width: 100%;
}

.custom-arrow {
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
    /* background-color: #007bff; */
    color: white;
    border-radius: 5px;
    z-index: 10; /* Ensures the arrow is above the sidebar */
    transition: transform 0.3s ease; /* Transition for arrow movement */
    position: absolute; /* Position it on the left side */
    left: 0; /* Align to the left */
}

.custom-sidebar {
    width: 270px;
    background-color: #000000;
    opacity: 0.7;
    position: absolute;
    left: -270px; /* Hidden by default */
    transition: left 0.3s ease;
    padding: 15px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    z-index: 5; /* Ensures the sidebar is behind the arrow */
}

.custom-sidebar.open {
    left: 0; /* Show sidebar */
}

.custom-content {
    flex: 1;
    padding: 20px;
    margin-left: 270px; /* Space for the sidebar */
}

/* Move the arrow when the sidebar is open */
.custom-arrow.open {
    transform: translateX(270px); /* Move arrow to the right by the width of the sidebar */
}

.chat-item {
    position: relative;
    margin: 10px 0;
    padding: 8px;
    background-color: #292424;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.options {
    /* display: none;  */
    /* position: absolute;
    right: 21;
    top: 70%;
    background: #494949b3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 20;
    font-size: 12px; */
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.options.active {
    display: block; /* Show options */
}

.option {
    padding: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.option:hover {
    background-color: #8bb9fe; 
}

.ellipsis {
    cursor: pointer;
    font-size: 12px;
    margin-left: 10px;
}

/* message copy button */

.copy-btn {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    background: rgba(29, 29, 29, .95);
    backdrop-filter: blur(2px);
    height: fit-content;
    margin-left: 5px;

}

.message-container:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(29, 29, 29, .95);
    transform: scale(1.1);
}

.copy-btn.copied {
    opacity: 1 !important;
    color: #10B981;
}


/* =================chat-container============================== */
.chat-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: #1e1e1e;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: width 0.3s ease-in-out;
}

.header {
    background: #515151;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
}

.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: #36312C;
    display: flex;
    flex-direction: column;
    color: #e0e0e0;
}

.message {
    max-width: 75%;
    padding: 0.8rem;
    margin: 0.5rem;
    border-radius: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}

.bot-message {
    /* background: #3700b3; */
    align-self: flex-start;
}

.user-message {
    background: #323232d9;
    color: white;
    align-self: flex-end;
}

.message-wrapper {
    display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
        justify-content: flex-start;
        align-items: center;
}




@media (max-width: 600px) {
    .message {
        max-width: 90%;
    }
}

/* ==========================chat expand sidebar================================= */
  /* Sidebar Styles */
 /* Sidebar */
 .expand-sidebar {
    width: 250px;
    background-color: #515151;
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width 0.3s ease-in-out;
    /* padding-top: 60px; */
}

.expand-sidebar.closed {
    width: 0;
    padding: 0;
    overflow: hidden;
    transform: translateX(-100%);
}

.expand-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.expand-sidebar-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.history-item {
    margin-top: 3px;
    padding: 10px;
    border-radius: 20px;
    border-bottom: 2px solid #36312C;
    cursor: pointer;
    /* box-shadow: inset 0 0 15px rgb(179 33 33 / 10%), 0 0 20px #f0f3f0; */
    transition: background-color 0.2s ease;
}

.history-item:hover {
    background-color: #34495e;
}

.history-item.active{
    background-color: #34495e;
    font-weight: bold;

}

/* Chat Area */
.chat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    background: #515151;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
}

.expandchat-flex {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}


.message:hover .copy-btn {
    opacity: 1;
}
/* ========================================================= */

/* minimal visualization=================================== */

#minimalVisualizer {
    position: absolute;
    /* background: linear-gradient(45deg, #1a1a1a, #2a2a2a); */
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    z-index: 0;
}

#minimalActVersion {
    max-height: 90vh; /* Limits maximum height on large screens */
    width: 90vw; /* Takes 90% of viewport width */
    max-width: 600px; /* Maximum size on large screens */
    height: fit-content;
    margin: 0 auto;
}

@media (max-width: 600px) {
    #minimalActVersion {
        width: 100vw;
        max-height: 100vw; /* Maintain square aspect ratio on mobile */
    }
}

#micBtn {
    transition: transform 0.3s ease;
}

#micBtn:hover {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* #minimalActVersion {
        aspect-ratio: 1 / 1;
    } */

    #micIcon {
        font-size: 18px;
    }
}

#micBtn:hover {
    filter: drop-shadow(0 0 8px
    #99ff15
            66);
}

#micIcon {
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px
    #99ff15
        );
}

#visualizerLogo {
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
}
/* ================================================================== */