@import url('pace/center-simple.css');

.Bloco_Login {
  height: 100vh;
  min-height: 100%;
  text-align: center;
  margin: 0px auto;
}

.MarginTop_Login {
  margin-top: 35%;
}

.Bloco_Logo {
  width: 40%;
}

.Bloco_SSO_Wooba {
  width: 60%;
}

@media (max-width: 1024px) {
  .Bloco_SSO_Wooba,
  .Bloco_Logo {
    width: 100% !important;
    display: block;
  }

  .Bloco_Login {
    height: 50vh;
    min-height: 50%;
  }
}

#Loading {
  margin-top: 20% !important;
}

.Loading-SSO {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 0px 5px;
  animation: wave 1.5s ease-in-out infinite;
}

.Loading-SSO-Efeito-1 {
  animation-delay: 0ms;
}

.Loading-SSO-Efeito-2 {
  animation-delay: 200ms;
}

.Loading-SSO-Efeito-3 {
  animation-delay: 400ms;
}

@keyframes wave {
  30% {
    background-color: rgba(0, 0, 0, 0);
  }

  0%,
  60%,
  100% {
    background-color: rgba(0, 0, 0, .2);
  }
}

/* TabCSSs */

.TabCSSs {
  display: flex;
  flex-wrap: wrap;
  box-shadow: none;
  background-color: var(--secondary);
}

.TabCSSs__label {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--white);
  background-color: var(--secondary);
}

.TabCSSs__radio {
  display: none;
  width: auto;
}

.TabCSSs__content {
  order: 1;
  width: 100%;
  line-height: 1.5;
  display: none;
  background-color: var(--white);
}

.TabCSSs__radio:checked + .TabCSSs__label {
  font-weight: bold;
  color: var(--dark);
}

.TabCSSs__radio:checked + .TabCSSs__label + .TabCSSs__content {
  display: initial;
}

/*PERSONALIZAÇÕES DE FORMAS DE PAGAMENTO */

.text-cash {
  color: #157811 !important;
  font-weight: bold !important;
}

a.text-cash:focus,
a.text-cash:hover {
  color: #3e9c35 !important;
}

.text-faturado {
  color: #718a5d !important;
  font-weight: bold !important;
}

a.text-faturado:focus,
a.text-faturado:hover {
  color: #99ba6a !important;
}

.text-cartao-credito {
  color: #18419d !important;
  font-weight: bold !important;
}

a.text-cartao-credito:focus,
a.text-cartao-credito:hover {
  color: #00214f !important;
}

.text-skycard {
  color: #c65200 !important;
  font-weight: bold !important;
}

a.text-skycard:focus,
a.text-skycard:hover {
  color: #a24300 !important;
}

.text-gov {
  color: #760e6e !important;
  font-weight: bold !important;
}

a.text-skycard:focus,
a.text-skycard:hover {
  color: #610059 !important;
}

.text-cartao-virtual {
  color: #5f489c !important;
  font-weight: bold !important;
}

a.text-cartao-virtual:focus,
a.text-cartao-virtual:hover {
  color: #a897d4 !important;
}

.text-maquineta-skyteam {
  color: #e5833d !important;
  font-weight: bold !important;
}

a.text-maquineta-skyteam:focus,
a.text-maquineta-skyteam:hover {
  color: #ffa464 !important;
}

.text-boleto {
  color: #333333 !important;
  font-weight: bold !important;
}

a.text-boleto:focus,
a.text-boleto:hover {
  color: #030202 !important;
}

.text-carteira-digital {
  color: #91a014 !important;
  font-weight: bold !important;
}

a.text-carteira-digital:focus,
a.text-carteira-digital:hover {
  color: #bbcc2b !important;
}

.text-none {
  color: #eb3115 !important;
  font-weight: bold !important;
}

a.text-none:focus,
a.text-none:hover {
  color: #d32c12 !important;
}

.Google-Chart {
  width: 100%;
  min-height: 800px;
}

.bg-user-interno {
  background-color: #d90000;
  text-color: #ffffff;
}

select::-ms-expand {
  /* FAZ SUMIR A SETA DO SELECT NO INTERNET EXPLORER */
  display: none;
}

option {
  padding: 2px !important;
  min-height: 1.4em !important;
}

select option:nth-child(2n + 1) {
  /* a lista de opções do select será zebrada */
  background: var(--lt-color-gray-200) !important;
}

