/* ============================== */
/* === Powered by locomputing === */
/* ============================== */

.fehler {
font-size: 70%;
font-weight: bold;
color: maroon;	
}

.angepasst {
font-size: 55%;
margin: -.35em 0 0 .25em;
}

.img-wrap { 
position: relative;
display: inline-block; 
 }
.img-wrap:hover::after {
  content: attr(data-title);
  position: absolute;
  bottom: 2em; 
  left: -3em;
  font-size: 65%;
  border: .015em solid black;
  background: white;
  color: black;
  padding: .2em .5em;
  white-space: nowrap;
  word-break: none;
}


.inp-wraps[data-title]:hover:after {
    content: attr(data-title);
    background-color: white;
    color: black;
    font-size: 12pt;
    position: absolute;
    padding: 3px 8px;
    bottom: -30px;
    left: 2px;
    border: 1px solid #111111;
	border-radius: 3px;
    z-index: 99999;
    opacity: 0;
    animation: hideTooltip 4s forwards;
}
.inp-wraps:hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  opacity: 0;
  left: 35px;
  bottom: -4px;
  z-index: 99999;
  animation: hideTooltip 4s forwards;
}

.inpt-wrap[data-title]:hover:after {
    content: attr(data-title);
    background-color: white;
    color: black;
    font-size: 12pt;
    position: absolute;
    padding: 3px 8px;
    top: 3.65em;
    left: 2em;
    border: 1px solid #111111;
	border-radius: 3px;
    z-index: 99999;
    opacity: 0;
    animation: hideTooltip 4s forwards;
}


@media screen and (min-width: 32em) {
.inp-wraps[data-title]:hover:after {
    content: attr(data-title);
    background-color: white;
    color: black;
    font-size: 50%;
    position: absolute;
    padding: .25em .55em;
    bottom: -1.9em;
    left: .5em;
    border: .05em solid #111111;
	border-radius: .25em;
    z-index: 99999;
    opacity: 0;
    animation: hideTooltip 4s forwards;
}
.inp-wraps:hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: .275em solid gray;
  border-left: .275em solid transparent;
  border-right: .275em solid transparent;
  opacity: 0;
  left: 1.5em;
  bottom: -.09em;
  z-index: 99999;
  animation: hideTooltip 4s forwards;
}	

.inpt-wrap[data-title]:hover:after {
    content: attr(data-title);
    background-color: white;
    color: black;
    font-size: 50%;
    position: absolute;
    padding: .25em .55em;
    top: 4em;
    left: 4em;
    border: .05em solid #111111;
	border-radius: .25em;
    z-index: 99999;
    opacity: 0;
    animation: hideTooltip 4s forwards;
}
}

@keyframes hideTooltip {
  0% { opacity: 0; }
  20% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.inp-wraps[data-title] {
    position: relative;
}
.inpt-wrap[data-title] {
    position: relative;
}



input.forms-control {
width: 100%;
font-size:70%;
padding: calc(.075em + ((.075vw - 0.1em) * 1)) calc(.35em + ((.35vw - 0.1em) * 1));
border-radius: calc(.2em + ((.2vw - 0.1em) * 1));
margin: 0 0 .5em 0;
}
input.forms-control:hover {
cursor: default;
}
input.forms-control:focus {
cursor: not-allowed;
caret-color: transparent;
}











form {
	border: none;
    border-bottom: 1px solid black;
    width: 100%;
    background-color: rgba(240, 240, 240, 0.20);
    margin: 0 auto;
    padding: 0;
	border-radius: 0 0 calc(.25em + ((.25vw - 0.1em) * 1)) calc(.25em + ((.25vw - 0.1em) * 1));
}

.thisform {
	margin: 0 2px;
}

@media screen and (min-width: 28em) {
form {
    border: .02em solid black;
	border-top: none;
    width: 80%;
    background-color: rgba(240, 240, 240, 0.20);
    margin: 0 auto;
    padding: 0;
}
.thisform {
	margin: 0 1em;
	padding-top: calc(.35em + ((.35vw - 0.1em) * 0.1));
}
}

form label {
    display: block;
    font-size: 65%;
    color: darkslategrey;
    padding-left: 3px; 
    margin: 0;	
}
form label span {
    font-size: 100%;
    color: rgb(199, 50, 50);
	font-weight: bold;
    padding-left: .25em;	
}

input,
textarea {
    width: 100%;
    padding: 0em;
	font-size: 70%;
    font-weight: normal;
    border-radius: 0.3em;
	margin: 0 0 .25em 0;
	outline: none;
}
textarea.form-control {
width: 100%;
min-height: calc(10em + ((10vw - 0.1em) * 0.1));
padding: calc(.15em + ((.15vw - 0.1em) * 1)) calc(1.5em + ((1.5vw - 0.1em) * 1));
border-radius: calc(.2em + ((.2vw - 0.1em) * 1));
}
textarea {
resize: vertical;
}

input.form-control {
width: 100%;
font-size: 70%;
padding: calc(.15em + ((.15vw - 0.1em) * 1)) calc(1.5em + ((1.5vw - 0.1em) * 1));
border-radius: calc(.2em + ((.2vw - 0.1em) * 1));
}


input:valid {
border: 3px solid green;
}
input:invalid:focus {
border: 2px solid red;
}
textarea:valid {
border: 3px solid green;
}
textarea:invalid:focus {
border: 2px solid red;
}

input[name="name"]:user-invalid {
	border: 4px solid red;
}
input[name="email"]:user-invalid {
	border: 4px solid red;
}
input[name="result"]:user-invalid {
	border: 4px solid red;
}

textarea[name="inhalt"]:user-invalid {
	border: 4px solid red;
}

input[type='text']::placeholder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: darkslategrey;
font-weight:normal;
opacity: .8;
}
input[type='email']::placeholder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: darkslategrey;
font-weight:normal;
opacity: .8;
}
input[type='password']::placeholder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: darkslategrey;
font-weight:normal;
opacity: .8;
}
textarea::placeholder {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: darkslategrey;
font-weight:normal;
opacity: .8;
}
input:focus::placeholder {
opacity: 0;
}
textarea:focus::placeholder {
opacity: 0;
}



