.sc-chat-user{
    background-color: #9429c9;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    text-align:right;
    border-radius: 30px 0 25px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.sc-chat-system{
    background: #1c9dea;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 0 25px 25px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
}
.sp_click{
    border-radius: 30px !important;
    border-color: #9429c9;
    font-size: 12px;
    padding: 2px 5px !important;
}
.sp_click:hover{
    background: #9429c9 !important;
    color: #fff !important;
}

.lng_click{
    border-radius: 30px !important;
    border-color: #9429c9;
    font-size: 12px;
    padding: 2px 5px !important;
}
.lng_click:hover{
    background: #9429c9 !important;
    color: #fff !important;
}
.active{
    background: #9429c9 !important;
    color: #fff !important;
}

.sc-button{
    color: #000;
    background-color: #fff;
    border-color: #9429c9;
    border-radius: 30px;
}
.sc-button:hover{
    color: #FFF;
    background-color: #9429c9;
    border-color: #9429c9;
    border-radius: 30px;
}
.btn-voice{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.btn-voice:hover{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.btn-voice:focus{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.btn-voice:focus-visible{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.btn-voice:active{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
    border-color: #fff !important;
}


.kysubmit{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.kysubmit:hover{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.kysubmit:focus{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.kysubmit:active{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
    border-color: #fff !important;
}

.kysubmit:focus-visible{
    padding: 0px;
    background: #fff;
    color: #000;
    font-size: 18px;
    padding-left: 0px !important;
}
.slanguageh{
    cursor: pointer !important;
}

@media only screen and (max-width: 997px) {
    .mbl-100 {
        width: 100% !important;
    }
}
h4, .h4 {
    font-size: 18px !important;
}
.loader {
  width: 35px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#FFF 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    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%}
}

.cloader{background: #AD87E4;
    color: #fff;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 0 25px 25px 30px;
    width: 20%;}
    
    
.message-container {
    display: flex;
    flex-direction: column;
}

.message {
    padding: 10px 20px;
    margin: 10px;
    max-width: 70%;
    word-wrap: break-word;
    display: flex;
    align-items: center;
}

.sender-message {
    background-color: #AD87E4;
    color: #FFF;
    align-self: flex-start;
    border-radius: 0 25px 25px 30px;
    display: block;
}

.receiver-message {
    background-color: #DECFF4;
    color: #000;
    align-self: flex-end;
    border-radius: 30px 0 25px 30px;
}