.modal {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;display: none;overflow: hidden;-webkit-overflow-scrolling: touch;outline: 0;}
.show {display: block !important;}
button.close, button.closeChat {
    -webkit-appearance: none;padding: 0;cursor: pointer;background: 0 0;border: 0}

.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    -ms-transform: translate(0,-25%);
    -o-transform: translate(0,-25%);
    transform: translate(0,-25%)
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5)
}

.modal-content-image {
    position: relative;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
}

.modal-header .close, .modal-header .closeChat {
    margin-top: -2px
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 768px) {
    .modal-dialog {
        width:600px;
        margin: 30px auto
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width:900px
    }
}

.collinai-chat .chat_logo{width: 110px;}
.modal.collinai-chat{z-index: 999999;}
.collinai-chat .modal-header{background-color: #E57E35; border-radius: 20px 20px 0px 0px;height: 65px;border-bottom: none;}
.collinai-chat  .modal-title{float: left;}
.collinai-chat  .btn-close{float: right;background: none;border: none; width: auto;}
.collinai-chat  .btn-close img{width: 35px;}
.collinai-chat .modal-content{border-radius:  20px;top: 100px;}
.collinai-chat .modal-content p{ padding-bottom: 7px;}
.collinai-chat .modal-body{padding: 15px;overflow-y: auto !important;height: 300px;margin-top: 0px;margin: 0px;width: 100%;background: #f3f3f3;}
.collinai-chat  .modal-dialog {width: 700px;}
.chat-bubble-ai.p-3 p{margin-bottom: 0px;}
.collinai-history .messages {margin-bottom: 12px;display: block;overflow: hidden;}
.collinai-chat .modal-footer{background: #f3f3f3;border-top: 0px;border-radius: 0px 0px 20px 20px;}
#collinaiChatForm{ width: 97%;background: #fff;border-radius: 50px;}
.chat-footer img{    width: 40px;    margin-left: -10px;}
.collinai-history   .chat-bubble-ai { font-family: 'Inter', sans-serif;background: #fff;border: none;color: #000000;max-width: 90%;padding: 10px 14px;border-radius: 12px;font-size: 16px;line-height: 24px;font-weight: 300;}
.collinai-history   .chat-bubble-user {font-family: 'Inter', sans-serif;background: #FFD5B7;padding: 8px 14px;color: #000000;align-self: flex-end;float: right;clear: both;max-width: 80%;padding: 10px 14px;border-radius: 12px;font-size: 16px;line-height: 24px;width: 80%;font-weight: 300;}
/* Input Section */
.chat-footer {   height: 60px; background: #f3f3f3;    display: block;padding: 0px;width: 100%;}
.chat-footer #collinaiChatMsg{width: 100%;font-family: 'Inter', sans-serif, sans-serif;font-size: 16px;line-height: 24px;font-weight: 300;}
.chat-footer input {flex: 1;border: none;outline: none;padding: 10px;border-radius: 20px;background: #fff;padding-left: 30px;color: #000;}
.chat-footer button {position: relative;top: -40px;bottom: 0px;border: none;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;}
.collinai-typing{  width: 100%; text-align: left;}
.typing {display: inline-block;font-size: 12px; font-family: 'Inter', sans-serif, sans-serif;color: #999;padding: 5px;}
.typing span {display: inline-block;animation: blink 1s infinite;font-size: 22px;color: #000;}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {0% { opacity: 0.2; }20% { opacity: 1; }100% { opacity: 0.2; }}
@media (max-width: 767px){
  .collinai-chat .modal-content {top: 40px;}
  .collinai-chat .modal-body{height: 280px;}
  .collinai-chat .modal-dialog {width: auto;}
  .collinai-history .chat-bubble-ai,.collinai-history .chat-bubble-user,.chat-footer #collinaiChatMsg{font-size: 14px;font-weight: 300;}
  .chat-footer img {margin-left: -6px;margin-top: -2px;}
}