@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.material-symbols-outlined { font-size: 20px }
.material-symbols-outlined.size-16 { font-size: 16px }
.material-symbols-outlined.size-32 { font-size: 32px }
.material-symbols-outlined.size-48 { font-size: 48px }

.trail-social-proof .ratio:not(:first-child) { margin-left: -.5rem }

.w-16 { width: 1rem }
.w-32 { width: 2rem }
.w-48 { width: 3rem }
.w-64 { width: 4rem }
.w-96 { width: 6rem }
.w-128 { width: 8rem }

:root {
  --color-primary: #2570A7;
  --color-secondary: #F18812;
  --color-light: #F3F3F3;
  --color-dark: #111;
}

.text-primary { color:var(--color-primary) !important }
.text-secondary { color:var(--color-secondary) !important }

.bg-primary { background:var(--color-primary) !important }
.bg-secondary { background:var(--color-secondary) !important }
.bg-light { background:var(--color-light) !important }

a,
.accordion-button:not(.collapsed) { color: var(--color-primary) }

.accordion-button:not(.collapsed) {
   background: rgba(241 136 18 / 7.5%)
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
  background-color: var(--color-primary) !important }

html,
body,
section { height: 100% }

body { background: #F6F6F6 }

@media(max-width:767.98px){
  body.sign {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: none;
  }
}

#div-validacao .alert { margin-top: 1rem }

#div-validacao .alert .close { 
  font-size: 200% !important;
  color: #000;
  opacity: .5;
  padding: .25rem 1rem;
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none  }

#div-validacao .alert .close:hover  { opacity: 1 }

#quiz .list-group-item { 
  background: transparent;
  padding: 0 }

#quiz .list-group-item label { 
  line-height: 1.4;
  display: flex;
  gap: 1rem;
  padding: .75rem 1.5rem }


  


  

/* PROVA
//////////////////////////////////////////////////*/
#prova { padding-bottom: calc(96px + 2rem) }

#prova .form-check[class*="bg-"]{
  margin: -0.5rem 0;
  padding: 0.5rem 0 0.5rem 2rem }

#prova .form-check p { display: inline }
#prova .form-check p:after { 
  content: "";
  display: block }

#prova .form-check img { 
  max-width: 100%;
  max-height: 100% }

#prova .form-check-input:disabled~.form-check-label, 
#prova .form-check-input[disabled]~.form-check-label,
#prova .form-check-input:disabled { opacity: 1 }

#prova aside { max-height: calc(100% - 96px - 2rem) }

#prova .shadow-lg { box-shadow: 0 0 3rem rgba(0,0,0,0.3) !important }










/* swal2-popup
//////////////////////////////////////////////////*/
.swal2-popup { padding: 2rem !important }

.swal2-title { font-size: 120% !important }

  

/* form elements
//////////////////////////////////////////////////*/
.btn { 
  transition: none;
  text-decoration: none !important }

.btn-primary,
.swal2-styled.swal2-confirm   { 
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important; 
  color: #FFF !important } 

.btn-secondary  { 
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important } 

.btn-link       { color: var(--color-primary) !important } 

.btn-outline-primary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) } 

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--color-primary);
  color: #FFF } 
  
.btn-outline-secondary {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) }  

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus { background: var(--color-secondary) }   

.btn-outline-secondary-dark {
  box-shadow: inset 0 0 0 1px var(--color-secondary-dark);
  color: var(--color-secondary-dark) }  

