.chat-bat-wrapper {
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    /* background-color: #ffffff; */

}
.lftSegment{
	width:65%;
	background:#f30;
}
.rgtSegment{
	width:35%;
	background:yellow;
}

    .chat-bat-wrapper .chat-bot {
        display: flex;
        justify-content: flex-end;
        height: 100px;
    }

        .chat-bat-wrapper .chat-bot .chat-bot-btn {
            width: 35px;
            height: 35px;
            border-radius: 35px;
            background: #583055;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 22px;
            color: #ffffff;
            position: relative;
            animation-name: stretch;
            animation-duration: 1.5s;
            animation-timing-function: ease-out;
            animation-delay: 0;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-play-state: running;
            cursor:pointer;
        }

            .chat-bat-wrapper .chat-bot .chat-bot-btn .img {
                width: 21px;
                height: 21px;
                border-radius: 45px;
                position: absolute;
                /* background: #ffffff; */
                color: rgba(0, 112, 60, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .chat-bat-wrapper .chat-bot .chat-bot-btn .img img {
                    width: 100%;
                }

    .chat-bat-wrapper .chat-modal {
        height:56em;
        overflow: hidden;
        margin-bottom: 0px;
        background-color: #ffffff;
        z-index: 1;
	}
    .msg-content-bot div table{
        width: 100% !important;
    }
        .chat-bat-wrapper .chat-modal .chat-header {
            background-image: linear-gradient(to right, #005B84, #3094B4);
			color: #ffffff;
			padding: 13px 10px 14px 10px;
			display: flex;
			align-items: center;
			position: relative;
        }

            .chat-bat-wrapper .chat-modal .chat-header img {
                position: absolute;
				width: 42px;
				left: 6px;
            }

            .chat-bat-wrapper .chat-modal .chat-header .title {
                font-size: 14px;
                font-weight: 600;
                margin-left: 40px;
            }

            .chat-bat-wrapper .chat-modal .chat-header .close-button {
                position: absolute;
                top: 9px;
                right: 5px;
                color: white;
                cursor: pointer;
            }

            .chat-bat-wrapper .chat-modal .chat-header .maxi-button {
                position: absolute;
                top: 15px;
                right: 30px;
                color: white;
                cursor: pointer;
            }
            .chat-bat-wrapper .chat-modal .chat-header .clear-button {
                position: absolute;
                top: 15px;
                right: 43px;
                color: white;
                cursor: pointer;
            }
            .chat-bat-wrapper .chat-modal .chat-header .audio-mute {
                position: absolute;
                top: 15px;
                right: 80px;
                color: white;
                cursor: pointer;
            }

            .chat-bat-wrapper .chat-modal .chat-header .close-button i,
            .chat-bat-wrapper .chat-modal .chat-header .maxi-button i,
            .chat-bat-wrapper .chat-modal .chat-header .audio-mute i,
            .chat-bat-wrapper .chat-modal .chat-header .clear-button i {
                font-size: 17px;
            }

        .chat-bat-wrapper .chat-modal .chat-body {
            height: calc(100% - 98px);
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
			/*background: url('https://marstonholdings.azurewebsites.net/wp-content/uploads/2021/01/texbg.jpg') repeat;*/
			background: #f5f5f5;
        }

            .chat-bat-wrapper .chat-modal .chat-body .bot-msg {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                margin-top: 1.5em;
                margin-bottom: 15px;
				padding: 15px 0px 30px 0px;
            }

            .chat-bat-wrapper .chat-modal .chat-body .user-msg {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                margin-top: 1.5em;
                margin-bottom: .5rem;
            }



            .chat-bat-wrapper .chat-modal .chat-body .msg-content {
                flex: 0 0 auto;
				color: #ffffff;
				padding: 5px 15px 6px 15px;
				max-width: calc(100% - 105px);
				font-size: 13px;
				line-height: 22px;
				display: inline-table;
            }

            .chat-bat-wrapper .chat-modal .chat-body .msg-content.msg-content-bot {
                border-radius: 0px 9px 9px 9px;
				margin-left: 10px;
				background-color: #ffffff;
				position: relative;
				border-bottom: solid 1px #d2d2d2;
				border-right: solid 1px #d2d2d2;
                display: inline-block;;
            }

                .chat-bat-wrapper .chat-modal .chat-body .msg-content.msg-content-user {
                    border-radius: 9px 0px 9px 9px;
					margin-right: 10px;
					background-color: #3b578c;
					position: relative;
                }

                .chat-bat-wrapper .chat-modal .chat-body .msg-content.msg-content-bot .ctime {
                    position: absolute;
                    bottom: -20px;
                    color: #272727;
                    font-size: 10px;
                    width: 100%;
                    left: 3px;
                    text-align: left;
                    font-weight: 400;
                }

                .chat-bat-wrapper .chat-modal .chat-body .msg-content.msg-content-user .ctime {
                    position: absolute;
                    bottom: -20px;
                    color: #969191;
                    font-size: 10px;
                    width: 80px;
                    right: 3px;
                    text-align: right;
                    font-weight: 400;
                }

                

                .chat-bat-wrapper .chat-modal .chat-body .tags-content {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    margin-bottom: .5rem;
                }

                .chat-bat-wrapper .chat-modal .chat-body .tags-content ul {
                    padding: 0;
                    margin-bottom: 0;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .chat-bat-wrapper .chat-modal .chat-body .tags-content li {
                    list-style: none;
					flex: 0 0 auto;
					background-color: #ffffff;
					border-radius: 6px;
					padding: 10px 15px;
					margin: 5px 25px;
					cursor: pointer;
					width: calc(100% - 50px);
					text-align: left;
					position: relative;
					font-size: 13px;
					box-shadow: 3px 3px 4px 2px rgba(0,0,0,0.045);
					-webkit-box-shadow: 3px 3px 4px 2px rgba(0,0,0,0.045);
					-moz-box-shadow: 3px 3px 4px 2px rgba(0,0,0,0.045);
	            }
                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li::after {
						
					content: "...";
					font-weight: 900;
					color: #2b749b;
					margin-left: 4px;
                    }
                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li:hover::after {
                        color: #ffffff;
                    }
                    
                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li .la-question-circle:before {
                        margin-left: -27px;
                        margin-right: 5px;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        display: flex;
                        align-items: center;
                        font-size: 21px;
                    }
                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li i {
                        color: #2b749b;
						margin-right: 10px;
                    }

                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li:hover i {
                        color: #ffffff;
                    }

                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li:hover {
                        background:#12203a;
                        color: #ffffff;
                    }

                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li:first-child {
                        margin-top: 0;
                    }

                    .chat-bat-wrapper .chat-modal .chat-body .tags-content li:last-child {
                        margin-bottom: 0;
                    }

					.chat-bat-wrapper .chat-modal .chat-body .bot-icon-img {
					width: 48px;
					border-radius: 50%;
					text-align: left;
					margin: 5px 0px 0px 15px;
					background: rgb(11 22 43);
					box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.045);
					position: relative;

					}

                .chat-bat-wrapper .chat-modal .chat-body .bot-icon-img img {
						filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.35));
						-webkit-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.35));
						-moz-filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.35));
                }

        .chat-bat-wrapper .chat-modal .chat-footer {
            height: auto;
            color: #ffffff;
            padding: .5rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-top: 1px solid #EAEAEA;
        }

            .chat-bat-wrapper .chat-modal .chat-footer .text-type {
                flex: 1 1 auto;
            }

            .chat-bat-wrapper .chat-modal .chat-footer .form-group {
                margin-bottom: 0;
            }

                .chat-bat-wrapper .chat-modal .chat-footer .form-group .form-control {
					border:none !important;
                    padding:10px 20px;
                    width: 100%;
                    height: 55px;
					box-shadow:none !important;
                }
                    .chat-bat-wrapper .chat-modal .chat-footer .form-group .form-control:hover,
                    .chat-bat-wrapper .chat-modal .chat-footer .form-group .form-control:focus {
                        border: none;
                        outline: -webkit-focus-ring-color auto 0px;
                    }

            .chat-bat-wrapper .chat-modal .chat-footer .send {
                height: 31px;
                width: 31px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 9px;
                cursor: pointer;
            }

                .chat-bat-wrapper .chat-modal .chat-footer .send img {
                    height: 31px;
                }
