/* 
    Created on : 30 mar. 2020, 10:00:53
    Author     : carlos
*/
html {
    font-size: 82%;
}
.main-header {
    /*position: sticky;*/
    /*top: 0;*/
}
input.select2-search__field {
    font-weight: normal;
    color: black;
    min-width: 100%;
}
.select2-search .select2-search--inline input {
    font-weight: normal;
    color: black;
    width: 100% !important;
    
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #222d32;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #222d32;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #222d32;
}
.form-control .krajee-datepicker {
    font-weight: bold;
    color: black;
    width: 100%;
}
.content {
    padding: 5px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
}
#please_wait {
    background: url('../images/ajax-loader.gif') 50% 50% no-repeat #fff;
    height: 50px;
    width: auto;
    display: block;
/*    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;*/
}
.breadcrumb {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 0px;
}
.control-sidebar-bg {
    display: none;
}
.content_output {
    margin:5px
}
/*.modal {
    display: flex;  
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

     other stuff we already covered 

    width: 600px;
    max-width: 100%;

    z-index: 1010;

}*/
.closed {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  
  background: rgba(0, 0, 0, 1);
}
.modal-guts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px 50px 20px 20px;
}
.modal .close-button {
  position: absolute;
  
  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;
  
  top: 10px;
  
  /* needs to look OK with or without scrollbar */
  right: 20px;
  
  border: 0;
  background: black;
  color: white;
  padding: 5px 10px;
  font-size: 1.3rem;
}




.oculto {
    display: none;
}
.table-striped > tbody > tr:hover {
    cursor: pointer;
    color: #000;
    background-color: #dddc94;
    border-color: #337ab7;    
}
.navbar-nav > .user-menu > .dropdown-menu {
    width: 320px;
}
.valorgrande {
    color: #2e6ab1;
    text-align: right;
}
.content-wrapper {
    /* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
    /*background: -prefix-linear-gradient(top, #ff7200, #fff000 50%);*/ 

    /* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
    /*background: linear-gradient(to bottom, #ff7200, #fff000 50%);*/
}
.qdc .main-header .logo, .qdc .main-header .navbar {
    background-color: #222d32; 
}
.qdc .main-header .navbar>.sidebar-toggle {
    color: white;
    border-right: 1px solid grey;
}
.qdc .main-header .navbar .nav>li>a {
    color: white;
}
.qdc .main-header .navbar .navbar-custom-menu .navbar-nav>li>a, .skin-black .main-header .navbar .navbar-right>li>a {
    border-left: 1px solid #777;
    border-right-width: 0;
}
.qdc .main-header .logo {
    border-right: 1px solid #777;
}
.navbar-nav>.messages-menu>.dropdown-menu>li.footer>a , .navbar-nav>.notifications-menu>.dropdown-menu>li.footer>a , .navbar-nav>.tasks-menu>.dropdown-menu>li.footer>a {
    width: 100%;
    background-color: white;
    color: white;
}
.qdc .user-image {
    /*float: left;*/
    width: 25px;
    height: 25px;
    /*border-radius: 50%;*/
    margin-right: 10px;
    /*margin-top: -2px;*/
    padding: 0px;
}
#div_include {
    display:flex;
    flex-direction: row;
    padding: 50px;
    margin: 20px;
    align-items: center;
    background: gainsboro;
    
}
.table-responsive {
    overflow-x: visible;
}
.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap !important;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    white-space: nowrap !important;
    padding: 4px;
}
.kv-table-wrap tr > td:first-child {
    font-size: unset;
}
.qdc .logo-lg {
    color: white;
}

