.body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: auto;
}

.h1{
  margin: 90px 0px 50px 0px;
}
h1.h1{
  background-color: re;
}

.p-text-card{
  font-size: 0.75rem;
  margin-left: 20px;
}


.index-topbar{
  display: flex;
  width: 760px;
  height: 50px;
  /*height: 70px!important;
  position: sticky;
  top: 0;
  z-index: 999;*/
  align-items: center;
  background-color: re!important;
  background: var(--background-body);
}

.scrolled{
    display: none;
}

.card-global-content{
  display: flex;
  flex-direction: row;
  width: 100vw;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: blac;
  margin-bottom: 120px;
}
.card{
  display: flex;  
  flex-direction: column;     
  align-items: center;
  width: 200px;
  height: 100%;
  justify-content: center;
  background-color: var(--background-sections);
  border-radius: 25px;
  gap: 10px;
  padding: 20px
}


.banner-icon{
  align-items:;
  justify-content:;
  width: 100%;
  height: 110px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color:;
}
#baner-icon-green{
  border: 2px solid var(--back-green-principal);
}
#baner-icon-yellow{
  border: 2px solid var(--back-yellow-principal);
}
#baner-icon-blue{
  border: 2px solid var(--back-blue-principal);
}

.banner-infos{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  background-color: yello;
}
.section-banner-infos{
  background-color: re;
  display: flex;
  flex-direction: row;
  height: 25px;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
.section-banner-infos svg{
  width: 20px;
}

#icon-tempo-consumido-back{
  fill: var(--back-green-principal);
}
#icon-tempo-consumido-front{
  fill: var(--back-green-secundaria);
}

#icon-conversor-back{
  fill: var(--back-yellow-principal);
}
#icon-conversor-front{
  fill: var(--back-yellow-secundaria);
}

#icon-sono-back{
  fill: var(--back-blue-principal);
}
#icon-sono-front{
  fill: var(--back-blue-secundaria);
}

.medium-button{
    width: 100%;
    margin-top: 50px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

#green-medium-button{
  background-color: var(--back-green-ascendida);
}
#green-medium-button:hover{
  background-color: var(--back-green-ascendida-hover);
}
#yellow-medium-button{
  background-color: var(--back-yellow-ascendida);
}
#blue-medium-button{
  background-color: var(--back-blue-ascendida);
}
.topic-section{
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: -5px;
  margin-left: 20px;
}

/* esconde o radio nativo */
input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  top: auto;
  right: auto;
  left: 18.8px;
  width: 12px;
  height: 12px;
  background-color: var(--border-color);
  border-radius: 50%;
}
label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  margin-right: 10px;
}
/* estilo base dos labels */
label {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  background: ;
  font-size: 14px;
  transition: all 0.2s ease;
  user-select: none;
}

/* hover */
label:hover {
  background: var(--hover-bg);
}

/* quando selecionado */
input[type="radio"][name="theme"]:checked + label {
  border-color: var(--active-border);
}

/* modo escuro */
[data-theme="dark"] label {
  --border-color: #ccc; 
  --hover-bg: #333; 
  --active-border: #eee; 
}
[data-theme="light"] label {
  --border-color: black; 
  --hover-bg: #f4f4f4; 
}