.greeting {
	width: calc(100% - 50px);
    text-align: center;
    line-height: 1.5;
    font-weight: 400;
    color: #000;
    font-size: 14px;
	background-color: #ffffff;
    margin: 20px 25px 15px 25px;
    padding: 10px 30px;
    box-shadow: 3px 3px 4px 2px rgb(0 0 0 / 5%);
    -webkit-box-shadow: 3px 3px 4px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: 3px 3px 4px 2px rgba(0,0,0,0.045);
    border-radius: 6px;
    cursor: pointer;
}
.greeting span{
	font-weight: 300;
	font-size: 18px;
}



.chat-modal-show {
    display: block !important;
}

.bounce-in-top {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both;
}
/*
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #583055;
}*/
.divChatWindow {
    padding: 20px;
}
.divChatWindow-scroll {
    overflow-y: scroll;
    height: 100%;
    padding: 20px;
}
.bot-icon{
	border: solid 2px #fff;
	width:50px;
	height: 50px;
    border-radius: 25px;
	padding: 5px;
    background: #fff;
    box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.08);
	-webkit-box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.08);
	-moz-box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.08);
}

@keyframes stretch {
    0% {
        transform: scale(1);
        background-color: rgba(88, 48, 85, 0.35);
        border-radius: 100%;
    }

    50% {
        background-color: rgba(88, 48, 85, 0.55);
    }

    100% {
        transform: scale(1.5);
        background-color: rgba(88, 48, 85, 1);
        border-radius: 100%;
    }
}



@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
.slide-rotate-hor-t-bck {
    -webkit-animation: slide-rotate-hor-t-bck 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: slide-rotate-hor-t-bck 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes slide-rotate-hor-t-bck {
    0% {
        -webkit-transform: translateY(0) translateZ(0) rotateX(0deg);
        transform: translateY(0) translateZ(0) rotateX(0deg);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }

    100% {
        -webkit-transform: translateY(-30px) translateZ(-46px) rotateX(-90deg);
        transform: translateY(-30px) translateZ(-46px) rotateX(-90deg);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }
}

@keyframes slide-rotate-hor-t-bck {
    0% {
        -webkit-transform: translateY(0) translateZ(0) rotateX(0deg);
        transform: translateY(0) translateZ(0) rotateX(0deg);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }

    100% {
        -webkit-transform: translateY(-30px) translateZ(-46px) rotateX(-90deg);
        transform: translateY(-30px) translateZ(-46px) rotateX(-90deg);
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }
}


/*Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 786px) {
    .chat-bat-wrapper {
        width: 100%;
        height: 100%;
        right:0;
        left:0;
        bottom:0;
        top:0;
    }
        .chat-bat-wrapper .chat-modal {
            margin-bottom: -100px;
        }

        .chat-bat-wrapper .chat-modal {
            height: 100%;
        }
    .divChatWindow-scroll {
        height: 100%;
    }

}
@media screen and (max-width: 992px) {
    .chat-bat-wrapper .chat-modal .chat-body .bot-icon-img img {
        width: 55px;
    }
}