@import "../fonts/fonts.css";
@import "gridsystem.css";
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body{
  background-color: #ecf0f3!important;
  background: url('../images/tbc-bg-dark.jpeg');
}
body#PageFormular,
body#PageGutscheinformular{
  background-color: #ffffff!important;
  background-image: none;
}
body.pushable>.pusher{
  background-color: #ecf0f3!important;
  background: url('../images/tbc-bg-dark.jpeg');
}
/* Default Classes */
/* --> Colors */
.color-1{color: #95c11f!important;}
.color-2{color: #95c11f!important;}
.color-3{color: #1d1d1b!important;}
.color-white{color: #ffffff!important;}
.bg-color-1{color: #ffffff!important;background-color: #95c11f!important;}
.bg-color-2{color: #ffffff!important;background-color: #95c11f!important;}
.bg-color-3{color: #ffffff!important;background-color: #1d1d1b!important;}
.bg-default{background-color: rgba(196,213,225,1);}
.pageloader{
  background-image: url('../images/tbc-bg-dark.jpeg');
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  text-align: center;
  padding-top: 30vh;
  z-index: 10;
}
.pageloader .loader-logo .logo{
  background-color: transparent;
}
.pageloader .loader-logo .logo img{
  max-width: 300px;
}
.bg-login{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #95c11f;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.bg-cover{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(59, 99, 52,1,0.7);
  z-index: 1;
}
.bg-cover-content{
  position: relative;
  z-index: 2;
}
@media (max-width: 992px){
  .bg-login{
    background-position: 85%;
  }
}
.h-100{height: 100%;}
/* --> Padding */
.no-pad{padding: 0!important;}
.pad-4{padding: 4px!important;}
.pad-8{padding: 8px!important;}
.pad-16{padding: 16px!important;}
.pad-24{padding: 24px!important;}
.pad-32{padding: 32px!important;}
.pad-40{padding: 40px!important;}
.pad-t-8{padding-top: 8px!important;}
.pad-b-8{padding-bottom: 8px!important;}
/* --> Margin */
.m-b-0{margin-bottom: 0!important;}
.m-b-40{margin-bottom: 40px!important;}
/* --> Text */
.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right;}
/* --> Borderradius */
.br-4{border-radius: 4px!important;}
.br-8{border-radius: 8px!important;}
.br-16{border-radius: 16px!important;}
.br-24{border-radius: 24px!important;}
.br-32{border-radius: 32px!important;}

.no-border{border: none!important;}
.no-shadow{box-shadow: none!important;}
.no-radius{border-radius: 0!important;}
.ui.segment.no-border.no-shadow p{
  font-size: 1.1em;
  color: rgba(0,0,0,0.6)!important;
}
.ui.segment.no-border.no-shadow h1{
  color: rgba(0,0,0,0.8)!important;
}
/* --> Buttons */
.default-button{
  color: #FFFFFF;
  background-color: #95c11f;
  border-radius: 30px;
  padding: 7.5px 20px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  text-transform: initial;
  vertical-align: inherit;
  min-width: 90px;
  transition: 0.3s;
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
}
.default-button.small{
  padding: 3.25px 10px;
  font-size: 12px;
  line-height: 1;
  min-width: 45px;
}
.default-button:hover{
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
  opacity: 0.9;
  text-decoration: none;
  color: #FFFFFF;
}
.default-button.fluid{
  width: 100%;
  display: block;
}
.btn-color-1{background-color: #95c11f!important;color: #FFFFFF!important;}
.btn-color-2{background-color: #95c11f!important;color: #FFFFFF!important;}
.btn-color-3{background-color: #1d1d1b!important;color: #FFFFFF!important;}
/* --> Boxes */
.box-shadow-default{box-shadow: 0px 15px 38px 0px rgba(0,0,0,0.1);}
.box-default{
  padding-top: 28px;
  padding-right: 35px;
  padding-bottom: 24px;
  padding-left: 35px;
  border-radius: 30px;
  background-color: #ffffff;
  color: #4f4e4e;
}
/* --> Content / Grid */
.content-500{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.content-1000{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.content-1200{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.content-1400{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.responsive-img{
  width: 100%;
  max-width: 100%;
}


/*Semantic Overrides */
.ui.header{
  font-family: 'Poppins', sans-serif;
}
.ui.segment{
  border-radius: 10px;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}
.segmentheader{
  width: calc(100% + 48px);
  min-height: 100px;
  border-radius: 24px 24px 0 0;
  background: rgba(0,0,0,0.05);
  margin: -24px -24px 0 -24px;
  padding: 32px 16px;
}
.segmentheader .header{
  color: rgba(255,255,255,1)!important;
  font-weight: normal!important;
}
.segmentheader .header i{
  background-color: rgba(255,255,255,1)!important;
  border-radius: 90%;
  color: #95c11f!important;
  padding: 16px!important;
  height: 77px!important;
  width: 77px!important;

}
.segmentheader.blue{
  background-color: #95c11f;
  color: rgba(255,255,255,1)!important;
}
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
  background-color: #95c11f!important;
}

/* Partials */
/* --> Sidebar */
#sidebar{
  background-color: #fbfbfb;
  box-shadow: none;
  top: 80px;
  height: calc(100% - 80px);
  box-shadow: 3px 0 5px -6px #333;
  border: none;
}
.pushable>.pusher:after{
  background-color: transparent!important;
  font-size: 0.8em!important;
}
#sidebar .item.ui.header{
  font-weight: normal!important;
  padding: 8px 4px;
  color: #bfbfbf;
  font-size: 1em!important;
}
body.pushable{
  background-color: #fbfbfb!important;
}
/* --> Mainmenü */
#BackendTopMenu{
  border-radius: 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  min-height: 80px;
  background-color: #fbfbfb;
}
#BackendTopMenu .grid-16{
  width: 100%;
}
#BackendTopMenu h1{
  font-size: 28px;
  font-family: 'Poppins';
  color: rgba(0,0,0,0.6);
}
#BackendTopMenu #sidebar-open-btn,
#BackendTopMenu #sidebar-mobile-open-btn{
  cursor: pointer;
  font-size: 1.5em;
  color: #9490ae!important;
  padding-top: 28px;
}
#Mobile-Top-Menu #sidebar-mobile-open-btn{
  position: absolute;
  right: 0;
  cursor: pointer;
  color: #9490ae!important;
  top: 8px;
  font-size: 1.5em;
}
#BackendTopMenu .ui.header{
  padding-top: 12px;
  transition: 0.3s;
}
#BackendTopMenu .ui.header:hover{
  color: #95c11f;
}
#BackendTopMenu .ui.search input{
  width: 100%;
  font-size: 0.9em;
  background-color: #f3f3f3;
  border-radius: 16px;
  border: none;
  padding: 16px;
  min-width: 30vw;
}
#BackendTopMenu .ui.search i{
  margin-top: 2px;
}
#BackendTopMenu .right.menu{
  float: right;
}
#BackendTopMenu .menu .ui.icon.button,
#Mobile-Top-Menu .menu .ui.icon.button{
  margin-top: 0px;
  height: 48px;
  width: 48px;
  background-color: #f7f7f7;
  border-radius: 16px;
  color: #808080;
  margin-right: 16px;
}
#BackendTopMenu .menu .ui.medium.circular.image,
#Mobile-Top-Menu .menu .ui.medium.circular.image{
  margin-top: 0px;
  height: 48px;
  width: 48px;
  background-color: #f7f7f7;
  border-radius: 16px;
  margin-right: 16px;
}

