:root {
    --rai-chat-radius: 2em;
    --rai-chat-owner-bg: rgba(155,155,155,.25);
    --rai-chat-sender-bg: rgba(155,155,155,.15);
    --rai-chat-owner-color: #fff;
    --rai-chat-sender-color: #fff;
    --rai-chat-date-color: rgba(155,155,155,.7);
    --rai-chat-date-size: .7em;
    --rai-chat-primary-color: var(--mainColor);
    --rai-chat-secondary-color: #666;
    --rai-chat-success-color: #33aa33;
}
#rai-chat-container{
    width: 100%;
}
#rai-chat{
     display: flex;
    flex-direction: column;
}
#rai-chat .rai-chat-row > div{
    display: flex;
    flex-direction: row;
}
#rai-chat .rai-chat-row{
    /*margin-bottom: 15px;*/
    margin-bottom: 1em;
}
#rai-chat .rai-chat-row-head{
     text-wrap: nowrap;
}
#rai-chat .rai-chat-row .rai-chat-message{
   /*max-width: 70%;*/
   border-radius: var(--rai-chat-radius);
   background: var(--rai-chat-owner-bg);
   /*padding: 15px 25px;*/
   padding: 1em 1.2em;
   display: inline-block;
   max-width:90%;
}
#rai-chat .rai-chat-row .rai-chat-message-data{
    /*color: #000;*/
    /*font-weight: bold;*/   
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-message{
   border-top-right-radius: 0px;
   background: var(--rai-chat-owner-bg);
   color: var(--rai-chat-owner);
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-message{
   border-top-left-radius: 0px;
   background: var(--rai-chat-sender-bg);
   color: var(--rai-chat-sender);
}

#rai-chat .col{
    position: relative;
    width: 100%;
/*    padding-right: 15px;
    padding-left: 15px;*/
    padding-left: 1em;
    padding-right: 1em;
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-data{
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-data{
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-data ul{
    direction: rtl; 
    text-align: right; 
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-head .rai-chat-user-owner{
    /*display: none;*/
}
/*#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-head .rai-chat-user-img,*/
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-head .rai-chat-user-owner{
    display: none;
}
#rai-chat .rai-chat-user-box.hidden .rai-chat-user-img,
#rai-chat .rai-chat-user-box.hidden .rai-chat-user-nick{
    display: none !important;
}
/*#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-head .rai-chat-user-owner{
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-head .text-center{
    order: 2;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-head .rai-chat-user-owner{
    order: 3;
}*/

#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-data .rai-chat-button{
    border-top-left-radius: 0px !important;
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-message{
    text-align: left;
    border-top-left-radius: 0px;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-data .rai-chat-button{
    border-top-right-radius: 0px !important; 
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-message{
    text-align: right;
    border-top-right-radius: 0px;
}
#rai-chat .rai-chat-row-head,
#rai-chat .rai-chat-row .rai-chat-message .rai-chat-state{
    color: var(--rai-chat-date-color);
    font-size: var(--rai-chat-date-size);
}
#rai-chat .rai-chat-user-box{
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-user-box{
    justify-content: end;
}
#rai-chat .rai-chat-row .rai-chat-message .rai-chat-state .rai-chat-send,
#rai-chat .rai-chat-row .rai-chat-message .rai-chat-state .rai-chat-hour{
    display: inline-block;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-state{
     float: right;
}
#rai-chat .rai-chat-row .rai-chat-state{
    display: flex;
    flex-direction: row;
}
/*#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-state{
    margin-left: -14px;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-state{
    margin-right: -14px;
}*/
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-state .rai-chat-send{
    padding-right:4px;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-state .rai-chat-send{
    order: 2;
    padding-left:4px;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-state .rai-chat-hour{
    order: 1;
}
#rai-chat .rai-chat-state.received .rai-chat-send{
    opacity: 0;
}

#rai-chat .rai-chat-state.created .rai-chat-send{
    color: var(--rai-chat-secondary-color);
    opacity: 1;
} 
#rai-chat .rai-chat-state.received .rai-chat-send{
    color: var(--rai-chat-success-color);
    opacity: 1;
} 

#rai-chat .rai-chat-pulse{
    display: flex;
    justify-content: center;
    align-items: center;
    
    /*color: #fff;*/
}
/*#rai-chat .rai-chat-row .rai-chat-row-data .rai-chat-message-action{
    display: flex;
    flex-direction: column;
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-data .rai-chat-message-action{
    justify-content: flex-start;
}
#rai-chat .rai-chat-row.rai-chat-owner .rai-chat-row-data .rai-chat-message-action{
    justify-content: flex-end;
}*/
#rai-chat .rai-chat-pulse-docs{
  width: 30px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,var(--rai-chat-secondary-color) 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: rai_dots 1s infinite linear;
}
@keyframes rai_dots {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}
#rai-chat .rai-chat-button{
    font-size: 1em;
}
#rai-chat .rai-chat-button.btn.disabled{
/*    background-color: var(--mainColor);
    border-color: var(--mainColor);*/
    /*color: var();*/
    background-color: var(--rai-chat-secondary-color);
    /*border-color: #6c757d;*/
}

#rai-chat-form{
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
#rai-chat-form .rai-chat-row{   
    border-radius: var(--rai-chat-radius);
   background: var(--rai-chat-owner-bg);
   /*padding: 15px 25px;*/
   padding: 1em 1.2em;
   display: inline-block;
    /*color: #000;*/
   border-top-right-radius: 0px;
   background: var(--rai-chat-owner-bg);
   color: var(--rai-chat-owner);
}
#rai-chat-form #rai-chat-new-message{
    /*border: 0px;*/
    /*min-width: 300px;*/
    /*min-width: 50vw;*/
    /*min-width: 80%;*/
    max-width:100%;
} 
.custom-pulse-loading,
#rai-chat .rai-chat-message.rai-chat-pulse-loading{
    -webkit-animation: rai-pulse-loading 1s ease-in alternate infinite;
       -moz-animation: rai-pulse-loading 1s ease-in alternate infinite;
            animation: rai-pulse-loading 1s ease-in alternate infinite;
}
@keyframes rai-pulse-loading {
    0% {opacity:.3;}
    50% {opacity:1;}    
}
#rai-chat .rai-chat-user-owner{
    display: inline-block;
}
#rai-chat .rai-chat-user-img{
    width: 2em;
    height: 2em;
    border-radius: 50%;
    /*border: 1px solid var(--rai-chat-secondary-color);*/
    display: inline-block;
    opacity: .2;
}
#rai-chat .rai-chat-message-data img{
    /*max-width: 30%;*/
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-data .rai-chat-button.rai-chat-loading .rai-chat-pulse{
    float: right;
    padding: 4px;
    color: #fff;
    opacity: .8;
}
#rai-chat .rai-chat-row.rai-chat-sender .rai-chat-row-data .rai-chat-button .rai-chat-pulse-docs{
    --_g: no-repeat radial-gradient(circle closest-side,#fff 90%,#0000);
}
.btn-right-radius{
    border-top-right-radius: 0px;
}
.btn-left-radius{
    border-top-left-radius: 0px;
}
#rai-chat-send{
    padding: .2em .5em .3em .4em;
    font-size: 1.75em;
    /*line-height: 1.5;*/
    border-radius: var(--rai-chat-radius);
    border-top-right-radius: 0px;
}
#rai-chat-new-message{
    border: 0px;
    /*border-radius: 20px;*/
    border-radius: 1.3em;
    /*border-radius: var(--rai-chat-radius);*/
/*    padding: 15px;
    min-height: 50px;*/
    padding: 1em;
    min-height: 2em;
}