.sx_svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  stroke-width: 0;
  stroke: none;
  fill: currentColor;
}

.print .sx_svg {
  fill: #2ea3f2;
}

.print .sx_svg:hover {
  fill: #F2B72E;
}

.svg_sole {
  fill: #2ea3f2;
  width: 1.5em;
  height: 1.5em;
  vertical-align: bottom;
}

button svg {
  vertical-align: bottom;
}

/*
  Links that change only the color of the svg-image included as symbol
*/
.sx_svg_links a {position: relative; padding-left: 1.5em; display: block; margin-bottom: 0.4em;}
.sx_svg_links a svg {position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em}

.sx_svg_list {padding: 0; margin: 0; list-style: none; line-height: 120%;}
.sx_svg_list li {position: relative; padding: 0 0 0 2em; margin: 0 0 0.4em 0;}
.sx_svg_list li svg {position: absolute; left: 0; top: 0.1em;}



/*
=====================================
  NOT USED YET
=====================================
*/

/* 
  Use this only if you want to change the background color of an svg-image
  Other styles are defined in sx_Structure.css: #logo img

#logo .sx_svg_bg img {
  background: #fff;
  width: auto;
  height: 100%;
}

#logo .sx_svg_bg img {
  background: #fff;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 1));
}
#logo .sx_svg_bg img:hover {
  background: #fff;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 1));
}
*/

/*
  Links that change the background-color and the content of the svg-images in pseudo-classes

.sx_svg_bglinks a {position: relative; padding-left: 1.5em; display: block; margin-bottom: 0.4em; font-size: 1.2em;}
.sx_svg_bglinks a::before {
  content: "";
  position: absolute;
  top: 0.1em; left: 0; height: 1em; width: 1em;
  background-color: #e60;
  background-image : url('bg/sxbg_up_down.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border:none;
}
.sx_svg_bglinks a:hover::before {background-color: #08e; background-image: url('bg/sxbg_down.svg');}
.sx_svg_bglinks a.selected::before {
  content: "";
  position: absolute;
  top: 0.1em; left: 0; height: 1em; width: 1em;
  background-color: #e60;
  background-image: url('bg/sxbg_down.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border:none;
}
.sx_svg_bglinks a.selected:hover::before {background-color: #08e; background-image: url('bg/sxbg_up.svg');}
*/

