#_ChatButton {
z-index: 100;
visibility: hidden;
opacity: 0;
bottom: 55px;
transition: .6s opacity ease;
}
._ChatWindowContent_CHIP_SPAN {
font-size: 13px !important;
}

#_ChatButton.-is-visible {
visibility: visible;
opacity: 1;
transition: .6s opacity ease;
}
#_ChatButton .MuiFab-primary{
background: #000;
color: #fff;
position: relative;
width: 215px;
height: 45px;
right: 0px;
border-radius: 30px;
}
#_ChatButton .MuiFab-primary::after{
content: "チャットを開始する";
width: calc(100% - 65px);
height: 20px;
padding: 0 10px 0 50px;
position: absolute;
top: 50%;
left: 0;
font-size: 15px;
text-align: left;
line-height: 1.2;
transform: translateY(-50%);
}
#_ChatButton .MuiFab-primary .MuiFab-label{
width: 30px;
height: 30px;
display: block;
position: absolute;
left: 0px;
}
#_ChatButton .MuiFab-primary .MuiFab-label svg{
visibility: hidden;
}
#_ChatButton .MuiFab-primary .MuiFab-label::after{
left:18px;
top: 3px;
content: "";
position: absolute;
width: 22px;
height: 24px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzguNjUgMzcxIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTg5LjMyLDBDODQuNzYsMCwwLDY3LjY0LDAsMTUxLjA4LDAsMTk2LjkyLDI1LjYyLDIzOCw2NiwyNjUuNjdMMzQuNDIsMzcxLDEyMywyOTIuNTlhMjMxLjkzLDIzMS45MywwLDAsMCw2Ni4zNiw5LjU2YzEwNC41NywwLDE4OS4zMy02Ny42MywxODkuMzMtMTUxLjA3UzI5My44OSwwLDE4OS4zMiwwWiIvPjwvZz48L2c+PC9zdmc+) no-repeat center center;
background-size: contain;
}
#_ChatWindowUserInput {
background: #f6f6f6;
border-radius: 5px;
padding: 5px 7.5px;
font-size: 14px;
}
.MuiPaper-root.MuiAppBar-root.MuiAppBar-positionStatic.MuiAppBar-colorTransparent.MuiPaper-elevation4{
position: relative;
}
.MuiPaper-root.MuiAppBar-root.MuiAppBar-positionStatic.MuiAppBar-colorTransparent.MuiPaper-elevation4:after{
content: "Vivienne Westwood";
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 0 5px;
color: #000;
font-size: 24px;
text-align: center;
width: calc(100% - 98px);
font-family: "Times New Roman", Times, serif;
}
#_ChatWindow{
border-radius: 0px;
}
#_ChatHeader{
background: #8e8e8e;
}
#_ChatHeader .MuiAvatar-root.MuiAvatar-circle.MuiAvatar-colorDefault{
display: none;
}
#_ChatHeaderIcon {
display: none;
}
._ChatWindowContent_BOT_CONTENT .MuiAvatar-colorDefault{
background: #c5c5c5;
}
svg.MuiSvgIcon-root{
fill: #000;
}
#_ChatContent{
background: #fff;
padding-bottom: 0.5em;
}
#_ChatContent > div{
padding: 0.5rem;
margin: 0.5rem;
}
#_ChatContent > div:not(._ChatWindowContent_BOT_CONTENT){
padding: 0 0.5rem;
margin: 0 0.5rem 0.5rem 0.5rem;
}
._WhatYa_Message_Latest._ChatWindowContent_BOT_CONTENT{
background: #fff;
}
._ChatWindowContent_BOT_CONTENT{
background: #fff;
}
#_ChatContent ._ChatWindowContent_BOT_CONTENT{
background: #fff;
}
._ChatWindowContent_BOT_TEXT{
background: #e6e6e6;
padding: 10px 12.5px;
border-radius: 5px;
margin-left: .5em !important;
}
#_ChatContent .MuiList-root.MuiList-padding{
background:#fff;
color:#000;
margin: .5rem 1rem 1rem calc(1rem + 35px);
padding: 0;
}
#_ChatContent .MuiList-root.MuiList-padding .MuiListItemText-root{
margin-top:0px;
margin-bottom:0px;
}
.MuiListItem-button.MuiListItem-gutters{
background: #e6e6e6;
border-bottom: none;
margin-bottom:5px;
border-radius:5px;
}
.MuiButtonBase-root.MuiChip-root.MuiChip-outlined.MuiChip-clickable {
background: #e6e6e6;
border-radius: 12px;
margin-top: 0;
padding: 3px 6.5px;
border: none;
font-weight: normal;
text-decoration: none;
word-break: break-all;
}
.MuiTypography-root.MuiTypography-subtitle1{
display: none;
}
#_ChatHeader .MuiIconButton-root:nth-of-type(2){
position: absolute;
z-index: 3;
right: 0;
}
#_ChatHeader .MuiIconButton-root:nth-of-type(2) svg{
fill: #000;
}
#_ChatWindowUserInputRoot .MuiButtonBase-root.MuiIconButton-root{
padding: 6px 12px;
}
.MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-fullWidth.MuiInput-fullWidth{
margin-right: 0px;
background: none;
border-radius:5px;
margin-bottom:0;
padding: 3px 10px;
background: #f6f6f6;
}
.MuiInput-underline:after,
.MuiInput-underline:before{
display:none;
}
._ChatWindowContent_CS_CONTENT ._ChatWindowContent_CS_TEXT {
background:#e6e6e6;
color: #000;
}
._ChatWindowContent_CS_CONTENT ._ChatWindowContent_CS_TEXT+div {
border-left: 0.5rem solid #e6e6e6;
}
.MuiAvatar-root {
display: none;
}
.MuiAvatar-colorDefault{
background: #f6f6f6;
}
.MuiListItem-divider {
border-bottom: 1px solid #000;
}
.MuiAvatar-root.MuiAvatar-circle._ChatWindowContent_BOT_AVATAR.MuiAvatar-colorDefault::after{
content: "";
display: block;
width: 22px;
height: 22px;
background: url("https://www.viviennewestwood-tokyo.com/images/logo-slim.png") no-repeat center center;
background-size: contain;
}
.MuiAvatar-root.MuiAvatar-circle._ChatWindowContent_BOT_AVATAR.MuiAvatar-colorDefault svg{
display: none;
}
#_ChatMenuRoot{
background: #fff;
color: #666;
}
#_ChatMenuItemsRoot ._ChatMenuItem{
color: #000;
background: #e6e6e6;
margin: 1rem .5rem;
width: calc(100% - 1rem);
}
.MuiPaper-root.jss10.MuiPaper-elevation6.MuiPaper-rounded {
background-color: #000;
color: #fff;
}
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall svg{
fill: #fff;
}
#_ChatWindowUserInputRoot{
padding-right: 0px;
padding-top: .5em;
padding-bottom: .5em;
font-size: 14px;
border-top: 1px solid #000;
}
@media (max-width: 959px){
#_ChatButton {
z-index: 100;
visibility: hidden;
opacity: 0;
bottom: 50px;
transition: .6s opacity ease;
}
.MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-fullWidth.MuiInput-fullWidth{
padding: 3px 0;
}
#_ChatWindowUserInput {
padding: 5px 0px;
font-size: 16px;
transform: scale(0.9);
}
}