@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('/css/fonts/raleway/raleway-v28-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/raleway/raleway-v28-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/css/fonts/raleway/raleway-v28-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/raleway/raleway-v28-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/css/fonts/raleway/raleway-v28-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/raleway/raleway-v28-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/css/fonts/raleway/raleway-v28-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/raleway/raleway-v28-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/css/fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/css/fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/css/fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/css/fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      
}

  app-text p{
    color: var(--themeTextColor) !important;
  }

  app-text h1,
  app-text h2,
  app-text h3,
  app-text h4 {
    color: var(--headingColor) !important;
  }
  

/* fontfamily and font weight */
h1,h2,h3,h4,h5,h6,.title-default, .title-small, ion-card-title, ion-card-subtitle, ion-label, ion-text, ion-button
{
	font-family: var(--headingsFontFamily);
	font-weight: var(--headingFontWeight) !important;
}

p, span, .ion-text-right
{
	font-family: var(--themeFontFamily);
	font-weight: var(--paragraphFontWeight) !important;
}


  /* Header */
 ion-header > ion-toolbar{
    --background: var(--themeHeaderColor) !important;
    --color: var(--themeTextColor);
  }
  
  ion-header ion-buttons {
    color: var(--menuIconColor) !important;
  }

  /* SideMednu */
  icon-header .toolbar-title{
    --color: var(--menuIconColor) !important;
  }

  ion-menu ion-content {
    --background: var(--menuBackgroundColor) !important;
    background: var(--menuBackgroundColor) !important;
    --ion-item-background:var(--background);
    
  }

  ion-menu ion-content ion-label {
   --color: var(--menuTextColor) !important;
   font-family: var(--headingsFontFamily);
	font-weight: var(--headingFontWeight) !important;
  }

  ion-menu ion-footer ion-label {
    --color: var(--menuTextColor) !important;
    font-family: var(--headingsFontFamily);
	font-weight: var(--headingFontWeight) !important;
   }

 ion-footer {
    --background: var(--menuBackgroundColor) !important;
    background: var(--menuBackgroundColor) !important;
    --ion-item-background:var(--background);
    
  }

  ion-header{
    background: var(--menuBackgroundColor) !important;
  }

  ion-icon {
    color: var(--menuIconColor) !important;
  }

  app-cart > ion-footer > ion-toolbar > ion-grid > ion-row > ion-item > ion-icon {
    --ion-color-primary: var(--menuIconColor) !important;
  }

  .item-native{
    --background: var(--menuBackgroundColor) !important;
    background: var(--menuBackgroundColor) !important;
  }
  
  /* Appfooter */
  app-footer ion-footer {
    --background:  var(--themeFootercolor) !important;
    --ion-background-color: var(--themeFootercolor) !important;
  }

  app-food-detail > ion-footer > ion-toolbar > ion-grid > ion-row > ion-col ion-label{
    color:  var(--themeTextColor) !important;
  }
  
  /* CARD */
  ion-card-content ion-label h1,
  ion-card-content ion-label h2,
  ion-card-content ion-label h3,
  ion-card-content ion-label h4,
  ion-card-content ion-label h5,
  ion-card-content ion-label h6 {
    color: var(--headingColor) !important;
  }
  
  ion-card {
    --background: var(--themeThumbnailBackgroundColor) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1.5) !important;
  }
  
  ion-card-title {
    color:var(--headingColor) !important;
  }
  
  ion-card-subtitle{
    color: var(--headingColor) !important;
  }
  
  ion-card-content ion-text h2,
  ion-card-content ion-text h3,
  ion-card-content ion-text h4 {
    color:var(--headingColor) !important;
  }

app-card > ion-card > ion-card-content > ion-button{
    --border-color: var(--buttonColor) !important;
  }

  /*** BUTTONS UND LINKS ***/

.button-outline {
  color: var(--buttonTextColor) !important;
}

ion-button{
  color: var(--buttonTextColor) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 1) !important;
}

.btn-order{
  --background: var(--buttonColor);
  color: var(--buttonTextColor);
}

#open-modal {
  --background: var(--buttonColor);
  color: var(--buttonTextColor) !important;
}
#maincontent > app-dynamic > app-footer > ion-footer > ion-toolbar > ion-button > ion-label{
  color: var(--buttonTextColor) !important;
}

/* Food menu */
ion-textarea > div > textarea {
  color: var(--themeTextColor) !important;
}
#maincontent > app-food-menu > ion-content > ion-fab > ion-badge{
  color: var(--themeTextColor) !important;
}

.segment-button {
	--ion-toolbar-segment-indicator-color:#262424 !important;
	--indicator-color:#262424 !important;
	--indicator-height:6px !important;
}

.ion-text-right {
  color:  var(--themeTextColor) !important;
  font-size: 14px !important;
}

.item-detai{
  color:  var(--themeTextColor) !important;
}

ion-grid h4,
ion-grid ion-text{
  color: var(--headingColor) !important;
}

ion-grid ion-item ion-textarea {
  color: var(--themeTextColor) !important;
  --background: var(--themeHeaderColor) !important;
}

ion-grid ion-item {
  color: var(--themeTextColor) !important;
  --background: var(--themeHeaderColor) !important;
}

ion-grid p {
  color: var(--themeTextColor) !important;
  --background: var(--themeHeaderColor) !important;
}

ion-item-divider{
  --background: var(--themeHeaderColor) !important;
}
ion-grid > ion-row > ion-col > div > ion-item-divider > ion-label {
  color: var(--themeTextColor) !important;
}

ion-grid > ion-row > ion-col > div > ion-item > ion-textarea {
  color: var(--themeTextColor) !important;
}

app-food-detail > ion-content > ion-grid {
  --background:  var(--themeHeaderColor) !important;
  background:  var(--themeHeaderColor) !important;
}

/* search */

ion-searchbar{
  color: var(--themeTextColor) !important;
  --background: var(--themeHeaderColor) !important;

}

ion-item > on-item-divider > ion-toolbar {
  --background:  var(--themeHeaderColor) !important;
  background:  var(--themeHeaderColor) !important;
  --ion-background-color: var(--themeHeaderColor) !important;
}
ion-toolbar {
  --background:  var(--themeHeaderColor) !important;
  background:  var(--themeHeaderColor) !important;
  --ion-background-color: var(--themeHeaderColor) !important;
}

/* cart */
#maincontent > app-cart > ion-content > ion-grid{
  color: var(--themeTextColor) !important;
}

ion-title {
  color:  var(--themeTextColor) !important;;
}

ion-radio-group ion-list{
  --background:  var(--themeHeaderColor) !important;
  background:  var(--themeHeaderColor) !important;
}

/* PaymentGateway */
app-payment-providers ion-content ion-list ion-item{
  --background:  var(--themeHeaderColor) !important;
  background:  var(--themeHeaderColor) !important;
}