/*estilos genericos*/

html,body{
    background-image: linear-gradient(to right, #e8faf8 0%,#1b87ac 25%, #1b87ac 75%,#e8faf8 100%) !important;
    background-color: linear-gradient(to right, #e8faf8 0%,#1b87ac 25%, #1b87ac 75%,#e8faf8 100%) !important;
}

/*background colors*/
.bg_rojo{
    background:#ddbdb9;
}

.bg_verde{
    background:#bddacf;
}

.bg_gray{
    background:#e7e7e7;
}

.bg_blue{
    background:#1b87ac;
}

/*colores letra*/
.cc-yellow{
    color:#feae1b;
}

.cc-red{
    color: #b92c28;
}

.cc-blue{
    color:#1b87ac;
}

.cc-white{
    color:#ffffff;
}

/*opciones texto*/
.text-center{
    text-align: center;
}
.size-18{
    font-size: 18px;
}
.text-bold{
    font-weight: bold;
}

/*opciones caja*/
.m-left{
    margin-left: 15px !important;
}
.m-bottom{
    margin-bottom: 20px !important;;
}
.m-top{
    margin-top:15px !important;
}
.p-20{
    padding:20px;
}
.flx-cc{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flx-rc{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.bx-inline{
    display: inline-block;
}
div#content fieldset{
    width: 95%;
    border-radius: 0px;
    box-shadow: 0 0 13px #000000;
    border: none;
}
/*menu navegación*/
.imagen-logo{
        width: 60px;
        height: 60px;
}
div.header{
    padding-left: 0
}
div.header.headermenu{
    border:0;
    border-radius: 0;
    background-color: #3e3e3e;
    width: 100%;
    margin:0;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 120px;
    padding: 10px 20px;
}
div.header.headermenu .title_pandora {
    margin-left: 0;
}
div.header.headermenu .logout{
    color: #1b87ac;
    border: 2px solid #1b87ac;
    box-shadow: 0 0 0 #3e3e3e;
    font-size: 16px;
    float: none;
}
div.header.headermenu .logout:hover{
    background: #ffffff;
}
div.header.headermenu .salir{
    display: inline-block;
    margin-left: 15px;
}
div.link_inicio{
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-size: 18px;
    padding:5px;
}
div.header.headermenu ul{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
}
div.header.headermenu ul li{
    font-size: 20px;
    color: #ffffff;
    border-radius: 0;
}
div.header.headermenu ul ul{
    position: absolute;
    left: 0;
    background-color: darkgray;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: 2px 2px 0px dimgrey;
    padding:0 20px;
}
div.header.headermenu ul ul>li a{
    font-size: 16px;
}

/*oculta enlace submenu PETROLCONTROL*/
div.header.headermenu>ul>li>ul>li>a{
    display: none;
}
/*oculta enlace menu ESPECIALES*/
div.header>ul>li:last-child>a{
    visibility: hidden;
}
/* fin menu */

/* custom style dataTables  */
table#data_table>thead{
    background-color: rgba(0,199,173,0.09);
    color: #1b87ac;
}
.table>thead>tr>th{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table>tbody>tr>td{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table-hover>tbody>tr:hover{
    background-color: azure;
}
 #data_table{
        margin:30px 5px;
    }
/*se van añadiendo los id de las tablas
 ejemplo: div#idtabla_length*/
div#data_table_length,
div#tablaOperador_length{
    float: left;
    padding: 20px;
    color: #046CA0;
}
div#data_table_length select,
div#tablaOperador_length select{
    border-radius: 5px;
    border: 1px solid #046CA0;
}
div#data_table_filter,
div#tablaOperador_filter {
    float: right;
    padding: 20px 0;
    color: #046CA0;
}
div#data_table_filter input,
div#tablaOperador_filter input{
    border-radius: 20px;
    border: 2px solid #046CA0;
}