.btn-outline-secondary-dark:hover,
.btn-outline-secondary-dark:active,
.btn-outline-secondary-dark:focus { 
  background: var(--color-secondary-dark);
  color: #FFF }  

.btn-whatsapp {
  background: #00C484;
  color: #FFF !important }  

.btn-whatsapp-outline {
  border: 2px solid #00C484;
  color: #00C484 }  

.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:active,
.btn-whatsapp-outline:focus {
  background: #00C484;
  color: #FFF }  

.btn-outline-light {
  box-shadow: inset 0 0 0 1px #AAA;
  color: #AAA }  

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light:focus {
  background: #AAA;
  color: #FFF }  

.btn-white { 
  color: var(--color-primary);
  background: #FFF }  

.btn-white:hover,
.btn-white:active,
.btn-white:focus { 
  color: #FFF;
  background: var(--color-primary) !important }  

.btn-white-10 { 
  color: #FFF;
  background: rgba(255,255,255,.1) }  

.btn-white-10:hover,
.btn-white-10:active,
.btn-white-10:focus { 
  color: var(--color-default);
  background: rgba(255,255,255,1) }  

.btn-light { background: var(--color-light) }  

.btn-light:hover,
.btn-light:active,
.btn-light:focus { 
  color: #FFF;
  background: var(--color-dark) }  

.btn-outline-white {
  box-shadow: inset 0 0 0 1px #FFF;
  color: #FFF !important }  

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus { background: var(--color-primary); }  

.btn:active,
.btn:hover,
.btn:focus,
.swal2-styled:active,
.swal2-styled:hover,
.swal2-styled:focus { box-shadow: inset 0 0 0 100rem rgba(255,255,255,.23) !important }

.swal2-styled { box-shadow: none !important }

@media(max-width:767.98px){
  .btn-block { width: 100% }
}


.form-check-input:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.form-check-input:focus {
  border-color: rgb(241 136 18 / 25%);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(241 136 18 / 25%);
}




/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.icon { 
  display: inline-block;
  position: relative }

.icon-16 { width: 16px; height: 16px }
.icon-24 { width: 24px; height: 24px }
.icon-32 { width: 32px; height: 32px }
.icon-48 { width: 48px; height: 48px }
.icon-64 { width: 64px; height: 64px }
.icon-96 { width: 96px; height: 96px }
.icon-128 { width: 128px; height: 128px }
.icon-192 { width: 192px; height: 192px }

.icon.text-default    { fill: var(--color-default) }
.icon.text-primary    { fill: var(--color-primary) }
.icon.text-secondary  { fill: var(--color-secondary) }
.icon.text-black-25   { opacity: .25 }
.icon.text-white      { fill: #FFF }
.icon-whatsapp        { fill: #03B35B }



/* global
//////////////////////////////////////////////////////////////////////////////////////////*/
.fs-sm { font-size: 80% }
.fs-xs { font-size: 60% }

.opacity-25 { opacity: .25 }
.opacity-100 { opacity: 1 !important }

@media(min-width:768px){
  
  .rounded-md-3 { border-radius: 0.3rem }
  
  .position-md-fixed { position: fixed }
  
  .translate-md-middle-y { transform:translate(0,-50%) }
  
  .bg-md-white { background: #FFF }
  
  .bg-md-light { background: var(--color-light) }
  
  .rounded-start-md-3 {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem  }
    
  .scroll-md-y { overflow-y: scroll }
  
}

::-webkit-scrollbar { 
  padding: 1px;
  background: rgba(0,0,0,.125);
  height: .5rem;
  width: .5rem }

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb { padding: 2px }

::-webkit-scrollbar-thumb { background: var(--color-primary) }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary)  }



a.btn.d-none { 
  display: none;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  border-radius: 0;
  transform: translate(0,-50%) }

tr:hover a.btn.d-none { display: flex !important }

.word-wrap { word-wrap: break-word }

.table-atividades {
  width: 100%; /* Faz a tabela ocupar toda a largura disponível */
}

.table-atividades th {
  text-align: center; /* Centraliza o texto horizontalmente */
  vertical-align: middle; /* Centraliza o texto verticalmente */
  white-space: normal; /* Permite quebra de linha */
  word-wrap: break-word; /* Quebra palavras longas */
  overflow-wrap: break-word; /* Garante quebra de palavras no CSS moderno */
  height: 50px; /* Define altura fixa para os cabeçalhos */
  min-width: 65px; /* Define largura mínima */
  max-width: 65px; /* Define largura máxima, você pode ajustar conforme necessário */
}