@font-face {
  font-family: "Ubuntu Regular";
  src: url("/-/media/Images/Leistungsabrechnung/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu Bold";
  src: url("/-/media/Images/Leistungsabrechnung/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Ubuntu Medium";
  src: url("/-/media/Images/Leistungsabrechnung/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
}
#lar * {
  margin: 0;
  padding: 0;
  line-height: 100%;
}
#lar {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Ubuntu Regular", san-serif;
  color: #353636;
}
#lar img {
  width: 100%;
  height: auto;
}
#lar h1 {
  font-size: 14px;
  font-family: "Ubuntu Medium", san-serif;
  line-height: 100%;
  margin-bottom: 12px;
  padding-left: 25px;
}
#lar h1:before {
  content: '';
  position: absolute;
  margin-top: -1px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: -25px;
  background: #ffffff url(/-/media/Images/Leistungsabrechnung/info-i-blue.svg) center center / 8px 8px no-repeat;
}
#lar p {
  font-size: 12px;
  line-height: 170%;
}

/* Points */
.pulsating-circle  {
  position: absolute;
  z-index: 99;
}
.pulsating-circle .closer, 
.pulsating-circle .icon {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  z-index: 99;
  border: 3px solid #BE0D3E;
  cursor: pointer;
}
.pulsating-circle .closer {
  display: none;
  background: #ffffff url(/-/media/Images/Leistungsabrechnung/kreuz-red.svg) center center / 14px 14px no-repeat;
}
.pulsating-circle .icon {
  background: #ffffff url(/-/media/Images/Leistungsabrechnung/info-i-red.svg) center center / 16px 16px no-repeat;
}
.pulsating-circle .closer:before,
.pulsating-circle .icon:before {
  content:'';
  border: 6px solid  #BE0D3E;
  -webkit-border-radius: 50%;
  height: 18px;
  width: 18px;
  position: relative;
  top: -6px;
  left: -6px;
  display: block;
  -webkit-animation: pulsate 1.5s ease-out;
  -webkit-animation-iteration-count: infinite; 
  opacity: 0;
  z-index: -1;
}
@-webkit-keyframes pulsate {
  0% {-webkit-transform: scale(1, 1); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
/* Points END */

/* Text Styles */
#lar .text {
  position: absolute;
  width: 280px;
  background: #c9e2ea;
  border: 1px solid #8ec2d4;
  padding: 25px; 
  display: none;
  z-index: 100;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -o-border-radius: 12px;
}
#lar .text:before {
  content: '';
  width: 0;
  height: 0;
  text-align: center;
  left: 80%;
  top: 4px;
  margin: -24px auto 0 -25px !important;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-bottom: 19px solid #8ec2d4;
  position: absolute;
}
#lar .text:after {
  content: '';
  width: 0;
  height: 0;
  text-align: center;
  left: 80%;
  top: 6px;
  margin: -24px auto 0 -25px !important;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-bottom: 19px solid  #c9e2ea;
  position: absolute;
}
#lar .text.reverse {}
#lar .text.reverse:before {left: 20%;}
#lar .text.reverse:after {left: 20%;}
#lar .text #close {
  position: absolute;
  right: 25px;
  z-index: 999;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: url(/-/media/Images/Leistungsabrechnung/kreuz-blue.svg) center center / 100% 100% no-repeat;
}
/* Text Styles END */

/* Single Desc */
#desc1 {top: 13%; left: 68.4%;}
#desc2 {top: 12.8%; left: 83.8%;}
#desc3 {top: 20.8%; left: 25.5%;}
#desc4 {top: 23.22%; left: 28.9%;}
#desc5 {top: 25.975%; left: 24.4%;}
#desc6 {top: 35.715%; left: 47.3%;}
#desc7 {top: 43.935%; left: 87.3%;}
#desc8 {top: 56.6775%; left: 62.7%;}
#desc9 {top: 56.6775%; left: 71.4%;}
#desc10 {top: 56.6775%; left: 83.6%;}
#desc11 {top: 57.675%; left: 43.5%;}
#desc12 {top: 64.85%; left: 20%;}
#desc13 {top: 64.6%; left: 85.6%;}