.text-success {
    color: #6bff6e;
}
.citrusgen {
    /*background: -prefix-linear-gradient(top, #ff7200, #fff000);*/ 
    /*background: linear-gradient(to bottom, #ff7200, #fff000);*/
}
section.content {
     /*La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based*/ 
    /*background: -prefix-linear-gradient(top, #ff7200, #fff000);*/ 

     /*La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo*/ 
    /*background: linear-gradient(to bottom, #ff7200, #fff000);*/
    /*min-height: 1017px;*/
    
    
}
section.content .breadcrumb {
    float: right;
    color: white;
    background-color: #222d32;
}
section.content .breadcrumb > .active {
    color:white;
    
}section.content .breadcrumb a {
    color:white;
    font-weight: bold
    
}
section.content h1  {
    /*, section.content .summary*/
    color: white;
    background-color: #bc6118;
}
section.content-header {
    /*background: #ff7200 !important;*/
    background: transparent !important;
    display:none;
}
section.content-header .breadcrumb > li {
    color: white
}
.wrapper .main-header a.logo:hover {
    background-color: #222d32;
}
.kv-grid-table {
    background: white;
}
.kv-grid-table th, .kv-grid-table .filters td, .kv-grid-table thead tr > th {
    background-color: #663712;
    /*background-color: #bc6118;*/ 
    border-color: orange; 
    color: white;
}
.kv-grid-table th > a,.kv-grid-table th {
    /*color: #666;*/
    color: white;
}
.kv-grid-table td > a {
    color: #bc6118;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #bc6118;
    border-color: #bc6118;
    color:white;
}
.content-wrapper {
    /*background-color: #222d32;*/
}
body .main-header .logo-lg, body .main-header .logo-lg:hover {
    /*background-color: #fcfcfc;*/
    background-color: #222d32;
    margin: 0;
    padding: 0;
}
body {
    overflow: unset !important;
    overflow-x: unset;
    overflow-y: unset;
}
.wrapper {
    overflow: unset;
    overflow-x: unset;
    overflow-y: unset;
}
.jumbotron h2 {
    /*background: white;*/
    padding: 20px;
    border-radius: 4px;

}
.jumbotron {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.header_edit {
    padding: 50px;
    margin-top: 10px;
    margin-bottom: 10px;

    color: #bc6118;
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content: space-between
}
.panel-heading {
    background: #bc6118;
    color: white;
}
.panel-warning > .panel-heading {
    background: #bc6118;
    color: white;
}
#main_title_screen {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    margin-top: 30px;
    margin-bottom: 15px;
    /*margin-left: 40px;*/
    /*margin-right: 200px;*/
    background-color: #bc6118;
    /*opacity: 0.6;*/
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    max-width: 70%;
}
.form-group {
    padding: 15px;
    margin: 15px;
}
.multi_entrada, .image_box {
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 50px;
    background-color: beige;
    margin-right: 30px;
}
#selectors_div {
    padding: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
#variable_div {
    padding: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.chart_filters_div {
    /*padding:6px;*/
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap: wrap;
    
}
.chart_filter_block {
    display:flex;
    flex-grow:1;
    /*max-width:50%;*/
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: rgba(0,0,0,0.3);
}
#chart_filters_radio {
    margin:40px;
}
.chart_total_results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.chart_total_div {
    flex-grow: 1;     /* do not grow   - initial value: 0 */
    flex-shrink: 0;   /* do not shrink - initial value: 1 */
    flex-basis: 25em; /* width/height  - initial value: auto */
}
.chart_row {
    flex-grow:1;display:flex;flex-direction:row;flex-wrap:wrap;
}
.chart_row_item {
/*    min-width:50%;
    max-width:50%;*/
    /*flex-grow:1;*/
    /*max-width:100%;*/
    width:100%;
}
.div_add {
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    background-color: rgb(96, 96, 96);
    color:white
}
.div_add select, .div_add option {
    color: black
}

.shelfweightmini {
    margin: 3px;
    padding: 2px;
    display: inline-block;
    background-color: greenyellow;
    border-radius: 2px;
}
.shelfweightmini th {
    margin: 3px;
    padding: 2px;
    font-weight: bold
}
.fruitsquality {
    /*display: inline-block;*/
    margin: 3px;
    padding: 2px;
    background-color: greenyellow;
    border-radius: 2px;
    /*width: 100%;*/
}
.fruitsquality .fresh {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.fruitsquality .shelflife {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.ajax_indicador {
    /*display: none;*/
    padding: 10px;
    background: url('../images/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249,0.5); 
}
.grid-view-loading
{

    background-position: right top;

}
.tr_before_header {
    border-color: #bc6118;
    color: black;
}
/*.loading {
    display: none;
    padding: 10px;
    background: url('../images/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249,0.5); 
    
}*/

.image-grid {
    /*max-width: 80px;*/
    max-height: 60px;
}

.datepicker {
    z-index: 8000;
}

.apexcharts-title-text {
    color: #eee;
    background-color: #bc6118;
}

@media screen and (max-width:640px) {
    .chart_filters_div {
        padding:10px;
        flex-direction:column;
    }    
    .chart_filter_block {
        max-width:100%;
        margin:10px;

    }    
    #selectors_div {
        padding: 10px;
        flex-direction: column;
    }
    .chart_row {
        flex-direction:column;flex-wrap:wrap;
    }
    .chart_row_item {
        max-width:100%;
    }

}
@media screen and (max-width:1024px) and (min-width:640px) {
    .chart_row {
        flex-direction:column;flex-wrap:wrap;
    }
    .chart_row_item {
        max-width:100%;
    }
}

@media screen and (min-width:1024px) {
    /* reglas CSS */
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal1 {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('https://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal1 {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal1 {
    display: block;
}

.glyphicon {
    font-size: 20px;
    padding-left: 5px;
    padding-right: 5px;
    /*color: white;*/
}
td > .glyphicon {
    text-align: center;
}