:root{
    ---background_primary: rgb(5 8 22);
    ---color-black: #000000;
    ---color-white: #fff;
    ---color-footer: rgb(14 22 41 / 83%);
    ---color-light: rgb(224 242 254);
    ---color_admin: #bdd1f8;
}
.container_voce_pode_gostar{
    text-decoration: none;
    list-style: none;
}
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: rgba(255, 255, 255, .4);
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, .1);
}
.capitulo-content i{
    margin-right: 5px;

}

.container_label_list_capitulo{
    justify-content: space-between;
    border-radius: 5px;
    display: flex;
}

.container_label_list_capitulo span{
     padding: 0 20px;
     line-height: 45px;
     font-weight: 800;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
     font-size: 15px;
     background: rgb(26 46 93) !important;
     color: #fff;
}
body{
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif !important;
    color: var(---color-white);
    transition: background-color 1s, color 0.3s;
    box-sizing: border-box;
    background: var(---background_primary);
}
.back-to-top-btn {
    position: fixed;
    bottom: 15px;
    left: 20px;
    z-index: 100;
    display: none; /* Inicialmente escondido */
    background: rgb(65, 152, 238);
    color: white;
    border: none;
    justify-content: center;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.back-to-top-btn:hover {
    background: rgba(65, 151, 238, 0.829); /* Cor mais clara ao passar o mouse */
}
#site-header h1{
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    color: white;
    list-style: none;
    text-decoration: none;
}

.container {
    max-width: 1600px; /* Largura máxima do contêiner */
    margin: 0 auto; /* Centraliza o contêiner */
  
}

header {
    background-color: var(---color-black);
    color: #fff;
    padding: 20px 0;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
    position: fixed;
    right: 0;
    top: 0;
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: 0;
    z-index: 1000;
}

#site-header h1 {
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    color: white;
    list-style: none;
    text-decoration: none;
}

.nav-souso-2-component-pesquisa {
    background-color: #373535b0;
    display: flex;
}
.nav-souso-2-component-pesquisa-campo {
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    color: white;
    height: 20px;
    outline: none;
    width: 400px;
    text-align: start;
    padding: 12px;
    border: none;
    background: #373535b0;
}

header nav ul li a {
    color: #fff;
    transition: color 0.3s ease;
    text-decoration: none;
}
header nav ul li a:hover{
    color: rgba(255, 255, 255, 0.651);
}
nav ul li a i {
    margin-right: 3px;
}

header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul {
    display: flex;
    gap: 3px;
    white-space: nowrap;
    list-style: none;
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
    padding: 0;
}

.nav-souso-2-component-pesquisa-botao {
    background-color: #000000b0;
    cursor: pointer;
    color: white;
    border: none;
    padding: 10px;
    position: relative;
}

   /* Estilo para o cabeçalho encolhido */
header.shrink {
    padding: 0; /* Remove o padding para encolher */
    height: 0; /* Define a altura como 0 para esconder */
    opacity: 0; /* Torna o cabeçalho invisível */
    transition: all 0.3s ease; /* Transição suave */
}

header.visible {
    padding: 20px; /* Restaura o padding */
    height: auto; /* Restaura a altura */
    opacity: 1; /* Torna o cabeçalho visível */
}


.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000;
}

/* Inicialmente mostrar o ícone de sol e esconder o de lua */
/* Inicialmente mostrar o ícone de lua e esconder o de sol */
#moon-icon {
    display: inline; /* Mantenha o ícone da lua visível por padrão */
}

#sun-icon {
    display: none; /* Esconder o ícone do sol por padrão */
}
.ri-search-line {
    font-size: 20px;
}
/* Estilo para ambos ícones */
.theme-toggle i {
    color: #ffcc00; /* Cor padrão (sol) */
}
.loading-container {
    display: flex;
    position: absolute;
    position-area: center;
    justify-content: center;
    align-items: center;
    opacity: 1; /* Começa totalmente visível */
    transition: opacity 0.5s ease; /* Transição suave para opacidade */
}

#listaCapitulos {
    display: none; /* Esconde inicialmente */
    opacity: 0; /* Começa invisível */
    margin: 0;
    height: 490px;
    top: 3px;
    position: relative;
    min-height: 490px;
    max-height: 490px;
    overflow: auto;
    transition: opacity 0.5s ease; /* Transição suave para opacidade */
}

.loading-container img {
    width: 15rem; /* Largura fixa */
    height: 15rem; /* Altura fixa */
    object-fit: cover; /* Ajusta a imagem para preencher o espaço sem distorção */
}
.theme-toggle i:hover {
    transform: scale(1.2);
}

/* Modo escuro (dark mode) */
body.dark-mode {
    background-color: rgb(3 5 12);
    color: #ffffff;
}
footer.dark-mode {
   background: transparent;
}
.timeline.dark-mode{
    border-top: 5px solid rgb(26 46 93 / 30%);
    background: rgb(12 18 34 / 10%);
}
.container_label_list_capitulo span.dark-mode{
    background: rgb(26 46 93 / 30%) !important;
}
.section_component_search.dark-mode{
    background: rgb(11 20 41 / 20%);
}
body.dark-mode .theme-toggle i {
    color: #ffffff; /* Cor para ícone no modo escuro */
}

