@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{
    --bg-gray:#F0F0F3;
    --brand:#1565C0;
    --bg-white:#fff;
    --border: #8688A1;
    --black:#000;
    --keyboard:#EDEDED
}
body{
    margin: 0px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 15px;
    overflow: hidden;
}
.brand{color: var(--brand);}
.wrapper{
    background-color: var(--bg-gray);
    height: 100vh;
    overflow: hidden;
}
.logoWrapper{display: flex;align-items: center;justify-content: center;}
.logo{margin: 0 auto;}
.logoWrapper .bankLogo{}
.smallTittle{
    text-align: center;
    display: block;
    font-size: 22px;
    font-weight: 600;
    margin-top: 4px;
}
.welcomeText{
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 14px;
}

.header{
    background-color: #fff;
    padding: 10px 24px;
}
.headerLogo{display: flex;align-items: center;}
.headerLogo img{width: 41px;height: 41px;margin-right: 9px;}
.logoText{
    font-weight: 600;
    font-size: 16px;
}

.fixedWrapper{
    height: calc(100vh - 160px);
    border-top: 1px solid #8688A1;
    border-bottom: 1px solid #8688A1;
}
.footer{
    background-color: var(--bg-white);
    padding: 15px 24px 30px;
    display: flex;
    align-items: center;
   
}
.footer .btn.send{
    border: 0px;
    background-color: transparent;
    padding: 0px;
}
.footer .inputWrap{flex: 1;}

.footer .form-control{
    background-color: #F0F0F3;
    padding: 18px 16px;
    border: 1px solid #F0F0F3;
    border-radius: 8px;
    color: #000;
    flex-grow: 2;
    margin-right: 1rem;
}
.footer .form-control:focus{
    outline: 0px;
}
.footer .form-control::placeholder{
    color: rgb(13 18 23 / 60%);
}
.plus{
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5.41675V20.5834' stroke='%231565C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.41675 13H20.5834' stroke='%231565C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    height: 26px;
    width:26px;
    display: inline-block;
    margin-right: 12px;
}
.send{
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='42' height='42' rx='21' fill='%231565C0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.0482 19.3976L28.1887 24.9761C26.8777 28.9092 26.2221 30.8758 25.2609 31.4347C24.3464 31.9663 23.2169 31.9663 22.3024 31.4347C21.3411 30.8758 20.6856 28.9092 19.3745 24.9761C19.164 24.3445 19.0588 24.0288 18.8821 23.7648C18.7109 23.509 18.4911 23.2893 18.2353 23.1181C17.9714 22.9414 17.6556 22.8361 17.0241 22.6256C13.0909 21.3146 11.1243 20.659 10.5655 19.6977C10.0338 18.7832 10.0338 17.6538 10.5655 16.7393C11.1243 15.778 13.0909 15.1225 17.0241 13.8114L22.6026 11.9519C27.4758 10.3275 29.9124 9.51532 31.1986 10.8015C32.4848 12.0877 31.6726 14.5244 30.0482 19.3976ZM22.1329 19.8108C21.8174 19.4917 21.8202 18.9773 22.1393 18.6617L26.7007 14.1506C27.0197 13.8351 27.5342 13.8379 27.8497 14.157C28.1652 14.476 28.1624 14.9905 27.8433 15.306L23.2819 19.8171C22.9629 20.1327 22.4484 20.1298 22.1329 19.8108Z' fill='white'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    height: 42px;
    width:42px;
    display: inline-block;
}
.chatWrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0px 24px;
}
.message-template{
    overflow: auto;
}
.message-template::-webkit-scrollbar {
    width: 0px;
}
/* img{
    width:100%
} */
ul{
    padding: 0px;
    margin: 0px 0px 15px 0px;
    list-style-type: none;
}
ol{
    padding: 0px 16px;
}
ol li{margin-bottom: 12px;}
ul.message-template-blur-listing li{
    margin-bottom: 7px;
    color: rgb(0 0 0 / 62%);
}
.message-template-listing{
    margin: 25px 0px 0px;
}
.message-template-listing li{
    color: #000;
    margin-bottom: 4px;
}
.choose-lang{
    display: flex;
}
.choose-lang li{margin-right: 10px;}
.message-template-simple{
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin-bottom: 15px;
    background: #FFF;
    border-radius: 1.125rem 1.125rem 1.125rem 0;
    min-height: 2.25rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 66%;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.10);
    /* box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1); */
}
.message-template-simple.message-template-brand{
    margin: 1rem 0rem 1rem auto;
    border-radius: 1.125rem 1.125rem 0 1.125rem;
    background-color: var(--brand);
    color: white;
}
.lang{
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background: #FFF;
    border-radius: 25px;
    min-height: 2.25rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 66%;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
}
.message-template-simple.message-template-2-column{display: flex;align-items: baseline;}
@media (max-width:480px){
    .message-template-simple.message-template-2-column{
        max-width: 100%;
    }
}
.message-template-2-column .message-template-name{
    margin-right: 60px;
}