#BackendTopMenu #Desktop-Top-Logo img{
  max-height: 64px;
  padding: 8px 16px;
}
#BackendTopMenu .floating.ui.label{
  top: 0.4em;
  left: 80%;
}
#BackendTopMenu .notifications-menu{
  max-height: 350px;
  overflow-y: scroll;
}
#BackendTopMenu .item#notifications-read a{
  display: block;
  text-align: center;
  width: 100%;
  color: #95c11f;
}
/* Mobile Menüs */
#Mobile-Top-Menu,
#Mobile-Bottom-Menu{
  display: block;
}
#BackendTopMenu{
  display: block;
}
@media (max-width: 1200px){
  #Mobile-Top-Menu,
  #Mobile-Bottom-Menu{
    display: block;
  }
  #page-dashboard{
    margin-top: 0!important;
  }
  #BackendTopMenu{
    display: none;
  }
  #page-messenger iframe{
    top: 0!important;
    height: calc(100% - 55px)!important;
  }
}
#Mobile-Top-Menu{
  position: fixed;
  width: 100%;
  height: 0px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 0;
  margin: 0;
  background-color: #fbfbfb;
}
#Mobile-Top-Menu #Mobile-Top-Logo{
  text-align: center;
}
#Mobile-Top-Menu #Mobile-Top-Logo img{
  padding: 8px 16px;
  max-height: 64px;
}
#Mobile-Bottom-Menu{
  position: fixed;
  width: 100%;
  height: 58px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  border-radius: 0;
  margin: 0;
  background-color: #95c11f;
}
#Mobile-Bottom-Menu .item{
  width: calc(33% - 3px);
  display: inline-block;
  text-align: center;
  border-left: none;
  border-right: none;
  margin: 0;
  font-size: 1.4em;
  color: rgba(255,255,255,0.6);
}
#Mobile-Bottom-Menu .item i{
  display: block;
  margin: 0 auto;
  margin-top: -4px;
  text-align: center;
}
#Mobile-Bottom-Menu .item span{
  font-size: 0.5em;
  display: none;
  margin-top: 4px;
  padding-top: 0;

}
#Mobile-Bottom-Menu .item.active{
  color: #ffffff;
}
#Mobile-Bottom-Menu .item:before{
  display: none;
}
#Mobile-Bottom-Menu .floating.ui.label{
  top: 0.4em;
  left: 80%;
}
.bottom-cta{
  text-align: center;
  position: fixed;
  right: 16px;
  bottom: 64px;
  color: rgba(255,255,255,1);
  background-color: #95c11f;
  width: 80px;
  height: 80px;
  border-radius: 90%;
  padding: 4px;
  box-shadow: 1px rgba(0,0,0,0.2);
  z-index: 99;
  cursor: pointer;
}
.bottom-cta:hover{
  color: rgba(255,255,255,0.8);
}
.bottom-cta i{
  display: block;
  margin: 0 auto;
  font-size: 32px;
  padding-top: 12px;
}
.bottom-cta span{
  display: block;
  font-size: 12px;
  padding-top: 8px;
}
/* Pages */
/* Page --> Login */
#page-login{
  width: 100%;
  height: 100%;

}
#page-login section#login{
  max-width: 600px;
  margin: 0 auto;
}
#page-login section#login #headerImage{
  display: block;
}
@media (min-width: 600px){
  #page-login section#login #headerImage{
    display: none;
  }
}
#page-login section#login #loginLogo {
  padding: 8px 32px;
  text-align: center
}
#page-login section#login #loginLogo img{
  max-width: 350px;
  margin-top: 32px;
}
#page-login section#login form{
  max-width: 600px;
  margin: 0 auto;
 }
