/* CSS Document */
	@font-face {
  font-family: noto_sr; /* Set font-names here */
  src: url("./../fonts/NotoSans-Regular.ttf"); /* Set link to font here */
} /* Set fontweight here - font-weight: bold; */


/* the following fonts are not used - so I comment them out */
/*
@font-face {
  font-family: noto_si; 
  src: url("../fonts/NotoSans-Italic.ttf"); 
} 

@font-face {
  font-family: noto_ser; 
  src: url("../fonts/NotoSerif-Regular.ttf"); 
} 

@font-face {
  font-family: noto_sei; 
  src: url("../fonts/NotoSerif-Italic.ttf"); 
} 
End of out-commenting */

img {
	cursor: pointer;
}

div {
  font-family: noto_sr; /* Set class-names here */
}
	
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #f5dadf;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  }

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  font-family: noto_sr;
  display: inline-block;
  font-size: 85% !important; 
}

/* Style Titles like labels to display next to the inputs, but different fontstyle */
label2 {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-size: 85% !important; 
  font-weight: bold; 
}

label3 {
	padding: 12px 12px 12px 0;
	display: inline-block;
	font-size: 85% !important;
	font-weight: bold; 
	color: #f5dadf;
	cursor: pointer;
}

/* Style the reset button */
input[type=reset] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px 20px;
  border-color: white;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: right;
}

/* Style the submit button */
input[type=submit] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px 20px;
  border-color: #000000;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #FFF;
  padding: 20px;
}

/* style the link-color */
a:link {
	color: #DF8A9A;
	text-decoration: none;
}

a:hover {
	color: #DF8A9A;
	text-decoration: none;
}

a:visited {
	color: #DF8A9A;
	text-decoration: none;
}

a:active {
	color: #DF8A9A;
	text-decoration: none;
}

/* Style the row for the logo */
.row {
  border-radius: 5px;
  background-color: #FFFFFF;
 }

/*Style the erorr message */
.error {
  color: red;
  background-color: white;
  border-color: red;
  padding:1px 20px 1px 20px;
}

/* Style the tooltip */
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font-size: 75% !important; 
  }

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 50% width */
.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit], input[type=reset] {
    width: 100%;
    margin-top: 0;
  }
}