.widget-mobile{
  padding: 0; 
  z-index: 2147482999!important; 
  position: fixed!important; 
  bottom: 6px; 
  right: 6px; 
  height: 100px !important; 
  width: 264px; 
  overflow: hidden !important;
  margin: 0;
  opacity: 0;
}

.widget-desktop{
  margin: 0;
  padding: 0;  
  z-index: 2147482999!important; 
  position: fixed!important; 
  bottom: 12px;
  right: 12px; 
  height: 100px !important; 
  width: 264px; 
  overflow: hidden!important;
  opacity: 1;
}

.widget-mobile.close-initial,
.widget-desktop.close-initial{
  width: 90px;
}

.widget-desktop.ready, .widget-mobile.ready{
  opacity: 1;
}

.widget-mobile-open{
  width:100% !important;
  height: 100% !important;
  bottom: 0px !important; 
  right: 0px !important; 
}

.widget-desktop-open, .widget-desktop-open.large{
  height: 540px !important;
  width: 400px !important;
  bottom: 20px;  
}

.widget-desktop-open.small{
  height: 250px !important;
  width: 350px !important;
  bottom: 20px;  
}

.widget-desktop-open.medium{
  height: 330px !important;
  width: 360px !important;
  bottom: 20px;  
}

.widget-desktop.left{
  right: auto !important;
  left: 12px !important; 
}

.widget-desktop.right{
  right: 12px !important;
  left: auto !important; 
}

.widget-mobile.left{
  right: auto !important;
  left: 6px !important; 
}

.widget-mobile.right{
  right: 6px !important;
  left: auto !important; 
}


.widget-mobile-open.left, .widget-mobile-open.right{
  left: auto !important; 
  right: auto !important;
}



.mobile{
  display: none;
}

@media only screen and (max-width: 768px) {
    /* .desktop{display: none;} */
    .mobile{display: block !important}

  .widget-desktop.right {
    right: 0 !important;
    left: auto !important;
  }

  .widget-desktop-open, .widget-desktop-open.large, .widget-desktop-open.medium, .widget-desktop-open.small {
    height: 100% !important;
    width: 100vw !important;
    bottom: 0px;
    left: 0;
    right: 0;
  }

  .widget-desktop.left {
    right: auto !important;
    left: 0px !important;
  }
}