#box-desc1 {top: 18.55%; left: calc(69.6% - 300px);}
#box-desc2 {top: 18.51%; left: calc(84.9% - 300px);}
#box-desc3 {top: 23.325%; left: calc(84.9% - 300px);}
#box-desc4 {top: 25.5%; left: calc(85.15% - 300px);}
#box-desc5 {top: 31.475%; left:  calc(27.2% - 300px);}
#box-desc6 {top: 41.715%; left: calc(47.3% - 300px);}
#box-desc7 {top: 46.835%; left: calc(84.9% - 300px);}
#box-desc8 {top: 63.2995%; left: calc(64% - 300px);}
#box-desc9 {top: 63.2995%; left: calc(73% - 300px);}
#box-desc10 {top: 63.2995%; left: calc(85.7% - 300px);}
#box-desc11 {top: 63.2995%; left: calc(42.2% - 300px);}
#box-desc12 {top: 72.31%; left: calc(22% - 133px);}
#box-desc13 {top: 78.4%; left: calc(85.6% - 245px);}

#lar.medium #desc1 {top: 12.3%; left: 68.4%;}
#lar.medium #desc2 {top: 12.3%; left: 83.8%;}
#lar.medium #desc3 {top: 20.525%; left: 25.5%;}
#lar.medium #desc4 {top: 23%; left: 28.9%;}
#lar.medium #desc5 {top: 25.475%; left: 24.4%;}
#lar.medium #desc6 {top: 35.215%; left: 47.3%;}
#lar.medium #desc7 {top: 44.435%; left: 87.3%;}
#lar.medium #desc8 {top: 56.0775%; left: 62.0%;}
#lar.medium #desc9 {top: 56.0775%; left: 71.0%;}
#lar.medium #desc10 {top: 56.0775%; left: 83.6%;}
#lar.medium #desc11 {top: 56.175%; left: 43.5%;}
#lar.medium #desc12 {top: 64%; left: 20%;}
#lar.medium #desc13 {top: 64.85%; left: 85.6%;}

#lar.medium #box-desc1 {top: 18.75%; left: calc(68.4% - 270px);}
#lar.medium #box-desc2 {top: 18.75%; left: calc(84.9% - 270px);}
#lar.medium #box-desc3 {top: 23.525%; left: calc(84.9% - 270px);}
#lar.medium #box-desc4 {top: 25.725%; left: calc(85.15% - 270px);}
#lar.medium #box-desc5 {top: 32.175%; left:  calc(27.2% - 200px);}
#lar.medium #box-desc6 {top: 41.415%; left: calc(47.3% - 270px);}
#lar.medium #box-desc7 {top: 47.535%; left: calc(84.9% - 270px);}
#lar.medium #box-desc8 {top: 63.9995%; left: calc(64% - 270px);}
#lar.medium #box-desc9 {top: 63.9995%; left: calc(73% - 270px);}
#lar.medium #box-desc10 {top: 63.9995%; left: calc(85.7% - 270px);}
#lar.medium #box-desc11 {top: 63.9995%; left: calc(42.2% - 270px);}
#lar.medium #box-desc12 {top: 72.8%; left: calc(22% - 113px);}
#lar.medium #box-desc13 {top: 79.1%; left: calc(85.6% - 245px);}

#lar.small #desc1 {top: 11.5%; left: 68.4%;}
#lar.small #desc2 {top: 11.5%; left: 83.8%;}
#lar.small #desc3 {top: 19.525%; left: 25.5%;}
#lar.small #desc4 {top: 21.825%; left: 28.9%;}
#lar.small #desc5 {top: 24.775%; left: 24.4%;}
#lar.small #desc6 {top: 34.215%; left: 47.3%;}
#lar.small #desc7 {top: 42.635%; left: 87.3%;}
#lar.small #desc8 {top: 55.2775%; left: 62.0%;}
#lar.small #desc9 {top: 55.2775%; left: 71.0%;}
#lar.small #desc10 {top: 55.2775%; left: 83.6%;}
#lar.small #desc11 {top: 55.175%; left: 43.5%;}
#lar.small #desc12 {top: 63.8%; left: 20%;}
#lar.small #desc13 {top: 63.8%; left: 85.6%;}