.message-template-2-column .message-template-name{
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
}
.message-template-content-wrapper{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.message-template-content-wrapper .message-template-simple-text{
    display: block;
}
.message-template-content-wrapper .message-template-simple-type{font-size: 13px;}
.message-template-2-column-number{
    display: flex;
    flex-direction: column;
    align-items: end;
}
@media (max-width:480px){
    .message-template-simple.message-template-content{max-width: 100%;}
}
.bg-white{
    background-color: var(--bg-white)!important;
}
.text-brand{
    color: var(--brand);
}
.text-left{
    text-align: left;
}
.d-block{
    display: block;
}
.mt-0{
    margin-top: 0px;
}
.mb-0{
    margin-bottom: 0px;
}
.mr-6{
    margin-right: 6px;
}
.btn{
    padding: 6px 25px;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 0.3px;
    cursor: pointer;
}
.message-template-btn{
    background-color: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    margin-top: 10px;
    
}
.btn-transparent{
    background-color: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}

.btn.disabled {opacity: 0.65;cursor: not-allowed;}

.message-template-type-container{padding: 12px 16px;margin-bottom: 15px;background-color: var(--bg-white);    border-radius: 16px;}
.message-template-type-container .form-control{
    width: 100%;background-color: var(--keyboard);
    padding: 10px 0px;
    border:1px solid var(--keyboard);
    text-align: center;
    font-size: 16px;
    margin-bottom: 8px;
    border-radius: 5px;
}
.message-template-type-container .form-control:focus{
    outline: 0;
}
.message-template-type-keyboard{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -24px 0px -4px;
}
.message-template-type-keyboard li{
    width: 31.5%;
    margin: 0px 2px 4px;
}
@media (max-width:480px){
    .message-template-type-keyboard{
        margin: 0px;
    }
    .message-template-type-keyboard li{
        width: 32.10%;
    }
}
.message-template-type-keyboard li button{
    background-color: var(--keyboard);
    border: 0px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    height: 46px;
}
.message-template-back-btn img{
    height: 19px;
}
.message-template-keypad{
    display: flex;
    justify-content: end;
    margin-top: 19px;
}
.message-template-simple-text{margin-bottom: 15px;display: block;}
table{
    border-collapse: collapse;
    margin-top: 10px;
    width: 100%;
}
table tr th{
    background-color: #F5F5F5;
}
table tr td,
table tr th
{
    border: 1px solid #ddd;
    padding: 12px 20px;
    border-collapse: collapse;
}
@media (max-width:480px){
    .message-template-scroll{
        overflow: scroll;
    }
    .message-template-w-100{
        max-width: 100%;
    }
    .message-template-table tr td{
        padding: 11px 8px;
        white-space: nowrap;
    }
}
.message-template-swipper{
    overflow: hidden;
    padding-bottom: 24px;
}
.message-template-card-column img{
    width: 100%;
    margin-top: 14px;
}
.message-template-card-column p{
    font-size: 16px;
    font-style: italic;
    line-height: 24px;
    color: #878787;
}
.message-template-swipper .swiper-container{position: relative;}
.message-template-swipper .swiper-container > .swiper-pagination-bullets{
    position: initial;
    margin: 0px 0 15px;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
background-color: var(--bg-white);
border:1px solid var(--brand);
opacity: 1;
}
.swiper-pagination-bullet-active{
background-color: var(--brand)!important;
}
.message-template-button{
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: space-between;
    background-color: var(--brand);
    color: var(--bg-white);
    padding: 6px 12px 6px 16px;
}
.message-template-button::after{
    content:"";
    background-image: url("../images/arrow.svg");
    background-size: 96%;
    background-position: 100%;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
}
.message-template-listing img{width: 100%;}

.message-template-loader {
    width: 27px;
    height: 27px;
    border-radius: 50px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#00000091  90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(80%/3) 80%;
    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%}
  }

  .header-bg {
    background-color: rgb(146, 201, 238);
    border-radius: 44% 56% 53% 47% / 56% 37% 63% 44%;
    width: 85px;
    height: 82px;
    margin: 40px auto 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    animation: border-move 5s linear infinite forwards;
    filter: drop-shadow(0 0 1rem white);
  }
  
  .header {
    font-size: 48px;
    color: #222;
    align-self: center;
    text-transform: uppercase;
  }
  
  @keyframes border-move{
    0%{ border-radius:44% 56% 53% 47% / 56% 37% 63% 44%; }
    10%{ border-radius:55% 45% 66% 34% / 60% 53% 47% 40%; }
    20%{ border-radius:53% 47% 56% 47% / 53% 56% 44% 47%; }
    30%{ border-radius:60% 40% 50% 50% / 44% 50% 50% 56%; }
    40%{ border-radius:52% 48% 40% 60% / 52% 59% 41% 48% ; }
    50%{ border-radius:58% 42% 41% 59% / 43% 72% 28% 57% ; }
    60%{ border-radius:63% 34% 41% 66% / 58% 55% 45% 42% ; }
    70%{ border-radius:66% 37% 34% 59% / 70% 39% 61% 30% ; }
    80%{ border-radius:57% 43% 59% 41% / 53% 55% 45% 47%;}
    90%{ border-radius:43% 57% 61% 39% / 62% 38% 62% 38% ; }
    100%{ border-radius:44% 56% 53% 47% / 56% 37% 63% 44%; }
  }


@media (max-width:680px){
    .fixedWrapper{
        height: calc(100vh - 220px);
        border-top: 1px solid #8688A1;
        border-bottom: 1px solid #8688A1;
    }
}