Implement select study

Implement the select study UI

2 files changed, 34 insertions, 1 deletions

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index d27952a..a42ffb0 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -117,10 +117,16 @@ fieldset {
 
 .form-col-2 {
     grid-column: 2 / 3;
-    width: 20%;
 }
 
 input[disabled="true"],input[disabled="disabled"] {
     border-color: #878787;
     background-color: #A9A9A9;
 }
+
+form legend {
+    padding-left: 3em;
+    text-transform: capitalize;
+    font-weight: bolder;
+    line-height: 2em;
+}
diff --git a/qc_app/static/css/two-column-with-separator.css b/qc_app/static/css/two-column-with-separator.css
new file mode 100644
index 0000000..b6efd46
--- /dev/null
+++ b/qc_app/static/css/two-column-with-separator.css
@@ -0,0 +1,27 @@
+.two-column-with-separator {
+    display: grid;
+    grid-template-columns: 9fr 1fr 9fr;
+}
+
+.two-col-sep-col1 {
+    grid-column: 1 / 2;
+}
+
+.two-col-sep-separator {
+    grid-column: 2 / 3;
+    text-align: center;
+    color: #FE3535;
+    font-weight: bolder;
+}
+
+.two-col-sep-col2 {
+    grid-column: 3 / 4;
+}
+
+.two-col-sep-col1, .two-col-sep-col2 {
+    border-style: solid;
+    border-color: #FE3535;
+    border-width: 1px;
+    border-radius: 2em;
+    padding: 2em 3em 2em 3em;
+}