:root
{
	--fontsize: 1vw;
}

body
{
	margin: 10px;
	font-size: calc(var(--fontsize) * 1.0); 
	font-family: helvetica;
  	background-color: #ddddff;
}

#debugoverlayform
{
	position: absolute;
	right: 11px;
	top: 11px;
  	background-color: #00aa55;
}

#debugoverlayform textarea
{
	display: block;
	background-color: #EEEEEE; 
	border: 1px solid #000000;
	border-radius: 10px;
	padding: 1em;
	width: 500px;
}

h1
{
  font-weight: 500;
  font-size: calc(var(--fontsize) * 1.6); 
  margin-bottom: 1em;
  color: #00aa55;
}

.allbuttons
{
	text-decoration: none;
	box-sizing: border-box;
    cursor: pointer;
    color: white;
    background-color: #00aa55;
 	border-radius: 5px;
    border-right: 2px solid #3e8e41;
    border-bottom: 2px solid #3e8e41;
    border-left: 2px solid #6ebe71;
    border-top: 2px solid #6ebe71;
	font-size: calc(var(--fontsize) * 1.2); 
	padding: 0.4em;
   	margin-left: 0.5em;
   	margin-right: 0.5em;
   	margin-top: 0.2em;
   	margin-bottom: 0.2em;
}


.allbuttons:hover
{
  	background-color: #22cc66;
    border-left: 2px solid #3e8e41;
    border-top: 2px solid #3e8e41;
    border-right: 2px solid #6ebe71;
    border-bottom: 2px solid #6ebe71;
}

.allbuttons[disabled]
{
	pointer-events: none;	
	background-color: #dddddd;
	color: #666666;
}

.allbuttonspressed
{
	pointer-events: none;
	text-decoration: none;
	box-sizing: border-box;
    color: #333333;
	background-color: #22cc66;
 	border-radius: 5px;
    border-left: 2px solid #3e8e41;
    border-top: 2px solid #3e8e41;
    border-right: 2px solid #6ebe71;
    border-bottom: 2px solid #6ebe71;
	font-size: calc(var(--fontsize) * 1.2); 
	padding: 0.4em;
   	margin-left: 0.5em;
   	margin-right: 0.5em;
   	margin-top: 0.2em;
   	margin-bottom: 0.2em;
}

.smallbuttons
{
	box-sizing: border-box;
    cursor: pointer;
    background-color: #00aa55;
 	border-radius: 5px;
    border-right: 1px solid #3e8e41;
    border-bottom: 1px solid #3e8e41;
    border-left: 1px solid #6ebe71;
    border-top: 1px solid #6ebe71;
	font-size: calc(var(--fontsize) * 0.8); 
	padding: 0.0em;
   	margin-left: 0.2em;
   	margin-right: 0.2em;
   	margin-top: 0.0em;
   	margin-bottom: 0.0em;
   	width: calc(var(--fontsize) * 0.8 * 1.5); 
}

.smallbuttons:hover
{
  	background-color: #22cc66;
    border-left: 1px solid #3e8e41;
    border-top: 1px solid #3e8e41;
    border-right: 1px solid #6ebe71;
    border-bottom: 1px solid #6ebe71;
}

.smallimg
{
	height: calc(1em * 1.5); 
	width: calc(1em * 1.5);
	vertical-align: bottom;
}

.formclass
{
	display: inline-block;
	background-color: #00aa55; 
	border: 0px solid #00aa55;
	border-radius: 10px;
	padding: 0.5em;
   	margin-left: 0em;
   	margin-right: 0em;
   	margin-top: 0em;
   	margin-bottom: 0em;
}

.modalclass
{
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 000px;
  top: 000px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(200,200,200,0.9);
}


.modalformclass
{
	background-color: #00aa55; 
	border: 0px solid #00aa55;
	border-radius: 10px;
	padding: 0.5em;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
}


.modaldivclassleft
{
	float: left;
	width: 30%;
	box-sizing: border-box;
	padding: 0px;
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
}

.modaldivclassright
{
	float: left;
	width: 70%;
	box-sizing: border-box;
	padding: 0px;
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
}

.modallabelclass
{
	box-sizing: border-box;
	border: 1px solid #22cc66; 
	background-color: #22cc66; 
	text-align: right;
	font-size: calc(var(--fontsize) * 1.0); 
   	font-family: inherit;
   	font-weight:normal; 
	padding-top: 4px;
	padding-right: 0.1em;
	margin-bottom: calc(var(--fontsize) * 1.0 * 1.5 * 0.5); 
	width: 90%;
	height: calc(var(--fontsize) * 1.0 * 1.5 * 1.2); 
}

.modallabelclass[required]::after
{
	font-weight: bold;
	color: red;
	font-size: calc(var(--fontsize) * 0.8); 
	vertical-align: super;
	content: " *";
}

.modalinputclass
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 1px solid #000000;
	border-radius: 5px;
	background-color: #ffffbb;
	text-align: left;
	font-size: calc(var(--fontsize) * 0.8); 
   	font-family: inherit;
   	font-weight: normal; 
	padding-left: 0.2em;
	margin-bottom: calc(var(--fontsize) * 1.0 * 1.5 * 0.5); 
	width: 90%;
	height: calc(var(--fontsize) * 1.0 * 1.5 * 1.2); 
}

.modalinputclass[readonly],
.modalinputclass[readOnly],
.modalinputclass[disabled]
{
	box-sizing: border-box;
	cursor: not-allowed;
   	border: 1px solid #888888;
	border-radius: 5px;
	background-color: #dddddd;
	color: #444444;
}

