html,body {
    height: 100%;
}

body {
    margin: 0;
    background-color: #F6F6F6;
    font-family: "Gotham", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.container {
    background-color: white;
    height: 100%;
    width: 600px;
    margin: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    body {
        background-color: white;
    }

    .container {
        height: 100%;
        width: 100%;
    }
}

/* --- header bar */

.cs-cb-header {
    display: flex;
    align-items: center;
    /*margin: -10px -10px 0 -10px;*/
    padding: 10px 10px 5px;
    /*border-radius: 10px 10px 0 0;*/
    background: rgb(197 197 197);
    background: linear-gradient(141deg, rgb(197 197 197) 0%, rgb(233 233 233) 37%, rgb(207 207 207) 100%);

    .cs-cb-info {
        flex-basis: 100%;
    }

    .cs-cb-img {
        max-width: 40px;
        margin-right: 15px;
        img {
            width: 100%;
        }
    }

    .cs-cb-default-img {
        max-height: 40px;
        max-width: 48px;
        margin: 0px 10px 0px 0;
    }

    .cs-cb-info {
        .cs-agent-name {
            font-weight: bold;
            font-size: 22px;
            line-height: 0.8;
        }

        .cs-agent-headline {
            font-size: 12px;
        }
    }
}

.cs-cb-header {
    background: #00b26b url(https://www.letsbemates.com.au/includes/assets/img/mate-logo.svg) no-repeat center center !important;
    color: #fff !important;
    background-size: 80px !important;
}

.cs-chat-item .cs-q {
    background: #00b26b !important;
    border: solid 1px #4d816c;
    border-radius: 10px 0px 10px 10px;
}

.cs-chat-item .cs-a {
    background: #f5f5f5 !important;
    border-radius: 0 10px 10px !important;
    border: solid 1px #b9b9b9 !important;
}

.cs-chat-item .cs-a-source-wrapper a {
    background: transparent !important;
    border: 0 !important;
    color: blue !important;
    text-decoration: underline !important;
    padding: 0 !important;
}

.cs-cb-header .cs-cb-img {
    max-width: 60px !important;
    margin-right: 15px !important;
    background: linear-gradient(190deg, rgb(255 255 255) 0%, #ffffff 37%, #c5ffc7 100%) !important;
    border-radius: 100% !important;
    padding: 0 !important;
    display: flex !important;
    overflow: hidden !important;
}

/* --- */

clever-search-chat {
    overflow: hidden;
}

#gqa-wrapper {
    max-height: calc(100% - 80px);
    display: none;
    overflow: hidden;
    transition: all 0.2s;
}

.lds-dual-ring,
.lds-dual-ring:after {
    box-sizing: border-box;
}
.lds-dual-ring {
    display: block;
    margin: auto;
    width: 80px;
    height: 80px;
    margin-top: 50%;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid #00b26b;
    border-color: #00b26b transparent #00b26b transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}