/* GLOBAL */

/* @import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.woff');
@import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.woff2');
@import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.ttf');

@import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.woff');
@import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.woff2');
@import url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.ttf'); */

@font-face {
    font-family: 'Gilroy-medium';
    src: url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.woff2') format('woff2'), url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.woff') format('woff'), url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Gilroy-bold';
    src: url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.woff2') format('woff2'), url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.woff') format('woff'), url('https://xdune-cdn.s3.eu-central-1.amazonaws.com/campfire/v0/cdn/fonts/gilroy-bold.ttf') format('truetype');
}

    *, body {
        font-family: 'Gilroy-medium', sans-serif;
        font-weight: 500;
    }

    .container {
        position: relative;
    }

    .container::before {
        display: none;
        content: '';
        position: fixed;
        background-color: #979797;
        top: 0;
        left: 41px;
        height: 100%;
        width: 1px;
        opacity: 0.3;
        z-index: 1;
    }

    .container::after {
        display: none;
        content: '';
        position: fixed;
        background-color: #979797;
        top: 0;
        right: 48px;
        height: 100%;
        width: 1px;
        opacity: 0.3;
    }

    @media(min-width: 500px){
        .container::before {display: block;}
        .container::after {display: block;}
    }

/* CONTAINER */

    .ChatContent {
        padding: 8px;
        background-color: #f6f6f6;
    }

    @media(min-width: 500px){
        .ChatContent {padding: 32px 64px 32px 64px;}
    }

/* INPUT AREA */

    .ChatInputContainer {
        display: none;
    }

/* TEXT BUBBLES */

    .ChatContent > div > img {
        display: none;
        align-self: flex-start;
        margin-top: 16px;
        position: absolute;
        left: 17px;
        z-index: 1;
        filter: none;
        width: 3rem;
        height: 3rem;
    }

    @media(min-width: 500px){
        .ChatContent > div > img {display: block;}
    }

    .chatBalloon-default {
        position: relative;
        color: #000000;
        padding: 16px;
        box-shadow: none;
        min-height: 20px;
    }

    .chatBalloon-default > span {
        font-weight: 500;
        line-height: 1.6;
    }

    .chatBalloon-bot {
        background-color:#ffffff;
        border-radius: 10px 10px 10px 0px;
        width: 315px;
        margin-left: 16px;
    }

    .chatBalloon-user {
        color: #ffffff !important;
        background-color: rgba(74, 47, 204, 0.85) !important;
        border-radius: 10px 10px 10px 10px;
        margin-left: 0;
        font-size: 14px !important;
    }

    .chatQuickReplies-container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        margin-left: 16px;
    }

/* BUTTONS */

    .buttons-default {
        border-radius: 10px 10px 10px 0px;
        box-shadow: none;
        opacity: 0.8;
        font-size: 14px;
        font-family: 'Gilroy-medium', sans-serif;
        color: #000000 !important;
        background-color: #ffffff !important;
        padding: 16px;
        margin: 0px 0px 3px 0px;
        transition: all 0.2s ease-in-out;
    }

    .buttons-default:hover {
        box-shadow: none;
        opacity: 1;
        transform: translateX(10px);
        color: rgba(74, 47, 204, 1) !important;
    }

    .chatTemplate-buttonTemplate-container {
        border-radius: 0px;
        border: none;
        background-color: rgb(255, 255, 255);
    }

    .chatTemplate-buttonTemplate-buttons-header {
        border-radius: 10px !important;
        text-align: left;
        font-size: 16px;
        font-family: 'Gilroy-bold', sans-serif;
        color: rgba(74, 47, 204, 0.85) !important;
        background-color: rgb(255, 255, 255);
    }

    .chatTemplate-buttonTemplate-buttons-default {
        text-align: left;
        font-size: 14px;
        padding: 10px 0;
        font-family: 'Gilroy-medium', sans-serif;
        color: rgba(74, 47, 204, 0.85) !important;
        transition: all 0.2s ease-in-out;
    }

    .chatTemplate-buttonTemplate-buttons-default:hover {
        text-decoration: none;
        transform: translateX(10px);
    }