@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root{
    --green-primary: #689f38;
    --green-secondary: #395521;
    --green-hover: #517A2D;
    --text-primary: #F0F5EA;
    --text-secondary: #7D807A;
    --border-primary: #3A3C3A;
    --background-primary: #0F110F;
    --background-secondary: #111311;
    
    --background-black-25: #2A2A2A;
    --background-black-50: #121212;
    --background-black-100: #000000;
    
}


/*------- DESING MAIN --------*/

html, body{
    height: 100%;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
    background: var(--background-primary);
    color: var(--text-primary);
}

body .ui-widget{
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px;
}

#content-body{
    width: 100%
}

@media screen and (min-width: 1370px){
    #content-body{
        width: 1280px;
    }
}


/*------- DESING COLORS --------*/

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

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



.text-green-lite-500{
    color: var(--green-primary)  !important;
}

.hover\:text-green-lite-500:hover {
    color:  var(--green-primary)  !important;
}



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

.border-green-lite-500{
    border-color: var(--green-primary)  !important;
}



.bg-green-lite-500{
    background:  var(--green-primary)  !important;
}

.hover\:bg-green-lite-600:hover {
    background:  var(--green-hover)  !important;
}

.bg-black{
    background:  var(--background-primary)  !important;
}

.bg-black-secondary{
    background:  var(--background-secondary)  !important;
}

.bg-black-secondary-2{
    background:  var(--background-secondary-2)  !important;
}

.bg-black-25{
    background:  var(--background-black-25)  !important;
}
.bg-black-50{
    background:  var(--background-black-50)  !important;
}
.bg-black-100{
    background:  var(--background-black-100)  !important;
}




/* Estilos para navegadores WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
    height: 8px; /* Alto de la barra en scroll horizontal */
}

::-webkit-scrollbar-track {
    background: #181818; /* Color del fondo de la barra */
}

::-webkit-scrollbar-thumb {
    background: #3d3d3d; /* Color de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color al pasar el cursor */
}

/* Para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #3d3d3d #181818;
}