*{
    user-select: none;
    margin: 0;
    padding: 0;
    font-family: 'Varela Round', sans-serif;
    
}
.pdfbtn{
    color: #404c57;
    font-size: 4vmin;
    right: 2vmin;
    border-top-right-radius: 2vmin;
    border-bottom-right-radius: 2vmin;
    box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
    border: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vmin;
    width:10vmin;
    transition: transform 600ms cubic-bezier(.2, 2, 1, 1), all 0.5s ease;

}
.pdfbtn1{
    color: #404c57;
    font-size: 3vmin;
    right: 5vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
    border: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vmin;
    width:8vmin;
    transition: transform 600ms cubic-bezier(.2, 2, 1, 1), all 0.5s ease;

}
body.dark-mode .pdfbtn{
    box-shadow: inset 5px 5px 10px #12192e, inset -5px -5px 10px #323d5f;
    background-color: #27375a;
    color: #d8d8d8;
}
.pdfbtn:active{
    transform: scale(.9);
}
body.dark-mode .pdfbtn1{
    box-shadow:  inset 5px 5px 10px  #2d3961,
    inset -5px -5px 10px#344a7a;
    background-color: #3b4f81;
    color: #d8d8d8;
}
.pdfbtn1:active{
    transform: scale(.9);
}
.missaoname{
    position: absolute;
    display: flex;
    align-items: center;
    left: 7vmin;
    height: 10vmin;
    width: 20vmin;
}
#pdf-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#pdf-overlay {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 90%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
}

#fechar-pdf {
  z-index: 1001;
  font-size: 18px;
  cursor: pointer;
  width: 6vmin;
  height: 6vmin;
  background-color: #dbdbe0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #404c57;
  margin-right: -1.25vmin;
  transition: all 0.5s ease;
  margin-top: .5vmin;
  position: absolute;
  right: -6vmin;
  top: -1vmin;
  border-radius: 100000000vmin;
}



img {
    -webkit-user-drag: none;
    user-drag: none;
}
#welcome-text span {
  display: inline-block;
  transition: transform 0.3s ease;
}
html, body{
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
.father{
    overflow: hidden;
    display: inline-block;
    background-color: #d5d9df;
    width: 100dvw; /* 100% da largura da viewport */
    height: 100dvh; /* 100% da altura da viewport */
    transition: all 0.5s ease;
   
}
#image-preview1{
    background-color: white;
    border: 2px solid rgba(255, 255, 255, 0.18);
}
#xpvalue{
    position: absolute;
    right: 2vmin;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 2vmin;
    font-weight: 600;
}
#posranking{
    font-weight: 1000;
    width: 2.5vmin;
    text-align: center;
}
#name{
    font-size: 1.8vmin;
    font-weight: 600;
} 
body.dark-mode .father {
    background-color: #182035; /* Preto azulado */
}
.right-father{
    overflow: hidden;
    margin-top: 3vmin;
    height: 89vh;
    width: 55vw;
    margin-left: -3vmin;
}
.widgets-livros{
    width: 70vw;
    height: 47vmin;
    margin-top: 2.5vh;
    margin-left: 4vmin;
    display: flex;
    flex-direction: row;
    
}
.conteiner-livros {
    width: 2000vw;
    height: 50vh;
    overflow: hidden;
    position: relative;
    display: flex;
    padding: 0;
    margin-top: -2vmin;
    align-items: center;
    justify-content: center;
}
.livros{
    padding-top: 2vh;
    width: 42vw;
    height: 43vh;
}
.livros, .calendario {
    color: #404c57;
    background-color: #F0F0F3;
    border-radius: 5vmin;
    border: 4px solid #bcc2d1e0;
    box-shadow: 5px 5px 10px rgb(176, 185, 199, 0.5),
                -5px -5px 10px rgb(221, 221, 221, 0.5);
    transition: opacity 0.75s ease, transform 1s ease, all 0.5s ease;
}
.pagination-dots {
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    position: absolute;
    left: 50%;
    bottom: 3.5vmin;
    padding: 1vh;
    transform: translateX(-50%);
    display: flex;
    border-radius: 10000000vh;
    gap: 10px;
    background-color: #f0f0f3;
    transition: all 0.5s ease;
}
body.dark-mode .pagination-dots, body.dark-mode .pagination-dots1{
    background-color:hsl(223, 32%, 35%);
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
}
.pagination-dots1{
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    background-color: #f0f0f3;
    padding: 1vh;
    margin-left: 12.5%;
    border-radius: 100000000vh;
    position: absolute;
    left: 41%;
    bottom: 3vmin;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    transition: all 0.5s ease;
}
.dot1, .dot{
    width: 1vmin;
    height: 1vmin;
    border-radius: 50%;
    background-color: #cecece;
    transition: background-color 0.5s ease;
}
body.dark-mode .dot {
    background-color: gray;
}
body.dark-mode .dot1 {
    background-color: gray;
}
body.dark-mode .dot.active{
    background-color: white;
}
body.dark-mode .dot1.active{
    background-color: white;
}
.dot1.active,.dot.active {
    transition: all 0.5s ease;
    background-color: #9c9cb3;

}
.right-father {
    display: grid;
    position: relative;
}
.leaderboard{
    opacity: 0;
    position: absolute;
}
.menu-right.active, .leaderboard.active {
    transition: transform .75s ease, opacity 0.75s ease, all 0.5s ease;
    opacity: 1;
}
.first{
    transition: all 0.5s ease;
    background-color: #b0b9c7;
}
body.dark-mode .first{
    background-color: #4368c7;
    margin: 0;
     gap: 0;
}
td{
    user-select: none;
    text-align: center;
    font-size: 3vmin;
}
.day{
    font-size: 2.5vmin;
    margin-right: 1vmin;
    width: 4vmin;
    height: 4vmin;
}
th{
    user-select: none;
    font-size: 3vmin;
    font-weight: 100;
}
.first th:first-child {
  /* Primeiro th */
  border-top-left-radius: 1000vmin;
  border-bottom-left-radius: 1000vmin;
}
.first th:last-child {
  /* Último th */
  border-top-right-radius: 10000vmin;
  border-bottom-right-radius: 10000vmin;
}
.table{
    display: flex;
    align-items: center;
    justify-content: center;
    border-collapse: collapse;
}
.calendario {
    position: relative;
    width: 42vw;
    height: 45vh;
    opacity: 0;
    margin-left: -1.75vmin;
    position: absolute;
    left: 100%;
}
#calendar, #calendar1{
    display: grid;
    align-items: center;
    justify-content: center;
    width: 34vh;
    height: 41vh;
}
#calendar2 {
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0.8vw;
    bottom: 1.5vh;
    width: 34vh;
    height: 42vh;
    background-color: #e2e2e7;
    border-radius: calc(5vmin - 1.5vh);
    box-shadow: 2px 2px 5px #b0b9c7, -2px -2px 5px #dddddd;
}
.todo{
    user-select: none;
}
.p{
    user-select: none;
}
.border {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 3vmin;
  transition: all 0.5s ease;
  height: 36vh;
  width: 0;
  border: 2px solid #b0b9c7;
  border-radius: 10px;
}
/* wrapper da semana */

