:root {
    --header-padrao: 60px;
    --animacao-cor-inicio: #ffffff;
    --animacao-cor-final: var(--fg-cor-padrao1);
    --bg-color: #fff;
    --typewriterSpeed: 6s;
    --typewriterCharacters: 23;
    --box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    --bg-text: #f5f5dc;
    --bg-text-focus: #edeade;
    --bg-modal: rgba(0,0,0, 0.6);
    --bg-1-oficina: #1db2dd;
    --bg-2-oficina: #ac36c4;
    --bg-cancelar-excluir: red;
    --fg-fonte-primaria: 1rem;
    --fg-fonte-secundaria: 0.9rem;
    --fg-msg-atencao: #8B0000;
    --fg-msg-padrao: #191970;
    --fg-branco2: #FAF9F6;
    --fg-cor-padrao1: #555555;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
}

body {
    background: #f0f2f5;
    color: #5f5f5f;
    font-size: var(--fg-fonte-primaria);
    color: var(--fg-cor-padrao1);
}

a {
    text-decoration: none;
    color: var(--fg-cor-padrao1);
    font-size: var(--fg-fonte-primaria);
}

button {
    font-size: var(--fg-fonte-primaria);
}


p {
    margin-bottom: 8px;
}

small {
    font-size: 0.7rem;
}
h1 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}


.nao-mostrar {
    display: none;
}

.msg-erro {
    color: red;
}

select,
textarea,
input {
    background: var(--bg-text);
    outline: none;
    border: none;
    font-size: var(--fg-fonte-primaria);
}

textarea:focus-within,
input:focus-within {
    background: var(--bg-text-focus);
}

nav.navbar {
    width: 100%;
    height: var(--header-padrao);
    background: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 6px;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: var(--box-shadow);
    z-index: 200;
}

.logo1 img {
    height: 40px;
    width: 40px;
    object-fit: contain;
}


a.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

a.logo img {
    height: 45px;
}

a.logo img#img2 {
    height: 30px;
}

main {
    width: 100%;
    height: calc(100svh - var(--header-padrao));
    margin-top: var(--header-padrao);
    overflow: auto;
}

main > section {
    position: relative;
    width: 100%;
    /* height: 100%; */
    padding: 10px;
}

main > section > div {
    height: 100%;
    width: 100%;
    background: #fff;
    padding: 10px;
}

.atencao {
    color: var(--fg-msg-atencao);
}

.cabecalho-padrao {
    width: 100%;
    height: var(--header-padrao);
    display: flex;
    justify-content: space-between;
}

.cabecalho-padrao > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.cabecalho-padrao > div button {
    border: 0;
    background: transparent;
}

.container-padrao {
    width: 100%;
    height: calc(100% - var(--header-padrao));
    overflow: auto;
}

.html-pergunta {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.html-pergunta .txt-destaque {
    color: var(--fg-msg-atencao);
}

.html-pergunta  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 5px;
}

.html-pergunta  > div button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 0;
    box-shadow: var(--box-shadow);
}

.html-pergunta  > div button.btn-continua {
    background: var(--fg-msg-atencao);  
    color: #fff; 
}

.html-pergunta  > div button.btn-cancela {
    background: var(--bg-1-oficina);  
    color: #fff; 
}

.pagina-inicial {
    position: relative;
    height: 100%;
}

.pagina-inicial .fundo {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* background: #0c002b; */
    background: #fff;
}

.pagina-inicial .fundo .logo {
    height: 50%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    
    padding-top: 5%;
}

.pagina-inicial .fundo .logo img {
    object-fit: contain;
}

.pagina-inicial .fundo .logo #img1 {
    height: 40%;
}

.pagina-inicial .fundo .logo #img2 {
    height: 20%;
}

.pagina-inicial .fundo .logo h1 {
    font-size: 1.6rem;
    color: var(--fg-cor-padrao1);
    text-align: center;
    padding-bottom: 20px;
    padding-top: 10px;
    font-weight: bolder;
}


.pagina-inicial .fundo .logo #img3 {
    height: 20%;
    padding-bottom: 20px;
}

.btns-acao {
    display: flex;
    justify-content: center;
}

