/*** FONTS ***/

/* heebo-regular - latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    src: url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.9b299a7beefa.eot"); /* IE9 Compat Modes */
    src: local('Heebo'), local('Heebo-Regular'),
         url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.9b299a7beefa.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.cac824868e30.woff2") format('woff2'), /* Super Modern Browsers */
         url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.12b81e568932.woff") format('woff'), /* Modern Browsers */
         url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.dceaf1a94eba.ttf") format('truetype'), /* Safari, Android, iOS */
         url("google-fonts/heebo-v5-latin/heebo-v5-latin-regular.895718f90abd.svg#Heebo") format('svg'); /* Legacy iOS */
}
  
  /* domine-regular - latin */
  @font-face {
    font-family: 'Domine';
    font-style: normal;
    font-weight: 400;
    src: url("google-fonts/domine-v7-latin/domine-v7-latin-regular.0f00e5f0cbd5.eot"); /* IE9 Compat Modes */
    src: local('Domine'), local('Domine-Regular'),
         url("google-fonts/domine-v7-latin/domine-v7-latin-regular.0f00e5f0cbd5.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
         url("google-fonts/domine-v7-latin/domine-v7-latin-regular.c9fbd9788872.woff2") format('woff2'), /* Super Modern Browsers */
         url("google-fonts/domine-v7-latin/domine-v7-latin-regular.d26ebf48eda4.woff") format('woff'), /* Modern Browsers */
         url("google-fonts/domine-v7-latin/domine-v7-latin-regular.8940f0a0e6e6.ttf") format('truetype'), /* Safari, Android, iOS */
         url("google-fonts/domine-v7-latin/domine-v7-latin-regular.6b3a2b5ac166.svg#Domine") format('svg'); /* Legacy iOS */
}

/* Standardschrift */
body {
	font-family: "Heebo", sans-serif;
	font-size: 18px;
	color: #222524;
}

/* Überschrift */
h1 {
  font-size: 24px;
}

/*** COLORS ***/

/* Color Palette */
:root {
    --capella-hausfarbe: #0058b0;
    --capella-light: #0088cc;
    --capella-dark: #1c2f8c;
    --capella-green-dark: #004d33;
    --capella-green: #006e37;
    --capella-green-light: #269138;
    --error-red: #eb4655;
    --sunflower-yellow: #ffea00;
    --success-green: #7dc81e;
    --black: #222524;
    --grey-2: #c5c5c5;
    --grey-1: #f2f2f2;
    --light-orange: #f47900;
    --tonica-farbe: #006E37;
}
  
/*** BUTTONS ***/

a.btn.btn-default,
.btn-default,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus {
  font-family: Heebo;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: var(--tonica-farbe);
  background-color: white;
  border-color: var(--tonica-farbe);
  border-radius: 2px;
  -webkit-transition-duration: 0.5s; /* Safari */
  transition-duration: 0.5s;
}

a.btn.btn-default:hover,
.btn-default:hover {
  color: white;
  background-color: var(--tonica-farbe);
  border-color: var(--tonica-farbe);
}

a.btn.btn-primary,
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
  font-family: Heebo;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  border-radius: 2px;
  background-color: var(--tonica-farbe);
  margin: 0;
  -webkit-transition-duration: 0.5s; /* Safari */
  transition-duration: 0.5s;
}

a.btn.btn-primary:hover,
.btn-primary:hover {
    color: var(--tonica-farbe);
    background-color: #ffffff
}

a.btn-link {
  font-family: Heebo;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  color: var(--tonica-farbe);
  background-color: white;
}

/*** NAVIGATION BAR ***/

/*
.navbar-default .navbar-nav {
    font-family: Domine;
}
*/

/*  body padding for navigation bar fixed to top */
body {
  padding-top: 72px;
}

nav.navbar-default {
  background-color: var(--tonica-farbe);
}

.navbar-default .navbar-nav>li>a {
  color: white;
}

.navbar-default .navbar-nav>li>a:hover {
  color: var(--grey-1);
}

.navbar-default .navbar-nav>.active>a  {
  color: var(--tonica-farbe);
  background-color: white;
}

.navbar-header {
  width: 100%;
}