/* <span class="Loading-PDA"></span> */
.Loading-PDA {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid var(--secondary);
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.Loading-PDA::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-bottom: 4px solid var(--primary);
  border-left: 4px solid transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.LoadingSystem {
  width: 200px;
  height: 200px;
  display: grid;
  border: 10px solid #0000;
  border-radius: 50%;
  border-color: #e4e4ed #0000;
  animation: AnimacaoLoading 2s infinite linear;
  text-align: center;
  margin: 0px auto;
}

.LoadingSystem::before,
.LoadingSystem::after {
  content: "";
  grid-area: 1/1;
  margin: 8px;
  border: inherit;
  border-radius: 50%;
}

.LoadingSystem::before {
  border-color: var(--primary) #0000;
  animation: inherit;
  animation-duration: .8s;
  animation-direction: reverse;
}

.LoadingSystem::after {
  margin: 24px;
}

@keyframes AnimacaoLoading {
  100% {
    transform: rotate(1turn);
  }
}

/* accordion css https://codepen.io/raubaca/pen/PZzpVe */

.AccordionCSS input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.AccordionCSS__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}

.AccordionCSS input:checked ~ .AccordionCSS__content {
  max-height: 10rem;
}

/* Visual styles */
.accordion {
  border: 1px solid var(--primary);
  border-radius: 0.5rem;
  overflow: hidden;
}

.AccordionCSS__label,
.AccordionCSS__close {
  display: flex;
  color: white;
  background: var(--primary);
  cursor: pointer;
  margin-bottom: 0px !important;
  font-weight: bold;
  text-transform: capitalize;
}

label .AccordionCSS__label,
.AccordionCSS__label label {
  margin-bottom: 0 px !important;
}

.AccordionCSS__label {
  justify-content: space-between;
  padding: 1rem;
}

.AccordionCSS__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}

.AccordionCSS input:checked + .AccordionCSS__label::after {
  transform: rotate(270deg);
}

.AccordionCSS__content p {
  margin: 0;
  padding: 1rem;
}

.AccordionCSS__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.accordion--radio {
  --primary: var(--secondary);
}

/* Arrow animation */
.AccordionCSS input:not(:checked) + .AccordionCSS_label:hover::after {
  animation: bounce 0.5s infinite;
}

@keyframes bounce {
  25% {
    transform: rotate(180deg) translate(0.25rem);
  }

  75% {
    transform: rotate(180deg) translate(-0.25rem);
  }
}

/* TabCSSs https://codepen.io/zkreations/details/RwEJGjv */

.TabsCSS-Container {
  width: 100%;
}

.TabCSS {
  --TabCSS-padding: 1.25rem;
  --TabCSS-bg: var(--primary);
  --TabCSS-active-bg: var(--secondary);
}

.TabCSS input {
  display: none;
}

.TabCSS input:checked + label {
  background-color: var(--TabCSS-active-bg);
  color: var(--white);
  font-weight: bold;
  text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.9);
}

.TabCSS input:not(:checked) + label + * {
  display: none;
}

.TabCSS label {
  color: #fff;
  cursor: pointer;
  padding: var(--TabCSS-padding);
  margin-bottom: 0px !important;
}

@media (max-width: 575px) {
  .TabCSS label {
    width: 100%;
  }
}

.TabCSS-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--TabCSS-bg);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.TabCSS-Conteudo {
  width: 100%;
  padding: var(--TabCSS-padding);
  background-color: #ffffff;
}

@media (min-width: 576px) {
  .TabCSS-Conteudo {
    order: 9999;
  }
}

/* https://codepen.io/ruudyaa/pen/XWooyWM */

section {
  display: flex;
  flex-flow: column;
  align-items: center;
}

section div.container-slide {
  transition: all 0.3s ease;
}

section div.container-slide h1 {
  margin: 15px 0 0 0;
}

section div.container-slide h3 {
  margin: 0 0 25px 0;
}

@media (max-width: 992px) {
  section {
    padding: 0 20px 0 20px;
  }
}

section.slide-option {
  margin: 0 0 50px 0;
}

section.slide-option .no-marg {
  margin: 0 0 0 0;
}

div.highway-slider {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 150px;
}

div.highway-slider div.highway-barrier {
  overflow: hidden;
  position: relative;
}

div.highway-slider ul.highway-lane {
  display: flex;
  height: 100%;
}

div.highway-slider ul.highway-lane li.highway-car {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #343434;
}

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

  100% {
    transform: translateX(-500%);
  }
}

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

  100% {
    transform: translateX(-500%);
  }
}

#stffull div.highway-barrier ul.highway-lane {
  width: 500%;
}

#stffull div.highway-barrier ul.highway-lane li.highway-car {
  -webkit-animation: translatestf 30s linear infinite;
  animation: translatestf 30s linear infinite;
}

#stffull div.highway-barrier ul.highway-lane li.highway-car h4 {
  font-size: 28px;
}

@-webkit-keyframes translateinfinite {
  100% {
    transform: translateX(calc(-180px * 12));
  }
}

@keyframes translateinfinite {
  100% {
    transform: translateX(calc(-180px * 12));
  }
}

#infinite div.highway-barrier {
  background: #fff;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.3);
}

