diff --git a/ProgramInformationV2/Components/App.razor b/ProgramInformationV2/Components/App.razor
index 05928a7..f7a792f 100644
--- a/ProgramInformationV2/Components/App.razor
+++ b/ProgramInformationV2/Components/App.razor
@@ -25,11 +25,10 @@
-
-
+
-
+
diff --git a/ProgramInformationV2/wwwroot/css/form.css b/ProgramInformationV2/wwwroot/css/form.css
index c8bb653..5515567 100644
--- a/ProgramInformationV2/wwwroot/css/form.css
+++ b/ProgramInformationV2/wwwroot/css/form.css
@@ -2,6 +2,14 @@
width: 75%;
}
+main ilw-content input, main ilw-content select {
+ width: stretch;
+}
+
+main ilw-content .ils-input-entry {
+ margin: 20px 0;
+}
+
main#app-main input[type="file"] {
width: calc(100%-20px);
margin-top: 10px;
@@ -26,4 +34,127 @@ a.ilw-button.view-button {
ilw-content fieldset p.top {
margin-top: 0;
-}
\ No newline at end of file
+}
+
+ilw-content .ils-toggle-slider {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+main ilw-content .ils-toggle-slider input[type="checkbox"] {
+ z-index: 10;
+ position: relative;
+ color: transparent;
+ width: 60px;
+ height: 34px;
+ background: transparent;
+ border: transparent;
+ opacity: 0;
+ cursor: pointer;
+}
+
+main ilw-content .ils-toggle-slider > span .ils-container {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--il-storm-lighter-1);
+ transition: 0.4s;
+ border-radius: 34px;
+}
+
+ main ilw-content .ils-toggle-slider > span .ils-container:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: #FFF;
+ transition: 0.4s;
+ border-radius: 50%;
+ }
+
+main ilw-content .ils-toggle-slider input:checked + span .ils-container {
+ background-color: var(--il-altgeld);
+}
+
+ main ilw-content .ils-toggle-slider input:checked + span .ils-container:before {
+ transform: translateX(26px);
+ }
+
+main ilw-content .ils-toggle-slider input:focus + span span {
+ outline: 3px solid var(--il-blue);
+}
+
+main ilw-content .ils-toggle-slider > span .ils-text-on {
+ display: none;
+ position: absolute;
+ left: 70px;
+ right: 0;
+ bottom: 0;
+ color: var(--il-blue);
+ font: normal 400 1.25rem / 1.5rem var(--il-font-sans);
+ margin: 0;
+ width: 50px;
+ height: 36px;
+ justify-content: center;
+ align-items: center;
+}
+
+main ilw-content .ils-toggle-slider > span .ils-text-off {
+ display: flex;
+ position: absolute;
+ left: 70px;
+ right: 0;
+ bottom: 0;
+ color: var(--il-blue);
+ font: normal 400 1.25rem / 1.5rem var(--il-font-sans);
+ margin: 0;
+ width: 50px;
+ height: 36px;
+ justify-content: center;
+ align-items: center;
+}
+
+main ilw-content .ils-toggle-slider > input:checked + span .ils-text-on {
+ display: flex;
+}
+
+main ilw-content .ils-toggle-slider > input:checked + span .ils-text-off {
+ display: none;
+}
+
+main ilw-content .ils-input-entry-compact, main ilw-content .ils-input-entry-checkbox {
+ display: grid;
+ align-items: center;
+ margin: auto;
+ grid-template-columns: 225px auto;
+ margin: 20px 0;
+ column-gap: 10px;
+ row-gap: 5px;
+}
+
+ main ilw-content .ils-input-entry-compact label, main ilw-content .ils-input-entry-checkbox label {
+ text-align: right;
+ padding: 0;
+ }
+
+ main ilw-content .ils-input-entry p, main ilw-content .ils-input-entry-compact p {
+ color: var(--il-storm);
+ font: 1rem / 1.125rem var(--il-font-sans);
+ padding-top: 3px;
+ margin: 0;
+ grid-column: 1 / span 2;
+ width: fit-content;
+ }
+
+@media screen and (prefers-reduced-motion: reduce) {
+ main .ils-toggle-slider span, main .ils-toggle-slider span:before {
+ transition: none;
+ }
+}