:root {
    --dark: #121212;
    --light: #ecf0f4;
    --danger: #eb445a;
    --danger-rgb: 235,68,90;
    --primary: #007a5c;
    --tertiary: #0297FF;
}
*{
    padding: 0;
    margin: 0;
}
html, body{
    background-color: var(--light);
    font-family: 'Roboto', sans-serif;
    font-size: 95%;
}
h1, h2, h3, h4, h5, h6{
    color: #333333;
}
/* BOOTSTRAP  */

.form-control{
    cursor: pointer;
}
.btn{
  padding: .7rem .75rem;
  font-weight: 500;
}
.btn-success{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;

}
.btn-success:hover{
    background-color: var(--primary) !important;
}
.form-group{
    margin-bottom: 30px;
}
/* BOOTSTRAP  */
/* NAVBAR */
header{
    background: var(--primary);
    height: 160px;
    width: 100%;
    display: flex;
    padding: 30px 0 0 0;
}
header .img-logo{
    width: 50px;
}
header .name-user{
    color: #ffffff;
    float: right;
}
.navbar{
    max-width: 1366px;
    margin: -50px auto 0;
}
.navbar .collapse{
    background-color: #ffffff;
    height: 100px;
    border-radius: 8px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    z-index: 1000;
}
.navbar-toggler{
    color: #ffffff;
}
@media only screen and (max-width: 480px) {
    .navbar .collapse{
        padding: 20px 0;
       min-height: 50vh;
    }
  }
.navbar-nav .nav-item a{
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}
.navbar-nav .nav-item{
    padding: 0 20px;
    list-style: block;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 200px;
    margin: 0 10px;
    border-radius: 10px;
    cursor: pointer;
}
.navbar-nav .nav-item:hover{
    border: 2px solid var(--primary);
}
.navbar-nav{
    list-style-type: none !important;
    color: transparent;
}
.sair{
    color: red !important;
}
/* NAVBAR */
/* list-navegation */
.breadcrumb{
    background-color: #ffffff;
    box-shadow: 0 .125rem 1rem rgba(0,0,0,.075)!important;
}
/* list-navegation */
.pj-card{
    background-color: #fff;
    background-clip: border-box;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 8px;
    width: 100%;
    margin: 20px 0;
    padding: 15px;
}
footer{
    height: 10px;
    width: 100%;
    background: var(--primary);
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
/* CONTEUDO */
#box-envio{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
#box-envio .conteudo-envio{
    text-align: center !important;
    padding: 50px 0;
}
#box-envio .conteudo-envio lottie-player{
    padding: 20px 0;
    width: 250px;
}
.cancelar-envio{
    color: var(--danger);
    border: none;
    background-color: transparent;
    width: 200px;
    cursor: pointer;
    font-weight: 600;
    outline: none;
}
.novo-envio{
    color: var(--tertiary);
    border: none;
    background-color: transparent;
    width: 200px;
    cursor: pointer;
    font-weight: 600;
    outline: none;
}
.modal-sugestoes{
    position: absolute;
    background-color: #ffffff;
    padding: 1rem;
    z-index: 10;
    border-radius: 8px;
    box-shadow: 0 1px 10px rgb(0 0 0 / 20%);
}
.modal-sugestoes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.modal-sugestoes ul li {
    background-color: transparent;
    padding: 0.5rem;
    transition: background-color 400ms;
    border-radius: 6px;
    cursor: pointer;
}
.progress-bar__container {
  width: 100%;
  height: 2rem;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
  will-change: transform;
  margin: 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.progress-bar {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  background-color: VAR(--tertiary);
  top:0;
  bottom: 0;
  left: -100%;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items:center;
  color: white;
  font-family: sans-serif;
}

.progress-bar__text {
  display: none;
}

/* TELA LOGIN */
.container-login{
    min-height: 100vh;
    min-width: 100vw;
    background-image: url(../../../public/img/bg.png);
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.box-form{
    width: 500px;
    background: white;
    padding: 40px 20px;
    border-radius: 10px;
}
.box-form .img-login{
    height: 200px;
    width: 200px;
    background: var(--primary);
    padding: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.box-form .img-login img{
    width: 100%;
    object-fit: cover;
}
/* TELA LOGIN */
/* PAGINA CONEXAO */
.info-conexao{
   padding: 20px 15px; 
}
.info-conexao h4{
    padding-bottom: 10px;
    font-weight: 400;
}
.info-conexao p{
    margin-top: 10px;
    background-color:  #f2f2f2;
}
.info-conexao ul{
    padding-top: 5px;
}
.info-conexao ul li{
    list-style: none;
    padding: 10px 0;
}
.qrcode-conexao{
    text-align: center;
}
#status-conexao {
    padding: 30px 0;
}
#status-conexao a{
    padding: 0 20px;
}
.desconect{
    color: red;
}
.desconect:hover{
    color: red;
}
/* PAGINA CONEXAO */
@media (max-width: 600px){
    .box-form{
        width: 300px;
    }
    .box-form img{
        width: 200px;
    }
}
/* MEUS DADOS */
.meus-dados{
    padding: 50px 0;
    text-align: center;
}
.meus-dados img{
    width: 300px;
    padding-bottom: 20px;
}
.meus-dados h3{
    padding-bottom: 20px;
}
/* MEUS DADOS */
/* DISPAROS */
.card-disparo{
    background-color: #f2f2f2;
    margin-bottom: 10px;
    padding: 1rem .5rem;
    font-weight: 400;
    border-radius: 10px;
}
#modal-content{
    font-weight: 400;
}
ul{
    list-style: none;
}
/* DISPAROS */