/* Defino colores */
:root{
    --main-primary-color: #606060;
    --main-primary-background: #fff;
    --buton-primary-color: white;
    --button-primary-background: #088a08; 
    --main-color:black;
}


/* Fuentes */
@font-face {
    font-family: "Roboto Slab";
    src: url("fonts/RobotoSlab-VariableFont_wght.ttf") format("truetype"); 
}

*, html, body{
    font-family: "Roboto Slab", sans-serif !important;
}

/* Títulos */
.title {
    margin-bottom: 30px;
    font-weight: bold;
}

/*Navbar*/
.navbar{
    background-color: var(--main-primary-background) !important;
}

.navbar a, .navbar .dropdown button{
    color:var(--main-primary-color) !important;
}

.navbar .dropdown button, .navbar .dropdown button:active, .navbar .dropdown-toggle{
    background:transparent !important;
    border:none !important;
}

.nav-link.active {
    color: var(--button-primary-background) !important;
    border-color: var(--button-primary-background) !important;
}

.nav-link {
    border-bottom: 1px solid transparent;
}

/* Página */
#page-content {
    max-width:1200px;
    margin:auto;
}

/*
button{
    background-color: var(--button-primary-background) !important;
    color: var( --buton-primary-color) !important;
    border-color: var( --buton-primary-color) !important;  
}
*/

/* Drag & Drop */
.upload_button {
    width: 100%;
    line-height: 2rem;
    border-width: 1px;
    border-style: dashed;
    border-radius: 5px;
    text-align: center;
    margin: 10px;
    cursor:pointer;
    padding:20px;
}

.upload_button .bi{
    font-size:30px;
    font-weight:bold;
    
}

/* Botón de descarga */
#ejemplo_prediccion{
    float: right;
}

/*Tabs*/
.tab-content {
    padding: 10px;
}

/* Config --> Botón de actualizar fichero */
.boton_actualizar_fichero{
    position:sticky;
    float:right;
    top:50px;
    background-color: orangered;
    border-color:orangered;
}

.container__editor textarea::selection {
    background: yellow;
}

/* Logs */
#log-div{
    height: 100%;
    overflow: auto;
    padding: 20px;
    border: 1px solid lightgray;
    border-radius: 7px;   
    margin-bottom: 30px;
}

.log_debug, .log_info {
    color:green;
}

.log_warning {
    color:yellow;
}
.log_error, .log_fatal {
    color:red;
}

.log_debug, .log_info, .log_warning, .log_error, .log_fatal{
    padding: 5px 0px;
    border-bottom:1px solid lightgray
}

/* Tables */
#datos_subidos, #datos_reentrenamiento {
    overflow-x: auto;
}

/* Alerts */
.alert {
    right: 40px;
    position: fixed;
    bottom: 0px;
    z-index: 99999;
}

/* Date Picker */
#selector_fechas{
    float:right;
}

.DateRangePickerInput__withBorder{
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #dbdbdb;
}

/* Data Picker Página Formulario */
#pagina_formulario .SingleDatePickerInput__withBorder{
    border:none;
}

#pagina_formulario .DateInput_input.DateInput_input_1{
    padding: 0px;
    width:100%;
    max-width:none;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

#pagina_formulario .DateInput, .SingleDatePicker, .SingleDatePickerInput {
    width:100%;
}

/* Botones acción */
#obtener_prediccion_documento, #reentrenar_modelo {
     width: auto;
    display: block;
    margin-left: auto;
    margin-bottom: 40px;
}

/* Data Cards*/
.data_card_title, .data_card_subtitle{
    width:100%;
    text-align:center;
    display:block;
}

.data_card_title{
    font-size: 2.5rem;
    font-weight:bold;
}

.data_card{
    border:1px solid var(--main-color);
    border-radius:7px;
    width: 70%;
    margin: 20px auto;
    background: var(--white-color);
    color: var(--main-color);
    
}

/* Export button */
.dash-spreadsheet-menu {
    display: block !important;
}

.export {
    float:right;
    padding:8px 10px;
    margin-bottom:10px;
    border-radius:7px;
    background-color: var(--button-primary-background);
    border-color:transparent;
    color: var(--buton-primary-color);
}

/* Re upload*/
.re_upload {
    position: absolute;
    right: 0px;
    border: none;
    background: transparent;
    color: black;
    height:auto;
    width:auto;
    margin:0px;
    padding:0px;
}

.tab-content {
    position: relative;
}

.re_upload i{
    font-size:30px;
}


.re_upload:hover{
    background:transparent;
    border:none;
    color:black;
    
}

/* Filtros Incubadora */
#filtros_incubadora{
    margin-left: auto;
    margin-right: 0; 
}

/* Logo DECIDATA */
#logo_decidata {
    width: 150px;
    position:fixed;
    bottom:20px;
    right:20px;
}

#logo_decidata img{
    width: 100%;
}

/* Página About */
#pagina_about {
    max-width:1000px;
    padding:10px 50px;
    margin:auto;
}

/* Loader */
#_dash-loading-callback {
position: fixed;
z-index: 100;
}

#_dash-loading-callback::after {
content: 'Entrenando modelos... Esto puede tardar más de 10 minutos';
font-family: sans-serif;
padding-top: 50px;
color: #000;

-webkit-animation: fadein 0.5s ease-in 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.5s ease-in 1s forwards; /* Firefox < 16 */
    -ms-animation: fadein 0.5s ease-in 1s forwards; /* Internet Explorer */
        -o-animation: fadein 0.5s ease-in 1s forwards; /* Opera < 12.1 */
        animation: fadein 0.5s ease-in 1s forwards;  
/* prevent flickering on every callback */
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;

/* The banner */
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
cursor: progress;
z-index: 100000;

background-image: url(https://i.pinimg.com/originals/38/4b/a3/384ba3c66b36556ceddaa15a9a567da9.gif);
background-position: center center;
background-repeat: no-repeat;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Botón de descarga */
.boton_descarga, .boton_descarga:hover,.boton_descarga:active {
    background:transparent;
    color:var(--button-primary-background);
    border:none;
    text-decoration:underline;
}

/* Loader 
.dash-spinner {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transform: -webkit-translate(-50%, -50%) !important;
    transform: -moz-translate(-50%, -50%) !important;
    transform: -ms-translate(-50%, -50%) !important;
}
*/

.dash-spinner {
    width: 100% !important;
    height: 100%;
    background: rgb(0 0 0 / 40%);
    position: fixed!important;
    height: 100vh!important;
    left: 0!important;
    margin: 0px!important;
    top: 0!important;
}

.dash-sk-child {
    width:60px !important;
    height:60px !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
}

.dash-sk-circle .dash-sk-child:before{
    background: lime !important;
}