/* 
    Created on : 14.06.2023, 22:39:55
    Author     : Johannes
*/
root, html {
  display: block;
  margin: 1em 0.5em;}
body {  
  font-style:       normal;
  font-weight:      normal;
  text-transform:   none;
  letter-spacing:   normal;
  line-height:      1.090909em;
  background-color: #FFFFFF;
  font-family:      Arial, Helvetica, sans-serif;
  font-size:        12px;  
  margin:           0;
}
/*
 * navigation / Menue
*/
.ui-hamburger {  
  position: fixed;       
  right: 1em; 
  top: 1em;
  width: 40px;
  height: 40px;
  background: linear-gradient(#FFF,#DDD);
  border: #AAA 1px solid;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;  
  border-radius: 2px;
  padding: 2px 5px;
  cursor: pointer;
  transition: border 0.3s linear 0s;
  z-index: 1000;}    
.ui-hamburger:hover { border: #06F 1px solid; }
.ui-hamburger:hover div { background: #06F; }
.ui-hamburger > div{ 
  width: 40px;
  height: 5px;
  background: #333;
  margin: 6.5px 0px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  transition: background 0.3s linear 0s;}


#kopf {display:block; text-align: center;}
#kopf img { width:100%; max-width:500px; height:auto;}
/*#admin { height: calc(100% - 300px); }*/
#FvDlg {background-color: black; color:greenyellow;}

pre {font-size: 11px;}
a {text-decoration: none;}
button:hover, 
a:hover { font-style: italic; }
h1 { font-size: 150%; text-align:center; line-height: 1rem;}
h2 { font-size: 1.454545rem; line-height: 1.636364em;}
fieldset { border-style: ridge; border-width:thick; margin-bottom:1em;}
caption, h4 {  
  color: white;
  background-color: gray;
  font-style: italic;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.3em;
  text-align: left;
  padding: 0.1em 0.1em 0.1em  2em;
  margin: 0;
}
nav  {width:auto; border-bottom: 2px solid;}
nav ul {width:100%; list-style:none; padding:0;}
nav ul li {font-size:1.454545em; line-height: 1.7rem; margin-bottom: 10px;}
nav ul li span {background-color: silver; padding:0.3em 1em; border-radius:5px;}
legend {
  font-weight: bold; 
  font-variant: small-caps; 
  color: navy; 
  background-color: silver; 
  padding:0 1em;  }    
.content {min-height:50vh; height:auto; padding:1em 1em;}
.link {text-decoration: underline; color:blue !important;}
.floatR {float:right;}
.floatL {float:left;}
.rahmen {width:80vw; margin:0 auto;}
.flexi1 {display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between;}
.flexi2 {display:flex; flex-flow:row wrap; justify-content: space-around;}
.flexiC {flex-basis: 360px; flex-grow:1;}
.flexi3 {display:flex; flex-flow:column wrap; justify-content: space-between;}
.flexi4 {display:flex; flex-flow: row wrap; justify-content: space-between;}
.label  {font-style: italic; font-weight: bold; text-align: right; padding-right: 1em;}

#Willkommen {font-size: 18px; line-height: 1.5em;}
#Willkommen > div {padding: 0.3em 2em; margin-top:1em;margin-bottom:1em;}
#Willkommen .flexi1 {flex-wrap: nowrap; justify-content: space-evenly;}
#Willkommen .flexi1 > div {display:inline-block; margin: auto;}
#Willkommen .images { width:150px; height:auto; max-height:120px; margin:0 0.5em;}

#frmMitglied { width: 100%; display:table;} 
#frmMitglied .label {display:inline-block; width:10em;}
#frmMitglied input {width: 17em;}
#frmMitglied input[type="radio"] {width: 10em;}
#frmMitglied div > div > div,
#frmMitglied div > fieldset > div {display:table-row;}

  .inputlist { list-style:none; padding-left:0;}  
  .inputlist li { display:flex; align-items:center; flex-wrap:wrap;}
  .inputlist > li > label { flex:1 0 11em; max-width:11em;  padding-right:1em;} 
  /*.inputlist > li > label + * { flex:1 0 225px;}*/
  .divInput2  { border: solid 1px darkgray; width:17.4em;}
  .divInput2 > div   { border: none; width:20px; height:20px; float:right;}
  .divInput2 > input { border: none; width:calc(100% - 24px) !important; float:left; line-height:1;}
  

.abzug { display:table-row; line-height:1.8em; border:1px solid; }
.abzug input[type="radio"] {width:1.5em; display:inline-block; padding:0;}
.abzug label {display:inline;}

#fuss {display:block; text-align: center; border-top: 2px solid;}
#fuss p {font-size: 120%; line-height: 1.2em;}

.responsive-div {
  width:auto; /*100vw; 94vw;*/ 
  height:auto; 
  min-height:80vh; 
  position:relative;
  margin: 1em 2em; 
  padding: 0;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  border: none;
}  
.document-iframe { width:100%; height:100%;}
.shadow {        
      -moz-box-shadow: 3px 3px 5px 10px #c3c2c1;
      -webkit-box-shadow: 3px 3px 5px 10px #c3c2c1;
      box-shadow: 3px 3px 5px 10px #c3c2c1; }
.radius {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;}  
.center {text-align: center;}
.rechts {text-align: right; }
.links  {text-align: left;}
.fett   {font-weight: bold;}
.ital   {font-style: italic;}
.hidden { display:none; }
.checkBig { transform: scale(2);  margin: 0 10px;}
.checkBig15 { transform: scale(1.5); margin: 0 10px;}
.hoehe { height:200px !important; }

.checkbox1 {
    width: 14px !important;
    transform: scale(1.5);
}

.dataTables_wrapper .dataTables_filter input:not(:valid):not(:focus){
  box-shadow: 0 0 5px #fff!important;
}
.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
  -webkit-appearance: none!important;
}
.dataTables_wrapper .dataTables_filter button{
  visibility: hidden;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:valid ~ button{
  visibility: visible;
}
.d-inline-flex { display: inline-flex; position: relative; }
button.close.position-absolute { position:absolute; right:5px;}
button.close.position-absolute span { font-size:1.25em; }

table.dataTable thead th.rechts { text-align:right; }
table th { color: navy; line-height: 1.2em; background-color: silver;} 
table tbody tr.group { font-weight:bold; text-align: center; background-color: gray;color:white;}
table tbody tr.odd { background-color: white; }
/*table tbody tr:nth-child(odd) { background-color: white; }*/
table tbody tr.even { background-color: transparent;}
td.editBtnTd { background: transparent url("/css/images/details_open.png") center no-repeat;}
td.closeBtnTd { background: transparent url("/css/images/details_close.png") center no-repeat;}

.sbut fieldset {width: 10em; height:15.1em}
.ui-superButton-button { 
  height: 5em;
  width: 7.5em;
  margin: 0.2em 0.2em;
}
.ui-superButton-icon {
  width: 30px; /* 24 */
  height: 24px; /* 30 */
}
.ui-superButton-text { display:inline-block; }
.ui-superButton-wrapper {
  float:right;
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: flex-end  
}
.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-inputdialog-row { display: table-row; }
.ui-inputdialog-row > * { display: table-cell; }
[data-id="Auszahlung"] input { width:6em; }

.ui-progressbar {
  position: relative;
}
.progress-label {
  position: absolute;
  left: 50%;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}
 
#Zweckverein .fs { width:100%; max-width:40em; flex-grow:1}
#Zweckverein .fs2 { width:20em; flex-grow:1}
#Zweckverein .fs3 { width:calc(100% - 40em); min-width:290px; display:flex; flex-flow:row wrap;}

#frmVorsitz,
#frmTermin,
#frmZweckverein,
#frmKreditor {display:table;}

#frmVorsitz > div,
#frmTermin > div,
#frmZweckverein > div,
#frmKreditor > div { display:table-row;}

#frmVorsitz label,
#frmVorsitz input,
#frmTermin label,
#frmTermin input,
#frmKreditor label,
#frmKreditor input,
#frmZweckverein label,
#frmZweckverein input { display:table-cell;}

#frmTermin input,
#frmTermin textarea { width: 22em; }

#frmVorsitz input,
#frmKreditor input,
#frmZweckverein input {width: 17em;}

#frmTermin label,
#frmVorsitz label,
#frmKreditor label,
#frmZweckverein label {width:10em;}

/*#frmVorsitz,*/
#frmUser {display:flex; flex-flow: column wrap;}
/*#frmVorsitz .divInput,*/
#frmUser .divInput {display:inline-block; width:100%; border: solid 1px;margin:0.5em 0 1em;}
/*#frmVorsitz input,*/
#frmUser input {line-height: 2.0em; width:98%; padding:0; border:none}
#frmUser .pwShow img   { float:right; width:24px; height:24px; }
#frmUser .pwShow input { float:left; width:calc(100% - 24px); }
#lstUser { background-color: white; }

#FvDocus tbody tr { line-height: 1.6em; }
#FvDocus th:first-of-type,
#FvDocus td:first-of-Type { width:2em; }
.showDoc { background-color: gray; }

/*#mailTextHeader label {display:inline-block; width:80px;}*/
#mailTextHeader input[type='file'] {display:block; width:100%;}
.w20 { width:calc(100% - 110px); }
.w25 { width:calc(100% - 160px); }

#mailKopf { width: 60vw; margin: 0.5em auto; }
/*#mailTextBody { width: 100%; height:30vh;}*/
#divMailBetreff { width:calc(100% - 130px); }
#divMailBetreff label { display:inline-block; width:80px;}

#mailAnrede { margin-top:1em; width: calc(100% - 160px);}
#mailAnrede input[type='radio'] {width: 1.5em; display:inline-block;}
#mailAnrede input[type='text'] { display:inline-block; width:calc(100% - 14em); }
#mailAnrede label {display:inline-block; width:10em; }

#mailVersandOk ol {
  width: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.mailResponse { display:flex; }
.mailResponse fieldset:first-child { flex-grow:3;}
.mailResponse fieldset:last-child { min-width:25em;}
.mailListe {height: 35vh; overflow-y:auto;}
.mailListe li { min-width:20em; }

ul.star { list-style-type:none; text-align:center; padding:0;}
ul.star li::before {color:red; font-size:1.5em; content: "\00BB  ";}
ul.star li::after { color:red; font-size:1.5em; content: "  \00AB";}

@media screen and (max-width:935px){
  .hoehe { height: auto !important; }
  
}
@media screen and (max-width:920px){
  #Zweckverein .fs3 { width:100%; max-width:40em; }
  .label { text-align:left; }
  .mailResponse {flex-direction: column;}
}
@media screen and (max-width:630px ){
 
  nav ul li span { display:block; width:80%; margin:auto 5%;}
  h1 { font-size: 150%; text-align:center; line-height: 1rem;}
  h2 { font-size: 1.0rem; line-height: 1.2em;}
  #kopf img { width:auto; max-width:500px; max-height:70px;}
  #Willkommen {font-size:100%;}
  .rahmen {width:80%;}
  .flexi1 {display:block; text-align:center;}
  .sbut fieldset { display: flex; height:auto;}
  .ui-superButton-wrapper { flex-flow:row wrap;} 
  .ui-superButton-button { width:7.5em; margin:0.2em 0;}
  .sbut2 .ui-superButton-button { width:6.8em; margin:0.2em 0;}
  .sbut { justify-content: space-around;}
  .flexi2 > * { flex-basis: 100%; }
  
  
  .ui-inputdialog-row { display: block; }
  .ui-inputdialog-row > * { display: block; }
  [data-id="Auszahlung"] input { width:100%; }

  label, input {display: inline-block; width:100%; padding:0;}
  
  #mailAnrede { width: auto; }
  #mailAnrede input[type="text"] { display:block; width:100%;}
  .mailListe li { min-width:none; }
  #divMailBetreff { width:100%; }
  #frmZweckverein,
  #frmKreditor,
  #frmVorsitz,
  #frmVorsitz div,
  #frmZweckverein div,
  #frmKreditor div {display: block;}
  #frmMitglied div > div > div,
  #frmMitglied div > fieldset > div {display:block;}  
  #frmMitglied input[type="radio"] { width:3em; }
  #Zweckverein fieldset:nth-child(3) {float:none;}
  #frmVorsitz input,
  #frmKreditor input,
  #frmZweckverein input {width: 100%;}
  #frmUser div:nth-child(2),
  #frmUser div:nth-child(3) {width:100%;}
  .label {text-align:left; font-style: italic; font-weight: bold;}
  .w20 {width: 100%;}
}