div#data_table_info,
div#tablaOperador_info  {
    float: left;
    font-weight: bold;
    color: #046CA0;
}
div#data_table_paginate,
div#tablaOperador_paginate{
    float: right;
}
div#data_table_paginate a,
div#tablaOperador_paginate a{
    font-weight: bold;
    margin:0 4px;
    color: #046CA0;
}
div#data_table_paginate span>a.ui-state-disabled,
div#tablaOperador_paginate span>a.ui-state-disabled{
    border: 2px solid #046CA0;
    padding: 5px;
    background-color: rgba(0,199,173,0.09);
    border-radius: 5px;
    opacity: 1;
}
.td_litrosanio{
    display: flex;
}
.td_litrosanio .form-control{
    width: 70%;
}
a.fg-button.ui-button.ui-state-default:hover,
a#data_table_first:hover,
a#data_table_previous:hover,
a#data_table_next:hover,
a#data_table_last:hover,
a#tablaOperador_first:hover,
a#tablaOperador_previous:hover,
a#tablaOperador_next:hover,
a#tablaOperador_last:hover,
th.ui-state-default:hover{
    cursor: pointer;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
    color: #1b87ac;
    background: #e8faf8;
    border:none;
    text-align: center;
    font-weight: bold;
    padding:10px 5px;
}
.ui-state-default .ui-icon {
    display: none;
}
.paging_full_numbers {
    width: auto;
}
.paging_full_numbers .ui-button{
    color: #1b87ac !important; 
}
/*data picker custom style*/
.ui-datepicker-trigger{
    border: none;
    background-color: transparent;
}
div#ui-datepicker-div {
    background-color: #e8faf8;
    padding: 10px;
    width: auto;
}
span.ui-icon.ui-icon-circle-triangle-w {
    color: #046CA0;
}
span.ui-icon.ui-icon-circle-triangle-e {
    color: #046CA0;
    float: right;
}
.ui-datepicker-title {
    color: #046CA0;
    margin: 5px 0;
}
button.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
    float: right;
    margin-top: 10px;
    background-color: #046CA0;
    border: 2px solid #046CA0;
    color: #ffffff;
}
button.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all {
    margin-top: 10px;
    background-color: #046CA0;
    border: none;
    color: #ffffff;
    border: 2px solid #046ca0;
}
/*botontes*/
.btn-petrol, .btn-petrol:focus{
    background-color: #1b87ac;
    color:#ffffff;
}
.btn-petrol:hover{
    background-color: #ffffff;
    border:1px solid  #1b87ac;
    color: #1b87ac;
}
.btn-petrol-success, .btn-petrol-succees:focus{
    background-color:#00c7ad;
    color:#ffffff;
}
.btn-petrol-success:hover{
    background-color:#ffffff;
    border:1px solid #00c7ad;
    color:#00c7ad ;
}
.btn-petrol-danger, .btn-petrol-danger:focus{
    background-color: #b92c28;
    color:#ffffff;
}
.btn-petrol-danger:hover{
    background-color:#ffffff;
    border:1px solid #b92c28;
    color: #b92c28;
}
.modificarotro{
    width: 17% !important;
}
.ui-widget-header{
    border: none;
    background:transparent;
}
div#content h2 {
    font-variant: small-caps;
    color: #1b87ac;
    border:none;
    padding: 5px;
    width: 95%;
    margin: 20px auto;
    border-radius: 0px;
    box-shadow: 0 0 13px #000000;
    text-indent: 25px;
    background: #eeeeee;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000000;
    padding: 15px 10px;
    font-size: 40px;
}
/*iconos tabla*/
.icono_ko {
    font-size: 25px;
    color: #b92c28;
}
.icono_ok {
    font-size: 25px;
    color: #00c7ad;
}
.icono_minus{
    font-size: 25px;
    color:#7A7979;
}
/*grafica dj3 tabla*/
.graph{
  height: 60px;
  width: 85px;
}
/*dispositivos*/
div.content_sondas li {
    height: 250px;
    text-align: center;
    border-radius: 0px;
    -webkit-box-shadow:  0 0 10px #000000;
    -moz-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
    margin:10px 15px 10px 0;
    display: flex;
    flex-direction: column;
}
div.led_activo{
    position: inherit;
    margin:0 auto;
    width: 64px;
}
div.led_activo.on {
    background: url(/images/power_on.png) no-repeat;
}
div.led_activo.off {
    background: url(/images/power_off.png) no-repeat;
}
div.content_sondas{
    padding: 10px;
}
div.content_sondas li div.status_sonda{
    height: 65px;
}
div.content_sondas li div.title_sonda {
    -webkit-box-shadow:  0 0 2px #000000;
    -moz-box-shadow: 0 0 2px #000000;
    box-shadow: 0 0 2px #000000;
}
div.content_sondas li button.nueva_sonda_button{
    background:#1b87ac;
    border:0px solid;
    border-radius: 0px;
    color:#e8faf8;
    box-shadow: 0 0 3px #000000;
    margin:10px auto;
    font-size: 90px;
}
.opciones-dispositivo{
    font-size: 16px;
    display: flex;
    width: 95%;
    margin: 10px auto;
    flex: 1;
    padding: 0;
    background-color: #eeeeee;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0 0 13px #000000;
    height: 85px;
}
.opciones-dispositivo div{
    flex:1;
    text-align: center;
    color: #1b87ac;
    height: 100%;
    padding:20px 5px;
    font-weight: bold;
    text-shadow: 0 1px 0 #000000;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.opcion_activa, .opciones-dispositivo div:hover{
    color: #ffffff;
    background-color: #1b87ac;
    cursor:pointer;
}
.part_form{
    display: none;
}

.form_activo{
    display: block;
}

.volver{
    width: 60%;
    text-align: center;
}


/*provisional para Modelo Predictivo*/
#exTab3 .nav.nav-pills{
    background-color: lightblue;
}