/* cabeçalho da semana: border + botão lado a lado */
.semana-header {
    margin-bottom: 2vmin;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* a borda que você pediu no TOPO */
.border1top1 {
    margin-left: 1vmin;
    transition: all 0.5s ease;
    height: 0;           /* linha fininha */
    width: 2vh;
    border: 2px solid #bcc2d1e0;
    border-radius: 10px;
}
.border1top2 {
    transition: all 0.5s ease;
    height: 0;           /* linha fininha */
    width: 32vh;
    border: 2px solid #bcc2d1e0;
    border-radius: 10px;
}

/* área que colapsa */
.semana-content {
    overflow: hidden;
    transition: max-height 0.75s ease;
}

/* botão seta */
.toggle-semana {
    background: none;
    color: #667394e0;
    border: none;
    font-size: 2vmin;
    cursor: pointer;
    line-height: 1;
    transform-origin: center;
    transform: rotate(-180deg);
    transition: transform .5s ease;
}

/* gira a seta quando fechado */
.toggle-semana.rotated {
    transform: rotate(-360deg);
}

body.dark-mode .border1top1{
    border-color: #6c7faf;
}
body.dark-mode .border1top2{
    border-color: #6c7faf;
}
body.dark-mode .toggle-semana{
    color: #869bd1;
}
#calendar3{
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1.5vh;
    bottom: 1.5vh;
    width: 34vh;
    height: 42vh;
    background-color: #e2e2e7;
    border-radius: calc(5vmin - 1.5vh);
    transition: all 0.5s ease;
    box-shadow: 2px 2px 5px #b0b9c7, -2px -2px 5px #dddddd;
}
body.dark-mode #calendar2{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
    background-color: #2b385a;
}
body.dark-mode #calendar3{
    color:#d8d8d8; /* Preto azulado */
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
    background-color: #2b385a;
}
.mescalendario, .mescalendario1{
    user-select: none;
    font-size: 3.5vmin;
    text-align: center;
    text-transform: capitalize;
}
.dia-atual {
    transition: all 0.5s ease;
    position: relative;
    background-color: #94a8ca;
    border-radius: 100%;
}
body.dark-mode .dia-atual {
    position: relative;
    background-color: #4368c7;
    border-radius: 100%;
}
body.dark-mode .border{
    border-radius: 10px;
    border-color: #374975;
}
.livros-lidos{
    font-size: 1.5vmin;
    position:absolute;
    margin-top: 1vmin;
    align-items: center;
    width: 42vw;
    height: 44vh;
    float: left;
    padding-left: 1vw;
    
}
body.dark-mode .ball{
    box-shadow: 5px 5px 10px #0a111a, -5px -5px 10px #1f2736;
}
.ball{
    position: absolute;
    left: 1.35vw;
    bottom: 1.35vw;
    background-color: red;
    display: none;
    width: 0.75vw;
    height: 0.75vw;
    z-index: 999999999;
    border-radius: 100%;
}
body.dark-mode .ball1{
    box-shadow: 5px 5px 10px #0a111a, -5px -5px 10px #1f2736;
}
.ball1{
    position: absolute;
    left: 14vw;
    margin-bottom: 2.75vw;
    background-color: red;
    display: none;
    width: 1vw;
    height: 1vw;
    z-index: 999999999;
    border-radius: 100%;
}
#bibigear{
    margin-top: .5vmin;
    margin-right: 1.5vmin;
}
.Sistemática2{
    display: flex ;
    background-color: #f0f0f3;
    border-radius: 3vmin;
    font-size: 3.5vmin;
    font-weight: 600;
    width: 23vw;
    height: 6vh;
    color: #404c57;
    margin-top: 1vmin;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.Sistemática3{
    display: flex ;
    background-color: #dbdbe0;
    border-radius: 2vmin;
    font-size: 2.5vmin;
    font-weight: 600;
    width: 21.5vw;
    height: 5vh;
    margin-top: 1.25vmin;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
body.dark-mode .Sistemática2{
    background-color: #2b385a;
    color: #d8d8d8;
}
body.dark-mode .Sistemática3{
    background-color: #405383;
    color: #d8d8d8;
}
.containermissoes{
    transition: background-color 0.5s ease;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-top: 2vh;
    margin-top: 1vmin;
    border-radius: 2vmin;
    background-color: #dbdbe0;
    width: 19.5vw;
    height: 30vh;
}
body.dark-mode .containermissoes{
    background-color: #405383;
}
.missao1, .missao2, .missao3{
    font-size: 2.5vmin;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
    background-color: #f0f0f3;
    width: 19.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1vmin;
    height: 8vh;
}
body.dark-mode .missao1{
    background-color: #495e92;
}
body.dark-mode .missao2{
    background-color: #495e92;
}
body.dark-mode .missao3{
    background-color: #495e92;
}
.missao2, .missao3{
    margin-top: 2vh;
}
#menuzinho{
    display: grid;
    opacity: 0;
    border-radius: 5vmin;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background-color: #dee0e4;
    width: 25vw;
    height: 0vh;
    border: 4px solid rgba(188, 194, 209, 0.88);
    box-shadow: 5px 5px 10px rgb(176, 185, 199, 0.5),
                -5px -5px 10px rgb(221, 221, 221, 0.5);
    position: absolute;
    margin-top: 9vmin;
    right: 3vmin;
    overflow: hidden;
    transition: all 0.5s ease, height 1s ease;
}
.missoes2{
    display: grid;
    justify-content: center;
    width: 23vw;
    height: 42vh;
    margin-bottom: 0.75vmin;
    border-radius: 3vmin;
    background-color: #f0f0f3;
    transition: all 0.5s ease;
}
body.dark-mode .missoes2{
    background-color: #2b385a;
}
#missoes{
    overflow: hidden;
    display: none;
    opacity: 0;
    background-color: #f0f0f3;
    width: 0vmin;
    height: 42vh;
    border: 1px solid rgba(188, 194, 209, 0.88);
    box-shadow: 5px 5px 10px #a3acbb,
    -5px -5px 10px #cccccc;
    position: absolute;
    margin-top: 13vmin;
    right: 3vmin;
    bottom: 5vmin;
    z-index: 100;
    transition: all 0.5s ease;
    border-radius: 5vmin;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
    /* Quando ativos */
    @media only screen and (min-width: 600px){
        #menuzinho.ativo {
            opacity: 1;
            height: 84vh;
    }
}   
.trabalhos{
    margin-bottom: -3vmin;
}
body.dark-mode .livros,
body.dark-mode .widget1,
body.dark-mode .widget2,
body.dark-mode .widget3,
body.dark-mode .calendario {
    background-color: #182035;
    color:#d8d8d8; /* Preto azulado */
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
}
.widget2, .widget3{
    
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
.widget3{
    display: grid;
}
.dont-upload{
    text-align: center;
    font-size: 1.5vmin;
    background-color: #bac1cf;
    border-radius: 1.5vh;
    border: 0;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position: absolute;
    bottom: 1.5vmin;
    width: 36vh;
    transition: all 0.5s ease;
}
body.dark-mode .dont-upload{
    text-align: center;
    font-size: 1.5vmin;
    color: white;
    background-color: #576faa;
    border-radius: 1.5vh;
    border: 0;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position: absolute;
    bottom: 1.5vmin;
    width: 36vh;
}
.upload-button{
    color: white;
    font-size: 1.5vmin;
    background-color: #34c759;
    border-radius: 1.5vh;
    border: 0;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position: absolute;
    bottom: 1.5vmin;
    width: 36vh;
    transition: all 0.5s ease;
}
.leaderboard,.menu-right{
    z-index: 0;
    margin-left: 5vmin;
    margin-right: -62vmin;
    background: #dee0e4;
    border-radius: 5vmin;
    color: #464f57;
    border: 4px solid rgba(188, 194, 209, 0.88);
    box-shadow: 5px 5px 10px rgb(176, 185, 199, 0.5),
                -5px -5px 10px rgb(221, 221, 221, 0.5);

    display: block;
    height: 84vh;
    width: 25vw;
    justify-items: center;
    transition: all 0.5s ease, transform 0.75s ease, opacity 0.75s ease;
}
body.dark-mode .leaderboard{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    background-color: #182035;
    border-color: rgba(255, 255, 255, 0.18); 
}
body.dark-mode .menu-right{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    background-color: #182035;
    border-color: rgba(255, 255, 255, 0.18); 
}
body.dark-mode .Sistemática{
    background-color: #2b385a;
    color: #d8d8d8;
}
.nome-e-conta{
    .button{
        margin-right: 1vmin;
        width: 4vmin;
        color: #404c57;
        height: 4vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        
    }
    .button:hover{
        cursor: pointer;
        
    }
    
    display: flex;
    align-items: center;
    background-color: #e5e9f0;
    padding-left: 1vw;
    color: #464f57;
    width: 99vw;
    height: 6vh;
    border-bottom: 2px solid rgba(188, 194, 209, 0.88);
    transition: all 0.5s ease;
}
#bi-bi-box-arrow-right{
    font-size: 3vmin;
    transition: all 0.5s ease;
}
body.dark-mode #bi-bi-box-arrow-right{
    color:white;
}
body.dark-mode .nome-e-conta{
    background-color: #1e2a47;
    border-color: rgba(255, 255, 255, 0.18);
    color:#d8d8d8;
}
.widgets{
    transition: opacity 0.5s ease;
    display: grid;
    grid-template-columns: 1fr 1fr; /* duas colunas */
    grid-template-rows: auto auto; /* duas linhas */
    grid-gap: 2vmin;
    margin-right: 2vmin;
    width: 46vmin;
    height: 46vmin;
}
/*.eventos {
    scroll-behavior: smooth;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f0f0f3;
    color: #404c57;
    border-radius: 3vmin;
    width: 23vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    transition: all 0.5s ease;}*/
.eventos{
    margin-top: 1.5vmin;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
    padding-top: 1.5vmin;
    padding-bottom: 1vmin;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f0f0f3;
    color: #404c57;
    border-radius: 3vmin;
    width: 23vw;
    height: 70vh;
    display: flex; /* Alteração para flexbox */
    flex-direction: column;
    align-items: center;
    gap: 1.9vh; /* Espaçamento entre os elementos */
    transition: all 0.5s ease;
}
.eventos1{
    margin-top: .75vmin;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
    padding-top: 1.25vmin;
    padding-bottom: 2vmin;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f0f0f3;
    color: #404c57;
    border-radius: 3vmin;
    width: 23vw;
    height: 70vh;
    display: flex; /* Alteração para flexbox */
    flex-direction: column;
    align-items: center;
    gap: 1.9vh; /* Espaçamento entre os elementos */
    transition: all 0.5s ease;
}
.prova, .person {
    margin-bottom: 1vh;
    padding-left: 2vmin;
    background-color: #dbdbe0;
    border-radius: 2vmin;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.5vh;
    width: 20vw;
    transition: background-color 0.5s ease;
}
.reactions-menu {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 10px;
  border-radius: 50px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1000;
}

