/*
=============================================
Farben: Periode Farbtafel - Weiss - Blau;
=============================================
*/

body {
  background-color: #f6fcfe;
}

/* footer area */

.emu-footer-area a {
  color: #4a4a4c;
}

.emu-footer-area a:hover,
.emu-footer-area a:focus  {
  border-bottom: 1px dotted rgba(80, 80, 80, 1);
  color: #4a4a4c;
  text-decoration: none;
}

/* ---- button ---- */

.btn-secondary {
  color: #fff;
  background-color: #4a4a4c;
  border-color: #4a4a4c;
  font-size: 0.875rem;
}

.btn-group .btn-secondary:hover, .btn-group .btn-secondary:focus {
  background-color: #19ace6;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #30b4e8;
}

.btn-group .btn-secondary:active,
.btn-group .btn-secondary.is-checked {
  background-color: #1278a1;
}

.btn-group .btn.is-checked {
  color: white;
}

.btn-toggle {
  background-color: #0e6080;
  color: #fff;
}

.btn-toggle:hover {
  color: #fff;
  background-color: #1278a1;
  border-color: #1278a1;
}

.btn-toggle:focus, .btn-toggle.focus {
  color: #fff;
  background-color: #1278a1;
  border-color: #1278a1;
  box-shadow: 0 0 0 0.2rem rgba(18, 120, 161, 0.5);
}

.icon-info, .icon-close {
  fill: #fff;
}

/* ---- Farbtafel ---- */

.farbtafel {
  background-color: #f6f8fe;
  border: 2px solid #1278a1;
}

/* ---- Elemente ---- */

.elemente {
  background: #888;
  color: #262524;
}

.alkali.metall {
  background: #cc3102;
}
.erdalkali.metall { 
  background: #ff8800;
}
.uebergangsmetall { 
  background: #ccc216;
}
.lanthanoid { 
  background: #e65ab9;
}
.actinoid { 
  background: #aa6ddb;
}
.metall { 
  background: #0ccc2d;
}
.halbmetall { 
  background: #0e8021;
}
.alkali.nichtmetall {
  background: #56c8f5;
}
.nichtmetall { 
  background: #0c96cc;
}
.halogene { 
  background: #0e6080;
}
.edelgas { 
  background: #888;
}
.no-category { 
  background: #b0c4de;
}

.grau {
  color: #4a4a4c;
}

/* ---- Farbtafel Modal ---- */

.modal-header, .modal-footer {
  background-color: #e8e8e8;
}

.cell-bg-color {
  background-color: #f7f7f7;
}

@media (min-width: 576px) {
  .cell-bg-color {
    background-color: transparent;
  }
  .cell-bg-color-sm {
    background-color: #f7f7f7;
  }
}

/* ---- Legende ---- */

h3.modul-title {
  background-color: #1278a1;
  color: #fff;
}