.note {
	padding: .2rem .4rem;
	margin: 10px 0 30px 0;
    font-size: 90%;
	color: black;
	border: 1px solid #fafd4a;
    background-color: #feffbe;
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.remark {
	font-weight: bold;
}

ul {
    list-style-type: none;   
}

.herrhidden {
	display: none;
}
.examples {
	font-size: 10pt;
}

#herr-placeholder .c {
	padding: .2rem .4rem;
    font-size: 90%;
    color: #bd4147;
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;	
}

#herr-placeholder .m {
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;	
}

#herr-placeholder .d {
	padding: .2rem .4rem;
    font-size: 90%;
    color: #bd4147;
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;	
}

#herr-placeholder .hdev, #herr-placeholder .hlib {
	padding: .2rem .4rem;
    font-size: 70%;
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;	
}

#herr-placeholder .hdev {
    color: green;
    background-color: #f0f;
}

#herr-placeholder .hlib {
    color: green;
    background-color: #0ff;
}

#herr-placeholder .other {
    color: rgb(240, 243, 243);
    background-color: rgb(102, 0, 128);
}



.form-container {
  max-width: 500px;
  margin: 0 auto;
}

input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
  font-size: 1rem;
}

.button-group {
  display: flex;
  gap: 1rem;
}

button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #333;
}

.summary-heading {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0;
    cursor: pointer;
}


/* When dark mode is enabled, the html tag gets the class "dark" */
html.dark input[type="text"] {
  color: black;
}