:root {
    --primary: #8a1538;
    --secondary: #f8d7da;
    --header-text-color: #ffffff;
    --text-header-color: #FFFFFF;
    --text-incoming-message-color: #001659;
    --text-incoming-message-background-color: #f2f2f2;
    --text-outgoing-message-color: #FFFFFF;
    --chatbot-right: 88px;
    --chatbot-bottom: calc(100% - 97%);
    --chatbot-toggler-left: 16px;
    --chatbot-toggler-bottom: 100px;
    --gradient-first-color: #3b0011 25%;
    --gradient-second-color: #7f1f3b 77%;
    --box-shadow: #3b0011 0px 3px 8px;
    --box-shadow-message: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.chatbot-ai-assistant {
    direction: ltr;
}

.chatbot-toggler {
    left: var(--chatbot-toggler-left) !important;
    bottom: var(--chatbot-toggler-bottom) !important;
}

.chatbot {
    transform-origin: bottom left;
}

.chatbot header svg.close-btn {
    right: 20px;
    left: initial;
}

.chatbot header .logo {
    padding-left: 14px;
}

.chatbot header .logo img {
    margin-left: 10px;
    margin-right: 0;
}

.chatbox .incoming span {
    margin: 0 10px 7px 0;
}

.chat-input #send-btn {
    transform: rotate(0deg);
}

.tooltip-loader {
    left: 4px;
    right: initial;
}

.tooltip-record {
    left: 10px;
    right: initial;
}

.tooltip-avatar {
    right: 12px;
    left: initial;
}

.chatbot-media-large-screen {
    left: var(--chatbot-right);
    right: initial;
}

.chatbot-media-small-screen {
    left: 18px;
    right: initial;
}

.avatar-media-large-screen {
    left: 600px;
    right: initial;
}

.avatar-media-small-screen {
    left: 18px;
    right: initial;
}

.feedback {
    left: initial;
    right: 15px
}
.feedback-popup{
    left: initial;
    right: 15px 
}
.header-icons {
    left: initial;
    right: 10px
  
}

@media (max-width: 650px) {
    .header-icons .full-screen{
        display: none;
    }
    .chatbot-toggler {
        left: 25px !important;
        right:initial;
        bottom: 30px !important;
    }

    .chatbot {
        left: 18px;
        right:initial;
        width: calc(100% - 36px);
    }

    .chatbot .chatbox {
        height: 90%;
        padding: 25px 15px 100px;
    }

    .chatbot .chat-input {
        padding: 5px 15px;
    }

    .chatbot header span {
        display: block;
    }

    .avatar-popup {
        left: 3%;
        right:initial;
    }
}