/* public/css/style.css */

.form-control {
    border-radius: 0px !important;
}

/* Visível no PC */
@media only screen and (min-width: 1000px) {
    .mobile {
        display: none !important;
    }
    .pc {
        display: block !important;
    }
    /* Alinhando o conteúdo da área do usuário */
    .content {
        padding-left: 240px;
        padding-right: 80px;
        padding-top: 140px;
        padding-bottom: 50px;
    }
}

.num_mercados {
    font-size: 18px !important;
}

/* Visível no Mobile */
@media only screen and (max-width: 999px) {
    .chart-container-plannig {
        padding: 20px !important;
    }
    .list_title {
        font-size: 33px !important;
    }
    .list {
        font-size: 33px !important;
    }
    .text_itens {
        font-size: 38px !important;
    }
    .num_mercados {
        font-size: 38px !important;
    }
    .pc {
        display: none !important;
    }
    .mobile {
        display: block !important;
    }
    /* Alinhando o conteúdo da área do usuário */
    .content {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 200px;
    }
    h2 {
        font-size: clamp(0px, 6.5vw, 70px);
    }
    .btn-yellow {
        font-size: clamp(0px, 3.5vw, 40px);
        padding-top: 10px !important;
        padding-bottom: 11px !important;
    }
    .btn-blue {
        font-size: clamp(0px, 3.5vw, 40px);
        padding-top: 10px !important;
        padding-bottom: 11px !important;
    }
    .period-input {
        font-size: clamp(0px, 4.5vw, 50px);
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }
    .logo-nav {
        width: 25vw !important;
    }
    .header-nav {
        padding: 25px;
    }
    p, span, div {
        font-size: 35px;
    }
    
}

/* Estilo para os links */
a {
    text-decoration: none !important;
    color: #000000;
}

/* Estilo para a barra lateral */
.sidebar-nav {
    height: 100vh;
    width: 170px;
    background-color: #ffffff;
}

.sidebar-content {
    height: calc(100vh - 82px);
    overflow-y: auto;  /* Ativa o scroll vertical */
}

/* Para navegadores baseados em WebKit (Chrome, Safari, Edge) */
.sidebar-content::-webkit-scrollbar {
    height: 50px;
    width: 6px; /* Largura da barra de rolagem */
    margin-top: 82px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.178); /* Torna a barra de rolagem praticamente invisível */
    border-radius: 10px; /* Arredonda as bordas */
}

.sidebar-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.281); /* Exibe a barra de rolagem ao passar o mouse */
}

/* Estilo para os itens da barra lateral */
.sidebar-item {
    height: 150px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 500;
}

.sidebar-item:hover {
    background-color: #fcfcfc;
}

/* Estilo para o cabeçalho fixo */
.header-nav {
    width: 100vw;
    background-color: #ffffff;
    z-index: 1000;
}

/* Estilo para os itens do cabeçalho fixo */
.header-nav-item {
    margin-left: 40px;
    padding-left: 40px;
    margin-right: 40px;
    border-left: 2px solid #e0e0e0;
}

/* Estilo para afinar os svgs da barra lateral */
.fine-svg {
    stroke-width: 0.0001;
    stroke: currentColor; /* Define a cor do traço como a cor atual do ícone */
}

/* Estilo dos itens do menu mobile */
.menu-item {
    height: 350px;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 500;
    font-size: 40px;
}

/* Estilo do botão de fechar menu mobile */
.close-btn {
    background-color: white; 
    border: none;
    color: black
}

/* Alinhar o botão de fechar menu mobile pela direita */
.close-div {
    text-align: right;
}

/* Estilo do fundo gradiente */
.gradient {
    background: linear-gradient(to bottom right, rgb(247, 247, 247), rgb(241, 241, 241));
    min-height: 100vh;
}

/* Adicinando icone de agenda no seletor de período */
.input-group-text {
    border-radius: 5px 0px 0px 5px !important;
    height: 100%;
}