.reactions-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.reactions-menu img {
  height: 4vmin;
  width: 4vmin;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.reactions-menu img:hover {
  transform: scale(1.3) translateY(-4px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.reaction-sticker {
    position: absolute;
    top: -3vmin;
    user-select: none;
    font-size: 3.5vmin;
    right: 9vmin;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    animation: pop-in 0.3s ease;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.emoji-img{
    width: 6vmin;
}
.reaction-sticker:hover,
.reaction-sticker.active {
  transform: scale(1.2) translateY(-4px) rotate(-15deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}


@keyframes pop-in {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

.upload-section{
    padding-top: 5vmin;
    font-size: 2.5vmin;
    font-weight: 600;
}
#uploaded-image{
    height: 12vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
.upload-section.hidden {
    transform: translateX(-100%); /* Sai para a esquerda */
    opacity: 0;
  }
/* 🔹 Entrada suave da imagem e dos botões */
.uploaded-image, .correct-button, .incorrect-button {
    transform: translateX(0); /* Começam fora da tela (direita) */
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
.uploaded-image.show, .correct-button.show, .incorrect-button.show {
    opacity: 1;
    transform: translateX(0); /* Vêm para a posição normal */
  }
.xp-message {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(0, 255, 0);
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
    width: 100%;
    margin-top: 10px;
  }
.mes{
    justify-content: center;
    text-align: center;
    font-size: 1.7vh;
}
.dia{
    text-align: center;
    font-size: 4vh;
}
.data{
    width: 12vw;
    align-items: center;
    justify-content: center;
}
.check{
    position: absolute;
    z-index: 2;
    opacity: 1;
    width: 12vh;
    transition: opacity 0.5s ease;
}
.event{
    font-size: 1.9vmin;
    margin-left: 1vw;
    padding-right: 1vh;
    align-content: center;
    width: 20vw;
    height: 8vh;
}
.cancel{
    opacity: 0;
    z-index: 1;
    width: 12vh;
    transition: all 0.5s ease, filter 0.5s ease;
    filter:brightness(120%);
}
body.dark-mode .cancel{
    filter: sepia(100%) saturate(225%) brightness(80%) hue-rotate(185deg);
}
.concluido{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease,
                box-shadow 200ms, 
                transform 600ms cubic-bezier(.2, 2, 1, 1), 
                box-shadow 0.5 ease; /* anima a mudança de opacidade */
    border-width: 0;
    box-shadow:  inset 5px 5px 10px #d1d9e6,
    inset -5px -5px 10px #ffffff;
    width: 9vh;
    border-top-right-radius: 2vmin;
    border-bottom-right-radius: 2vmin;
    height: 10vh;
    background-color: rgb(240, 240, 240);
    transition: all 0.5s ease;
}
.feita{
    opacity: 0; /* estado inicial invisível */
    transform-origin: top center;
    will-change: transform, clip-path, opacity;
    transition: opacity 0.5s ease; /* fade suave ao esconder */
    /* display continua sendo controlado por JS */
    backface-visibility: hidden;
    font-size: 1vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 10vh;
    width: 10vh;
}
/* Classe que dispara a "queda do pano" */
.feita.feita-drop {
  animation: feitaDrop 1000ms cubic-bezier(.22,1,.56,1) forwards;
}

/* Keyframes que simulam "pano estendido" */
@keyframes feitaDrop {
  0% {
    transform: translateY(0px) scaleY(0.45);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 85%, 10% 85%, 0 70%);
    opacity: 1;
  }
  60% {
    transform: translateY(0px) scaleY(1.17);
    clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 12% 100%, 0 92%);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%);
    opacity: 1;
  }
}

/* Fallback para navegadores que não animam clip-path bem.
   Usa só uma descida + fade mais simples. */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .feita.feita-drop {
    animation: feitaDropFallback 1000ms cubic-bezier(.22,1,.36,1) forwards;
  }
  @keyframes feitaDropFallback {
    0% {
      transform: translateY(-24px) scaleY(0.95);
      opacity: 0;
    }
    100% {
      transform: translateY(0) scaleY(1);
      opacity: 1;
    }
  }
}


body.dark-mode .eventos{
    background-color: #2b385a;
    /*scrollbar-color:#d8d8d8 transparent;*/
}
body.dark-mode .eventos1{
    background-color: #2b385a;
    scrollbar-color:#d8d8d8 transparent;
}
.widget1{
    grid-column: 1;
    grid-row: 1;
}
.widget2{
    grid-column: 2;
    grid-row: 1;
}
.widget1, .widget2{
    background-color:#f0f0f3;
    height: 21vmin;
    color: #404c57;
    width: 21vmin;
    border-radius: 5vmin;
    border: 4px solid rgba(188, 194, 209, 0.88);
    box-shadow: 5px 5px 10px rgb(176, 185, 199, 0.5),
                -5px -5px 10px rgb(221, 221, 221, 0.5);
    transition: all 0.5s ease;
}
.widget3{
    grid-column: 1 / 3; /* ocupa da coluna 1 até antes da 3 (ou seja, duas colunas) */
    grid-row: 2;
    background-color:#f0f0f3;
    height: 21vmin;
    color: #404c57;
    width: 44vmin;
    border-radius: 5vmin;
    border: 4px solid rgba(188, 194, 209, 0.88);
    box-shadow: 5px 5px 10px rgb(176, 185, 199, 0.5),
                -5px -5px 10px rgb(221, 221, 221, 0.5);
    transition: all 0.5s ease;
}
.widget1{
    .trabalhos{
        text-align: center;
        font-size: 1.65vmin;
        width: 18vmin;
    }

    display: grid;
    align-items: center;
    justify-items: center;
}
.toggle-container {
    border-radius: 2vmin;
    transition: all 0.5s ease;
    background-color: #f0f0f3;
    display: flex;
    justify-content: start;
    padding-left: 1.5vmin;
    align-items: center;
    height: 6vmin; /* Para centralizar verticalmente */
}
body.dark-mode .toggle-container{
    background-color: #2b385a;
    color: #d8d8d8;
}
.toggle-input {
    display: none;
}
.darkmodehuh{
    font-size: 2vmin;
}
#bibimoon{
    margin-right: 0.5vmin;
    font-size: 3vmin;
}
#alterphoto{
    border-radius: 2vmin;
    transition: all 0.5s ease;
    background-color: #f0f0f3;
    border: none;
    height: 6vmin;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 1.5vmin;
    padding-right: 1vmin;
}
#notifications{
    font-size: 2vmin;
    border-radius: 2vmin;
    transition: all 0.5s ease;
    background-color: #f0f0f3;
    border: none;
    height: 6vmin;
    display: flex;
    align-items: center;
    padding-right: 1vmin;
    justify-content: start;
    padding-left: 1.5vmin;
}
#bibiperson, #bi-bi-bell{
    font-size: 3vmin;
    margin-right: 1vmin;
}
.p-foto{
    font-size: 2vmin;
}
body.dark-mode #logout-btn{
    background-color: #4368c7;
    color: #d8d8d8;
}
body.dark-mode #alterphoto{
    background-color: #2b385a;
    color: #d8d8d8;
}
body.dark-mode #notifications{
    background-color: #2b385a;
    color: #d8d8d8;
}
#logout-btn{
    border-radius: 2vmin;
    transition: all 0.5s ease;
    background-color: #98b6eb;
    border: none;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 1.5vmin;
    padding-right: 4vmin;
    height: 6vmin;
}
.disconect{
    margin-left: 1vmin;
    font-size: 2.25vmin;
}
#closee{
    margin-top: .5vmin;
    width: 5vmin;
    height: 5vmin;
    background-color: #f0f0f3;
    display: flex;
    position: absolute;
    right: 4vmin;
    border-radius: 100000000vmin;
    align-items: center;
    justify-content: center;
    border: none;
    color: #404c57;
    transition: all 0.5s ease;
}
body.dark-mode #closee{
    background-color: #2b385a;
    color:#d8d8d8; /* Preto azulado */
}
#bix{
    font-size: 5vmin;
}
body.dark-mode #menuzinho{
    background-color: #182035;
    color:#d8d8d8; /* Preto azulado */
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
}
body.dark-mode #missoes{
    background-color: #182035;
    color:#d8d8d8; /* Preto azulado */
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
}
.toggle {
    right: 5vmin;
    width: 6vmin;
    height: 3.5vmin;
    background-color: #b6b6b6;
    border-radius: 3000vw;
    box-shadow: 1.5px 0px 8px hsla(0, 0%, 0%, 0.075);
    position: absolute;
    cursor: pointer;
    transition: background-color 0.5s ease;
}
.toggle::before {
    content: '';
    width: 3vmin;
    height: 3vmin;
    box-shadow: -1.5px 0px 8px hsla(0, 0%, 0%, 0.1);
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 0.25vmin;
    left: 0.25vmin;
    transition: transform 0.5s ease;
} 
.toggle-input:checked + .toggle {
    background-color: #34c759;
} 
.toggle-input:checked + .toggle::before {
    transform: translateX(2.55vmin);
}
#calendario, #trophy{
    padding-right: 1vh;
}
.Sistemática{
    display: flex ;
    background-color: #f0f0f3;
    border-radius: 3vmin;
    font-size: 3.5vmin;
    font-weight: 600;
    width: 23vw;
    height: 6vh;
    color: #404c57;
    margin-top: 2vmin;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.atvfeita{
    color: white;
    padding-top: 5px;
    align-content: center;
    text-align: center;
    overflow:hidden;
    height: 100px;
    width: 82px;
}
#add-prova-button{
    margin-left: 1vmin;
    border-radius: 100000vmin;
    width: 25vmin;
    margin-left: 7vmin;
    height: 5vmin;
    font-size: 3vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #34c759;
    border: 2px solid #34c759;
    display: block;
}
body.dark-mode .prova{
    background-color: #405383;
    color: #d8d8d8;
}
body.dark-mode .person{
    background-color: #405383;
    color: #d8d8d8;
}
.concluido.ativo .check,
.concluido.ativo .cancel {
  transform: scale(0.75);
  transition: transform 0.15s ease;
}

