/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    display: grid;
    height: 100vh;
    place-items: center;
    overflow: hidden;
}

::-webkit-scrollbar{
    width: 3px;
    border-radius: 25px;
}

::-webkit-scrollbar-track{
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb{
    background: #ddd;
}

::-webkit-scrollbar-thumb:hover{
    background: #ccc;
}

.wrapper{
    width: 100vw;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid lightgrey;
    border-top: 0px;
    position: relative;
    overflow:hidden;
}

.mini-wrapper{
    max-width: 450px;
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    height: 50%;
}

.wrapper .title, .mini-wrapper .title{
    position: relative;
    background: #0170b9;
    color: #fff;
    font-size: 20px;
    line-height: 55px;
    height: 59px;
}

.mini-wrapper .title{
    cursor: pointer;
}


.operator-btn{
    height: 35px;
    width: 35px;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 22px;
    line-height: 4.7vh;
    border-radius: 24px;
    cursor: pointer;
}

.operator-btn.inside{
    bottom: 50% !important;
    left: 18px !important;
    transform: translateY(50%);
}

.operator-btn.inside .operator{
    right: none;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
}

.operator-active{
    display: none;
}

.title img{
    width: 59px;
    position: absolute;
    margin: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.wrapper .form, .mini-wrapper .form{
    padding: 20px 15px;
    min-height: calc(100% - 186px);
    max-height: calc(100% - 186px);
    overflow-y: auto;
}

.wrapper .form .inbox, .mini-wrapper .form .inbox{
    width: 100%;
    display: flex;
    align-items: baseline;
}

.wrapper .form .user-inbox, .wrapper .form .user-spinner-box, .mini-wrapper .form .user-inbox, .mini-wrapper .form .user-spinner-box{
    justify-content: flex-end;
    margin: 10px 0;
    position: relative;
}

.wrapper .form .bot-inbox, .wrapper .form .bot-spinner-box, .wrapper .form .user-spinner-box, .mini-wrapper .form .bot-inbox, .mini-wrapper .form .bot-spinner-box, .mini-wrapper .form .user-spinner-box{
    position: relative;
    margin-bottom: 36px;
}

.wrapper .form .bot-inbox .icon, .wrapper .form .bot-spinner-box .icon, .mini-wrapper .form .bot-inbox .icon, .mini-wrapper .form .bot-spinner-box .icon{
    left: 1.4vw;
    border: 1px solid #0170b9;
}

.wrapper .form .user-inbox .icon, .wrapper .form .user-spinner-box .icon, .mini-wrapper .form .user-inbox .icon, .mini-wrapper .form .user-spinner-box .icon{
    right: 1.4vw;
    border: 1px solid #E8EBEB;
}

.wrapper .form .inbox .icon, .mini-wrapper .form .inbox .icon{
    height: 7.2vw;
    width: 7.2vw;
    line-height: 7.2vw;
    text-align: center;
    border-radius: 50%;
    background: #ededf7;
    position: absolute;
    top:-4.5vw;
}

.wrapper .form .inbox img, .mini-wrapper .form .inbox img{
    background: white;
    vertical-align: middle;
    width: 125px;
    height: 125px;
    object-fit: cover;
}

.wrapper .form .inbox .msg-header, .img-header, .mini-wrapper .form .inbox .msg-header, .img-header{
    max-width: 77vw;
}

.form .inbox .msg-header > p{
    font-size: 3.3vw;
    text-align: right;
    direction: rtl;
    margin-bottom: 0;
}

.form .user-inbox .msg-header > p{
    padding: 1.5vw 3vw 1.5vw 3vw;
}

.form .bot-inbox .msg-header > p{
    padding: 1.5vw 3vw 1.5vw 3vw;
}

.bot-inbox .msg-header p{
    white-space: pre-wrap;
}

.form .inbox .msg-header > div p{
    padding: 0 28px;
    font-size: 3.3vw;
    text-align: right;
    direction: rtl;
    margin-bottom: 0;
}

.form .inbox .msg-header input{
    font-size: 3.3vw;
    text-align: right;
    direction: rtl;
    margin: 16px;
}

.form .user-spinner-box .msg-header .loader{
    padding-left: 15vw;
}

.form .bot-inbox .msg-header p{
    color:black;
    border-radius: 3.3vw;
}

.form .bot-inbox .msg-header > div, .form .bot-spinner-box .msg-header .loader{
    color: black;
    border-radius: 3.3vw;
}

.form .bot-inbox .msg-header > div{
    padding: 10px 0;
}

.form .user-inbox .msg-header, .form .user-spinner-box .msg-header{
    background: rgba(1, 112, 185, 0.9);
    border: 1px solid #0170b9;
    border-radius: 3.3vw;
}

.form .bot-inbox .msg-header, .form .bot-spinner-box .msg-header{
    background: white;
    border: 1px solid #0170b9;
    border-radius: 3.3vw;
}

.form .user-inbox .msg-header p, .form .user-spinner-box .msg-header .loader{
    color: white;
    display: inline-block;
}

.form .user-spinner-box .msg-header .loader{
    padding: 8px 51px 36px 57px
}

.form .user-inbox .msg-header img, .form .user-spinner-box .msg-header img{
    padding: 2px;
    border: 1px solid gray;
}

.wrapper .form .user-inbox .msg-header img, .wrapper .form .user-spinner-box .msg-header img{
    width: 6.6vw;
    height: 6.6vw;
}

.mini-wrapper .form .msg-header img{
    width: 100%;
    height: auto;
}

.wrapper .form .inbox .icon img, .mini-wrapper .form .inbox .icon img{
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }

.interaction-tools{
    display: flex;
    position: absolute;
    bottom: 0;
    height: 70px;
    width: 100%;
    background: white;
    border-radius: 0 0 5px 5px;
}

.interaction-buttons{
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
    gap: 10px;
    padding: 10px;
    border: 1px solid #dadce0;
    width: 49%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 19px;
    font-size: 24px;
}

.interaction-buttons i{
    cursor: pointer;
}

.interaction-buttons span{
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 18px 0;
    font-size: 3.3vw;
}

.interaction-tools.disabled{
    display: none !important;
}

.interaction-buttons i{
    text-align: center;
}

.interaction-buttons img{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.wrapper .interaction-tools .main, .mini-wrapper .interaction-tools .main{
    height: 5.8vh;
    width: 100%;
    position: relative;
}

.shortcut{
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: 30% 30% 30%; /*Make the grid smaller than the container*/
    gap: 10px;
    padding: 10px;
    position: absolute;
    bottom: 80px;
    width: 100%;
    background: white;
    border-radius: 0 0 5px 5px;
}

.shortcut.disabled{
    display: none !important;
}

.shortcut div{
    width: 100%;
    border-radius: 19px;
    border: 1px solid #dadce0;
    line-height: 50%;
    text-align: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 18px 0;
    font-size: 3.3vw;
}

.mini-wrapper .shortcut div{
    font-size: 14px !important;
}

.recorder-btn{
    cursor: pointer;
}

.recorder-btn img{
    position: absolute;
    top: 50%;
    margin-top: -12px;
    margin-left: -12px;
    max-height: 4.5vh;
}

.recorder-btn-active{
    display: none;
    position: relative;
    top:0;
    line-height: 9.4vh;
    text-align: center;
    cursor: pointer;
}

.recorder-btn-active .edge{
    width: auto;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.recorder-btn-active .microphone{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.keyboard-btn{
    cursor: pointer;
}

.feedback{
    background: #ededf7;
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 3.3vw 3.3vw 0 0;
    font-size: 3.3vw;
    display: none;
}

.feedback p{
    padding: 0;
    margin: calc((50px - 3.3vw)/2) 1.5vw;
}

.feedback span{
    width: 30px;
    height: 30px;
    display: inline-block;
    background: white;
    border-radius: 50%;
    position: relative;
    margin: 10px 1vw;
    line-height: 30px;
    text-align: center;
}

.feedback span i{
    vertical-align: middle;
}

.wrapper .typing-field, .mini-wrapper .typing-field{
    display: none;
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    background: #ededf7;
    border-radius: 17px 17px 0 0;
    bottom: 0;
    position: absolute;
    padding: 2px;
}

.wrapper .typing-field input, .mini-wrapper .typing-field input{
    height: 100%;
    width: 80%;
    outline: none;
    border: 1px solid transparent;
    padding: 0 15px 0 80px;
    border-radius: 24px;
    font-size: 15px;
    background: #fff;
    text-align: right;
    direction: rtl;
    transition: all 0.3s ease;
}

.typing-field input::placeholder{
    color: #999999;
    transition: all 0.3s ease;
}

.typing-field input:focus::placeholder{
    color: #bfbfbf;
}

.wrapper .typing-field .send-btn, .mini-wrapper .typing-field .send-btn{
    width: 16%;
    height: 100%;
    background-color: white;
    border-radius: 24px;
    position: relative;
}

.wrapper .typing-field .send-btn svg, .mini-wrapper .typing-field .send-btn svg{
    fill: #dfdfdf;
    left: 50%;
    position: absolute;
    margin-left: -12px;
    top: 50%;
    margin-top: -16px;

}

.wrapper .typing-field input:valid ~ .send-btn, .mini-wrapper .typing-field input:valid ~ .send-btn{
    opacity: 1;
    pointer-events: auto;
}

.loader {
    width:12px;
    height: 12px;
    text-align: right;
    direction: rtl;
}

.bot-spinner-box .loader{
    padding: 1vh 10vw 4vh 11vw;
}

.top-bar {
    background-color:#0170b9; float:left;
    margin-right:2px; margin-bottom:3px; width:4px; height:8px; margin-top: 6px;
    border-radius: 33%;
    /* Set the animation properties */
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: loadingbar-top;
}

.user-spinner-box .top-bar, .user-spinner-box .bottom-bar{
    background-color: white !important;
}

.bottom-bar {
    background-color:#0170b9; float:left;
    margin-right:2px; margin-bottom:6px; width:4px; height:4px; margin-top: 0;
    border-radius: 33%;
    /* Set the animation properties */
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: loadingbar-bottom;
}

/* Delay both the second and third bar at the start */
.loader .top-bar:nth-child(2) { animation-delay: 0.1s; }
.loader .top-bar:nth-child(3) { animation-delay: 0.2s; }

.loader .bottom-bar:nth-child(2) { animation-delay: 0.1s; }
.loader .bottom-bar:nth-child(3) { animation-delay: 0.2s; }

/* The actual animation */
@keyframes loadingbar-top {
     0% { margin-bottom:2px; margin-top: 7px;}
    10% { margin-bottom:1px; margin-top: 8px; }
    20% { margin-bottom:0px; margin-top: 9px; }
    30% { margin-bottom:1px; margin-top: 8px;}
    40% { margin-bottom:2px; margin-top: 7px; }
    100% { margin-bottom:3px; margin-top: 6px;}
}

@keyframes loadingbar-bottom {
    0% { height:4px; }
   10% { height:2px;}
   20% { height:0px;}
   30% { height:2px;}
   40% { height:3px;}
   100% { height:4px;}
}

.outer-card{
    border-radius: 7px;
    width: 20vw;
    height: 15vw;
    border: 1px solid #0170b9;
    background:#0170b9;
    max-width: 250px;
    max-height: 170px;
}

.inner-card{
    border-radius: 7px;
    width: calc(20vw - 2px);
    height: calc(15vw - 6px);
    border: 1px solid #0170b9;
    background: white;
    padding-top: 2.0vw;
    max-width: 248px;
    max-height: 164px;
}

.card-img{
    border: 2px solid green;
    width: 3.5vw !important;
    height: 3.5vw !important;
}

.card-icon{
    width: 3.5vw !important;
    height: 3.5vw !important;
    left: 1.4vw;
    line-height: 3.5vw;
    text-align: center;
    border-radius: 50%;
    background: #ededf7;
    position: absolute;
    top:-1.5vw;
}

.name{
    font-size: 2.8vw;
}

.amount{
    font-size: 2.8vw;
    color: #848885;
}

.card-inbox{
    margin-top: 2vh;
    padding-top: 2vw;
    overflow-x: scroll;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.card-inbox::-webkit-scrollbar {  /* Chrome, Safari */
    width: 0px;
    background: transparent;
    display: none;
  }

.card-inbox .msg-header{
    float: left;
    border: 0! important;
    position: relative;
}

.cancel{
    position: absolute;
    height: 40px;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.send-tel, .send-verif{
    background: white;
    border-radius: 5px;
    padding: 5px;
    margin-left: 16px;
    font-size: 3.3vw;
}

.file-upload-field{
    display: none;
}

.popup {
    width: 33.333333%;
    padding: 15px;
    left: 0;
    text-align: right;
    margin-left: 33.333333%;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: white;
    position: absolute;
    top: -100%;
    box-shadow: 5px 5px 5px #000;
    z-index: 10001;
}
    .overlay {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 10000;
}

audio{
    border-radius: 22px;
}

.open-button {
    background-color: #0170b9;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
  }


@media screen and (min-width:600px) {
    .inbox p, .form .inbox .msg-header input, .shortcut div, .send-tel, .send-verif {font-size: 2.5vw !important;}
    .wrapper .form .inbox .icon{width: 35px !important;height: 35px !important;line-height: 35px;top:-19px;}
    .wrapper .form .inbox .icon img{width: 32px !important;height: 32px !important;}
}

@media screen and (min-width:700px) {
    .inbox p, .form .inbox .msg-header input, .shortcut div, .send-tel, .send-verif {font-size: 2vw !important;}
    .form .user-inbox .msg-header > p{padding: 1vw 1.5vw 1vw 1.5vw;}
    .form .bot-inbox .msg-header > p{padding: 1vw 2vw 1vw 2vw;}
    .form .inbox .msg-header input{ margin: 30px 30px 30px 16px}
    .feedback{font-size: 2.5vw !important;}
    .feedback p {margin: calc((50px - 2.5vw)/2) 1.5vw;}
    .user-inbox .msg-header, .bot-inbox .msg-header, .img-header{ max-width: 500px !important;}
}

@media (min-width: 768px) {
    .popup {
      width: 66.66666666%;
      margin-left: 16.666666%;
    }
}


@media screen and (min-width:870px) {
    .inbox p, .form .inbox .msg-header input, .shortcut div, .send-tel, .send-verif { font-size:18px !important; }
    .feedback { font-size:18px !important; }
    .feedback p{margin: calc((50px - 20px)/2) 1.5vw;}
    .name, .amount{ font-size:24px !important; }
}

@media (min-width: 992px) {
    .popup {
      width: 50%;
      margin-left: 25%;
    }
}

@media screen and (min-width:1024px) {
    .form .user-inbox .msg-header > p{padding: 0.8vw 1vw 0.8vw 1vw;}
    .form .bot-inbox .msg-header > p{padding: 0.8vw 1.3vw 0.8vw 1.3vw;}
    .interaction-tools .main{height: 3.8vh}
    .operator-btn{left: 39px;}

}

@media screen and (min-width:1050px) {
    .name, .amount{ font-size:28px !important; }
}

@media (min-width: 1200px) {
    .popup {
      width: 33.33333%;
      margin-left: 33.33333%;
    }
}

@media screen and (min-width:1400px) {
    .form .user-inbox .msg-header > p{padding: 0.5vw 1vw 0.5vw 1vw;}
    .form .bot-inbox .msg-header > p{padding: 0.5vw 1.2vw 0.5vw 1.2vw;}
}

@media screen and (min-width:1600px) {
    .form .bot-inbox .msg-header > p{padding: 0.5vw 0 0.5vw 0;}
    .form .bot-inbox .msg-header > p{padding: 0.5vw 1.2vw 0.5vw 1.2vw;}
}