css: Use SCSS nesting for `#registration`.

static/styles/portico/portico-signin.scss

@@ -727,107 +727,108 @@ button.login-social-button {
     width: auto;
     padding: 0;
     margin: 30px;
-}
 
-#registration section {
+    section {
         margin: 30px;
-}
+    }
 
-#registration .info-box {
+    .info-box {
         margin: 10px 0px 0px 20px;
-}
 
-#registration .info-box .organization-name {
+        .organization-name {
             max-width: 228px;
-}
+        }
+    }
 
-#registration .input-box {
+    .input-box {
         display: block;
         text-align: center;
         width: 330px;
         margin: 30px auto 10px;
         position: relative;
-}
 
-#registration .input-box.with-top-space {
+        &.with-top-space {
             margin-top: 50px;
-}
+        }
 
-#registration .input-box.full-width {
+        &.full-width {
             width: calc(100% - 20px);
-}
+        }
 
-#registration .input-box label {
+        label {
             position: absolute;
             margin: 0;
             top: 0;
             left: 2px;
-}
 
-#registration .input-box label.static {
+            &.static {
                 width: 100%;
                 text-align: left;
                 position: static !important;
                 margin-left: 2px;
-}
+            }
+        }
+    }
 
-#registration [for="realm_in_root_domain"] {
+    & [for="realm_in_root_domain"] {
         font-weight: normal !important;
-}
+    }
 
-#registration .register-button-box {
+    .register-button-box {
         text-align: center;
-}
+    }
 
-#registration .register-button {
+    .register-button {
         margin: 25px auto 30px;
         width: 330px;
         border-radius: 4px;
-}
+    }
 
-#registration #id_team_subdomain.subdomain {
+    #id_team_subdomain.subdomain {
         margin-top: 0px;
         text-align: right;
         position: relative;
         padding-right: 10px;
 
         width: 150px;
-}
 
-#registration #id_team_subdomain.subdomain + .realm_subdomain_label {
+        + .realm_subdomain_label {
             margin-top: 12px;
             margin-left: 180px;
             display: inline-block;
 
             font-weight: normal;
             font-size: inherit;
-}
+        }
+    }
 
-#registration #id_team_subdomain-error {
+    #id_team_subdomain-error {
         margin-top: 5px;
         display: block;
-}
+    }
 
-#registration #subdomain_section .inline-block {
+    #subdomain_section {
+        .inline-block {
             width: 100%;
-}
+        }
 
-#registration #subdomain_section .or {
+        .or {
             margin-top: 0px;
-}
+        }
+    }
 
-#registration .help-box {
+    .help-box {
         width: calc(100% - 25px);
         max-width: none;
         margin: 0 auto;
-}
 
-#registration .help-box.margin-top {
+        &.margin-top {
             margin-top: 21px;
             text-align: left;
-}
+        }
+    }
 
-#registration .external-host {
+    .external-host {
         margin: 25px 0px 0px -3px;
         padding: 11.5px 10px;
 
@@ -835,27 +836,30 @@ button.login-social-button {
         font-size: 1.2rem;
 
         background-color: hsl(0, 0%, 87%);
-}
+    }
 
-#registration .center-block .pitch {
+    .center-block .pitch {
         margin-bottom: 0px;
-}
+    }
 
-#registration .input-group label {
+    .input-group {
+        label {
             font-size: 1rem;
-}
 
-#registration .input-group.radio {
+            &.inline-block {
+                margin-top: -1px;
+            }
+        }
+
+        &.radio {
             margin: 0;
             padding: 0;
-}
+        }
+    }
 
-#registration .input-group label.inline-block {
-    margin-top: -1px;
-}
-
-#registration .org-url {
+    .org-url {
         margin-bottom: 5px !important;
+    }
 }
 
 .static.org-url + #subdomain_section {