.btns-acao a {
    position: relative;
    width: 90%;
    padding: 20px 20px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-decoration: none;
    box-shadow: 0 20px 50px rgba(0,0,0, 0.5);
    overflow: hidden;
    background: red;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    
}





/* .btns-acao a::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 50%;
    background: rgba(255,255,255, 0.05);
} */

.btns-acao a span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--animacao-cor-inicio), var(--animacao-cor-final));
    animation: animate1 2s linear infinite;
}

@keyframes animate1 
{
    0% 
    { 
        transform: translateX(-100%); 
    }
    100% 
    { 
        transform: translateX(100%);
    
    }
}

.btns-acao a span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--animacao-cor-inicio), var(--animacao-cor-final));
    animation: animate2 2s linear infinite;
}

@keyframes animate2 
{
    0% 
    { 
        transform: translateY(-100%); 
    }
    100% 
    { 
        transform: translateX(100%);
    
    }
}



.btns-acao a span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, var(--animacao-cor-inicio), var(--animacao-cor-final));
    animation: animate3 2s linear infinite;
}


@keyframes animate3
{
    0% 
    { 
        transform: translateX(100%); 
    }
    100% 
    { 
        transform: translateX(-100%);
    
    }
}




.btns-acao a span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, var(--animacao-cor-inicio), var(--animacao-cor-final));
    animation: animate4 2s linear infinite;
}

@keyframes animate4 
{
    0% 
    { 
        transform: translateY(100%); 
    }
    100% 
    { 
        transform: translateX(-100%);
    
    }
}

.pagina-inicial .fundo .texto {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

img.cidade {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
    opacity: 0.3;
}


/*  typing text */

.texto h1 {
    color: var(--fg-cor-padrao1);
    font-size: 1.2rem;
  /* font-size: clamp(1rem, 3vw + 1rem, 4rem); */
  position: relative;
  font-family: "Source Code Pro", monospace;
  position: relative;
  /* width: max-content; */
  width: 100%;
  text-align: center;
}

.texto h1::before,
.texto h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.texto h1::before {
  background: var(--bg-color);
  animation: typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) 0.5s forwards;
}

.texto h1::after {
  width: 0.125em;
  background: black;
  animation: typewriter var(--typewriterSpeed)
      steps(var(--typewriterCharacters)) 0.5s forwards,
    blink 750ms steps(var(--typewriterCharacters)) infinite;
}

.texto .subtitle {
  /* color: hsl(0 0% 0% / 0.7); */
  color: red;
  font-weight: 400;
  font-size: 1.5rem;
  font-weight: 400;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
  text-align: center;
  padding-top: 15px;
  text-shadow: 1px 1px var(--fg-cor-padrao1);
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#yt-link {
  position: absolute;
  bottom: 2em;
  width: 100%;
  color: hsl(0 0 0 / 0.7);

  &:hover,
  &:focus {
    color: teal;
  }
}

@keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}


/*  apresentacao */

.apresentacao > div {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px;
}

