div+css实现响应式自适应右下角聊天窗口效果代码-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：div+css实现响应式自适应右下角聊天窗口效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
#info {
  font-size: 20px;
}
#div_start {
  float: right;
}
#headline {
  text-decoration: none;
}
#results {
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: left;
  min-height: 150px;
}
#start_button {
  border: 0;
  background-color: transparent;
  padding: 0;
  width: 30px !important;
  height: 30px !important;
}

#start_img {
  width: 30px !important;
  height: 30px !important;
}
.interim {
  color: gray;
}
.final {
  color: black;
  padding-right: 3px;
}
.button {
  display: none;
}
.marquee {
  margin: 20px auto;
}

#buttons {
  margin: 10px 0;
  position: relative;
  top: -50px;
}

#copy {
  margin-top: 20px;
}

#copy > div {
  display: none;
  margin: 0 70px;
}

.CarcodeWidgetResetContainer.MainContainer9e5 {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.CarcodeWidgetResetContainer.MainContainer--fixed65s {
  max-height: 100vh !important;
  width: 100% !important;
  height: calc(100% - 10px) !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    width: 320px !important;
    height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .CarcodeWidgetResetContainer.MainContainer--fixed65s {
    height: 620px !important;
  }
}
.CarcodeWidgetResetContainer .VideoChatContainer-local2HJ {
  width: 20% !important;
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer .VideoChatContainer-local2HJ {
    width: 240px !important;
  }
}
.CarcodeWidgetResetContainer .PrivacyStatement--link254:hover {
  opacity: 0.8 !important;
}
.Form__fields198 > :not(:last-child) {
  margin-bottom: 8px !important;
}
.CarcodeWidgetResetContainer .InputActionButton1OE {
  padding: 8px 12px !important;
  transition: background-color 0.15s linear !important;
}
.CarcodeWidgetResetContainer .InputActionButton--roundedeeR {
  padding: 6px !important;
}
.CarcodeWidgetResetContainer .InputActionButton1OE svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}
.CarcodeWidgetResetContainer .BaseInput__container2fc {
  transition: border 0.15s linear !important;
}
.CarcodeWidgetResetContainer .BaseInput-input2pX {
  padding: 0 16px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .BaseInput-input2pX,
.CarcodeWidgetResetContainer .BaseInput-input2pX:focus {
  background-color: transparent !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .BaseInput-input2pX,
  .CarcodeWidgetResetContainer .BaseInput-input2pX:focus {
    font-size: 16px !important;
  }
}
.CarcodeWidgetResetContainer .BaseTextArea__container3xf {
  transition: border 0.15s linear !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri {
  padding: 0 16px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri,
.CarcodeWidgetResetContainer .BaseTextArea-textarea3ri:focus {
  background-color: transparent !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .BaseTextArea-textarea3ri,
  .CarcodeWidgetResetContainer .BaseTextArea-textarea3ri:focus {
    font-size: 16px !important;
  }
}
.CarcodeWidgetResetContainer .BaseTextArea-error1s7 {
  max-height: 0 !important;
}
.CarcodeWidgetResetContainer .BaseTextArea-error--show2SP {
  max-height: 150px !important;
}
.CarcodeWidgetResetContainer .Rating3cO :not(:last-child) {
  margin-right: 4px !important;
}
.CannedMessageArk {
  position: relative !important;
}
.CannedMessageArk:not(:last-child) {
  margin-right: 10px !important;
}
.CarcodeWidgetResetContainer .CannedMessages--CHECKBOX1W7 {
  display: inline-flex !important;
  flex-direction: column !important;
}
.CarcodeWidgetResetContainer .CannedMessages__wrapper--CHECKBOX2zL {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.DepartmentsSelector3vD > * {
  flex: 1 1 100% !important;
}
.CloseButton1e5:hover {
  transform: rotate(90deg) !important;
}
.FormHeader__titletIt > :first-child {
  margin-right: 10px !important;
}
.CarcodeWidgetContainer .ThanksMessageImage1RQ {
  animation: letter2Zm 1.8s ease-out !important;
}
@keyframes letter2Zm {
  0% {
    transform: translateX(-60%);
  }
  to {
    transform: translateX(0);
  }
}
.ModalActions3R_ > :not(:last-child) {
  margin-right: 8px !important;
}
.CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
  max-height: calc(100vh - 20px) !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .CarcodeWidgetResetContainer .MainSmsContainer--fixed2q3 {
    max-height: 620px !important;
  }
}
.CarcodeWidgetResetContainer .ArrowButton1gi {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer .ArrowButton--collapsed6jl {
  padding: 0 !important;
}
.CarcodeWidgetResetContainer .IconButton1lZ {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.CarcodeWidgetResetContainer .IconButton__content3J- {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px 10px 11px !important;
}
.CarcodeWidgetResetContainer .IconButton__separatorN80 {
  border-width: 0 0 0 1px !important;
  margin: 8px 0 !important;
}
.CarcodeWidgetResetContainer .IconButton__textMf_ {
  padding: 0 0 0 8px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__content3J- {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__separatorN80 {
  border-width: 1px 0 0 !important;
  margin: 0 8px !important;
}
.CarcodeWidgetResetContainer .IconButton--column37r .IconButton__textMf_ {
  padding: 3px 0 0 !important;
}
.CarcodeWidgetResetContainer .HeaderX4y {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-basis: 60px !important;
  justify-content: space-between !important;
  height: 60px !important;
}
.CarcodeWidgetResetContainer .Header--collapsed3a8 {
  flex-basis: 40px !important;
  height: 40px !important;
}
.CarcodeWidgetResetContainer .HeaderX4y > * {
  flex: 0 0 auto !important;
}
.CarcodeWidgetResetContainer .HeaderX4y .js-carcode-end-chat-button-container {
  position: absolute !important;
  top: 17px !important;
  right: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-end-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer .HeaderX4y .js-carcode-back-chat-button-container {
  top: 17px !important;
  left: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-back-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-collapse-chat-button-container {
  position: absolute !important;
  top: 20px !important;
  right: 30px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-collapse-chat-button-container
  button {
  padding: 5px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-video-chat-button-container {
  position: absolute !important;
  top: 15px !important;
  right: 60px !important;
}
.CarcodeWidgetResetContainer
  .HeaderX4y
  .js-carcode-video-chat-button-container
  button {
  padding: 5px !important;
}
.SwipeIndicatoryLh i {
  transition: transform 0.1s linear !important;
}
.SwipeIndicatoryLh svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}
.SwipeIndicator--rotateI-N i {
  transition: none !important;
  animation: rotate3Io 1.1s infinite linear !important;
}
@keyframes rotate3Io {
  0% {
    transform: rotate(100deg);
  }
  to {
    transform: rotate(460deg);
  }
}
.Cardtnd p {
  line-height: 20px !important;
}
.CardDescription1IV p {
  line-height: 20px !important;
}
.CarcodeWidgetResetContainer .PiiForm2bL > :not(:last-child) {
  margin-bottom: 16px !important;
}
.TradeIn2HE > :not(:last-child) {
  margin-bottom: 8px !important;
}
.MessageText35b a {
  color: #f47821 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg {
  opacity: 0.95 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg:hover {
  opacity: 1 !important;
}
.CarcodeWidgetResetContainer .ImageAttachment__image1Dg:not(.is-loaded1Ia) {
  display: block !important;
  width: 185px !important;
}
.CarcodeWidgetResetContainer .FileAttachmentniz {
  text-align: center !important;
  font-size: 12px !important;
}
.CarcodeWidgetResetContainer .FileAttachment__contenteUo {
  text-decoration: none !important;
}
.CarcodeWidgetResetContainer .FileAttachment-titlesrv {
  overflow: hidden !important;
  width: 110px !important;
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer .FileAttachment-icon2zG svg {
  width: 36px !important;
  height: 36px !important;
}
.CarcodeWidgetResetContainer .FileAttachment-linkpri {
  width: 100% !important;
  text-decoration: none !important;
  font-size: 12px !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM {
  opacity: 0.95 !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM:hover {
  opacity: 1 !important;
}
.CarcodeWidgetContainer .VideoAttachment__video3BM:not(.is-loaded1dF) {
  display: block !important;
  width: 185px !important;
}
.CarcodeWidgetContainer .VideoAttachment-icon18l {
  fill: #fff !important;
}
.CarcodeWidgetContainer .VideoAttachment-icon18l svg {
  width: 36px !important;
  height: 36px !important;
}
.CarcodeWidgetResetContainer .Attachment--audioo6t,
.CarcodeWidgetResetContainer .Attachment--fileKKS {
  box-sizing: border-box !important;
  width: 130px !important;
  padding: 10px !important;
  max-width: 130px !important;
}
.CarcodeWidgetResetContainer .Attachment--image1Jx {
  width: auto !important;
}
.CarcodeWidgetResetContainer .FullScreenAttachment__save-text3P5 {
  display: none !important;
}
@media (min-width: 480px) {
  .CarcodeWidgetResetContainer .FullScreenAttachment__save-text3P5 {
    display: block !important;
    margin-left: 10px !important;
  }
}
.CarcodeWidgetContainer .MessageInfo2EJ > * {
  font-size: 9px !important;
  line-height: 13px !important;
}
.MessageActionsP4O > :not(:last-child) {
  border-style: solid !important;
  border-right-width: 1px !important;
}
.CarcodeWidgetResetContainer .Message1hI {
  min-width: 80% !important;
  max-width: 80% !important;
}
.CarcodeWidgetResetContainer .Message__message-info--hidden1FZ {
  display: none !important;
}
.CarcodeWidgetResetContainer .Message__attachments3K0,
.CarcodeWidgetResetContainer .Message__inventoriesiEn {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.CarcodeWidgetResetContainer .Message--inventory-cardsCTh {
  max-width: 100% !important;
  min-width: 100% !important;
}
.CarcodeWidgetResetContainer .Message--attachments1yI {
  min-width: 0 !important;
}
.CarcodeWidgetResetContainer .Message__bubbleDxX {
  border-radius: 12px !important;
}
.CarcodeWidgetResetContainer .Message__bubble--error37Z,
.CarcodeWidgetResetContainer .Message__bubble--greeting1Pa,
.CarcodeWidgetResetContainer .Message__bubble--pii-5r,
.CarcodeWidgetResetContainer .Message__bubble--reply3Y-,
.CarcodeWidgetResetContainer .Message__bubble--success3R6 {
  border-radius: 12px 12px 12px 0 !important;
}
.CarcodeWidgetResetContainer .Message__bubble--message3QP {
  border-radius: 12px 12px 0 12px !important;
}
.CarcodeWidgetResetContainer .Message__bubble--option3dq {
  margin: 2px 0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}
.CarcodeWidgetResetContainer .Message__bubbleDxX > :not(:last-child) {
  margin-bottom: 4px !important;
}
.CarcodeWidgetResetContainer .Message--errorVir,
.CarcodeWidgetResetContainer .Message--greeting2tv,
.CarcodeWidgetResetContainer .Message--pii1qs,
.CarcodeWidgetResetContainer .Message--replynCn,
.CarcodeWidgetResetContainer .Message--success32I {
  align-self: flex-start !important;
  text-align: left !important;
}
.CarcodeWidgetResetContainer .Message--option2lL {
  max-width: 90% !important;
  min-width: 0 !important;
  align-self: flex-end !important;
  text-align: center !important;
}
.CarcodeWidgetResetContainer .Message--pii1qs {
  max-width: 260px !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .Message--pii1qs {
    max-width: 220px !important;
  }
}
.CarcodeWidgetResetContainer .Message--messageEDW {
  align-self: flex-end !important;
  text-align: right !important;
}
.CarcodeWidgetResetContainer .Message__attachments3K0 {
  padding: 6px !important;
}
.CarcodeWidgetResetContainer
  .Message__attachments3K0
  .message-attachment:not(:last-child) {
  margin-bottom: 4px !important;
}
.CarcodeWidgetResetContainer .Message__text1cB {
  display: inline-block !important;
  position: relative !important;
}
.CarcodeWidgetResetContainer .pending {
  margin-top: 4px !important;
  opacity: 0.75 !important;
}
.TranscriptEmailNtH > :not(:last-child) {
  margin-bottom: 16px !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl {
  position: relative !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl,
.CarcodeWidgetResetContainer .LoadingIndicator2bl:after,
.CarcodeWidgetResetContainer .LoadingIndicator2bl:before {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  animation-name: animationLoadingIndicator2kI !important;
  animation-duration: 1.2s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  border-radius: 100% !important;
  background-color: #999 !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl:before {
  position: absolute !important;
  top: 0 !important;
  right: -18px !important;
  content: "" !important;
  animation-delay: 0.4s !important;
  background-color: #bbb !important;
}
.CarcodeWidgetResetContainer .LoadingIndicator2bl:after {
  position: absolute !important;
  top: 0 !important;
  left: -18px !important;
  content: "" !important;
  animation-delay: 0.8s !important;
  background-color: #ddd !important;
}
@keyframes animationLoadingIndicator2kI {
  0% {
    background-color: #999;
  }
  to {
    background-color: #ddd;
  }
}
.CarcodeWidgetResetContainer .MessagesContainer1oF {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 150px !important;
}
.CarcodeWidgetResetContainer .MessagesContainer--loading1B- {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy {
  border: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy[aria-selected="true"] {
  background: #fffcf7 !important;
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:first-child:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy:first-child[aria-selected="true"] {
  border-top: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBoxItem3Dy:last-child:hover,
.CarcodeWidgetResetContainer .ListBoxItem3Dy:last-child[aria-selected="true"] {
  border-bottom: 1px solid transparent !important;
}
.CarcodeWidgetResetContainer .ListBox3iq {
  max-height: 280px !important;
}
@media (max-height: 350px) {
  .CarcodeWidgetResetContainer .ListBox3iq {
    max-height: 34vh !important;
  }
}
@media (min-height: 351px) and (max-width: 480px) {
  .CarcodeWidgetResetContainer .ListBox3iq {
    max-height: calc(100vh - 247px) !important;
  }
}
.CarcodeWidgetResetContainer .ListBox3iq:empty:before {
  content: "No items found" !important;
  padding: 10px !important;
  display: block !important;
  text-align: center !important;
}
.CarcodeWidgetResetContainer .EmojisPopup2PV .js-carcode-list-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  max-width: 210px !important;
}
.CarcodeWidgetResetContainer .EmojisPopup2PV .js-carcode-list-box li {
  width: 42px !important;
  border-radius: 8px !important;
}
.CarcodeWidgetResetContainer .EmojisPopup2PV .js-carcode-list-box li:hover {
  border-color: transparent !important;
}
.CarcodeWidgetResetContainer .EmojisPopup__toggler3Ab {
  display: block !important;
  padding: 4px !important;
  margin-left: 4px !important;
  margin-right: -4px !important;
  width: 26px !important;
  height: 26px !important;
}
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab
  .carcode-dropdown-toggle--icon {
  display: none !important;
}
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab
  .carcode-dropdown-toggle--icon-active {
  display: none !important;
}
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab
  .carcode-dropdown-toggle--icon-active
  svg {
  border-radius: 50% !important;
  background-color: #ffc83d !important;
}
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab:focus
  .carcode-dropdown-toggle--icon,
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab:hover
  .carcode-dropdown-toggle--icon {
  display: none !important;
}
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab:focus
  .carcode-dropdown-toggle--icon-active,
.CarcodeWidgetResetContainer
  .EmojisPopup__toggler3Ab:hover
  .carcode-dropdown-toggle--icon-active {
  display: block !important;
}
.CarcodeWidgetResetContainer .AttachmentButton3ke {
  min-width: 17px !important;
  max-width: 20px !important;
  height: 20px !important;
  padding: 18px !important;
}
.CarcodeWidgetResetContainer .AttachmentButton--collapsed3If {
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}
.CarcodeWidgetResetContainer .AttachmentButton-button6RR svg {
  width: 17px !important;
  height: 20px !important;
}
.CarcodeWidgetResetContainer .AttachmentActions2JM {
  margin-left: 0 !important;
}
.CarcodeWidgetResetContainer .AttachmentActions--collapsed1aK {
  margin-left: 8px !important;
}
.CarcodeWidgetResetContainer .ImageAttachmentPreview3vh {
  background-color: #dae3e6 !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
  background-size: cover !important;
}
.CarcodeWidgetResetContainer .FileAttachmentPreviewg39 {
  overflow: hidden !important;
}
.CarcodeWidgetResetContainer .FileAttachmentPreview-icon3AT {
  fill: #555 !important;
}
.CarcodeWidgetResetContainer .FileAttachmentPreview-icon3AT svg {
  width: 30px !important;
  height: 30px !important;
}
.CarcodeWidgetResetContainer .VideoAttachmentPreview-icon246 {
  fill: rgba(0, 0, 0, 0.4) !important;
}
.CarcodeWidgetResetContainer .VideoAttachmentPreview-icon246 svg {
  width: 30px !important;
  height: 30px !important;
}
.CarcodeWidgetResetContainer .AttachmentPreview__remove28R {
  opacity: 0.8 !important;
}
.CarcodeWidgetResetContainer .AttachmentPreview__remove28R:active,
.CarcodeWidgetResetContainer .AttachmentPreview__remove28R:hover {
  opacity: 1 !important;
}
.CarcodeWidgetResetContainer .HorizontalScrollV0v {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}
.CarcodeWidgetResetContainer .HorizontalScroll--scrollable2-t {
  padding: 0 7px !important;
}
.CarcodeWidgetResetContainer
  .HorizontalScrollV0v
  .js-carcode-horizontal-scroll-content {
  scroll-behavior: smooth !important;
  overflow-x: scroll !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.CarcodeWidgetResetContainer
  .HorizontalScrollV0v
  .js-carcode-horizontal-scroll-content::-webkit-scrollbar {
  display: none !important;
}
.CarcodeWidgetResetContainer .HorizontalScroll-button3ur {
  padding: 6px !important;
  font-size: 0 !important;
}
.CarcodeWidgetResetContainer .HorizontalScroll-button--left2pI {
  transform: rotate(90deg) !important;
}
.CarcodeWidgetResetContainer .HorizontalScroll-button--rightoTv {
  transform: rotate(-90deg) !important;
}
.ChatMenuItem-button2DI:disabled {
  opacity: 0.5 !important;
}
.ChatMenuFull16q > :not(:last-child) {
  border-right-width: 1px !important;
  border-style: solid !important;
}
.CarcodeWidgetResetContainer .ChatMenu__collapsedURW,
.CarcodeWidgetResetContainer .ChatMenu__floatingByh,
.CarcodeWidgetResetContainer .ChatMenu__full1jY {
  transition: all 0.15s linear !important;
}
.CarcodeWidgetResetContainer .ChatMenu__full1jY {
  max-width: 100% !important;
  transform: translateX(0) !important;
}
.CarcodeWidgetResetContainer .ChatMenu__full--collapsed1xI {
  display: none !important;
  transform: translateX(1000px) !important;
}
.CarcodeWidgetResetContainer .ChatMenu__collapsedURW {
  transform: translateX(0) !important;
  margin: auto !important;
}
.CarcodeWidgetResetContainer .ChatMenu__collapsed--collapsed2ko {
  display: none !important;
  transform: translateX(1000px) !important;
}
.CarcodeWidgetResetContainer .ChatMenu__floatingByh {
  transform: translateX(0) !important;
  padding: 0 10px !important;
  margin-left: auto !important;
}
.CarcodeWidgetResetContainer .ChatMenu__floating--collapsed1xp {
  display: none !important;
  transform: translateX(1000px) !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__content3qh {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 40px !important;
  background: linear-gradient(180deg, #4568dc, #b06ab3) !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__content3qh img {
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__content-name1Vb {
  color: #fff !important;
  margin: 16px 0 8px !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__content-callingeTL {
  color: #fff !important;
  margin: 0 !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__callerq6N {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__actions2ON {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 24px 0 0 !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__actions2ON button {
  background: transparent !important;
  border-radius: 50% !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__actions2ON button i {
  font-size: 32px !important;
}
.CarcodeWidgetResetContainer
  .IncomingCallModal__actions2ON
  button:not(:last-child) {
  margin-right: 16px !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__license2ZH {
  position: absolute !important;
  bottom: 10px !important;
  font-size: 10px !important;
  color: #fff !important;
}
.CarcodeWidgetResetContainer .IncomingCallModal__license-link3PA,
.CarcodeWidgetResetContainer .IncomingCallModal__license-link3PA:visited {
  color: #fff !important;
  font-size: 10px !important;
}
.CarcodeWidgetResetContainer .ChatNotification--warning2f8,
.CarcodeWidgetResetContainer .ChatNotification--warning2f8 p {
  background-color: #fff3cd !important;
  color: #856404 !important;
}
.CarcodeWidgetResetContainer .ChatNotification--error20g,
.CarcodeWidgetResetContainer .ChatNotification--error20g p {
  background-color: #f8d7da !important;
  color: #f33 !important;
}
.CarcodeWidgetResetContainer .ChatNotification--infoXHk,
.CarcodeWidgetResetContainer .ChatNotification--infoXHk p {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
}
.CarcodeWidgetResetContainer .TabTitle2PI:nth-child(2n) {
  border-left-width: 1px !important;
  border-right-width: 1px !important;
}
.CarcodeWidgetResetContainer .TabTitle2PI:last-child {
  border-right-width: 1px !important;
}
.FilterInputButton-iconvDC svg {
  width: 21px !important;
  height: 21px !important;
  transform: scale(0.9) !important;
}
.SelectContainer3vS > h4 ~ div {
  margin-bottom: 10px !important;
}
.CarcodeWidgetResetContainer .RadioButton5SL {
  position: relative !important;
  padding-left: 25px !important;
  margin-right: 8px !important;
  height: 20px !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.CarcodeWidgetResetContainer .RadioButton-checkmark2xX {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border: 4px solid #fff !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
}
.CarcodeWidgetResetContainer .RadioButton-inputwzF {
  width: 0 !important;
}
.LeaseDeals--option__active-9l:nth-of-type(n) {
  background: #fffcf7 !important;
  border: 1px solid #0069bf !important;
  opacity: 1 !important;
}
.LeaseDeals--option__inactive2kX:nth-of-type(n) {
  background-color: #fff !important;
  border: 1px solid #e6e6e6 !important;
  opacity: 0.5 !important;
}
.LeaseDeals--option1KS:hover {
  border: 1px solid #0069bf !important;
}
.CarcodeWidgetResetContainer .InventorySearchHeaderContainer__tabs-header3IJ {
  display: block !important;
  height: 100% !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .InventorySearchHeaderContainer__tabs-header3IJ {
    display: none !important;
  }
}
.CarcodeWidgetResetContainer .InventorySearchHeaderContainer__common-header1yh {
  display: none !important;
  height: 100% !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer
    .InventorySearchHeaderContainer__common-header1yh {
    display: block !important;
  }
}
.SearchResultListp4s:empty {
  display: none !important;
}
.SearchResultListp4s li {
  margin-bottom: 8px !important;
}
.SearchFooterEnZ {
  min-height: 16px !important;
}
.SearchFooterEnZ:empty {
  min-height: 0 !important;
}
.CarcodeWidgetResetContainer .SearchContainer--empty3U9 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}
.CarcodeWidgetResetContainer.InventorySearchContainerYnU {
  position: relative !important;
  overflow: auto !important;
}
.CarcodeWidgetResetContainer.InventorySearchContainer--loading2Wr {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.SelectContainer1UE > h4 ~ div {
  margin-bottom: 10px !important;
}
.TradeInDetails__fields751 > :not(:last-child) {
  margin-bottom: 10px !important;
}
.CarcodeWidgetResetContainer .ConditionPrice1mn {
  color: #999 !important;
}
.CarcodeWidgetResetContainer .ConditionPrice__price29x {
  margin-bottom: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.CarcodeWidgetResetContainer .ConditionPrice__condition2Ww {
  font-size: 13px !important;
}
.CarcodeWidgetResetContainer .ConditionPrice--selected3n7 {
  color: #555 !important;
}
.CarcodeWidgetResetContainer
  .ConditionPrice--selected3n7
  .ConditionPrice__price29x {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.CarcodeWidgetResetContainer
  .ConditionPrice--selected3n7
  .ConditionPrice__condition2Ww {
  font-size: 15px !important;
  font-weight: 600 !important;
}
.Conditions__prices3Fm > :not(:last-child) {
  border-right: 1px solid #ccc !important;
}
.TradeInResult2bt {
  justify-content: space-between !important;
}
.TradeInResult--loading2gH {
  align-items: center !important;
  justify-content: center !important;
}
.TradeInResult__contentsXX > :not(:last-child) {
  margin-bottom: 15px !important;
}
.TradeInFormHeader39P sup {
  vertical-align: top !important;
}
.CarcodeWidgetResetContainer .ChatContainer334 {
  width: 100% !important;
  height: 100% !important;
}
.ClosedContainer--fixed11j {
  max-height: calc(100vh - 20px) !important;
}
@media (min-width: 480px) {
  .ClosedContainer--fixed11j {
    width: 320px !important;
    max-height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .ClosedContainer--fixed11j {
    max-height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .ClosedContainer--fixed11j {
    max-height: 620px !important;
  }
}
.FeedbackContainer--fixedwcJ {
  max-height: calc(100vh - 20px) !important;
}
@media (min-width: 480px) {
  .FeedbackContainer--fixedwcJ {
    width: 320px !important;
    max-height: 520px !important;
  }
}
@media (min-width: 1200px) {
  .FeedbackContainer--fixedwcJ {
    max-height: 550px !important;
  }
}
@media (min-width: 1800px) {
  .FeedbackContainer--fixedwcJ {
    max-height: 620px !important;
  }
}
@media (min-width: 480px) {
  .LeaseDealsForm253 {
    max-width: 280px !important;
  }
}
.FBCustomerChat2lT .fb_dialog {
  display: none !important;
}
.CarcodeWidgetResetContainer .CtaTextButton2da {
  overflow: hidden !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column18H {
  height: 100% !important;
  flex-direction: column !important;
  max-height: 0 !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column-separatorDFw {
  width: 100% !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column-button2OZ {
  padding: 10px 3px !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column-button2OZ p {
  font-size: inherit !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column-short-visibleBgy {
  max-height: 70px !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--column-wide-visible3j3 {
  max-height: none !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--rowHQk {
  width: 100% !important;
  flex-direction: row !important;
  max-width: 0 !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--row-separator24w {
  height: 100% !important;
  border-left-width: 1px !important;
  border-left-style: solid !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--row-buttonwqw {
  height: calc(100% - 3px) !important;
  padding: 10px !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--row-buttonwqw p {
  font-size: inherit !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--row-short-visible1JE {
  max-width: 70px !important;
}
.CarcodeWidgetResetContainer .CtaTextButton--row-wide-visible2UG {
  max-width: 150px !important;
}
.CarcodeWidgetResetContainer .ToolbarThirdPartyCta26V {
  flex-shrink: 0 !important;
}
.CarcodeWidgetResetContainer .ToolbarThirdPartyCta--rowOl9 {
  margin: -3px 0 !important;
}
.CarcodeWidgetResetContainer .ToolbarThirdPartyCta--columnsBF {
  margin: 0 !important;
}
.CarcodeWidgetResetContainer .LeaseDealsCta1OI {
  flex-shrink: 0 !important;
}
.CarcodeWidgetResetContainer .LeaseDealsCta--row2yx {
  margin: -3px 0 !important;
}
.CarcodeWidgetResetContainer .LeaseDealsCta--columnsVo {
  margin: 0 !important;
}
.CarcodeWidgetResetContainer .ToolbarInputItem1IN {
  display: flex !important;
}
.CarcodeWidgetResetContainer .ToolbarInputItem__input2WS {
  font-size: 1em !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer .ToolbarInputItem__input2WS {
    font-size: 1em !important;
  }
}
.CarcodeWidgetResetContainer .ContinueButton2WU {
  display: flex !important;
}
.CarcodeWidgetResetContainer
  .Toolbar--anchored-rightQuW
  .js-carcode-cta-text-button,
.CarcodeWidgetResetContainer
  .Toolbar--anchored-rightQuW
  > .js-carcode-icon-button {
  flex-direction: row-reverse !important;
}
.CarcodeWidgetResetContainer .Toolbar--hidden2XN > * {
  display: none !important;
}
.CarcodeWidgetResetContainer.WidgetToolbarContainer22M {
  font-size: 14px !important;
}
.CarcodeWidgetResetContainer.WidgetToolbarContainer22M
  .WidgetToolbarContainer__content2sd {
  min-height: 45px !important;
}
.CarcodeWidgetResetContainer.WidgetToolbarContainer22M
  .WidgetToolbarContainer__content2sd:empty {
  min-height: 0 !important;
}
.CarcodeWidgetResetContainer.WidgetToolbarContainer--overflow-hide2BP {
  overflow: hidden !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer.WidgetToolbarContainer22M {
    width: calc(100% - 90px) !important;
    font-size: medium !important;
  }
}
.WidgetSideToolbarpJN {
  padding: 1px !important;
}
.WidgetSideToolbar--side-rotatedhAV {
  transform-origin: 50% 0 !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton3hx {
  overflow: hidden !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--column19K {
  width: 100% !important;
  flex-direction: column !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--column-separator36S {
  width: 100% !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--column-button9th {
  width: 100% !important;
  padding: 10px 3px !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--row88d {
  height: 100% !important;
  max-height: 100% !important;
  flex-direction: row !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--row-separatorZYB {
  height: 100% !important;
  border-left-width: 1px !important;
  border-left-style: solid !important;
}
.CarcodeWidgetResetContainer .CtaLabelButton--row-button1f7 {
  height: calc(100% - 6px) !important;
  padding: 10px !important;
}
.WidgetLabelToolbar1mr {
  padding: 1px !important;
}
.WidgetLabelToolbar--side-rotated2Xm {
  transform-origin: 50% 0 !important;
}
.WidgetThirdPartyToolbar1m0 {
  padding: 1px !important;
}
.WidgetThirdPartyToolbar--side-rotated188 {
  transform-origin: 50% 0 !important;
}
.CarcodeWidgetResetContainer .CallOutFigure1OH,
.CarcodeWidgetResetContainer .CallOutFigure-image1BU {
  width: 40px !important;
  height: 40px !important;
}
.CarcodeWidgetResetContainer.CallOut__contentUH1,
.CarcodeWidgetResetContainer .CallOut__contentUH1 {
  position: relative !important;
}
.CarcodeWidgetResetContainer.EmbeddedSdkButtonContainertJl {
  font-size: 14px !important;
  display: inline-flex !important;
}
.CarcodeWidgetResetContainer.EmbeddedSdkButtonContainertJl
  .EmbeddedSdkButtonContainer__content328 {
  min-height: 45px !important;
}
.CarcodeWidgetResetContainer.EmbeddedSdkButtonContainertJl
  .EmbeddedSdkButtonContainer__content328:empty {
  min-height: 0 !important;
}
.CarcodeWidgetResetContainer.EmbeddedSdkButtonContainer--overflow-hide1xp {
  overflow: hidden !important;
}
@media (max-width: 480px) {
  .CarcodeWidgetResetContainer.EmbeddedSdkButtonContainertJl {
    width: calc(100% - 90px) !important;
    font-size: medium !important;
  }
}
.CarcodeWidgetResetContainer .carcode-arrow {
  position: relative !important;
}
.CarcodeWidgetResetContainer .carcode-arrow:before {
  content: " " !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border: 8px solid !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--side-right:before {
  right: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-color: inherit !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--side-left:before {
  left: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-color: inherit !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--bottom:before {
  border-color: inherit !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  bottom: -14px !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--bottom-left:before {
  left: 20% !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--bottom-left-corner:before {
  left: 0 !important;
  border-left-color: inherit !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: inherit !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--bottom-right:before {
  right: 20% !important;
}
.CarcodeWidgetResetContainer .carcode-arrow--bottom-center:before {
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.CarcodeWidgetContainer .error {
  border: 1px solid #f33 !important;
}
.CarcodeWidgetContainer .errorText {
  color: #f33 !important;
}
.CarcodeWidgetContainer .clickable {
  cursor: pointer !important;
}
.CarcodeWidgetContainer .clickable[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}
.CarcodeWidgetContainer .button:disabled {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}
.CarcodeWidgetContainer .text-ellipsis {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}
.CarcodeWidgetContainer .form-widget-label {
  position: absolute !important;
  top: 20px !important;
  left: 16px !important;
  transition: all 0.1s ease !important;
  font-size: 14px !important;
}
.form-widget-control:focus ~ .form-widget-label,
.form-widget-control:not(.empty) ~ .form-widget-label,
.form-widget-control[disabled] ~ .form-widget-label {
  top: 10px !important;
  font-size: 12px !important;
}
.CarcodeWidgetContainer.animated-all,
.CarcodeWidgetContainer .animated-all {
  transition: all 0.1s linear !important;
}
.CarcodeWidgetContainer .clearfix:after {
  content: "" !important;
  clear: both !important;
  display: table !important;
}
.CarcodeWidgetContainer.animated,
.CarcodeWidgetContainer .animated {
  animation-duration: 1s !important;
  animation-fill-mode: both !important;
  animation-timing-function: ease-in-out !important;
}
.CarcodeWidgetContainer.animated.fadeIn,
.CarcodeWidgetContainer .animated.fadeIn {
  animation-name: fadeIn3mF !important;
}
.CarcodeWidgetContainer.animated.fadeOut,
.CarcodeWidgetContainer .animated.fadeOut {
  animation-name: fadeOut2ni !important;
}
.CarcodeWidgetContainer.animated.fadeInRight,
.CarcodeWidgetContainer .animated.fadeInRight {
  animation-duration: 0.5s !important;
  animation-name: fadeInRight23J !important;
}
.CarcodeWidgetContainer.animated.fadeInLeft,
.CarcodeWidgetContainer .animated.fadeInLeft {
  animation-duration: 0.5s !important;
  animation-name: fadeInLeft3uf !important;
}
.CarcodeWidgetContainer.animated.slideInLeft,
.CarcodeWidgetContainer .animated.slideInLeft {
  animation-duration: 0.5s !important;
  animation-name: slideInLeft1FH !important;
}
.CarcodeWidgetContainer.animated.slideOutLeft,
.CarcodeWidgetContainer .animated.slideOutLeft {
  animation-duration: 0.5s !important;
  animation-name: slideOutLeft1Ra !important;
}
.CarcodeWidgetContainer.animated.slideIn,
.CarcodeWidgetContainer .animated.slideIn {
  animation-duration: 0.65s !important;
  animation-name: slideIn-iF !important;
}
.CarcodeWidgetContainer.animated.slideOut,
.CarcodeWidgetContainer .animated.slideOut {
  animation-duration: 0.65s !important;
  animation-name: slideOut13I !important;
}
.CarcodeWidgetContainer.animated.slideInRight,
.CarcodeWidgetContainer .animated.slideInRight {
  animation-duration: 0.5s !important;
  animation-name: slideInRight1c9 !important;
}
.CarcodeWidgetContainer.animated.slideOutRight,
.CarcodeWidgetContainer .animated.slideOutRight {
  animation-duration: 0.5s !important;
  animation-name: slideOutRight1Le !important;
}
.CarcodeWidgetContainer.animated.slideInModal,
.CarcodeWidgetContainer .animated.slideInModal {
  animation-duration: 0.35s !important;
  animation-name: slideInModal1ef !important;
}
.CarcodeWidgetContainer.animated.slideOutModal,
.CarcodeWidgetContainer .animated.slideOutModal {
  animation-duration: 0.35s !important;
  animation-name: slideOutModal2Kk !important;
}
@keyframes fadeIn3mF {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut2ni {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeInRight23J {
  0% {
    opacity: 0;
    transform: translate3d(120%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes fadeInLeft3uf {
  0% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes slideIn-iF {
  0% {
    transform: translateY(120%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideOut13I {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(120%);
  }
}
@keyframes slideInLeft1FH {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes slideOutLeft1Ra {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-120%, 0, 0);
  }
}
@keyframes slideInRight1c9 {
  0% {
    transform: translate3d(120%, 0, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes slideOutRight1Le {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(120%, 0, 0);
  }
}
@keyframes slideInModal1ef {
  0% {
    transform: translateY(-20%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideOutModal2Kk {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20%);
  }
}
.CarcodeWidgetResetContainer,
.CarcodeWidgetResetContainer :after,
.CarcodeWidgetResetContainer :before,
.CarcodeWidgetResetContainer :not(iframe) {
  position: static !important;
  visibility: visible !important;
  float: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  letter-spacing: normal !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: 0 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  line-height: normal !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  -webkit-tap-highlight-color: transparent !important;
}
.CarcodeWidgetResetContainer h1,
.CarcodeWidgetResetContainer h2,
.CarcodeWidgetResetContainer h3,
.CarcodeWidgetResetContainer h4,
.CarcodeWidgetResetContainer h5,
.CarcodeWidgetResetContainer h6 {
  text-transform: none !important;
}
.CarcodeWidgetResetContainer div,
.CarcodeWidgetResetContainer form,
.CarcodeWidgetResetContainer li,
.CarcodeWidgetResetContainer p,
.CarcodeWidgetResetContainer ul {
  display: block !important;
}
.CarcodeWidgetResetContainer li {
  list-style: none !important;
}
.CarcodeWidgetResetContainer input:not([type="checkbox"]),
.CarcodeWidgetResetContainer textarea {
  display: inline-block !important;
  box-shadow: none !important;
  outline: none !important;
}
.CarcodeWidgetResetContainer a,
.CarcodeWidgetResetContainer label,
.CarcodeWidgetResetContainer span {
  display: inline !important;
}
.CarcodeWidgetResetContainer input[type="checkbox"]:checked + span:before {
  display: none !important;
}
.CarcodeWidgetResetContainer button {
  text-align: center !important;
}
.CarcodeWidgetResetContainer input[type="number"] {
  -moz-appearance: textfield !important;
}
.CarcodeWidgetResetContainer input[type="number"]::-webkit-inner-spin-button,
.CarcodeWidgetResetContainer input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
</style>


  
  
</head>

<body >
  <div class="CarcodeWidgetContainer CarcodeWidgetGlobalMainContainer CarcodeWidgetResetContainer animated MainContainer9e5 MainContainer--fixed65s" style="padding: 10px 10px 0 10px !important;position: fixed !important; z-index: 2147483649 !important; top: auto !important; right: 0 !important; bottom: 10px !important; left: auto !important; transform: translate(0px, 0px) !important">
  <div class="animated" style="overflow: hidden !important; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3) !important; width: 100% !important; height: 100% !important; border-radius: 8px !important">
    <div id="CarcodeWidgetChatContainer08514e" class="ChatContainer334" style="position: relative !important; display: flex !important; align-items: stretch !important; flex-direction: column !important; overflow: hidden !important; background-color: #fff !important" data-test="carcode-chat-container">
      <div id="__carcode_widget-chatHeaderContainer08514e">
        <div class="HeaderX4y toolbar-hidden" style="padding: 13px 10px !important; position: relative !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px 0px !important; z-index: 1 !important; background-color: rgb(32, 68, 90) !important; transition: height 0.15s linear 0s !important; cursor: move !important;">
          <div class="animated" style="position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; padding-left: 15px !important; background-color: #20445A !important">
            <div style="border: 1px solid #fff !important; padding: 6px !important; border-radius: 50% !important">
              <div class="animated-all" style="width: 16px !important; height: 16px !important">
                <svg style="display: block !important; width: 16px !important; height: 16px !important" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                  <path fill="#fff" d="M29 18c2.281 0 1 6-1 6 1 0 0 5-2 5 0 2-2 3-4 3-8.448 0-5.477-2.114-14-3v-16c7.529-2.258 15-7.92 15-13 1.656 0 6 2 0 12 0 0 5 0 6 0 3 0 2 6 0 6zM6 13v16h2v1h-4c-1.1 0-2-1.35-2-3v-12c0-1.65 0.9-3 2-3h4v1h-2z"></path>
                </svg>
              </div>
            </div>
            <div style="overflow: hidden !important; flex: 1 1 100% !important; min-width: 140px !important; margin: 0 60px 0 10px !important">
              <h4 style="color: #fff !important; font-size: 16px !important; font-weight: 600 !important; line-height: 17px !important"> Chat with </h4>
              <p class="text-ellipsis" style="color: #999 !important; font-size: 12px !important; font-weight: normal !important; line-height: 16px !important"> Spartan Honda </p>
            </div>
          </div>
          <div class="animated" style="position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; padding-left: 15px !important; background-color: #20445A !important">
            <div style="border: 1px solid #fff !important; padding: 6px !important; border-radius: 50% !important">
              <div class="animated-all" style="width: 16px !important; height: 16px !important">
                <svg style="display: block !important; width: 16px !important; height: 16px !important" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                  <path fill="#fff" d="M29 18c2.281 0 1 6-1 6 1 0 0 5-2 5 0 2-2 3-4 3-8.448 0-5.477-2.114-14-3v-16c7.529-2.258 15-7.92 15-13 1.656 0 6 2 0 12 0 0 5 0 6 0 3 0 2 6 0 6zM6 13v16h2v1h-4c-1.1 0-2-1.35-2-3v-12c0-1.65 0.9-3 2-3h4v1h-2z"></path>
                </svg>
              </div>
            </.........完整代码请登录后点击上方下载按钮下载查看