:root {
	/* HINTERGRUND APP */
	
  	--bgd-app: #F6F6F6; 
	/* Hintergrundfarbe für den Container */
	
  	/* Hinterverlauf ODER Hintergrundbild für den Container */
  	--bgd-gradient-direction: 0deg; 
	/* Richtung Hintergrundverlauf: 0° - 90° */
	
 	--bgd-gradient-color1: #cccccc;
	/* Erste Farbe für den Verlauf */
	
  	--bgd-gradient-color2: #ffffff;
	/* Zweite Farbe für den Verlauf */
	
 	--bgd-image: linear-gradient( var(--bgd-gradient-direction), var(--bgd-gradient-color1), var(--bgd-gradient-color2)); 
	/* ACHTUNG!!! Es darf nur ENTWEDER ein Gradient ODER ein Bild auswählbar sein:
	/* Bei Verlauf: linear-gradient( var(--bgd-gradient-direction), var(--bgd-gradient-color1), var(--bgd-gradient-color2))
	/* Bei Bild: url("pfad/zur/grafik") */
	
	
 	/* AVATARE: ; */
  	--bot-pic: url("");
	/* Avatar für den Bot */
	
  	--user-pic: url(""); 
	/* Avatar für den User */
  
	--pic-radius: 50%; 
	/* Radius Rahmen Avatare: 0% bis 50% */
	
  	--pic-size: 75px; 
	/* Bildgröße Avatar Bot: 30px bis 100px */
	
	--pic-size-mobile: 30px; 
	/* Bildgröße Avatar Bot Phone: 30px bis 100px */
  
	
	/* MESSAGES ALLGEMEIN*/
	
  	--font: "Open Sans";
  	/* Schriftartarten: "Open Sans" - "Work Sans" - "Roboto" - "Montserrat" - "Raleway" */
	
  	--font-size: 24px; 
	/* Schriftgröße Bubbles: 14px bis 22px */
	
	--font-size-mobile: 16px; 
	/* Schriftgröße Bubbles Phone: 14px bis 22px */
  
	--msg-border-width: 1px; 
	/* Rahmen-Breite um die Bubbles: 0px bis 3px */
  
	--msg-radius: 25px; 
	/* Radius Messages: 0px bis 25px */
  
	
	/* MESSAGES BOT*/
  
	--bot-msg-align: row; 
	/* Ausrichtung Message Bot: links="row" - rechts="row-reverse" */
  
	--color-bot: #ffffff; 
	/* Schriftfarbe Bot */
    
    --link-color-bot: inherit; 
	/* Schriftgröße Links Bot */
  
	--bot-msg-background: #CFE3E6; 
	/* Farbe für Hintergrund Bot Bubble */
	
  	--bot-border-color: #7d9ca1; 
	/* Farbe Rahmen Bot Bubble */
	
	--bot-button-backgrond: #ef7d1f;
	/* Farbe Button Bot Bubble */
	
	--bot-button-color: #ffffff;
	/* Schriftfarbe Button Bot Bubble */
	
	--bot-button-radius: 5px;
	/* Radius Button Bot Bubble */
  
	
	/* MESSAGES USER */
  
	--user-msg-align: row-reverse; 
	/* Ausrichtung Message User: links="row" - rechts="row-reverse" */
  
	--color-user: inherit; 
	/* Schriftfarbe User */
    
    --link-color-user: inherit; 
	/* Schriftgröße Links User */
  
	--background-user: #ffffff; 
	/* Hintergrund User Bubble */
  
	--user-border-color: transparent; 
	/* Farbe Rahmen User Bubble */
	
	--user-button-backgrond: #ef7d1f;
	/* Farbe Button Bot Bubble */
	
	--user-button-color: #ffffff;
	/* Schriftfarbe Button Bot Bubble */
	
	--user-button-radius: 5px;
	/* Radius Button Bot Bubble */
  
	
	/* INPUT */
    --input-size: 50px;
    /* Höhe des Eingabefeldes */
    
  	--font-input: "Open Sans";
	/* Schriftartarten: "Open Sans" - "Work Sans" - "Roboto" - "Montserrat" - "Raleway" - "Titillium"*/
  
	--font-size-input: 24px; 
	/* Schriftgröße Input: 14px bis 22px */
	
	--font-size-input-mobile: 14px;
	/* Schriftgröße Input Phone: 14px bis 22px */
	
	--font-color-input: #666666; 
	/* Schriftfarbe Input */
	
	--input-background: #ffffff; 
	/* Hintergrund Input */
  
	--input-border-width: 0px; 
	/* Rahmen-Breite um den Input: 0px bis 3px */
	
	--input-border-color: #767676; 
	/* Farbe Rahmen Input */
	
	--input-focus-border-color: #CFE3E6; 
	/* Farbe Rahmen Input */
    
    --input-msg-radius: 25px; 
	/* Radius Input: 0px bis 25px */
  
	--input-icon: "\f2f6"; 
	/* Icons: Plane:"\f1d8" - Arrow:"\f064" - Arrow-Circle:"\f01e" - Play:"\f04b" - Enter:"\f2f6" */
  
	--input-icon-color: #333333; 
	/* Farbe Icon Send */
	
	--input-icon-hover-color: #999999; 
	/* Farbe Icon Send on Hover */
	
	--reset-icon-display: none;
	
	--reset-icon: "\f2f1"; 
	/* Icons: Plane:"\f1d8" - Arrow:"\f064" - Arrow-Circle:"\f01e" - Play:"\f04b" - Enter:"\f2f6" */
  
	--reset-icon-color: #666666; 
	/* Farbe Icon Reset */
	
	--reset-icon-hover-color: #ff0000; 
	/* Farbe Icon Reset */
	
	
	/* Progressbar */
	
  	--akzent: #CFE3E6; 
	/* Akzentfarbe für Progressbar ->  */
    
    
    /* Close X Button */
    
    --close-x-color: #333333; 
	/* Farbe Icon X */
	
	--close-x-hover-color: #999999; 
	/* Farbe Icon X Hover */
	
	
}

@font-face {
  font-family: "Open Sans";
  font-weight: 100 800;
  src:
    url("fonts/OpenSans-Variable.woff2") format("woff2 supports variations"), url("fonts/OpenSans-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 100 800;
  src:
    url("fonts/WorkSans-VariableFont.woff2") format("woff2 supports variations"), url("fonts/WorkSans-VariableFont.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Roboto";
  font-weight: 100 800;
  src:
    url("fonts/RobotoFlex-VariableFont.woff2") format("woff2 supports variations"), url("fonts/RobotoFlex-VariableFont.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 100 800;
  src:
    url("fonts/Montserrat-VF.woff2") format("woff2 supports variations"), url("fonts/Montserrat-VF.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Raleway";
  font-weight: 100 800;
  src:
    url("fonts/Raleway-VariableFont.woff2") format("woff2 supports variations"), url("fonts/Raleway-VariableFont.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Titillium";
  font-weight: 100 800;
  src:
    url("fonts/TitilliumWeb-Roman-VF.woff2") format("woff2 supports variations"), url("fonts/TitilliumWeb-Roman-VF.woff2") format("woff2-variations");
}