.butons {
text-align: center;
margin: .35em auto;	
}

.button-blue {
font-family: Arial, Helvetica, sans-serif;
cursor:pointer;
max-width: 12.5em;
width: 48%;
font-size: 75%;
padding: .15em 0;
color: white;
background-color: #337ab7;
border-color: #761c19;
border-radius: calc(.25em + ((.25vw - 0.1em) * 1));
}
.button-blue:hover {
background: white;
background-color: #286090;
border-color: #204d74;
}
.button-red {
font-family: Arial, Helvetica, sans-serif;
cursor:pointer;
max-width: 12.5em;
width: 48%;
font-size: 75%;
padding: .15em 0;
color: white;
background-color: #d9534f;
border-color: #761c19;
border-radius: calc(.25em + ((.25vw - 0.1em) * 1));
}
.button-red:hover {
background: white;
background-color: #c9302c;
border-color: #ac2925;
}

.formularpfl {	
font-size:80%;
text-align: left;
font-weight:bold;
background: #f2f2f2;
border-top:1px solid silver;
border-bottom:1px solid silver;
margin: .5em 0;
padding: .15em calc(.25em + ((.25vw - 0.1em) * 0.1));
cursor: default;
}
.formularpfl span {
color: rgb(199, 50, 50);
font-weight: bold;
}

img.piggi {
width: calc(5.5em + ((5.5vw - 0.1em) * 0.1));
}

.formultop {	
font-size:80%;
text-align: center;
font-weight:bold;
background: #f2f2f2;
border-bottom:1px solid silver;
margin: 0;
padding: .15em calc(.25em + ((.25vw - 0.1em) * 0.1));
cursor: default;
}



.nodats {
text-align: center;
color: maroon;
font-size: 80%;
margin:0;
}

.del {
text-align: center;
padding:10px 0;
}



input.user {
    background-image: url('../svgs/user.svg');
    background-position: 0 center; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.85em;
    height: 1.6em;
}

