/* Defino variables */
:root {
    --primary-color: #437eeb;
    --secondary-color: #313e5b;
    --white-color: #fff;
    --white-light-color: #eff1fe;
    --warning-color: red;
    --success-color: #398f14;
    --title-color: #313e5b;
    --sub-title-color: #437eeb;
    --body-text: #525f81;
}
/* Defino la página*/
#page-content{
    max-width: 1200px;
    margin: auto;
    padding-top: 20px;
}

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

.navbar>.container-fluid{
    max-width:1200px;
    
}
.navbar a{
    color:var(--white-color) !important;
}

/* Defino el tabset */
.tab-content {
    padding:20px;
}

.active.nav-link{
    font-weight:bold;
}

/* Defino la barra lateral */
.barra_lateral{
    padding:20px;
}

/* Ajusto el slider */
#slider-probabilidad{
    padding-left:5px !important;
}

#slider-probabilidad-div{
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
    margin-top: 20px;

}


/* Data Cards*/
.data_card_title, .data_card_subtitle, .result-card_title, .result-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(--secondary-color);
    border-radius:7px;
    width: 70%;
    margin: 20px auto;
    background: var(--secondary-color);
    color: var(--white-color);
    
}

.result-card_title{
    font-size:2rem;
    font-weight: bold;
}


.result-card_subtitle{
    font-size:1.1rem;
}

.result-card{
    background: var(--secondary-color);
    color: var(--white-color);
    border: 1px solid var(--secondary-color);
    border-radius:7px;
    padding:5px;
}

.mb-3 {
    width:25%;
    display:inline-block; 
    padding:0px 10px; 
}

.fila_resultados {
    margin-bottom: 30px;
}
    

/* Selectores de fechas */
#form-accident-date, #form-claim-date{
    display:block;
    width:100%;
}

.SingleDatePicker, .SingleDatePickerInput, .DateInput{
    width:100%;
    display:block; 
}

.seccion_formulario{
    padding:20px 0px;
    /*border-top:1px solid lightgray*/
}

/* Botón de predecir */
#obtener-prediccion{
    width: 100%;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    line-height: 2;
    box-shadow: 0px 0px 23px 8px #d6d6d6;

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
     -ms-animation: fadein 1s; /* Internet Explorer */
      -o-animation: fadein 1s; /* Opera < 12.1 */
         animation: fadein 1s;

}

#obtener-prediccion:hover{
    background: var(--white-color);
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-weight: bold;
}

.formulario-enviar{
    position:sticky;
    bottom:10px;
    border-radius:7px;
}

.formulario-enviar .col{
    padding:0px;
}

/* Botón de exportación */
button.export {
    background: var(--secondary-color);
    color: var(--white-color);
    border-radius:7px;
    padding: 5px 10px;
    position:absolute;
    z-index:99999;
    bottom:-5px;
}

/* Tablas */
#dataset th, #dataset td, #output-matriz-confusion th, #output-matriz-confusion td {
    text-align: center !important;
    padding:0px 10px;
    font-family: var(--bs-body-font-family);
}

#dataset th, #output-matriz-confusion th{
    font-weight:bold;
}

/* Botón de Aplicar Simulación */
#aplicar-simulacion {
    background: var(--secondary-color);
    border: var(--secondary-color);
    margin-top: 20px;
    border: 2px solid transparent;
}

#aplicar-simulacion:hover {
    background: var(--white-color);
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    margin-top: 20px;
    font-weight: bold;
}

/* Slider de valor */
.rc-slider-handle, .rc-slider-dot-active{
    border-color: var(--secondary-color);
}

.rc-slider-track{
    background: var(--secondary-color);
}

/* Doy estilo al modal */
#modal .modal-header {
    border-color:transparent;
   
}

#modal{
    text-align:center;
}

#probabilidad_fraude {
    font-weight:bold;
    font-size:5rem;
}

#modal .modal-body{
    margin-bottom:30px;
}

#modal p{
    margin:0px;
}

#previo_probabilidad_fraude {
    font-size:1.2rem;
}

/* Botón de descarga de reglas */
#btn-download-txt {
    background:var(--secondary-color);
    color: white;
    border:1px solid transparent;
    border-radius:7px;
    padding: 10px 20px;
    font-weight:bold;
}

#btn-download-txt:hover {
    background:var(--white-color);
    color:var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/* Cards de datos Matriz de Confusión */
.prediction_card_title{
    display:block;
    font-weight:bold;
    font-size:2rem;
}

.prediction_card{
    text-align:center;
    border:1px solid var(--secondary-color);
    border-radius:7px;
    margin-bottom:20px;
    color: var(--secondary-color);
}

/* Fades */
@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; }
}