.concluido:hover{
    cursor: pointer;
}
.click:hover{
    cursor:pointer;
}
body.dark-mode .concluido{
    box-shadow:  inset 5px 5px 10px  #2d3961,
    inset -5px -5px 10px#485a80;
    background-color: #3b4f81;
}
.clicks{
    text-decoration: none;
}
.click{
    white-space:nowrap;
    font-size: 1.75vmin;
    border: none;
    background-color:#d6d6dd;
    border-radius: 2000vw;
    margin-top: -1.3vh;
    color: #404c57;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 8px 8px 12px 0 #bac1cf, -12px -12px 16px 0 #ebf2fc, inset 0 0 0 0 transparent;
    transition: transform 0.3s cubic-bezier(.2,2,1,1), background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
    width: 18vmin;
    height: 6vmin;
}
body.dark-mode .click{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    background-color:#374975;
    color: #ffffff;
}
.click:active {
    transform: scale(.9);
  }
#logout-bt{
    position: absolute;
    left: 1vw;
}
.dfather{
    display: flex;
    align-items: end;
    justify-content: center;
    width: 18.75vmin;
    border-radius: 2vmin;
    height: 12vmin;
}
.d2, .d1{
    margin-right: 1.5vmin;
    background-color: #6d92d1;
    box-shadow: 0px 0px 15px #97a8c5;    
}
body.dark-mode .d2{
    background-color: #4368c7;
    box-shadow: 0px 0px 15px #4368c7;
}
body.dark-mode .d1{
    background-color: #4368c7;
    box-shadow: 0px 0px 15px #4368c7;
}
.d0 h2, .d1 h2, .d2 h2{
    font-size: 1.5vmin;
    display: flex;
    position: absolute;
    margin-top: -2.5vmin;
    margin-left: 1.9vmin;
}
body.dark-mode .d0{
    background-color: #1746bd;
    box-shadow: 0px 0px 15px #1746bd;
}
.d0{
    background-color: #3b5db3;
    box-shadow: 0px 0px 15px #3b5db3;
}
.dg1, .dg2, .dg3 {
    position: relative; /* Define o contexto de posicionamento para os elementos filhos */
    display: flex;
    align-items: end;
    height: 15vmin;
}
.dg1, .dg2{
    margin-right: 1vmin;
}
.d0, .d1, .d2 {
    transition: all 0.5s ease;
    position: absolute; /* Permite posicionar acima de .d3 */
    bottom: 0; /* Alinha a base dos elementos ao fundo do container pai */
    text-align: center;
    border-radius: 1.25vmin;
    width: 4.5vmin;
    z-index: 1; /* Garante que .d0, .d1, .d2 estejam acima de .d3 */
}
.d3 {
    background-color: #cbd7eb;
    transition: all 0.5s ease;
    width: 4.5vmin;
    border-radius: 1.25vmin;
    height: 10vmin;
    z-index: 0; /* Coloca .d3 abaixo de .d0, .d1 e .d2 */
}
body.dark-mode .d3{
    background-color: #101627;
}
#bemvindotext{
    display: flex;
    margin-right: 1vw;
    text-align: center;
    font-size: 3vmin;
}
#bemvindotext span {
  display: inline-block;
}

#welcome-text span {
  opacity: 0;
  transform: translateY(-20px);
  filter: blur(5px);
  transition: all 0.4s ease;
}

#welcome-text span.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

#username-text {
  opacity: 0;
  filter: blur(5px);
  transition: all 0.5s ease;
}

#username-text.show {
  opacity: 1;
  filter: blur(0);
}

.task {
    display: flex; /* Alinha o texto e o botão em linha */
    justify-content: space-between; /* Coloca o texto à esquerda e o botão à direita */
    align-items: center; /* Centraliza verticalmente */
    padding: 1vmin; /* Adiciona um espaço interno */
    height: auto; 
    min-height: 2vmin;
    width: 20vmin;/* Permite que a altura se ajuste ao conteúdo */
    max-width: 42vw; /* Limita a largura máxima da task */
    font-size: 2vmin;
    background-color: #d0d4dde0;
    border-radius: 1vmin;
    word-wrap: break-word; /* Quebra palavras grandes */
    white-space: normal; 
    transition: background-color 0.5s ease;/* Permite quebra de linha */
}
body.dark-mode .task{
    background-color: #405383;
}
.task p {
    font-size: 2vmin;
    margin-right: 1vmin;
    overflow-wrap: break-word; /* Força a quebra de palavras grandes */
    word-break: break-word; /* Garante que palavras grandes sejam quebradas */
    width: 100%; /* Faz com que o texto use todo o espaço disponível */
}
.buttonnn{
    display: flex;
    padding-top: 0.1vmin;
    align-items: center;
    justify-content: center;
    background-color:#89a4e800;
    border-radius: 50vmin;
    border: none;
    float: right;
    font-size: 2.5vmin;    
    color: #2b385a;
    transition: all 0.5s ease;
}
body.dark-mode .buttonnn{
    color: white;
}
.iconn{
    font-size: 2vw;
    padding-left: 1vw;
    justify-content: left;
}
.content--add-item{
    margin-top: 1vmin;
    display: flex;
    justify-content: start;
}
#input-new-task{
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding-left: 1vw;
    font-size: 1vw;
    outline: none;
    height: 3vw;
    width: 23vw;  
    border-radius: 0.5vw;
    transition: all 0.5s ease;

}
#input-new-task::placeholder{
    user-select: none;
    transition: all 0.5s ease;
}
body.dark-mode #input-new-task::placeholder {
    color: rgb(255, 255, 255);
  }
body.dark-mode #input-new-task{
    background-color:#405383;
    color: #ffffff;
}
#btn-new-task{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 4vmin;
    outline: none;
    background-color: white;
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    color: rgb(0, 0, 0);
    border-radius: 0.5vw;
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    transition: all 0.5s ease;
}
body.dark-mode #btn-new-task{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    background-color:#405383;
    color: #ffffff;
}
#btn-new-task:hover{
    background-color: rgba(255, 255, 255, 0.514);
}
.button-addbook-div{
    float: left;
    width: 3vw;
    height: 3vw;
    margin-right: 2vmin;
}
.input-div{
    border-radius: 0.5vw;
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    height: 3vw;
    width: 24vw;
    margin-right: 1vw;
    transition: all 0.5s ease;
}
body.dark-mode .input-div{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
}
.content--body {
    user-select: none;
    border-radius: 1vmin;
    overflow-y: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria novas colunas automaticamente */
    gap: 1.5vmin; /* Espaço entre os itens */
    width: 40vw; /* Largura total do container */
    max-height: 28vh; /* Altura máxima do container */
    grid-auto-rows: min-content; /* Ajusta a altura das linhas de acordo com o conteúdo */
    margin-top: 1vmin;
}
@keyframes shake {
    50%{
        transform: rotate(-25deg);

    }
    100%{
        transform: rotate(360deg);
    }
}
#btn-new-task-icon:hover{
    animation: shake 1s ease;
}
#btn-new-task-icon{
    width: 6vmin;
    height: 6vmin;
    margin-top: 0.5vmin;
    padding-top: 1vmin;
}
#provFormModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escurecido */
    display: none; /* Inicialmente escondido */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Fica por cima de todos os outros elementos */
  }
#provFormContent {
    height: 25vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
    display: grid; /* Inicialmente escondido */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Fica por cima de todos os outros elementos */
  }