body.dark-mode #sun-icon {
    display: none; /* Esconder o ícone do sol no modo escuro */
}

body.dark-mode #moon-icon {
    display: inline; /* Mostrar o ícone da lua no modo escuro */
}

.back-to-top-btn {
    position: fixed;
    bottom: 15px;
    left: 20px;
    z-index: 100;
    display: none;
    background: rgb(65, 152, 238);
    color: white;
    border: none;
    justify-content: center;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease;
}

main {
    position: relative;
    top: 10rem;
}
.manga_card_main{
    align-items: center;
    display: flex;
    position: relative;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.manga_card_main_info_extra{
    flex-direction: column;
    display: flex;
    gap: 3px;
}


.custom-checkbox-container label {
    position: relative;
}

.remove-label{
    background-color: #1a233a;
    color: #8a99b5;
    border-radius: 2px;
    padding: 3px;
    font-size: 10px;
    height: 18px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
}

.options label {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.select_status{
    text-align: center;
    width: 10rem !important;
    font-weight: 400;
    border-radius: 0.267rem;
    border: 1px solid #464d5c;
    background: #1a233a;
    color: #8a99b5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.4;
    appearance: none;
    width: 100%;
    background-image: url(../img/ico/svg/seta.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

.select_status:focus {
    border-color: #2271cc; /* Cor da borda quando em foco */
    outline: none; /* Remove o contorno padrão */
}

.confirm-button{
    background-color: rgb(58 68 111 / 53%);
    color: #ffffff;
    border: none;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}
.remove-buttons{
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding-bottom: 1rem;
}

.selectize-container{
    display: flex;
    width: 14rem;
    flex-direction: column;
    position: relative;
    left: 100%;
}

.options{
    overflow: auto;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
}

.remove{
    text-decoration: none;
    list-style: none;
    background-color: #1a233a;
    color: #8a99b5;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
}

.custom-checkbox-container label::after {
    content: '✔'; /* Ícone de check */
    display: none; /* Escondido por padrão */
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

i.custom-checkbox-container nput[type="checkbox"]:checked + label::after {
    display: block; /* Mostra o ícone ao selecionar */
}
.custom-checkbox-container{

}

.autor-value{
    color: #cccccc !important;
}
.botao_deletar_manga {
    display: flex;
    align-items: center; /* Center the icon and text vertically */
    background-color: #f44336; /* Example background color for delete */
    color: white; /* Text color */
    border: none; /* Remove default border */
    padding: 10px; /* Add padding */
    cursor: pointer; /* Change cursor to pointer */
    border-radius: 5px; /* Optional: round corners */
}

/* Classe para esconder o modal com transição */
.hidden-confirm-modal {
    opacity: 0; /* Faz o modal invisível */
    transition: opacity 0.3s ease; /* Transição suave para a opacidade */
    pointer-events: none; /* Impede interação enquanto o modal está oculto */
}
/* Estilo geral do modal */
.modal-confirm {
    visibility: hidden; /* O modal é oculto por padrão */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro com leve transparência */
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}
#confirm-delete {
    cursor: pointer;
    border: 1px solid #2c6de9 !important;
    background-color: #5A8DEE !important;
    color: var(---color-white);
    padding: 8px 12px;
    font: 600 13px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    transition: background 0.3s ease, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.close-button-confirm:hover {
    background: #00000024;
}

#modal-message-confirm {
    text-align: start;
    font-family: "Rubik", Helvetica, Arial, serif;
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.3rem;
    font-size: 18px;
    color: #ffffff;
}
#cancel-delete {
    cursor: pointer;
    padding: 8px 12px;
    font: 600 13px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    list-style: none;
    text-decoration: none;
    border: 1px solid #475F7B;
    background-color: transparent;
    color: var(---color-white);
    transition: background 0.3s ease, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#cancel-delete-capitulo{
    cursor: pointer;
    padding: 8px 12px;
    font: 600 13px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    list-style: none;
    text-decoration: none;
    border: 1px solid #475F7B;
    background-color: transparent;
    color: var(---color-white);
    transition: background 0.3s ease, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.modal-content-paginas {
    background-color: #272e48;
    /* margin: 15% auto; */
    padding: 30px;
    width: 70%;
}
.modal-content-capitulos h2 {
    color: var(---color_admin);
    border-bottom: 1px solid #7E8FA3;
}


#linkPagina {
    outline: none;
    width: 100% !important;
    place-self: center;
    height: auto;
    min-height: 10rem;
    max-height: 10rem !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    border-radius: 0.3rem !important;
    line-height: 1.5 !important;
    color: #8a99b5 !important;
    background-color: #1a233a !important;
    border: 1px solid #464d5c !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    resize: vertical !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    white-space: nowrap;
    overflow-wrap: break-word;
    padding: 10px; /* Adiciona padding ao texto dentro do textarea */
}


#linkPagina::-webkit-scrollbar {
    cursor: cell;
    width: 8px; /* Width of the scrollbar */
    height: 6px; /* Height of the horizontal scrollbar */
}

#linkPagina::-webkit-scrollbar-thumb {
    cursor: cell;
    background: #464d5c; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#linkPagina::-webkit-scrollbar-track {
    cursor: cell;
    background: #1a233a; /* Background for the scrollbar track */
}
#btnSalvarAlteracoes{
    cursor: pointer;
    border: 1px solid #2c6de9 !important;
    background-color: #5A8DEE !important;
    color: var(---color-white);
    padding: 8px 12px;
    font: 600 13px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    transition: background 0.3s ease, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#campoPagina {
    display: flex;
    flex-direction: column;
    text-align: start;
    margin: 3rem;
    gap: 2rem;
    justify-content: center;
}
.close-paginas {
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    color: #aaa;
    justify-content: center;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: background 0.3s ease;
}
.modal-content-capitulos {
    background-color: #272e48;
    padding: 1.7rem;
    width: 70%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    border-radius: 8px;
}
.modal-paginas {
    position: fixed;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
#confirm-delete-capitulo{
    cursor: pointer;
    border: 1px solid #2c6de9 !important;
    background-color: #5A8DEE !important;
    color: var(---color-white);
    padding: 8px 12px;
    font: 600 13px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    transition: background 0.3s ease, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
}
.close-button-confirm {
    height: 40px;
    margin-right: 1rem;
    top: 0;
    margin-top: 1rem;
    width: 40px;
    color: #727E8C;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    right: 0;
    position: absolute;
    display: flex;
    align-items: center;
    font-size: 28px;
    transition: background 0.3s ease;
}

