:root {
   --scale-width-initial: 1920;
   --scale-height-initial: 1920;
   --scale-width: 1920;
   --scale-height: 1080;
   /* ssa : --scale-size-adjustment width / height */
   --ssaw: calc(var(--scale-width) / var(--scale-width-initial));
   --ssah: calc(var(--scale-width) / var(--scale-width-initial));
}


.chat {
   background: #45C655;
   width: calc(190px * var(--ssaw));
   border-radius: calc(13px * var(--ssaw));
   position: fixed;
   bottom: calc(20px * var(--ssah));
   right: calc(20px * var(--ssaw));
   color: white;
   padding: 8px 20px;
   font-size: calc(20px * var(--ssaw));
   line-height: 1.2;
   text-decoration: none;
   font-weight: bold;
   z-index: 999;
   overflow: show;
}

.chat a {
   text-decoration: none;
   color: white;
}

.chat a:hover {
   color: white;
}

.chat svg,
.chat i {
   font-size: 35px;
}

.chat .chat-modal {
   position: absolute;
   top: calc(-65vh + 100%);
   left: calc(-35vw + 100%);
   width: 35vw;
   height: 65vh;
   border-top-left-radius: calc(14px * var(--ssaw));
   border-top-right-radius: calc(14px * var(--ssaw));
   border-bottom-left-radius: calc(14px * var(--ssaw));
   overflow: hidden;
   display: none;
   background: #666;
   box-shadow: 0px calc(3px * var(--ssaw)) calc(10px * var(--ssaw)) #0000001A;
}

.chat.active .chat-modal {
   display: block;
}

.chat .chat-modal .chat-modal-close {
   position: absolute;
   right: calc(12px * var(--ssaw));
   color: #ddd;
}

.chat .chat-modal .chat-modal-header {
   width: 100%;
   background: #086062;
   padding: 12px 20px;
   border-top-left-radius: calc(14px * var(--ssaw));
   border-top-right-radius: calc(14px * var(--ssaw));
}

.chat .chat-modal .chat-modal-header img {
   height: 2.8em;
   margin-top: -0.4em;
}

.chat .chat-modal .chat-modal-header h1 {
   font-weight: bold;
   font-size: 1em;
   margin: 0;
}

.chat .chat-modal .chat-modal-header h1 small {
   display: block;
}

.chat .chat-modal .chat-modal-header {
   font-weight: normal;
}

.chat .chat-modal .chat-modal-body {
   /* overflow-y: scroll; */
   padding: calc(24px * var(--ssaw)) 0;
   /* height: 66%; */
}

.chat-modal-body .chat-success {
   display: block;
   position: absolute;
   width: 90%;
   height: 40%;
   left: 5%;
   top: 5%;
   margin: 0 auto;
   text-align: center;
   padding: calc(42px * var(--ssaw)) calc(21px * var(--ssaw));
   background: rgba(255, 255, 255, 1);
   border-radius: 12px;
   z-index: 9;
   color: black;
   font-weight: 300;
   font-size: calc(18px * var(--ssaw));
}

.chat-modal-body .chat-success h5 {
   font-size: calc(32px * var(--ssaw));
}

.chat-modal-body .chat-box {
   width: 100%;
   display: block;
   float: left;
   padding: 0 15% 0 5%;
   margin: 0 0 calc(12px * var(--ssaw));
   font-size: calc(18px * var(--ssaw));
}

.chat-modal-body .chat-box.right {
   padding: 0 5% 0 15%;
}

.chat-modal-body .chat-box .chat-box-chat {
   display: block;
   font-size: 14px;
   float: left;
   width: 100%;
   height: max-content;
   padding: 1em;
   margin: 0;
   color: black;
   font-weight: normal;
   background: white;
   border-radius: calc(16px * var(--ssaw));
}

.chat-modal-body .chat-box.right .chat-box-chat {
   float: right;
   background: #EB8F33;
   color: white;
}

.chat .chat-modal .chat-modal-chat {
   position: absolute;
   bottom: 0;
   display: block;
   width: 100%;
   padding: 15px 20px;
   border-bottom-left-radius: calc(14px * var(--ssaw));
   border-top: solid thin #ddd;
   background: #f2f2f2;
}