.apresentacao img {
    width: 100%;
    object-fit: contain;
    margin-top: 10px;
    margin-bottom: 50px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.apresentacao > div > div {
    
    text-align: center;
    
    /* display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh; */
}

.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.logos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logos .logo {
    width: 30%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    justify-content: space-between;
    box-shadow: var(--box-shadow);

}

.logos .logo .material-symbols-outlined {
    font-size: 3rem;
}

.logo:nth-child(2) {
    transition-delay: 200ms;
}

.logo:nth-child(3) {
    transition-delay: 400ms;
}

.logo:nth-child(4) {
    transition-delay: 600ms;
}


/*  ultima pagina */

.ultima-pagina {
    height: 100%;
    width: 100%;
}

.fale-conosco {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.fale-conosco  form {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    background: #ac36c4;
    padding: 20px;
}

.fale-conosco  form > div {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 3px;
}

.fale-conosco  form > div label {
    display: flex;
    justify-content: flex-start;
    color: #fff;
}

.fale-conosco  form > div input, textarea {
    padding: 5px;
}

.fale-conosco #btn_faleconosco {
    width: 100%;
    padding: 10px;
    background: #1db2dd;
    color: #fff;
}

.ultima-pagina > div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

section .rodape {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 15px;
    background: #000;
    color: #fff;
    margin-top: 200px;
}

section .rodape a {
    font-size: 0.9rem;
    color: #fff;
    padding: 5px;
}

section .rodape .links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

section .rodape .copyright-msg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

section .rodape img {
    height: 30px;
}

/* whatsapp */

@keyframes bounce {
    0% {
      transform: scale(0.5);
    }

    50% {
      transform: scale(1.5);
    }

    0% {
      transform: scale(1);
    }
 }

.whatsapp-btn2 {
    width: 70px;
    height: 70px;
    background: transparent;
    position: fixed;
    bottom: 5%;
    right: 10%;
    transition: 0.3s;
    animation: bounce 2s ease-in-out infinite;
    z-index: 200;
  }

  .whatsapp-btn2 a {
    display: block;
    background: transparent;
    width: 100%;
    height: 100%;
  }

  .whatsapp-btn2 a img {
    height: 100%;
    object-fit: contain;
  }

/* MODAL GERAL */

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--bg-modal);
    display: none;
    z-index: 1000;
}

.modal.ativo {
    display: block;
}


  /*  MENU SIDEBAR */

aside.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: #fff;
    transition: all 0.5s ease;
    z-index: 2000;
    /* box-shadow: 0 3px 9px var(--color-shadown); */
    box-shadow: var(--box-shadow);
    padding: 10px;

}

aside.sidebar.close {
    left: -260px;
}

aside.sidebar .logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-padrao);
    /* border: 1px solid red; */
}

aside.sidebar .logo > div {
    display: flex;
    align-items: center;
    gap: 5px;
    /* border: 1px solid blue; */
}

aside.sidebar .search-form {
    min-height: 48px;
    border-radius: 8px;
    display: flex;
    padding: 0 15px;
    margin: 5px 0 20px;
    align-items: center;
    white-space: nowrap;
    background: var(--bg-text);
    transition: 0.4s ease;
}

aside.sidebar .search-form:focus-within {
    background: var(--bg-text-focus);
}

aside.sidebar .search-form input {
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    width: 100%;
    margin-left: 15px;
    color: var(--color-text-primary);
}

aside.sidebar .menu-content {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 10px;
    overflow-y: scroll;
}

aside.sidebar .menu-content::-webkit-scrollbar {
    display: none;
}

aside.sidebar .menu-items {
    height: 100%;
    width: 100%;
    list-style: none;
    transition: all 0.4s ease;
}

.submenu-active .menu-items {
    transform: translateX(-56%);
}


aside.sidebar .menu-title {
    color: var(--color-text-primary);
    font-size: 110%;
    padding: 15px 20px;
    
    display: flex;
    align-items: center;

    font-weight: 600;
}

aside.sidebar .menu-items .submenu .menu-title {
    padding: 15px 5px;
}

aside.sidebar .menu-content a,
aside.sidebar .submenu-item {
    padding: 16px;
    /* display: inline-block; */
    width: 100%;
    border-radius: 12px;

    display: flex;
    align-items: center;
    gap: 5px;
}

aside.sidebar .submenu-item > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

aside.sidebar a:hover,
aside.sidebar .submenu-item:hover,
aside.sidebar .submenu .menu-title:hover {
    background: rgba(255, 255, 255, 0.1);
}

aside.sidebar .submenu {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: calc(-100% - 26px);
    height: calc(100% + 100vh);
    background: var(--aside-background);
    display: none;
    background: #fff;
}

aside.sidebar .submenu.show-submenu {
    display: block;
}

/* .show-submenu ~ .submenu {
    display: block;
} */

/* 14h46 */

aside.sidebar .submenu .menu-title {
    border-radius: 12px;
    cursor: pointer;
}


aside.sidebar .submenu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-primary);
    cursor: pointer;
}


aside.sidebar .submenu .menu-title span.material-symbols-outlined { /* .menu-title i */
    margin-right: 10px;
}

/*  PÁGINA PADRÃO */

section.padrao {
    position: relative;
}