#image-preview-container{
    border-radius: 100%;
    right: 5vmin;
    position: absolute;
    width: 4vmin;
    height: 4vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode #image-preview{
    box-shadow: 5px 5px 10px #0a111a,
    -5px -5px 10px #1f2736;
    border-color: rgba(255, 255, 255, 0.18);
}
#image-preview{
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 100%;
    width: 4vmin;
    height: 4vmin;
    transition: 0.5s all ease;
}
.nomeuser{
    font-weight: 1000;
    font-size: 3vh;
    text-align: center;
}
#image-preview-container1{
    border-radius: 100%;
    width: 15vmin;
    height: 15vmin;
    margin-top: 2vh;
    margin-bottom: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#image-preview1{
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 100%;
    width: 15vmin;
    height: 15vmin;
    transition: 0.5s all ease;
}
.paidenome, .paideemail{
    width: 25vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edit-input {
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin: 5px 0;
    font-size: 14px;
    display: block;
}
.edit-name-fields{
    justify-content: space-evenly;
} 
#edit-btn{
    height: 3vh;
    margin-left: 1vmin;
    border-radius: 100%;
    width: 3vh;
    font-size: 1.5vmin;
    border: none;
}
#edit-auth-btn{
    display: none;
    height: 2vh;
    border-radius: 100%;
    width: 2vh;
    font-size: 0.9vmin;
    border: none;
}
#upload-overlay{
    position: fixed; /* Fixa a sobreposição na tela */
    top: 0;
    overflow: hidden;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    left: 0;
    width: 10px;
    height: 10px;
    display: flex;
    overflow: scroll;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Coloca a sobreposição no topo */
}
#upload-label{
    transition: transform 0.3s cubic-bezier(.2,2,1,1), background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: -12.75vh;
    margin-right: -10vh;
    background-color: #f0f0f3;
    color: #6d92d1;
    width: 5vh;
    height: 5vh;
    border-radius: 100%;
}
#bibipencil{
    font-size: 2vmin;
}
.textotopo{
    margin-top: 12vmin;
    margin-right: 30vmin;
}
#uploaded-image {
    width: 20vmin; /* miniatura menor */
    height: 20vmin;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.3s;
}
#uploaded-image:hover {
    transform: scale(1.1);
}
#image-popup {
    display: none; /* começa escondido */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* fundo escuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#popup-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transition: transform 0.3s;
}
#upload-container {
    opacity: 0;
    transition: all 0.5s ease;
    overflow: hidden;
    background-color: #dee0e4;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 3.1vmin;
    bottom: 6.25vmin;
    border-radius: 5vmin;
    border: 2px solid rgba(188, 194, 209, 0.88);
    transition: all 0.5s ease;
    height: 84vh;
    width: 25vw;
    z-index: 999999999999;
    position: fixed;
    text-align: center;
}
body.dark-mode .image{
    background-color: #2b385a;
}
.image{
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f0f0f3;
    width: 23vw;
    height: 80vh;
    border-radius: 3vmin;
}
body.dark-mode .image1{
    background-color: #405383;
    color: #d8d8d8;
}
.image1{
    transition: all 0.5s ease;
    margin-top: 1vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #dbdbe0;
    width: 21vw;
    border-radius:0.7vw;
    height: 15.4vw;
}
  #file-upload {

    margin-bottom: 10px;
}
body .dark-mode #upload-button{
    border: none;
    background-color: #485d80;
    color: #d8d8d8;
    width: 20vmin;
    height: 6vmin;
    border-radius: 1vmin;
}
#upload-button:active{
    transform: scale(.9);
}
#close-overlay:active{
    transform: scale(.9);
}
body.dark-mode #image-preview1 {
    box-shadow: 5px 5px 10px hsla(214, 44%, 7%, 0.5), -5px -5px 10px hsla(219, 27%, 17%, 0.5);
    border-color: rgba(255, 255, 255, 0.18);
}
body.dark-mode #close-overlay{
    border: none;
    color: #d8d8d8;
    background-color: #2b385a;
    border-radius: 1vmin;
    border-top-right-radius: 2.5vmin;
    transition: all 0.5 ease;
}
#close-overlay{
    transition: transform 0.3s cubic-bezier(.2,2,1,1), background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
    border: none;
    position: fixed;
    top: 11.5vh;
    right: 5.25vh;
    background-color: #f0f0f3;
    color: #574c40;
    width: 5vmin;
    height: 5vmin;
    font-size: 2.5vmin;
    border-radius: 1vmin;
    border-top-right-radius: 10000vmin;
    transition: all 0.5 ease;
}
body.dark-mode #upload-container{
    background-color: #182035;
    border-color: rgba(255, 255, 255, 0.18);
    color: #d8d8d8;
    transition: all 0.5 ease;
}
body.dark-mode .messageTxtfalse, body.dark-mode .messageTxttrue{
    color: #d8d8d8;
}
#save-btn{
    border: 0;
    background-color: #f0f0f3;
    width: 6vh;
    height: 3vh;
    align-items: center;
    justify-content: center;
    border-radius: 1vh;
    box-shadow: 5px 5px 10px #b0b9c7,
    -5px -5px 10px #dddddd;
}
.content {
    display: flex; /* Organiza widgets-livros e right-father em linha */
    flex-direction: row;}
.progress-container {
        width: 100%;
        height: 100%;
}
svg {
        transition: all 0.5s ease;
        width: 100%;  /* Faz o SVG preencher todo o contêiner */
        height: 100%; /* Faz o SVG preencher todo o contêiner */
        display: block;  /* Remove margens extras do SVG */
}
.progress-bar{
    stroke-dashoffset: 185;
    transition: all 0.5s ease;
    filter: drop-shadow(0px 0px 3px #1746bd );
    stroke: #1746bd;
}
body.dark-mode .progress-bar{
        filter: drop-shadow(0px 0px 5px #1746bd );
        stroke: #1746bd;
}
.progress-circle {
        margin-left: 2.25vmin;
        margin-top: -2vmin;
        transform: rotate(90deg);  /* Ajuste para garantir que o gráfico comece do topo */
        transform-origin: center;
        transition: stroke-dashoffset 0.5s ease;
        stroke-linecap: round;
}
.progress-text {
        transition: all 0.5s ease;
        position: absolute;  /* Agora o texto será centralizado sobre o gráfico */
        top: 50%;  /* Centraliza verticalmente */
        left: 50%; /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);  /* Ajusta para realmente centralizar */
        font-size: 3vmin;  /* Usando vmin para que o texto seja responsivo */
        font-weight: bold;
        color: #404c57;  /* Cor do texto */
        text-align: center;
}
body.dark-mode .progress-text{
        color:#d8d8d8;;
}
circle{
        transition: all 0.5s ease;
          /* Tenta simular a sombra interna */
}
body.dark-mode circle{
        stroke: #050b13;
}
.notitext{
        font-weight: 1000;
        font-size: 3.5vmin;
}
body.dark-mode .notitop{
        background-color: #2b385a;
        color: #d8d8d8;
}
.notitop{
        display: flex ;
        background-color: #f0f0f3;
        border-radius: 3vmin;
        font-size: 3.5vmin;
        width: 23vw;
        height: 6vh;
        color: #404c57;
        margin-top: 2vmin;
        text-align: center;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
}
#bibix{
        position: absolute;
        right: 3vmin;
        margin-bottom: -0.75vmin;
        font-size: 5vmin;
}
.noti-close-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5vmin;
        height: 5vmin; 
        border-radius: 1.75vmin;
}  
#noti-overlay {
        position: fixed; /* Fixa a sobreposição na tela */
        top: 2vmin;
        overflow: hidden;
        right: 0vmin;
        width: 100%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 99999; /* Coloca a sobreposição no topo */
}
#bibicheckfill{
        color: #34c759;
        margin-left: 1.5vmin;
        margin-right: 0.8vmin;
        font-size: 2.75vmin;
}
#bibixfill{
        color: #ff0d00;
        margin-left: 1.5vmin;
        margin-right: 0.8vmin;
        font-size: 2.75vmin;
}
.messageTxttrue{
        margin-left: 1vmin;
        margin-right: 0.75vmin;
        font-size: 1.75vmin;
}
.messageTxtfalse{
        margin-left: 1vmin;
        margin-right: 0.75vmin;
        font-size: 1.75vmin;
}
.rolltxt{
        display: none;
        opacity: 0;
        margin-left: 1vmin;
        margin-right: 1vmin;
        font-size: 1.75vmin;
        margin-top: 2vmin;
}
body.dark-mode .roll1{
        box-shadow: 5px 5px 10px #0a111a,
        -5px -5px 10px #1f2736;
        background-color: #182035;
        border-color: rgba(255, 255, 255, 0.18); 
}
.roll1{
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        bottom: 8.5vmin;
        right: 3.25vmin;
        flex-shrink: 0;
        opacity: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: #dee0e4;
        border-radius: 5vmin;
        border: 2px solid rgba(188, 194, 209, 0.88);
        transition: all 0.5s ease;
        height: 84vh;
        width: 25vw;
        transition: all 0.5s ease;
}
body.dark-mode .mesage{
        color: #f0f0f3;
        background: #374975;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.iconeNotificacao{
        display: flex;
        align-items: center;
}
.message {
        flex: 0 0 9vmin; /* Não cresce nem encolhe, altura fixa */
        background-color: #dbdbe0;
        color: #404c57;
        border-left: 20px solid;
        border-radius: 2vmin;
        height: 2vmin;
        display: flex;
        align-items: center;
        position: relative;
        width: 20vw;
        transition: all 0.5s ease;
}
body.dark-mode .roll{
        background-color: #2b385a;
        scrollbar-color: #d8d8d8 transparent;
        color: #d8d8d8;
}
.roll{
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #c2c2c2 transparent;
        margin-top: 2vmin;
        padding-top: 1.25vmin;
        padding-bottom: 1.25vmin;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #f0f0f3;
        color: #404c57;
        border-radius: 3vmin;
        width: 23vw;
        height: 70vh;
        display: flex; /* Alteração para flexbox */
        flex-direction: column;
        align-items: center;
        gap: 1.9vh; /* Espaçamento entre os elementos */
        transition: all 0.5s ease;
}
.messageTxtinfo {
        font-size: 1rem;
        color: #3295ff;
}
.iconeNotificacao{
        color: #007bff;
}


/* Aplica comportamento genérico para os pódios */
.person#primeiro-lugar,
.person#segundo-lugar,
.person#terceiro-lugar {
  /* mantém seu gradient original (definido em outro lugar) */
  background-size: 200% 100%;        /* permite o “deslize” */
  background-position: 0% 0;        /* posição inicial */
  background-repeat: no-repeat;
  transition: background-position 2s ease;
  will-change: background-position;
}

/* Classe temporária que faz o brilho "andar" para a direita */
.person.shimmer-active {
  background-position: 100% 0; /* move o background para a direita */
}


