@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

body
{
  font-family: Verdana, Helvetia, Arial;
  background-color: #fff; /* Hintergrundfarbe */
  color: #333; /* Schriftfarbe */
  text-align: center;
}

a {
  color: #000;
  text-decoration: none; /* Verhindert die Standardunterstreichung von Links */
}

a:hover {
  text-decoration: none; /* Fügt eine Unterstreichung hinzu, wenn der Mauszeiger über dem Link schwebt */
}

span.small_text
{
	font-size: x-small;
}


div.container 
{
	width: 100%;
	max-width: 800px;
	padding: 0px;
	/*
	border: 1px;
	border-style: dotted;
	border-color: #f00;
	*/
	text-align: center;
}

div.message-box
{

	padding: 5px;
	
	border: 1px;
	border-style: dotted;
	border-color: #f00;
	
	align: center;
	text-align: center;
	font-weight: bold;
	font-size: 125%;
	color: #000;
	background-color: #fcc;
}

div.menue
{

	padding: 5px;
	
	border: 0px;
	border-style: none;
	
	align: center;
	text-align: center;
	font-weight: normal;
	font-size: 100%;
}

div.header
{
	border: 0px;
	border-style: solid;
	border-color: #ccc;
	min-height: 105px;
}

div.interactive
{
	border: 1px;
	border-style: dashed;
	border-color: #eee;
	min-height: 100px;
}



div.userinfo
{
	border: 1px;
	border-style: dotted;
	border-color: #333;
    border-radius: 5px;	
	text-align: center;
	color: #333;
	font-size: 10px;
	background-color: #fff;
	padding: 3px;
}

div.litter_puppy
{
  border: 2px;
  border-radius: 5px;
  border-color: #000;
  border-style: solid;
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
}

div.puppy_number
{
  border: 0;
  border-radius: 5px;
  border-color: #000;
  border-style: solid;
  padding: 3px;
  box-sizing: border-box;
  flex:1;
  font-size: 200%;
  font-weight: bold;
}

div.puppy_value
{
  border: 0;
  border-radius: 5px;
  border-color: #000;
  border-style: solid;
  padding: 3px;
  box-sizing: border-box;
  flex:200;
}


div.copyright
{
	border: 0px;
	border-style: dotted;
	border-color: #ccc;
	text-align: center;
}

div.drittel
{
  width: 33%; /* Setzt die Breite auf 33,33% */
  float: left; /* Fügt ein Flussverhalten hinzu, damit die Elemente nebeneinander angeordnet werden */
  box-sizing: border-box; /* Berücksichtigt das Padding und den Rand in der Breite */
  padding-right: 5px; /* Fügt ein Padding hinzu, um den Inhalt vom Rand zu trennen */
  border: none; /* Entfernt den Rahmen */
}

td.fontL
{
	font-size: 120%;
}

form
{	text-align: left;
	padding: 5px;
	width: 100%;
	
}

input, select {
  text-align: left;
  //font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 100%;
  width: 100%;
  //max-width: 480px;
  border: 2px;
  border-radius: 5px;
  border-color: #000;
  border-style: solid;
  padding: 3px;
  box-sizing: border-box;
}

input:read-only, select:read-only
{
	background-color: #eee;
	color: 333;
}


select.sel10, input.inp10
{
	width: 10%;
	max-width: 50px;
	text-align: center;
}

select.sel30, input.inp30
{
	width: 30%;
	max-width: 200px;
}

select.sel50, input.inp50
{
	width: 42%;
	max-width: 400px;
}

input[type=submit]
{
	width: 50%;
	max-width: 400px;
	text-align: center;
}

div.button
{
	/* width: 30%; */
    /* max-width: 200px;*/
    text-align: center;
    padding: 3px;
	/*margin: 0;*/
    border: 2px solid black;
    border-radius: 4px;
    background-color: #eee;
    color: black;
    font-size: 16px;
    cursor: pointer;
	display: inline-block
}

div.button_mate
{
	padding: 3px;
	margin: 2px;
	border: 1px;
	border-style: dotted;
	border-color: #f00;
	
	align: center;
	text-align: center;
	font-weight: bold;
	font-size: 75%;
	color: #c33;
	background-color: #fff;
}

div.button30
{
	width: 30%;
    /* max-width: 200px;*/
    text-align: center;
    padding: 3px;
	/*margin: 0;*/
    border: 2px solid black;
    border-radius: 4px;
    background-color: #eee;
    color: black;
    font-size: 16px;
    cursor: pointer;
	display: inline-block
	

}

div.button100
{
	width: 100%;
    /*max-width: 200px;*/
    text-align: center;
    padding: 3px;
	/*margin: 0;*/
    border: 2px solid black;
    border-radius: 4px;
    background-color: #eee;
    color: black;
    font-size: 16px;
    cursor: pointer;
	display: inline-block
	
}

#user_postalcode
{	width: 90px;
}

label
{	font-weight: normal;
	font-style: italic;
	font-size: 75%;
	border-top: 3px;

}

.tabellen-line-1
{	text-align: left;
	font-weight: normal;
	font-size: 75%;
	
	background-color: #eee;
}

.tabellen-line-2
{	text-align: left;
	font-weight: normal;
	font-size: 75%;
	background-color: #fff;
	
}

div#puppy1, div#puppy2, div#puppy3, div#puppy4, div#puppy5, div#puppy6, div#puppy7, div#puppy8, div#puppy9, div#puppy10,
div#puppy11, div#puppy12, div#puppy13, div#puppy14, div#puppy15, div#puppy16, div#puppy17, div#puppy18, div#puppy19, div#puppy20
{
	display:boxed;
}

div#puppy1hidden, div#puppy2hidden, div#puppy3hidden, div#puppy4hidden, div#puppy5hidden, div#puppy6hidden, div#puppy7hidden, div#puppy8hidden, div#puppy9hidden, div#puppy10hidden,
div#puppy11hidden, div#puppy12hidden, div#puppy13hidden, div#puppy14hidden, div#puppy15hidden, div#puppy16hidden, div#puppy17hidden, div#puppy18hidden, div#puppy19hidden, div#puppy20hidden
{
	display:none;
}