#page-login section#login form input,
#page-login section#login form .ui.selection.large.dropdown{
  border: 1px solid #95c11f;
  margin-top: -4px;
  margin-bottom: 16px;
}
#page-login section#login form .input.fluid i{
  margin-top: -8px;
}
#page-login section#login form label{
  color: #95c11f;
  margin-bottom: 8px;
  display: inline-block;
}
#page-login section#login .passwordforget{
  margin-bottom: 16px;
}
#page-login section#login  p.copyright{
  color: rgba(255,255,255,0.4);
}

/* Page --> Messenger */
#page-messenger{
  /* margin-top: 48px; */
}
#page-messenger iframe{
  position: fixed;
  width: 100%;
  height: calc(100% - 60px);
  bottom: 80px;
  top: 0px;
  border:none;
  margin: 0;
}
#wchat i.icon{
  font-family: 'simple-line-icons'!important;
}
/* Page --> Dashboard */
#page-dashboard{
  margin-top: 0px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
#page-dashboard #rank-section .rankcol{
  width: 20%;
  display: inline-block;
  margin-right: -3px;
  padding-top: 8px;
}
#page-dashboard #rank-section .rankcol span{
  display: block;
  font-size: 0.8em;
  line-height: 1em;
  min-height: 24px;
  padding-top: 4px;
}
#page-dashboard .costum-btn{
  border-radius: 8px;
  border: 2px solid #95c11f;
  padding: 8px;
  max-width: 350px;
  margin: 0 auto;
}
#page-dashboard .costum-btn p{
  color: rgba(0,0,0,0.6);
  font-size: 1.2em;
}
#page-dashboard .workout-days{
  text-align: center;
  margin: 0 auto;
  margin-bottom: 4px;
}
#page-dashboard .workout-days .workout-day-label{
  text-align: center;
  list-style: none;
  width: calc(14.25% - 8px);
}
#page-dashboard .live-workout-cta{
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  position: relative;
}
#page-dashboard .live-workout-cta .cover{
  width: 100%;
  background-color: rgba(0,0,0,0.6);
  border-radius: 10px;
  padding: 32px 16px;
}
#page-dashboard .live-workout-cta .workout-time{
  position: absolute;
  right: 0;
  top: 32px;
}
#page-dashboard .live-workout-cta .ui.header.inverted{
  margin-top: 48px;
}
#page-dashboard .live-workout-cta span{
  color: rgba(255,255,255,1);
}
/* Page --> Blog */
#page-blog{
  margin-top: 80px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