#infinite div.highway-barrier::before,
#infinite div.highway-barrier::after {
  content: " ";
  position: absolute;
  z-index: 9;
  width: 180px;
  height: 100%;
}

#infinite div.highway-barrier::before {
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

#infinite div.highway-barrier::after {
  top: 0;
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

#infinite div.highway-barrier ul.highway-lane {
  width: calc(180px * 24);
}

#infinite div.highway-barrier ul.highway-lane li.highway-car {
  width: 180px;
  -webkit-animation: translateinfinite 25s linear infinite;
  animation: translateinfinite 25s linear infinite;
}

#infinite div.highway-barrier ul.highway-lane li.highway-car span.fab {
  font-size: 65px;
}

#red {
  background: #cb5454;
}

#orange {
  background: #cb8054;
}

#yellow {
  background: #cbba54;
}

#green {
  background: #69b46e;
}

#blue {
  background: #6091b0;
}

.Piscar_Efeito {
  -webkit-animation: blinker 2s linear infinite;
  animation: blinker 2s linear infinite;
}

@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }

  25% {
    opacity: 0.8;
  }

  35% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.0;
  }

  75% {
    opacity: 0.5;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes blinker {
  0% {
    opacity: 1.0;
  }

  25% {
    opacity: 0.8;
  }

  35% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.0;
  }

  75% {
    opacity: 0.5;
  }

  85% {
    opacity: 0.8;
  }

  100% {
    opacity: 1.0;
  }
}

/*  FIXA MENU LATERAL DA PR AEREO  */

.MenuLateral_PR {
  position: fixed;
  top: 0;
  left: 0;
}

mark {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 0.2em;
  font-weight: 900;
  text-decoration: underline;
}

.MenuDropdown {
  position: absolute;
  /* top: 0.3em;  Ajuste a posição vertical conforme necessário */
  right: 1.2em;
  /* Ajuste a posição horizontal conforme necessário */
}

.MenuDropdown-toggle {
  background-color: transparent;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  /* Transição para a cor de fundo */
}

.MenuDropdown-toggle img {
  border-radius: 50%;
  margin-right: 10px;
}

.MenuDropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  min-width: 160px;
  background-color: #ffffff;
  box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 5px;
  right: 0;
  /* Alinha o conteúdo do dropdown à direita */
  opacity: 0;
  /* Inicialmente invisível */
  transition: opacity 0.3s ease;
  /* Transição para a opacidade */
}

.MenuDropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease;
  /* Transição para a cor de fundo */
  border-bottom: 1px solid #e9ecef;
}

.MenuDropdown-content a:hover {
  background-color: var(--primary);
  color: var(--white);
  font-weight: bold;
}

.MenuDropdown:hover .MenuDropdown-content {
  display: block;
  opacity: 1;
  /* Torna visível com transição */
}

.MenuDropdown:hover .MenuDropdown-toggle {
  background-color: var(--primary);
  /* Muda a cor de fundo do botão no hover */
  color: var(--white);
}

.cálculo {
  background-color: #f9f9f9;
  border: 1px solid #e1e1e1;
  padding: 15px;
  border-radius: 5px;
}

.atencao {
  background-color: #ffeeba;
  border: 1px solid #ffeeba;
  padding: 10px;
  border-radius: 5px;
  color: #856404;
}

/* Container para centralizar o loader */
#loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  opacity: 0;
  /* Inicialmente invisível */
  transition: opacity 1s ease-in-out;
}

#loader-container.visible {
  opacity: 1;
}

/* Estilo de loading */
.Loading-Logon-CSS {
  width: 100px;
  height: 100px;
  display: grid;
  animation: s4 8s infinite;
}

.Loading-Logon-CSS::before,
.Loading-Logon-CSS::after {
  content: "";
  grid-area: 1/1;
  border: 16px solid;
  border-radius: 50%;
  border-color: #ff6a00 #ff6a00 transparent transparent;
  mix-blend-mode: darken;
  animation: s4 2s infinite linear;
}

.Loading-Logon-CSS::after {
  border-color: transparent transparent #e4e4ed #e4e4ed;
  animation-direction: reverse;
}

@keyframes s4 {
  100% {
    transform: rotate(1turn);
  }
}

/* Classe para o efeito de fade */
.fade {
  animation: fade-animation 2s linear forwards;
  -webkit-animation: fade-animation 2s linear forwards;
}

@keyframes fade-animation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.system-tooltip .tooltip-inner {
  max-width: 300px;
  /* Defina a largura máxima aqui */
  white-space: normal;
  /* Permite quebra de linha para textos longos */
}

