@font-face {
  font-family: bannerFont;
  src: url('/assets/fonts/DB Sathorn X Bd.ttf');
}

.form-agentlivechat {
  width: 370px;
  height: 450px;
  background-color: var(--bc-theme-1);
  border-radius: var(--bc-radius-2) !important;
  border: 1px solid #ced4da;
  display: flex;
  right: 25px;
  align-items: center;
  justify-content: center;
  position: fixed;
  cursor: pointer;
  z-index: 9999999999;
  bottom: 120px;
  font-size: var(--bc-font-size-2);

  .bc-c-form-input {
    font-size: var(--bc-font-size-2);
    padding: var(--bc-spacing-03) 1.25rem;
    border-radius: var(--bc-radius-2);
  }

  .bc-c-form-select {
    font-size: var(--bc-font-size-2);
    padding: var(--bc-spacing-03) 1.25rem;
    border-radius: var(--bc-radius-2);
  }

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

}

.bc-c-btn-primary-alc-submit {
  background-color: var(--bc-primary-100);
  border-radius: var(--bc-radius-2);
  color: var(--bc-theme-1);
  font-size: var(--bc-font-size-3);
  font-weight: var(--bc-font-weight-5);
}

.bc-c-btn-primary-alc-submit:hover {
  color: var(--bc-theme-1);
}

.bc-c-btn-primary-alc-submit:disabled {
  background-color: var(--bc-theme-3);
  color: var(--bc-black-5);
}

.form-success-agentlivechat {
  display: flex;
  right: 25px;
  align-items: center;
  justify-content: center;
  position: fixed;
  cursor: pointer;
  z-index: 9999999999;
  bottom: 90px;
  font-size: var(--bc-font-size-2);

  .bc-c-form-input {
    font-size: var(--bc-font-size-2);
    padding: var(--bc-spacing-03) 1.25rem;
    border-radius: var(--bc-radius-2);
  }

  .bc-c-form-select {
    font-size: var(--bc-font-size-2);
    padding: var(--bc-spacing-03) 1.25rem;
    border-radius: var(--bc-radius-2);
  }

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

  .bc-c-btn-primary-alc-submit {
    background-color: var(--bc-primary-100);
    border-radius: var(--bc-radius-2);
    color: var(--bc-theme-1);
    font-size: var(--bc-font-size-3);
    font-weight: var(--bc-font-weight-5);
  }

  .bc-c-btn-primary-alc-submit:hover {
    color: var(--bc-theme-1);
  }

  .bc-c-btn-primary-alc-submit:disabled {
    background-color: var(--bc-theme-3);
    color: var(--bc-black-5);
  }
}


.alc-menu-top {
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}

.alc-menu-bottom {
  border-bottom-right-radius: calc(0.5rem - 1px);
  border-bottom-left-radius: calc(0.5rem - 1px);
}


.container-form-agentlivechat {
  height: 450px;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-right: 1px !important;
  overflow-y: scroll;
  overflow-x: hidden;

  /* width */
  &::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: var(--bc-primary-50);
    border-radius: 10px;
  }

  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: var(--bc-primary-50);
  }
}

.container-agentlivechat {
  width: 250px;
  /* background:  rgba(0,  0,  0,  .5); */
  border-radius: var(--bc-radius-2) !important;
  display: flex;
  right: 25px;
  align-items: center;
  justify-content: center;
  position: fixed;
  color: #fff;
  cursor: pointer;
  z-index: 9999999999;
  bottom: 120px;
}

.icon-agentlivechat {
  width: 75px;
  height: 75px;
  box-shadow: 0px 0px 8px 3px #ced4da !important;
  border-radius: 100%;
  display: flex;
  right: 25px;
  align-items: center;
  justify-content: center;
  position: fixed;
  color: #fff;
  cursor: pointer;
  z-index: 9999999999;
  bottom: 35px;
}

.icon-agentlivechat-close {
  border-radius: 100%;
  display: flex;
  right: 15px;
  align-items: center;
  justify-content: center;
  position: fixed;
  color: #fff;
  cursor: pointer;
  z-index: 9999999999;
  bottom: 80px;
}

.icon-agentlivechat-img-close {
  width: 30px;
  height: 100%;
}

@media (max-width: 992px) {
  .icon-agentlivechat {
    bottom: calc(35px + 92px);
  }

  .icon-agentlivechat-close {
    bottom: calc(80px + 92px);
  }

  .container-agentlivechat {
    bottom: calc(120px + 92px);
  }

  .form-agentlivechat {
    bottom: calc(120px + 92px);
  }

  .form-success-agentlivechat {
    bottom: calc(90px + 92px);
  }

}

.icon-agentlivechat-img {
  width: 120px;
  height: 100%;
}

.icon-agentlivechat.icon-agentlivechat-open {
  opacity: 1;
  transition: opacity 2s
}

/* Tooltip */
.bc-u-tooltip-agentlivechat .bc-u-tooltiptext-agentlivechat {
  background-color: rgba(64, 102, 185, 0.95);
  border-end-end-radius: 0;
  border-radius: 8px;
  bottom: 95%;
  color: var(--bc-theme-1);
  left: -55px;
  margin-left: -75px;
  opacity: 0.95;
  padding: 6px 6px;
  position: absolute;
  text-align: center;
  transition: opacity 1s;
  visibility: hidden;
  width: 200px;
  z-index: 1;
  text-align: left;
}

.bc-u-tooltip-agentlivechat .bc-u-tooltiptext-agentlivechat::after {
  border-color: rgba(64, 102, 185, 0.95) transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  margin-left: -5px;
  position: absolute;
  right: 10%;
  top: 100%;
}

.bc-u-tooltip-agentlivechat:hover .bc-u-tooltiptext-agentlivechat {
  opacity: 1;
  visibility: visible;
}

/* Tooltip */