.modal-confirm.show {
    visibility: visible; /* O modal é visível */
    opacity: 1; /* Opacidade total */
}

.modal-content-confirm {
    top: 0;
    background: #272e48;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease;
}
.manga_card_main_info_extra p span{
    font-size: 14px;
    font-weight: 600;
    padding-right: 7px;
    margin: 0;
    color: #ffffff;
}

.botao_deletar_manga{
    position: absolute;
    right: 0;
    top: 0;
}

.manga_card_main_info_extra p div{
    margin-left: 1rem;
}
#uploadIconButton {
    background-color: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #007BFF;
}

#uploadIconButton i {
    font-size: 30px;
}
.modal-content-upload{
    background-color: #272e48;
    margin: 15% auto;
    padding: 20px;
    position: relative;
    width: 80%;
}


.drop-area p {
    margin: 0;
    color: var(---color_admin);
}
.modal-content-upload h2{
    color: var(---color_admin);
}
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
}
progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px; /* Altura da barra */
    border: none;
    border-radius: 5px;
    overflow: hidden;
}

progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* Cor de fundo da barra */
    border-radius: 5px;
}

progress::-webkit-progress-value {
    background-color: #007BFF !important; /* Cor do preenchimento */
    transition: width 0.5s ease; /* Animação suave */
    border-radius: 5px;
}

progress::-moz-progress-bar {
    background-color: #007BFF !important; /* Cor do preenchimento no Firefox */
    transition: width 0.5s ease; /* Animação suave */
    border-radius: 5px;
}

#progressText {
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
}


.close {
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    color: #aaa;
    justify-content: center;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.close:hover {
    background: #00000024;
    text-decoration: none;
    cursor: pointer;
}
/* Estilo para o input oculto */
.drop-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload-modal{
    display: none; /* Inicialmente escondido */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo transparente */
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0; /* Inicialmente invisível */
    transform: translateY(-50px); /* Inicialmente deslocado para cima */
}
.upload-modal.show{
    display: block;
    opacity: 1; /* Tornar visível */
    transform: translateY(0); /* Mover para sua posição original */
}
.modal.show {
    display: block;
    opacity: 1; /* Tornar visível */
    transform: translateY(0); /* Mover para sua posição original */
}

.drop-area {
    border: 2px dashed #007BFF;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}
.drop-area:hover {
    background-color: #1c2546;
}

.manga_card_main_info_extra p div button{
  border: none;
  cursor: pointer;
}
.manga_card_main_info_extra p {
    position: relative;
    margin: 3px;
    height: 20px;
    display: flex;
    align-items: center;
}

.modal-content h2{
    color: var(---color_admin);
}
.modal-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    justify-content: space-between;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(50%); /* Ajusta a cor do ícone (isso faz uma inversão de cor) */
    opacity: 0.7; /* Altera a opacidade */
}

.selectize-container input{
    width: auto !important;
}

.input_pesquisar_generos{
    padding: 0.47rem 0.8rem;
    margin-bottom: 10px;  
}

.manga_card_main_info_extra svg:hover {
    color: rgba(255, 255, 255, 0.7); /* Ajuste a opacidade conforme necessário */
    transition: color 0.3s ease; /* Transição suave para o efeito hover */
}

.manga_card_main_info_extra svg{
    transition: color 0.3s ease; /* Transição suave para o efeito hover */
}
.manga_card_main_info_extra input{
    text-align: center;
    border: none;
    width: 10rem;
    background: var(---color-light);
    height: 100%;
    font-weight: 400;
    border-radius: 0.267rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.4;
    border: 1px solid #464d5c;
    background: #1a233a;
    color: #8a99b5;
}


.manga_card_main_info_extra input[type="text"]:focus {
    border-color: #2271cc; /* Cor da borda quando em foco */
    outline: none; /* Remove o contorno padrão */
}

.manga_card_main_capa input[type="text"]:focus {
    border-color: #2271cc; /* Cor da borda quando em foco */
    outline: none; /* Remove o contorno padrão */
}

.modal {
    position: fixed;
    top: 5rem;
    right: 20px;
    width: 300px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateX(100%); /* Inicialmente fora da tela */
    opacity: 0; /* Invisível inicialmente */
    z-index: 5000;
    border-radius: 5px;
    max-height: 62px;
}
#modal-message {
    color: white;
    margin: 0;
    font-size: 16px;
}
.modal.show {
    transform: translateX(0); /* Move para a posição original */
    opacity: 1; /* Visível */
}