#page-blog article .content img{
  max-height: 125px;
  padding-right: 16px;
  vertical-align: middle;
}
#page-blog article p{
  color: rgba(0,0,0,0.6);
  margin-top: -8px;
}
#page-blog article h5{
  font-weight: normal;
}
#page-blog article .ui.fluid.card{
  height: 100%;
}
#page-blog #siegel-tabel td img{
  max-height: 60px;
  padding: 8px 16px;
}
#page-blog #siegel-tabel td .check.icon{
  font-size: 24px;
  color: #95c11f;
}
#page-blog #siegel-tabel td {
  border: 1px solid rgba(0,0,0,0.2);
}
/* Page --> Friends */
#page-friends{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Einstellungen */
#Einstellungen{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Training */
#page-training{
  margin-top: 80px;
  margin-bottom: 80px;
  height: 100vh;
}
.workout-box{
  background-position: center center;
  border-radius: 16px;
  background-color: #95c11f;
}
.workout-box .workout-box-content{
  padding-top: 80px;
  color: rgba(255,255,255,1);
}
.workout-box .workout-box-content h5{
  color: #95c11f;
  margin: 0;
  padding: 0;
}
.workout-box .workout-box-content h3{
  margin: 0;
  padding: 0;
  margin-bottom: 8px;
}
.workout-box .workout-box-content p{
  margin: 0;
  padding: 0;
}
.workout-box .workout-box-content p i{
  color: #95c11f;
}
/* Page --> About */
#page-about{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Impressum */
#page-impressum{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Datenschutz */
#page-datenschutz{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Goalstatus */
#page-goalstatus{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Clothing */
#page-clothing{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Purchases */
#page-purchases{
  margin-top: 44px;
  margin-bottom: 44px;
}
/* Page --> Profile */
#page-profile{
  margin-top: 80px;
  margin-bottom: 80px;
  min-height: 100vh;
}
#page-dashboard #profileImage img{
  margin: 0 auto;
  max-width: 150px;
  border: 4px solid #95c11f;
}
#page-dashboard #profileSubMenu{
  border-radius: 0;
}
#page-dashboard #profileSubMenu .item{
  width: 50%;
  color: rgba(0,0,0,0.5);
}

/* Page --> Goals */
#page-goals{
  margin-top: 80px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
#page-goals form .ui.fluid.card .header{
  margin-bottom: 32px;
}
#page-goals form .ui.fluid.card{
  min-height: calc(100vh - 136px);
}
/* Page --> Booking */
#page-booking{
  margin-top: 80px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
#page-booking #beraterselection img{
  border-radius: 90%;
  border: 4px solid rgba(0,0,0,0.05);
  max-width: 200px;
  opacity: 0.8;
}
#page-booking #beraterselection .active img{
  border: 4px solid #95c11f;
  opacity: 1;
}
.berater-description ul{
  margin: 0;
  padding: 0;
}
.berater-description ul li{
  margin-left: 20px;
  font-size: 1.1em;
  color: rgba(0,0,0,0.6)!important;
}

@media (max-width: 576px){
  #MenuErnaehrungsplaene{
    margin-left: -16px;
  }
}

/* Formular */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap');
#Formular{
  width: 100%;
  max-width: 870px;
  margin: 0 auto;
}
#Formular label{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700!important;
  color: #333;
  font-size: 1.2em;
}
#Formular .inline.fields{
  margin-bottom: 1.5em;
}
#Formular .inline.fields label{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300!important;
  color: #333;
  font-size: 1.2em;
}
#Formular .inline.fields .field{
  padding-right: 32px;
}
#Formular .inline.fields label i{
  font-size: 0.75em;
  color: rgba(0,0,0,0.4);
}
#Formular .ui.input{
  padding-bottom: 1.5em;
}
#Formular .field textarea{
  margin-bottom: 1.5em;
}
#Formular .ui.input input,
#Formular .field textarea{
  background-color: rgba(0,0,0,.12) !important;
  font-family: 'IBM Plex Sans', sans-serif;
  border: 2px solid transparent;
  font-size: 14px;
}
#Formular .ui.input input:focus,
#Formular .field textarea:focus{
  border-color: #82c000;
  background-color: rgba(0,0,0,.12) !important;
}
#Formular p.datenschutz {
  color: #333;
  margin-top: -1.5em;
}
#Formular p.datenschutz a{
  color: #82c000;
  text-decoration: none;
}
@media (max-width: 576px) {
  #OfferDiv {
    transform: scale(0.7);
    margin-top: -75px;
  }
}