form { width: 100%; } button, label { font-family: 'Kanit', sans-serif; font-weight: bold; } input, button, textarea, select { border-radius: 0; font-weight: bold; font-size: 1em; padding: 0.2em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0; margin-right: 0.2em; } input[type=text], input[type=date], select, textarea { background-color: var(--light); border-width: 0 0 0 0.2em; border-color: var(--secondary-light); border-style: solid; padding-left: 0.75em; padding-top: 0.6em; outline: none; } input[type=text]:focus, input[type=date]:focus, textarea:focus { border-color: var(--secondary-dark); } input[type=text][class*=input-invalid], input[type=date][class*=input-invalid], textarea[class*=input-invalid] { border-color: var(--red); border-width: 0 0 0 0.2em; background-color: var(--red-light); } button { color: black; background-color: var(--light); position: relative; top: 0; margin-left: 0; margin-right: 0; padding: 0.25em; font-size: 1.25em; border: none; border-color: var(--dark); box-shadow: 0 0.2em 0 var(--dark); transition-property: box-shadow, border-radius, top; transition-duration: 0.1s; transition-timing-function: linear; border-radius: 0; } button:hover { box-shadow: 0 0.2em 0.5em var(--dark); border-radius: 0.5em; } button:active { top: 0.1em; } .icon-button, .icon-button:hover { border: none; background: none; box-shadow: none; margin: 0; padding: 0; } label { font-weight: bold; margin-bottom: 0; } label[class*=input-text-label] { position: relative; overflow: visible; width: 0; height: 0; display: block; white-space: nowrap; left: 1.5em; color: black; font-weight: bold; font-size: 0.75em; } label[class*=required]::after { display: inline-block; margin-left: 0.2em; content: "*"; color: var(--red) } .form-error { color: var(--red); } .form-message { color: var(--green); }