/*****************************************************************************/
/*               Farbige Elemente, Farben, Schraffuren                       */
/*****************************************************************************/
/*Badge für Wiedervorlage-Info-Popup in Dialog Header*/
.badge_follow_up{
  background-color:var(--backgroundColor11);
  color:var(--contrastFontColor);
  border-radius: 50%;
  padding: 2px 4px 2px 3.5px;
  font-size: var(--fontSize7);
  margin: 0 0 0 3px;
  border: transparent;
}

.badge_follow_up:focus, .badge_follow_up:hover{
	border-radius: 50%;
	color:var(--basicFontColor);
}

/*Badge mit Text, nur Anzeige*/
.badge_character{
	color: var(--basicFontColor);
	margin: 1px;
	min-height: 26px;
	min-width: 26px;
	display: inline-block;
	line-height: 1.7em;
	text-align: center;
	border-radius:50%;
	font-weight:bold;
}

.badge_rect .badge_character{
	border-radius:0%;
	border: none;
}

.chip{
	margin: 1px;
	padding:5px 10px;
	line-height: 1.5em;
	text-align: center;
	border-radius:25px;
	font-weight: bold;
}

/* Badges */
.badge.red, .badge_red {
	background-color:var(--backgroundColor6);	
}

.badge.dark_green, .badge_dark_green {
	background-color: var(--backgroundColor14);
}

.badge.blue, .badge_blue {
	background-color: var(--backgroundColor1);
}

.badge.orange, .badge_orange {
	background-color:var(--backgroundColor7);	
}

.badge.cyan, .badge_cyan {
	background-color:var(--backgroundColor11);	
}

.badge.green, .badge_green {
	background-color:var(--backgroundColor13);	
}

.badge.mustard, .badge_mustard {
	background-color:var(--backgroundColor51);	
	color: var(--basicFontColor);
}

.badge_dp_color11 {
	background-color:var(--backgroundColor46);	
	color: var(--basicFontColor);
}

/* Hintergrundfarben */

.color_orange {	
	  background-color:var(--backgroundColor5) !important;	
}

.color_red {	 
	 background-color:var(--backgroundColor6) !important;
}

.color_pale_red {
	background-color: var(--backgroundColor16) !important;
}

.dp_color1 {
	background-color: var(--backgroundColor24) !important;
}

.dp_color2 {
	background-color: var(--backgroundColor23) !important;
}

.dp_color3 {
	background-color: var(--backgroundColor22) !important;
}

.dp_color4 {
	background-color: var(--backgroundColor9) !important;
}

.dp_color5 {
	background-color: var(--backgroundColor21) !important;
}

.dp_color6 {
	background-color: var(--backgroundColor20) !important;
}

.dp_color7 {
	background-color: var(--backgroundColor19) !important;
}

.color_pale_green {
	background-color: var(--backgroundColor17) !important;
}

.color_pale_grey {
	background-color: var(--backgroundColor3) !important;
}

.color_dark_grey {
	background-color: var(--backgroundColor44) !important;
}

.color_pale_grey2 {
	background-color:var(--headerFooterBG) !important;
}

.color_pale_yellow {	
	background-color:var(--backgroundColor8) !important;	
}

.color_pale_rose {
   outline:none;
   background-color:var(--highlightBackgroundColor) !important;
}

.dp_color8 {
	background-color: var(--backgroundColor25) !important;
}

.dp_color9 {
	background-color: var(--backgroundColor26) !important;
}

.dp_color10 {
	background-color: var(--backgroundColor45) !important;
}

.dp_color11 {
	background-color: var(--backgroundColor46) !important;
}

.dp_color12 {
	background-color: var(--backgroundColor47) !important;
}

.dp_color13 {
	background-color: var(--backgroundColor48) !important;
}

.dp_color14 {
	background-color: var(--backgroundColor49) !important;
}

.dp_color15 {
	background-color: var(--backgroundColor50) !important;
}

.color_blue_10 {
	background-color: var(--backgroundColor31) !important;
}

.badge_dark_blue {
	background-color: var(--backgroundColor38) !important;
}

.color_white {
	background-color:var(--backgroundColor2) !important;
}

.crissCross{
	background-image:url("/HISinOne/images/icons/background_crisscross.gif") !important;
	
}
.crissCrossMirror{
	background-image:url("/HISinOne/images/icons/background_crisscross_mirror.gif") !important;	
}

/* Kreise mit Nummerierung */
.badge_green.badge_character{
	background-color: var(--backgroundColor22);
}

.badge_blue.badge_character {
	background-color: var(--backgroundColor48);
}

.badge_red.badge_character{
	background-color: var(--backgroundColor50);
}

.badge_cyan.badge_character{
	background-color: var(--backgroundColor23);
}

.badge_orange.badge_character {
	background-color: var(--backgroundColor47);
}

.badge_dark_green.badge_character{
	background-color: var(--backgroundColor45);
}

