body{
  --overlay-bg: rgba(22,22,26,0.6);
  --shadow-0: none;
  --border-radius-extra-small: 3px;
  --border-radius-small: 3px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --border-radius-circle: 50%;
  
    --color-white: rgba(var(--white),1);
  --color-black: rgba(var(--black),1);
  --color-primary: rgba(var(--pink-5),1);
  --color-primary-hover: rgba(var(--pink-6),1);
  --color-primary-active: rgba(var(--pink-7),1);
  --color-primary-disabled: rgba(var(--pink-2),1);
  --color-primary-light-default: rgba(var(--pink-0),1);
  --color-primary-light-hover: rgba(var(--pink-1),1);
  --color-primary-light-active: rgba(var(--pink-2),1);
  --color-secondary: rgba(var(--blue-5),1);
  --color-secondary-hover: rgba(var(--blue-6),1);
  --color-secondary-active: rgba(var(--blue-7),1);
  --color-secondary-disabled: rgba(var(--blue-2),1);
  --color-secondary-light-default: rgba(var(--blue-0),1);
  --color-secondary-light-hover: rgba(var(--blue-1),1);
  --color-secondary-light-active: rgba(var(--blue-2),1);
  --color-tertiary: rgba(var(--grey-5),1);
  --color-tertiary-hover: rgba(var(--grey-6),1);
  --color-tertiary-active: rgba(var(--grey-7),1);
  --color-tertiary-light-default: rgba(var(--grey-0),1);
  --color-tertiary-light-hover: rgba(var(--grey-1),1);
  --color-tertiary-light-active: rgba(var(--grey-2),1);
  --color-default: rgba(var(--grey-0),1);
  --color-default-hover: rgba(var(--grey-1),1);
  --color-default-active: rgba(var(--grey-2),1);
  --color-success: rgba(var(--green-5),1);
  --color-success-hover: rgba(var(--green-6),1);
  --color-success-active: rgba(var(--green-7),1);
  --color-success-disabled: rgba(var(--green-2),1);
  --color-success-light-default: rgba(var(--green-0),1);
  --color-success-light-hover: rgba(var(--green-1),1);
  --color-success-light-active: rgba(var(--green-2),1);
  --color-danger: rgba(var(--pink-5),1);
  --color-danger-hover: rgba(var(--pink-6),1);
  --color-danger-active: rgba(var(--pink-7),1);
  --color-danger-light-default: rgba(var(--pink-0),1);
  --color-danger-light-hover: rgba(var(--pink-1),1);
  --color-danger-light-active: rgba(var(--pink-2),1);
  --color-warning: rgba(var(--orange-5),1);
  --color-warning-hover: rgba(var(--orange-6),1);
  --color-warning-active: rgba(var(--orange-7),1);
  --color-warning-light-default: rgba(var(--orange-0),1);
  --color-warning-light-hover: rgba(var(--orange-1),1);
  --color-warning-light-active: rgba(var(--orange-2),1);
  --color-focus-border: rgba(var(--blue-5),1);
  --color-disabled-text: rgba(var(--grey-9),0.35);
  --color-disabled-border: rgba(var(--grey-1),1);
  --color-disabled-bg: rgba(var(--grey-1),1);
  --color-disabled-fill: rgba(var(--grey-8),0.04);
  --color-link: rgba(var(--pink-5),1);
  --color-link-hover: rgba(var(--pink-6),1);
  --color-link-active: rgba(var(--pink-7),1);
  --color-link-visited: rgba(var(--pink-5),1);
  --color-shadow: rgba(0,0,0,0.04);
  --color-nav-bg: rgba(var(--white),1);
  --color-fill-0: rgba(var(--grey-8),0.05);
  --color-fill-1: rgba(var(--grey-8),0.09);
  --color-fill-2: rgba(var(--grey-8),0.13);
  --color-border: rgba(var(--grey-9),0.08);
  --color-bg-0: var(--color-white);
  --color-bg-1: var(--color-white);
  --color-bg-2: var(--color-white);
  --color-bg-3: var(--color-white);
  --color-bg-4: var(--color-white);
  --color-text-0: rgba(var(--grey-9),1);
  --color-text-1: rgba(var(--grey-9),0.8);
  --color-text-2: rgba(var(--grey-9),0.6);
  --color-text-3: rgba(var(--grey-9),0.35);
  --shadow-elevated: 0px 0px 1px rgba(0,0,0,0.1),0px 4px 14px rgba(0,0,0,0.1);
  --shadow-1: 0px 0px 1px rgba(0,0,0,0.3),0px 4px 14px rgba(0,0,0,0.1);
  --color-border-1: hsla(0,0%,39.2%,0.2);
  --color-info: rgba(var(--blue-5),1);
  --color-info-hover: rgba(var(--blue-6),1);
  --color-info-active: rgba(var(--blue-7),1);
  --color-info-disabled: rgba(var(--blue-2),1);
  --color-info-light-default: rgba(var(--blue-0),1);
  --color-info-light-hover: rgba(var(--blue-1),1);
  --color-info-light-active: rgba(var(--blue-2),1);
}
.uchat-iframe-contrainer{
  position: fixed;
  right: 70px;
  bottom: 0px;
  width: 450px;
  height: 520px;
  border-style: none;
  background: transparent; 
  border-radius: 6px;
  box-shadow: 0px 0px 10px #d4d2d2;
  -webkit-box-shadow: #d4d2d2 0px 0px 10px;
  -moz-box-shadow: #d4d2d2 0px 0px 10px;
  -webkit-box-shadow: var(--shadow-elevated);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--border-radius-medium);
  z-index: 99999999 ;
  overflow: hidden;
  display:none;
}
.uchat-iframe-contrainer iframe{width: 100%; height: 100%;border: none;}
.uchat-show{ display:block;}

@media screen and (max-width:768px) {
  .uchat-iframe-contrainer{
    width: 100vw;
    height: 90vh;
    right: 0;
  }
}