@font-face {
             font-family: "pelak";
             src: url("/chatbot/fonts/Pelak-Medium.ttf") format("truetype");
         }
       
         .chatbot-containar{
            text-align: right !important;
            color: white;
            visibility: hidden;
            opacity: 0;

             max-height: 550px;
             height: 80%;
             max-width: 400px;
             width: 90%;

             border-radius: 20px;
             border-style: none;

             bottom: 30px;
             right: 25px;
             position: fixed !important;
             z-index: 1000;
             transition: all 0.5s ease;

         }

         .chatbot-containar.active{
             visibility: visible !important;
             opacity: 100% !important;
             transform: translateY(-20px);
             transition: all 0.3s ease
         }

         .chatbot-containar.deactive {
             visibility: hidden;
             opacity: 0;
         }


         .chatbot-head {
             text-align: right;
             /*text in center*/
             align-content: right;
             
             font-weight: bolder;
             font-size: 20px;
             height: 70px;
             background-color: #f7ad0f;
             border-radius: 20px 20px 0 0;
             padding: 15px;
             display: flex;
             align-items: right;
             /* justify-content: center; */
             position: relative;
         }

         .chatbot-head.chatbot-close-icon{
             background-color: #f7ad0f;
             border-radius: 50%;
             position: absolute;
             left: 10px;
             top: 37%;
             transform: translateY(-50%);
             background-image: url("/chatbot/pictures/Picture3.png");
             background-position: center;
             background-repeat: no-repeat;
             width: 20px;
             height: 20px;
             background-size: 90%;
             cursor: pointer;
             border-style: none;
             align-items: left;

         }

         .chatbot-msg {
             padding: 10px;
             height: calc(100% - 100px);
             overflow-y: scroll;
             background-color: white;
             display: flex;
             flex-direction: column;
             gap: 5px;
             overflow-x: hidden;
         }

         .chatbot-send_msg {
             text-align: right;
             background-color: #f7ad0f;
             margin-right: 0px;
             margin-left: auto;
             height: auto;
             min-height: 25px;
             word-break: break-word;
             overflow-wrap: break-word;
             width: auto;
             max-width: 70%;
             clear: both;
             padding: 10px;
             border-radius: 10px;
             flex-shrink: 0;
             font-size: 18px;
         }

         .chatbot-recive_msg{
            margin-left: 0px;
            margin-right: auto;
            text-align: right;
            background-color: rgb(143, 135, 123);
                         min-height: 25px;

             height: auto;
             white-space: pre-wrap;
                word-break: break-word;
             overflow-wrap: anywhere;             
             width: auto;
             max-width: 70%;
             clear: both;
             padding: 10px;
             border-radius: 10px;
             flex-shrink: 0;
             font-size: 18px;
                         

        }
        .chatbot-bot-msg {
            text-align: center;
             font-size: 11px;
             color: tomato;
             align-items: center;
             margin: 5px auto;
             width: 80%;
         }

         .chatbot-foot {
            display: flex;
            align-items: center;
             text-align: center;
             align-content: center;
             background-color: #f7ad0f;
             height: 50px;
             justify-content: center;
             border-radius: 0 0 20px 20px;
             gap: 5%;
         }

         .chatbot-btn-send {
             background-color: #f7ad0f;
             border-style: none;
             height: 30px;
             border-radius: 20px;
             width: 10%;
           
             margin-left: 5px;
             margin-right: 2px;
             color: white;
             cursor: pointer;
         }