.chat-modal-chat input {
   display: block;
   height: calc(36px * var(--ssaw));
   width: 100%;
   margin: 0 0 calc(12px * var(--ssaw));
   padding: calc(5px * var(--ssaw)) calc(20px * var(--ssaw));
   border: 0;
   font-size: calc(18px * var(--ssaw));
   border-radius: calc(6px * var(--ssaw));
   font-size: 13px;
}

.chat-modal-chat input:nth-child(2) {
   margin: 0;
}

.chat-modal-chat .chat-modal-send {
   border: unset;
   display: block;
   height: 100%;
   margin: 0;
   padding: 0 20px;
   font-size: 13px;
   text-align: center;
   background: #45c655;
   color: white;
   border-radius: 12px;
}

.chat-modal-chat .chat-modal-send i,
.chat-modal-chat .chat-modal-send svg {
   font-size: calc(36px * var(--ssaw));
   transform: rotate(30deg);
   margin: 0 auto calc(8px * var(--ssaw));
}

.join-us {
   position: fixed;
   right: calc(-72px * var(--ssaw));
   top: calc(320px * var(--ssah));
   background: #EB8F33;
   color: white;
   padding: calc(12px * var(--ssah)) calc(32px * var(--ssaw)) calc(32px * var(--ssah));
   font-size: calc(14px * var(--ssaw));
   font-weight: bold;
   transform: rotate(-90deg);
   letter-spacing: 2px;
   z-index: 3;
   border: unset;
   border-radius: 15px;
}

.text-call-wa {
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
}

.text-wa-caption {
   font-size: 12px;
}

@media (max-width: 800px) {
   :root {
      --scale-width: 440;
      --scale-height: 896;
   }

   .chat {
      width: calc(800px * var(--ssaw));
      /* height: calc(182px * var(--ssah)); */
      /* right: calc(360px * var(--ssaw)); */
      font-size: calc(42px * var(--ssaw));
      /* padding-top: 10px; */
      border-radius: 8px;
   }

   .chat .chat-modal {
      top: calc(-64vh + 100%);
      left: calc(-100vw + 100%);
      width: 102vw;
      height: 65vh;
   }

   .chat .chat-modal .chat-modal-header {
      height: 9%;
      /* padding: .5em 1em; */
   }

   .chat .chat-modal .chat-modal-header h1 {
      font-size: calc(72px * var(--ssaw));
      margin: calc(32px * var(--ssaw)) 0 0;
   }

   .chat .chat-modal .chat-modal-header img {
      height: 5em;
      margin-top: 0;
   }

   .chat .chat-modal .chat-modal-body {
      padding: calc(120px * var(--ssaw)) 0;
   }

   .chat .chat-modal .chat-modal-close {
      right: calc(48px * var(--ssaw));
      top: calc(48px * var(--ssaw));
   }

   .chat-modal-body .chat-box .chat-box-chat {
      border-radius: 12px;
      margin: 4px 0;
   }

   .chat .chat-modal .chat-modal-chat {
      padding: 15px 25px;
   }

   .chat-modal-chat .chat-modal-send {
      padding: 20px;
      border-radius: calc(32px * var(--ssaw));
      font-size: 12px;
   }

   .chat-modal-chat .chat-modal-send i,
   .chat-modal-chat .chat-modal-send svg {
      font-size: calc(92px * var(--ssaw));
      margin: 0 auto calc(32px * var(--ssaw));
   }

   .chat-modal-chat input {
      height: calc(172px * var(--ssaw));
      margin: 0 0 calc(32px * var(--ssaw));
      padding: calc(54px * var(--ssaw));
      font-size: calc(54px * var(--ssaw));
      border-radius: calc(32px * var(--ssaw));
      width: 98%;
      float: right;
   }

   .histories-log {
      bottom: 72px;
      left: unset;
      font-size: calc(64px * var(--ssaw));
   }

   .chat .col {
      padding: 0;
   }

   .chat svg,
   .chat i {
      margin-top: -3px;
      font-size: calc(114px * var(--ssaw));
   }

   .chat-modal-body .chat-box {
      font-size: calc(56px * var(--ssaw));
   }

   .join-us {
      top: 50%;
      padding: 20px;
      font-size: 15px;
      right: -60px;
   }

}