/* GLOBAL */

    *, body {
        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;
    }

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

    .ChatTitleBar {
        display: none;
    }

/* CONTAINER */

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

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

/* INPUT AREA */

    .ChatInputContainer {
        background-color: #f6f6f6;
        height: 80px;
        padding: 12px;
        width: auto;
    }

    @media(min-width: 500px){
        .ChatInputContainer { padding: 10px 26px 16px; }
    }

    .ChatInputText-container {
        border: none;
        z-index: 1;
        position: relative;
    }

    .ChatInputText-textarea {
        border: none;
        border-radius: 0;
        padding: 17px 14px 14px 32px;
        min-height: 55px;
        font-size: 14px;
    }

    span.SendIconImage {
        position: absolute;
        z-index: 1;
        right: 2rem;
        top: 45%;
        transform: translateY(-50%);
        height: fit-content;
    }

    span.SendIconImage > svg {
        margin-right: 0;
    }

    @media(min-width: 500px){
        span.SendIconImage {right: 4rem;}
    }

    span.SendIconImage:hover {
        cursor: pointer;
    }

/* 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;
    }

    .ChatContent > div {
        flex-direction: row;
    }

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

    .chatBalloon-default {
        color: #000000;
        padding: 16px;
        box-shadow: none;
        min-height: 20px;
        margin-bottom: 2.5rem;
        font-weight: 500;
    }

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

    .chatBalloon-user {
        color: #ffffff !important;
        background-color: #000000 !important;
        border: none !important;
        border-radius: 0;
        margin-left: 16px;
    }

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

/* BUTTONS */

    .buttons-default {
        box-shadow: none !important;
        font-size: 13px !important;
        background-color: #000000 !important;
        color: #ffffff !important;
        border: 1px solid #000000 !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        transition: all 0.2s ease-in-out !important;
        margin: 0 1rem 1rem 0 !important;
    }

    .buttons-default:hover {
        box-shadow: none !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }

    .chatTemplate-buttonTemplate-container {
        border: none;
        background-color: transparent;
        box-shadow: none;
        margin-bottom: 2rem;
        flex-direction: column !important;
    }

    .chatTemplate-buttonTemplate-buttons-header {
        text-align: left;
        padding: 16px;
        margin-left: 16px;
        font-size: 14px;
        font-weight: 500;
        color: #000000;
        background-color: rgb(255, 255, 255);
    }

    .chatTemplate-buttonTemplate-buttons-default {
        font-size: 13px;
        color: #000000;
        text-align: left;
        transition: all 0.2s ease-in-out;
        padding: 10px 16px;
        margin: 10px 0 0 16px;
        border: 1px solid #000000;
        width: fit-content;
    }

    @media(min-width: 500px){
        .chatTemplate-buttonTemplate-buttons-header, .chatTemplate-buttonTemplate-buttons-default { width: 315px;}
    }

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

    .chatQuickReplies-container {
        margin-bottom: 1.5rem;
        margin-left: 27px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
/* SLIDER */

    div.slider-frame {
        height: 300px !important;
        margin-bottom: 2.5rem !important;
    }

    ul.slider-list {
        max-height: 300px;
        height: 100% !important;
        margin: 16px 0 !important;
    }

    li.slider-slide {
        height: 100% !important;
    }

    div.slider-control-centerleft > svg, div.slider-control-centerright > svg {
        background: #000000 !important;
    }

    .chatTemplate-chatCarousel-element-container {
        background-color: rgb(243, 245, 255);
        border-radius: 0px;
        box-shadow: none;
        min-height: 0 !important;
        height: 100%;
    }

    /* .chatTemplate-chatCarousel-element-container > div {
        height: 100%
    } */

    .chatTemplate-chatCarousel-element-title {
        color: #000000 !important;
        background-color: #ffffff;
        border: 1px solid #000000;
        font-weight: 600;
        height: 34px !important;
        padding: 14px 14px;
        margin: 0;
        border-radius: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .chatTemplate-chatCarousel-element-subtitle {
        margin: 0;
        /* min-height: 30px; */
        background-color: #ffffff;
        /* padding: 8px; */
        color: #000000;
        text-align: center;
        display: none !important;
    }

    .chatTemplate-chatCarousel-element-image {
        margin: 0;
        object-fit: cover;
        height: 100% !important;
        max-height: 100% !important;
    }

    .chatTemplate-chatCarousel-element-button {
        background-color: #000000;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease-in-out;
        height: 30px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
    }

    .chatTemplate-chatCarousel-element-button:hover {
        background-color: #ffffff !important;
        color: #000000 !important;
        text-decoration: none;
        border: 1px solid #000000;
    }

/* SDK BUTTON */

    .chatlayer-chatbox-button {
        cursor: pointer;
    }