diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss
index b01826257..31407228a 100644
--- a/src/lib/Controls.scss
+++ b/src/lib/Controls.scss
@@ -1,26 +1,26 @@
 .bp-controls-wrapper {
-    border: 0 none;
+    position: absolute;
     bottom: 25px;
     left: 50%;
     margin: 0;
     padding: 0;
-    position: absolute;
+    border: 0 none;
 }
 
 .bp-controls {
+    position: relative;
+    left: -50%;
+    display: table;
+    table-layout: fixed;
     background: fade-out($twos, .05);
     border-radius: 3px;
-    display: table;
-    left: -50%;
     opacity: 0;
-    position: relative;
-    table-layout: fixed;
     transition: opacity .5s;
 
     // Page num input CSS
     .bp-page-num {
-        min-width: 48px;
         width: auto; // Let page num expand as needed
+        min-width: 48px;
 
         span {
             display: inline;
@@ -29,10 +29,10 @@
     }
 
     .bp-page-num-wrapper {
-        background-color: #444;
-        border-radius: 3px;
         margin: 5px;
         padding: 7px 5px;
+        background-color: #444;
+        border-radius: 3px;
     }
 
     /* stylelint-disable property-no-vendor-prefix */
@@ -50,19 +50,19 @@
     /* stylelint-enable property-no-vendor-prefix */
 
     input[type='number'].bp-page-num-input {
-        font-size: 14px;
-        margin: 0 auto;
         position: absolute;
+        width: 44px; // hard-coded to solve layout issues
+        margin: 0 auto;
+        font-size: 14px;
         text-align: center;
         visibility: hidden;
-        width: 44px; // hard-coded to solve layout issues
     }
 
     &.show-page-number-input {
         .bp-page-num-wrapper {
+            padding: 0;
             background-color: transparent;
             border: none;
-            padding: 0;
         }
 
         .bp-page-num {
@@ -76,8 +76,8 @@
         }
 
         input[type='number'].bp-page-num-input {
-            display: inline-block;
             position: static;
+            display: inline-block;
             visibility: visible;
         }
     }
@@ -91,26 +91,26 @@
     display: table-cell;
     margin: 0;
     padding: 0;
-    touch-action: manipulation;
-    user-select: none;
     vertical-align: middle;
+    user-select: none;
+    touch-action: manipulation;
 }
 
 .bp-controls-btn {
-    background: transparent;
-    border: 1px solid transparent;
-    color: $white;
-    cursor: pointer;
     display: block;
+    width: 48px;
     height: 48px;
     margin: 0;
-    opacity: .7;
-    outline: 0;
     padding: 0;
+    color: $white;
+    background: transparent;
+    border: 1px solid transparent;
+    outline: 0;
+    cursor: pointer;
+    opacity: .7;
+    user-select: none;
     // disables non-standard gestures such as double-tap to zoom
     touch-action: manipulation;
-    user-select: none;
-    width: 48px;
     zoom: 1;
 
     &:hover,
diff --git a/src/lib/ProgressBar.scss b/src/lib/ProgressBar.scss
index 7db22c6f4..838fced57 100644
--- a/src/lib/ProgressBar.scss
+++ b/src/lib/ProgressBar.scss
@@ -10,11 +10,11 @@
 }
 
 .bp-progress-bar {
-    background-color: $box-blue;
+    width: 0%;
     height: 3px;
+    background-color: $box-blue;
     opacity: 0;
     transition: opacity .3s ease-in, width .2s ease-in;
-    width: 0%;
 
     &.bp-is-visible {
         opacity: 1;
diff --git a/src/lib/VirtualScroller.scss b/src/lib/VirtualScroller.scss
index ca31b1ddf..5d37fdb39 100644
--- a/src/lib/VirtualScroller.scss
+++ b/src/lib/VirtualScroller.scss
@@ -3,16 +3,16 @@
     overflow-y: auto;
 
     .bp-vs-list {
+        position: relative;
         margin: 0;
         padding: 0;
-        position: relative;
     }
 
     .bp-vs-list-item {
-        box-sizing: border-box;
-        display: flex;
-        left: 0;
         position: absolute;
         right: 0;
+        left: 0;
+        display: flex;
+        box-sizing: border-box;
     }
 }
diff --git a/src/lib/_boxui.scss b/src/lib/_boxui.scss
index d74ed293e..6366bbc73 100644
--- a/src/lib/_boxui.scss
+++ b/src/lib/_boxui.scss
@@ -30,35 +30,35 @@
 // Buttons
 //------------------------------------------------------------------------------
 .bp-btn {
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
-    cursor: pointer;
+    position: relative;
     display: inline-block;
-    font-size: 13px;
-    line-height: 10px;
+    box-sizing: border-box;
     margin: 5px;
     padding: 10px 16px;
-    position: relative;
+    font-size: 13px;
+    line-height: 10px;
+    white-space: nowrap;
     text-align: center;
     text-decoration: none;
     vertical-align: top;
-    white-space: nowrap;
+    border-style: solid;
+    border-width: 1px;
+    cursor: pointer;
     zoom: 1;
 
     &.is-disabled {
-        cursor: default;
         top: 0; // prevents disabled button from being depressed on click
+        cursor: default;
     }
 
     &.is-disabled,
     &.is-disabled:active,
     &.is-disabled:hover,
     &.is-disabled:focus {
+        color: #666;
         background-color: $haze;
         border: 1px solid $sf-fog;
         box-shadow: none;
-        color: #666;
         opacity: .4;
     }
 
@@ -70,13 +70,13 @@
 .bp-btn-plain,
 .bp-btn-plain:hover,
 .bp-btn-plain:active {
-    border: 0;
-    cursor: pointer;
-    font-weight: normal;
     height: auto;
     margin: 0;
     padding: 0;
+    font-weight: normal;
     vertical-align: middle;
+    border: 0;
+    cursor: pointer;
 
     svg {
         pointer-events: none;
@@ -85,33 +85,33 @@
 
 .bp-btn-plain {
     background: transparent;
-    box-shadow: none;
     outline: none;
+    box-shadow: none;
 
     &.is-disabled {
-        background-color: $haze;
         color: #666;
+        background-color: $haze;
         opacity: .4;
         pointer-events: none;
     }
 }
 
 .bp-btn {
-    -webkit-appearance: none;
-    background-color: $white;
-    border: 1px solid $sf-fog;
-    border-radius: 2px;
     color: $sunset-grey;
-    cursor: pointer;
     font-weight: 400;
     letter-spacing: 1px;
     text-shadow: none;
+    background-color: $white;
+    border: 1px solid $sf-fog;
+    border-radius: 2px;
+    cursor: pointer;
     -webkit-transition: border-color linear .15s, box-shadow linear .15s, background-color linear .15s;
     transition: background-color .05s ease-in-out, border-color .05s ease-in-out;
+    -webkit-appearance: none;
 
     &:hover {
-        background-color: darken($white, 3%);
         text-decoration: none;
+        background-color: darken($white, 3%);
     }
 
     &:active,
@@ -122,23 +122,23 @@
     }
 
     &:focus {
+        text-decoration: none;
         border-color: darken($sf-fog, 14%);
-        box-shadow: 0 1px 2px fade-out($black, .9);
         outline: 0;
-        text-decoration: none;
+        box-shadow: 0 1px 2px fade-out($black, .9);
     }
 }
 
 .bp-btn-primary {
+    color: $white;
     background-color: $box-blue;
     border-color: $box-blue;
-    color: $white;
 
     &:focus:hover,
     &:focus {
         border-color: $box-blue;
-        box-shadow: inset 0 0 0 1px fade-out($white, .2), 0 1px 2px fade-out($black, .9);
         outline: 0;
+        box-shadow: inset 0 0 0 1px fade-out($white, .2), 0 1px 2px fade-out($black, .9);
     }
 
     &:hover {
@@ -157,9 +157,9 @@
     &.is-disabled:active,
     &.is-disabled:hover,
     &.is-disabled:focus {
+        color: $white;
         background-color: $primary-color;
         border-color: $primary-color;
-        color: $white;
     }
 }
 
@@ -167,10 +167,10 @@
 // Forms
 //------------------------------------------------------------------------------
 .bp-textarea {
+    color: $sunset-grey;
     border: 1px solid $sf-fog;
     border-radius: 2px;
     box-shadow: inset 0 1px 1px lighten($black, 90%);
-    color: $sunset-grey;
     -webkit-transition: border-color linear .15s, box-shadow linear .1s;
     transition: border-color linear .15s, box-shadow linear .1s;
 }
@@ -181,8 +181,8 @@
 
 .bp-textarea:focus {
     border: 1px solid $box-blue;
-    box-shadow: none;
     outline: 0;
+    box-shadow: none;
 }
 
 .bp-controls {
@@ -191,14 +191,14 @@
     input[type='number'],
     div[contentEditable='true'],
     textarea {
+        width: 262px;
+        padding: 7px;
+        color: $twos;
         border: 1px solid #ccc;
         border-radius: 3px;
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
-        color: $twos;
-        -webkit-font-smoothing: antialiased;
-        padding: 7px;
         transition: border-color linear .15s, box-shadow linear .1s;
-        width: 262px;
+        -webkit-font-smoothing: antialiased;
     }
 
     input[type='text']:hover,
@@ -213,8 +213,8 @@
     div[contentEditable='true']:focus,
     textarea:focus {
         border: 1px solid $primary-color;
-        box-shadow: none;
         outline: 0;
+        box-shadow: none;
     }
 
     input::-webkit-input-placeholder,
@@ -228,60 +228,60 @@
 // Menus
 //------------------------------------------------------------------------------
 .bp-overlay {
+    position: absolute;
+    z-index: 90;
+    margin: 0;
+    padding: 8px 0;
     background: $white;
     border: 1px solid $sf-fog;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
-    margin: 0;
-    opacity: 0;
-    padding: 8px 0;
-    pointer-events: none;
-    position: absolute;
     -webkit-transform: rotateY(-10deg) rotateX(-10deg);
     transform: rotateY(-10deg) rotateX(-10deg);
     -webkit-transform-origin: left top;
     transform-origin: left top;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
+    visibility: hidden;
+    opacity: 0;
     -webkit-transition: visibility 0s linear .075s, opacity .075s, -webkit-transform .125s;
     transition: visibility 0s linear .075s, opacity .075s, -webkit-transform .125s;
     transition: visibility 0s linear .075s, opacity .075s, transform .125s;
     transition: visibility 0s linear .075s, opacity .075s, transform .125s, -webkit-transform .125s;
-    visibility: hidden;
-    z-index: 90;
+    pointer-events: none;
 }
 
 .bp-link {
+    overflow: hidden;
     color: #64686d;
-    font-smoothing: antialiased;
     line-height: 1.5em;
-    overflow: hidden;
+    white-space: nowrap;
     text-decoration: none;
     text-overflow: ellipsis;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
     -webkit-transition: color .05s;
     transition: color .05s;
-    white-space: nowrap;
+    font-smoothing: antialiased;
 }
 
 .bp-menu {
-    list-style: none;
-    margin: 0;
     min-width: 225px;
+    margin: 0;
     padding: 0;
     white-space: nowrap;
+    list-style: none;
 
     .link-group {
         ul {
             margin: 0;
 
             a {
-                color: #494949;
                 display: block;
                 padding: 5px 35px 5px 15px;
+                color: #494949;
 
                 &:hover {
-                    background: #f6fafd;
                     color: #1a5976;
+                    background: #f6fafd;
                     cursor: pointer;
                     fill: #1a5976;
                 }
@@ -294,27 +294,27 @@
 // Notifications
 //------------------------------------------------------------------------------
 .bp-notifications-wrapper {
-    height: 0; /* allows elements around notifications to be clickable */
-    left: 0;
     position: fixed;
-    right: 0;
     top: 0;
+    right: 0;
+    left: 0;
     z-index: 130;
+    height: 0; /* allows elements around notifications to be clickable */
 }
 
 .bp-notification {
-    align-items: center;
-    background-color: $sunset-grey;
-    border-radius: 4px;
-    box-shadow: 0 2px 6px fade-out($black, .85);
-    color: $white;
     display: flex;
-    font-weight: bold;
-    margin: 10px auto;
+    align-items: center;
     max-width: 572px;
     min-height: 48px;
-    overflow: hidden;
+    margin: 10px auto;
     padding: 10px 10px 10px 20px;
+    overflow: hidden;
+    color: $white;
+    font-weight: bold;
+    background-color: $sunset-grey;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px fade-out($black, .85);
     transition: opacity .1s ease-out;
 
     &.info {
@@ -335,15 +335,15 @@
     }
 
     > span {
-        font-size: 15px;
         margin-right: auto;
         padding-right: 10px;
+        font-size: 15px;
     }
 
     &.wrap > span {
         overflow: hidden;
-        overflow-wrap: break-word;
         word-wrap: break-word; /* Include legacy name to support older browsers */
+        overflow-wrap: break-word;
     }
 
     &.ellipsis > span {
@@ -353,32 +353,32 @@
 
     button,
     a {
-        color: $white;
         flex: none;
+        color: $white;
 
         &.btn,
         &.btn:active:focus {
-            background-color: transparent;
-            border-color: $off-white;
             margin: 0 5px;
             padding: 7px 13px;
+            background-color: transparent;
+            border-color: $off-white;
         }
 
         &.close-btn {
+            margin: 0 7px;
+            font-weight: bold;
+            font-size: 14px;
             background: none;
             border: none;
+            outline: none;
             cursor: pointer;
-            font-size: 14px;
-            font-weight: bold;
-            margin: 0 7px;
             opacity: .6;
-            outline: none;
 
             &.default-close-btn {
                 svg {
+                    width: 24px;
                     height: 24px;
                     pointer-events: none;
-                    width: 24px;
 
                     path.icon {
                         fill: $white;
@@ -394,41 +394,41 @@
 //------------------------------------------------------------------------------
 
 .bp-modal {
-    align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
+    z-index: 160;
     display: flex;
     flex: 1;
-    left: 0;
-    overflow: hidden;
+    align-items: center;
     padding: 30px;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 160;
+    overflow: hidden;
 }
 
 .bp-modal-dialog {
-    background-clip: padding-box;
-    background-color: $white;
-    box-shadow: 0 3px 10px fade-out($black, .7);
-    margin: auto;
-    padding: 30px;
     position: relative;
     width: 460px;
+    margin: auto;
+    padding: 30px;
+    background-color: $white;
+    background-clip: padding-box;
+    box-shadow: 0 3px 10px fade-out($black, .7);
 }
 
 .bp-modal-header {
     display: flex;
-    font-size: 15px;
     font-weight: bold;
+    font-size: 15px;
 }
 
 .bp-modal-title {
     display: inline-block;
     flex: 1;
     overflow: hidden;
-    overflow-wrap: break-word;
     word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .bp-modal-content {
@@ -436,40 +436,40 @@
 }
 
 .bp-modal-close-button {
-    background: none;
-    border: 0;
     color: $downtown-grey;
-    cursor: pointer;
-    font-size: 11px;
     font-weight: bold;
+    font-size: 11px;
+    background: none;
+    border: 0;
     outline: 0;
+    cursor: pointer;
 }
 
 .bp-modal-backdrop {
-    background: $white;
-    bottom: 0;
-    filter: alpha(opacity=75);
-    left: 0;
-    opacity: .75;
     position: fixed;
-    right: 0;
     top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: -1; // .modal creates a new stacking context. Let's just make sure that backdrop is below dialog.
+    background: $white;
+    opacity: .75;
+    filter: alpha(opacity=75);
 }
 
 .bp-modal-actions {
-    align-items: center;
     display: flex;
+    align-items: center;
     justify-content: flex-end;
     text-align: right;
 }
 
 .bp-modal-container {
-    bottom: 0;
-    display: flex;
-    left: 0;
     position: fixed;
-    right: 0;
     top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 89;
+    display: flex;
 }
diff --git a/src/lib/_common.scss b/src/lib/_common.scss
index 85affa861..c876ae049 100644
--- a/src/lib/_common.scss
+++ b/src/lib/_common.scss
@@ -16,17 +16,17 @@ $header-height: 48px;
 }
 
 .bp-container {
-    border: 0 none;
-    font-size: 13px;
+    position: relative;
+    width: 100%;
+    min-width: 300px;
     height: 100%;
     margin: 0;
-    min-width: 300px;
-    overflow: hidden;
     padding: 0;
-    position: relative;
+    overflow: hidden;
+    font-size: 13px;
+    border: 0 none;
     // disables non-standard gestures such as double-tap to zoom
     touch-action: manipulation;
-    width: 100%;
 
     a {
         color: $seesee;
@@ -40,13 +40,13 @@ $header-height: 48px;
 }
 
 .bp-header {
-    align-items: center;
-    background-color: $white;
-    border-bottom: 1px solid $seesee;
     display: flex;
-    height: $header-height;
+    align-items: center;
     justify-content: space-between;
+    height: $header-height;
     padding: 0 20px;
+    background-color: $white;
+    border-bottom: 1px solid $seesee;
 
     .bp-custom-logo {
         max-height: 30px;
@@ -62,8 +62,8 @@ $header-height: 48px;
         padding: 0 10px;
 
         svg {
-            fill: lighten($better-black, 15%);
             vertical-align: middle;
+            fill: lighten($better-black, 15%);
         }
 
         &:hover {
@@ -118,27 +118,27 @@ $header-height: 48px;
 }
 
 .bp {
-    background-color: $ffive;
-    border: 0 none;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
     display: flex;
     flex: 1 1 100%;
-    left: 0;
     margin: 0;
+    padding: 0;
+    background-color: $ffive;
+    border: 0 none;
     outline: none;
     -webkit-overflow-scrolling: touch;
-    padding: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
 
     // Pseudo fullscreen for iOS Safari which doesn't support the fullscreen API
     &.bp-fullscreen-unsupported {
-        bottom: 0;
-        left: 0;
         position: fixed;
-        right: 0;
         top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
     }
 
     &.bp-dark {
@@ -146,20 +146,20 @@ $header-height: 48px;
     }
 
     .bp-content {
-        align-items: center;
+        position: absolute;
+        top: 0;
+        right: 0;
         bottom: 0;
+        left: 0;
         display: flex;
         flex: 1 1 auto;
-        left: 0;
+        align-items: center;
         outline: none;
-        position: absolute;
-        right: 0;
-        top: 0;
     }
 
     .bp-content.bp-is-fullscreen {
-        background-color: inherit; // Safari needs some reminder of what to do for flex items in a flex container when in fullscreen
         width: 100%;
+        background-color: inherit; // Safari needs some reminder of what to do for flex items in a flex container when in fullscreen
     }
 
     .bp-is-scrollable:focus {
@@ -168,9 +168,9 @@ $header-height: 48px;
 }
 
 .accessibility-hidden {
-    left: -9999px;
     position: absolute;
     top: auto; // Some browsers ignore left without a top
+    left: -9999px;
 }
 
 .bp-no-user-highlight {
@@ -194,8 +194,8 @@ $header-height: 48px;
 }
 
 .bp-overlay-wrapper {
-    display: inherit;
     position: relative;
+    display: inherit;
 
     .bp-overlay {
         margin-top: 5px;
@@ -203,19 +203,19 @@ $header-height: 48px;
 
     &.bp-is-visible {
         .bp-overlay {
-            opacity: 1;
-            pointer-events: all;
             transform: rotateY(0deg) rotateX(0deg);
-            transition-delay: 0s;
             visibility: visible;
+            opacity: 1;
+            transition-delay: 0s;
+            pointer-events: all;
         }
     }
 }
 
 //---------- Override popup related CSS from _boxui.scss ----------//
 .bp-modal-dialog {
-    padding: 20px;
     width: 380px;
+    padding: 20px;
 
     // Prevents modal from becoming taller when crawler is swapped with print checkmark
     .bp-print-check {
@@ -224,27 +224,27 @@ $header-height: 48px;
 
     // Fix crawler appearance
     .bp-crawler {
-        font-size: 0;
+        width: 10px;
         height: 16px;
         margin: 0 auto;
+        font-size: 0;
         white-space: nowrap;
-        width: 10px;
     }
 }
 
 .bp-modal-header {
     display: block;
     float: right;
-    height: 0;
     width: 100%;
+    height: 0;
 }
 
 .bp-modal-content {
     text-align: center;
 
     .bp-modal-message {
-        color: $fours;
         margin: 10px 0 20px;
+        color: $fours;
     }
 }
 
@@ -252,10 +252,10 @@ $header-height: 48px;
     float: right;
 
     svg {
-        fill: $downtown-grey;
+        width: 24px;
         height: 24px;
         pointer-events: none;
-        width: 24px;
+        fill: $downtown-grey;
     }
 }
 
@@ -265,10 +265,10 @@ $header-height: 48px;
 }
 
 .bp-modal-backdrop {
-    background-color: $black;
-    height: 100%;
     position: fixed;
     width: 100%;
+    height: 100%;
+    background-color: $black;
 }
 
 .bp-popup-btn {
@@ -276,14 +276,14 @@ $header-height: 48px;
 }
 
 .bp-popup-modal {
-    left: 0;
-    margin: 0 auto;
     position: absolute;
-    right: 0;
     top: 100px;
+    right: 0;
+    left: 0;
 
     // z-index as the base modal
     z-index: 160; // follows bp-modal from boxui
+    margin: 0 auto;
 }
 
 .bp-container .bp-btn-primary {
diff --git a/src/lib/_loading.scss b/src/lib/_loading.scss
index 47544a20f..47d322090 100644
--- a/src/lib/_loading.scss
+++ b/src/lib/_loading.scss
@@ -11,13 +11,13 @@ $spinner-size: 15px;
     0%,
     80%,
     100% {
-        opacity: .5;
         transform: scaleY(1.2);
+        opacity: .5;
     }
 
     40% {
-        opacity: 1;
         transform: scaleY(1.6);
+        opacity: 1;
     }
 }
 
@@ -33,18 +33,18 @@ $spinner-size: 15px;
 }
 
 .bp-loading-wrapper {
-    animation-duration: 1s;
-    animation-iteration-count: 1;
-    animation-name: fadeIn;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
     transition: .25s opacity, .25s transform;
+    animation-name: fadeIn;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
 
     .bp-loaded & {
         display: none;
@@ -61,8 +61,8 @@ $spinner-size: 15px;
 }
 
 .bp-loading {
-    color: $twos;
     position: relative;
+    color: $twos;
     text-align: center;
 }
 
@@ -96,23 +96,23 @@ $spinner-size: 15px;
     text-align: center;
 
     div {
-        animation: box-crawler .66s infinite ease-in-out;
-        background-color: $box-blue;
-        border-radius: 4px;
         display: inline-block;
-        height: 10px;
         width: 2px;
+        height: 10px;
+        background-color: $box-blue;
+        border-radius: 4px;
+        animation: box-crawler .66s infinite ease-in-out;
     }
 
     div:nth-child(2) {
-        animation-delay: .1s;
         margin-left: 2px;
+        animation-delay: .1s;
     }
 
     div:last-child {
-        animation-delay: .2s;
         left: 8px;
         margin-left: 2px;
+        animation-delay: .2s;
     }
 }
 
@@ -129,13 +129,13 @@ $spinner-size: 15px;
     .bp-preload-spinner {
         @include spinner;
 
-        bottom: 0;
-        height: $spinner-size;
-        left: 0;
-        margin: auto;
         position: absolute;
-        right: 0;
         top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         width: $spinner-size;
+        height: $spinner-size;
+        margin: auto;
     }
 }
diff --git a/src/lib/_navigation.scss b/src/lib/_navigation.scss
index 49ad3280d..f28998d55 100644
--- a/src/lib/_navigation.scss
+++ b/src/lib/_navigation.scss
@@ -5,24 +5,24 @@ $navigationBtnWidth: 50px;
 }
 
 .bp-navigate {
-    background-repeat: no-repeat;
-    border: 0 none;
-    cursor: pointer;
+    position: absolute;
+    top: 50%;
     display: block;
+    width: $navigationBtnWidth;
     height: 64px;
     margin: 0;
-    opacity: 0;
     overflow: hidden;
-    pointer-events: all;
-    position: absolute;
+    white-space: nowrap;
     text-decoration: none;
-    top: 50%;
+    background-repeat: no-repeat;
+    border: 0 none;
     transform: translateY(-50%);
+    cursor: pointer;
+    opacity: 0;
 
     // Override default animations to only animate opacity since width animation to auto doesn't work
     transition: opacity .5s ease;
-    white-space: nowrap;
-    width: $navigationBtnWidth;
+    pointer-events: all;
 
     &:hover,
     &:focus {
@@ -31,14 +31,14 @@ $navigationBtnWidth: 50px;
 
     // Custom focus
     &:focus {
-        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
         height: 64px;
         outline: 1px solid $downtown-grey;
+        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
     }
 
     &:active {
-        box-shadow: none;
         outline: none;
+        box-shadow: none;
     }
 }
 
@@ -51,11 +51,11 @@ $navigationBtnWidth: 50px;
 }
 
 .bp-navigate-left {
-    border-radius: 0 2px 2px 0;
     left: 20px;
+    border-radius: 0 2px 2px 0;
 }
 
 .bp-navigate-right {
-    border-radius: 2px 0 0 2px;
     right: 20px;
+    border-radius: 2px 0 0 2px;
 }
diff --git a/src/lib/viewers/box3d/Box3D.scss b/src/lib/viewers/box3d/Box3D.scss
index f51f4907b..b5da4a6ca 100644
--- a/src/lib/viewers/box3d/Box3D.scss
+++ b/src/lib/viewers/box3d/Box3D.scss
@@ -1,32 +1,28 @@
 .bp-is-mobile {
     .bp-box3d .bp-controls {
-        /* stylelint-disable declaration-no-important */
-        opacity: 1 !important;
-        /* stylelint-enable declaration-no-important */
         z-index: 1;
+        opacity: 1 !important; // stylelint-disable-line declaration-no-important
     }
 }
 
 .bp-box3d {
-    border: 0 none;
+    position: absolute;
+    top: 0;
+    left: 0;
     display: flex;
+    width: 100%;
     height: 100%;
-    left: 0;
     margin: 0;
     padding: 0;
-    position: absolute;
-    top: 0;
-    -webkit-touch-callout: none;
+    border: 0 none;
     user-select: none;
-    width: 100%;
+    -webkit-touch-callout: none;
 
     // For VR mode
     &.vr-enabled {
         // Hide this NO MATTER WHAT
         .bp-controls {
-            /* stylelint-disable declaration-no-important */
-            opacity: 0 !important;
-            /* stylelint-enable declaration-no-important */
+            opacity: 0 !important; // stylelint-disable-line declaration-no-important
         }
     }
 }
@@ -47,22 +43,22 @@
 }
 
 .bp-box3d .bp-overlay-panel {
-    background: #fff;
-    border: 1px solid #caccd0;
+    position: absolute;
+    z-index: 2;
+    margin: auto;
     color: #484848;
-    font-size: 13px;
     font-weight: 400;
-    margin: auto;
+    font-size: 13px;
+    background: #fff;
+    border: 1px solid #caccd0;
     outline: 0;
-    position: absolute;
-    z-index: 2;
 }
 
 .bp-box3d .bp-overlay-panel span {
-    display: inline-block;
-    opacity: .7;
     position: relative;
     top: 5px;
+    display: inline-block;
+    opacity: .7;
 }
 
 .bp-box3d .bp-toggle-overlay .bp-menu {
@@ -71,11 +67,11 @@
 
 .bp-box3d li,
 .bp-box3d ul {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
 }
 
-.bp-box3d input[type="checkbox"] {
+.bp-box3d input[type='checkbox'] {
     opacity: 1;
 }
diff --git a/src/lib/viewers/box3d/model3d/Model3D.scss b/src/lib/viewers/box3d/model3d/Model3D.scss
index 7d7b676b6..d1eeed5ff 100644
--- a/src/lib/viewers/box3d/model3d/Model3D.scss
+++ b/src/lib/viewers/box3d/model3d/Model3D.scss
@@ -28,9 +28,9 @@ $arrow-top-bottom: 4px solid transparent;
 
         &::before,
         &::after {
-            content: "";
             display: table;
             line-height: 0;
+            content: '';
         }
 
         &::before {
@@ -40,19 +40,19 @@ $arrow-top-bottom: 4px solid transparent;
     }
 
     .bp-settings-panel-label {
-        color: $seventy-sixers;
         display: inline;
-        line-height: 1;
         margin: 4px;
+        color: $seventy-sixers;
+        line-height: 1;
         white-space: nowrap;
     }
 
     .bp-panel-btn {
-        border-radius: 5px;
-        cursor: pointer;
         height: 34px;
-        line-height: 34px;
         overflow: hidden;
+        line-height: 34px;
+        border-radius: 5px;
+        cursor: pointer;
     }
 
     .bp-toggle-overlay {
@@ -61,25 +61,25 @@ $arrow-top-bottom: 4px solid transparent;
         }
 
         .bp-btn {
+            width: 100%;
+            height: 34px;
+            padding: 5px 0 5px 10px;
             color: #808080;
             font-size: 13px;
-            height: 34px;
             letter-spacing: 0;
-            padding: 5px 0 5px 10px;
             text-align: left;
             text-transform: none;
-            width: 100%;
 
             &::after {
-                border-left: 3px solid transparent;
-                border-right: 3px solid transparent;
-                border-top: 3px solid #494949;
-                content: "";
-                height: 0;
                 position: absolute;
-                right: 11px;
                 top: 15px;
+                right: 11px;
                 width: 0;
+                height: 0;
+                border-top: 3px solid #494949;
+                border-right: 3px solid transparent;
+                border-left: 3px solid transparent;
+                content: '';
             }
         }
     }
@@ -91,20 +91,20 @@ $arrow-top-bottom: 4px solid transparent;
     }
 
     .box3d-settings-axis-widget {
+        display: inline;
+        padding-bottom: 10px;
         border: 1px solid #caccd0;
         border-bottom-width: 2px;
         border-radius: 2px;
-        display: inline;
-        padding-bottom: 10px;
 
         &.box3d-settings-axis-widget-x {
             border-bottom-color: #e33d55;
         }
 
         &.box3d-settings-axis-widget-y {
-            border-bottom-color: #26c281;
-            margin-left: 4px;
             margin-right: 4px;
+            margin-left: 4px;
+            border-bottom-color: #26c281;
         }
 
         &.box3d-settings-axis-widget-z {
@@ -120,21 +120,21 @@ $arrow-top-bottom: 4px solid transparent;
         }
 
         .box3d-setting-axis-rotate {
+            padding: 0 12px;
             color: $box-blue;
-            cursor: pointer;
             font-size: medium;
-            padding: 0 12px;
+            cursor: pointer;
         }
 
         .box3d-setting-axis-rotate-left::after,
         .box3d-setting-axis-rotate-right::after {
-            border-bottom: $arrow-top-bottom;
-            border-top: $arrow-top-bottom;
-            content: "";
-            height: 0;
             position: absolute;
             top: 7px;
             width: 0;
+            height: 0;
+            border-top: $arrow-top-bottom;
+            border-bottom: $arrow-top-bottom;
+            content: '';
         }
 
         .box3d-setting-axis-rotate-left::after {
@@ -172,10 +172,10 @@ $arrow-top-bottom: 4px solid transparent;
     }
 
     .box3d-animation-clip {
-        cursor: pointer;
         display: block;
         margin-top: 6px;
         white-space: nowrap;
+        cursor: pointer;
 
         .box3d-animation-clip-icon {
             display: inline-block;
diff --git a/src/lib/viewers/box3d/video360/Video360.scss b/src/lib/viewers/box3d/video360/Video360.scss
index 4558a7141..e3e9842d9 100644
--- a/src/lib/viewers/box3d/video360/Video360.scss
+++ b/src/lib/viewers/box3d/video360/Video360.scss
@@ -7,8 +7,8 @@
 .bp-is-mobile .bp-video-360 .bp-media-container {
     .bp-media-controls-wrapper {
         /* stylelint-disable declaration-no-important */
-        opacity: 1 !important;
         visibility: visible !important;
+        opacity: 1 !important;
         /* stylelint-enable declaration-no-important */
     }
 }
diff --git a/src/lib/viewers/doc/DocFindBar.scss b/src/lib/viewers/doc/DocFindBar.scss
index a248885b8..8d03c75d3 100644
--- a/src/lib/viewers/doc/DocFindBar.scss
+++ b/src/lib/viewers/doc/DocFindBar.scss
@@ -1,17 +1,17 @@
-$medium-aquamarine:   #5aeda8 !default;
-$moon-yellow:         #ffba1a !default;
-$blue:                #00f !default;
+$medium-aquamarine: #5aeda8 !default;
+$moon-yellow: #ffba1a !default;
+$blue: #00f !default;
 
 .bp-find-bar {
+    position: absolute;
+    top: 0;
+    right: 17px; // Prevents overlap with scroll-bar
+    padding: 6px;
+    font-size: 12px;
+    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background: $white;
     border: 1px solid fade-out($black, .95);
     box-shadow: 0 1px 0 fade-out($white, .95) fade-out($black, .95);
-    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 12px;
-    padding: 6px;
-    position: absolute;
-    right: 17px; // Prevents overlap with scroll-bar
-    top: 0;
 
     // Removes "clear field" x at the end of input fields in IE10+ on Windows 8+
     ::-ms-clear {
@@ -19,18 +19,18 @@ $blue:                #00f !default;
     }
 
     .bp-doc-find-field {
-        border: 1px solid fade-out($black, .95);
-        border-radius: 2px 0 0 2px;
-        box-shadow: 0 1px 0 fade-out($white, .95) fade-out($black, .95);
-        color: $better-black;
+        width: 200px;
         height: 34px;
+        padding: 6px 6px 6px 25px;
+        color: $better-black;
         line-height: 20px;
+        border: 1px solid fade-out($black, .95);
+        border-radius: 2px 0 0 2px;
         outline-style: none;
-        padding: 6px 6px 6px 25px;
+        box-shadow: 0 1px 0 fade-out($white, .95) fade-out($black, .95);
+        transition-timing-function: ease;
         transition-duration: 150ms;
         transition-property: background-color, border-color, box-shadow;
-        transition-timing-function: ease;
-        width: 200px;
 
         &:focus,
         &:hover {
@@ -39,15 +39,15 @@ $blue:                #00f !default;
     }
 
     .bp-doc-find-results-count {
-        color: fade-out($better-black, .75);
-        cursor: default;
-        line-height: 1;
-        margin: 0;
-        padding: 0;
         position: absolute;
+        top: 37%;
         right: 120px;
+        margin: 0;
+        padding: 0;
+        color: fade-out($better-black, .75);
+        line-height: 1;
         text-align: right;
-        top: 37%;
+        cursor: default;
         user-select: none;
     }
 
@@ -55,14 +55,14 @@ $blue:                #00f !default;
     .bp-doc-find-prev,
     .bp-doc-find-next,
     .bp-doc-find-close {
-        background: none;
-        border: 1px solid $off-white;
         display: inline-block;
+        width: 34px;
         height: 34px;
-        line-height: 1;
         margin-top: -1px;
+        line-height: 1;
         vertical-align: middle;
-        width: 34px;
+        background: none;
+        border: 1px solid $off-white;
 
         .icon {
             fill: fade-out($better-black, .25);
@@ -70,19 +70,19 @@ $blue:                #00f !default;
     }
 
     .bp-doc-find-search {
-        border: 0;
+        position: absolute;
+        top: 15%;
         left: 5px;
-        line-height: 1;
         margin: 0;
         padding: 6px;
-        position: absolute;
+        line-height: 1;
         text-align: left;
-        top: 15%;
+        border: 0;
     }
 
     .bp-doc-find-close {
-        border: 0;
         padding: 6px;
+        border: 0;
 
         &:hover .icon {
             fill: $better-black;
diff --git a/src/lib/viewers/doc/Document.scss b/src/lib/viewers/doc/Document.scss
index 4f73b1389..780ae41d3 100644
--- a/src/lib/viewers/doc/Document.scss
+++ b/src/lib/viewers/doc/Document.scss
@@ -8,14 +8,14 @@
 
 // Used for showing preload, aka Instant Preview
 .bp-document-preload-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
-    opacity: 1;
     overflow-y: scroll;
-    position: absolute;
-    right: 0;
-    top: 0;
+    opacity: 1;
     transition: opacity .5s;
 
     &.bp-is-invisible {
@@ -36,19 +36,19 @@
 
     // Position preload content as if they were blank loading pages
     .bp-preload-content {
-        background-color: $white;
+        position: relative;
         display: block;
         margin: 15px auto 30px;
         padding-left: 1px; // Slight padding to help image text align with real text
-        position: relative;
+        background-color: $white;
 
         &.bp-preload-overlay {
-            background-color: rgba(255, 255, 255, .4);
-            bottom: 0;
-            left: 0;
             position: absolute;
-            right: 0;
             top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-color: rgba(255, 255, 255, .4);
         }
     }
 }
diff --git a/src/lib/viewers/doc/Presentation.scss b/src/lib/viewers/doc/Presentation.scss
index 7c12212d1..30f030477 100644
--- a/src/lib/viewers/doc/Presentation.scss
+++ b/src/lib/viewers/doc/Presentation.scss
@@ -6,12 +6,12 @@
     overflow: hidden;
 
     .pdfViewer .page {
+        position: absolute;
+        top: 0;
+        right: 0;
         bottom: 0;
         left: 0;
         margin: auto;
-        position: absolute;
-        right: 0;
-        top: 0;
     }
 
     &.overflow-x {
@@ -29,12 +29,12 @@
 
 // Used for showing preload, aka Instant Preview
 .bp-presentation-preload-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
     transition: opacity .5s;
 
     &.bp-is-invisible {
@@ -55,14 +55,14 @@
 
     // Absolutely center preload content
     .bp-preload-content {
-        background-color: $white;
+        position: absolute;
+        top: 0;
+        right: 0;
         bottom: 0;
-        display: block;
         left: 1px; // Slight padding to help image text align with real text
+        display: block;
         margin: auto;
-        position: absolute;
-        right: 0;
-        top: 0;
+        background-color: $white;
 
         &.bp-preload-overlay {
             background-color: rgba(255, 255, 255, .4);
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
index ac85847a7..558c6233c 100644
--- a/src/lib/viewers/doc/_docBase.scss
+++ b/src/lib/viewers/doc/_docBase.scss
@@ -16,14 +16,14 @@ $thumbnail-sidebar-width: 226px;
     }
 
     .bp-thumbnails-container {
-        border-right: solid 1px $seesee;
+        position: absolute;
+        top: 0;
         bottom: 0;
+        left: 0;
         display: none;
         flex: 0 0 auto;
-        left: 0;
-        position: absolute;
-        top: 0;
         width: $thumbnail-sidebar-width;
+        border-right: solid 1px $seesee;
 
         &:focus {
             outline: none;
@@ -31,46 +31,46 @@ $thumbnail-sidebar-width: 226px;
     }
 
     .bp-thumbnail {
+        position: relative;
         display: flex;
         flex: 1 0 auto;
         margin-right: 25px;
         padding: 0;
-        position: relative;
     }
 
     .bp-thumbnail-page-number {
-        color: $twos;
         flex: 0 0 34px;
+        width: 34px;
+        margin: 4px 6px 0 0;
+        color: $twos;
         font-size: 11px;
         line-height: 16px;
-        margin: 4px 6px 0 0;
-        pointer-events: none;
         text-align: right;
-        width: 34px;
+        pointer-events: none;
     }
 
     .bp-thumbnail-nav {
+        flex: 1 0 154px;
+        padding: 0;
+        overflow: hidden;
         background-color: $d-eight;
         border: $thumbnail-border-radius solid $ffive;
         border-radius: $thumbnail-border-radius;
-        cursor: pointer;
-        flex: 1 0 154px;
         outline: none;
-        overflow: hidden;
-        padding: 0;
+        cursor: pointer;
     }
 
     .bp-thumbnail:not(.bp-thumbnail-is-selected) {
         .bp-thumbnail-nav:focus,
         .bp-thumbnail-nav:hover {
-            border: 1px solid $seesee;
             margin: 2px;
+            border: 1px solid $seesee;
         }
     }
 
     .bp-thumbnail-image {
-        background-position: center;
         background-repeat: no-repeat;
+        background-position: center;
         background-size: contain; // Needed for the case of document with portrait and landscape orientations
         pointer-events: none;
     }
@@ -183,19 +183,19 @@ $thumbnail-sidebar-width: 226px;
 }
 
 .bp-doc {
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
-    height: 100%;
     left: 0;
-    letter-spacing: normal; // Reset Box UI
+    width: 100%;
+    height: 100%;
     margin: 0;
     overflow: hidden;
-    position: absolute;
-    right: 0;
+    letter-spacing: normal; // Reset Box UI
+    user-select: none;
     // Removes canvas flickering on tap for iOS Safari
     -webkit-tap-highlight-color: transparent;
-    top: 0;
-    user-select: none;
-    width: 100%;
 
     // Hides black canvas during rendering
     [hidden] {
@@ -215,8 +215,7 @@ $thumbnail-sidebar-width: 226px;
 
     //---------- Override CSS from generic PDFJS viewer build ----------//
     .pdfViewer .page {
-        border: 0;
-        border-image: none;
+        position: relative;
         /* stylelint-disable declaration-no-important */
         box-sizing: content-box !important;
         /* stylelint-enable declaration-no-important */
@@ -224,12 +223,13 @@ $thumbnail-sidebar-width: 226px;
         // We use padding instead of margin to push down since we want to
         // include this padding when PDF.js jumps to pages
         padding: 15px 0;
-        position: relative;
+        border: 0;
+        border-image: none;
 
         // Override loading icon styles from pdf.js - we use a CSS spinner absolutely centered
         .loadingIcon {
-            background: none;
             margin: auto;
+            background: none;
         }
 
         // Fixes annotation icon broken src
@@ -248,8 +248,8 @@ $thumbnail-sidebar-width: 226px;
     }
 
     .textLayer {
-        bottom: auto;
         top: 15px; // Match 15px padding top on page
+        bottom: auto;
 
         // Only allow text divs to be selected
         > div {
diff --git a/src/lib/viewers/error/PreviewError.scss b/src/lib/viewers/error/PreviewError.scss
index b32ed62c7..9f651ee67 100644
--- a/src/lib/viewers/error/PreviewError.scss
+++ b/src/lib/viewers/error/PreviewError.scss
@@ -1,11 +1,11 @@
 @import '../../boxuiVariables';
 
 .bp-error {
+    width: 100%; // IE11 flex width bug - https://caniuse.com/#search=flex
+    height: 247px; // Error icon + text + optional download button
     color: $twos;
     font-size: 14px;
-    height: 247px; // Error icon + text + optional download button
     text-align: center;
-    width: 100%; // IE11 flex width bug - https://caniuse.com/#search=flex
 
     .bp-error-text {
         padding: 0 80px;
diff --git a/src/lib/viewers/image/Image.scss b/src/lib/viewers/image/Image.scss
index 2696dda74..fa7134845 100644
--- a/src/lib/viewers/image/Image.scss
+++ b/src/lib/viewers/image/Image.scss
@@ -1,23 +1,23 @@
 .bp-image {
-    border: 0 none;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
-    height: 100%;
     left: 0;
+    width: 100%;
+    height: 100%;
     margin: 0;
-    overflow: auto;
     padding: 0;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 0;
+    overflow: auto;
     white-space: nowrap;
-    width: 100%;
+    text-align: center;
+    border: 0 none;
 
     &::before {
-        content: "";
         display: inline-block;
         height: 100%;
         vertical-align: middle;
+        content: '';
     }
 
     img {
@@ -37,11 +37,11 @@
 }
 
 .bp-images-wrapper {
+    margin: 0 auto;
+    padding: 0;
     border: 0 none;
     cursor: pointer; /* cursor for IE 11 */
     cursor: zoom-in;
-    margin: 0 auto;
-    padding: 0;
 }
 
 .bp-images img {
diff --git a/src/lib/viewers/image/MultiImage.scss b/src/lib/viewers/image/MultiImage.scss
index 776878561..71fbb1b07 100644
--- a/src/lib/viewers/image/MultiImage.scss
+++ b/src/lib/viewers/image/MultiImage.scss
@@ -1,18 +1,18 @@
 .bp-images-wrapper {
-    border: 0 none;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
-    cursor: default; // regular cursor when not hovering over images
-    height: 100%;
     left: 0;
+    width: 100%;
+    height: 100%;
     margin: 0 auto;
-    overflow: auto;
     padding: 0;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 0;
+    overflow: auto;
     white-space: nowrap;
-    width: 100%;
+    text-align: center;
+    border: 0 none;
+    cursor: default; // regular cursor when not hovering over images
 }
 
 .bp-images.pannable {
@@ -31,13 +31,13 @@
 }
 
 .bp-images {
-    border: 0 none;
     margin: 0 auto;
     padding: 0;
+    border: 0 none;
 }
 
 .bp-images img {
     display: block;
-    margin-bottom: 10px;
     width: 100%;
+    margin-bottom: 10px;
 }
diff --git a/src/lib/viewers/media/Dash.scss b/src/lib/viewers/media/Dash.scss
index d43de8dbb..e0fd08ce1 100644
--- a/src/lib/viewers/media/Dash.scss
+++ b/src/lib/viewers/media/Dash.scss
@@ -2,13 +2,13 @@
 
 .bp-media-dash {
     video {
-        cursor: none;
         display: block;
-        margin-left: auto;
-        margin-right: auto;
-        max-height: 100%;
-        max-width: 100%;
         width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        cursor: none;
     }
 
     .bp-media-controls-label,
@@ -28,14 +28,14 @@
 }
 
 .bp-media-filmstrip-container {
-    border: 1px solid $sunset-grey;
+    position: absolute;
     bottom: 60px;
+    left: 0;
     display: none;
+    width: 160px;
     height: 110px; // 90px filmstrip frame height + 20px for timecode
-    left: 0;
     overflow: hidden;
-    position: absolute;
-    width: 160px;
+    border: 1px solid $sunset-grey;
 }
 
 .bp-media-filmstrip {
@@ -43,30 +43,30 @@
 }
 
 .bp-media-filmstrip-timecode {
-    background-color: $twos;
+    position: absolute;
     bottom: 0;
+    z-index: 1;
+    width: 100%;
     color: $white;
     font-size: 13px;
     line-height: 18px; // 110px container height - 2px border - 90px filmstrip frame height
-    position: absolute;
     text-align: center;
-    width: 100%;
-    z-index: 1;
+    background-color: $twos;
 }
 
 .bp-media-crawler-wrapper {
-    left: 50%;
-    margin: -15px 0 0 -5px;
     position: relative;
     top: 50%;
-    width: 10px;
+    left: 50%;
     z-index: 1;
+    width: 10px;
+    margin: -15px 0 0 -5px;
 }
 
 .bp-media-dash-stats {
-    color: $white;
-    font-size: 24px;
     position: absolute;
-    right: 20px;
     top: 20px;
+    right: 20px;
+    color: $white;
+    font-size: 24px;
 }
diff --git a/src/lib/viewers/media/MP3.scss b/src/lib/viewers/media/MP3.scss
index 6c7c3da42..1ef99d535 100644
--- a/src/lib/viewers/media/MP3.scss
+++ b/src/lib/viewers/media/MP3.scss
@@ -11,11 +11,11 @@
 
 .bp-media-mp3 {
     .bp-media-container {
-        height: 60px; // same as controls
+        width: 100%;
         max-width: 360px;
-        outline: 0 none;
+        height: 60px; // same as controls
         overflow: visible; // to show settings popup
-        width: 100%;
+        outline: 0 none;
     }
 
     .bp-media-fullscreen-icon {
@@ -29,8 +29,8 @@
 
     .bp-media-controls-wrapper {
         background: $black;
-        opacity: 1;
         visibility: visible;
+        opacity: 1;
     }
 
     .bp-media-settings-item-quality,
diff --git a/src/lib/viewers/media/MP4.scss b/src/lib/viewers/media/MP4.scss
index 77a76d569..fe397e3b8 100644
--- a/src/lib/viewers/media/MP4.scss
+++ b/src/lib/viewers/media/MP4.scss
@@ -2,13 +2,13 @@
 
 .bp-media-mp4 {
     video {
-        cursor: none;
         display: block;
-        margin-left: auto;
-        margin-right: auto;
-        max-height: 100%;
-        max-width: 100%;
         width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        cursor: none;
     }
 
     .bp-media-controls-is-visible {
diff --git a/src/lib/viewers/media/MediaControls.scss b/src/lib/viewers/media/MediaControls.scss
index 7c4beedee..3df1467bc 100644
--- a/src/lib/viewers/media/MediaControls.scss
+++ b/src/lib/viewers/media/MediaControls.scss
@@ -4,23 +4,23 @@
 .bp-media-controls-is-visible .bp-media-controls-wrapper,
 .bp-media-controls-wrapper:active,
 .bp-media-controls-wrapper:focus {
-    opacity: 1;
     visibility: visible;
+    opacity: 1;
 }
 
 .bp-media-controls-wrapper {
-    background-image: linear-gradient(to top, rgba($black, .6) 0%, rgba($black, 0) 100%);
+    position: absolute;
+    right: 0;
     bottom: 0;
-    height: 60px;
     left: 0;
+    width: 100%;
+    height: 60px;
     margin: auto;
-    opacity: 0;
     overflow: hidden;
-    position: absolute;
-    right: 0;
-    transition: visibility .3s, opacity .3s;
+    background-image: linear-gradient(to top, rgba($black, .6) 0%, rgba($black, 0) 100%);
     visibility: hidden;
-    width: 100%;
+    opacity: 0;
+    transition: visibility .3s, opacity .3s;
 }
 
 .bp-media-time-scrubber-container {
@@ -29,10 +29,10 @@
 
 .bp-media-volume-scrubber-container-wrapper {
     display: inline-block;
+    width: 0;
     height: 40px;
     overflow: hidden;
     transition: width .2s ease-in-out;
-    width: 0;
 }
 
 .bp-media-controls-volume-scrubber-expand {
@@ -40,12 +40,12 @@
 }
 
 .bp-media-volume-scrubber-container {
+    position: relative;
     display: inline-block;
+    width: 96px;
     height: 40px;
-    outline: 0 none;
     padding: 10px 8px 0; // Need to pad left and right so that scrubber handle doesn't spill out of parent container
-    position: relative;
-    width: 96px;
+    outline: 0 none;
 
     .bp-media-scrubber-handle {
         transform: scale(1);
@@ -70,21 +70,21 @@
 
 .bp-media-controls-label,
 .bp-media-controls-btn {
-    background-color: transparent;
-    border: none;
-    color: $white;
-    cursor: pointer;
     display: inline-block;
-    font-size: 12px;
-    font-weight: 400;
+    width: 45px;
     height: 40px;
     margin: 0;
-    opacity: .7;
-    outline: 0 none;
     padding: 0;
+    color: $white;
+    font-weight: 400;
+    font-size: 12px;
     text-align: center;
     vertical-align: top;
-    width: 45px;
+    background-color: transparent;
+    border: none;
+    outline: 0 none;
+    cursor: pointer;
+    opacity: .7;
 
     &:hover {
         opacity: 1;
@@ -92,11 +92,11 @@
 }
 
 .bp-media-volume-icon {
+    position: relative;
     display: inline-block;
+    width: 36px;
     height: 40px;
-    position: relative;
     vertical-align: top;
-    width: 36px;
 
     .bp-is-mobile & {
         display: none;
@@ -104,12 +104,12 @@
 }
 
 .bp-media-controls-label {
-    cursor: default;
     display: inline-block;
-    line-height: 40px;
+    width: auto;
     margin: 0 4px;
+    line-height: 40px;
     vertical-align: top;
-    width: auto;
+    cursor: default;
 }
 
 .bp-media-controls-timecode {
@@ -118,9 +118,9 @@
 
 .bp-media-controls-volume-control {
     display: inline-block;
+    width: 45px;
     height: 40px;
     vertical-align: top;
-    width: 45px;
 
     .bp-is-mobile & {
         display: none;
@@ -163,35 +163,35 @@
 }
 
 .bp-media-controls-cc-icon-text {
-    background-color: rgba($black, .3); // Anything less than .3 looks too transparent on IE/Edge
-    border-radius: 4px;
-    color: $white;
     display: inline-block;
-    font-size: 12px;
-    font-weight: 600;
+    width: 24px;
     height: 24px;
-    letter-spacing: .1em;
-    line-height: 24px;
     padding: 0 0 0 1px; // Padding left 1px because text isn't perfectly centered on Safari/Firefox even with text-align:center. Looks fine with extra-padding on Chrome/IE/Edge
-    width: 24px;
+    color: $white;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 24px;
+    letter-spacing: .1em;
+    background-color: rgba($black, .3); // Anything less than .3 looks too transparent on IE/Edge
+    border-radius: 4px;
 
     .bp-media-settings-subtitles-on & {
-        background-color: $box-blue;
         color: $white;
+        background-color: $box-blue;
     }
 }
 
 .bp-media-controls-hd {
-    background-color: $box-blue;
-    border-radius: 3px;
+    position: absolute;
+    left: 22px;
     display: none;
-    font-size: 8px;
+    padding: 2px 2px 2px 3px;
     font-weight: 600;
-    left: 22px;
-    letter-spacing: .1em;
+    font-size: 8px;
     line-height: 8px;
-    padding: 2px 2px 2px 3px;
-    position: absolute;
+    letter-spacing: .1em;
+    background-color: $box-blue;
+    border-radius: 3px;
 
     .bp-media-controls-is-hd & {
         display: inline;
@@ -218,9 +218,9 @@
 .bp-media-volume-icon-low,
 .bp-media-volume-icon-medium,
 .bp-media-volume-icon-high {
-    display: none;
-    left: 6px;
     position: absolute;
+    left: 6px;
+    display: none;
 }
 
 .bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,
diff --git a/src/lib/viewers/media/Scrubber.scss b/src/lib/viewers/media/Scrubber.scss
index d308db5eb..567e2e01e 100644
--- a/src/lib/viewers/media/Scrubber.scss
+++ b/src/lib/viewers/media/Scrubber.scss
@@ -1,31 +1,31 @@
 .bp-media-scrubber-container {
-    height: 16px;
     position: relative;
     width: 100%;
+    height: 16px;
 }
 
 .bp-media-scrubber-wrapper {
-    height: 100%;
-    left: 50%;
     position: absolute;
     top: 0;
+    left: 50%;
     width: 100%;
+    height: 100%;
 }
 
 .bp-media-scrubber {
-    height: 3px;
-    left: -50%;
     position: absolute;
     top: 7px; /* Wrapper is 16px high. Bar is 3px high leaving 13px. 7px for top buffer and 6px for bottom. */
+    left: -50%;
     width: 100%;
+    height: 3px;
 }
 
 .bp-media-scrubber-converted,
 .bp-media-scrubber-buffered,
 .bp-media-scrubber-played,
 .bp-media-scrubber-underlay {
-    height: 3px;
     position: absolute;
+    height: 3px;
     transition: transform .1s ease-in-out; /* timing is double of handle timing since bar scales to 2 instead of 1 */
 }
 
@@ -35,9 +35,9 @@
 }
 
 .bp-media-scrubber-buffered {
-    background-color: $white;
-    height: 3px;
     position: absolute;
+    height: 3px;
+    background-color: $white;
 }
 
 .bp-media-scrubber-played {
@@ -46,21 +46,21 @@
 }
 
 .bp-media-scrubber-underlay {
-    cursor: not-allowed;
     width: 100%;
+    cursor: not-allowed;
 }
 
 .bp-media-scrubber-handle {
-    background-color: $box-blue;
-    border-radius: 6px;
-    cursor: pointer;
-    height: 12px;
-    margin-left: -6px; // Half of the width, to account for the width of the handle
     position: absolute;
     top: -4.25px;
+    width: 12px;
+    height: 12px;
+    margin-left: -6px; // Half of the width, to account for the width of the handle
+    background-color: $box-blue;
+    border-radius: 6px;
     transform: scale(0);
+    cursor: pointer;
     transition: transform .05s ease-in-out; /* timing is half of bar timing since handle scales to 1 instead of 2 */
-    width: 12px;
 }
 
 .bp-media-scrubber-container:hover .bp-media-scrubber-handle,
diff --git a/src/lib/viewers/media/Settings.scss b/src/lib/viewers/media/Settings.scss
index 657757788..ed9df0b6f 100644
--- a/src/lib/viewers/media/Settings.scss
+++ b/src/lib/viewers/media/Settings.scss
@@ -3,32 +3,32 @@ $item-height: 26px;
 $item-hover-color: #f6fafd;
 
 .bp-media-settings {
-    background-color: $white;
-    border: 1px solid $sf-fog;
-    border-radius: 2px;
+    position: absolute;
+    right: 16px;
     bottom: 60px;
-    color: $fours;
     display: inline-block;
-    font-size: 10px;
-    line-height: 0; // override line-height (only affects svgs in the menu, since nothing else is inline/inline-block)
-    max-height: 210px;
     max-width: 400px;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
+    max-height: 210px;
+    padding: $padding;
     overflow-x: hidden;
     overflow-y: auto; // So scrollbar doesn't show on hover in IE/Edge
-    padding: $padding;
-    position: absolute;
-    right: 16px;
-    transition: width .2s, height .2s;
+    color: $fours;
+    font-size: 10px;
+    line-height: 0; // override line-height (only affects svgs in the menu, since nothing else is inline/inline-block)
+    background-color: $white;
+    border: 1px solid $sf-fog;
+    border-radius: 2px;
     visibility: hidden;
+    transition: width .2s, height .2s;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
 
     .bp-media-settings-is-open & {
         visibility: visible;
     }
 
     .bp-media-mp3 & {
-        bottom: 65px;
         right: 0;
+        bottom: 65px;
     }
 }
 
@@ -73,13 +73,13 @@ $item-hover-color: #f6fafd;
 
 .bp-media-settings-item,
 .bp-media-settings-sub-item {
-    cursor: pointer;
     display: table-row;
     height: $item-height;
-    outline: 0 none; // will be overridden by our own
-    overflow: hidden;
     padding: $padding / 2;
+    overflow: hidden;
     white-space: nowrap;
+    outline: 0 none; // will be overridden by our own
+    cursor: pointer;
 
     &:hover {
         background-color: $item-hover-color;
@@ -157,8 +157,8 @@ $item-hover-color: #f6fafd;
 
 .bp-media-settings-label {
     color: $downtown-grey;
-    font-size: 11px;
     font-weight: 400;
+    font-size: 11px;
     text-transform: uppercase;
 
     .bp-media-settings-item & {
@@ -171,9 +171,9 @@ $item-hover-color: #f6fafd;
 }
 
 .bp-media-settings-value {
+    padding-left: 10px;
     color: $sunset-grey;
     font-size: 12px;
-    padding-left: 10px;
     text-align: left;
 
     .bp-media-settings-selected & {
@@ -186,8 +186,8 @@ $item-hover-color: #f6fafd;
     vertical-align: middle;
 
     svg {
-        height: 18px;
         width: 18px;
+        height: 18px;
     }
 }
 
@@ -197,9 +197,9 @@ $item-hover-color: #f6fafd;
     vertical-align: middle;
 
     svg {
+        width: 16px;
         height: 16px;
         visibility: hidden;
-        width: 16px;
     }
 
     .bp-media-settings-selected & svg {
diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss
index 5625ad2ed..636fb9ba9 100644
--- a/src/lib/viewers/media/_mediaBase.scss
+++ b/src/lib/viewers/media/_mediaBase.scss
@@ -2,21 +2,21 @@
 @import './MediaControls';
 
 .bp-media {
-    align-items: center;
-    border: 0 none;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    align-items: center;
     justify-content: center;
-    left: 0;
+    width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
+    border: 0 none;
     visibility: hidden;
-    width: 100%;
 
     &.bp-is-visible {
         visibility: visible;
@@ -24,28 +24,28 @@
 }
 
 .bp-media-container {
+    position: relative;
     min-width: 300px; // Prevent media controls from overflowing on small screens
     outline: 0 none;
-    position: relative;
-    user-select: none;  // Prevents copy paste dialog from appearing on mobile
+    user-select: none; // Prevents copy paste dialog from appearing on mobile
 }
 
 .bp-media-play-button {
-    background: rgba($black, .5);
-    border: 4px solid $white;
-    border-radius: 40px;
-    color: $white;
-    cursor: pointer;
-    font-size: 40px;
-    height: 80px;
+    position: absolute;
+    top: 50%;
     left: 50%;
+    width: 80px;
+    height: 80px;
     padding-top: 12px;
-    position: absolute;
+    color: $white;
+    font-size: 40px;
     text-align: center;
-    top: 50%;
+    background: rgba($black, .5);
+    border: 4px solid $white;
+    border-radius: 40px;
     transform: translate(-50%, -50%);
+    cursor: pointer;
     transition: all .2s;
-    width: 80px;
 
     &:hover {
         background: $black;
@@ -81,9 +81,9 @@
     &,
     &.bp-loaded {
         .bp-is-buffering .bp-loading-wrapper {
+            display: flex;
             // Show loading indicator immediately
             animation-name: none;
-            display: flex;
 
             .bp-icon,
             .bp-loading-text,
diff --git a/src/lib/viewers/text/CSV.scss b/src/lib/viewers/text/CSV.scss
index 114b3feca..20cb98354 100644
--- a/src/lib/viewers/text/CSV.scss
+++ b/src/lib/viewers/text/CSV.scss
@@ -1,23 +1,23 @@
 @import '../../boxuiVariables';
 
 .bp-text-csv {
-    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
-    color: $black;
+    left: 0;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    align-items: center;
     justify-content: center;
-    left: 0;
+    height: 100%;
     margin: 0;
     overflow: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    user-select: none;
+    color: $black;
     white-space: pre;
-    word-break: normal;
     word-wrap: normal;
+    word-break: normal;
+    user-select: none;
 
     .bp-is-selectable & {
         user-select: auto;
@@ -32,20 +32,20 @@
     }
 
     .bp-text-csv-cell {
-        border-right: 1px solid $off-white;
         display: flex;
         flex-direction: column;
-        height: 100%;
         justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 .5em;
         overflow: auto;
+        border-right: 1px solid $off-white;
         -ms-overflow-style: -ms-autohiding-scrollbar;
-        padding: 0 .5em;
-        width: 100%;
     }
 
     ::-webkit-scrollbar {
-        height: 5px;
         width: 5px;
+        height: 5px;
     }
 
     ::-webkit-scrollbar-track {
diff --git a/src/lib/viewers/text/Text.scss b/src/lib/viewers/text/Text.scss
index 5b50b1be6..b68837233 100644
--- a/src/lib/viewers/text/Text.scss
+++ b/src/lib/viewers/text/Text.scss
@@ -1,18 +1,18 @@
 @import '../../boxuiVariables';
 
 .bp-text-plain {
-    background-color: $white;
+    position: absolute;
+    top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
     overflow: auto;
-    position: absolute;
-    right: 0;
-    text-align: left;
-    top: 0;
-    user-select: none;
     white-space: pre-wrap;
+    text-align: left;
     word-wrap: break-word;
+    background-color: $white;
+    user-select: none;
 
     .bp-is-selectable & {
         user-select: auto;
@@ -39,10 +39,9 @@
 }
 
 .bp-text-truncated {
-    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-
     // Pad bottom so controls dont overlap
     padding-bottom: 75px;
+    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     text-align: center;
 
     p {
@@ -52,10 +51,10 @@
 
 @media print {
     .bp-text-plain {
+        position: static;
         margin: 0;
-        overflow: visible;
         padding: 0;
-        position: static;
+        overflow: visible;
         word-wrap: break-word;
     }