.modal-content.error {
    background-color: #f14e4e;
}

.modal-content.success {
    background-color: #2bd22b;
}
.generos_list li{
    border-radius: .25rem;
    display: inline-block;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    background: rgb(26 46 93);
    color: var(---color-light);
    line-height: 1.5em;
    margin-bottom: auto;
    margin-top: auto;
    padding: 0 1rem;
    transition: background 0.3s ease;
}
.loading-overlay {
    position: fixed; /* Fixa na tela */
    top: 0; /* Alinha ao topo */
    left: 0; /* Alinha à esquerda */
    width: 100vw; /* Largura total da tela */
    height: 100vh; /* Altura total da tela */
    background-color: rgb(0 0 0); /* Fundo semi-transparente */
    display: flex; /* Usar flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 9999; /* Garante que fique acima de outros elementos */
    opacity: 1; /* Opacidade padrão */
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    border: 16px solid rgb(0 0 0 / 0%);
    border-top: 16px solid #ffffff;
    border-radius: 50%;
    width: 80px; /* Largura do spinner */
    height: 80px; /* Altura do spinner */
    animation: spin 0.5s linear infinite;
}
.loading-overlay.hidden {
    opacity: 0; /* Opacidade zero para esconder */
    visibility: hidden; /* Esconde o elemento */
}
.hidden {
    opacity: 0; /* Faz o modal invisível */
    visibility: hidden; /* O modal é oculto */
    pointer-events: none; /* Impede interação enquanto o modal está oculto */
}
.generos_list li:hover{
    background: rgba(11, 33, 88, 0.568);
}
.generos_list{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0;
}

.manga_card_div_sinopse{
    display: flex;
    margin-top: 2rem;
    position: relative;
    display: flex;
    padding-top: 0;
    flex-wrap: wrap;
}
.iniciar_leitura{
    color: var(---color-light);
    min-height: 3rem;
    cursor: pointer;
    border-radius: 4px;
    min-width: 13.75rem;
    font: 700 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    border: none;
    background: rgb(26 46 93);
    transition: background 0.3s ease;
}

.iniciar_leitura:hover{
    background: rgba(14, 37, 90, 0.767);
}