.person#primeiro-lugar{
        border: 2px solid rgba(207, 138, 0, 0.5);
        background: linear-gradient(
            45deg,
            rgb(255, 210, 119) 0%,
            rgb(255, 245, 225) 25%,
            rgb(255, 207, 111) 47%,
            rgb(252, 231, 190) 71%,
            rgba(255, 204, 102, 1) 89%,
            rgb(255, 206, 108) 100%);
}
body.dark-mode .person#primeiro-lugar{
        color: #182035;
        background-color: rgb(255, 226, 169);
}
.person#primeiro-lugar #image-preview1{
        box-shadow: 
        5px 5px 10px rgb(211, 178, 112),
        -5px -5px 10px rgb(255, 226, 169);
}
.person#segundo-lugar {
        transition: all 0.5s ease;
        border: 2px solid rgba(150, 170, 200, 0.6);
        background: linear-gradient(
            45deg,
            rgb(198, 209, 226) 0%,
            rgba(230, 240, 255, 1) 25%,
            rgb(190, 203, 226) 47%,
            rgba(230, 240, 255, 1) 71%,
            rgba(210, 225, 245, 1) 89%,
            rgb(194, 207, 228) 100%
        );
}
body.dark-mode .person#segundo-lugar{
        transition: all 0.5s ease;
        color: #182035;
        background: linear-gradient(
            45deg,
            rgba(131, 158, 204, 1) 0%,
            rgba(230, 240, 255, 1) 25%,
            rgba(156, 177, 212, 1) 47%,
            rgba(230, 240, 255, 1) 71%,
            rgba(210, 225, 245, 1) 89%,
            rgba(132, 159, 206, 1) 100%
        );
    
}
.person#segundo-lugar #image-preview1{
        box-shadow: 
        5px 5px 10px rgb(127, 148, 179),
        -5px -5px 10px rgba(150, 170, 200, 0.6);
}
.person#terceiro-lugar {
    border: 2px solid rgba(165, 82, 0, 0.5);
    background: linear-gradient(
        45deg,
        rgb(230, 164, 114) 0%,
        rgb(241, 204, 171) 25%,
        rgb(218, 150, 99) 47%,
        rgb(241, 187, 139) 71%,
        rgb(224, 166, 112) 89%,
        rgb(204, 136, 84) 100%
    );
}
body.dark-mode .person#terceiro-lugar{
        color: #182035;
        background-color: #dbdbe0;
}
.person#terceiro-lugar #image-preview1{
        box-shadow: 
        5px 5px 10px rgb(151, 105, 58),
        -5px -5px 10px rgba(165, 82, 0, 0.5);
}
.person#minha-posicao{
        background-color: #c9cfdde0;
        border: 2px solid rgba(188, 194, 209, 0.88);
}
body.dark-mode .person#minha-posicao{
        background-color: #576faa;
        border: 2px solid rgba(255,255,255, 0.18);
}


