@media only screen and (max-device-width : 500px) {
    div.default-form .max-chat-header {
        background-color: #db2459 !important;
    }

    div.default-form .max-chat-container .max-chat-header {
        background-color: #6e0d3b !important;
    }

    div .max-chat-container {
        font-family: "Onest", Arial, Sans-serif !important;
        background-color: #6e0d3b !important;
        border-width: 10px !important;
        border-color: #fff !important;
    }

        div.max-chat-container .max-chat-panel .max-chat-section img {
            border-radius: 50% !important;
            padding: 5px !important;
            width: 27px !important;
            height: 27px !important;
            background-color: #db2459 !important;
            text-align: center !important;
            vertical-align: middle !important;
            position: relative !important;
            left: 5px !important;
            z-index: 2 !important;
            display: inline !important;
        }

            div.max-chat-container .max-chat-panel .max-chat-section img + span {
                padding: 8px 10px 7px 22px !important;
                vertical-align: middle !important;
                position: relative !important;
                right: 12px !important;
                font-size: 15px !important;
                color: #fff !important;
                background-color: #db2459 !important;
                border: 1px solid #db2459 !important;
                border-radius: 0 4px 4px 0 !important;
                cursor: pointer !important;
                display: inline !important;
            }

        div.max-chat-container .max-chat-panel .max-chat-section button {
            /*background-color: #db2459 !important;*/
            border: 2px solid #db2459 !important;
            border-radius: 20px !important;
            cursor: pointer !important;
            display: inline-block !important;
        }

        div.max-chat-container .max-chat-panel .max-chat-input {
            position: relative !important;
            border: 2px solid #00304f !important;
            cursor: text !important;
            border-radius: 50px 50px 50px 50px !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

        div.max-chat-container input[type="text"]::placeholder {
            font-size: 14px !important;
            font-weight: 300 !important;
        }

        div.max-chat-container .max-chat-panel .max-chat-input {
            position: relative !important;
            border: 2px solid #00304f !important;
            cursor: text !important;
            border-radius: 50px 50px 50px 50px !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

    div.max-chat-inputs show-message {
        font-size: 18px !important;
        color: #000 !important;
    }

    div.max-chat-container .max-confirm-close-panel .request-email-section p,
    div.max-chat-container .max-no-agent-panel .request-email-section p {
        text-align: center !important;
        color: #00304f !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble div {
        margin-left: 35px !important;
        background-color: #db2459 !important;
        color: #fff !important;
    }

    div.max-chat-container .max-no-agent-panel .max-timeout-information span {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble img {
        border-radius: 50% !important;
        padding: 5px !important;
        width: 27px !important;
        height: 27px !important;
        background-color: #db2459 !important;
        text-align: center !important;
        vertical-align: middle !important;
        position: relative !important;
        left: 5px !important;
        z-index: 2 !important;
        display: inline !important;
        position: absolute !important;
        top: 5px !important;
        left: 3px !important;
    }

    div.max-chat-container .max-confirm-close-panel .request-email-details-section .request-transcript-info,
    div.max-chat-container .max-no-agent-panel .request-email-details-section .request-transcript-info {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-confirm-close-panel .max-confirm-close-section .max-confirm-close-information span,
    div.max-chat-container .max-confirm-close-panel .max-timeout-information .max-confirm-close-information span,
    div.max-chat-container .max-no-agent-panel .max-confirm-close-section .max-confirm-close-information span,
    div.max-chat-container .max-no-agent-panel .max-timeout-information .max-confirm-close-information span {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.max-chat-info .info span {
        color: #db2459 !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }

    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-one,
    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-three,
    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-two {
        background-color: #db2459 !important;
        width: 30px !important;
        margin: 0 5px !important;
        height: 30px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        animation: loadingDots 1.6s infinite both !important;
    }

    div.max-chat-container .max-spinner-panel .max-chat-spinner-text {
        display: block !important;
        text-align: center !important;
        font-size: 18px !important;
        color: #db2459 !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-input-wrapper .max-chat-send-button {
        border-radius: 5px !important;
        width: 47px !important;
        background-color: #db2459 !important;
        height: 33px !important;
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble span, .max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble a {
        color: #ffffff !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-agent-footer span {
        color: #00304f !important;
        font-size: 12px;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.user .max-chat-bubble div {
        background-color: #6e0d3b !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-input-wrapper .max-chat-input-wrapper textarea {
        font-family: "Onest", Arial, Sans-serif !important;
        color: #00304f !important;
    }

    div.max-chat-header .svg-white.margin-start-icon {
        margin: 0px !important;
    }

    div.max-chat-header {
        left: 25px !important;
        top: 5px !important;
    }
}

@media only screen and (min-device-width : 501px)  {
    div.default-form .max-chat-header {
        background-color: #db2459 !important;
    }

    div.default-form .max-chat-container .max-chat-header {
        background-color: #6e0d3b !important;
    }

    div .max-chat-container {
        font-family: "Onest", Arial, Sans-serif !important;
        background-color: #6e0d3b !important;
        border-width: 10px !important;
        border-color: #fff !important;
    }

        div.max-chat-container .max-chat-panel .max-chat-section img {
            border-radius: 50% !important;
            padding: 5px !important;
            width: 27px !important;
            height: 27px !important;
            background-color: #db2459 !important;
            text-align: center !important;
            vertical-align: middle !important;
            position: relative !important;
            left: 5px !important;
            z-index: 2 !important;
            display: inline !important;
        }

            div.max-chat-container .max-chat-panel .max-chat-section img + span {
                padding: 8px 10px 7px 22px !important;
                vertical-align: middle !important;
                position: relative !important;
                right: 12px !important;
                font-size: 15px !important;
                color: #fff !important;
                background-color: #db2459 !important;
                border: 1px solid #db2459 !important;
                border-radius: 0 4px 4px 0 !important;
                cursor: pointer !important;
                display: inline !important;
            }

        div.max-chat-container .max-chat-panel .max-chat-section button {
            /*background-color: #db2459 !important;*/
            border: 2px solid #db2459 !important;
            border-radius: 20px !important;
            cursor: pointer !important;
            display: inline-block !important;
        }

        div.max-chat-container .max-chat-panel .max-chat-input {
            position: relative !important;
            border: 2px solid #00304f !important;
            cursor: text !important;
            border-radius: 50px 50px 50px 50px !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

        div.max-chat-container input[type="text"]::placeholder {
            font-size: 14px !important;
            font-weight: 300 !important;
        }

        div.max-chat-container .max-chat-panel .max-chat-input {
            position: relative !important;
            border: 2px solid #00304f !important;
            cursor: text !important;
            border-radius: 50px 50px 50px 50px !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

    div.max-chat-inputs show-message {
        font-size: 18px !important;
        color: #000 !important;
    }


    div.max-chat-container .max-confirm-close-panel .request-email-section p,
    div.max-chat-container .max-no-agent-panel .request-email-section p {
        text-align: center !important;
        color: #00304f !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble div {
        margin-left: 35px !important;
        background-color: #db2459 !important;
        color: #fff !important;
    }

    div.max-chat-container .max-no-agent-panel .max-timeout-information span {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble img {
        border-radius: 50% !important;
        padding: 5px !important;
        width: 27px !important;
        height: 27px !important;
        background-color: #db2459 !important;
        text-align: center !important;
        vertical-align: middle !important;
        position: relative !important;
        left: 5px !important;
        z-index: 2 !important;
        display: inline !important;
        position: absolute !important;
        top: 5px !important;
        left: 3px !important;
    }

    div.max-chat-container .max-confirm-close-panel .request-email-details-section .request-transcript-info,
    div.max-chat-container .max-no-agent-panel .request-email-details-section .request-transcript-info {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-confirm-close-panel .max-confirm-close-section .max-confirm-close-information span,
    div.max-chat-container .max-confirm-close-panel .max-timeout-information .max-confirm-close-information span,
    div.max-chat-container .max-no-agent-panel .max-confirm-close-section .max-confirm-close-information span,
    div.max-chat-container .max-no-agent-panel .max-timeout-information .max-confirm-close-information span {
        text-align: center !important;
        color: #db2459 !important;
        font-size: 16px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.max-chat-info .info span {
        color: #db2459 !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }

    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-one,
    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-three,
    div.max-chat-container .max-spinner-panel .max-live-chat-spinner .circle-two {
        background-color: #db2459 !important;
        width: 30px !important;
        margin: 0 5px !important;
        height: 30px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        animation: loadingDots 1.6s infinite both !important;
    }

    div.max-chat-container .max-spinner-panel .max-chat-spinner-text {
        display: block !important;
        text-align: center !important;
        font-size: 18px !important;
        color: #db2459 !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-input-wrapper .max-chat-send-button {
        border-radius: 5px !important;
        width: 47px !important;
        background-color: #db2459 !important;
        height: 33px !important;
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble span, .max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.agent .max-chat-bubble a {
        color: #ffffff !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-agent-footer span {
        color: #00304f !important;
        font-size: 12px;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-window .max-chat-message.user .max-chat-bubble div {
        background-color: #6e0d3b !important;
    }

    div.max-chat-container .max-live-chat-panel .max-live-chat-input-wrapper .max-chat-input-wrapper textarea {
        font-family: "Onest", Arial, Sans-serif !important;
        color: #00304f !important;
    }

}