:root{
    color-scheme: light dark;

    --primary: #2977BF !important; /*dunkles Blau*/
    --primary-text: var(--secondary);
    --hover-primary: #7CC1EB !important;
    --hover-primary-light: #d4f1fb !important; /*#CAEAFA*/
    --secondary:#D4F1FB !important; /*helles Blau*/
    --secondary-text: var(--primary);
    --white: #fff !important;
    --black: #000 !important;
    --disabled:  #f8f8f8  !important;
    --disabled-text:  #C0C0C0  !important;

    --warning: #ff9102;
    --warning-text: #FFF1CC;
    --info: #0084d6;
    --info-text: #CAF5FC;
    --success: #5AA51c;
    --success-text: #ECFAD0;
    --success-hover: #B2E372;
    --danger: #e4000f; /*#d82417;*/
    --danger-text: #FDD9CA; /*#FDE1CF;*/

    --darkM-primary: #18293a;
    --darkM-primary-text: var(--darkM-secondary);
    --darkM-hover-primary:  !important;
    --darkM-hover-primary-light:  !important; /*#CAEAFA*/
    --darkM-secondary: !important; /*helles Blau*/
    --darkM-secondary-text: var(--darkM-primary);    
    --darkM-black: #141A20;
	  --darkM-white: #EEF4FA;
    --darkM-disabled: #252525;
    --darkM-disabled-text: #696969;

    --btn-ef-bg: #2977BF !important;
    --btn-ef-border: #2977BF !important;
    --btn-ef-text: white !important;
    --btn-ef-hover-bg: #043F8C !important;
    --btn-ef-hover-border: #043F8C !important;
    --btn-ef-hover-text: #7CC1EB !important;

    --table-div-even-bg:#D4F1FB !important;
    --table-div-odd-bg:white !important;

    --imgblueSquares: url('https://erfurt-triathlon.de/img/Hintergrund.jpg');
    --imgtoggler: url('https://erfurt-triathlon.de/img/toggler2.gif');
    --imggreen: url('https://erfurt-triathlon.de/img/HintergrundKopie.jpg');

    --pills: #D4F1FB !important;
    --muted: #6c757d !important;

}

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: light-dark(var(--white), var(--darkM-black));
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  color: light-dark(var(--black), var(--darkM-white))
}

a{
  text-decoration: none;
}

.ef-toggler{
	background-image: var(--imgtoggler) !important;
}
.ef-nav-toggler{
    border-style: none;
}

.ef-h{
	color: var(--primary) !important;
	margin-top: 1rem;
}
.ef-disp-7{
    /*font-size: 2rem;*/
    font-size: calc(1rem + 1vh);
    font-weight: 300;
    line-height: 1.2;
    hyphens: auto;
}

.text{
	color: light-dark(var(--black), var(--darkM-white));
}

.ef-nav-link{
	color: var(--white)  !important;
}
.nav-link:hover{
	color: var(--hover-primary) !important;
}
.nav-link:active{
	color: var(--hover-primary) !important;
}
.nav-link-disabled{
    color: var(--hover-primary) !important;
}

.primary-link{
	color: var(--primary)  !important;
}
.primary-link:hover{
	color: var(--hover-primary) !important;
}
.primary-link.disabled{
	color:var(--hover-primary)  !important;
}

.success-link{
    color: var(--success-text);
}
.success-link:hover{
    color: var(--success-hover) !important;
}
.success-link-inv{
    color: var(--success);
}
.success-link-inv:hover{
    color: var(--success-hover) !important;
}

.disabled-link{
  color: light-dark(var(--disabled-text), var(--darkM-disabled-text));  
}

.primary-text{
  color: var(--primary);
}
.warning-text{
	color: var(--warning);
}
.danger-text{
	color: var(--danger);
}

.info-text{
	color: var(--info);
}