input.mail {
    background-image: url('../svgs/mail.svg');
    background-position: .22em calc(.18em + ((.18vw - 0.1em) * 0.1)); 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.writer {
    background-image: url('../svgs/write.svg');
    background-position: .22em calc(.18em + ((.18vw - 0.1em) * 0.1)); 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.35em;
    height: 1.75em;
}

textarea.write {
    background-image: url('../svgs/write.svg');
    background-position: .22em 0em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.estift {
    background-image: url('../svgs/stift.svg');
    background-position: .18em 0em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.svkey {
    background-image: url('../svgs/key.svg');
    background-position: .2em .15em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.6em;
}
input.keyzwo {
    background-image: url('../svgs/key2.svg');
    background-position: .2em .15em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.6em;
}
input.svcode {
    background-image: url('../svgs/code.svg');
    background-position: .2em .18em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.kalend {
    background-image: url('../svgs/calend.svg');
    background-position: .2em -.12em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.svgrup {
    background-image: url('../svgs/grup.svg');
    background-position: .2em -.07em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.5em;
    height: 1.5em;
}

input.tooltip {
    background-image: url('../svgs/ttip.svg');
    background-position: .18em 0em; 
    background-repeat: no-repeat;
    padding-left: 2.2em;
	background-size: 1.25em;
    height: 1.5em;
}

.verschieb {
    background-image: url('../svgs/verschieb.svg');
    background-position: 0em 0em; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1em;
    height: 1.5em;
}

.sperre {
    background-image: url('../svgs/locked.svg');
    background-position: 0em 0em; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1em;
    height: 1.5em;
}
.gespert {
    background-image: url('../svgs/lock.svg');
    background-position: 0em 0em; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1em;
    height: 1.5em;
}

.dilet {
    background-image: url('../svgs/trash.svg');
    background-position: 0; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1em;
    height: 1.5em;
}
.edid {
    background-image: url('../svgs/edit.svg');
    background-position: 0em 0em; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1.25em;
    height: 1.5em;
}
.ekldr {
    background-image: url('../svgs/editu.svg');
    background-position: 0em 0em; 
    background-repeat: no-repeat;
    padding-left: 1.15em;
	background-size: 1.25em;
    height: 1.5em;
}

.admin {
    background-image: url('../bbcode/admin_cir.svg');
    background-position: 50% 50%; 
    background-color:silver;
    background-repeat: no-repeat;
    padding-left: 0;
	background-size: 1.75em;
    height: 1.85em;
}



.addione {
    background-image: url('../bbcode/admin_cir.svg');
    background-color:silver;
    background-repeat: no-repeat;
    padding: 0 0 .3em 1.4em;
	background-size: 1.4em;
    width: 1em;
    height: auto;
    position: relative;
    border: .035em solid black;
    border-radius: .095em;
}

.additwo {
    background-image: url('../bbcode/admin_cir.svg');
    background-color:silver;
    background-repeat: no-repeat;
    padding: 0 0 .3em 1.4em;
	background-size: 1.4em;
    width: 1em;
    height: auto;
    position: relative;
    border: .035em solid black;
    border-radius: .095em;
}

.davor {
width: auto;
height: auto;
position: relative;
}
.order {
    background-image: url('../svgs/ordner.svg');
    background-position: .5em .1em; 
    background-repeat: no-repeat;
    padding-left: 2em;
	background-size: 1.5em;
    height: 2em;
}


.toltib {
    background-image: url('../svgs/toltip.png');
    background-position: .1em .1em; 
    background-repeat: no-repeat;
    padding-left: 7em;
	background-size: 4.85em;
    height: 4em;
}

.sprunk {
    background-image: url('../svgs/sprung.png');
    background-position: .1em .1em; 
    background-repeat: no-repeat;
    padding-left: 6.5em;
	background-size: 6.5em;
    height: 2em;
}

.sprunkzwei {
    background-image: url('../svgs/bestatig.png');
    background-position: .3em .1em; 
    background-repeat: no-repeat;
    padding-left: 6.5em;
	background-size: 6em;
    height: 2em;
}


a.svham {
    background-image: url('../svgs/hamburger.svg');
    background-position: .5em .1em; 
    background-repeat: no-repeat;
    padding-left: 2em;
	background-size: .85em;
    height: 2em;
}
a.skreuzi {
    background-image: url('../svgs/kreuz.svg');
    background-position: .5em .2em; 
    background-repeat: no-repeat;
    padding-left: 2em;
	background-size: .85em;
    height: 1.5em;
}



.inline {
display: inline-block;
}

rif {
height: 2em;
padding: .5em 0;
font-size: 125%;
}

a.bon {
  position: relative;
  display: inline-block;
  margin-top: .1em;
  white-space: nowrap;
}

a.bon[title]:hover::after {
  content: attr(title);
  position: absolute;
  font-size: 60%;
  border:.1em solid black;
  background-color: #f2f2f2;
  padding: .1em .3em;
  top: -100%;
  left: 0;
}






















.namen .svpwvmail {
width: calc(1em + ((1vw - .1em) * 1));
height: auto;
position: absolute;
top: 0;
left: 0;
}




.namen .sventry {
width: calc(1em + ((1vw - .1em) * 1));
height: auto;
position: absolute;
top: -.1em;
left: 0;
z-index: 99999999;
}


.namen .svgrups {
width: calc(1em + ((1vw - .1em) * 1));
height: auto;
position: absolute;
top: 0;
left: .12em;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Counter*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



.countbox {
display: block;
padding: .25em 0 .5em 0;
}

.counter {
display: flex;	
}
.txt { 
flex:1;
	color:#4a4a4a; 
	text-align: left;
	padding-left: calc(.5em + ((.5vw - 0.1em) * 1));
	font-size:75%;	
}
.zal { 
flex:1;
	color:#4a4a4a; 
	text-align: right; 
	font-weight: bold;
	padding-right: calc(.5em + ((.5vw - 0.1em) * 1));
	font-size:85%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Counter*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */