/* Hintergrund vom Main-Body einstellen (links und rechts vom Inhalt) */
#sp-main-body, #sp-startseite, #sp-brotkrume {
   background-image: url("/images/sfv-inside/badminton-1428046_1920.jpg");
   background-repeat: repeat;
   background-size: inherit;
   background-attachment: fixed;
   background-position: 0 0;
   padding: 0 0;
}

/* Hintergrund vom Content einstellen */
#sp-main-body .container, #sp-startseite .container, #sp-brotkrume .container {
   /* background-image: url("/images/sfv-inside/gradient.jpg"); */
   /* background-repeat: repeat; */
   /* background-size: inherit; */
   /* background-attachment: fixed; */
   background-position: 0 0;
   padding: 15px 15px; /* zweiter Wert ist Abstand zwischen Rand und Text */
   /* background: rgba(255,255,255,0.5); */  /* Transparent machen */
   background-color: #d4d7dc;
   /* background-image: linear-gradient(#d4d7dc, #929ca6); */
}

#sp-brotkrume .container {
   padding: 1px 15px; /* zweiter Wert ist Abstand zwischen Rand und Text */
}

.breadcrumb {
    padding: .5rem 1rem;
}

#sp-breadcrumb {
    font-size: 16px;
    /* font-weight: 100;*/
    /* line-height: 1; */
    /* color: #212529; */
    text-align: left;
}

/* Menu items color */
#sp-left .sp-module ul > li > a, #sp-right .sp-module ul > li > a {color: black;}

/* Active color of menu item */
#sp-left .sp-module ul > li.active > a, #sp-right .sp-module ul > li.active:hover > a { color: black; }

/*  Color of hover menu item */
#sp-left .sp-module ul > li > a:hover, #sp-right .sp-module ul > li:hover > a  { color: red; }

.article-details .article-ratings-social-share {
   border-top: none;
   border-bottom: none;
   padding: 0;
   margin-bottom: 0;
}


.article-list .article {
   border: none;
   margin-bottom: 30px;
   padding: 5px;
/*   border: 1px solid #f5f5f5;  */
   /* padding-bottom: 100px; */
   border-bottom: 1px solid black;
   border-radius: 0px;
}


/* Rahmen um Modul links und rechts entfernen */
#sp-left .sp-module, #sp-right .sp-module {
/*   border: none; */
/*   padding: 10px; */
   margin-top: 10px;
   padding: 10px;
   margin-bottom: 25px;
   border: 1px solid grey;
   /* box-shadow: 10px 20px 30px grey; */
   box-shadow: 0px 5px 10px grey;
}

#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
   border-bottom: none;
   padding-bottom: 10px;
   margin: 0 0 5px;
}

#sp-left .sp-module ul > li > a, #sp-right .sp-module ul > li > a {
    padding: 2px 10px;
    font-size: 18px;
}

#sp-left .sp-module ul > li, #sp-right .sp-module ul > li {
  display: block;
  /* border-bottom: 1px solid #f3f3f3; */
  border-bottom: 1px solid #999999;
}


.article-list .article {
   border: none;
   margin-bottom: 30px;
   padding: 5px;
/*   border: 1px solid #f5f5f5;  */
   /* padding-bottom: 100px; */
   border-bottom: 1px solid black;
   border-radius: 0px;
}


#sp-position1 , #sp-position2 {
   margin-bottom: 30px;
}

#sp-position1 .sp-column, #sp-position2 .sp-column {
   border: 1px solid grey;
   padding: 10px;
   /* box-shadow: 10px 20px 30px grey; */
   box-shadow: 0px 5px 10px grey;
}

#sp-position1 h3, #sp-position2 h3 {
   font-weight: bold;
}

/*
.view-article .pagination li a, .view-category .pagination li a, .view-article .pagination li span, .view-category .pagination li span {
    border: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
    color: black;
    letter-spacing: -0.58px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px;
}

.pagination > li > a, .pagination > li > span {

    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;

}

.view-article .pagination, .view-category .pagination {
   text-align: center;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
   border-color: #215f7f;
   background-color: #215f7f;
}
*/

.counter.pull-right {
  padding-right: 15px;
  padding-bottom: 25px;
}

#sp-footer #sp-footer2 {
   text-align: center;
   margin-top: 15px;
}

#sp-footer2 ul.menu li a {
   display: block;
   font-size: 16px;
   /* font-weight: bold;*/
}

/* Off-Canvas Icon einstellen */

body.ltr #offcanvas-toggler > i {
   color: white !important;
   font-size: 32px;
   margin-top: 15px;
   margin-bottom: 15px;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
   float: left; /* eigentlich right */
   margin-left: 25px;
}

/* Hintergrundfarbe Offcanvas */
.offcanvas-menu  { background: #b5b5b5;}

/* Texteinstellungen Offcanvas */
.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span {
   /* text-transform: uppercase; */
   font-size: 1.2rem;
   padding: 10px 10px;
   line-height: 22px;
   color: black
}

/* Schriftgroesse Offcanvas Untermenu */
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a { font-size: 1.1rem; } 

/* Schriftfarbe setzen */
.offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus {
   color: black;
}

/* Schriftfarbe hover menu item */
.offcanvas-menu .offcanvas-inner .sp-module ul > li > a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li:hover > a { color: red; }

#sp-header.header-sticky ~ section#sp-main-body {
    padding-top: 0px;
}

/* Hauptmenu zentriert darstellen */
#sp-header .sp-megamenu-parent {float: none;}
#sp-header .sp-megamenu-wrapper {text-align: center;}

/* Text Hauptmenue einstellen */

/* Menu item text size */
#sp-header .sp-megamenu-parent > li > a,  .sp-megamenu-parent > li > span {font-size:22px; font-weight: bold;}

/* Menu items color */
#sp-header .sp-megamenu-parent > li > a {color: white;}

/* Active color of menu item */
#sp-header .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: white; }

/*  Color of hover menu item */
#sp-header .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a  { color: red; }

/* kleiner Pfeil im Menu nach Menu-Punkt mit Untermenu ausblenden */
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
   font-family: "Font Awesome 6 Free";
   /* content: "\f107"; */ /* kleiner Pfeil */
   content: "";
   float: right;
   margin-left: 7px;
}

/* Untermenu einstellen */
#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { 
   background: #215D7F; 
   text-align: left;
   font-weight: bold;
   font-size: 16px;
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
   padding-top: 5px;
   padding-left: 15px;
   padding-bottom: 15px;
}

/* Untermenu items color */
#sp-header .sp-megamenu-parent .sp-dropdown > li > a { font-weight: bold;}

/* Active color of Untermenu item */
#sp_header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {color: white;} 

/*  Color of hover menu item */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {color: red;}

#sp-menu > .sp-column, 
 #sp-menu  .sp-megamenu-wrapper { justify-content: center !important;}

/* Schriftgroesse Untermenu einstellen */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a /*, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) */{
   font-size: 18px;
   line-height: 1;
   display: inline-block;
   padding: 8px 0;
   cursor: pointer;
}


#sp-position1 a[href ^="http://"], #sp-column a[href ^="http://"] {
    background: url("/images/tools/externer-link-15.png") center right no-repeat;
    padding-right: 30px;
}

#sp-position1 a[href ^="https://"], #sp-column a[href ^="https://"] {
    background: url("/images/tools/externer-link-15.png") center right no-repeat;
    padding-right: 30px;
}

#sp-position1 a[href $=".pdf"], #sp-position1 a[href $=".PDF"] {
    background: url("/images/tools/pdf.png") center right no-repeat;
    padding-right: 30px;
}

#sp-component a[href $=".pdf"], #sp-component a[href $=".PDF"] {
    background: url("/images/tools/pdf.png") center right no-repeat;
    padding-right: 30px;
}

.sfv-article-text a[href ^="http://"], .sfv-article-text a[href ^="http://"] {
    background: url("/images/tools/externer-link-15.png") center right no-repeat;
    padding-right: 30px;
}

.sfv-article-text a[href ^="https://"], .sfv-article-text a[href ^="https://"] {
    background: url("/images/tools/externer-link-15.png") center right no-repeat;
    padding-right: 30px;
}

.sfv-article-text a[href $=".pdf"], .sfv-article-text a[href $=".PDF"] {
    background: url("/images/tools/pdf.png") center right no-repeat;
    padding-right: 30px;
}

.blog-sfv-row {
   margin-bottom: 50px;
}  


.blog-sfv-date-author {

    font-size: 12px;
    letter-spacing: 1.11px;
    /* text-transform: uppercase; */
    color: #666;
    color: black;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;

}

.blog-sfv-heading {
    margin-bottom: 10px;

}