.ef-bg-blue{
	background-image: var(--imgblueSquares) !important;
  background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
   overflow-y: hidden;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.ef-btn
{
   /* background-color: var(--primary) !important;
    border-color: var(-btn-ef-border)  !important;*/
    color: var(--btn-ef-text)  !important;	
    background-image: var(--imggreen) !important;
    border-style: none !important;
    background-repeat: round;
}
.ef-btn:hover
{
    background-image: var(--imggreen) !important;
    border-style: none !important;
    background-repeat: round !important;
    color:  var(--btn-ef-hover-text) !important;	
}
.ef-btn:active
{
    background-color: var(--btn-ef-hover-bg) !important;
    border-color: var(--btn-ef-hover-border) !important;
    color: var(--btn-ef-hover-text) !important;	
}


.ef-tab-primary{
	color: var(--primary) !important;
}
.ef-tab-primary:hover{
	color: var(--pills) !important;
  background-color: var(--primary) !important;
}
.ef-tab-primary.active{
	color: var(--pills) !important;
    background-color: var(--primary) !important;
}
.ef-tab-primary-link{
    color: var(--primary) !important;
    text-decoration: none !important;
}
.ef-tab-secondary{
	color: var(--primary) !important;
}
.ef-tab-secondary:hover{
	color: var(--primary) !important;
    background-color: light-dark(var(--pills), #333E43) !important;
    border-color: var(--primary) !important;
    border-style:solid;
    border-width:1px;
}
.ef-tab-secondary.active{
	color: var(--primary) !important;
    background-color: light-dark(var(--pills), #333E43) !important;
    border-color: var(--primary) !important;
    border-style:solid;
    border-width:1px;
}
.ef-pills{
	color: var(--primary) !important;
}
.ef-pills:hover{
	color: var(--primary) !important;
    background-color: light-dark(var(--pills), #333E43) !important;
}
.ef-pills.active{
	color: var(--primary) !important;
    background-color: light-dark(var(--pills), #333E43) !important;
}
.ef-tab-disabled{
    color: #aaa !important;
}
.ef-tab-disabled:hover{
    color: #aaa;
    background-color: light-dark(#eee, #333d43);
}
.ef-tab-disabled.active{
    color: #aaa !important;
    background-color: light-dark(#eee, #333d43) !important; 
}

.card-li{
  border-color: light-dark(var(--primary), var(--darkM-primary)) !important;
}
.ef-li-result{
  background-color: light-dark(var(--primary), var(--darkM-primary)) !important;
  color: light-dark(var(--white), var(--darkM-white)) !important;
}
.ef-li-item{
  color: var(--primary) !important;
  background-color: light-dark(#fff, var(--darkM-black));
}
.ef-li-item:hover{
  color: var(--primary) !important;
  background-color: light-dark(var(--hover-primary-light), #333d43);
}

.row-eftzeitplan:nth-child(even) {
  background-color: light-dark(var(--table-div-even-bg), #333d43);
  border-bottom-color: var(--muted);
  color: var(--black), var(--darkM-white)
}

.row-eftzeitplan:nth-child(odd) {
  background-color: light-dark(var(--table-div-odd-bg), var(--darkM-black)); 
  border-bottom-color: var(--muted);
  color: light-dark(var(--black), var(--darkM-white))
}
.row-eftzeitplanheader {
  background-color: var(--primary) !important;
  color: white !important; 
}

.card{
  /*border-color: light-dark(var(--primary), var(--darkM-primary));*/
  border-color: var(--primary);
  background-color: light-dark(var(--white), var(--darkM-black));
}
.card-primary{
  border-color: light-dark(var(--primary), var(--darkM-primary));
  background-color: light-dark(var(--primary), var(--darkM-primary));;
  color: var(--primary-text);
}
.card-primary-inv{
  border-color: var(--primary-text);
  background-color: var(--primary-text);
  color: var(--primary);
}
.card-secondary{
  border-color: light-dark(var(--secondary), #333d43);
  background-color: light-dark(var(--secondary), #333d43);
  color: var(--secondary-text);
}
.card-success{
  border-color: light-dark(var(--success), #1f301f);
  background-color: light-dark(var(--success), #1f301f);
  color: var(--success-text);
}
.card-success-inv{
  border-color: light-dark(var(--success-text), #373e3c);
  background-color: light-dark(var(--success-text), #373e3c);
  color: var(--success);
}
.card-info{
  border-color: var(--info);
  background-color: var(--info);
  color: var(--info-text);
}
.card-warning{
  border-color: var(--warning);
  background-color: var(--warning);
  color: var(--warning-text);
}
.card-danger{
  border-color: var(--danger);
  background-color: var(--danger);
  color: var(--danger-text);
}
.card-danger-inv{
  border-color: var(--danger-text);
  background-color: var(--danger-text);
  color: var(--danger);
}
.card-disabled{
  border-color: light-dark(var(--disabled), var(--darkM-disabled)) !important;
  background-color: light-dark(var(--disabled), var(--darkM-disabled));
  color: light-dark(var(--disabled-text), var(--darkM-disabled-text));
}

.news-card{
  display: flex;
}

.img-thumbnail{
  padding: .25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  max-width: 100%;
  height: auto;
  float: left;
  width: 200px
}
@media screen and (max-width: 540px){
  .img-thumbnail{
    float: unset;
    width: 150px;
  }
}

/*
.collapse .show{
  background-color: var(--primary);
  background-image: var(--imgblueSquares);
  
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}*/

.hintergrundGrau{
    background-color: #f8f9fa, #262c31;
}

.Verlauf{
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

/*
//
// Justified variants
//
*/
.nav-fill {
  > .nav-link,
  .nav-item {
    flex: 1 1 auto;
    text-align: center;
  }
}

.nav-justified {
  > .nav-link,
  .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
  }
}

.nav-fill,
.nav-justified {
  .nav-item .nav-link {
    width: 100%; 
  }
}

/*
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
*/
/* alter code, als es noch kein Sub-Reiter gab
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
    
  }
}

.tab-content {
  > .tab-pane {
    display: none;
	  >.tab-pane{
		  display: none;
	  }
	  > .active{
		  display: block;
	  }
  }
  > .active {
    display: block;
    
  }
}
*/

.tab-content{
    >.tab-pane{
        display: none;
        >.tab-pane{
            display: none;
            >.tab-pane{
                display: none;
            }
            >.active{
                display: block;
            }
        }
        >.active{
            display: block;
        }
    }
    >.active{
        display:block;
    }   
}