/* Wilde Formen: https://pixeltuner.de/css3-formen/ */

/* Responsive Mega Menu aus: https://www.drweb.de/responsive-navigation-css-dropdown-menue/ */

/* Buttonbar fuer Intro */

@media screen and (orientation: portrait) {
  #IndexLogo {
  height:           auto;
  width:            60%; 
 }
}
@media screen and (orientation: landscape) {
  #IndexLogo {
  height:            60%;
  width:             auto; 
 }
}

#mainpagelogo, #mainpagePWALogo {
  width: 20%;
}

#mainpageBBPPic {
  width: 50%;
}

.Btn {
  font-family:      arial, "lucida console", sans-serif;
  font-size:        12pt;
  font-weight:      300;
  text-align:       center;
  width:            250;
  height:           30;
}

.BtnBar {
  overflow:         hidden;
  position:         fixed;
  bottom:           10;
  /*background-color: efefef; */
  width:            100%;
  height:           50px;
  /*padding: -5px; funktioniert nicht */
  text-align:       center;
  vertical-align:   baseline;
}

.BtnBar button {
  width:            250;
  height:           40;
}

.BtnBar #DirectBtn {
  width:            250;
  height:           40;
}

#Headline {
  font-family:                 arial, "lucida console", sans-serif;
  font-size:                   20pt;
  font-weight:                 700;
  text-align:                  center;
}

#SubHeadline {
  font-family:                 arial, "lucida console", sans-serif;
  font-size:                   16pt;
  font-weight:                 300;
  text-align:                  center;
}

p {
  padding:                     5px;
  font-family:                 arial, "lucida console", sans-serif;
  font-size:                   9pt;
  text-align:                  left;
}

.ParaLeft {
  text-align:                  left;
}

.ParaCenter {
  font-family:                 arial, "lucida console", sans-serif;
  font-size:                   16pt;
  font-weight:                 300;
  text-align:                  center;
}

.ParaRight {
  text-align:       right;
}

.BigBtn {
 width:             150px;
 height:            150px;
}

.RoundBtn { /* https://stackoverflow.com/questions/38320878/circle-button-css mit Hinweis auf fehlende Zentrierung  des +-Zeichens */
  height:           60px;
  width:            60px;  
  line-height:      60px;  
  font-size:        2em;
  font-weight:      bold;
  border-radius:    50%;
  background-color: #4CAF50;
  color:            white;
  text-align:       center;
  cursor:           pointer;
}

.DivFloatContClass {
  overflow: auto;
  width: 100%;
}

.GroupHeaderRow {
  background-color: gold; /* #4CAF50; */
}

.GroupHeaderPara {
  text-align:       left;
  font-family:      arial, "lucida console", sans-serif;
  font-size:        12pt;
  font-weight:      700;
  background-color: gold; /*#4CAF50;*/
  padding:          5px;
}

.GroupBtn {
  width:            150px;
  height:           150px;
  padding:          5px;
  border:           1px solid black; 
  float:            left;
  margin            10px; /* funktioniert nicht */
}

.GroupBtnBlank {
  float:            left;
}

.NormalTable {
  border:           0px solid black; 
  border-collapse:  collapse;
  padding:          5px;
  width:            100%;
  font-family:      arial, "lucida console", sans-serif;
  font-size:        10pt;
}

.NormalTR {
  border:           0px solid black; 
}

.NormalTD {
  border:           0px solid black; 
  padding:          5px;
  padding-top:      5px;
  padding-bottom:   5px;
}

.NormalDispOrderCol {
  width:            2%;
  text-align:       center;
  background-color: white;
}

.NormalNameRow {
  background-color: white; /*#eee;*/
  font-weight:      700;
}

/* Menu-Table ------------------------------------------ */

.MenuTable {
  border:           0px solid black; 
  border-collapse:  collapse;
  padding:          5px;
  padding-top:      50px;
  padding-right:    5px;
  width:            100%;
  font-family:      arial, "lucida console", sans-serif;
  font-size:        10pt;
}

.MenuTable tr {
  border:           0px solid black; 
}

.MenuTable td {
  border:           0px solid yellow; /*lightgrey; */
  border-left:      none;
  border-right:     none;
  padding-left:     5px;
  padding-top:      10px;
  padding-bottom:   10px;
  padding-right:    5px;
  font-family:      arial, "lucida console", sans-serif;
  font-size:        10pt;
}

.MenuNameCol {
  width:            90%;
}

.MenuArrowCol {
  font-weight:      700;
  text-align:       right;
}

/* ------------------------------------------------------ */

.NameTD {
  width:            50%;
  font-size:        9pt;
}

.TimeStampTD {
  text-align:       right;
  width:            50%;
  font-size:        9pt;
}

.DataRow {
  padding-top:      10px;
  padding-bottom:   10px;
  font-size:        9pt;
}

.DataTD {
  padding:          5px;
  border-bottom:    none;
  width:            60%;
  height:           40px;
  font-size:        9pt;
}

.ReplyTextRow {
}

.ReplyNameTD {
  width:            60%;
  background-color: #F5F6CE;
}

.ReplyTimeStampTD {
  text-align:       right;
  width:            40%;
  background-color: #F5F6CE;
}

.ReplyTextTD {
  width:            60%;
  height:           40px;
  background-color: #F5F6CE;
}

.Pic {
  width:            100px;
  height:           auto;
}

