.form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        color: #000;
    }
    
    .form-control {
        height: 38px;
        border-radius: 5px;
    }
    
    .form-control {
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        color: rgb(0, 2, 8);
        background-color: rgb(255, 255, 255);
        background-clip: padding-box;
        margin: 10px 0 15px 0;
        padding: 0.375rem 0.75rem;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(232, 232, 247);
        border-image: initial;
        border-radius: 3px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    }
    
    .form-control:focus {
        color: rgb(73, 80, 87);
        background-color: rgb(255, 255, 255);
        box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem;
        border-color: rgb(128, 189, 255);
        outline: 0px;
    }
    
    .chat-form {
        display: flex;
        justify-content: center;
        background: white;
        padding: 27px 20px;
        height: 90%;
        align-items: center;
    }
    
    .chat-form .form-control {
        width: 92%;
    }
    
    .chat-form .form {
        width: 85%;
    }
    
    .Powered-by {
        padding: 10px;
        text-align: center;
        margin: 5px 0;
        font-size: 11px;
        margin-top: 12px;
    }
    
    .btn {
        color: #fff;
        display: inline-block;
        font-weight: 400;
        color: rgb(33, 37, 41);
        text-align: center;
        vertical-align: middle;
        user-select: none;
        background-color: transparent;
        font-size: 1rem;
        line-height: 1.5;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        border-image: initial;
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    }
    
    .btn-primary {
        cursor: pointer;
        color: #fff;
        background-color: #dc0f0e;
        border-color: #e00f0b !important;
        font-weight: 600;
    }
    
    .btn-primary:hover {
        background-color: #ffffff;
        border-color: #c70d0d;
        font-weight: 600;
        color: #c70d0d;
    }
    
    .w-100 {
        width: 100% !important;
    }
    
    .chat-form .btn {
        padding: 12px 10px;
    }
    
    .Message-sent-type {
        display: flex;
        justify-content: flex-start;
    }
    
    .Message-sent {
        display: flex;
        justify-content: flex-start;
    }
    
    .Message-response {
        display: flex;
        justify-content: flex-end;
    }
    
    .Sent-main {
        box-sizing: border-box;
        padding: 0.5rem 1rem;
        margin: 1rem;
        background: #c0cde0;
        border-radius: 1.125rem 1.125rem 1.125rem 0;
        min-height: 2.25rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 66%;
        box-shadow: 0 0 2rem rgb(0 0 0 / 8%), 0rem 1rem 1rem -1rem rgb(0 0 0 / 10%);
        line-height: 17px;
    }
    
    .Response-main {
        box-sizing: border-box;
        padding: 0.5rem 1rem;
        margin: 1rem;
        border-radius: 1.125rem 1.125rem 0 1.125rem;
        background: #3b444d;
        color: #ffffff;
        min-height: 2.25rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 66%;
        box-shadow: 0 0 2rem rgb(0 0 0 / 8%), 0rem 1rem 1rem -1rem rgb(0 0 0 / 10%);
        line-height: 17px;
    }
    
    .ml-2 {
        margin-left: 1.1rem;
    }
    
    .time_r1 {
        display: flex;
        justify-content: flex-start;
        margin-left: 1.1rem;
    }
    
    .Name_R,
    .time_r {
        display: flex;
        justify-content: flex-end;
        margin-right: 1.1rem;
    }
    
    .Name_R {
        margin-top: .8rem;
    }
    
    .Name_R .text-3xs {
        color: #4d607c;
    }
    
    .Name_L {
        display: flex;
        justify-content: flex-start;
        margin-left: 1.1rem;
        margin-top: .8rem;
    }
    
    .text-gray-500 {
        --tw-text-opacity: 1;
        color: rgba(107, 114, 128, var(--tw-text-opacity));
    }
    
    .text-2xs {
        font-size: .8rem;
    }
    
    .Name_L .text-3xs {
        color: #333333;
    }
    
    .text-3xs {
        font-weight: 700;
        font-size: 1rem;
        color: #333333;
    }
    
    .mt-1 {
        margin-top: .25rem;
    }
    
    .form-inline {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
    }
    
    .mx-sm-3 {
        width: 60%;
        margin-left: 1rem !important;
    }
    
    .message-input {
        background: none;
        border: none;
        outline: none !important;
        resize: none;
        color: #fff;
        font-size: 12px;
        height: 17px;
        margin-right: 12px;
        padding-right: 35px;
        width: 201px;
    }
    
    .message-input::placeholder {
        color: #ffff;
        /* Firefox */
    }
    
    .message-submit:hover {
        background: #da2b1d;
        color: #fff;
    }
    
    .message-submit {
        cursor: pointer;
        border: none;
        position: absolute;
        z-index: 1;
        top: 9px;
        right: 10px;
        color: #d10812;
        background: #f7f7f7;
        font-size: 12px;
        text-transform: uppercase;
        line-height: 1;
        padding: 10px 20px;
        outline: none !important;
        transition: background 0.2s ease;
    }
    
    .chat_hed {
        color: #da2a1c;
        text-align: center;
        width: 90%;
        font-weight: 700;
    }
    
    .close_chat:hover {
        border-radius: 17%;
        background: #da2a1b;
        color: #c70d0d;
    }
    
    .close_chat:hover svg {
        stroke: #c0cde0;
    }
    
    .close_chat {
        width: 30px;
        height: 30px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    /* typing */
    
    .agent-type-f {
        width: 100%;
        background: #ffff;
    }
    
    .agent-type-f .Message-sent {
        padding-left: 12px;
    }
    
    @keyframes agent_typing {
        0%,
        75%,
        100% {
            transform: translate(0, 0.25rem) scale(0.9);
            opacity: 0.5;
        }
        25% {
            transform: translate(0, -0.25rem) scale(1);
            opacity: 1;
        }
    }
    
    .typing-1 {
        -webkit-animation: agent_typing 3s infinite;
        animation: agent_typing 3s infinite;
    }
    
    .typing-2 {
        -webkit-animation: agent_typing 3s 250ms infinite;
        animation: agent_typing 3s 250ms infinite;
    }
    
    .typing-3 {
        -webkit-animation: agent_typing 3s 500ms infinite;
        animation: agent_typing 3s 500ms infinite;
    }
    
    .agent_typing {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        margin-right: 0rem;
        box-sizing: border-box;
        background: #d10812;
        border-radius: 50%;
    }
    /* typing end */