.texttodo{
        margin-top: 1vmin;
        margin-left: 0.5vmin;
        font-size: 2vmin;
}
.d0{
    height: 5vmin;
}
.d1{
    height: 10vmin;
}
.d2{
    height: 3vmin;
}
@media only screen and (max-width: 1023px) {
    .conteiner-livros {
        width: 45vh;
        height: 45vh;
        overflow: hidden;
        position: relative;
        display: flex;
        margin-top: 3vmin;
        padding: 0;
        align-items: center;
        justify-content: center;
    }
    .widgets-livros{
        width: 100vw;
        height: 47vmin;
        margin-top: 2vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 1vmin;
        
    }
    .feita{
        height: 7vh;
        width: 6vh;
    }
    .livros, .calendario{
        margin-top: 0;
        display: inline-block;
        margin-left: 0vmin;
        width: 44.5vmin;
        height: 44.5vmin;
        padding-top: 2vmin;
    }
    .calendario{
        margin-left: -4vmin;
    }
    .widgets{
        width: 47vmin;
        height: 47vmin;
        grid-gap: 4vmin;
        margin-right: 1.5vmin;
        margin-left: 0vh;
        margin-top: 0vh;
    }
    .dudowimg{
        height: 10vw;
        width: 10vw;
    }
    .widget4{
        border-radius: 4.5vmin;
    }
    .leaderboard,.menu-right{
        position: absolute;
        margin-left: 3.25vw;
        margin-top: 0;
        bottom: 1vh;
        border-radius: 5vmin;
        width: 93vw;
        height: 44vh;
        left:0;
        top: 0;
    }
    .eventos, .eventos1{
        justify-content:start;
        align-items: center;
        grid-template-columns: 38vw 50vw;
        width: 89vw;
        height: 33vh;
        border-radius: 3vmin;
    }
    .event{
        width: 58.5vmin;
        font-size: 2.8vmin;
    }
    .Sistemática{
        margin-bottom: 1vh;
        width: 89vw;
        height: 4vh;
        font-size: 2.75vh;
    }
    .prova, .person{
        margin-bottom: .35vh;
        margin-top: .35vh;
        height:7vh;
        width: 82vmin;
        border-radius: 2vmin;
    }
    .concluido{
        height: 7vh;
        width: 7vh;
    }
    .check, .cancel{
        height: 12vh;
        width: 12vh;
    }
    .data{
        margin-right: 0.25vh;
    }
    .dia{
        font-size: 3vh;
    }
    .mes{
        font-size: 1.7vmin;
    }
    .iconn{
        margin-left: 1vmin;
    }
    .content--add-item{
        margin-top: 2vmin;
    }
    #input-new-task{
        width: 34vmin;
        height: 5vmin;
        font-size: 2vmin;
    }
    #btn-new-task{
        height: 5vmin;
        width: 5vmin;
    }
    .input-div{
        width: 34vmin;
        height: 5vmin;
        margin-right: 10vmin;
    }
    .button-addbook-div{
        margin-right: 4vmin;
    }
    .todo, .cacalendar{
        white-space:nowrap;
        margin-left: 1vmin;
    }
    .content--body{
        scrollbar-color:#d8d8d8 transparent;
        scrollbar-width:thin;
        overflow-x: hidden;
        overflow-y: scroll;
        grid-template-columns: repeat(2, 1fr);
        height: 26vmin;
        margin-top: 4vmin;
        width:43vmin;
    }
    .task{
        
        font-size: 1.5vmin;
        margin-left: 1vmin;
        width: 17vmin;
    }
    .right-father{
        position: fixed;
        bottom: 3vmin;
        width: 100vw;
        height: 44.5vh;
    }
}
@media only screen and (max-width: 600px){
    .border1top1 {
    margin-left: 1vmin;
    transition: all 0.5s ease;
    height: 0;           /* linha fininha */
    width: 2vh;
    border: 2px solid #bcc2d1e0;
    border-radius: 10px;
}
.border1top2 {
    transition: all 0.5s ease;
    height: 0;           /* linha fininha */
    width: 32vh;
    border: 2px solid #bcc2d1e0;
    border-radius: 10px;
}
.toggle-semana {
    background: none;
    color: #667394e0;
    border: none;
    font-size: 4vmin;
    cursor: pointer;
    line-height: 1;
    transform-origin: center;
    transform: rotate(-180deg);
    transition: transform .5s ease;
}
    .semana {
  margin-bottom: 1vmin;
}
    .border1top {
        transition: all 0.5s ease;
        height: 0;
        margin-top: 1.5vmin;
        margin-bottom: 1.5vmin;
        width: 36vh;
        border: 2px solid #dbdbe0;
        border-radius: 10px;
}
    .reactions-menu img {
  height: 7vmin;
  width: 7vmin;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition: transform 0.15s ease, filter 0.15s ease;
}
    .reaction-sticker {
    position: absolute;
    top: -3vmin;
    user-select: none;
    font-size: 3.5vmin;
    right: 12vmin;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    animation: pop-in 0.3s ease;
    transition: transform 0.2s ease, filter 0.2s ease;
}
    .emoji-img{
    width: 8vmin;
}
    #fechar-pdf {
  z-index: 1001;
  font-size: 18px;
  cursor: pointer;
  width: 8vmin;
  height: 8vmin;
  background-color: #dbdbe0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #404c57;
  margin-right: -1.25vmin;
  transition: all 0.5s ease;
  margin-top: .5vmin;
  position: absolute;
  right: 4vmin;
  top: 2vmin;
  border-radius: 100000000vmin;
    }
    .right-father{
        overflow: hidden;
        margin-top: 3vmin;
        height: 46vh;
        width: 100vw;
        margin-left: -3vmin;
    }
    .missaoname{
    position: absolute;
    display: flex;
    align-items: center;
    left: 5vmin;
    height: 10vmin;
    width: 20vmin;
    }
    #missoes{
        top: 0vmin;
        display: grid;
        opacity: 0;
        background-color: #f0f0f3;
        width: 0vmin;
        height: 56vmin;
        border: 2px solid rgba(188, 194, 209, 0.88);
        box-shadow: 5px 5px 10px #a3acbb,
        -5px -5px 10px #cccccc;
        position: absolute;
        margin-top: 13vmin;
        left: 2.5vmin;
        z-index: 100;
        transition: all 0.5s ease;
        border-radius: 5vmin;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .missao1, .missao2, .missao3{
        background-color: #dbdbe0;
        border-radius: 2vmin;
        width: 40vmin;
        height: 10vmin;
    }
    body.dark-mode .missao1{
        background-color: #2b385a;
    }
    body.dark-mode .missao2{
        background-color: #2b385a;
    }
    body.dark-mode .missao3{
        background-color: #2b385a;
    }
    .missao2, .missao3{
        margin-top: 0;
    }
    .missao3{
        margin-bottom: 0.25vmin;
    }
    .missoes2{
        display: none;
    }
    .Sistemática2{
        background-color: #dbdbe0;
        margin-top: 0.5vmin;
        border-radius: 1000vmin;
        width: 30vmin;
        height: 6vmin;
    }
    body.dark-mode .Sistemática3{
        background-color: #2b385a;
    }
    .Sistemática3{
        background-color: #dbdbe0;
        margin-top: -0.25vmin;
        font-size: 3.25vmin;
        border-radius: 1000vmin;
        height: 6vmin;
        width: 40vmin;
    }
    #menuzinho{
        display: grid;
        padding-bottom: 1vmin;
        opacity: 0;
        background-color: #f0f0f3;
        width: 0vmin;
        height: 55vmin;
        border: 2px solid rgba(188, 194, 209, 0.88);
        box-shadow: 5px 5px 10px #a3acbb,
        -5px -5px 10px #cccccc;
        position: absolute;
        margin-top: 13vmin;
        right: 2.5vmin;
        transition: all 0.5s ease;
    }
    #alterphoto, #notifications{
        justify-content: start;
        padding-left: 3vmin;
        border-radius: 2vmin;
        transition: all 0.5s ease;
        background-color: #dbdbe0;
        border: none;
        width: 40vmin;
        height: 7.5vmin;
        display: flex;
        align-items: center;
        padding-right: 1vmin;
    }
    #logout-btn{
        border-radius: 2vmin;
        transition: all 0.5s ease;
        background-color: #c5d0e2;
        border: none;
        display: flex;
        align-items: center;
        justify-content: start;
        padding-left: 2.5vmin;
        padding-right: 4vmin;
        width: 40vmin;
        height: 7.5vmin;
    }
    /* Quando ativos */
    #menuzinho.ativo {
        opacity: 1;
        width: 45vmin;
    }
    #missoes.ativo {
        opacity: 1;
        width: 45vmin;
    }
    .dont-upload{
        text-align: center;
        font-size: 3vmin;
        color: white;
        border-radius: 1vh;
        margin-left: 1vh;
        position: absolute;
        margin-bottom: 2vmin;
        border: 0;
        padding-top: 1vh;
        padding-bottom: 1vh;
        width: 36vh;
    }
    body.dark-mode .dont-upload{
        text-align: center;
        font-size: 3vmin;
        color: white;
        border-radius: 1.5vh;
        border: 0;
        padding-top: 1vh;
        padding-bottom: 1vh;
        position: absolute;
        bottom: 1.5vmin;
        width: 36vh;
    }
    .upload-button{
        color: white;
        font-size: 3vmin;
        background-color: #34c759;
        border-radius: 1vh;
        margin-left: 1vh;
        position: absolute;
        margin-bottom: 2vmin;
        border: 0;
        padding-top: 1vh;
        padding-bottom: 1vh;
        width: 36vh;
    }
    .texttodo{
            margin-left: -20.5vmin;
            font-size: 2.5vmin;
    }
    .messageTxtinfo {
        font-size: 0.85rem;
        color: #3295ff;
    }
    .widget1, .widget2, .widget3{
            width: 29.3333333333333vmin;
            border-width: 3px;
    }
    .input-div {
            width: 40vmin;
            height: 6vmin;
            margin-right: 10vmin;
    }
    #btn-new-task{
            height: 6vmin;
            width: 6vmin;
    }
    #input-new-task{
            width: 40vmin;
            height: 6vmin;
            font-size: 2.8vmin;
    }
    #name{
            font-size: 3.5vmin;
            font-weight: 600;
    }
    #xpvalue{
            height: 10vw;
            font-size: 3.5vmin;
            position: absolute;
            right: 2vmin;
            text-align: center;
            display: flex;
            align-items: center;
            font-weight: 600;
    }
    body.dark-mode .mesage{
            color: #f0f0f3;
            background: #374975;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #uploaded-image {
            width: 40vmin; /* miniatura menor */
            height: 40vmin;
            cursor: pointer;
            border-radius: 8px;
            transition: transform 0.3s;
    }
    .message {
            flex: 0 0 9vmin; /* Não cresce nem encolhe, altura fixa */
            background-color: #dbdbe0;
            color: #404c57;
            border-left: 20px solid;
            border-radius: 2vmin;
            height: 2vmin;
            display: flex;
            align-items: center;
            position: relative;
            width: 20vw;
            transition: all 0.5s ease;
    }
    .ball{
            width: 1vh;
            height: 1vh;
            margin-left: 3.5vmin;
            margin-bottom: 3.5vmin;
    }
    .ball1{
            width: 1vh;
            height: 1vh;
            margin-left: 22vmin;
            margin-bottom: 6.75vmin;
    }
    #posranking{
            font-weight: 600;
            width: 5vmin;
            text-align: center;
    }
    .pagination-dots{
            bottom: 6vmin;
    }
    .pagination-dots {
            position: absolute;
            left: 49.75%;
            bottom: 5vmin;
            padding: 0.75vw;
            transform: translateX(-50%);
            display: flex;
            border-radius: 10000000vh;
            gap: 7.5px;
    }
    .pagination-dots1{
            z-index: 99999999;
            padding: 1vw;
            left: 38%;
            border-radius: 100000000vh;
            position: absolute;
            bottom: 1.5vmin;
            transform: translateX(-50%);
            display: flex;
            gap: 10.5px;
    }
    .dot1,.dot{
            height: 1.5vmin;
            width: 1.5vmin;
    }
    .leaderboard,.menu-right{
            border-width: 3px;
            position: absolute;
            margin-left: 3.25vw;
            margin-top: 0;
            bottom: 1vh;
            border-radius: 5vmin;
            width: 93vw;
            height: 44vh;
            left:0;
            top: 0;
    }
    th{
            font-size: 2vmin;
            font-weight: 100;
    }
    .calendario {
            padding: 0;
            opacity: 0;
            margin-top: 2vw;
            margin-left: -0.125vmin;
            position: absolute;
            left: 100%;
    }
    #calendar, #calendar1{
            display: grid;
            align-items: center;
            justify-content: center;
            width: 45.5vmin;
            height: 35vmin;
    }
    #calendar2 {
            transition: all 0.5s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 1.25vh;
            bottom: 1vh;
            width: 42.5vmin;
            height: 35vmin;
            background-color: #e2e2e7;
            border-radius: calc(5vmin - 1.5vh);
            box-shadow: 2px 2px 5px #b0b9c7, -2px -2px 5px #dddddd;
    }
    .border{
            height: 29vmin;
            width: 0;
            margin-top: 5vmin;
            border: 1px solid #b0b9c7;
            border-radius: 10px;
    }
    #calendar3{
            transition: all 0.5s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 1.25vh;
            bottom: 1vh;
            width: 42.5vmin;
            height: 35vmin;
            background-color: #e2e2e7;
            border-radius: calc(5vmin - 1.5vh);
            box-shadow: 2px 2px 5px #b0b9c7, -2px -2px 5px #dddddd;
    }
    .mescalendario, .mescalendario1{
            font-size: 3.5vmin;
            text-transform: capitalize;
            text-align: center;
    }
    .dia-atual {
            transition: all 0.5s ease;
            position: relative;
            background-color: #94a8ca;
            border-radius: 100%;
    }
    .right-father{
            margin-left: 0;
    }
    .eventos, .eventos1{
            padding-top: 0.9vmin;
            height: 35vh;
            gap: 0.82vmin;

    }
    .prova, .person{
            margin: 0;
            height: 6vh;
            width: 84vw;
            margin-bottom: 1vh;
            margin-top: 1vh;
    }
    .conteiner-livros {
            margin-top: 1vmin;
            width: 100%;
            height: 50vmin;
            overflow: hidden;
            position: relative;
            display: flex;
            padding: 0;
            align-items: center;
            justify-content: center;
    }
    #image-preview-container, #image-preview{
            width: 7vmin !important;
            height: 7vmin !important;
    }
    .widgets-livros {
            flex-direction: column;
            margin: 0;
            height: 40vh;
            gap: 3vmin; /* Empilha os filhos */
    }
    #bemvindotext{
            margin-right: 1vw;
            text-align: center;
            font-size: 4vmin;
    }
    .widgets{
            height: 22.25vmin;
            margin: 0;
            width: 100vw;
            display: flex;              
            flex-wrap: wrap;           
            gap: 1vmin;                 
            justify-content: space-evenly;
    }
    body.dark-mode .widget1,
    body.dark-mode .widget2,
    body.dark-mode .widget3,
    body.dark-mode .widget4{
            border-width: 1px;

    }
    .livros{
            height: 40vmin;
    }
    .livros, .calendario{
            border-width: 3px;
            width: 95vmin;
    }
    .calendario{
            height: 42vmin;
            margin-bottom: 2vmin;
    }
    #calendar2, #calendar3{
            height: 37vmin;
    }
    .livros-lidos {
            margin-top: 0;
            display: flex;
            flex-direction: column; /* Organiza os elementos verticalmente */
            align-items: start; /* Centraliza horizontalmente */
            justify-content: center; /* Centraliza verticalmente */
            text-align: center; /* Centraliza texto, se necessário */
            width: 93vmin;
            height: 48vmin;
    }
    .header-row {
            display: flex; /* Coloca .todo e .content--add-item lado a lado */
            align-items: start; /* Alinha os itens no centro verticalmente */
            justify-content: start; /* Centraliza horizontalmente */
            margin-left: 1vmin;
            gap: 2rem; /* Espaço entre o título e o input */
            width: 100%; /* Mantém o header alinhado */
    }
    #xx{
            margin-top: .6vmin;
    }
    .task{
            padding-bottom: 1vmin;
            padding-top: 1vmin;
            font-size: 3vmin;
            width: 36vmin;
            margin-left: 0;
    }
    .buttonnn{
            display: flex;
            padding-top: 0.1vmin;
            align-items: center;
            justify-content: center;
            background-color:#89a4e800;
            border-radius: 50vmin;
            border: none;
            float: right;
            font-size: 4vmin;    
            color: #2b385a;
            transition: all 0.5s ease;
    }
    .todo, .cacalendar {
            font-size: 5vmin;
            display: flex;
            align-items: start;
            margin-top: 2.25vmin; /* Margem entre o título e o próximo elemento */
    }
    .content--add-item {
            display: flex;
            align-items: center; /* Alinha os itens ao centro verticalmente */
            gap: 1rem; /* Espaçamento entre os elementos */
            margin-bottom: 3vmin; /* Espaçamento abaixo para o próximo elemento */
    }
    .button-addbook-div{
            margin-right: 0;
            width: 6vmin;
            height: 6vmin;
    }
    .content--body {
            height: 60vmin;
            margin-top: 0;
            overflow-x: hidden;
            grid-template-columns: repeat(2, 1fr); /* Deixa os elementos lado a lado */
            justify-items: center;
            width: 100%; /* Ajusta a largura conforme necessário */
            padding-top: 2vmin;
            margin-bottom:12vmin; /* Espaçamento acima */
            text-align: left; /* Opcional: texto alinhado à esquerda */
    }
    .task p {
            font-size: 2.75vmin;
            margin-right: 1vmin;
            overflow-wrap: break-word; /* Força a quebra de palavras grandes */
            word-break: break-word; /* Garante que palavras grandes sejam quebradas */
            width: 100%; /* Faz com que o texto use todo o espaço disponível */
    }
    .Sistemática{
            font-size: 5vmin;
    }
    .concluido{
            height: 6vh;
            width: 6vh;
    }
    .feita{
            margin-left: -0.75vmin;
            height: 6.1vh;
    }
    .event{
            width: 60vw;
    }
    .check, .cancel{
            height: 8vh;
            width: 8vh;
    }
    #logout-button{
            height: 2vmin;
            display: flex;
            align-items: center;
            justify-content: center;
    }
    #bi-bi-box-arrow-right{
            font-size: 4vmin;
    }
    .toggle-container {
            border-radius: 2vmin;
            transition: all 0.5s ease;
            background-color: #dbdbe0;
            display: flex;
            justify-content: start;
            padding-left: 3vmin;
            align-items: center;
            height: 7.5vmin; /* Para centralizar verticalmente */
    }
    .darkmodehuh{
            font-size: 2.5vmin;
    }
    #bibimoon{
            margin-right: 0.5vmin;
            font-size: 3vmin;
    }
    #bibiperson, #bi-bi-bell{
            font-size: 3vmin;
            margin-right: 1vmin;
    }
    #bi-bi-bell1{
            font-size: 5vmin;
            margin-right: 1vmin;
    }
    .p-foto, .notifications-text{
            font-size: 2.5vmin;
    }
    .disconect{

            margin-left: 1vmin;
            font-size: 2.5vmin;
    }
    #closee, .fechar-pdf{
            width: 6vmin;
            height: 6vmin;
            background-color: #dbdbe0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            color: #404c57;
            margin-right: -1.25vmin;
            transition: all 0.5s ease;
    }
    #bix{
        margin-top: 1vmin;
       font-size: 6vmin;
    }
    .d0 h2, .d1 h2, .d2 h2{
            font-size: 1.8vmin;
            display: flex;
            position: absolute;
            margin-top: -2.5vmin;
            margin-left: 1.9vmin;
    }
    .correct-button, .incorrect-button {
            left: 6.5vmin;
            height: 5vh;
            width: 26vw;
            margin-left: 2vmin;
            border-radius: 1.5vh;
            overflow: hidden;
            color: white; 
            border: 0;
            font-weight: bold;
            transition: background-color 0.3s;
    }
    .notitext{
            font-weight: 1000;
            font-size: 5vmin;
    }
    body.dark-mode .notitop{
            background-color: #2b385a;
            color: #d8d8d8;
    }
    .notitop{
            display: flex ;
            background-color: #f0f0f3;
            border-radius: 3vmin;
            font-size: 3.5vmin;
            width: 88vw;
            height: 4vh;
            color: #404c57;
            margin-top: 2.5vmin;
            text-align: center;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
    }
    #bibix{
            position: absolute;
            right: 6vmin;
            margin-bottom: -1vmin;
            font-size: 7vmin;
    }
    .noti-close-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 5vmin;
            height: 5vmin; 
            border-radius: 1.75vmin;
    }  
    #noti-overlay {
            position: fixed; /* Fixa a sobreposição na tela */
            top: 2vmin;
            right: 0vmin;
            width: 100%;
            height: 0%;
            display: flex;
            overflow: scroll;
            justify-content: center;
            align-items: center;
            z-index: 99999; /* Coloca a sobreposição no topo */
    }
    .messageTxtfalse{
            margin-left: 1vmin;
            margin-right: 0.5vmin;
            font-size: 2.8vmin;
    }
    #bibicheckfill{
            color: #34c759;
            margin-left: 6.5vmin;
            margin-right: 0.8vmin;
    }
    #bibixfill{
            color: #ff0d00;
            margin-left: 6.5vmin;
            margin-right: 0.8vmin;
    }
    .messageTxttrue{
            margin-left: 1vmin;
            margin-right: 0.5vmin;
            font-size: 2.8vmin;
    }
    .rolltxt{
            opacity: 0;
            margin-left: 2vmin;
            margin-right: 1vmin;
            font-size: 3vmin;
            margin-top: 2vmin;
    }
    body.dark-mode .roll1{
            box-shadow: 5px 5px 10px #0a111a,
            -5px -5px 10px #1f2736;
            background-color: #182035;
            border-color: rgba(255, 255, 255, 0.18); 
    }
    .roll1{
            overflow-y: auto;
            overflow-x: hidden;
            position: fixed;
            bottom: 3vw;
            flex-shrink: 0;
            opacity: 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            background: #dee0e4;
            border-radius: 5vmin;
            border: 1px solid rgba(188, 194, 209, 0.88);
            transition: all 0.5s ease;
            width: 93vw;
            height: 44vh;
            transition: all 0.5s ease;
    }
    .roll{
            width: 88vw;
            height: 35.6vh;
            padding-top: 1.5vmin;
            padding-bottom: 1.5vmin;
            gap: 1vh;
    }
    .message {
            flex: 0 0 10vmin; /* Não cresce nem encolhe, altura fixa */
            border-left: 12px solid;
            border-radius: 2vmin;
            width: 82vmin;
            height: 30vmin;
            display: flex;
            align-items: center;
    }
    .paidenome{
            margin-left: 2.25vh;
    }
    .paidenome, .paideemail{
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
    }
    #save-btn{
            margin-top: 1vmin;
            height: 6vmin;
            width: 15vmin;
    }
    .edit-input {
            width: 30vmin;
            padding: 6px;
            border-radius: 6px;
            border: 1px solid #ccc;
            margin: 5px 0;
            height: 1vh;
            font-size: 14px;
            display: block;
    }
    .edit-name-fields{
            justify-content: space-evenly;
            align-items: center;
            width: 84vw;
            height: 2.5vh;
    }
    #edit-btn{
            height: 2vh;
            margin-left: 1vmin;
            border-radius: 100%;
            width: 2vh;
            font-size: 1.5vmin;
            border: none;
    }
    #edit-auth-btn{
            display: none;
            height: 2vh;
            border-radius: 100%;
            width: 2vh;
            font-size: 0.9vmin;
            border: none;
    }
    #upload-overlay{
            position: fixed; /* Fixa a sobreposição na tela */
            top: 0;
            overflow: hidden;
            left: 0;
            width: 10px;
            height: 10px;
            display: flex;
            overflow: scroll;
            justify-content: center;
            align-items: center;
            z-index: 99999; /* Coloca a sobreposição no topo */
    }
    #close-overlay {
            transition: transform 0.3s cubic-bezier(.2,2,1,1), background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
            border: none;
            position: relative;
            margin-top: -60vmin;
            margin-left: 101vmin;
            background-color: #f0f0f3;
            color: #574c40;
            width: 5vmin;
            height: 5vmin;
            font-size: 2.5vmin;
            border-radius: 1vmin;
            transition: all 0.5 ease;
    }
    #upload-label{
            transition: transform 0.3s cubic-bezier(.2,2,1,1), background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-top: -7vh;
            margin-right: -5vh;
            background-color: #f0f0f3;
            color: #1746bd;
            width: 2.5vh;
            height: 2.5vh;
            border-radius: 100%;
    }
    #bibipencil{
            font-size: 2.5vmin;
    }
    #upload-container {
            overflow: hidden;
            background: #dee0e4;
            position: absolute;
            right: 2.75vmin;
            bottom: 3vmin;
            border-radius: 5vmin;
            border: 2px solid rgba(188, 194, 209, 0.88);
            transition: all 0.5s ease;
            width: 93vw;
            height: 44vh;
            z-index: 999999999999;
            position: fixed;
            background-color: white;
            text-align: center;
    }
    .nomeuser{
            font-size: 2.25vh;
            text-align: center;
    }
    .emailuser{
            font-size: 1.25vh;
    }
    #image-preview-container1{
            border-radius: 100%;
            width: 15vmin;
            height: 15vmin;
            margin-top: 2vh;
            margin-bottom: 1vh;
            display: flex;
            align-items: center;
            justify-content: center;
    }
    #image-preview1{
            box-shadow: 5px 5px 10px #b0b9c7,
            -5px -5px 10px #dddddd;
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-radius: 100%;
            width: 15vmin;
            height: 15vmin;
            transition: 0.5s all ease;
    }
    body.dark-mode .image{
            background-color: #2b385a;
    }
    .image{
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: #f0f0f3;
            width: 89vw;
            height: 42vh;
            border-radius: 3vmin;
    }
    body.dark-mode .image1{
            background-color: #405383;
            color: #d8d8d8;
    }
    .image1{
            margin-top: 2.4vw;
            display: flex;
            align-items: center;
            flex-direction:column;
            background-color: #dbdbe0;
            width: 84vw;
            border-radius:1.5vw;
            height: 35vw;
    }
}
@media only screen and (max-width: 376px) {
    .widgets{
        margin-top: 1vmin;
    }
    .conteiner-livros{
        margin-top: -2vmin;
    }
}