/* Removendo borda dos focos do bootstrap */
.form-control:focus, textarea:focus, select:focus, .btn:focus {
    box-shadow: 0 0 0 0 !important;
    border: 0 none !important;
    outline: 0 !important;
    border: 1px solid rgb(201, 201, 201) !important;
}

button {
    box-shadow: 0 0 0 0 !important;
    border: 0 none !important;
    outline: 0 !important;
}

/* Customizando seletor de período */
.period-input {
    background-color: #00000000;
    border: 1px solid rgb(201, 201, 201);
    border-radius: 30px;

}

/* Adicionando margem no seletor de período */
.period-form-group {
    border-radius: 30px;
}

/* Customizando seletor de período com foco */
.period-input:focus {
    box-shadow: 0 0 0 0 !important;
    background-color: #00000000;
    border: 1px solid rgb(201, 201, 201) !important;
}

/* Estilo do botão amarelo */
.btn-yellow {
    background-color: #FFBD59;
    border: none;
    padding: 7px 25px;
    border-radius: 5px;
}

/* Estilo do botão azul */
.btn-blue {
    background-color: #0373FF;
    border: none;
    padding: 7px 25px;
    border-radius: 5px;
    color: #ffffff;
}

/* Estilo do botão azul */
.btn-grey {
    border: none;
    padding: 7px 25px;
    border-radius: 5px;
}

/* Estilo do botão amarelo */
.btn-grey:hover {
    background-color: #e4e4e4;
}

/* Estilo do botão amarelo */
.btn-yellow:hover {
    background-color: #f0b050;
}

/* Estilo do botão azul */
.btn-blue:hover {
    background-color: #046ae7;
}

/* Conainer do gráfico */
.chart-container {
    position: relative;
    width: 100%;
}

/* Chack box do gráfico */
.form-check-input {
    background-color: #00000000;
    border: 1px solid #000000
}

/* Chack box do gráfico ativo */
.form-check-input:focus {
    box-shadow: none;
}

/* Gráfico */
canvas {
    width: 95% !important;
    margin: auto;
}

/* Botão de ver nota */
.btn-nota {
    text-decoration: none;
    border-radius: 5px;
    min-width: 100%;
    color: rgb(100, 100, 100);
}

p {
    margin: 0px !important;
}

.chart-container p {
    font-size: 20px;
}

textarea {
    border: 1px solid #00000062 !important;
    border-radius: 15px !important;
    min-height: 150px !important;
    padding: 20px 25px !important;
}

textarea:focus {
    border: 1px solid #00000062 !important;
}

.form-control {
    border: 1px solid rgb(201, 201, 201) !important;
    color: rgb(100, 100, 100) !important
}


/* Estilos de card */
.card {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 25px 40px;
    width: 100%;
}

/* Ultra */
@media only screen and (min-width: 2095px) {
    .cover {
      left: clamp(10px, 20vw, 400px) !important;
    }
  }
  
  /* PC */
  @media only screen and (max-width: 2095px) {
    .cover {
      left: clamp(10px, 10vw, 500px) !important;
    }
  }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Estilo para o campo de entrada */
.autocomplete {
    position: relative;
    display: inline-block;
}

textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Estilo para a lista de sugestões */
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px; /* Limita a altura máxima da lista de sugestões */
    overflow-y: auto;  /* Adiciona barra de rolagem vertical se necessário */
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* Estilo para o aviso de palavra não permitida */
.warning {
    color: red;
    margin-top: 5px;
    display: none; /* Inicialmente escondido */
}

.no-break {
    page-break-inside: avoid;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Opcional: adiciona um leve movimento vertical */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0); /* Retorna o elemento à posição original */
}

/* Ocultar a setinha no select */
select {
    -webkit-appearance: none; /* Para Chrome, Safari e outros navegadores baseados no WebKit */
    -moz-appearance: none; /* Para Firefox */
    appearance: none; /* Para outros navegadores modernos */
    background: none; /* Remove qualquer fundo que possa incluir a seta */
}

/* Especificamente para o Firefox */
select::-ms-expand {
    display: none; /* Remove a seta no IE e Edge */
}