/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

 /* fallback */
 * {
   box-sizing: border-box;
 }
 
 @font-face {
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v213/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
 }
 
 .material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
 }
 
 /* fallback */
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v212/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOc7TOVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
 }
 
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
 }
 
 /* ChatBot */
 .chatbot__button {
   position: fixed;
   bottom: 35px;
   right: 40px;
   width: 50px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #3f3eed;
   color: #f3f7f8;
   border: none;
   border-radius: 50%;
   outline: none;
   z-index: 99999;
   cursor: pointer;
 }
 
 .chatbot__button span {
   position: absolute;
 }
 
 .show-chatbot .chatbot__button span:first-child,
 .chatbot__button span:last-child {
   opacity: 0;
 }
 
 .show-chatbot .chatbot__button span:last-child {
   opacity: 1;
 }
 
 .chatbot {
   position: fixed;
   bottom: 100px;
   right: 40px;
   width: 420px;
   background-color: #f3f7f8;
   border-radius: 15px;
   box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1) 0 32px 64px -48px rgba(0, 0, 0, 0.5);
   transform: scale(0.5);
   transition: transform 0.3s ease;
   overflow: hidden;
   opacity: 0;
   z-index: 99999;
   pointer-events: none;
 }
 
 .show-chatbot .chatbot {
   opacity: 1;
   pointer-events: auto;
   transform: scale(1);
 }
 
 .chatbot__header {
   position: relative;
   background-color: #3f3eed;
   text-align: center;
   padding: 16px 10px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   grid-gap: 10px;
 }
 
 .chatbot__header span {
   display: none;
   position: absolute;
   top: 50%;
   right: 20px;
   color: #202020;
   transform: translateY(-50%);
   cursor: pointer;
 }
 
 .chatbox__title {
   font-size: 20px;
   color: #f3f7f8;
   margin: 0;
   font-weight: 700;
   text-align: left;
   font-family: 'Poppins', sans-serif;
   padding: 0;
   width: calc(100% - 70px);
 }
 
 .chatbot__box {
   height: 500px;
   overflow-y: auto;
   margin: 0;
   padding: 30px 20px 100px;
 }
 
 .chatbot__chat {
   display: flex;
 }
 
 .chatbot__chat p {
   max-width: 75%;
   font-size: 14px;
   white-space: normal;
   color: #fff;
   background-color: #615fe5;
   border-radius: 10px 10px 0 10px;
   padding: 12px 16px;
   word-break: break-word;
 }
 
 .chatbot__chat p.error {
   color: #721c24;
   background: #f8d7da;
 }
 
 .incoming p {
   color: #202020;
   background: #e3e3e9;
   border-radius: 10px 10px 10px 0;
 }
 
 .incoming span {
   width: 32px;
   height: 32px;
   line-height: 32px;
   color: #f3f7f8;
   background-color: #3f3eed;
   border-radius: 4px;
   text-align: center;
   align-self: flex-end;
   margin: 0 10px 7px 0;
 }
 
 .outgoing {
   justify-content: flex-end;
   margin: 10px 0;
 }
 
 .incoming {
   margin: 10px 0;
 }
 
 .chatbot__input-box {
   position: absolute;
   bottom: 0;
   width: 100%;
   display: grid;
   gap: 5px;
   align-items: center;
   background: #e2e2f5;
   padding: 0;
   grid-template-columns: 1fr 40px;
 }
 
 .chatbot__textarea {
   min-height: 30px;
   font-size: 14px;
   padding: 12px 10px;
   color: #202020;
   border: none;
   resize: none;
   background: transparent;
   width: 100%;
   max-height: 50px;
   outline: 0 !important;
   box-shadow: none !important;
 }
 
 .chatbot__textarea::placeholder {
   font-family: 'Poppins', sans-serif;
 }
 
 .chatbot__input-box span {
   font-size: 1.75rem;
   color: #202020;
   cursor: pointer;
   opacity: .6;
 }
 
 .chatbot__textarea:valid~span,
 .chatbot__textarea:focus~span {
   opacity: 1;
 }
 
 .chatbot__chat p {
   cursor: pointer;
 }
 
 .chatbot__header img {
   height: 50px;
   width: 50px;
 }
 
 .chatbox__title b {
   font-size: 14px;
   display: block;
   opacity: .95;
   margin: 5px 0 0;
   font-weight: 400;
   color: #fff;
 }
 
/* alert start */
.aisuit-alert-wrap {
  position: fixed;
  right: 50px;
  top: 50px;
  max-width: 450px;
  z-index: 9991;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  -moz-transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.aisuit-alert-wrap.aisuit-error,
.aisuit-alert-wrap.aisuit-success {
  opacity: 1;
  visibility: visible;
}
.aisuit-alert-wrap>p {
  background-color: #fff;
  box-shadow: 0px 0px 30px 0px rgba(18, 224, 215, 0.1);
  border-radius: 5px;
  padding: 15px 20px;
  margin: 0;
  color: #9ca2ab;
  font-size: 16px;
  position: relative;
  padding-left: 80px;
  -webkit-animation: alertanim 0.3s;
  -moz-animation: alertanim 0.3s;
  animation: alertanim 0.3s;
}
.aisuit-alert-wrap.aisuit-error>p {
  box-shadow: 0px 0px 30px 0px rgba(18, 224, 215, 0.1), inset 0px -5px 0px #fe5c31;
}
.aisuit-alert-wrap>p::before {
  content: "Yeay!";
  font-size: 16px;
  font-weight: bold;
  display: block;
  color: #0e141b;
}

.aisuit-alert-wrap>p::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 45px;
  height: 45px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.aisuit-alert-wrap.aisuit-error>p::before {
  content: "Duhh!";
}

.aisuit-alert-wrap.aisuit-error>p::after {
  background-image: url(../images/sad.png);
}

.aisuit-alert-wrap.aisuit-success>p::after {
  background-image: url(../images/happy.png);
}

.aisuit-alert-wrap.aisuit-success>p {
  box-shadow: 0px 0px 30px 0px rgba(18, 224, 215, 0.1), inset 0px -5px 0px #54cc7c;
}
.aisuit-alert-wrap {
  z-index: 999999;
}
/**/
 @media (max-width: 490px) {
   .chatbot {
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     border-radius: 0;
   }
 
   .chatbot__box {
     height: 90%;
   }
 
   .chatbot__header span {
     display: inline;
   }
 }