section.padrao > div img {
    width: 100%;
    object-fit: contain;
    margin-top: 10px;
    margin-bottom: 20px;
}

section.padrao.registrar {
    height: 100%;
}

section.padrao.registrar > div {
    height: 100%;
}


/* ************************** AGENDA *************************** */

.padrao.agenda {
    height: 100%;
    display: flex;
    justify-content: end;
    flex-direction: column;
    
}

.agenda {
    padding: 5px;
    display: flex;
}

.date-input {
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #eee;
}

.datepicker-container {
    position: relative;
    width: 100%;
}

.datepicker {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 100;
    margin-top: 2px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    z-index: 10;
}


.datepicker button {
    cursor: pointer;
    border: none;
    border-radius: 3px;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s;
}

.days,
.dates {
    display: grid;
    grid-template-columns: repeat(7,12%);
    gap: 10px;
    margin-block: 10px;
}

.days span {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.dates button {
    color: slategray;
    aspect-ratio: 1;
}

.dates button:disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.dates button:hover {
    background: rgba(119, 136, 153,0.1);
}

.dates button.today {
    background: rgba(147, 112, 216,0.2);
    color: mediumpurple;
}

.dates button.selected {
    background: mediumpurple;
    color: #fff;
}

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.datepicker-header select,
.datepicker-header input {
    font-size: 14px;
    border: 1px solid #eee;
}

.datepicker-header input {
    max-width: 64px;
}

.datepicker-header button {
    color: slategray;
}


.datepicker-header button:hover {
    color: mediumpurple;
}

.datepicker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

.datepicker-footer button {
    background: rgba(119, 136, 153,0.1);
    padding: 3px 10px;
}

.datepicker-footer button.apply {
    background: var(--bg-2-oficina);
    color: #fff;
}

.datepicker-footer button.cancel {
    background: var(--bg-cancelar-excluir);
    color: #fff;
}

.datepicker-container .legendas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: #fff;
    
}

.datepicker-container .legendas > * {
    padding: 3px 5px;
}


/* *************  MODAL PADRAO ************************ */

.modal-padrao {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 3000;
    background: var(--bg-modal);
    display: none;
}

.modal-padrao.ativo {
    display: block;
}

.modal-padrao > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding: 20px 6%; */
    
}

.modal-padrao > div > div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 6%;
}

.modal-padrao > div > div.conteudo-container.ativo {
    height: 100%;
    padding: 5px;
    padding-top:  var(--header-padrao);
}



.modal-padrao .conteudo {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}

.modal-padrao .conteudo.ativo {
    display: block;
}

.modal-padrao .sucesso-padrao,
.modal-padrao .erro-padrao {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    background: #fff;
    width: 100%;
    padding: 50px;
    gap: 20px;
}

.modal-padrao .sucesso-padrao button,
.modal-padrao .erro-padrao button {
    padding: 10px 20px;
}

.modal-padrao .spinner-modal {
    width: 150px;
    height: 150px;
    display: none;
}

.modal-padrao .spinner-modal.ativo {
    display: block;
}

.modal-padrao .tela-retorno-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    padding-top: var(--header-padrao);
    display: none;
}

.modal-padrao .tela-retorno-modal.ativo {
    /* display: block; */

    display: flex;
    justify-content: center;
    flex-direction: column;


}

.modal-padrao .tela-retorno-modal .tela-conteudo {
    width: 100%;
    max-height: 100%;
    overflow: auto;
    /* height: 100%; */
    background: #fff;
    padding: 15px;
    padding-bottom: var(--header-padrao);
}

.modal-padrao .tela-retorno-modal .cabecalho {
    height: var(--header-padrao);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-padrao .tela-retorno-modal .cabecalho > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
}

.modal-padrao .tela-retorno-modal .cabecalho button {
    background: transparent;
    border: none;
}

.modal-padrao .tela-retorno-modal .retorno-html {
    width: 100%;
    height: calc(100% - var(--header-padrao));
    overflow: auto;
    
}


/* ************ CAPTACAO VIVA *************** */


.captacao-viva {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 20px;
}

.captacao-viva .pergunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
}

