diff --git a/src/App.vue b/src/App.vue
index a561a4fa..eceef56a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,4 +13,5 @@
    @import "@/styles/common-typography-styles.scss";
    @import "@/styles/common-error-styles.scss";
    @import "@/styles/common-animations.scss";
+   @import "@/styles/shared-input-button-styles.scss";
 </style>
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 3576a8ac..cd3555cc 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -4,3 +4,7 @@
 @mixin blue-gradient {
   background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
 }
+
+@mixin box-shadow-hover($color) {
+  box-shadow: 0 0 0 4px $color;
+}
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
new file mode 100644
index 00000000..dbffa5b0
--- /dev/null
+++ b/src/styles/shared-input-button-styles.scss
@@ -0,0 +1,15 @@
+.base-input-button {
+    &:not(.has-error):hover {
+        cursor: pointer;
+
+        &.list-button,
+        &.list-button-horizontal,
+        &.list-card {
+            &:not(.selected) {
+                position: relative;
+                z-index: 4;
+                @include box-shadow-hover($blue-300);
+            }
+        }
+    }
+}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 52cf8916..d9b462af 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -1,186 +1,189 @@
 //Colors
 
 // White/black
-$white:    #FFFFFF;
-$black:    #000000;
+$white: #ffffff;
+$black: #000000;
 
 // Blues
-$blue-100:   #E4F1F7;// Used in theme
-$blue-200:   #C1DFEE;
-$blue-300:   #9FCEE6;
-$blue-400:   #69ADCF;// Used in theme
-$blue-500:   #3B8FB8;
-$blue:       #1574A1;// Default Blue
-$blue-700:   #06577C;
-$blue-800:   #003D58;
-$blue-900:   #002433;// Used in theme
+$blue-100: #e4f1f7; // Used in theme
+$blue-200: #c1dfee;
+$blue-300: #9fcee6;
+$blue-400: #69adcf; // Used in theme
+$blue-500: #3b8fb8;
+$blue: #1574a1; // Default Blue
+$blue-700: #06577c;
+$blue-800: #003d58;
+$blue-900: #002433; // Used in theme
 
 // Reds
-$red-100:    #FFE6E4;
-$red-200:    #FCBFBB;
-$red-300:    #F89892;
-$red-400:    #E65C53;
-$red:        #D4281C;// Default Red
-$red-600:    #AC160B;
-$red-700:    #840900;
-$red-800:    #5B0600;
-$red-900:    #330300;
+$red-100: #ffe6e4;
+$red-200: #fcbfbb;
+$red-300: #f89892;
+$red-400: #e65c53;
+$red: #d4281c; // Default Red
+$red-600: #ac160b;
+$red-700: #840900;
+$red-800: #5b0600;
+$red-900: #330300;
 
 // Greens
-$green-100:  #E3F2EA;
-$green-200:  #BCEDD4;
-$green-300:  #94D7B6;
-$green-400:  #5ABC8C;// Used in theme
-$green-500:  #2CA168;
-$green:      #0C7E47;// Default Green
-$green-700:  #006A36;
-$green-800:  #004F28;
-$green-900:  #00331A;
+$green-100: #e3f2ea;
+$green-200: #bcedd4;
+$green-300: #94d7b6;
+$green-400: #5abc8c; // Used in theme
+$green-500: #2ca168;
+$green: #0c7e47; // Default Green
+$green-700: #006a36;
+$green-800: #004f28;
+$green-900: #00331a;
 
 // Yellows
-$yellow-100: #FFF5EB;
-$yellow-200: #FFE1C6;
-$yellow-300: #FFCAA0;
-$yellow-400: #F5975D;
-$yellow:     #E86421;// Default Yellow
-$yellow-600: #BB4B06;
-$yellow-700: #8E3C00;
-$yellow-800: #602D00;
-$yellow-900: #331A00;
+$yellow-100: #fff5eb;
+$yellow-200: #ffe1c6;
+$yellow-300: #ffcaa0;
+$yellow-400: #f5975d;
+$yellow: #e86421; // Default Yellow
+$yellow-600: #bb4b06;
+$yellow-700: #8e3c00;
+$yellow-800: #602d00;
+$yellow-900: #331a00;
 
 // Grays
-$gray-100:   #F5F5F5;// Used in theme
-$gray-200:   #E3E4E4;// Used in theme
-$gray-300:   #D2D4D4;
-$gray:       #B0B3B3;// Default Gray
-$gray-500:   #8E9292;// Used in theme
-$gray-550:   #727676;// Used in theme
-$gray-600:   #4D5151;// Used in theme
-$gray-700:   #303333;// Used in theme
-$gray-800:   #222424;// Used in theme
-$gray-900:   #181A1A;// Used in theme
+$gray-100: #f5f5f5; // Used in theme
+$gray-200: #e3e4e4; // Used in theme
+$gray-300: #d2d4d4;
+$gray: #b0b3b3; // Default Gray
+$gray-500: #8e9292; // Used in theme
+$gray-550: #727676; // Used in theme
+$gray-600: #4d5151; // Used in theme
+$gray-700: #303333; // Used in theme
+$gray-800: #222424; // Used in theme
+$gray-900: #181a1a; // Used in theme
 
 // Miscellaneous Colors