.manga_card_buttons{
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.capitulo-content{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.icone_opcoes {
    font-size: 16px; /* Tamanho do ícone */
}

.btn_favoritos img{
    opacity: .8;
    width: 40px;
    aspect-ratio: auto 40 / 40;
    height: 40px;
}

.btn_favoritos{
    background: transparent;
    border: none;
    cursor: pointer;
}

.opcoes{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    min-height: 3rem;
    color: var(---color-white);
    min-width: 3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.manga_card_main_capa input{
    text-align: center;
    border: none;
    width: 10rem;
    background: var(---color-light);
    height: 100%;
    font-weight: 400;
    border-radius: 0.267rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.4;
    border: 1px solid #464d5c;
    background: #1a233a;
    color: #8a99b5;
}

.manga_card_main_capa div{
    position: relative;
    bottom: 100%;
}

.opcoes:hover{
    background: rgba(240, 241, 242, 0.568);
}

/* Estilo da sinopse */
.sinopse_texto {
    max-height: 4.5em; /* Limita a altura da sinopse (aproximadamente 3 linhas) */
    overflow: hidden;
    color: #cccccc;
    line-height: 1.5em; /* Define a altura da linha */
    transition: max-height 0.4s ease, opacity 0.4s ease; /* Transição suave para expandir/recolher */
    opacity: 1;
}

.manga_card_div_sinopse.expandido .sinopse_texto {
    max-height: 100em; /* Define um valor grande para que a sinopse expanda completamente */
    opacity: 1; /* Garante que o texto fique visível */
}

.ler_mais_btn {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
    background-color: transparent;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Transição de fundo ao passar o mouse */
}

.container_buttons_menu{
    display: flex;
    flex-direction: row;
}


.texto_btn {
    color: white;
    margin-right: 5px;
}

/* Seta com animação suave de rotação */
.seta_btn {
    display: inline-block;
    transition: transform 0.4s ease; /* Transição suave para a rotação */
}

/* Quando expandido, a seta rotaciona 180 graus */
.manga_card_div_sinopse.expandido .seta_btn {
    transform: rotate(0deg); /* Rotaciona a seta para cima quando expandido */
}
.lista_div {
    display: flex;
}

.lista_div ul {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    list-style: none;
    text-decoration: none;
    color: var(--color-light);
    text-transform: uppercase;
    padding-left: 0;
    font-weight: 700;
    font-size: 1rem;
    justify-content: space-between;
    gap: 1rem;
}

.lista_div ul li {
    cursor: pointer;
    color: #ffffff;
    padding: 10px;
    transition: color 0.4s ease;
}

.lista_div ul li:hover {
    color: #ffffff70;
}

.lista_capitulos, .comentarios {
    display: none; /* Oculta ambas as seções inicialmente */
}

.lista_capitulos.active {
    display: block; /* Exibe a seção de capítulos se ativa */
}

.comentarios.active {
    display: block; /* Exibe a seção de comentários se ativa */
}
.recomendados_section{
    width: 30%;
}

/* Exibe a seção ativa ao carregar a página */
.lista_capitulos {
    width: 70%;
    margin-top: 1rem;
    display: block; /* Exibe a seção de capítulos por padrão */
}

.label_capitulos{
    text-align: center;
    margin: 1rem;
}

.label_comentarios{
    text-align: center;
    margin: 1rem;
}

.filtros {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.btn-filtro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Largura dos botões */
    height: 40px; /* Altura dos botões */
    background: transparent; /* Fundo transparente para o botão */
    border: 2px solid transparent; /* Borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background 0.3s, border-color 0.3s; /* Transições suaves */
    cursor: pointer; /* Cursor de ponteiro */
}
.close-paginas:hover{
    background: #00000024;
}



.container-label-campoPagina label, span{
    color: #727E8C;
}
.container-label-campoPagina {
    display: flex;
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    flex-direction: column;
    /* text-align: start; */
    gap: 3px;
}

#tituloModal {
    color: var(---color_admin);
    border-bottom: 1px solid #7E8FA3;
}
.btn-filtro:hover {
    border-color: rgb(26 46 93); /* Cor da borda ao passar o mouse */
}

.btn-filtro.active {
    border-color: rgb(26 46 93); /* Cor da borda para o botão ativo */
}

.capitulos-list {
    margin-top: 1rem;
}

.capitulos-list ul {
    list-style: none; /* Remove os marcadores da lista */
    padding: 0; /* Remove o padding padrão */
}

.capitulos-list li {
    padding: 0.5rem; /* Padding nos itens da lista */
    border-bottom: 1px solid #ccc; /* Linha divisória entre os capítulos */
}

#listaCapitulos li a{
    font-weight: 600;
    padding: 0.5rem; /* Padding nos itens da lista */
    color: white;
    list-style: none;
    text-decoration: none;

}
.container_section_souso_1wqw12 .categoria {
    cursor: pointer;
    font-weight: bold;
    color: #ddd;
}

.container_section_souso_1wqw12 .categoria:hover {
    text-decoration: underline;
}

.container_section_souso_1wqw12_conteudo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.manga-info_category p{
    margin: 0;
    padding: 0;

}

.manga-info_category{
    margin: 0;
    justify-content: space-between;
    flex-direction: column;
    display: flex;
    padding: 0;
    margin-bottom: 1rem;
}

.catalogo_category{
    width: 100%;
    height: 100px;
}
.manga-capa_category{
    margin-right: 1rem;
    width: 80px;
}
.info_category_title {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: white;
    white-space: nowrap;
    margin: 0;
    max-width: 180px; /* Define a largura máxima do título */
    overflow: hidden; /* Esconde o texto que ultrapassa a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) no final do texto se for muito longo */
    transition: color 0.3s ease-in-out;
}

.info_category_title:hover{
    color: rgba(255, 255, 255, 0.514);
}

.manga-capa_category img{
    width: 100% !important;
    object-fit: cover;
    height: 100% !important;
    cursor: zoom-in;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
}

.manga-capa_category img:hover{

}
.info_category{
    display: flex;
    flex-direction: column;
}
.catalogo {
    display: none;  /* Todos os catálogos começam ocultos */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.container_section_souso_1wqw12 ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 20px;
}
.container_section_souso_1wqw12 .active_category {
    color: var(---color-light);
    font-weight: bold;
}

.img_complemento_iks{
    max-width: 100px;
    height: auto;
}

.container_text_infomation_ik{
    display: flex;
    flex-direction: column;
}


.container_text_infomation_ik p,
.container_text_infomation_ik button,
.container_text_infomation_ik i {
    text-align: center;
}

.add_button_primary_chapter i{
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.add_button_primary_chapter {
    align-self: center;
    width: 20rem;
    font: 800 15px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif !important;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}


.add_button_primary_chapter:hover,
.add_button_primary_chapter:hover i {
    color: rgba(255, 255, 255, 0.473);
   transform: scale(1.03);
}


.img_complemento{
    display: flex;
    padding: 1rem;
    justify-content: center;
}

.info_category_status{
    color: #ddd;
    font-size: 12px;
}
.recomendados_section{
    flex-grow: 1;            /* Faz o novo container crescer para ocupar o espaço restante */
    margin-top: 7.5rem;    
    margin-left: 1rem;    /* Margem superior */
    padding-left: 20px;      /* Ajuste de espaçamento interno se necessário */
    padding: 1rem;   
}

.container_capitulos_vazios{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container_flex{
    display: flex;           /* Torna os filhos flexíveis */
    justify-content: space-between;  /* Distribui o espaço entre os elementos */
    width: 100%;             /* Faz o container flexível ocupar toda a largura */
}
.manga_card_div {
    padding: 25px;
}

.manga_card_main_capa img{
    cursor: zoom-in;
    object-fit: cover;
    transition: filter 0.3s ease; /* Anima a transição */
    width: 174px;
    user-select: none;
    height: 275px;
    border-radius: 5px;
    transition: all 0.3s ease 0s;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 20px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px;
}
/* Container do tooltip */
.elemento-com-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip oculto inicialmente */
.elemento-com-tooltip::after {
    content: attr(data-title); /* Insere o texto do tooltip */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 120%; /* Ajusta a posição acima do elemento */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Setas do tooltip */
.elemento-com-tooltip::before {
    content: "";
    position: absolute;
    bottom: 110%; /* Alinha a seta com o tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.3s;
}
/* Estilo para as imagens com transição */
.btn_favoritos img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Efeito de hover no ícone (imagem) */
.btn_favoritos:hover img {
    transform: scale(1.1); /* Aumenta levemente o tamanho do ícone */
}
.btn_favoritos:hover {
    transform: scale(1.05); /* Aumenta levemente o tamanho do botão */

}
.btn_favoritos {
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Altera o cursor para indicar que é clicável */
}
/* Adiciona uma pequena transformação durante a transição */
.btn_favoritos img.swap {
    transform: scale(0.8); /* Diminui ligeiramente o ícone */
    opacity: 0.5; /* Deixa o ícone um pouco transparente */
}

/* Mostra o tooltip ao passar o mouse */
.elemento-com-tooltip:hover::after,
.elemento-com-tooltip:hover::before {
    opacity: 1;
}

.manga_card_main_capa svg{
    cursor: pointer;
    position: absolute;
    top: 0;
    margin-left: 8px;
    z-index: 100;
    color: #ffffff;
    right: 0;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.733)); /* Adiciona sombra ao SVG */
    background-color: rgb(0 0 0 / 15%);
}

.section_component_search{
    transition: background 0.3s ease;
    background: rgb(14 22 41 / 83%);
    padding: 1rem;
}

#filtrar-capitulo{
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
}
/* Estilo ao receber foco */
/* Estilo do input */

  /* Estilo do placeholder em foco */
#pesquisar-capitulo::placeholder {
   transition: transform 0.3s ease, opacity 0.3s ease;
}
.spinner {
    border: 16px solid rgb(0 0 0 / 0%);
    border-top: 16px solid #ffffff;
    border-radius: 50%;
    width: 80px; /* Largura do spinner */
    height: 80px; /* Altura do spinner */
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.manga-capa_category img:hover{
    filter: brightness(0.7); /* Reduz o brilho da imagem */
}
.manga_card_main_capa img:hover{
    filter: brightness(0.7); /* Reduz o brilho da imagem */
}
/* Move o placeholder para a direita e reduz a opacidade ao focar */
#pesquisar-capitulo:focus::placeholder {
   transform: translateX(10px); /* Move o placeholder 10px para a direita */
   opacity: 0.5; /* Deixa o placeholder mais claro */
}

.nav-souso-2-component-pesquisa-campo::placeholder{
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-souso-2-component-pesquisa-campo:focus::placeholder {
    transform: translateX(10px); /* Move o placeholder 10px para a direita */
    opacity: 0.5; /* Deixa o placeholder mais claro */
}

.container_capitulo_component_search{
    background: rgb(43 52 73 / 73%);
    padding: 5px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

#filtrar-capitulo i{
    font-size: 16px !important;
}
  
#pesquisar-capitulo{
    outline: none;
    transition: all 0.3s ease;
    color: white;
    border: none;
    background: transparent;
}
.component_search_capitulos{
    display: flex;
    place-self: flex-end;
    align-items: center;
    justify-content: space-between;
}
.manga_card_main_capa{
    position: relative;
    display: inline-flex;
}

.timeline {
    transition: background 0.3s ease;
    height: 556px;
    background: rgb(15 23 42 / 44%);
    color: white; /* Cor do texto */
    position: relative; /* Para o posicionamento dos bullets */
    border-top: 5px solid rgb(26 46 93);
}

.timeline ul {
    list-style: none; /* Remove os marcadores padrão da lista */
    padding: 0; /* Remove o padding padrão da lista */
    margin: 0; /* Remove a margem padrão da lista */
}

.timeline li {
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative; /* Para o posicionamento do bullet */
    padding: 10px 0; /* Espaçamento entre os itens */
    display: flex; /* Usando flexbox para alinhamento */
    align-items: center; /* Centraliza verticalmente */
}

.bullet {
    width: 10px; /* Largura do bullet */
    height: 10px; /* Altura do bullet */
    background-color: #ffd702 ; /* Cor do bullet */
    border-radius: 50%; /* Torna o bullet redondo */
    position: relative; /* Para posicionamento absoluto */
    left: -6px; /* Alinhamento do bullet à esquerda */
}

.timeline a {
    transition: color 0.3s ease;
    text-decoration: none; /* Remove o sublinhado do link */
    color: #fff; /* Cor do texto */
    padding-left: 10px; /* Espaçamento à esquerda do link */
   
}

.timeline a i{
    margin-right: 8px;
}

.container_titulo_capitulo_campo_editar_pagina{
    display: flex;
    flex-direction: column;
    width: 15rem;
    gap: 3px;
}


#tituloCapitulo:focus{
    border-color: #2271cc; /* Cor da borda quando em foco */
    outline: none; /* Remove o contorno padrão */
}
#tituloCapitulo{
    padding: 0.47rem 0.8rem;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 0.267rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.4;
    border: 1px solid #464d5c;
    background: #1a233a;
    color: #8a99b5;
}
.capitulo-content span, i {
    color: #ddd ;
}
.capitulo-content {
    padding-bottom: 5px;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    border-bottom: 1px solid black;
}