.captacao-viva .pergunta  span {
    
}

.captacao-viva .pergunta input {
    width: 90%;
    padding: 15px 10px;
    font-size: 1rem;
    border: 0;
    outline: none;
    background: transparent;
    
}

.captacao-viva .pergunta input::placeholder {
  /* color: #fff; */
  opacity: 1; /* Ensures color is vibrant in Firefox */
}

.captacao-viva.tela {
    position: relative;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}




.captacao-viva.tela textarea {
    font-size: 1rem;
    border-radius: 10px;
}

.captacao-viva.tela select {
    width: 100%;
    padding: 15px 10px;
    border-radius: 10px;
}

.captacao-viva.tela .acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.captacao-viva.tela .acoes button {
    padding: 10px;
    border: none;
    background: transparent;
}

.captacao-viva.tela .acoes button.ativo {
    border: 2px solid var(--bg-2-oficina);
}

.captacao-viva.tela form {
    display: none;
}

.captacao-viva.tela .acoes button span {
    font-size: 2.4rem;
    color: var(--bg-primaria);
}

.captacao-viva.tela > button {
    padding: 15px 10px;
    border-radius: 10px;
    border: none;
    background: var(--bg-2-oficina);
    color: #fff;
}

.captacao-viva.tela .lista-arquivos-upload {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    max-height: 150px;
    /* height: 200px;*/
    overflow: auto;
}

.captacao-viva.tela .lista-arquivos-upload > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 5px;
}

.captacao-viva.tela .lista-arquivos-upload > div button {
    background: red;
    width: 20px;
}

.captacao-viva.tela #span_fechar {
    position: absolute;
    top: 15px;
    left: 15px;
}