.Separador {
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      #f1f1f1 10px,
      #f1f1f1 20px
    ),
    linear-gradient(to bottom, #d6d6d6, #cccccc);
  height: 5px;
  overflow: hidden;
  margin: 10px 0px 20px;
  clear: both;
}
/* CARD HORIZONTAL */
.card-horizontal {
  display: flex;
  flex-direction: row;
  min-height: 300px;
  max-width: 100%;
}
.card-horizontal img {
  width: 50%;
  min-height: 150px;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .card-horizontal {
    flex-direction: column;
  }
  .card-horizontal img {
    width: 100%;
    height: auto;
  }
}
.card-horizontal-title,
.card-horizontal-title a {
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--gray-dark);
  margin-top: 0.85rem;
}
.card-horizontal-text {
  padding: 0.85rem;
}
.card-horizontal-body {
  display: flex;
  justify-content: start;
  align-items: center;

  flex-direction: column;
  min-height: 1px; /* padding: 1.25rem; */
  border-top: 1px solid transparent;
}
/* Accordion css */
/* Container principal para o acordeão */
.Accordion_CSS_System {
  border: 2px solid;
  border-radius: 0.6rem;
  overflow: hidden;
}
/* Estilos para a aba */
.tab {
  position: relative;
}
/* Esconder o checkbox de controle */
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
/* Conteúdo do acordeão, escondido por padrão */
.tab__block {
  max-height: 0;
  overflow: hidden;
  transition: all 0.45s ease;
}
/* Expandir o conteúdo quando o checkbox estiver marcado */
.tab input:checked ~ .tab__block {
  transition: all 0.45s ease;
  max-height: 100vh; /* Ajustável conforme o conteúdo */
  margin-bottom: 1em;
}
/* Estilos visuais para os títulos e controles do acordeão */
.tab__label,
.tab__close {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: var(--primary);
  padding: 0.5rem;
  cursor: pointer;
}
/* Links dentro dos rótulos */
.tab__label a,
.tab__close a {
  color: #fff;
}

/* Destaque para o rótulo */
.tab__label_Destaque {
  background-color: var(--warning);

  color: var(--dark);
  font-weight: bold;
}
/* Ajustar cor dos links no destaque */
.tab__label_Destaque a {
  color: var(--dark);
}
/* Estilos para o título do acordeão */
.tab__label {
  justify-content: space-between;
  padding: 0.5rem;
}

/* Ícone de seta no título */
.tab__label::after {
  content: "\276F"; /* Unicode para uma seta */
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s ease;
}
/* Girar a seta quando o conteúdo estiver expandido */
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
/* Conteúdo do acordeão */
.tab__block {
  color: var(--gray-dark);
}
.tab__content {
  padding: 2rem 15px 3rem 15px;
  overflow-y: auto;
}
/* Parágrafos no conteúdo */
.tab__block p {
  margin: 0;
  padding: 1rem 0;
}

/* Fechar o acordeão */
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
/* Efeito de animação ao passar o mouse sobre o título */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce 0.5s infinite;
}
/* Animação de "bounce" */
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(0.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-0.25rem);
  }
}
.Icon-Home-Size {
  font-size: 2.5em;
}
.alert-cambio {
  color: #818182;
  background-color: #f9f9f9;
  border-color: #f1f1f1;
}

.alert-cambio hr {
  border-top-color: #ececf6;
}
.alert-cambio .alert-link {
  color: #818182;
}
.alert-cambio h1,
.alert-cambio h2,
.alert-cambio h3,
.alert-cambio h4,
.alert-cambio h5,
.alert-cambio h6,
.alert-cambio h7,
.alert-cambio h8 {
  color: #818182;
}
.text-dolar {
  color: #27ae60;
}
.text-euro {
  color: #0077b6;
}
.text-libra {
  color: #6a0dad;
}
.alerta-conexao {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  z-index: 1000;
}
.offline {
  background-color: red;
  color: white;
}
.online {
  background-color: green;
  color: white;
}
/* *
 * Tabs */
.TabsCSS {
  display: flex;
  flex-wrap: wrap;
}
.TabsCSS label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.4rem;
  margin-bottom: 0px !important;
  cursor: pointer;
  background: var(--primary);
  color: var(--white);
  font-weight: bold;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: background ease 0.4s;
  -webkit-transition: background ease 0.4s;
  -moz-transition: background ease 0.4s;
  -ms-transition: background ease 0.4s;
  -o-transition: background ease 0.4s;
}
.TabsCSS .TabsConteudo {
  order: 99;
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  display: none;
  padding: 2rem;
  background: var(--white);
  border: 1px solid #c7cbcf;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.TabsCSS input[type="radio"] {
  display: none;
}
.TabsCSS input[type="radio"]:checked + label {
  background: var(--dark);
}
.TabsCSS input[type="radio"]:checked + label + .TabsConteudo {
  display: block;
}
@media (max-width: 45em) {
  .TabsCSS .TabsConteudo,
  .TabsCSS label {
    order: initial;
  }
  .TabsCSS label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}