.badge_dark_blue.badge_character{
	background-color: var(--backgroundColor49) !important;
}

/* Donut-Chart Fortschrittsanzeige https://codeconvey.com/pure-css-animated-donut-chart/*/
.donutWrapper{
	text-align: center;
	display: inline-block;
	margin-left:15px;	
	width:50px;
}

.svg-item {
/*   font-size: var(--fontSize2);  */
/*   margin: 0 auto; */
     animation: donutfade 1s;
}
    
.donut-ring {
     stroke:var(--backgroundColor42);
}
    
.donut-segment {
     transform-origin: center;
     stroke:var(--backgroundColor1);
}
    
.donut-segment-blue {
     stroke: var(--backgroundColor1);
     animation: donut1 3s;
}
     
.donut-segment-orange {
      stroke:var(--backgroundColor13);
      animation: donut2 3s;
}
     
.donut-segment-green {
    stroke: var(--backgroundColor7);
    animation: donut3 3s;
}

    @keyframes donutfade {
  /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
@keyframes donut1 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 75, 25;
    }
}
 
@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 50, 50;
    }
}
 
@keyframes donut3{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 30, 70;
    }
}

.donut-percent {
   animation: donutfadelong 1s;
}
.donut-data {
  font-size: var(--fontSize7);    
}

.donut-text-1 {
    fill: var(--basicFontColor);
}
 
.donut-percent {
    font-size: 0.5em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

/* Rundes Status-Badge mit Text */
.outer {
  align-items: center;
  border: var (--basicButtonBorder);
  display: inline-block;
  height: 80px;
  justify-content: center;
  max-width: 100%;
  overflow: auto;
  padding: 5px;
  resize:both;
}

.circleWrapper{
	text-align: center;
	display: inline-block;
	margin-left:15px;
	width:50px;
	padding-top:2px;
}

svg.circle-svg {
  width:43px;
  height:43px; 
}

circle.circle-blue {
  fill: var(--backgroundColor1);
}

circle.circle-orange {
  fill: var(--backgroundColor7);
}

circle.circle-green {
  fill: var(--backgroundColor13);
}

text.circle-text { 
  fill:var(--contrastFontColor);
  font-size: 4rem;
  font-family: sans-serif;
}

.circle-data{
	font-size: var(--fontSize7);
	display:inline-block;
}

/*Ende Rundes Status-Badge mit Text */

.color_font_green {
	color:var(--backgroundColor13);
}

.textColorGrey {
	color: var(--disabledFontColor);
}

.textColorDarkGrey {
	color: var(--disabledFontColor);
}

.textColorGreen {
	color:var(--backgroundColor13);
}

.textColorRed {
	color: var(--errorColor);
}

/* Zweck: Style für kleine, grüne Schrift im Header */
.requestInboxDate {
	font-size: small;
 	color:var(--backgroundColor13);
 	position: relative;
 	top: 12px;
}

/* Zweck: Style für tagesaktuelle Änderungen  */
.changedCourses {
	font-weight: bold;
	color: var(--warningFontColor);
}

/* Zweck: Style für Anbieterort in Suchergebnis Praktikumssuche ausgrauen */
.employerCityStyle {
	color: var(--disabledFontColor);
}

/* Zweck: Farbliche Hervorhebung der Anzahl von Badges */
.badge {
    display: inline-block;
	min-width: 16px;
	min-height: 16px;
	padding: 3px 7px;
	font-size: var(--fontSize5);
	font-weight: 700;
	line-height: 1;
	color:var(--contrastFontColor);
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 10px;
}
                
/*Für Kombination aus Icon und rundem Badge mit Zahl*/

.badge_number{
	border-radius: 16px;
	min-width: 19px;
	min-height: 19px;
	display: inline-block;
	font-size: 70%;
	margin-left: -12px;
	margin-top: 8px;
	line-height: 1.3em;
	color:var(--contrastFontColor);
	text-align: center;
	border: 2px solid var(--backgroundColor2);
	padding: 1px;
	font-weight: bold;
}

.containerLink.badgeTopic .imageWithTooltip .badge_number {
	position: relative;
	left: -24px;
	bottom: -8px;
	min-width: 23px;
	min-height: 23px;
	font-size: 100%;
}

/*Badge rund mit Grafik*/
.icon_round_badge{
	color:var(--contrastFontColor);
	border-radius:25px;
	height:45px;
	width:45px;
	margin:0; 
	display:inline-block;
}

span.icon_round_badge:before{
	color:var(--contrastFontColor);
	display: inline-block;
padding: 12px;
}

/*Button mit Text und Badge mit Grafik*/
.combinationButtonWithTextandBadge.badge_number{
	margin-left: 0;
	margin-top: 0;
	position: relative;
	right: -35px;
	top: 20px;
}

.buttonWithTextandBadge{
	padding-left:35px;
}

.combinationButtonWithTextandBadgeContainer{
	display: inline-block;
	margin-left: -15px;
}