html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 90px 0 0 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  background: #e8e8e8;
}

 /*----------------- BOOTSTRAP -----------------*/
.txtPrimary { color: darken(#428bca, 6.5%); }
.txtSuccess { color: #5cb85c; }
.txtWarning { color: #f0ad4e; }
.txtDanger { color: #d9534f; }
.txtCancel { color: #b65bde; }
.txtInfo { color: #5bc0de; }

.modal { color: #333; }
.panel-danger>.panel-heading { color: #333; background-color: #f9534f; border-color: #a94442; }
.pagination>li>a, .pagination>li>span { color: #333; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  background-color: #f9534f; border-color: #f9534f; }
.form-control-inline { min-width: 0; width: auto; display: inline; }
.alert { margin-top: .5rem; display: none; }
button.close2 { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; }
.close2 { font-weight: 700; color: white; text-shadow: 0 1px 0 #fff; }
.row:not(:last-of-type) { margin-bottom: 1rem; }

.containerApp { min-height: 98%; min-width: fit-content; margin: 0 3rem; }
.containerApp .row { margin-bottom: inherit; }
.buttonApp { /*color: #333;*/ color: white; background-color: #f9534f; }
.buttonApp_disabled { color: grey; background-color: #ccc; }
.cardBase { padding: 0 1.5rem; margin-bottom: 15px; }
.card { background-color: white; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem; }
.card2 { max-height: 400px; height: 40%; height: -webkit-fill-available; height: fill-available; overflow: auto; }
.card3 { max-height: 805px; height: 80%; height: -webkit-fill-available; height: fill-available; overflow: auto; }

.labelInline { display: inline-block; }
.labelQustom { margin-bottom: 5px; font-weight: 700; }
.labelQustom2 { margin-bottom: 5px; font-weight: 500; font-style: italic; color: grey; }
.labelQustom3 { margin-bottom: 5px; font-weight: 500; font-style: italic; color: #333; cursor: pointer; }
.labelQustom3.active { color: #f9534f; }

.hr-xs { margin: 7px 0;}

/*----------------- DATATABLES -----------------*/
div.dataTables_wrapper div.dataTables_paginate { text-align: center; }

/*---------------- CHARTJS ------------------*/
.chart-container { position: relative; margin: auto; height: 35vh;  }
.card3 .chart-container { height: 79vh;  }

/*---------------- TOP NAVBAR ------------------*/
#menu { border-bottom: 1px solid #333; }
.navbar-default { background-color: white; border-color: #e7e7e7; }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover { color: black; background-color: #f9534f; }
.navbar-nav.navbar-center { position: relative; left: 50%; transform: translatex(-50%); }
#listMenu ul li p { margin: 0; text-align: center; }
.icon-navbar { text-align: center; font-size: 1.8rem; }
.stats-container { min-height: 120px; height: 120px; text-align: center; }
.widget-container { min-height: 320px; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/*---------------- QUSTOM ------------------*/
#filters p:first-of-type { font-weight: bold; display: inline-block; }
#filters .dropdown { display: inline-block; }
#resultListSearch tbody tr td { vertical-align: middle; text-align: center; }
#resultListSearch tbody tr td:nth-child(5),
#resultListSearch tbody tr td:nth-child(6),
#resultListSearch tbody tr td:nth-child(10) { text-align: left; }

#colorsList { max-width: 700px; margin: 0 auto; }
#colorsList tbody tr td { text-align: center; vertical-align: middle; }
#colorsList tbody tr td:nth-child(1) { text-align: left; }
#colorsList .color-select { max-width: 60px; }
.colorTag { display: inline-block; max-width: 25px; min-width: 25px; min-height: 25px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; cursor: pointer; }
.colorTag:not(:last-child) { margin-right: 2%; margin-bottom: 5px; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
  html, body, .containerApp { height: auto; }
  body { padding: 60px 0 0 0; }
  .navbar-brand:before { content: "PETICIONES"; }
  /*.chart-container { position: relative; max-height:100%; max-width:100%; }*/
  .cardBase { margin-bottom: 1rem; }
  .card2, .card3 { height: auto; }

}