.tela-retorno-captacaoviva {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.tela-retorno-captacaoviva table {
    width: 100%;
}

.tela-retorno-captacaoviva .lista-arquivos {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.tela-retorno-captacaoviva .lista-arquivos img {
    width: 100%;
    object-fit: contain;
}

/* **************  SPINNER *********************** */


.spinner-local {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* background: var(--bg-modal); */
    display: none;
    padding: 20px;
}

.spinner-local.ativo {
    display: block;
}

.spinner-local > div {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.spinner-local > div.ativo {
    display: block;
}

.spinner-local > div.aguarde {

    width: 150px;
    height: 150px;
}

.spinner-local > div.msg-retorno {
    background: #fff;
    width: 90%;
    padding: 40px 30px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.spinner-local > div.msg-retorno > button {
    position: absolute;
    top:10px;
    left: 10px;
    border: 0;
    background: transparent;
}


.spinner {
  height: 100%;
  width: 100%;
  border: 3px solid;
  display: none;
}

.spinner-container {
  position: relative;
  width: 25px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.spinner-container .spinner {
  position: absolute;
  top: 0;
  left: 0;

  height: 20px;
  width: 20px;
  border: 3px solid;
  display: none;  
}





@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner.ativo {
  border-color: red white red white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: block;  
}


/* ********** PROFILE ****************** */

.profile-container {
    background: #fff;
}

.profile-container .banner-container {
    height: 200px;
}

.profile-container .banner-container > img {  /* fiz por minha conta */
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.profile-container-inner {
    padding: 0 4% 10px;
}

.profile-pic {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-top: -75px;
    padding: 5px;
    background: #fff;
    object-fit: contain;
    border: 1px solid var(--fg-cor-padrao1);
}

.profile-container h1 {
    font-size: 28px;
    font-weight: 600;
    color: #222;
}

.profile-container b {
    font-weight: 500;
}

.profile-container p {
    margin-top: 5px;
}

.profile-container p a {
    color: #045be6;
    font-weight: 500;
}

.profile-btn {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-btn a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e4e6eb;
    padding: 6px 15px;
    border-radius: 4px;
    margin-right: 10px;
}

.profile-btn .primary-btn {
    background: var(--fg-msg-atencao);
    color: #fff;
}

.profile-description {
    background: #fff;
    padding: 20px 4% 30px;
    margin: 12px 0;
    background: var(--fg-branco2);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.profile-description p {
    display: block;
    width: 100%;
    min-height: 100px;
    background: #fff;
    border-radius: 10px;
    padding: 5px;
}

.profile-description h2 {
    margin: 10px 0 20px;
    font-weight: 600;
}

.profile-acao-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--fg-cor-padrao1);
}

.profile-acao-btn button {
    position: relative;
    top: -5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    border: none;
}

.profile-acao-btn button span {
    color: #ccc;
}

.profile-acao-btn button span:hover {
    color: var(--fg-cor-padrao1);
}

.see-more-link {
    display: block;
    text-align: right;
    font-size: 15px;
    color: var(--fg-msg-padrao);
}

.container-convidados {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.container-convidados .navega-registro {
    background: var(--bg-2-oficina);
    color: #fff;
    padding: 5px;
}

.container-convidados .navega-registro button {
    color: #fff;
}



/* ******** TELA IFRAME ***************** */

iframe {
   border: none;
}

.tela-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background: var(--bg-modal);
    padding: 10px;
    z-index: 2000;
    display: none;
    z-index: 10000;
}

.tela-iframe.ativo {
    display: block;
}

.tela-iframe > div {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 10px;
}

.tela-iframe .cabecalho {
    height: var(--header-padrao);
}

.tela-iframe .cabecalho button {
    border: none;
    background: transparent;
}


.tela-iframe .conteudo {
    width: 100%;
    height: calc(100% - var(--header-padrao));
    overflow: auto;
}

.user-logado {
    width: 100%;
}

.user-logado > div {
    width: 100%;
    height: 100%;
    border-bottom: 2px solid var(--fg-cor-padrao1);
    padding: 0 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 10px;
    gap: 5px;
}

.user-logado .usuario,
.user-logado .foto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-logado .foto > div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border: 1px solid var(--fg-cor-padrao1);
}

.user-logado .foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-logado .link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
}

.user-logado .link a {
    font-weight: 600;
}

/* ******** BTN PADRÃO ************************ */

.btn-padrao-enviar {
    background: var(--bg-2-oficina);
    border: 0;
    color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.btn-padrao-enviar-alt {
    background: var(--bg-1-oficina);
    border: 0;
    color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


/* ******** CONFIGURAÇÕES TELA UPLOAD ******************** */

section.tela-upload {
    width: 100%;
    height: 100%;
}

section.tela-upload .container-upload {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

section.tela-upload .foto-perfil {
    text-align: center;
}


section.tela-upload .foto-upload .foto button {
    height: 200px;
}

section.tela-upload .foto-upload button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ************* MAPAS ******************************** */

.geolocalizacao {
    position: relative;
    width: 100%;
    height: 100%;   
    border: 2px solid var(--fg-cor-padrao1);
    padding: 0;
    font-size: 0.9rem;
}

.geolocalizacao .configuracao {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    transition: all 0.5s ease;
    overflow: auto;
}

.geolocalizacao .configuracao.ativo {
    right: 0;

}

.geolocalizacao .configuracao .cidades {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5px;
}

.geolocalizacao .configuracao .cidades select {
    padding: 5px;
    font-size: 0.9rem;
    border: none;
    background: #fff;
    width: 40%;
    background: #ccc;
}

.geolocalizacao .configuracao .container-busca {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 5px;
    padding-top: 20px;
    margin-bottom: 20px;
}

.geolocalizacao .configuracao .container-busca > div {
    width: 100%;
}

.geolocalizacao .configuracao .coordenadas {
    width: 100%;
}

.geolocalizacao .configuracao  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

.geolocalizacao .configuracao  table td {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.geolocalizacao .configuracao  table th {
    text-align: left;
}

.geolocalizacao .configuracao  table td div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.geolocalizacao .configuracao .detalhe-nominatim {
    background: #ccc;
    padding: 10px;
}

.geolocalizacao .configuracao .detalhe-nominatim  table td {
    word-break: break-all;
    border-bottom: 1px solid #000;
}


.geolocalizacao .configuracao  input, textarea {
    padding: 5px;
    width: 100%;
}

.geolocalizacao .configuracao  textarea {
    border: 1px solid var(--fg-cor-padrao1);
}


.geolocalizacao .configuracao .container-busca > div button {
    border: 0;
    background: transparent;
}

.geolocalizacao .configuracao #btn_buscar_coordenadas {
    width: 100%;
    text-align: center;
    padding: 10px;
    background: var(--bg-1-oficina);
    color: #fff;
}

.mapa-container {
    width: 100%;
    height: 100%;
    
}

.mapa-container section.pagina-inicial {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}

.mapa-container .cabecalho-principal {
    width: 100%;
    height: var(--header-padrao);
    background: #fff;
    
}


.mapa-container .conteudo-principal {
    position: relative;
    width: 100%;
    height: calc(100% - var(--header-padrao));
    background: #fff;
    overflow: auto;
}

.mapa-container .conteudo-principal > div {
    width: 100%;
    height: 100%;
}

.mapa-container #map {
    width: 100%;
    height: 100%;
    overflow: scroll;
}


/* *********** PERGUNTA MODAL ************** */

.msg-pergunta {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.msg-pergunta .acao-excluir {
    background: #fff;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
} 

.msg-pergunta .acao-excluir .btns {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.msg-pergunta .acao-excluir .btns button {
    min-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    border: 0;
    box-shadow: var(--box-shadow);
}

.msg-pergunta .acao-excluir .btns button.js-msg-continua {
    background: var(--bg-cancelar-excluir);
    color: #fff;
}

.msg-pergunta .acao-excluir .btns button.js-msg-cancela {
    background: var(--bg-1-oficina);
    color: #fff;
}

/* ************* LGPD ********************* */

.lgpd {
    width: 100%;
    background: #000;
    color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 30px 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
    z-index: 2000;
}

.lgpd a {
    color: lightgreen;
}

.lgpd .btns-local {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.lgpd .btns-local button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px;
    min-width: 40%;
    border: none;
    background: #fff;
}

.lgpd .btns-local button:first-child .material-symbols-outlined {
    color: red;
    font-weight: 600;
}

.lgpd .btns-local button:nth-child(2) .material-symbols-outlined {
    color: green;
    font-weight: 600;
}


/* *********importar_cidades.html */

.importa-cidade {
    height: 100%;
}

.importa-cidade .ibge-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.importa-cidade .ibge-container > select, button {
    width: 90%;
    margin-top: 10px;
}

.importa-cidade .ibge-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
    color: #fff;
    font-weight: 400;
    gap: 10px;
    background: var(--fg-msg-atencao);
    

}

.importa-cidade .ibge-container button > div {
    display: flex;
    align-items: center;
}

.importa-cidade .parametros {
    padding: 5px;
}

.importa-cidade .parametros > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    color: red;
}


/* ******** MODAL GENERICO   ****************/

.modal-generico {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-modal);
    padding: 10px;
    display: none
}

.modal-generico.ativo {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.modal-generico > div {
    display: flex;
    justify-content: center;
    position: relative;
}

.modal-generico .container-generico {
    background: #fff;
    padding-bottom: var(--header-padrao);
    width: 100%;
    height: 100%;
}

.modal-generico .container-generico > div {
    width: 100%;
    height: 100%;
    display: none;
}

.modal-generico .container-generico > div.ativo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
}

.modal-generico .container-generico > div.retorno-acao {
    padding: 10px;
}

.modal-generico .container-generico .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    ;
}

.modal-generico .container-generico .btns button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    gap: 20px;
    color: #fff;
    border: 0;
    box-shadow: var(--box-shadow);
}

.modal-generico .container-generico .btns button#btn_download {
    background: var(--fg-msg-atencao);
    display: none;
}

.modal-generico .container-generico .btns button#btn_download.ativo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-generico .container-generico .btns button#btn_salvar_json {
    background: var(--fg-msg-atencao);
    display: none;
}

.modal-generico .container-generico .btns button#btn_salvar_json.ativo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-generico .container-generico .btns button#btn_cancelar {
    background: var(--bg-1-oficina);
}

.modal-generico .container-generico > div.retorno-acao button {
    position: absolute;
    width: 25px;
    top: 0;
    right: 0;
    border: 0;
    background: transparent;
}