@font-face {
    font-family: titillium;
    font-style: normal;
    font-weight: normal;
    src: url("web/fonts/titilliumweb-regular.ttf") format("truetype");
}

@font-face {
    font-family: titillium;
    font-style: normal;
    font-weight: bold;
    src: url("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;
    }

/* horizontal sidebar */

.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;
    /* horizontal flex-box */
    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;
        /* vertical flex-box */
        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);
    /* horizontal flex-box */
    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) {
        /* name and department */
        margin-top: 50px;
    }

    .innovaphone-widget-card-row:nth-child(2) {
        /* presence-info */
    }

        .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) {
        /* button-bar */
        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) {
        /* address-bar */
        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 */

.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;
    /* vertical flex-box */
    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 */

.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;
    /* vertical flex-box (head, body, foot) */
    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);
        /* horizontal flex-box */
        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;
        /* horizontal flex-box */
        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;
        /* vertical flex-box */
        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);
    /* horizontal flex-box */
    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 */

.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;
    /* vertical flex-box (head, body, foot) */
    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);
        /* horizontal flex-box */
        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;
        /* vertical flex-box (peer, videos) */
        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);
            /* horizontal flex-box */
            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;
                /* vertical flex-box */
                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;
        /* horizontal flex-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);
        /* vertical flex-box */
        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;
        /* vertical flex-box */
        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);
        /* horizontal flex-box */
        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 {
            /* undo any definitions of host website */
            font-size: inherit;
            color: inherit;
            font-weight: inherit;
            max-width: unset;
        }

    .innovaphone-widget-call .innovaphone-widget-call-config-foot {
        flex: 0 0 50px;
        /* horizontal flex-box */
        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);
}

/* narrow screen adjustments */

.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;
}

/* vertical sidebar */

.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;
    /* vertical flex-box */
    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;
        /* vertical flex-box */
        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 */

.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-element */

.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 */

.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 */

.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 */

.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);
    }
}