+
+/* https://moderncss.dev/custom-select-styles-with-pure-css/ */
+:root {
+ --select-border: #777;
+ --select-focus: #b11adc;
+ --select-arrow: var(--select-border);
+}
+
+select {
+ appearance: none;
+ background-color: transparent;
+ border: none;
+ padding: 0 1em 0 0;
+ margin: 0;
+ width: 100%;
+ font-family: inherit;
+ font-size: inherit;
+ cursor: inherit;
+ line-height: inherit;
+ z-index: 1;
+ outline: none;
+}
+
+.select {
+ display: grid;
+ grid-template-areas: "select";
+ align-items: center;
+ position: relative;
+ min-width: 15ch;
+ max-width: 30ch;
+ border: 1px solid var(--select-border);
+ border-radius: 0.25em;
+ padding: 0.25em 0.5em;
+ font-size: 1.25rem;
+ cursor: pointer;
+ line-height: 1.1;
+ background-color: #fff;
+ background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+ width: 100%;
+ margin: auto;
+}
+
+select, .select::after {
+ grid-area: select;
+}
+
+.select::after {
+ content: "";
+ justify-self: end;
+ width: 0.8em;
+ height: 0.5em;
+ background-color: var(--select-arrow);
+ clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+}
+
+select:focus + .focus {
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ border: 2px solid var(--select-focus);
+ border-radius: inherit;
+}
+
+
+/* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */
+.form-field {
+ display: block;
+ margin-bottom: 16px;
+}
+.form-field--is-active .form-field__control::after {
+ border-bottom: 2px solid #b11adc;
+ transform: scaleX(150);
+}
+.form-field--is-active .form-field__label {
+ color: #b11adc;
+ font-size: 0.75rem;
+ transform: translateY(-14px);
+}
+.form-field--is-filled .form-field__label {
+ font-size: 0.75rem;
+ transform: translateY(-14px);
+}
+.form-field__label {
+ display: block;
+ font-size: 1.2rem;
+ font-weight: normal;
+ left: 0;
+ margin: 0;
+ padding: 18px 12px 0;
+ position: absolute;
+ top: 0;
+ transition: all 0.4s;
+ width: 100%;
+}
+.form-field__control {
+ background: #eee;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+.form-field__control::after {
+ border-bottom: 2px solid #b11adc;
+ bottom: 0;
+ content: "";
+ display: block;
+ left: 0;
+ margin: 0 auto;
+ position: absolute;
+ right: 0;
+ transform: scaleX(0);
+ transition: all 0.4s;
+ width: 1%;
+}
+.form-field__input {
+ appearance: none;
+ background: transparent;
+ border: 0;
+ border-bottom: 1px solid #999;
+ color: #333;
+ display: block;
+ font-size: 1.2rem;
+ margin-top: 24px;
+ outline: 0;
+ padding: 0 12px 10px 12px;
+ width: 100%;
+}
+
+
+/* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */
+label.checkbox > input[type="checkbox"] {
+ display: none;
+}
+label.checkbox > input[type="checkbox"] + *::before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ margin-bottom: 3px;
+ width: 1.1rem;
+ height: 1.1rem;
+ border-radius: 10%;
+ border-style: solid;
+ border-width: 0.1rem;
+ border-color: gray;
+}
+
+label.checkbox > input[type="checkbox"]:checked + *::before {
+ content: "✓";
+ font-size: 1.1rem;
+ /*padding:10px;*/
+ color: white;
+ text-align: center;
+ background: teal;
+ border-color: teal;
+}
+label.checkbox > input[type="checkbox"]:checked + * {
+ color: teal;
+}
+
+/*label.checkbox {
+ color: teal;
+}*/
+label.checkbox > span.spacer {
+ width: 10px;
+ content: " ";
+}
+
+