.modalinputclass[readonly]:focus
{
	outline: none;
}

#alertmodal textarea
{
	display: block;
	box-sizing: border-box;
	background-color: #EEEEEE; 
	border: 1px solid #000000;
	border-radius: 10px;
	padding: 1em;
	width: 100%;
	min-height: 10em;
	resize: vertical;
}


.fieldsetclass
{
	background-color: #22cc66; 
	border: 1px solid #000000;
	border-radius: 10px;
	padding: 1em;
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
}

.classselectformdivclass,
.nameselectformdivclass
{
	display: block;
	box-sizing: border-box;
	padding: 0px;
	margin-top: 0.0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0.0em;
}

.labelclass
{
	box-sizing: border-box;
	border: 0px solid;
	border-color: #00FF00;
	font-size: calc(var(--fontsize) * 1.0); 
   	font-family: inherit;
   	font-weight:normal; 
	padding: 0px;
	margin-left: 0em;
	margin-right: 1em;
	margin-top: 0em;
	margin-bottom: 0em;
}

.inputclass
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 1px solid;
	border-radius: 5px;
	background-color: #ffffbb;
	font-size: calc(var(--fontsize) * 0.7); 
	margin-left: 0em;
	margin-right: 1em;
	margin-top: 0em;
	margin-bottom: 0em;
	height: calc(1em * 1.5); 
}


.loginforminputclass::placeholder,
.classselectforminputclass::placeholder,
.nameselectforminputclass::placeholder
{
	color: #555555;
	opacity: 1;
	font-size:  calc(var(--fontsize) * 0.8);  
   	font-weight:normal;
}

.resultinputclassred
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 4px solid #ff0000;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.resultinputclassleer
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 1px solid #ffffbb;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.resultinputclassnichts
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 1px solid #000000;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.resultinputclassbronze
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 4px solid #bf8970;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.resultinputclasssilber
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 4px solid #e0e0e0;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.resultinputclassgold
{
	box-sizing: border-box;
	cursor: pointer;
   	border: 4px solid #ffd700;
	border-radius: 5px;
	font-size: calc(var(--fontsize) * 0.9); 
   	font-family: inherit;
   	font-weight:normal; 
   	width: 8em;
	padding: 0.2em;
	background-color: #ffffbb;
}

.classselectlistclass,
.nameselectlistclass
{
  	display: inline-grid;
  	grid-template-columns: auto auto auto auto auto;
	margin-top: 0.2em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0.2em;

}

.classselectlistclass div,
.nameselectlistclass div
{
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: 0em;
	margin-right: 0em;
}

.classselectlistclass label,
.nameselectlistclass label
{
	font-size: calc(var(--fontsize) * 1.0);
   	font-family: inherit;
   	font-weight:normal; 
	margin-top: 0.3em;
	margin-bottom: 0.5em;
	margin-left: 0.3em;
	margin-right: 3em;
}


.formclass table
{
	;--tableborder: 1px solid black
	;border-radius: 10px
	;background-color: #22cc66
	;margin-top: 0em
	;margin-left: 0em
	;margin-right: 0em
	;margin-bottom: 0em

	;Do not change boyond this point
	Yes this is a multiline comment in CSS
	I dont care about normal conventions
	
	;border-spacing: 0
 	;border-collapse: separate 	
 	;border: var(--tableborder)
 	;overflow: hidden
}


.formclass table th:not(:last-child),
.formclass table td:not(:last-child)
{
	border-right: var(--tableborder);
}

.formclass table>thead:not(:first-child)>tr>th,
.formclass table>thead:not(:first-child)>tr>td,
.formclass table>tbody:not(:first-child)>tr>th,
.formclass table>tbody:not(:first-child)>tr>td,
.formclass table>thead>tr:not(:first-child)>th,
.formclass table>thead>tr:not(:first-child)>td,
.formclass table>tbody>tr:not(:first-child)>th,
.formclass table>tbody>tr:not(:first-child)>td,
.formclass table>tfoot>tr:not(:first-child)>th,
.formclass table>tfoot>tr:not(:first-child)>td,
.formclass table>tr:not(:first-child)>td,
.formclass table>tr:not(:first-child)>th
{
	border-top: var(--tableborder);
}


.formclass th
{
	font-size: var(--fontsize);
	text-align: left;
	padding-top: 0.4em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.4em;
}

.formclass td
{
	box-sizing: border-box;
	font-size: calc(var(--fontsize) * 0.80);
	padding-top: 0.4em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.4em;
}


.abgabeclass
{
	border: 0px solid #ff0000;	
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
}

.abgabeclass tr
{
	display: block;
	width: 1760px;
}

.abgabeclass thead
{
	height: 572px;
	background-image: url("/sportabzeichen/images/GruppenkarteHead.png");
}

.abgabeclass tbody
{
	height: 584px;
	background-image: url("/sportabzeichen/images/GruppenkarteBody.png");
}

.abgabeclass tfoot
{
	height: 96px;
	background-image: url("/sportabzeichen/images/GruppenkarteFoot.png");
}


@page
{
   /* size: A4 landscape; */
}

@media print
{
	.formclass
	{
		display: none;	
	}
}


.groupcardclass
{
	margin: 0px;
	padding-left: 7px;
	padding-top: 8px;
	position: relative;
}

.groupcardclass label
{
	font-size: 20px;
	position: absolute;
}

.hiddeninput
{
	opacity: 0;
	width: 1px;
}

legend
{
	font-size: calc(var(--fontsize) * 0.7);
}