-$indigo:     #6610f2;
-$purple:     #6f42c1;
-$pink:       #d63384;
-$orange:     #fd7e14;
-$teal:       #20c997;
-$cyan:       #0dcaf0;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #d63384;
+$orange: #fd7e14;
+$teal: #20c997;
+$cyan: #0dcaf0;
 
 // scss-docs-start colors-map
 $colors: (
-"blue":       $blue,
-"indigo":     $indigo,
-"purple":     $purple,
-"pink":       $pink,
-"red":        $red,
-"orange":     $orange,
-"yellow":     $yellow,
-"green":      $green,
-"teal":       $teal,
-"cyan":       $cyan,
-"white":      $white,
-"gray":       $gray,
-"gray-dark":  $gray-500
+    "blue": $blue,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+    "white": $white,
+    "gray": $gray,
+    "gray-dark": $gray-500,
 );
 
 // scss-docs-start theme-color-variables
-$primary:       $blue;
-$secondary:     $red;
-$success:       $green;
-$info:          $cyan;
-$warning:       $yellow;
-$danger:        $red;
-$light:         $gray-100;
-$dark:          $gray-500;
+$primary: $blue;
+$secondary: $red;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-500;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-"primary":    $primary,
-"secondary":  $secondary,
-"success":    $success,
-"info":       $info,
-"warning":    $warning,
-"danger":     $danger,
-"light":      $light,
-"dark":       $dark
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark,
 );
 
 //Default font color
-$body-color:  $gray-600;
+$body-color: $gray-600;
 
 //Fonts
-$font-family-sans-serif:      Roboto, Arial, Helvetica, sans-serif;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 // stylelint-enable value-keyword-case
-$font-family-base:            $font-family-sans-serif;
-$font-family-code:            $font-family-monospace;
-$font-size-base:              1rem; // Assumes the browser default, typically `16px`
+$font-family-base: $font-family-sans-serif;
+$font-family-code: $font-family-monospace;
+$font-size-base: 1rem; // Assumes the browser default, typically `16px`
 
 //Custom Font size (extra small)
-$font-size-xsm:                $font-size-base * .75;
+$font-size-xsm: $font-size-base * 0.75;
 $font-sizes: (
-  7: $font-size-xsm
+    7: $font-size-xsm,
 );
 
 //Font weight
-$font-weight-lighter:         lighter;
-$font-weight-light:           300;
-$font-weight-normal:          400;
-$font-weight-bold:            500;
-$font-weight-bolder:          bolder;
+$font-weight-lighter: lighter;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 500;
+$font-weight-bolder: bolder;
 
 //Headings
-$h1-font-size:                $font-size-base * 3;
-$h2-font-size:                $font-size-base * 2.625;
-$h3-font-size:                $font-size-base * 2;
-$h4-font-size:                $font-size-base * 1.625;
-$h5-font-size:                $font-size-base * 1.25;
-$h6-font-size:                $font-size-base * .875;
+$h1-font-size: $font-size-base * 3;
+$h2-font-size: $font-size-base * 2.625;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.625;
+$h5-font-size: $font-size-base * 1.25;
+$h6-font-size: $font-size-base * 0.875;
 
 //Border Radius
 // Helper classes are rounded, rounded-1, rounded-2, rounded-3
-$border-radius:               .25rem;
-$border-radius-sm:            .2rem;
-$border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
-$border-radius-pill:          50rem;
+$border-radius: 0.25rem;
+$border-radius-sm: 0.2rem;
+$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
+$border-radius-pill: 50rem;
 
 //Spacing
 // 8 spacers available instead of the usual 5
 $spacer: 1rem;
 $spacers: (
-  0: 0,
-  1: $spacer * .25, /* 4px */
-  2: $spacer * .5, /* 8px */
-  3: $spacer * .75, /* 12px */
-  4: $spacer * 1, /* 16px */
-  5: $spacer * 1.5, /* 24px */
-  6: $spacer * 2, /* 32px */
-  7: $spacer * 2.5, /* 40px */
-  8: $spacer * 3, /* 48px */
+    0: 0,
+    1: $spacer * 0.25,
+    /* 4px */ 2: $spacer * 0.5,
+    /* 8px */ 3: $spacer * 0.75,
+    /* 12px */ 4: $spacer * 1,
+    /* 16px */ 5: $spacer * 1.5,
+    /* 24px */ 6: $spacer * 2,
+    /* 32px */ 7: $spacer * 2.5,
+    /* 40px */ 8: $spacer * 3,
+    /* 48px */
 );
 
 //Grid breakpoints
 $grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 838px,
-  lg: 1074px,
-  xl: 1416px
+    xs: 0,
+    sm: 576px,
+    md: 838px,
+    lg: 1074px,
+    xl: 1416px,
 );
 
 //Shadow
-$box-shadow:                  0 .5rem 1rem rgba($black, .15);
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
-$box-shadow-lg:               0 1rem 3rem rgba($black, .25);//Safelite default
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
 
 //Alerts
-$alert-bg-scale:                -90%;
-$alert-border-scale:            -100%;
-$alert-color-scale:             40%;
+$alert-bg-scale: -90%;
+$alert-border-scale: -100%;
+$alert-color-scale: 40%;
 
 //Modal animation
-$modal-fade-transform:              translate(0, 0);
-$modal-backdrop-opacity:            0;
+// This affects all [Bootstrap] modals
+$modal-fade-transform: translate(0, 100%);
+$modal-backdrop-opacity: 0;