/*!
 * SingleDivUI v1.0.1 | https://singledivui.com | (c) 2023 Soundar | MIT License
 */

.sd-chart {
    --axis-line-color: #18fb00;
    --grid-line-color: #18fb00;
    --label-color: #18fb00;
    --grid-line-size: 1px;
    --axis-line-size: 1px;
    --label-distance: 10px;
    --line-size: 2px;
    --line-color: #18fb00;
    --point-radius: 6px;
    --point-color: inherit;
    --point-border-color: inherit;
    --point-border-width: inherit;
    --dot-radius: calc(var(--point-radius) / var(--dot-ratio, 1));
    --point-inner-color: transparent;
    --bar-color: #18fb00;
    --area-color: #18fb00;
    --area-top-color: transparent;
}
.sd-graph {
    position: relative;
    z-index: 10;
    box-sizing: content-box;
    --_x-axis-line-size: var(--x-axis-line-size, var(--axis-line-size));
    --_y-axis-line-size: var(--y-axis-line-size, var(--axis-line-size));
    border-left: var(--_y-axis-line-size) solid var(--y-axis-line-color, var(--axis-line-color));
    border-bottom: var(--_x-axis-line-size) solid var(--x-axis-line-color, var(--axis-line-color));
    --_x-grid-line-size: var(--x-grid-line-size, var(--grid-line-size));
    --_y-grid-line-size: var(--y-grid-line-size, var(--grid-line-size));
    --_x-grid-line-color: var(--x-grid-line-color, var(--grid-line-color));
    --_y-grid-line-color: var(--y-grid-line-color, var(--grid-line-color));
    background-size: var(--_column-size) var(--_row-size);
    background-image: linear-gradient(to bottom, var(--_x-grid-line-color) var(--_x-grid-line-size), transparent 0), linear-gradient(to right, var(--_y-grid-line-color) var(--_y-grid-line-size), transparent 0);
    background-position-x: calc(var(--_start-position) + (var(--_column-size) - (var(--_y-grid-line-size) / 2)));
    background-position-y: calc(var(--_row-size) - (var(--_y-grid-line-size) / 2));
}
.sd-graph::after,
.sd-graph::before {
    display: flex;
    position: absolute;
    white-space: pre;
    box-sizing: content-box;
}
.sd-graph::before {
    text-align: right;
    z-index: 2;
    --_y-font-size: var(--y-label-font-size, var(--label-font-size));
    --_y-font-family: var(--y-label-font-family, var(--label-font-family));
    --_y-label-distance: var(--y-label-distance, var(--label-distance));
    --_y-label-left: calc((var(--_y-label-width) + var(--_y-axis-line-size) + var(--_y-label-distance) - var(--_layer-padd-x, 0px)) * -1);
    --_y-label-top: calc(var(--_layer-padd-y, 0px) - var(--_row-size) / 2);
    --_y-label-color: var(--y-label-color, var(--label-color));
    font: var(--_y-font-size) var(--_y-font-family);
    content: var(--_y-label, "") !important;
    line-height: var(--_row-size);
    text-shadow: var(--_y-label-left) var(--_y-label-top) var(--_y-label-color);
    color:transparent;
}
.sd-graph::after {
    height: 0;
    z-index: 1;
    --_x-font-size: var(--x-label-font-size, var(--label-font-size));
    --_x-font-family: var(--x-label-font-family, var(--label-font-family));
    --_x-label-distance: var(--x-label-distance, var(--label-distance));
    --_x-label-bottom: calc((var(--_x-label-distance) + var(--_x-axis-line-size)) * -1);
    --_x-label-color: var(--x-label-color, var(--label-color));
    font: var(--_x-font-size) var(--_x-font-family);
    content: var(--_x-label, "") !important;
    bottom: var(--_x-label-bottom);
    color:#fff;
    left: calc(var(--_start-position) - var(--_x-label-start, var(--_column-size) / 2));
    line-height: var(--_x-label-height, normal);
    writing-mode: var(--_x-label-direction, unset);
}
.sd-area::before,
.sd-bar::before,
.sd-line::before {
    display: flex;
    content: "";
    height: calc(100% + (var(--_layer-padd-y, 0px) * 2));
    width: calc(100% + (var(--_layer-padd-x, 0px) * 2));
    top: calc(var(--_layer-padd-y, 0px) * -1);
    left: calc(var(--_layer-padd-x, 0px) * -1);
}
.sd-area::before,
.sd-line::before {
    background-image: var(--background-image);
    background-position: var(--background-position);
    background-size: var(--background-size);
    background-repeat: no-repeat;
}
.sd-area,
.sd-line {
    --_line-top-color: transparent;
    --_line-bottom-color: transparent;
    --_line-start: calc(50% - calc(var(--line-size) / 2));
    --_line-end: calc(50% + calc(var(--line-size) / 2));
    --line: var(--_line-bottom-color) var(--_line-start), var(--line-color) var(--_line-start), var(--line-color) var(--_line-end), var(--_line-top-color) 0%;
    --_point-color: var(--point-color, #fff);
    --_point-border-color: var(--point-border-color, #fff);
    --_point-border-width: var(--point-border-width, #fff);
    --point: radial-gradient(
        circle,
        var(--_point-color) var(--dot-radius),
        var(--point-inner-color) var(--dot-radius),
        var(--point-inner-color) calc(var(--point-radius) - var(--_point-border-width)),
        var(--_point-border-color) calc(var(--point-radius) - var(--_point-border-width)),
        var(--_point-border-color) var(--point-radius),
        transparent 0px
    );
}
.sd-area {
    --_line-top-color: var(--area-top-color);
    --_line-bottom-color: var(--area-color);
}
.sd-bar::before {
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position-x: var(--background-position-x);
    background-position-y: 100%;
    background-repeat: no-repeat;
}
.sd-bar {
    --bar: linear-gradient(var(--bar-color) 100%, transparent);
    --_x-label-start:var(--_column-size);
}


.legend{
  border:1px solid #ccc;
  display:table;
  position:absolute;
  left:150px;
  top:0px;
  background-color:#f1f1f1;
  padding-left:15px;
  padding-right:15px;
}
.piecol{
  width:10px;
  height:10px;
  display:block;
}
#skizze{
  background-color:#88dd22;
}
#konzept{
  background-color: #ee8800;
}
#outline{
  background-color: #0077ee;
}
#color{
  background-color: #ee55ee;
}
#shading{
  background-color: #9900dd;
}
.legend h4{
  display:table-cell;
}
.piechart {
  position: relative;
  width: 100px;
  margin:-48px 0 10px 0px;
}
.piechart div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  clip: rect(0px, 100px, 100px, 50px);
}
.piechart > div:first-child {
  clip: auto;
}
.piechart div div {
  clip: rect(0px, 100px, 100px, 50px);
}
.piechart .doughnut {
  top: 15px;
  left: 15px;
  background:transparent;
  width: 70px;
  height:70px;
  display: block;
  clip: auto;
}

#slice1 {
  background: #88dd22;
}

#slice2 {
  -webkit-transform: rotate(120deg);
}

#slice2 .pie {
  background-color: #ee8800;
  -webkit-transform: rotate(80deg);
}

#slice3 {
  -webkit-transform: rotate(120deg);
}

#slice3 .pie {
  background-color: #0077ee;
  -webkit-transform: rotate(45deg);
}

#slice4 {
  -webkit-transform: rotate(125deg);
}

#slice4 .pie {
  background-color: #ee55ee;
  -webkit-transform: rotate(90deg);
}

/*#slice5 {
  -webkit-transform: rotate(215deg);
}

#slice5 .pie {
  background-color: #9900dd;
  -webkit-transform: rotate(45deg);
}*/

.service{color:#d6b8ed; list-style: none; margin: 0px;  padding: 0px;}
.service li{ margin-bottom: 10px; }
.service li i{margin-right: 10px; border: solid 1px #ab6edb; font-size: 12px; padding: 5px; border-radius: 4px;}