@font-face {
font-family: titillium;
font-style: normal;
font-weight: normal;
src: url(//v13-apps.bbcommunication.de/bbcommunication.de/contact_widget/web/fonts/titilliumweb-regular.ttf) format("truetype");
}
@font-face {
font-family: titillium;
font-style: normal;
font-weight: bold;
src: url(//v13-apps.bbcommunication.de/bbcommunication.de/contact_widget/web/fonts/titilliumweb-bold.ttf) format("truetype");
}
.innovaphone-widget-sidebar-container {
--primary-color: #006069;
--primary-contrast: white;
--secondary-color: #ffffff;
--secondary-contrast: black;
--claim-background: #EBEBEB;
--available-green: rgb(186, 219, 140);
--unavailable-red: rgb(255, 145, 143);
--text-normal: 16px;
--text-large: 18px;
--text-small: 14px;
--avatar-size: 70px;
--sidebar-width: 70px;
--sidebar-height: 70px;
--horizontal-sidebar-width: 310px;
--vertical-sidebar-height: 300px;
--drop-shadow: 0 0 5px #0006;
--transition: 200ms;
--red: #EA3F50;
--red: #DB1A2E;
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: var(--z-index);
transition: var(--transition);
font-family: var(--font-family);
font-size: var(--text-normal);
color: var(--secondary-contrast);
fill: var(--secondary-contrast);
}
.innovaphone-widget-sidebar-container.connected {
display: flex;
align-items: center;
justify-content: flex-end;
}
.innovaphone-widget-sidebar-container.shaded {
background-color: #6666;
}
.innovaphone-widget-sidebar-container.clickable {
pointer-events: all;
}
.innovaphone-widget-sidebar-container .hidden {
display: none !important;
}
.innovaphone-widget-sidebar-container button {
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--text-small);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-sidebar-container input {
font-family: inherit;
font-size: var(--text-normal);
}
.innovaphone-widget-sidebar-container a {
color: var(--primary-color);
}
.innovaphone-widget-sidebar-avatar {
width: var(--avatar-size);
height: var(--avatar-size);
pointer-events: all;
cursor: pointer;
}
.innovaphone-widget-sidebar-avatar img {
width: 100%;
height: 100%;
background-color: var(--primary-color);
pointer-events: none;
}
.innovaphone-widget-sidebar-avatar svg {
position: absolute;
left: -7.5%;
bottom: -7.5%;
width: 100%;
height: 100%;
pointer-events: none;
fill: var(--unavailable-red);
}
.innovaphone-widget-sidebar-avatar svg > path:nth-child(1) {
filter: brightness(80%);
}
.innovaphone-widget-sidebar-avatar svg[available=true] {
fill: var(--available-green);
}
.innovaphone-widget-sidebar-avatar .badge {
position: absolute;
top: -8px;
right: -6px;
width: 16px;
height: 16px;
background-color: var(--red);
border-radius: 50%;
box-shadow: var(--drop-shadow);
transition: 100ms;
opacity: 0;
} .innovaphone-widget-sidebar-horizontal {
position: relative;
align-self: flex-end;
width: 0;
height: var(--sidebar-height);
min-height: var(--avatar-size);
margin: var(--margin);
opacity: 0;
font-size: var(--text-small);
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
transition: var(--transition);
pointer-events: all; display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.innovaphone-widget-sidebar-horizontal.visible {
opacity: 1;
}
.innovaphone-widget-sidebar-horizontal .innovaphone-widget-sidebar-avatar {
position: absolute;
bottom: 0;
right: 100%;
}
.innovaphone-widget-sidebar-horizontal div.textBubble {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
transition: opacity 1s;
padding: 3px 7px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
font-size: var(--text-normal);
box-shadow: var(--drop-shadow);
background-color: var(--primary-color);
color: var(--primary-contrast);
}
.innovaphone-widget-sidebar-horizontal div.textBubble.invisible {
opacity: 0;
pointer-events: none;
}
.innovaphone-widget-sidebar-horizontal div.textBubble.top {
top: 0;
transform: none;
}
.innovaphone-widget-sidebar-horizontal .claimBubble {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
transition: var(--transition);
height: 35px;
margin-right: 10px;
box-sizing: border-box;
overflow: hidden;
font-size: var(--text-small);
background-color: var(--claim-background);
color: black;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--drop-shadow);
}
.innovaphone-widget-sidebar-horizontal .claimBubble > a {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: nowrap;
column-gap: 5px;
color: black;
}
.innovaphone-widget-sidebar-horizontal .claimBubble > a:nth-child(1) {
color: #826BAB;
}
.innovaphone-widget-sidebar-horizontal .claimBubble > a > img {
flex: 0 0 auto;
width: 25px;
height: 25px;
background-color: transparent;
}
.innovaphone-widget-sidebar-horizontal .claimBubble.bottom {
top: unset;
bottom: -5.5px;
bottom: 0;
transform: none;
}
.innovaphone-widget-sidebar-horizontal .claimBubble.invisible {
display: none;
}
.innovaphone-widget-sidebar-horizontal .innovaphone-widget-sidebar-info-container {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.innovaphone-widget-sidebar-horizontal .innovaphone-widget-sidebar-info {
flex: 0 0 auto;
width: 100%;
height: auto;
padding: 15px;
overflow: hidden;
box-sizing: border-box;
transition: var(--transition);
transition-delay: calc(var(--transition) / 4);
opacity: 0; display: flex;
flex-direction: column;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line {
flex: 0 0 auto;
width: 100%;
display: flex;
align-items: center;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-phonenumber:hover {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-phonenumber::before {
content: "Tel. ";
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-faxnumber::before {
content: "Fax. ";
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-name,
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-company {
font-weight: bold;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-separator {
flex-shrink: 0;
transform: translateY(-1px);
margin: 0 5px;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-separator:empty {
margin: 0;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-department {
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-presence {
width: 12px;
height: 12px;
background-color: var(--unavailable-red);
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-presence[available=true] {
background-color: var(--available-green);
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-presence-text {
margin-left: 5px;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-email-address {
overflow: hidden;
text-overflow: ellipsis;
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
}
.innovaphone-widget-sidebar-info > .innovaphone-widget-sidebar-info-line .innovaphone-widget-sidebar-info-label {
margin-right: 5px;
}
.innovaphone-widget-sidebar-horizontal div.buttons {
flex: 0 0 auto;
width: 100%;
height: var(--avatar-size);
padding: 0 15px;
gap: 12px;
opacity: 0;
pointer-events: none;
box-sizing: border-box;
transition: var(--transition); display: flex;
align-items: center;
justify-content: space-evenly;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button {
position: relative;
width: 55px;
height: 45px;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button > svg {
height: 18px;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='call'] > svg {
height: 24px;
transform: rotate(-35deg);
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='chat'] > svg {
transform: translateY(1px);
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='email'] > svg {
height: 15px;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='link'] > svg {
height: 20px;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='expand'] > svg {
height: 14px;
transition: var(--transition);
transform-origin: 50% 60%;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[disabled] {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
cursor: unset;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button[name='expand'] {
width: 35px;
padding: 0;
margin: 0 -5px;
background-color: transparent;
color: var(--primary-color);
fill: var(--primary-color);
}
.innovaphone-widget-sidebar-horizontal div.buttons > button > .btnToolTip {
position: absolute;
top: 10px;
width: 150px;
min-height: 100%;
padding: 5px 10px;
box-sizing: border-box;
transform: translateY(-150%);
pointer-events: none;
border-radius: 5px;
box-shadow: 0 0 10px #6666;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-color);
color: var(--primary-color);
font-size: var(--text-large);
opacity: 0;
}
.innovaphone-widget-sidebar-horizontal div.buttons > button:hover > .btnToolTip {
top: 0;
opacity: 1;
}
.innovaphone-widget-sidebar-horizontal.open {
width: var(--horizontal-sidebar-width);
}
.innovaphone-widget-sidebar-horizontal.open div.textBubble {
display: none;
}
.innovaphone-widget-sidebar-horizontal.open div.avatar {
cursor: default;
}
.innovaphone-widget-sidebar-horizontal.open div.buttons {
opacity: 1;
pointer-events: all;
}
.innovaphone-widget-sidebar-horizontal.expanded .innovaphone-widget-sidebar-info {
opacity: 1;
}
.innovaphone-widget-sidebar-horizontal.expanded div.buttons > button[name='expand'] > svg {
transform: rotate(180deg);
}
.innovaphone-widget-shader {
--primary-color: #006069;
--primary-contrast: white;
--secondary-color: #ffffff;
--secondary-contrast: black;
--claim-background: #EBEBEB;
--text-normal: 16px;
--text-large: 18px;
--text-small: 14px;
--drop-shadow: 0 0 5px #0006;
--transition: 200ms;
--red: #EA3F50;
--red: #DB1A2E;
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: var(--z-index);
transition: var(--transition);
font-family: var(--font-family);
font-size: var(--text-normal);
color: var(--secondary-contrast);
fill: var(--secondary-contrast);
}
.innovaphone-widget-shader > * {
pointer-events: all;
}
.innovaphone-widget-shader.shaded {
background-color: #6666;
}
.innovaphone-widget-shader button {
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--text-small);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-shader .hidden {
display: none !important;
}
.innovaphone-widget-cardset {
--primary-color: #006069;
--primary-contrast: white;
--secondary-color: #ffffff;
--secondary-contrast: black;
--claim-background: #EBEBEB;
--available-green: rgb(186, 219, 140);
--unavailable-red: rgb(255, 145, 143);
--text-normal: 16px;
--text-large: 18px;
--text-small: 14px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
font-family: var(--font-family);
font-size: var(--text-normal);
color: var(--secondary-contrast);
fill: var(--secondary-contrast);
gap: 40px;
}
.innovaphone-widget-cardset .hidden {
display: none !important;
}
.innovaphone-widget-card,
.innovaphone-widget-spacer {
flex: 1 1 40%;
min-width: 380px;
max-width: 390px;
order: 999999;
}
.innovaphone-widget-card {
--card-border-radius: 5px;
margin-top: 60px;
min-height: 100px;
border-radius: var(--card-border-radius);
box-shadow: 0 0 10px #6666;
background-color: var(--secondary-color);
color: var(--secondary-contrast);
fill: var(--secondary-contrast);
display: flex;
flex-direction: column;
position: relative;
transition: var(--transition);
}
.innovaphone-widget-card button {
border: none;
cursor: pointer;
font-family: inherit;
font-size: var(--text-small);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-card input {
font-family: inherit;
font-size: var(--text-normal);
}
.innovaphone-widget-card a {
color: var(--primary-color);
}
.innovaphone-widget-card div[name=displayname] {
font-weight: bold;
}
.innovaphone-widget-card div[name=separator] {
flex-shrink: 0;
transform: translateY(-2px);
margin: 0 5px;
}
.innovaphone-widget-card div[name=separator]:empty {
margin: 0;
}
.innovaphone-widget-card-avatar {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
background-color: inherit;
box-shadow: inherit;
display: flex;
}
.innovaphone-widget-card-avatar > img {
flex: 0 0 auto;
max-width: 80px;
max-height: 80px;
visibility: hidden;
border-radius: inherit;
pointer-events: none;
}
.innovaphone-widget-card-avatar > img[src] {
object-fit: contain;
visibility: visible;
width: 100%;
height: 100%;
background-color: var(--primary-color);
}
.innovaphone-widget-card-avatar > img:not([src]) {
width: 80px;
height: 80px;
}
.innovaphone-widget-card-avatar > svg {
position: absolute;
left: -7.5%;
bottom: -7.5%;
width: 80px;
height: 80px;
fill: var(--unavailable-red);
border-radius: inherit;
pointer-events: none;
}
.innovaphone-widget-card-avatar > svg > path:first-child {
filter: brightness(0.8);
}
.innovaphone-widget-card-avatar[available='true'] > svg {
fill: var(--available-green);
}
.innovaphone-widget-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
position: relative;
}
.innovaphone-widget-card-row {
display: flex;
align-items: center;
justify-content: center;
margin: 5px 20px 0 20px;
}
.innovaphone-widget-card-row:nth-child(1) { margin-top: 50px;
}
.innovaphone-widget-card-row:nth-child(2) { }
.innovaphone-widget-card-row:nth-child(2) > div[name=presenceLamp] {
width: 12px;
height: 12px;
margin-right: 5px;
background-color: var(--unavailable-red);
}
.innovaphone-widget-card-row:nth-child(2) > div[available=true] {
background-color: var(--available-green);
}
.innovaphone-widget-card-row:nth-child(3) { margin-top: 10px;
margin-bottom: 10px;
}
.innovaphone-widget-card-row:nth-child(3) > button {
flex: 0 0 auto;
width: 70px;
height: 36px;
margin: 10px;
position: relative;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
}
.innovaphone-widget-card-row:nth-child(3) > button > svg {
height: 17px;
}
.innovaphone-widget-card-row:nth-child(3) > button[name='call'] > svg {
height: 24px;
transform: rotate(-35deg);
}
.innovaphone-widget-card-row:nth-child(3) > button[name='chat'] > svg {
transform: translateY(1px);
}
.innovaphone-widget-card-row:nth-child(3) > button[name='email'] > svg {
height: 15px;
}
.innovaphone-widget-card-row:nth-child(3) > button[name='link'] > svg {
height: 20px;
}
.innovaphone-widget-card-row:nth-child(3) > button[name='expand'] > svg {
height: 14px;
transition: var(--transition);
}
.innovaphone-widget-card-row:nth-child(3) > button[disabled] {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
cursor: unset;
}
.innovaphone-widget-card-row:nth-child(3) > button > .btnToolTip {
position: absolute;
top: 10px;
width: 200%;
min-height: 100%;
padding: 5px 10px;
box-sizing: border-box;
transform: translateY(-120%);
pointer-events: none;
border-radius: 5px;
box-shadow: 0 0 10px #6666;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-color);
color: var(--primary-color);
font-size: var(--text-large);
opacity: 0;
}
.innovaphone-widget-card-row:nth-child(3) > button:hover > .btnToolTip {
top: 0;
opacity: 1;
}
.innovaphone-widget-card-row:nth-child(4) { justify-content: space-between;
font-size: var(--text-small);
flex-grow: 1;
}
.innovaphone-widget-card-row:last-child {
margin-bottom: 20px;
}
.innovaphone-widget-card-left,
.innovaphone-widget-card-right {
flex: 1 1 50%;
max-width: 60%;
height: 100%;
margin: 0 5px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.innovaphone-widget-card-left > *:first-child,
.innovaphone-widget-card-right > *:first-child {
min-height: 21px;
margin-bottom: 5px;
}
.innovaphone-widget-card-left > div[name="emailAddr"] {
max-width: 100%;
color: var(--primary-color);
text-decoration: underline;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.innovaphone-widget-card-left > div[name="phoneNumber"]:hover {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
}
.innovaphone-widget-card-left > div[name="phoneNumber"]::before {
content: "Tel. ";
}
.innovaphone-widget-card-left > div[name="faxNumber"]::before {
content: "Fax. ";
}
.innovaphone-widget-card-right > div[name="companyName"] {
font-weight: bold;
}
.innovaphone-widget-cardset[busy=true] button[name='chat'],
.innovaphone-widget-cardset[busy=true] button[name='call'],
.innovaphone-widget-cardset[busy=true] button[name='video'] {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
cursor: unset;
} .innovaphone-widget-dialog {
position: absolute;
right: 0;
bottom: 0;
margin: var(--margin);
min-width: 250px;
max-width: 350px;
width: calc(100% - var(--margin-left) - var(--margin-right));
height: auto;
padding: 20px;
color: #7F7F7F;
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
box-sizing: border-box;
font-size: var(--text-normal);
transition: var(--transition);
opacity: 0;
visibility: hidden;
pointer-events: none; display: flex;
flex-direction: column;
}
.innovaphone-widget-dialog.visible {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.innovaphone-widget-dialog > * {
width: 100%;
flex: 0 0 auto;
text-align: center;
margin-bottom: 20px;
}
.innovaphone-widget-dialog > *:last-child {
margin-bottom: 0;
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-head {
font-size: x-large;
color: var(--primary-color);
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-body-text {
margin-bottom: 10px;
}
.innovaphone-widget-dialog input.innovaphone-widget-dialog-body-input {
padding: 10px;
border-radius: 5px;
border: 1px solid #E3E3E4;
font-family: inherit;
font-size: inherit;
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-buttons {
display: flex;
justify-content: space-evenly;
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-buttons button {
min-width: 110px;
min-height: 35px;
border: none;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-buttons button[disabled] {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
cursor: unset;
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-buttons button.innovaphone-widget-dialog-button-okay {
background-color: var(--primary-color);
color: var(--primary-contrast);
}
.innovaphone-widget-dialog .innovaphone-widget-dialog-buttons button.innovaphone-widget-dialog-button-cancel {
background-color: #E3E3E4;
}
.innovaphone-widget-dialog[name=ErrorDialog] {
box-shadow: 0 0 10px #6666;
background-color: var(--red);
color: black;
}
.innovaphone-widget-dialog[name=ErrorDialog] button {
background-color: black !important;
color: white !important;
} .innovaphone-widget-chat {
position: absolute;
right: 0;
bottom: 0;
margin: var(--margin);
min-width: 250px;
max-width: 350px;
width: calc(100% - var(--margin-left) - var(--margin-right));
height: auto;
max-height: 75%;
font-size: var(--text-normal);
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
box-sizing: border-box;
transition: var(--transition);
opacity: 0;
visibility: hidden;
pointer-events: none; display: flex;
flex-direction: column;
}
.innovaphone-widget-chat.visible {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.innovaphone-widget-chat > * {
width: 100%;
flex: 0 0 auto;
}
.innovaphone-widget-chat > *:last-child {
margin-bottom: 0;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head {
flex: 0 0 auto;
height: 40px;
padding: 10px;
box-sizing: border-box;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast); display: flex;
align-items: center;
justify-content: space-between;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head > .innovaphone-widget-chat-head-text {
position: relative;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head > .innovaphone-widget-chat-head-text > .innovaphone-widget-chat-badge-count {
position: absolute;
top: 50%;
right: -5px;
transform: translate(100%, -50%);
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head > .innovaphone-widget-chat-exit-button {
padding: 0 10px;
min-height: 30px;
border: none;
border-radius: 5px;
background-color: var(--red);
color: white;
fill: white;
cursor: pointer;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head > button.innovaphone-widget-chat-head-button {
background-color: transparent;
border: none;
cursor: pointer;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-head > button.innovaphone-widget-chat-head-button > svg {
width: 14px;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-body {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer {
flex: 0 0 auto;
padding: 10px;
font-size: var(--text-small);
border-bottom: 1px solid #E5E5E5; display: flex;
align-items: center;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-avatar {
flex: 0 0 auto;
width: 50px;
height: 50px;
margin-right: 5px;
object-fit: contain;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info {
overflow: hidden; display: flex;
flex-direction: column;
align-items: flex-start;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info * {
line-height: 20px;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info-span {
max-width: 100%;
white-space: nowrap;
display: flex;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info-name {
font-weight: bold;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info-department {
margin-left: 5px;
flex: 0 10 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info-company {
color: var(--primary-color);
transition: var(--transition);
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-peer-info-status {
color: #939393;
font-style: italic;
transition: var(--transition);
}
.innovaphone-widget-chat .innovaphone-widget-chat-body-list {
flex: 1 1 100%;
overflow: hidden auto;
scroll-behavior: smooth;
}
.innovaphone-widget-chat-item {
margin: 10px 15px;
position: relative;
display: flex;
flex-direction: column;
}
.innovaphone-widget-chat-item-text {
width: 100%;
padding: 8px;
border-radius: 5px;
box-sizing: border-box;
}
.innovaphone-widget-chat-item-time {
color: #939393;
padding: 0 8px;
font-size: var(--text-small);
}
.innovaphone-widget-chat-item.outbound {
align-items: end;
--background-color: var(--primary-color-opac);
}
.innovaphone-widget-chat-item.inbound {
align-items: start;
--background-color: rgba(0,0,0,10%);
}
.innovaphone-widget-chat-item.outbound > svg {
position: absolute;
top: -7.5px;
right: -18px;
width: 30px;
transform: rotate(-90deg);
fill: var(--background-color);
}
.innovaphone-widget-chat-item.inbound > svg {
position: absolute;
top: -7.5px;
left: -18px;
width: 30px;
transform: rotate(90deg);
fill: var(--background-color);
}
.innovaphone-widget-chat-item.outbound .innovaphone-widget-chat-item-content {
border-radius: 5px 0 5px 5px;
background-color: var(--background-color);
overflow: hidden;
text-overflow: ellipsis;
line-break: auto;
width: 75%;
}
.innovaphone-widget-chat-item.inbound .innovaphone-widget-chat-item-content {
border-radius: 0 5px 5px 5px;
background-color: var(--background-color);
overflow: hidden;
text-overflow: ellipsis;
line-break: auto;
width: 75%;
}
.innovaphone-widget-chat-item-files {
backdrop-filter: brightness(95%);
display: flex;
flex-direction: column;
}
.innovaphone-widget-chat-item-files .innovaphone-widget-chat-item-file {
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
}
.innovaphone-widget-chat-item-files .innovaphone-widget-chat-item-file > svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
}
.innovaphone-widget-chat-item-files .innovaphone-widget-chat-item-file > .innovaphone-widget-chat-item-file-name {
flex: 1 1 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.innovaphone-widget-chat-item-files .innovaphone-widget-chat-item-file > .innovaphone-widget-chat-item-file-preview {
flex: 0 0 auto;
height: 23px;
border-radius: 5px;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-body > .innovaphone-widget-chat-exit-button {
flex: 0 0 auto;
min-width: 110px;
min-height: 35px;
align-self: center;
margin: 10px 15px;
padding: 0 30px;
border: none;
border-radius: 5px;
background-color: var(--red);
color: white;
fill: white;
cursor: pointer;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot {
flex: 0 0 auto;
min-height: 46px;
padding: 5px;
position: relative;
box-sizing: border-box;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast); display: flex;
align-items: start;
--base-height: 32px;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack {
flex: 1 1 100%;
padding: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-foot-input {
flex: 0 0 var(--base-height);
width: 100%;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #E3E3E4;
border-radius: 5px;
font-family: inherit;
font-size: var(--text-normal);
background-color: white;
color: black;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-foot-input.highlight {
outline: 2px solid var(--red);
outline-offset: -3px;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-attachment {
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-attachment:first-of-type {
margin-top: 5px;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-attachment > svg {
margin-right: 5px;
flex: 0 0 auto;
height: 20px;
pointer-events: none;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-stack .innovaphone-widget-chat-attachment > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-attach-button,
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-send-button {
flex: 0 0 auto;
height: var(--base-height);
margin: 5px 0;
background-color: transparent;
fill: var(--primary-contrast);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-attach-button > svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
pointer-events: none;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-send-button > svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
pointer-events: none;
}
.innovaphone-widget-chat > .innovaphone-widget-chat-foot .innovaphone-widget-chat-foot-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-chat.minimized {
max-height: 40px;
overflow: hidden;
}
.innovaphone-widget-chat.minimized > .innovaphone-widget-chat-head > button.innovaphone-widget-chat-head-button > svg {
transform: rotateX(180deg);
} .innovaphone-widget-call {
position: absolute;
right: 0;
bottom: 0;
margin: var(--margin);
min-width: 250px;
max-width: 350px;
width: calc(100% - var(--margin-left) - var(--margin-right));
height: auto;
max-height: calc(100% - var(--margin-top) - var(--margin-bottom));
font-size: var(--text-normal);
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
box-sizing: border-box;
transition: var(--transition);
opacity: 0;
visibility: hidden;
pointer-events: none; display: flex;
flex-direction: column;
}
.innovaphone-widget-call.maxWidth420px {
max-width: 420px;
}
.innovaphone-widget-call.maximized {
width: calc(100% - var(--margin-left) - var(--margin-right));
height: calc(100% - var(--margin-top) - var(--margin-bottom));
max-width: calc(100% - var(--margin-left) - var(--margin-right));
max-height: calc(100% - var(--margin-top) - var(--margin-bottom));
}
.innovaphone-widget-call.visible {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.innovaphone-widget-call > .innovaphone-widget-call-head {
flex: 0 0 auto;
height: 40px;
padding: 10px 7px 10px 10px;
position: relative;
box-sizing: border-box;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast); display: flex;
align-items: center;
justify-content: space-between;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > * {
flex: 0 0 auto;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-dtmf-button {
width: 30px;
height: 30px;
padding: 2px 0 0px 0;
background: transparent;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-dtmf-button > svg {
width: 18px;
pointer-events: none;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > .innovaphone-widget-call-head-time {
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: var(--text-large);
pointer-events: none;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > .innovaphone-widget-call-head-spacer {
flex: 1 1 100%;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > .innovaphone-widget-call-exit-button {
flex: 0 0 auto;
width: 60px;
min-height: 25px;
border: none;
border-radius: 5px;
background-color: var(--red);
color: white;
fill: white;
cursor: pointer;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > .innovaphone-widget-call-exit-button > svg {
width: 22px;
pointer-events: none;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-maximize,
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-button {
background-color: transparent;
border: none;
height: 30px;
cursor: pointer;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-maximize > svg {
width: 20px;
}
.innovaphone-widget-call > .innovaphone-widget-call-head > button.innovaphone-widget-call-head-button > svg {
width: 14px;
}
.innovaphone-widget-call > .innovaphone-widget-call-body {
flex: 0 1 auto;
height: 100%;
overflow: hidden;
position: relative; display: flex;
flex-direction: column;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer {
flex: 0 0 auto;
margin: 10px;
font-size: var(--text-small); display: flex;
align-items: center;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer .innovaphone-widget-call-body-peer-avatar {
flex: 0 0 auto;
width: 50px;
height: 50px;
margin-right: 5px;
object-fit: contain;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer .innovaphone-widget-call-body-peer-info {
overflow: hidden; display: flex;
flex-direction: column;
align-items: flex-start;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer .innovaphone-widget-call-body-peer-info > * {
line-height: 16px;
white-space: nowrap;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer .innovaphone-widget-call-body-peer-info > *:nth-child(1) {
font-weight: bold;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-peer .innovaphone-widget-call-body-peer-info > *:nth-child(3) {
color: var(--primary-color);
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-videos {
flex: 0 1 100%;
position: relative;
background-color: #E9E9E9;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-videos > video {
flex: 0 100 auto;
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 100px;
overflow: hidden;
cursor: pointer;
transition: var(--transition);
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-videos > video.overlay {
position: absolute;
right: 10px;
bottom: 10px;
max-width: 40%;
max-height: 40%;
min-width: unset;
min-height: unset;
box-shadow: var(--drop-shadow);
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-local-video {
transform: scaleX(-1);
}
.innovaphone-widget-call > .innovaphone-widget-call-body .innovaphone-widget-call-body-remote-video {
}
.innovaphone-widget-call > .innovaphone-widget-call-foot {
flex: 0 0 auto;
padding: 5px 0;
box-sizing: border-box; display: flex;
align-items: center;
justify-content: space-evenly;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > button {
flex: 0 1 60px;
height: 40px;
margin: 0 2.5px;
border: none;
border-radius: 5px;
position: relative;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > button > .btnToolTip {
position: absolute;
bottom: 40px;
width: 200%;
min-height: 100%;
padding: 5px 10px;
box-sizing: border-box;
pointer-events: none;
border-radius: 5px;
box-shadow: 0 0 10px #6666;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-color);
color: var(--primary-color);
font-size: var(--text-large);
opacity: 0;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > button:hover > .btnToolTip {
bottom: 50px;
opacity: 1;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-exit-button {
flex-shrink: 0;
background-color: var(--red);
color: white;
fill: white;
cursor: pointer;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-exit-button > svg {
width: 24px;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-chat-button,
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-config-button {
background-color: #E9E9E9;
color: black;
fill: black;
position: relative;
cursor: pointer;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-chat-button[active=true],
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-config-button[active=true] {
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-config-button > svg {
width: 20px;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-chat-button > svg {
width: 20px;
margin-top: 1px;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-chat-button > .innovaphone-widget-call-badge-count {
position: absolute;
top: 0;
right: 0;
transform: translate(40%, -40%);
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-share-button {
background-color: #E9E9E9;
color: black;
fill: black;
position: relative;
cursor: pointer;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-share-button[active=true] {
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-share-button > svg {
width: 20px;
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-mute-button,
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-camera-button {
background-color: #E9E9E9;
color: black;
fill: black;
cursor: pointer;
transition: var(--transition);
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-mute-button > svg {
width: 20px;
transform: rotateY(180deg);
}
.innovaphone-widget-call > .innovaphone-widget-call-foot > .innovaphone-widget-call-camera-button > svg {
width: 20px;
}
.innovaphone-widget-call:not([state=connected]) > .innovaphone-widget-call-foot > .innovaphone-widget-call-chat-button,
.innovaphone-widget-call:not([state=connected]) > .innovaphone-widget-call-foot > .innovaphone-widget-call-config-button,
.innovaphone-widget-call:not([state=connected]) > .innovaphone-widget-call-foot > .innovaphone-widget-call-share-button,
.innovaphone-widget-call:not([state=connected]) > .innovaphone-widget-call-foot > .innovaphone-widget-call-mute-button,
.innovaphone-widget-call:not([state=connected]) > .innovaphone-widget-call-foot > .innovaphone-widget-call-camera-button {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
}
.innovaphone-widget-call[muted='true'] > .innovaphone-widget-call-foot > .innovaphone-widget-call-mute-button {
background-color: var(--red);
color: white;
fill: white;
}
.innovaphone-widget-call.minimized {
max-height: 40px;
overflow: hidden;
}
.innovaphone-widget-call.minimized .innovaphone-widget-call-head-text {
position: relative;
}
.innovaphone-widget-call.minimized .innovaphone-widget-call-head-text > .innovaphone-widget-call-badge-count {
position: absolute;
top: 50%;
right: -5px;
transform: translate(100%, -50%);
}
.innovaphone-widget-call.minimized .innovaphone-widget-call-head-time {
flex: 0 0 auto;
}
.innovaphone-widget-call.minimized button.innovaphone-widget-call-head-maximize {
display: none;
}
.innovaphone-widget-call.minimized button.innovaphone-widget-call-head-button > svg {
transform: rotateX(180deg);
}
.innovaphone-widget-call .innovaphone-widget-call-chat,
.innovaphone-widget-call .innovaphone-widget-call-config,
.innovaphone-widget-call .innovaphone-widget-call-dialpad {
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: var(--transition); display: flex;
flex-direction: column;
}
.innovaphone-widget-call .innovaphone-widget-call-chat.visible,
.innovaphone-widget-call .innovaphone-widget-call-config.visible,
.innovaphone-widget-call .innovaphone-widget-call-dialpad.visible {
opacity: 1;
pointer-events: all;
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
}
.innovaphone-widget-call .innovaphone-widget-call-chat.top,
.innovaphone-widget-call .innovaphone-widget-call-config.top,
.innovaphone-widget-call .innovaphone-widget-call-dialpad.top {
transform: translateY(-100%);
top: 10px;
max-height: calc(100vH - 200px);
}
.innovaphone-widget-call .innovaphone-widget-call-chat.top.visible,
.innovaphone-widget-call .innovaphone-widget-call-config.top.visible,
.innovaphone-widget-call .innovaphone-widget-call-dialpad.top.visible {
top: -5px;
}
.innovaphone-widget-call .innovaphone-widget-call-chat.left,
.innovaphone-widget-call .innovaphone-widget-call-config.left,
.innovaphone-widget-call .innovaphone-widget-call-dialpad.left {
transform: translateX(-100%);
left: 20px;
bottom: 0;
height: 100%;
}
.innovaphone-widget-call .innovaphone-widget-call-chat.left.visible,
.innovaphone-widget-call .innovaphone-widget-call-config.left.visible,
.innovaphone-widget-call .innovaphone-widget-call-dialpad.left.visible {
left: 0;
}
.innovaphone-widget-call .innovaphone-widget-call-chat.above {
top: 100px;
bottom: 70px;
height: auto;
max-width: 500px;
align-self: center;
}
.innovaphone-widget-call .innovaphone-widget-call-chat.above.visible {
top: 110px;
bottom: 60px;
}
.innovaphone-widget-call .innovaphone-widget-call-config.above {
bottom: 70px;
height: auto;
max-height: calc(100% - 170px);
max-width: 500px;
align-self: center;
}
.innovaphone-widget-call .innovaphone-widget-call-config.above.visible {
bottom: 50px;
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad.above {
top: 60px;
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad.above.visible {
top: 40px;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-head,
.innovaphone-widget-call .innovaphone-widget-call-config-head,
.innovaphone-widget-call .innovaphone-widget-call-dialpad-head {
flex: 0 0 39px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-large);
border-bottom: 1px solid #ccc;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-head > button,
.innovaphone-widget-call .innovaphone-widget-call-config-head > button,
.innovaphone-widget-call .innovaphone-widget-call-dialpad-head > button {
position: absolute;
top: 5px;
right: 5px;
width: 30px;
height: 30px;
padding: 0;
background-color: unset;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-head > button > svg,
.innovaphone-widget-call .innovaphone-widget-call-config-head > button > svg,
.innovaphone-widget-call .innovaphone-widget-call-dialpad-head > button > svg {
height: 18px;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-body,
.innovaphone-widget-call .innovaphone-widget-call-config-body,
.innovaphone-widget-call .innovaphone-widget-call-dialpad-body {
flex: 1 1 auto;
overflow: hidden auto; display: flex;
flex-direction: column;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-list {
flex: 1 1 100%;
overflow: hidden auto;
scroll-behavior: smooth;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-foot {
flex: 0 0 50px;
background-color: var(--primary-color); display: flex;
align-items: center;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-foot > input {
flex: 1 1 100%;
margin: 0 10px;
padding: 0 10px;
height: 34px;
border: none;
border-radius: 5px;
font-family: inherit;
font-size: var(--text-normal);
}
.innovaphone-widget-call .innovaphone-widget-call-chat-foot > button {
flex: 0 0 30px;
height: 30px;
padding: 0;
margin-right: 5px;
background-color: transparent;
fill: var(--primary-contrast);
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-call .innovaphone-widget-call-chat-foot > button > svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-head {
flex: 0 0 38px;
background-color: var(--primary-color-opac);
color: var(--primary-color);
fill: var(--primary-color);
overflow: hidden;
display: flex;
align-items: center;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-head > svg {
height: 18px;
margin: 0 15px;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-list {
flex: 0 0 auto;
min-height: 40px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
margin-right: 10px;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-list > div {
min-height: 40px;
display: flex;
align-items: center;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-list input[type=radio] {
flex: 0 0 18px;
height: 18px;
margin: 0 15px;
display: inline-block;
}
.innovaphone-widget-call .innovaphone-widget-call-config-body-list label { font-size: inherit;
color: inherit;
font-weight: inherit;
max-width: unset;
}
.innovaphone-widget-call .innovaphone-widget-call-config-foot {
flex: 0 0 50px; display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-call .innovaphone-widget-call-config-foot > button {
flex: 0 1 auto;
height: 35px;
border-radius: 5px;
font-size: var(--text-small);
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
white-space: nowrap;
overflow: hidden;
padding: 0 20px;
margin: 0 20px;
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad-body .innovaphone-widget-call-dialpad-body-buttons {
padding: 1px;
display: flex;
align-items: center;
justify-content: space-between;
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad-body .innovaphone-widget-call-dialpad-body-buttons button {
width: 80px;
height: 40px;
font-size: larger;
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad-body .innovaphone-widget-call-dialpad-body-buttons button:hover {
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
}
.innovaphone-widget-call .innovaphone-widget-call-dialpad-body .innovaphone-widget-call-dialpad-body-buttons button:focus-visible {
z-index: 100;
}
.innovaphone-widget-chat-badge-count,
.innovaphone-widget-call-badge-count {
height: 20px;
min-width: 20px;
line-height: 17px;
text-align: center;
font-size: var(--text-small);
background-color: var(--red);
color: white;
fill: white;
box-sizing: border-box;
border: 1px solid;
border-radius: 5px;
}
.innovaphone-widget-chat-badge-count:empty,
.innovaphone-widget-call-badge-count:empty {
display: none;
}
.innovaphone-widget-chat a,
.innovaphone-widget-call a {
color: var(--primary-color);
} .innovaphone-widget-sidebar-horizontal.open.narrow,
.innovaphone-widget-sidebar-horizontal.open.narrow div.buttons,
.innovaphone-widget-sidebar-horizontal.open.narrow .innovaphone-widget-sidebar-info {
max-width: 240px;
} .innovaphone-widget-sidebar-vertical {
position: relative;
align-self: center;
transform: translateY(35px);
width: var(--sidebar-width);
min-width: var(--avatar-size);
min-height: var(--avatar-size);
max-height: 100%;
padding-bottom: var(--sidebar-padding-bottom);
margin: 0;
opacity: 0;
font-size: var(--text-small);
background-color: var(--secondary-color);
box-shadow: var(--drop-shadow);
transition: var(--transition);
pointer-events: all; display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
}
.innovaphone-widget-sidebar-vertical.visible {
opacity: 1;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-sidebar-avatar {
position: absolute;
bottom: 100%;
right: 0;
}
.innovaphone-widget-sidebar-vertical div.textBubble {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
transition: 1s;
padding: 3px 7px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
font-size: var(--text-normal);
box-shadow: var(--drop-shadow);
background-color: var(--primary-color);
color: var(--primary-contrast);
}
.innovaphone-widget-sidebar-vertical .claimBubble {
display: none;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-sidebar-avatar .badge {
display: none;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-sidebar-info-container {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-sidebar-info {
flex: 0 0 auto;
min-width: 300px;
max-width: 300px;
height: 100%;
padding: 15px;
overflow: hidden;
box-sizing: border-box;
transition: var(--transition);
transition-delay: calc(var(--transition) / 4);
opacity: 0; display: flex;
flex-direction: column;
}
.innovaphone-widget-sidebar-vertical div.buttons {
flex: 0 0 auto;
width: var(--avatar-size);
height: auto;
padding: 15px 0;
gap: 12px;
opacity: 1;
box-sizing: border-box;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.innovaphone-widget-sidebar-vertical div.buttons > button {
position: relative;
width: 50px;
height: 45px;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-contrast);
fill: var(--primary-contrast);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.innovaphone-widget-sidebar-vertical div.buttons > button > svg {
height: 18px;
pointer-events: none;
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='call'] > svg {
height: 24px;
transform: rotate(-35deg);
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='chat'] > svg {
transform: translateY(1px);
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='email'] > svg {
height: 15px;
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='link'] > svg {
height: 20px;
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='expand'] > svg {
height: 14px;
transition: var(--transition);
transform-origin: 50% 60%;
transform: rotate(-90deg);
}
.innovaphone-widget-sidebar-vertical div.buttons > button[disabled] {
opacity: 50%;
filter: grayscale(1);
pointer-events: none;
cursor: unset;
}
.innovaphone-widget-sidebar-vertical div.buttons > button[name='expand'] {
height: 30px;
padding: 0;
margin: -5px 0;
background-color: transparent;
color: var(--primary-color);
fill: var(--primary-color);
}
.innovaphone-widget-sidebar-vertical div.buttons > button > .btnToolTip {
position: absolute;
left: 0;
min-width: 150px;
min-height: 100%;
padding: 5px 10px;
box-sizing: border-box;
transform: translateX(-100%);
pointer-events: none;
border-radius: 5px;
box-shadow: 0 0 10px #6666;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-color);
color: var(--primary-color);
font-size: var(--text-large);
transition: var(--transition);
opacity: 0;
}
.innovaphone-widget-sidebar-vertical div.buttons > button:hover > .btnToolTip {
left: -20px;
opacity: 1;
}
.innovaphone-widget-sidebar-vertical.expanded .innovaphone-widget-sidebar-info {
opacity: 1;
}
.innovaphone-widget-sidebar-vertical.expanded div.buttons > button[name='expand'] > svg {
transform: rotate(-270deg);
} .innovaphone-widget-claim {
flex: 0 0 auto;
width: 100%;
height: 64px;
box-sizing: border-box;
background-color: var(--claim-background);
color: #000000;
white-space: nowrap;
font-size: var(--text-small);
transition: var(--transition);
display: flex;
align-items: center;
pointer-events: all;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-claim,
.innovaphone-widget-sidebar-vertical .innovaphone-widget-carousel {
position: absolute;
bottom: 0;
right: 0;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-claim {
opacity: 0;
}
.innovaphone-widget-sidebar-vertical .innovaphone-widget-sidebar-info-container .innovaphone-widget-claim {
display: none;
}
.innovaphone-widget-sidebar-horizontal > .innovaphone-widget-claim,
.innovaphone-widget-sidebar-horizontal > .innovaphone-widget-carousel,
.innovaphone-widget-sidebar-horizontal > .innovaphone-widget-flip {
display: none;
}
.innovaphone-widget-sidebar-vertical.expanded .innovaphone-widget-claim {
opacity: 1;
}
.innovaphone-widget-sidebar-vertical.expanded .innovaphone-widget-carousel,
.innovaphone-widget-sidebar-vertical.expanded .innovaphone-widget-flip {
opacity: 0;
}
.innovaphone-widget-card .innovaphone-widget-claim {
margin-top: 10px;
width: 100%;
flex: 0 0 64px;
border-bottom-left-radius: var(--card-border-radius);
border-bottom-right-radius: var(--card-border-radius);
}
.innovaphone-widget-chat .innovaphone-widget-claim,
.innovaphone-widget-call.innovaphone-widget-claim {
padding: 4px 0 6px 0;
}
.innovaphone-widget-claim .innovaphone-widget-claim-spacer {
flex: 1 1 100%;
}
.innovaphone-widget-claim .innovaphone-widget-claim-container {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 4px;
}
.innovaphone-widget-claim .innovaphone-widget-claim-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.innovaphone-widget-claim .innovaphone-widget-claim-body > div:nth-child(1) {
flex: 1 1 50%;
display: flex;
align-items: center;
gap: 4px;
color: #826BAB;
cursor: pointer;
}
.innovaphone-widget-claim .innovaphone-widget-claim-body > div:nth-child(2) {
flex: 0 0 auto;
width: 1px;
height: 12px;
margin: 0 10px;
background-color: #807F7F;
}
.innovaphone-widget-claim .innovaphone-widget-claim-body > div:nth-child(3) {
flex: 1 1 50%;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
line-height: 14px;
}
.innovaphone-widget-claim img {
flex: 0 0 auto;
max-width: 25px;
max-height: 25px;
} .innovaphone-full-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
z-index: var(--z-index);
background-color: var(--secondary-color);
} .innovaphone-widget-carousel {
flex: 0 0 auto;
width: 70px;
height: 64px;
display: flex;
pointer-events: all;
background-color: var(--claim-background);
transition: var(--transition);
overflow: hidden;
}
.innovaphone-widget-carousel > a {
flex: 0 0 auto;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.innovaphone-widget-carousel > a > img {
flex: 0 0 auto;
width: 40px;
height: 40px;
} .innovaphone-widget-flip {
position: absolute;
right: 0;
bottom: 0;
width: 70px;
height: 64px;
background-color: var(--claim-background);
perspective: calc(3* 70px);
transition: var(--transition);
}
.innovaphone-widget-flip-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 600ms;
transform-style: preserve-3d;
}
.innovaphone-widget-flip-inner.flipped {
transform: rotateY(180deg);
}
.innovaphone-widget-flip-inner > a {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}
.innovaphone-widget-flip-inner > a.innovaphone-widget-flip-inner-backside {
transform: rotateY(180deg);
}
.innovaphone-widget-flip-inner > a > img {
flex: 0 0 auto;
width: 40px;
height: 40px;
background-color: var(--claim-background);
} .innovaphone-ring-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.innovaphone-ring-spinner:after {
content: " ";
display: block;
width: 40px;
height: 40px;
box-sizing: border-box;
border-radius: 50%;
border: 5px solid transparent;
border-color: var(--primary-color) var(--secondary-color) var(--primary-color) var(--secondary-color);
animation: innovaphone-ring-spinner 0.75s linear infinite;
}
@keyframes innovaphone-ring-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}