/* prevent navbar from displaying in multiple lines */
.navbar-nav>li, .navbar-nav {
  float: left;
  margin: 0;
}
  
.navbar-default .navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

#dicegame>a {
  padding-top: 17px;
}

.navbar-default .navbar-nav>li>a:focus {
  color: white;
}

/* show navigation icons only on mobiles */
.navbar-default .navbar-nav>li>a>span {
  display: none;
}

@media (min-width: 768px) {
  .navbar-default .navbar-nav>li>a>span {
    display: inline;
    padding-left: 3px;
  }
}

.navbar-nav img {
  height: 23px;
}

.navbar-nav .capella-icon img {
  border: 2px solid white;
  border-radius: 5px;
}

/*** COOKIE CONSENT ***/

.freeprivacypolicy-com---palette-light button.cc-nb-okagree,
.freeprivacypolicy-com---palette-light button.cc-nb-reject,
.freeprivacypolicy-com---palette-light button.cc-cp-foot-save {
  background-color: var(--tonica-farbe);
}

#title_functionality,
#title_tracking,
#title_targeting {
  display: none;
}

/*** START TAB ***/

div.tabStart,
div.tabExport,
div.tabImprint {
  max-width: 800px;
  margin: auto;
}

div.tabStart h1 {
  margin-top: 50px;
}

div.tabStart a i {
  color: var(--tonica-farbe);
}

div.tabStart img.img-composition {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid black;
}

div.tabStart img.logo,
div.tabStart i.bi {
  padding-right: 20px;
}

/* News */
#news {
  background-color: #cce2d7;
  padding: 10px 20px 10px 20px;
}

#news h1 {
  margin-top: 10px;
}

/*** MELODY TAB (flex layout) ***/

div.tabMelody {
  display: flex;
  flex-direction: column;
  /* height is calculated dynamically */
}

div.tabMelody .buttonBar,
#scoreToolbar {
  padding-top: 5px;
  background-color: var(--grey-1);
}

div.tabMelody .buttonBar {
  margin-top: -20px;
  padding-left: 5px;
}

#editorContainer {
  flex-grow: 1;
  overflow: hidden auto;
}

#editorContainer div.melodyEditor {
  border: none;
}

#examples,
#uploadForm {
    float: left;
    margin-right: 10px;
}

/* hide upload button */
#id_file {
    display: none;
}

/* anthems */
#anthems,
#uploadForm {
    float: left;
    margin-right: 10px;
}

#anthems .row {
  min-width: 450px;
  margin: 0;
}

#anthems ul {
  padding: 0;
}

#anthems a {
  display: block;
  padding: 5px;
  color: black;
  text-decoration: none
}

/*** COMPOSE TAB ***/

div.tabCompose {
  max-width: 1000px;
  margin: auto;
}

#viewerContainer {
  margin-bottom: 20px;
}

#viewerContainer div.melodyViewer {
  border: none;
}

#composeButton {
  margin-top: 20px;
  margin-bottom: 20px;
}

div.thumbnail img {
  height: 120px;
  width: 90px;
  opacity: 0.5;
}

div.thumbnail.selected img {
  opacity: 1.0;
}

div.thumbnail p {
  font-size: 14px;
  margin: 0;
  padding-top: 10px;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
  color: white;
  background-color: var(--tonica-farbe);
}

#composeButton i.fa-spin {
  margin-right: 8px;
}

/* hide compose options */
#more-options, #options {
  display: none
}

#result {
  margin-bottom: 50px;
}

img.result-img {
  margin-top: 20px;
  width: 100%;
  border: 1px solid black;
}

/*** DICEGAME TAB ***/

div.tabDiceGame {
  max-width: 1000px;
  margin: auto;
}

#composeButton {
  margin-top: 20px;
  margin-bottom: 20px;
}

#composeButton i.fa-spin {
  margin-right: 8px;
}

#result {
  margin-bottom: 50px;
}

img.result-img {
  margin-top: 20px;
  width: 100%;
  border: 1px solid black;
}

/*** EXPORT TAB ***/

a.btn-lg {
  margin-top: -5px;
  color: var(--tonica-farbe);
}

div.download-img {
  margin-top: 10px;
}