style fixes for colorized passwords

src/scss/misc.scss

@@ -88,10 +88,6 @@ p.lead {
     font-weight: normal;
 }
 
-[hidden] {
-    display: none !important;
-}
-
 .monospaced {
     font-family: $font-family-monospace;
 }
@@ -170,10 +166,10 @@ p.lead {
 
 .password-block {
     font-size: $font-size-large;
-    word-break: break-all;
     font-family: $font-family-monospace;
-    min-height: 60px;
+    min-height: 50px;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -183,6 +179,23 @@ p.lead {
     }
 }
 
+.password-wrapper {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+.password-number {
+    @include themify($themes) {
+        color: themed('passwordNumberColor');
+    }
+}
+
+.password-special {
+    @include themify($themes) {
+        color: themed('passwordSpecialColor');
+    }
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     height: 330px;
@@ -264,3 +277,7 @@ app-root > #loading {
         content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
     }
 }
+
+[hidden] {
+    display: none !important;
+}