.sprechblase3{
 position:          relative;
 padding:           1rem;
 background:        #FF00EC;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius:     10px;
 border:            #9700FF solid 5px;
}

 .sprechblase3:after{
 content:           '';
 position:          absolute;
 border-style:      solid;
 border-width:      15px 0 15px 15px;
 border-color:      transparent #FF00EC;
 display:           block;
 width:             0;
 z-index:           1;
 right:             -15px;
 top:               45px;
}

 .sprechblase3:before{
 content:           '';
 position:          absolute;
 border-style:      solid;
 border-width:      19px 0 19px 19px;
 border-color:      transparent #9700FF;
 display:           block;
 width:             0;
 z-index:           0;
 right:             -24px;
 top:               41px;
} 


.Timeline {
 background-color:  #eee;
 width:             100%;
 font-size:         9pt;
 width: 20%;
}



.Timeline td {
 padding:           5px;
}

.Textline {
 padding-top:       10px;
 padding-bottom:    10px;
 width:             100%;
 font-size:         9pt;
}

/* Login ---- ---------------------------------- */
#Mail {
 width:             300px;
}

#Pwd {
 width:             300px;
}
/* ObjectEdit ---------------------------------- */

.ObjectEditUL {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.ObjectEditTextarea {
 width:             500px; 
 resize:            both;
}

.ObjectEditText {
 width:             500px; 
}

.ObjectEditImage {
 width:             500px; 
}

.ObjectEditVideo {
 width:             500px; 
}

.ObjectEdit1 {
 width:             10px;
}

.ObjectEdit2 {
 width:             400px;
}

.ObjectEdit3 {
 width:             50px;
}

.ObjectEdit4 {
 width:             10px;
}

.ObjectEditBtn {
 width:             15px;
 height:            15px;
}

#progress_bar {
 margin:            10px 0;
 padding:           3px;
 border:            1px solid #000;
 font-size:         14px;
 clear:             both;
 opacity:           0;
 -moz-transition:   opacity 1s linear;
 -o-transition:     opacity 1s linear;
 -webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
 opacity:          1.0;
}
#progress_bar .percent {
 background-color: #99ccff;
 height:           auto;
 width:            0;
}

/* The navigation bar */
.MenuBottom { 
 overflow: hidden; 
 position: fixed; 
 bottom: 0; 
 background-color: efefef; 
 width: 100%; 
 height: 30px; 
 padding-right: 30px; /* funktioniert nicht */ 
 text-align: center; 
 vertical-align: baseline;
 /* overflow: hidden; 
 background-color: efefef; 
 position: fixed; 
 bottom: 0; 
 width: 100%; 
 height: 40px; 
 text-align: center; 
 vertical-align: baseline; */ 
 /*
 position: absolute; 
 bottom:     0; 
 width: 100%; 
 height: 2em; 
 align: center;
 */
}

/* Links inside the navbar */ 
 .MenuBottom a { 
/* float: left; */
 /* display: flex; */
 justify-content: center;
 /* 
 display: block; 
 text-align: center; 
 color: #f2f2f2; 
 padding: 1px 1px; */ 
 text-decoration: none;
}

/* Change background on mouse-over */ 
.MenuBottom a:hover { 
 background: #ddd; 
 color: black;
}

.MenuBottom button { 
 background-color:  transparent; 
 width:             80; 
 height:            30;
 background-repeat: no-repeat;
 border:            none;
 cursor:            pointer;
 overflow:          hidden;
 outline:           none;
}
 
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
body{line-height:1.5;font-family:sans-serif;font-size:16px;color:black}
a{text-decoration:none;color:#fff}
#header{background:/*#DF0174 #8A0868 #B4045F #B18904 gold;*/ #610B4B /*schoenes lila */; /* #AEB404*/;width:100%;position:relative}
#header:after{content:"";clear:both;display:block}
.search{float:right;padding:30px}
input{border:none;padding:10px;border-radius:20px}
.logo{float:left;padding:26px 0 26px}
.logo a{font-size:28px;display:block;padding:0 0 0 20px}
nav{float:right;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown{position:relative}
nav li a{float:left;padding:35px}
nav li a:hover{background:#2C3E50}
nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown ul{position:absolute;left:0;top:100%;background:#fff;padding:20px 0;border-bottom:3px solid #34495e}
nav .dropdown li{white-space:nowrap}
nav .dropdown li a{padding:10px 35px;font-size:13px;min-width:200px}
nav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:20px 35px;border-bottom:3px solid #34495e}
nav li li a{float:none;color:#333;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
nav li li a:hover{background:#bdc3c7;background:#FAFBFB}
.mega-col{width:25%;float:left}
#menu-icon{position:absolute;right:0;top:50%;margin-top:-12px;margin-right:30px;display:none}
#menu-icon span{border:2px solid #fff;width:30px;margin-bottom:5px;display:block;-webkit-transition:all .2s;transition:all .1s}
@media only screen and (max-width: 1170px) {
  nav >ul>li >a{padding:35px 15px}
}
@media only screen and (min-width: 960px) {
  nav{display:block!important}
}
@media only screen and (max-width: 959px) {
  nav{display:none;width:100%;clear:both;float:none;max-height:400px;overflow-y:scroll}
  #menu-icon{display:inline;top:45px;cursor:pointer}
  #menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
  #menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px;}
  #menu-icon.active .third{display:none}
  .search{float:none}
  .search input{width:100%}
  nav{padding:10px}
  nav ul{float:none}
  nav li{float:none}
  nav 
ul li a{float:none;padding:8px;display:block}
  #header nav ul ul{display:block;position:static;background:none;border:none;padding:0}
  #header nav a{color:#fff;padding:8px}
  #header nav a:hover{background:#fff;color:#333;border-radius:3px}
  #header nav ul li li a:before{content:"- "}
  .mega-col{width:100%}
}