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

代码语言:html

所属分类:响应式

代码描述:div+css实现响应式自适应右下角聊天窗口效果代码

代码标签: 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 !importan.........完整代码请登录后点击上方下载按钮下载查看

网友评论0