#lar.small #box-desc1 {top: 20.2%; left: calc(68.4% - 270px);}
#lar.small #box-desc2 {top: 20.2%; left: calc(84.9% - 270px);}
#lar.small #box-desc3 {top: 24.125%; left: calc(84.9% - 270px);}
#lar.small #box-desc4 {top: 26.625%; left: calc(85.15% - 270px);}
#lar.small #box-desc5 {top: 33.075%; left:  calc(27.2% - 87px);}
#lar.small #box-desc6 {top: 42.315%; left: calc(47.3% - 230px);}
#lar.small #box-desc7 {top: 47.435%; left: calc(84.9% - 270px);}
#lar.small #box-desc8 {top: 64.4995%; left: calc(64% - 270px);}
#lar.small #box-desc9 {top: 64.4995%; left: calc(73% - 270px);}
#lar.small #box-desc10 {top: 64.4995%; left: calc(85.7% - 270px);}
#lar.small #box-desc11 {top: 64.4995%; left: calc(40.2% - 251px);}
#lar.small #box-desc12 {top: 74%; left: calc(22% - 92px);}
#lar.small #box-desc13 {top: 80.2%; left: calc(85.6% - 269px);}

#lar.small #box-desc5:before {left: calc(27.2%);}
#lar.small #box-desc5:after {left: calc(27.2%);}

#lar.xsmall #desc1 {top: 8.23%; left: 62.4%;}
#lar.xsmall #desc2 {top: 8.23%; left: 78.8%;}
#lar.xsmall #desc3 {top: 16.625%; left: 25.5%;}
#lar.xsmall #desc4 {top: 19.825%; left: 34.9%;}
#lar.xsmall #desc5 {top: 22.075%; left: 24.4%;}
#lar.xsmall #desc6 {top: 31.215%; left: 50.3%;}
#lar.xsmall #desc7 {top: 39.635%; left: 87.3%;}
#lar.xsmall #desc8 {top: 50.2775%; left: 60.0%;}
#lar.xsmall #desc9 {top: 50.2775%; left: 70.0%;}
#lar.xsmall #desc10 {top: 50.2775%; left: 80.6%;}
#lar.xsmall #desc11 {top: 50.175%; left: 43.5%;}
#lar.xsmall #desc12 {top: 59.9%; left: 20%;}
#lar.xsmall #desc13 {top: 59.9%; left: 85.6%;}

#lar.xsmall #box-desc1 {top: 21.75%; left: calc(85.7% - 278px);}
#lar.xsmall #box-desc2 {top: 21.75%; left: calc(84.9% - 272px);}
#lar.xsmall #box-desc3 {top: 25.925%; left: calc(84.5% - 270px);}
#lar.xsmall #box-desc4 {top: 28.425%; left: calc(85.15% - 270px);}
#lar.xsmall #box-desc5 {top: 36.075%; left:  calc(27.2% - 87px);}
#lar.xsmall #box-desc6 {top: 43.315%; left: calc(47.3% - 160px);}
#lar.xsmall #box-desc7 {top: 49.435%; left: calc(84.9% - 275px);}
#lar.xsmall #box-desc8 {top: 65.9995%; left: calc(85.7% - 276px);}
#lar.xsmall #box-desc9 {top: 65.9995%; left: calc(85.7% - 276px);}
#lar.xsmall #box-desc10 {top: 65.9995%; left: calc(85.7% - 276px);}
#lar.xsmall #box-desc11 {top: 65.9995%; left: calc(85.7% - 276px);}
#lar.xsmall #box-desc12 {top: 75.7%; left: calc(22% - 79px);}
#lar.xsmall #box-desc13 {top: 82.0%; left: calc(85.6% - 279px);}

#lar.xsmall #box-desc1:before {left: calc(69.2%);}
#lar.xsmall #box-desc1:after {left: calc(69.2%);}
#lar.xsmall #box-desc2:before {left: calc(82.2%);}
#lar.xsmall #box-desc2:after {left: calc(82.2%);}
#lar.xsmall #box-desc5:before {left: calc(22.2%);}
#lar.xsmall #box-desc5:after {left: calc(22.2%);}
#lar.xsmall #box-desc6:before {left: calc(52.2%);}
#lar.xsmall #box-desc6:after {left: calc(52.2%);}
#lar.xsmall #box-desc8:before {left: calc(62.2%);}
#lar.xsmall #box-desc8:after {left: calc(62.2%);}
#lar.xsmall #box-desc9:before {left: calc(72.2%);}
#lar.xsmall #box-desc9:after {left: calc(72.2%);}
#lar.xsmall #box-desc10:before {left: calc(82.2%);}
#lar.xsmall #box-desc10:after {left: calc(82.2%);}
#lar.xsmall #box-desc11:before {left: calc(52.2%);}
#lar.xsmall #box-desc11:after {left: calc(52.2%);}
#lar.xsmall #box-desc13:before {left: calc(84.2%);}
#lar.xsmall #box-desc13:after {left: calc(84.2%);}