:root{
    --cor-primaria:rgb(230, 56, 129);
    --cor-secundaria:rgb(231,66,142);
}
* {
scrollbar-color: rgb(223, 227, 232) rgb(249, 250, 251);
scrollbar-width: thin;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body{
margin:0;
padding:0;
font-family: "Roboto", sans-serif;
background:rgb(245,247,249);
font-size: 15px;
}
ul{
margin:0;
padding:0;
}
ul li{
padding:0;
margin:0;
list-style: none;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select{
outline: 0 !important;
border:0;
text-decoration: none;
}
a{
text-decoration:none;
color: inherit;
}
button {
cursor: pointer;
transition: 0.3s;
}
span, p{
font-family: "Roboto", sans-serif;
}
.container{
width:100%;
max-width: 1000px !important;
}
.loading__circle {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading__circle-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid rgb(230, 56, 129);
border-radius: 50%;
width: 50px;
height: 50px;
animation: loading__circle-spin 0.6s linear infinite;
}
@keyframes loading__circle-spin {
  to {
    transform: rotate(360deg);
  }
}
header.central{
position:relative;
z-index:90;
width:100%;
background: #fff;
border-bottom: 1px solid rgba(230,234,238);
}
header.central .content-header{
display: flex;
align-items: center;
justify-content: space-between;
}
header.central .content-header ul.menu{
display: flex;
align-items: center;
justify-content: center;
gap:20px;
}
header.central .content-header ul.menu li a{
display: flex;
align-items: center;
gap:7px;
color:#00082499;
cursor: pointer;
line-height: 1.17;
transition: all .3s linear;
font-size: 16px;
padding: 20px 16px 22px 0;
border-bottom: 4px solid transparent;
}
header.central .content-header ul.menu li a:hover, header.central .content-header ul.menu li a.active{
color:#0B121E;
}
header.central .content-header ul.menu li a.active{
border-color:var(--cor-primaria);
}
header.central .content-header ul.menu li a svg{
width:24px;
height:24px;
margin-top:-2px;
}
header.central .content-header ul.menu li a svg path{
fill:#00082499;
transition:all .3s linear;
}
header.central .content-header ul.menu li a.active svg path, header.central .content-header ul.menu li a:hover svg path{
fill:#0B121E;
}
header.central .content-header .userarea{
display: flex;
align-items: center;
justify-content: flex-end;
color:#00082499;
font-size: 20px;
}
header.central .content-header .userarea span{
display: flex;
align-items: center;
justify-content: center;
width:40px;
height: 40px;
background-color: var(--cor-secundaria);
color:#fff;
text-transform: uppercase;
font-size: 16px;
margin-right:7px;
border-radius: 50%;
}
header.central .content-header .userarea, header.central .content-header a.logo{
width:64px;
}
footer, .prefooter{
background-color: rgba(0,8,38,0.8);
}
.prefooter{
padding:20px 0;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.prefooter .top-footer{
display: flex;
align-items: center;
justify-content: space-between;
}
.prefooter .top-footer .apps{
display: flex;
align-items: center;
gap:0 20px;
}
.prefooter .top-footer .apps a{
padding:8px 16px;
width:144px;
display: flex;
align-items: center;
justify-content: center;
border:1px solid transparent;
background-color: rgba(255,255,255,0.16);
transition:all .3s linear;
border-radius: 10px;
}
.prefooter .top-footer .apps a:hover{
border-color:#fff;
}
.prefooter .top-footer h3{
color:#fff;
display: flex;
align-items: center;
margin:0;
cursor: pointer;
gap:12px;
font-weight: 700;
font-size: 16px;
}
footer .content-footer{
display: flex;
align-items: center;
padding:22px 0;
}
footer .content-footer .logo-rodape{
display: flex;
align-items: center;
justify-content: center;
width:98px;
height:98px;
margin-right:15px;
}
footer .content-footer .logo-rodape img{
-webkit-filter: invert(1);
filter: invert(1);
opacity: .6;
}
footer .content-footer .textRodape{
width:100%;
flex:0 0 1;
font-size: 14px;
color:rgba(255,255,255,0.6);
}
footer .content-footer .textRodape p{
margin:0;
}
section.bodyPage{
min-height: calc(100vh - 298px);
padding:25px 0;
}
.card-atendimento{
width: 100%;
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(236,9,120,.08);
overflow: hidden;
}
.card-atendimento .card-header {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(180deg, #fff, #fff8fc);
}
.card-atendimento .card-header .status-dot{
height: 10px;
width: 10px;
border-radius: 999px;
background: var(--cor-primaria);
}
.card-atendimento .card-header .status-title{
color:rgba(0,8,38,0.8);
font-weight: 700;
font-size: 16px;
}
.card-atendimento .card-body{
height: calc(100vh - 403px);
min-height: 500px;
background: #fff;
overflow: auto;
width:100%;
padding:25px 40px;
}
.card-atendimento .card-body #chat{
width:100%;
}

.mensagem-chat.bot{
display: flex;
align-items: flex-end;
}
.mensagem-chat.user{
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 7px 0 7px;
}
.mensagem-chat .avatar{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--cor-primaria);
border-radius: 50%;
padding: 8px;
margin-right: 10px;
margin-bottom: 5px;
}
.mensagem-chat .avatar img{
margin-right:2px;
}
.mensagem-chat.bot .mensagens{
max-width: calc(100% - 50px);
}
.mensagem-chat.user .mensagens{
max-width: 100%;
}
.text.bubble .typing-indicator{
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgb(247,248,255);
padding:13px 15px;
border-radius: 13px;
--animacao: 1100ms;
}
.text.bubble .typing-indicator span{
width:8px;
height:8px;
border-radius: 50%;
background:rgba(0,8,38,0.4);
display:flex;
animation: spinner-bolinha var(--animacao) ease-in-out infinite;
}
.text.bubble .typing-indicator{
width:60px;
}
@keyframes spinner-bolinha {
  0%, 100% {
    transform: translateY(40%);
  }
  50% {
    transform: translateY(-40%);
  }
}
.text.bubble .typing-indicator span:nth-child(1) {
  --clr-spinner: var(--corVermelho);
  animation-delay: calc(var(--animacao) / 6 * -1);
}
.text.bubble .typing-indicator span:nth-child(2) {
  --clr-spinner: var(--corVermelhoEscuro);
  animation-delay: calc(var(--animacao) / 6 * -2);
}
.text.bubble .typing-indicator span:nth-child(3) {
  --clr-spinner: var(--corCafe);
  animation-delay: calc(var(--animacao) / 6 * -3);
}
.mensagem-chat.bot .mensagens .text{
font-size: 16px;
color:rgba(0,8,38,0.8);
width:auto;
}
.mensagem-chat.user .mensagens .text{
font-size: 16px;
color:#fff;
width:auto;
}
.mensagem-chat.bot .mensagens .text, .mensagem-chat.user .mensagens .text{
margin-bottom: 8px;
}
.mensagem-chat.bot .mensagens .text .msg{
padding:10px 15px;
border-radius: 8px;
background-color: rgb(247,248,255);
border: 0;
max-width: 715px;
}
.mensagem-chat.user .mensagens .text .msg{
padding:10px 15px;
border-radius: 8px;
background-color: var(--cor-secundaria);
border: 0;
}

input.input-chat{
min-width: 220px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px 15px;
color:#00082499;
height:46px;
margin-right:5px;
font-size: 16px;
}
button.button-chat{
background-color: var(--cor-primaria);
transition: all .3s linear;
color:#fff;
font-weight: 700;
border-radius: 10px;
height:46px;
padding:5px 20px;
font-size: 16px;
}
button.button-chat:hover{
background-color: var(--cor-secundaria);
color:#fff;
}
.video-container {
overflow: hidden;
position: relative;
width: 100%;
height:345px;
max-width: 380px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mensagem-chat.bot iframe#embed-bubble-content{
width: 684px;
height: 730px;
}
.bg-serasa{
background-color: var(--cor-primaria);
}
.box-conclusao{
max-width: 600px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
-webkit-box-shadow: 0px 1px 4px rgba(0,8,38,.0444);
-moz-box-shadow: 0px 1px 4px rgba(0,8,38,.0444);
box-shadow: 0px 1px 4px rgba(0,8,38,.0444);
border: 1px solid #eaeaea;
}
.box-conclusao .box-head{
background-color: #f5f5f5a3;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #555;
height: 50px;
}
.box-conclusao .box-body{
padding:35px;
}
.box-conclusao .box-body .icone{
display: flex;
align-items: center;
justify-content: center;
}
.box-conclusao .box-body h2{
font-weight: 700;
text-align: center;
margin:15px 0;
font-size: 22px;
color:rgba(0,8,38,0.8);
}
.box-conclusao .box-body p{
font-size: 16px;
color:#00082499;
text-align: center;
}

@media(max-width:992px){
header.central .content-header .userarea{
font-size: 16px;
}
header.central .content-header .userarea span{
width:34px;
height:34px;
font-size: 14px;
}
header.central .content-header{
padding:12px 0;
}
.prefooter .top-footer{
flex-wrap:wrap;
}
.prefooter .top-footer .apps{
width:100%;
justify-content: center;
}
.prefooter .top-footer h3{
width:100%;
justify-content: center;
padding:20px 0 5px;
}
footer .content-footer .logo-rodape{
display: none;
}
footer .content-footer .textRodape {
font-size: 13px;
text-align: center;
line-height: 22px;
}
.card-atendimento .card-body{
padding:10px;
}
.mensagem-chat .avatar {
width: 30px;
height: 30px;
padding:6px;
}
.mensagem-chat.bot .mensagens {
max-width: calc(100% - 40px);
}
.mensagem-chat.bot .mensagens .text, .mensagem-chat.user .mensagens .text{
font-size: 15px;
}
input.input-chat {
width: 210px;
min-width: 210px;
font-size: 15px;
}
button.button-chat{
font-size: 15px;
}
.video-container{
height:420px;
}
.mensagem-chat.bot iframe#embed-bubble-content{
width: 100%;
height: 920px;
}




}