/* Muda a cor de todos os elementos filhos quando o mouse passa sobre .capitulo-content */
.capitulo-content:hover,
.capitulo-content:hover * {
    color: #577291;
}


/* Efeito hover no item da lista */
#listaCapitulos li:hover {
    color: #ffffff77; /* Cor de texto mais clara */
}
.container-component-souso-results_xams21 {
    padding: 1rem;
    justify-content: space-between;
    display: flex;
    background: transparent;
}
.container-component-souso-results.show {
    opacity: 1;
    visibility: visible;
}
.container-component-souso-results {
    margin-left: 3rem;
    position: absolute;
    top: 100%;
    margin-right: 3rem;
    left: 0;
    right: 0;
    margin-top: 0;
    background: #373535fa;
    border-radius: 4px;
    max-height: 450px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#closeModal {
    cursor: pointer;
    font-size: 30px;
    cursor: pointer;
    color: white;
    padding: 5px;
    transition: background 0.3s ease-in-out;
    border-radius: 50%;
}

#closeModal:hover{
    background: #00000041;
}

.manga-item {
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color: #1c1c1ce6;
    border-radius: 8px;
    cursor: pointer;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background 0.2s ease-in-out;
}
.livre {
    background-color: green; /* Fundo verde para livre */
}

.dez {
    background-color: blue; /* Fundo azul para +10 */
}

