the penalty form (input, new record)

1 files changed, 80 insertions, 1 deletions

diff --git a/public/assets/css/class.css b/public/assets/css/class.css
index 4747507..5333f29 100644
--- a/public/assets/css/class.css
+++ b/public/assets/css/class.css
@@ -28,9 +28,88 @@
     --class-orange-opaque: #f4792099;
     --class-grey-background: #eeedeb;
     --class-red: #d13;
-    --light-grey-bgr: #f2f3f8;
+    --light-grey-bgr: #f5f6f7;
+    --light-grey-layer-bgr: #eeeded;
+    --light-grey-shade: 1px 5px 7px #7773;
+    --form-content-font-size: .87rem;
+    --form-input-height: 31px;
+    --form-layer-border: 1px solid #e7e5e5;
+    --select2-arrow-top: -1px;
 }
 
+html, body,
+select, select option {
+    font-family: "Fira Sans", sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400; };
+
+html, body {
+    padding:0; margin:0;
+    font-size:1.25em;
+    color: #037; background: var(--light-grey-bgr);
+    line-height:1.2em; 
+}
+
+.office h3 {
+    font-size: 2em; font-style: normal;
+    color: #05a;
+    margin: 0; padding: 5px;
+    opacity: 0.27;
+    border-bottom: 1px solid #05a;
+}
+
+
+/** micro-positioning classes
+ * -----------------------------------------------------------------------------
+ */
+
+.max420px { max-width: 420px; width: 100%; }
+.max480px { max-width: 480px; width: 100%; }
+.max540px { max-width: 540px; width: 100%; }
+.max720px { max-width: 720px; width: 100%; }
+.bottom3em { padding-bottom: 3em; }
+
+
+
+
+/** central form
+ * -----------------------------------------------------------------------------
+ * includes login / invitation / reset password forms
+ */
+
+.central-form .container {
+    display: flex;
+    min-height: 100vh;
+    align-items:center;
+}
+.central-form .content {
+    width: 100%;
+    margin: auto auto; padding: .5em;
+    font-size: .78em;
+}
+
+.central-form .content-form {
+    padding: 1.5em;
+    background: var(--light-grey-layer-bgr);
+    border-radius: 8px;
+    box-shadow: var(--light-grey-shade);
+    border: var(--form-layer-border);
+}
+
+.central-form .content .info { padding: 1.5em; font-size: .92em; }
+.central-form .content .info p {
+    color: #554e;
+    font-size: .9rem;
+    line-height: 150%;
+}
+
+.central-form form label { font-size: 14px; }
+
+.central-form h4 { font-size: 1.24rem; }
+
 
 
 /* main layout classes