.sfv-article-intro-image { 
    margin-top: 15px;
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.sfv-article-intro-image a {
  overflow: hidden;
  display: block;
}

.sfv-article-intro-image:hover {
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  -webkit-transform: scale(1.08) rotate(3deg);
  transform: scale(1.08) rotate(3deg);
}

.blog-sfv-image img {
  max-width: 300px;
}


.sfv-article-bild {
  display: inline-block;
  width: 100%;
  /* vertical-align: middle; */
  text-align: center;
}

.sfv-article-kopf {
  display: inline-block;
  width: 100%;
  text-align: left;
}

.sfv-article-text {
  display: inline-block;
  width: 100%;
  text-align: left;
}

.sfv-article-info {
  margin: 20px -8px 0;
  display: inline-block;
  line-height: 12px;
}

.sfv-article-info >dd {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.11px;
  /* text-transform: uppercase; */
  position: relative;
  margin: 0 8px;
  /* color: #666; */
  color: black;
  font-size: 14px;
}

.sfv-article-info >dd:after {
  content: '';
  height: 8px;
  width: 1px;
  position: absolute;
  right: -9px;
  top: 6px;
}

.sfv-article-info >dd.createdby {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.11px;
  text-transform: none;
  position: relative;
  margin: 0 8px;
  /* color: #666; */
  color: black;
  font-size: 14px;
}

.sfv-article-info1 >dd >i {
  display: inline-block;
  margin-right: 3px;
}

.sfv-article-info >dd.category-name {
  margin: 0;
  width: 100%;
  position: absolute;
  top: -43px;
  left: 10px;
  margin: 0 8px;
  width: auto;
  position: relative;
  top: 0;
  left: 0;
}

.sfv-article-info >dd.category-name:after {
  display: none;
  display: block;
}

.sfv-article-info >dd.category-name a {
  font-size: 12px;
  /* color: #050505; */
  color: #fff;
  font-weight: 500;
  padding: 5px 14px;
  background: #075943;
  line-height: 1;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
}

.sfv-article-info >dd.category-name a:hover {
  /* color: #fff; */
  color: #bf383a;
  background: #fff;
}

/* Caption fixes */
.img_caption.left {
	float: left;
	margin: 10px;
	border: 1px solid #CCCCCC;
	padding: 5px;
}

.img_caption.right {
	float: right;
	margin: 10px;
	border: 1px solid #CCCCCC;
	padding: 5px;
}

.img_caption.none {
	float: left;
	margin: 10px;
	border: 1px solid #CCCCCC;
	padding: 5px;
}

.img_caption.left p {
	clear: left;
	text-align: left;
}

.img_caption.right p {
	clear: right;
	text-align: left;
}

.img_caption.none p {
	clear: right;
	text-align: left;
}

.img_caption  {
  text-align: left!important;
}

.caption {
    background-color: #F6F6F6;
    border: 1px solid #CCCCCC;
    margin: 0 0 5px;
    padding: 0px;
    text-align: left;
}

.img_caption p 
{
    color: #000000;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 14px;
    margin: 5px 0 0;
    padding: 0;
    text-align: left;
}

/* Kroton-Tabellen */
div.kroton_table, div.kroton_overview, table.spiele {
    padding:0px;
    margin:10px 0px 10px 0px;
    clear:both;    
}

div.kroton_table table, div.kroton_overview table, table.spiele {
    width:100%;
    border-collapse:collapse;
}

div.kroton_overview table {
    margin:10px 0px;
}

div.kroton_table caption, div.kroton_overview caption {
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    font-style:normal;
    font-weight:bold;
    margin:10px 0px 5px 0px;
    line-height:22px;
    color:#000;
    text-align:left;
    caption-side: top;
}

div.kroton_table .poulestandings td, table.spiele td {
    padding:2px 10px 0px 10px;
}

div.kroton_table table td, div.kroton_overview table td, table.spiele td, table.spiele th {
    font-family:Verdana, Geneva, sans-serif;
/*    font-family:Georgia, "Times New Roman", Times, serif; */
    font-size:11px;
    line-height:15px;
    font-style:normal;
    font-weight:normal;
    color:#000;
    padding:4px 0px;
    border-bottom:1px solid #ccc;
}

div.kroton_table table tr.selected td {
    font-weight:bold;
    /* text-transform: uppercase; */
    background-color:#e8e9ee;
}

div.kroton_overview table tr td.selected {
    /* text-transform: uppercase; */
}

div.kroton_overview table tr td strong {
    font-weight:bolder;
    background-color:#e4f3ff;
}

div.kroton_overview table td {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    line-height:15px;
    vertical-align:top;
    border:1px solid #ccc;
    text-align:left;
    padding:4px;
}

div.kroton_table thead td {
    font-weight:bold;
    text-align:center;
}

div.kroton_overview thead td, table.spiele th {
    font-family:Verdana, Geneva, sans-serif;
    /* font-family:Georgia, "Times New Roman", Times, serif; */
    font-size:11px;
    line-height:20px;
    font-weight:bold;
}

div.kroton_table table tr:hover, div.kroton_overview table tr:hover, table.spiele tr:hover, table#training tr:hover, table#vorstand tr:hover  {
    background-color:#e8e9ee;
    /* color:#0e5096; */
}

div.kroton_table table td.score, div.kroton_overview table td.score,{
    width:40px;
}

div.kroton_table table td.separator, div.kroton_overview table td.score, {
    width:10px;
}

table { /* Styling der Tabelle */ }

.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

.jg_photo_container img {
    display: table-cell;
    max-width: 100%;
    height: auto;

}

.bildboxleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid gray;
    box-sizing:border-box;
    vertical-align:top;
    background-color:#e6e6e6;
    padding: 5px 5px 0px 5px;
}

.bildboxright {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px solid gray;
    box-sizing:border-box;
    vertical-align:top;
    background-color:#e6e6e6;
    padding: 5px 5px 0px 5px;
}

.bildbox {
    border: 1px solid gray;
    background-color:#e6e6e6;
    padding: 5px 5px 0px 5px;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 10px;
    display: table;
}


.bildboxleft figure, .bildboxright figure, .bildbox figure {
    display: table;
    text-align: center;
}

.bildboxleft figcaption, .bildboxright figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    font-size: smaller;
    font-style: italic;
}

.bildbox figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 10px;
    font-size: smaller;
    font-style: italic;
}

.centered img {
    display: initial;
    max-width: 100%;
    height: auto;
}