.doze {
    background-color: orange; /* Fundo laranja para +12 */
}

.titulo{
    margin: 3px;
    position: relative;
    display: flex;
    align-items: center;
    display: flex;
}

.titulo div{
    margin-left: 1rem;
}
.ri-search-line {
    font-size: 20px;
}
.loading-animation {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
}
@keyframes prixClipFix {
    0% { clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0) }
    25% { clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0) }
    50% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%) }
    75% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%) }
    100% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0) }
}
@keyframes rotate {
    100% { transform: rotate(360deg) }
}
.loading-animation::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite;
}
.manga-item:hover{
    transform: translateY(-5px);
    background: #131313;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
}
.ads_campo_secundario_div {
    display: flex;
    align-self: center;
}
#ads_campo_secundario{
    gap: 1rem;
    flex-direction: column;
    display: flex;
    padding: 40px;
    padding-bottom: 0;
    display: flex
;
}
.manga_image {
    min-height: 289px;
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.swiper-slide {
    margin-right: 20px !important;
    width: 170px !important;
}
.manga_random_div {
    flex: 0 0 75%;
    padding: 20px;
    overflow: hidden;
}
.manga_card_casousel {
    width: 150px;
    height: 230px;
    margin: 5px;
    position: relative;
    border-radius: 4px;
    display: flex
;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s;
}
.manga_title {
    padding: 1rem;
    background: rgb(15 23 42 / 44%);
    list-style: none;
    font-size: 15px;
    text-align: start;
    position: relative;
    margin: 0;
    text-decoration: none;
    color: var(---color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.manga-info-titulo-component {
    max-width: 35rem;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.idade-label {
    font: 800 10px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    justify-content: center;
    place-content: center;
    align-items: center;
    display: flex;
    color: var(---color-light);
    padding: 5px;
    border-radius: 3px;
    height: 55%;
    width: 22px;
    text-align: center;
}
.quatorze {
    background-color: #FFA500; /* Fundo alaranjado para +14 */
}

.dezesseis {
    background-color: #FFD700; /* Fundo dourado para +16 */
}

.dezoito {
    background-color: rgb(0, 0, 0); /* Fundo vermelho para +18 */
}

.manga-info-titulo-component span {
    color: rgb(153, 153, 153);
    font-size: 12px;
    display: inline-block;
    max-width: 35rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.manga-info h3 {
    list-style: none;
    text-decoration: none;
    font-size: 20px;
    margin: 0 0 10px;
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    color: var(---color-light);
}
.manga-capa img {
    width: 32px;
    height: 51px;
    border-radius: 4px;
}
.manga-info {
    gap: 1rem;
    flex-grow: 1;
    flex-direction: row;
    display: flex;
    align-items: center;
}
.manga-capa {
    flex-shrink: 0;
    margin-right: 20px;
}
.manga-item a {
    display: flex;
    text-decoration: none;
    border: none;
    justify-content: space-between;
    flex-direction: row;
}
.mangas-container {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 20px 20px;
}
/* Efeito hover no link do capítulo */
#listaCapitulos li:hover a {
    color: #ffffff77; /* Cor do link ao passar o mouse */
}

footer {
    transition: background 0.3s ease;
    margin-top: 5rem !important;
    background-color: var(---color-footer);
    color: var(---color-white);
    text-align: center;
    padding: 1px 0;
    font-size: 12px;
    position: relative;
    bottom: 0;
    font: 300 12px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif !important;
    width: 100%;
}.c-breadcrumb .breadcrumb li {
    color: #888;
    display: inline-block;
    font-size: 17px;
}

.c-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
    display: inline-block;
}
.c-breadcrumb {
    margin: 0 -15px;
}
.c-breadcrumb .breadcrumb li a{
    transition: 0.4s ease-in-out;
}

.c-breadcrumb .breadcrumb li a:hover{
    color: #bdbaba;
}
.c-breadcrumb .breadcrumb li+li:before {
    content: "/";
    padding: 0 2px;
}
.single-wp-manga .c-breadcrumb-wrapper {
    margin-bottom: 20px;
}
.c-breadcrumb-wrapper {
    padding-top: 16px;
}
.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .25rem;
}
.c-breadcrumb .breadcrumb li a {
    text-decoration: none;
    list-style: none;
    color: #888;
}
.container_edit_cap button{
    background-color: transparent;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.container_capitulos{
    display: flex;
    gap: 1rem;
    align-items: center;
}
@media only screen and (max-width: 768px) {
    .manga_card_main {
        align-items: center;
        display: flex;
        position: relative;
        justify-content: space-between;
        display: flex;
        gap: 3rem;
        flex-wrap: wrap;
    }
    main {
        position: relative;
        top: 15rem;
    }
    .capitulo-content i{
        margin-right: 5px;
    }
    .capitulo-content span, i{
        white-space: nowrap;
    }

    .manga_star{
        font-size: 25px;
    }

    .titulo-capitulo{
        margin-right: 5px;
        max-width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .generos_list{
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    .capitulo-content{
        margin-left: 1rem;
        font-size: 14px;
        padding-bottom: 3px;
        justify-content: start;
    }

    .ler_mais_btn span{
        color: white !important;
    }
    .container_capitulo_component_search{
        padding: 10px;
    }
    .recomendados_section{
        display: none;
    }
    header {
        background-color: var(---color-black);
        color: #fff;
        padding: 20px 0;
        text-align: center;
        padding: 20px;
        transition: all 0.3s ease;
        position: fixed;
        right: 0;
        top: 0;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        left: 0;
        z-index: 1000;
        gap: 10px;
    }
    .manga_card_main_capa svg {
        cursor: pointer;
        position: absolute;
        margin-left: 8px;
        top: 0;
        z-index: 100;
        color: #ffffff;
        right: 0;
        filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.733));
        background-color: rgb(0 0 0 / 15%);
    }
    .capa_components-1xc1{
        left: 0 !important;
        position: relative !important;
    }
    .manga_card_main_capa{
        width: 100%;
        position: relative;
        place-content: center;
        display: inline-flex;
    }
    header nav ul li {
        display: inline;
        margin: 0 7px;
    }
    #site-header h1{
        font-size: 18px;
    }
    .manga_card_div{
       padding: 15px;
    }
    header nav ul {
        display: flex;
        margin-left: 0;
        justify-content: space-between;
        flex-flow: wrap;
        font-size: 14px;
        margin-top: 1rem;
        margin-right: 0;
        white-space: normal;
        list-style: none;
        list-style-position: initial;
        list-style-image: initial;
        list-style-type: none;
        padding: 0;
    }
    .manga-info-titulo-component span {
        color: rgb(153, 153, 153);
        font-size: 12px;
        display: inline-block;
        max-width: 11rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .idade-label {
        font: 800 10px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        justify-content: center;
        place-content: center;
        align-items: center;
        display: flex;
        color: var(---color-light);
        padding: 5px;
        border-radius: 3px;
        height: 50%;
        width: 16px;
        text-align: center;
    }
    .lista_capitulos {
        width: 100%;
        margin-top: 1rem;
        display: block;
    }
    

    .container_edit_cap{
        gap: 0px !important;
        margin-left: 0px !important;
    }
    .modal-content-paginas {
        background-color: #272e48;
        margin: 15% auto;
        padding: 30px;
        width: 80%;
    }
    .container_capitulo{
        width: 100%;
        padding-left: 0px !important;
    }

    .manga-info h3 {
        list-style: none;
        text-decoration: none;
        font-size: 20px;
        margin: 0 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        font: 300 14px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        max-width: 11rem;
        color: var(---color-light);
    }

    .container{
        overflow: hidden;
    }

    .manga_card_main_info_extra svg{
        display: none;
    }
    .container-component-souso-results {
        margin-left: 1rem;
        position: absolute;
        top: 100%;
        margin-right: 1rem;
        left: 0;
        right: 0;
        margin-top: 0;
        background: #373535fa;
        border-radius: 4px;
        max-height: 450px;
        overflow-y: auto;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .nav-souso-2-component-pesquisa-campo {
        font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        color: white;
        height: 20px;
        outline: none;
        width: 250px;
        text-align: start;
        padding: 12px;
        border: none;
        background: #000000b0;
    }

}

@media only screen and (orientation: landscape) {

    .titulo-capitulo{
        margin-right: 5px;
        max-width: 20rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    header nav ul {
        display: flex;
        margin-left: 0;
        justify-content: end;
        flex-flow: wrap;
        font-size: 14px;
        margin-top: 1rem;
        margin-right: 0;
        white-space: normal;
        gap: 5px;
        list-style: none;
        list-style-position: initial;
        list-style-image: initial;
        list-style-type: none;
        padding: 0;
    }

    header{
        flex-direction: row;
    }

    #site-header h1 a{
        text-decoration: none;
        white-space: nowrap;
        color: inherit;
    }
}