body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: sans-serif;
}

#chat-launcher {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
}

#chat-launcher buttonイ {
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 30px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.modal.open {
  display: flex;
}

.modal-content {
  background-color: #212121;
  color: #f1f1f1;
  border-radius: 10px;
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  background-color: #2c2c2c;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}

.modal-body {
  flex: 1;
}

.modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

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

@media (max-width: 768px) {
  .modal-content {
    width: 100vw;
    height: 92vh;
    border-radius: 0;
  }
}

@font-face {
  font-family: "Franklin Gothic Book";
  font-style: normal;
  font-weight: 400;
  src: url(font/franklin-gothic-book.eot?) format("eot"),
    url(font/franklin-gothic-book.woff) format("woff"),
    url(font/franklin-gothic-book.ttf) format("truetype");
}
@font-face {
  font-family: MyriadPro;
  font-style: normal;
  font-weight: 400;
  src: url(font/MyriadPro-Regular.eot?) format("eot"),
    url(font/MyriadPro-Regular.woff) format("woff"),
    url(font/MyriadPro-Regular.ttf) format("truetype");
}
body.fontSize18
  .virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.text {
  font-size: 14px;
}
body.fontSize18
  .virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.date {
  font-size: 10px;
}
body.fontSize18 .virtual-consultant.open .virtual-consultant-chat textarea {
  font-size: 14px;
}
body.fontSize20
  .virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.text {
  font-size: 15px;
}
body.fontSize20
  .virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.date {
  font-size: 12px;
}
body.fontSize20 .virtual-consultant.open .virtual-consultant-chat textarea {
  font-size: 16px;
}
.virtual-consultant {
  width: 300px;
  position: fixed;
  bottom: 174px;
  left: 14px;
  z-index: 99998;
  -moz-box-sizing: unset;
  -webkit-box-sizing: unset;
  box-sizing: unset;
}
.virtual-consultant.full {
  width: 500px;
}
.virtual-consultant.open {
  bottom: 0;
}
.virtual-consultant div {
  -moz-box-sizing: unset;
  -webkit-box-sizing: unset;
  box-sizing: unset;
}
.virtual-consultant div.virtual-consultant-button {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 57px;
  background: url(./img/new-background.png);
  background-size: contain;
  border-radius: 8px;
}
.virtual-consultant.full div.virtual-consultant-button {
  height: 100px;
}
.virtual-consultant div.virtual-consultant-button:after {
  content: "";
  background: url(./img/icon.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  width: 80px;
  height: 79px;
  top: -13px;
  right: 5px;
}
.virtual-consultant.full div.virtual-consultant-button:after {
  width: 134px;
  height: 137px;
}
.virtual-consultant.open div.virtual-consultant-button:after {
  top: -19px;
}
.virtual-consultant div.virtual-consultant-button div.close {
  position: absolute;
  top: 4px;
  left: 6px;
  background: url(./img/close.svg) no-repeat 0 0;
  background-size: contain;
  width: 8px;
  height: 8px;
  cursor: pointer;
}
.virtual-consultant.full div.virtual-consultant-button div.close {
  width: 14px;
  height: 14px;
  top: 7px;
}
.virtual-consultant div.virtual-consultant-button div.expand {
  position: absolute;
  top: 4px;
  left: 19px;
  background: url(./img/expand.svg) no-repeat 0 0;
  background-size: contain;
  width: 9px;
  height: 8px;
  cursor: pointer;
}
.virtual-consultant div.virtual-consultant-button div.collapse {
  position: absolute;
  top: 9px;
  left: 19px;
  background: url(./img/collapse.svg) no-repeat 0 0;
  background-size: contain;
  width: 12px;
  height: 3px;
  cursor: pointer;
}
.virtual-consultant.full div.virtual-consultant-button div.collapse {
  width: 17px;
  height: 5px;
  top: 16px;
  left: 28px;
}
.virtual-consultant div.virtual-consultant-button div.resize {
  position: absolute;
  top: 4px;
  left: 37px;
  background: url(./img/resize.svg) no-repeat 0 0;
  background-size: contain;
  width: 9px;
  height: 9px;
  cursor: pointer;
}
.virtual-consultant.full div.virtual-consultant-button div.resize {
  width: 15px;
  height: 14px;
  top: 7px;
  left: 53px;
}
.virtual-consultant div.virtual-consultant-button div.call {
  position: absolute;
  top: 16px;
  right: 98px;
  background: url(./img/call.svg) no-repeat 0 0;
  background-size: contain;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.virtual-consultant.full div.virtual-consultant-button div.call {
  width: 50px;
  height: 50px;
  top: 24px;
  right: 170px;
}
.virtual-consultant div.virtual-consultant-button div.call-text {
  position: absolute;
  top: 4px;
  right: 83px;
  font-family: "Franklin Gothic Book", sans-serif;
  font-size: 9px;
  line-height: 10px;
  color: #12d05e;
}
.virtual-consultant.full div.virtual-consultant-button div.call-text {
  top: 9px;
  right: 145px;
}
.virtual-consultant div.virtual-consultant-button div.collapse-text {
  position: absolute;
  text-transform: uppercase;
  left: 5px;
  bottom: 20px;
  font-family: "Franklin Gothic Book", sans-serif;
  font-size: 13px;
  line-height: 1;
  display: block;
  color: #fff;
}
.virtual-consultant.full div.virtual-consultant-button div.collapse-text {
  bottom: 45px;
  font-size: 15px;
}
.virtual-consultant .virtual-consultant-chat {
  width: calc(100% - 36px);
  height: 360px;
  background-color: #e4e0e0;
  margin-top: -20px;
  padding: 30px 18px 45px;
  display: none;
}
.virtual-consultant.open .virtual-consultant-chat {
  display: block;
}
.virtual-consultant.open .virtual-consultant-chat .messages {
  width: 100%;
  height: 310px;
  overflow: auto;
}
.virtual-consultant.open .virtual-consultant-chat textarea {
  width: calc(100% - 16px);
  height: 40px;
  font-family: "Franklin Gothic Book", sans-serif;
  font-size: 12px;
  color: #999;
  padding: 7px;
  border-color: #014f83;
  border-radius: 5px;
  resize: none;
  outline: 0;
  min-height: unset;
  -moz-box-sizing: unset;
  -webkit-box-sizing: unset;
  box-sizing: unset;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message {
  display: table;
  padding-bottom: 15px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message div {
  font-family: "Franklin Gothic Book", sans-serif;
  font-size: 12px;
  display: table-cell;
  vertical-align: middle;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message div.date {
  font-size: 8px;
  color: #9d9e9e;
  width: 58px;
  padding: 5px 10px;
}
.virtual-consultant.open.full
  .virtual-consultant-chat
  .messages
  .message
  div.date {
  width: 108px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message.own div {
  text-align: right;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message div.text {
  background-color: #014f83;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  width: 163px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .message div.text {
  width: 313px;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.text
  a {
  color: #fff;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message
  div.text
  a:hover {
  text-decoration: none;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .message.own
  div.text {
  background-color: #ccc;
  color: #000;
}
.virtual-consultant.open .virtual-consultant-chat .textarea-wrapper {
  background-color: #e4e0e0;
  padding-top: 5px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .rating {
  background-color: #014f83;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  width: 200px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .rating input {
  margin-top: 8px;
  color: #1d1d1d;
  background: #c4c4c4;
  padding: 4px 5px;
  outline: 0;
  border: 1px solid #c4c4c4;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .rating
  input.error {
  border-color: red;
}
.virtual-consultant.open .virtual-consultant-chat .messages .rating .stars {
  margin-top: 6px;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .rating
  .stars
  button {
  background: transparent;
  border: 0;
  outline: 0;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .rating
  .stars
  button.active
  svg
  path {
  fill: #ece41b;
}
.virtual-consultant.open .virtual-consultant-chat .messages .form {
  padding: 0 30px 15px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .form input {
  width: calc(100% - 10px);
  background: rgba(1, 79, 131, 0.29);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 19px;
  color: #636262;
  padding: 8px 5px;
  margin-bottom: 23px;
}
.virtual-consultant.open .virtual-consultant-chat .messages .form input.error {
  background: rgba(255, 0, 23, 0.29);
}
.virtual-consultant.open .virtual-consultant-chat .messages .form .buttons {
  width: 100%;
  text-align: center;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .form
  .buttons
  button {
  box-shadow: -2px 4px 6px rgba(28, 34, 184, 0.25);
  border-radius: 4px;
  color: #fcf8f8;
  font-size: 13px;
  line-height: 20px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 7px 13px;
}
.virtual-consultant.open.full
  .virtual-consultant-chat
  .messages
  .form
  .buttons
  button {
  padding-left: 30px;
  padding-right: 30px;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .form
  .buttons
  button:first-child {
  background: #339a43;
  margin-right: 11px;
}
.virtual-consultant.open.full
  .virtual-consultant-chat
  .messages
  .form
  .buttons
  button:first-child {
  margin-right: 28px;
}
.virtual-consultant.open
  .virtual-consultant-chat
  .messages
  .form
  .buttons
  button:last-child {
  background: #c43d3d;
}
.virtual-consultant-confirm-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.virtual-consultant-confirm-modal-content {
  width: 100%;
  max-width: 454px;
  height: auto;
  background: #014f83;
  border-radius: 4px;
  margin: 50px auto;
  color: #fff;
  padding: 30px 60px;
  font-size: 15px;
  line-height: 25px;
  text-align: center;
}
.virtual-consultant-confirm-modal-buttons {
  margin-top: 20px;
}
.virtual-consultant-confirm-modal-buttons button {
  border: 0;
  outline: 0;
  border-radius: 4px;
  font-weight: 500;
  font-size: 15px;
  line-height: 25px;
  color: #fff;
  padding: 10px 30px;
}
.virtual-consultant-confirm-modal-buttons button:first-child {
  background: #339a43;
  margin-right: 60px;
}
.virtual-consultant-confirm-modal-buttons button:last-child {
  background: #c43d3d;
}
.virtual-consultant-confirm-modal-overlay {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 864px) {
  .virtual-consultant {
    width: 478px;
    bottom: 36px;
  }
  .virtual-consultant.open {
    width: 100%;
    right: 0;
  }
  .virtual-consultant div.virtual-consultant-button {
    background: #014f83;
    height: 66px;
  }
  .virtual-consultant div.virtual-consultant-button:after {
    width: 136px;
    height: 136px;
    top: -35px;
    right: 15px;
  }
  .virtual-consultant.open div.virtual-consultant-button:after {
    top: -35px;
    right: 53px;
  }
  .virtual-consultant div.virtual-consultant-button div.collapse-text {
    font-size: 23px;
    line-height: 1;
    width: 310px;
  }
  .virtual-consultant.open div.virtual-consultant-button div.collapse-text {
    width: 286px;
  }
  .virtual-consultant.open .virtual-consultant-chat,
  .virtual-consultant.open .virtual-consultant-chat .textarea-wrapper {
    background-color: #f3f3f3;
  }
  .virtual-consultant .virtual-consultant-chat {
    width: calc(100% - 190px);
    height: 75vh;
    padding: 30px 95px 45px;
  }
  .virtual-consultant.open .virtual-consultant-chat .messages {
    height: calc(75vh - 134px);
  }
  .virtual-consultant.open .virtual-consultant-chat textarea {
    height: 108px;
  }
  .virtual-consultant.open .virtual-consultant-chat .messages .message {
    width: 100%;
  }
  .virtual-consultant.open
    .virtual-consultant-chat
    .messages
    .message
    div.text {
    width: 70%;
  }
  .virtual-consultant.open .virtual-consultant-chat .messages .message div,
  .virtual-consultant.open .virtual-consultant-chat textarea {
    font-size: 18px;
  }
  .virtual-consultant div.virtual-consultant-button div.call {
    right: 160px;
  }
  .virtual-consultant div.virtual-consultant-button div.call-text {
    right: 150px;
  }
}
@media (max-width: 600px) {
  .virtual-consultant.open .virtual-consultant-chat .messages .message div,
  .virtual-consultant.open .virtual-consultant-chat textarea {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  .virtual-consultant {
    width: 320px;
    bottom: 17px;
  }
  .virtual-consultant .virtual-consultant-chat {
    width: calc(100% - 100px);
    padding: 30px 50px 45px;
  }
  .virtual-consultant div.virtual-consultant-button div.collapse-text {
    font-size: 18px;
    width: 207px;
  }
  .virtual-consultant div.virtual-consultant-button:after {
    width: 100px;
    height: 100px;
    top: -17px;
    right: 5px;
  }
  .virtual-consultant.open div.virtual-consultant-button:after {
    top: -17px;
  }
  .virtual-consultant.open .virtual-consultant-chat .messages .message div,
  .virtual-consultant.open .virtual-consultant-chat textarea {
    font-size: 14px;
  }
  .virtual-consultant.open div.virtual-consultant-button div.collapse-text {
    width: 230px;
  }
  .virtual-consultant div.virtual-consultant-button div.call {
    right: 107px;
  }
  .virtual-consultant div.virtual-consultant-button div.call-text {
    right: 100px;
  }
}
@media (max-width: 400px) {
  .virtual-consultant {
    width: 300px;
  }
  .virtual-consultant div.virtual-consultant-button div.collapse-text {
    font-size: 16px;
    width: 192px;
  }
  .virtual-consultant .virtual-consultant-chat {
    width: calc(100% - 40px);
    padding: 30px 20px 45px;
  }
  .virtual-consultant.open div.virtual-consultant-button div.collapse-text {
    width: 205px;
  }
  .virtual-consultant.open div.virtual-consultant-button:after {
    right: 10px;
  }
}