/* Azul Krones (#003B75) en lugar del celeste "info" de Material Dashboard.
   Se carga después de material-dashboard.css (ver layouts/app.blade.php). */

.btn.btn-info,
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info:not(:disabled):not(.disabled):active,
.show > .btn.btn-info.dropdown-toggle,
.bootstrap-select .dropdown-toggle.btn-info,
.bootstrap-select .dropdown-toggle.btn-info:hover,
.bootstrap-select .dropdown-toggle.btn-info:focus,
.bootstrap-select.show > .dropdown-toggle.btn-info {
  background-color: #003B75 !important;
  border-color: #003B75 !important;
  color: #fff !important;
  box-shadow: 0 2px 2px 0 rgba(0, 59, 117, .14), 0 3px 1px -2px rgba(0, 59, 117, .2), 0 1px 5px 0 rgba(0, 59, 117, .12) !important;
}

.btn.btn-info:hover,
.btn.btn-info:focus,
.bootstrap-select .dropdown-toggle.btn-info:hover,
.bootstrap-select .dropdown-toggle.btn-info:focus {
  background-color: #002d59 !important;
  border-color: #002d59 !important;
}

.badge.badge-info {
  background-color: #003B75 !important;
  color: #fff !important;
}

.card .card-header.card-header-info:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
  background: #003B75 !important;
  color: #fff !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 59, 117, .4) !important;
}

/* Título de página (barra superior) con el mismo estilo que los títulos de tarjeta
   ("Search Service Appointment"): Roboto Slab, negrita, color #3C4858. */
.navbar .navbar-brand {
  font-family: "Roboto Slab", "Times New Roman", serif;
  font-weight: 700;
  color: #3C4858;
}

/* Menú lateral: ítem activo (Dashboard, submenús como Roles, etc.) en azul Krones. */
.sidebar[data-color="azure"] li.active > a {
  background-color: #003B75;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 59, 117, .4);
}

/* Páginas con data-color="azure" (Admin: Users, Roles, Permissions, etc.): reemplaza el cian #00bcd4. */
.content[data-color="azure"] .pagination > .page-item.active > a,
.content[data-color="azure"] .btn-sm,
.content[data-color="azure"] .btn-fill,
.content[data-color="azure"] .moving-tab,
.content[data-color="azure"] .dropdown-item.active,
.content[data-color="azure"] .dropdown-item:hover {
  background-color: #003B75 !important;
}

.content[data-color="azure"] .card-icon {
  background: #003B75 !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 59, 117, .4);
}

.content[data-color="azure"] a i.material-icons {
  color: #003B75;
}