From 2902520f78b22fdf1f6474f34bc669b9549f6473 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Thu, 23 Mar 2023 11:43:27 -0700
Subject: [PATCH 01/10] Enable sourcing local templates from custom directory
 for upsert commands

---
 Makefile  | 3 ++-
 README.md | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 33a6ff9..a7e83b1 100644
--- a/Makefile
+++ b/Makefile
@@ -13,6 +13,7 @@ TENANT_ID	= your-tenant
 SERVER_ID	= your-workspace-id
 ISSUER_URL	= https://your-tenant.your-region.authz.cloudentity.io/your-tenant/admin
 THEME_ID	= demo
+THEME_DIR = theme
 #
 # Set TENANT_ID and ISSUER_URL appropriately for your client.
 # Your client should be in the 'admin' workspace, but SERVER_ID can be any workspace
@@ -74,7 +75,7 @@ upsert-template: ## Insert or Update one template (make upsert-template TEMPLATE
 	${CURL} -D - -X PUT '${BASEURL}/api/admin/${TENANT_ID}/theme/${THEME_ID}/template/${TEMPLATE_PATH}' \
 	--header 'Authorization: Bearer ${TOKEN}' \
 	--header 'Content-Type: application/json' \
-	--data-binary @<(jq -M --raw-input --slurp < 'theme/${TEMPLATE_PATH}' '{"content":.}')
+	--data-binary @<(jq -M --raw-input --slurp < '${THEME_DIR}/${TEMPLATE_PATH}' '{"content":.}')
 
 delete-template: ## Delete a template (make delete-template TEMPLATE_PATH=pages/authorization/login/scripts.tmpl)
 	${CURL} -D - -X DELETE '${BASEURL}/api/admin/${TENANT_ID}/theme/${THEME_ID}/template/${TEMPLATE_PATH}' \
diff --git a/README.md b/README.md
index c0ea443..45489ee 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ TENANT_ID	= your-tenant
 SERVER_ID	= your-workspace-id
 ISSUER_URL	= https://your-tenant.your-region.authz.cloudentity.io/your-tenant/admin
 THEME_ID	= demo
+THEME_DIR = theme
 ```
 
 **IMPORTANT:** When working with a "vanity domain" that does not have a tenant ID in the URL params for API requests, leave the value of the `TENANT_ID` variable blank in the `Makefile.inc`, and set the value of `ISSUER_URL` without the `TENANT_ID` param, as shown below:
@@ -54,6 +55,8 @@ ISSUER_URL	= https://vanity-domain.your-organization.com/admin
 
 > **Note:** `SERVER_ID` refers to the ID of the workspace to which you intend to bind your theme.
 
+The `THEME_DIR` value indicates which directory should be used as the local source of the templates when 'upsert' commands are used. When creating a custom theme, it is possible to leave the default theme unedited as a reference, and set up a custom theme directory with a copy of the whole theme (or containing only a subset of templates to be altered, as long as the directory structure matches that of the default theme). In this case, change the value of `THEME_DIR` to the path of your custom directory. For example, this could be something like `my-custom-themes/demo-theme-1`, where `my-custom-themes` is located in the project root, and with `demo-theme-1` containing the `pages` and `shared` directories, etc.
+
 To test that the makefile is working, you can do `make list-base-templates` to query ACP:
 ```
 $ make list-base-templates

From 7bd0fcc2af44d031fe5025926d085f7f5333be2a Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Thu, 23 Mar 2023 11:45:00 -0700
Subject: [PATCH 02/10] Add .gitignore to ignore Makefile.inc

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d59f95f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+Makefile.inc

From 95ada2cb95f77071283fd5dc32496ce528225623 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Thu, 23 Mar 2023 11:55:26 -0700
Subject: [PATCH 03/10] Fix for upsert-templates command when using custom
 theme directory

---
 Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index a7e83b1..2c2f758 100644
--- a/Makefile
+++ b/Makefile
@@ -67,7 +67,7 @@ delete-theme: ## Delete a theme
 	--header 'Authorization: Bearer ${TOKEN}'
 
 upsert-templates: ## Insert or Update all templates
-	for f in $$(cd theme; find * -name '*.tmpl'); \
+	for f in $$(cd ${THEME_DIR}; find * -name '*.tmpl'); \
         do  make upsert-template THEME_ID=${THEME_ID} TEMPLATE_PATH="$$f" TOKEN=${TOKEN} ; \
 	done
 

From 5c0f475e5b8b22fc2e17f8c8b99b181d95c3d215 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Thu, 23 Mar 2023 14:43:02 -0700
Subject: [PATCH 04/10] Add initial template set for example 'financroo'
 branded theme

---
 .../pages/authorization/demo/index.tmpl       |   82 +
 .../pages/authorization/login/index.tmpl      |   39 +
 .../financroo-demo/pages/error/index.tmpl     |   39 +
 .../pages/identity/login/index.tmpl           |   31 +
 .../financroo-demo/shared/base.tmpl           |   28 +
 .../financroo-demo/shared/footer.tmpl         |    7 +
 .../shared/styles_financroo.tmpl              | 1522 +++++++++++++++++
 7 files changed, 1748 insertions(+)
 create mode 100644 custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/pages/error/index.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/shared/base.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/shared/footer.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl

diff --git a/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
new file mode 100644
index 0000000..9142307
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
@@ -0,0 +1,82 @@
+{{ template "base" . }}
+
+{{ define "title" }}Demo{{ end }}
+
+{{ define "content" }}
+  {{ template "demo_scripts" . }}
+
+  {{ if .Data.FlowCompleted }}
+    <div class="header-container">
+      {{ template "header" .Styling }}
+
+      <a href="?" class="logout-container">
+        <button class="submit-button" type="button" id="sign-in">Sign out</button>
+      </a>
+    </div>
+
+    <div class="custom-header">
+      <div>
+        <h2>Demo Application</h2>
+        <h3>This is customized</h3>
+
+        <div class="demo-container">
+          <div class="demo-info">
+            <i class="material-icons">error_outline</i>
+            <div class="demo-info-text">
+              <p><b>You have logged in to the Demo app</b></p>
+              <p>
+                The information below is used for demo and testing purposes.
+                You can view aggregated claims or the tokens issued by ACP below.
+              </p>
+            </div>
+          </div>
+        </div>
+
+       <div class="tabs-container">
+        <button id="claims-tab" role="tab" data-tabid="claims" class="tab-button tab-button-active">
+          Claims
+        </button>
+
+        <button id="access-token-tab" role="tab" data-tabid="access-token" class="tab-button">
+          Access Token
+        </button>
+
+        {{ if .Data.IDTokenRaw }}
+          <button id="id-token-tab" role="tab" data-tabid="id-token" class="tab-button">
+            ID Token
+          </button>
+        {{ end }}
+
+        {{ if .Data.RefreshTokenRaw }}
+          <button id="refresh-token-tab" role="tab" data-tabid="refresh-token" class="tab-button">
+            Refresh Token
+          </button>
+        {{ end }}
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-content">
+      {{ template "demo-claims-tab" . }}
+      {{ template "demo-access-token-tab" . }}
+      {{ template "demo-id-token-tab" . }}
+      {{ template "demo-refresh-token-tab" . }}
+    </div>
+
+  {{ else }}
+    <div class="header-container">
+      {{ template "header" .Config }}
+    </div>
+
+    <div class="card">
+
+      <h3 class="header">Demo {{ .flow }} application</h3>
+
+      {{ if eq .Data.Flow "device" }}
+        {{ template "demo-unauthorized" . }}
+      {{ else }}
+        {{ template "demo-login" . }}
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
new file mode 100644
index 0000000..1cf0a2c
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
@@ -0,0 +1,39 @@
+{{ template "base" . }}
+
+{{ define "title" }} Login {{ end }}
+
+{{ define "content" }}
+  {{ template "login_scripts" . }}
+  {{ template "password_visibility_script" . }}
+
+  <div class="header-container">
+    {{ template "header" .Config }}
+  </div>
+  <h3>This is customized</h3>
+
+  {{ if not .Data.HasIDPs }}
+    {{ template "login_no_idp" . }}
+  {{ else }}
+    <div id="content-container">
+      <div class="card">
+        {{ if .Data.HasAdminTabs }}
+          {{ template "login_admin_tabs" }}
+        {{ end }}
+
+        <div id="sign-in">
+          <div class="content">
+            {{ template "login_content" . }}
+          </div>
+        </div>
+
+        {{ template "login_admin_quick_access" . }}
+      </div>
+
+      <div class="cancel-container">
+        <a href="?login_id={{ .Data.SessionID }}&action=cancel" id="cancel" name="cancel">Cancel</a>
+      </div>
+    </div>
+  {{ end }}
+
+  {{ template "footer" }}
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/error/index.tmpl b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
new file mode 100644
index 0000000..bc83180
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
@@ -0,0 +1,39 @@
+{{ template "base" . }}
+
+{{ define "title" }}Error{{ end }}
+
+{{ define "content" }}
+
+  <div class="header-container">
+    {{ template "header" .Config }}
+  </div>
+  <h3>This is customized</h3>
+
+  <div id="error-container">
+    <input type="hidden" id="error" value="{{ .Data.Error }}">
+    <input type="hidden" id="cause" value="{{ .Data.Cause }}">
+    <img src="{{ .Config.Assets }}/static/images/no-idp.svg" alt="icon" />
+    <div id="error-title">{{ .Data.Name }}</div>
+    <div id="error-description">{{ .Data.Description }}.</div>
+
+    {{ if .Data.Hint  }}
+      <div id="error-hint">{{ .Data.Hint }}</div>
+    {{ end }}
+
+    {{ if .Data.RetryURL }}
+      <br/>
+      <a href="{{ .Data.RetryURL }}">Retry</a>
+    {{ end }}
+
+    {{ if .Data.Version }}
+      <div class="error-details">Version: {{ .Data.Version }}</div>
+    {{ end }}
+
+    {{ if .Data.TraceID }}
+      <div class="error-details">ID: {{ .Data.TraceID }}</div>
+    {{ end }}
+  </div>
+
+{{ template "footer" }}
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl b/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
new file mode 100644
index 0000000..e15807f
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
@@ -0,0 +1,31 @@
+{{ template "base" . }}
+
+{{ define "title" }}Login{{ end }}
+
+{{ define "content" }}
+  {{ template "identity_login_scripts" . }}
+  {{ template "password_visibility_script" . }}
+
+  <div class="header-container">
+    {{ template "header" .Config }}
+  </div>
+  <h3>This is customized</h3>
+
+  <div class="card">
+    <div class="content">
+
+      {{ if .Data.AuthnView }}
+        {{ template "authn" . }}
+      {{ else }}
+        <div class="alert-danger">No Authentication Mechanisms Enabled</div>
+      {{ end }}
+
+    </div>
+  </div>
+
+  <div class="cancel-container">
+    <a href="?login_id={{ .Data.SessionID }}&action=cancel" id="cancel" name="cancel">Cancel</a>
+  </div>
+
+  {{ template "footer" }}
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/shared/base.tmpl b/custom-theme-examples/financroo-demo/shared/base.tmpl
new file mode 100644
index 0000000..bbccf91
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/shared/base.tmpl
@@ -0,0 +1,28 @@
+{{ define "base" }}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ template "title" . }}</title>
+
+    <script src="{{ .Config.Assets }}/static/utils.js" nonce="{{.Config.Nonce}}"></script>
+    <script src="{{ .Config.Assets }}/static/zxcvbn.js" nonce="{{.Config.Nonce}}"></script>
+    <link href="{{ .Config.Assets }}/static/fonts.css" rel="stylesheet" nonce="{{.Config.Nonce}}">
+    <link href="{{ .Config.Assets }}/static/material-icons.css" rel="stylesheet" nonce="{{.Config.Nonce}}">
+    <!-- <link rel="stylesheet" href="{{ .Config.Assets }}/static/style.css" nonce="{{.Config.Nonce}}">
+    <link rel="stylesheet" href="{{ .Config.Assets }}/static/style-v2.css" nonce="{{.Config.Nonce}}"> -->
+    <link rel="icon" href="{{ .Config.Assets }}/favicon-v5.svg">
+    <script src="https://www.google.com/recaptcha/api.js" nonce="{{.Config.Nonce}}" async defer></script>
+
+    {{ template "styles_financroo" . }}
+
+  </head>
+  <body>
+    {{ template "content" . }}
+  </body>
+</html>
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/shared/footer.tmpl b/custom-theme-examples/financroo-demo/shared/footer.tmpl
new file mode 100644
index 0000000..c2b89d9
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/shared/footer.tmpl
@@ -0,0 +1,7 @@
+{{ define "footer" }}
+
+<footer>
+  <div>Copyright © {{ now.Year }} Financroo. All Rights Reserved</div>
+</footer>
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
new file mode 100644
index 0000000..01236f6
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
@@ -0,0 +1,1522 @@
+{{ define "styles_financroo" }}
+
+<style nonce="{{.Config.Nonce}}">
+  /* Styles from style.css */
+  html {
+    font-size: 14px;
+    min-height: 100%;
+    font-weight: 300;
+  }
+
+  * {
+    font-family: Inter, -apple-system, "Ubuntu", "Helvetica Neue", sans-serif;
+  }
+
+  :root {
+    --mdc-theme-primary: #0083ff;
+    --mdc-theme-secondary: #0083ff;
+    --mdc-theme-background: #f7faff;
+    --header: #434656;
+  }
+
+  body {
+    background-color: var(--mdc-theme-background);
+    margin: 0;
+  }
+
+  @media (max-width: 600px), (max-height: 600px) {
+    body {
+      background-size: 300px;
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--mdc-theme-primary);
+  }
+
+  h6 {
+    margin: 4px 0;
+    color: rgba(0, 0, 0, 0.87);
+    font-family: Inter;
+    font-size: 20px;
+    font-weight: normal;
+    letter-spacing: 0.25px;
+  }
+
+  .demo-container {
+    padding: 5px;
+    max-width: 1024px;
+    margin: 22px auto 20px auto;
+  }
+
+  .aut-banner-logo {
+    display: flex;
+    align-items: center;
+  }
+
+  .aut-banner-logo img {
+    height: 24px;
+    width: auto;
+    max-width: 350px;
+    object-fit: contain;
+  }
+
+  .demo-info {
+    display: flex;
+    margin: 10px 0;
+    border-radius: 4px;
+    background-color: white;
+    border: 1px solid #b9dcff;
+  }
+
+  .demo-info > i {
+    margin: 16px 12px;
+    padding: 10px 5px 10px 10px;
+  }
+
+  .demo-info-text {
+    padding: 16px 16px 16px 0;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .aut-hidden {
+    height: 0;
+    overflow: hidden;
+  }
+
+  #error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 120px;
+    min-height: calc(100vh - 120px - 66px - 136px);
+    text-align: center;
+  }
+
+  #error-title {
+    margin-top: 34px;
+    margin-bottom: 12px;
+    font-size: 28px;
+    line-height: 40px;
+    color: #626576;
+  }
+
+  #error-description {
+    color: #626576;
+    font-size: 16px;
+    line-height: 32px;
+    max-width: 620px;
+    padding: 0 16px;
+  }
+
+  #error-hint {
+    color: #b00020;
+    opacity: 50%;
+    margin: 16px 0;
+  }
+
+  .alert-danger {
+    padding: 12px 16px;
+    margin: 20px 0;
+    color: #cf3228;
+    background-color: #fff8f7;
+    font-size: 12px;
+  }
+
+  #password-strength-container {
+    margin-top: 8px;
+    display: none;
+  }
+
+  #password-strength-text {
+    color: #626576;
+    font-size: 12px;
+    margin-top: 8px;
+  }
+
+  #password-strength-steps {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    column-gap: 8px;
+  }
+
+  .password-strength-step {
+    height: 4px;
+    background-color: lightgray;
+    border-radius: 4px;
+  }
+
+  .weak {
+    background-color: #f25f5c;
+  }
+
+  .fair {
+    background-color: #ffe066;
+  }
+
+  .strong {
+    background-color: yellowgreen;
+  }
+
+  .very-strong {
+    background-color: forestgreen;
+  }
+
+  pre {
+    font-family: monospace;
+    color: #ffffff;
+    background: #2b323c;
+    border-radius: 4px;
+    padding: 16px;
+    white-space: -moz-pre-wrap; /* Mozilla */
+    white-space: -hp-pre-wrap; /* HP printers */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    word-wrap: break-word; /* IE */
+    word-break: break-all;
+  }
+
+  pre.with-copy {
+    position: relative;
+    border-radius: 4px 0 4px 4px;
+  }
+
+  pre.with-copy .pre-copy-button {
+    position: absolute;
+    right: -1px;
+    display: flex;
+    align-items: center;
+    top: -33px;
+    height: 16px;
+    padding: 8px 12px;
+    background-color: #f7faff;
+    border: 1px solid #c2c3c6;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+  }
+
+  pre.with-copy .pre-copy-button:hover {
+    opacity: 0.6;
+    cursor: pointer;
+  }
+
+  pre.with-copy .pre-copy-button i {
+    font-size: 12px;
+    margin-right: 4px;
+  }
+
+  .form-field {
+    width: 100%;
+    margin-bottom: 24px;
+  }
+
+  .form-field > input {
+    background-color: #fcfcff;
+  }
+
+  .form-field > input:disabled {
+    background: #fbfcfd;
+    border: 1px solid #e9ebec;
+  }
+
+  .form-field textarea {
+    resize: none;
+    display: block;
+    width: 100%;
+    border: solid 1px gray;
+    border-radius: 4px;
+    padding: 16px;
+    box-sizing: border-box;
+  }
+
+  #cancel-container {
+    max-width: 480px;
+    margin: 0 auto;
+  }
+
+  #cancel {
+    font-size: 12px;
+    font-weight: 600;
+    margin-left: 32px;
+    line-height: 24px;
+  }
+
+  .more-values.collapsed {
+    display: none;
+  }
+
+  .more-values.expanded {
+    display: table-row;
+  }
+
+  footer {
+    display: flex;
+    font-size: 12px;
+    justify-content: center;
+    color: #626576;
+    margin: 80px 0 32px 0;
+    width: 100%;
+    line-height: 24px;
+  }
+
+  /* Demo portal */
+
+  .logout-container {
+    position: absolute;
+    right: 16px;
+  }
+
+  .custom-header {
+    background-color: white;
+    border-bottom: solid 1px #ececec;
+    margin-bottom: 40px;
+  }
+
+  .custom-header > div {
+    margin: 0 auto;
+    padding: 37px 60px 0 60px;
+    max-width: 1024px;
+  }
+
+  .custom-header > div > h2 {
+    font-size: 28px;
+    line-height: 40px;
+    margin-bottom: 40px;
+  }
+
+  @media (max-width: 600px) {
+    .custom-header {
+      width: 100%;
+    }
+  }
+
+  /* Styles from style-v2.css */
+  .header-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    height: 66px;
+    background: var(--header);
+    position: relative;
+  }
+
+  .header-container button {
+    margin-bottom: 0;
+    height: 36px;
+  }
+
+  .card {
+    max-width: 480px;
+    margin: 80px auto 20px auto;
+    margin-bottom: 20px;
+    border: solid 1px rgb(0, 0, 0, 0.1);
+    background-color: white;
+  }
+
+  .color-bar {
+    height: 8px;
+    background-color: var(--mdc-theme-primary);
+    border-radius: 4px 4px 0 0;
+  }
+
+  .header {
+    padding: 16px 32px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    text-align: center;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 32px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .header-info {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #626576;
+    margin-bottom: 32px;
+  }
+
+  .header-small-margin {
+    margin-bottom: 8px !important;
+  }
+
+  .content {
+    padding: 32px;
+  }
+
+  .content h2 {
+    font-weight: normal;
+    font-size: 28px;
+    line-height: 40px;
+    margin: 0 0 27px;
+  }
+
+  .content input {
+    height: 48px;
+    width: 100%;
+    border: solid 1px gray;
+    border-radius: 4px;
+    padding: 0 16px;
+    box-sizing: border-box;
+  }
+
+  .content input[type="checkbox"] {
+    height: 17px;
+    width: 20px;
+    margin-right: 8px;
+  }
+
+  .form-field-checkbox {
+    display: flex;
+    align-items: center;
+  }
+
+  .content label {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 24px;
+    color: #626576;
+    margin-bottom: 4px;
+    display: block;
+  }
+
+  .input-above-link {
+    float: right;
+    margin-left: 12px;
+  }
+
+  .input-with-button {
+    position: relative;
+    border: solid 1px gray;
+    border-radius: 4px;
+    background-color: #fcfcff;
+  }
+
+  .input-with-button input {
+    width: calc(100% - 48px);
+    border: none;
+  }
+
+  .input-with-button button {
+    position: absolute;
+    top: 3px;
+    right: 4px;
+    padding: 8px;
+    background: none;
+    border: none;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .input-with-button button:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .input-with-button button > i {
+    color: gray;
+  }
+
+  .input-with-prefix-button button {
+    left: 4px;
+    right: unset;
+    pointer-events: none;
+  }
+
+  .input-with-prefix-button input {
+    margin-left: 48px;
+  }
+
+  .submit-button {
+    width: 100%;
+    height: 48px;
+    color: white;
+    background-color: var(--mdc-theme-primary);
+    border: none;
+    border-radius: 4px;
+    font-size: 15px;
+    box-shadow: 0px 3px 1px -2px rgb(0, 0, 0, 0.2),
+      0px 2px 2px 0px rgb(0, 0, 0, 0.14), 0px 1px 5px 0px rgb(0, 0, 0, 0.12);
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .submit-button:hover:not(:disabled) {
+    opacity: 0.95;
+    box-shadow: 0px 2px 4px -1px rgb(0, 0, 0, 0.2),
+      0px 4px 5px 0px rgb(0, 0, 0, 0.14), 0px 1px 10px 0px rgb(0, 0, 0, 0.12);
+  }
+
+  .submit-button:disabled {
+    cursor: not-allowed;
+    background-color: #b2b3b5;
+  }
+
+  .submit-button i {
+    margin-right: 8px;
+    font-size: 20px;
+  }
+
+  .no-bottom-margin {
+    margin-bottom: 0 !important;
+  }
+
+  .extra-top-margin {
+    margin-top: 32px;
+  }
+
+  .extra-top-margin-small {
+    margin-top: 16px;
+  }
+
+  .contained-button {
+    height: 48px;
+    min-width: 120px;
+    border: none;
+    font-size: 15px;
+    border-radius: 4px;
+    color: white;
+    background-color: var(--mdc-theme-primary);
+  }
+
+  .contained-button:hover:not(:disabled) {
+    opacity: 0.95;
+    box-shadow: 0px 2px 4px -1px rgb(0, 0, 0, 0.2),
+      0px 4px 5px 0px rgb(0, 0, 0, 0.14), 0px 1px 10px 0px rgb(0, 0, 0, 0.12);
+  }
+
+  .contained-button:disabled {
+    cursor: not-allowed;
+    background-color: #b2b3b5;
+  }
+
+  .text-button {
+    height: 48px;
+    min-width: 120px;
+    border: none;
+    font-size: 15px;
+    border-radius: 4px;
+    color: #626576;
+    background: #fbfcfd;
+  }
+
+  .buttons-container {
+    text-align: right;
+    margin-top: 32px;
+  }
+
+  .buttons-container > a {
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .buttons-container-full-width {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+  }
+
+  .buttons-container-full-width > button {
+    flex: 1;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .caption {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 24px;
+    color: #626576;
+  }
+
+  .array-item {
+    margin-bottom: 8px;
+  }
+
+  .add-item {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    background: none;
+    border: none;
+  }
+
+  .add-item:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .add-item i {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  .label-with-link {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .label-with-link > button {
+    border: none;
+    background: none;
+    color: var(--mdc-theme-primary);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .footer-with-link {
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .footer-with-link > button {
+    border: none;
+    background: none;
+    color: var(--mdc-theme-primary);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .notification-container {
+    padding: 12px 16px;
+    color: #626576;
+    background-color: #f0f7ff;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .notification-container > i {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  .notification-container > span {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .notification-container > button {
+    font-weight: 600;
+    color: var(--mdc-theme-primary);
+    border: none;
+    background: none;
+    padding: 0;
+    font-size: 12px;
+  }
+
+  .error-container {
+    padding: 12px 16px;
+    color: #cf3228;
+    background-color: #fff8f7;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .error-container > i {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  .error-details {
+    color: #626576;
+    font-size: 12px;
+    padding-top: 12px;
+  }
+
+  .scopes-list li {
+    margin-bottom: 8px;
+  }
+
+  .text-field-helper {
+    margin-top: 4px;
+    font-size: 12px;
+    color: gray;
+  }
+
+  .tabs-container {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0 16px;
+    display: flex;
+  }
+
+  .tab-button {
+    border: none;
+    background: none;
+    border-bottom: 2px solid transparent;
+    margin-right: 16px;
+    padding: 16px 0;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  .tab-button:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .tab-button i {
+    margin-right: 8px;
+    font-size: 18px;
+  }
+
+  .tab-button-active {
+    border-bottom: 2px solid var(--mdc-theme-primary);
+  }
+
+  .demo-content {
+    max-width: 1024px;
+    margin: 0 auto 20px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.31);
+    background-color: white;
+    border-radius: 4px;
+  }
+
+  @media (max-width: 1024px) {
+    .demo-content {
+      margin: 0 20px;
+    }
+  }
+
+  .demo-content pre {
+    background-color: #f7faff;
+    color: #212533;
+    border: 1px solid #c2c3c6;
+  }
+
+  .demo-unauthorized-container pre {
+    text-align: left;
+  }
+
+  .demo-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .demo-table td,
+  th {
+    padding: 8px;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+  }
+
+  .demo-table th {
+    border: none;
+  }
+
+  .demo-table tr.selectable {
+    cursor: pointer;
+  }
+
+  .demo-table-action-col {
+    width: 26px;
+  }
+
+  .demo-table-collapsed-content {
+    padding: 24px 36px !important;
+    background: #fcfcff;
+  }
+
+  .demo-table h4 {
+    margin: 0 0 16px 0;
+  }
+
+  .empty-info {
+    color: darkgray;
+    text-align: center;
+    padding: 80px;
+  }
+
+  .tag {
+    padding: 2px 4px;
+    background: #f7faff;
+    border: 1px solid #c2c3c6;
+    border-radius: 4px;
+    margin-left: 6px;
+  }
+
+  .select-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .consent-header {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+  }
+
+  .consent-footer {
+    line-height: 21px;
+  }
+
+  .consent-header-name-container {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+  }
+
+  .consent-header-name-container h4 {
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .consent-header-name-container a {
+    margin-top: 8px;
+  }
+
+  .consent-header-name-container i {
+    border-radius: 24px;
+    border: solid 1px #ccc;
+    color: gray;
+    padding: 8px;
+  }
+
+  .consent-header-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 16px;
+  }
+
+  .consent-scopes-container {
+    margin-bottom: 24px;
+  }
+
+  .consent-scopes-container h4 {
+    margin-top: 0;
+  }
+
+  .consent-scopes-container > div {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+
+  .consent-scopes-container-row-container {
+    margin-bottom: 0 !important;
+  }
+
+  .consent-scope-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .consent-scope-row label {
+    flex: 1;
+    font-weight: normal;
+    font-size: 13px;
+    color: black;
+  }
+
+  .consent-scope-row button {
+    border: none;
+    background: none;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .consent-scope-row button:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .consent-scope-description {
+    margin-bottom: 16px;
+    margin-left: 34px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #ccc;
+    font-size: 13px;
+    color: #626576;
+    line-height: 18px;
+  }
+
+  .mfa-additional-info {
+    background-color: #fdf9f8;
+    margin-left: 34px;
+    margin-bottom: 16px;
+    padding: 4px 16px;
+    border-radius: 4px;
+  }
+
+  .mfa-additional-info > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .mfa-additional-info > div > div {
+    display: flex;
+    align-items: center;
+  }
+
+  .mfa-additional-info i {
+    font-size: 20px;
+    color: #bd271e;
+    padding-top: 2px;
+    margin-right: 8px;
+  }
+
+  .mfa-additional-info button {
+    background: none;
+    border: 1px solid #bd271e;
+    height: 36px;
+    color: #bd271e;
+    font-size: 12px;
+    min-width: 100px;
+  }
+
+  .mfa-additional-info p {
+    font-size: 12px;
+    line-height: 21px;
+  }
+
+  .header-with-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .header-with-avatar > div {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background: #fcfcff;
+    width: 48px;
+    height: 48px;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #626576;
+    text-transform: uppercase;
+    margin-right: 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: -24px;
+  }
+
+  .cancel-container {
+    max-width: 480px;
+    margin: 0 auto;
+  }
+
+  .quick-access-content {
+    padding: 16px 32px 8px;
+    background-color: #fcfcff;
+  }
+
+  .quick-access-content > div {
+    padding-bottom: 20px;
+  }
+
+  .href-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: white;
+    box-shadow: 0px 1px 1px rgb(0 0 0 / 8%), 0px 0px 1px rgb(0 0 0 / 31%);
+    border-radius: 4px;
+    padding: 8px 10px;
+    margin-bottom: 16px;
+    cursor: pointer;
+    color: #c2c3c6;
+    width: 100%;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .href-card:hover {
+    box-shadow: 0px 1px 16px -4px rgba(0, 0, 0, 0.25),
+      0px 0px 1px rgba(0, 0, 0, 0.31);
+  }
+
+  .href-card > div {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .href-card img {
+    margin-right: 14px;
+    width: 32px;
+    max-height: 32px;
+  }
+
+  .href-card i {
+    color: #9ea1b7;
+  }
+
+  .href-card span {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #626576;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+  }
+
+  .href-card-avatar {
+    color: white !important;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    flex: unset !important;
+  }
+
+  .href-card-avatar-color {
+    background-color: var(--mdc-theme-primary);
+  }
+
+  .href-card-avatar-with-img {
+    border-radius: 0;
+  }
+
+  .href-card-avatar-with-img > img {
+    margin: 0;
+  }
+
+  .quick-access-info {
+    padding: 16px 32px;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 22px;
+    border-top: solid 1px #ececec;
+  }
+
+  #login-hint-description {
+    margin-bottom: 32px;
+  }
+
+  #login-hint-description div {
+    margin-bottom: 8px;
+  }
+
+  .spacer-container {
+    line-height: 24px;
+    margin-bottom: 24px;
+    color: #626576;
+  }
+
+  .spacer-container > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+
+  .spacer-container > div::before,
+  .spacer-container > div::after {
+    height: 1px;
+    background-color: #f2f4ff;
+    width: 100%;
+    content: "";
+    display: block;
+  }
+
+  .spacer-container > div::before {
+    margin-right: 24px;
+  }
+
+  .spacer-container > div::after {
+    margin-left: 24px;
+  }
+
+  .login-welcome-back-container {
+    margin-bottom: 16px;
+  }
+
+  .login-welcome-back-container > h5 {
+    margin-top: 0;
+  }
+
+  .login-welcome-back-card {
+    background: #fcfcff;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.31);
+    border-radius: 4px;
+    padding: 16px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .login-welcome-back-card > div {
+    margin-left: 16px;
+  }
+
+  .login-welcome-back-card-name {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 24px;
+  }
+
+  .login-welcome-back-card-email {
+    font-size: 12px;
+    line-height: 22px;
+    color: #626576;
+  }
+
+  .login-welcome-back-select-different-link {
+    font-size: 14px;
+    margin: 0 0 20px;
+    border: none;
+    background: none;
+    color: var(--mdc-theme-primary);
+  }
+
+  .pool-login-remember-idp-switch-container {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 32px;
+  }
+
+  .pool-login-remember-idp-switch-container > button {
+    border: none;
+    background: none;
+    color: var(--mdc-theme-primary);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .login-remember-idp-switch-container {
+    display: flex;
+  }
+
+  .login-remember-idp-switch-container > label {
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  #go-back-button {
+    border: none;
+    background: none;
+    color: var(--mdc-theme-primary);
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    position: relative;
+    left: -4px;
+  }
+
+  #go-back-button > i {
+    font-size: 18px;
+    margin-right: 4px;
+  }
+
+  .content-otp > h4 {
+    color: #626576;
+    margin: 0 0 16px;
+    word-break: break-word;
+  }
+
+  .otp-methods {
+    background: #ffffff;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.31);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 32px 0 0;
+    padding: 0 24px;
+  }
+
+  .otp-methods > div {
+    border-bottom: solid 1px #ececec;
+  }
+
+  .otp-methods > div:last-of-type {
+    border-bottom: none;
+  }
+
+  .otp-methods button {
+    border: none;
+    background: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 0;
+  }
+
+  .otp-methods button > i {
+    color: #c2c3c6;
+    margin-left: 15px;
+  }
+
+  .otp-method-info {
+    display: flex;
+  }
+
+  .otp-method-info > div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .otp-method-icon {
+    color: var(--mdc-theme-primary);
+    margin-right: 15px;
+  }
+
+  .otp-method-info h4 {
+    margin: 0;
+  }
+
+  .otp-method-info p {
+    font-size: 12px;
+    line-height: 22px;
+    color: #626576;
+    text-align: left;
+  }
+
+  .otp-send-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .otp-verify-error {
+    background-color: #f9e6eb;
+    margin-bottom: 24px;
+    padding: 8px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .otp-verify-error > i {
+    font-size: 20px;
+    color: #bd271e;
+    padding-top: 2px;
+    margin-left: -10px;
+    margin-right: 8px;
+  }
+
+  .otp-send-options {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .otp-send-options > button {
+    border: none;
+    background: none;
+    padding: 0;
+    color: var(--mdc-theme-primary);
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  .otp-send-options > a {
+    cursor: pointer;
+  }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+    margin-left: 9px;
+  }
+
+  .tooltip > i {
+    position: relative;
+    top: 3px;
+    font-size: 18px;
+    color: #626576;
+  }
+
+  .tooltip-content {
+    visibility: hidden;
+    width: 256px;
+    background-color: #212533;
+    color: white;
+    border-radius: 4px;
+    padding: 12px;
+    position: absolute;
+    bottom: 35px;
+    margin-left: -135px;
+    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12),
+      0px 3px 5px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 22px;
+  }
+
+  #tooltip-triangle {
+    visibility: hidden;
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%) scale(0.8);
+  }
+
+  .tooltip:hover .tooltip-content,
+  .tooltip:hover #tooltip-triangle {
+    visibility: visible;
+  }
+
+  #idps-list {
+    margin-bottom: 16px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 2px;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  .switch-container {
+    display: flex !important;
+    align-items: center;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 17px;
+    margin-right: 8px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+    border-radius: 17px;
+  }
+
+  .switch .slider:before {
+    position: absolute;
+    content: "";
+    height: 13px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+    border-radius: 50%;
+  }
+
+  .switch input:checked + .slider {
+    background-color: var(--mdc-theme-primary);
+  }
+
+  .switch input:focus + .slider {
+    box-shadow: 0 0 1px var(--mdc-theme-primary);
+  }
+
+  .switch input:checked + .slider:before {
+    -webkit-transform: translateX(13px);
+    -ms-transform: translateX(13px);
+    transform: translateX(13px);
+  }
+
+  /* loader */
+
+  .dots-loader {
+    display: inline-block;
+    position: relative;
+    width: 50px;
+    height: 10px;
+  }
+
+  .dots-loader > div {
+    position: absolute;
+    top: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+
+  .dots-loader > div:nth-child(1) {
+    left: 0;
+    animation: dots-loader-first 0.6s infinite;
+  }
+
+  .dots-loader > div:nth-child(2) {
+    left: 0;
+    animation: dots-loader-middle 0.6s infinite;
+  }
+
+  .dots-loader > div:nth-child(3) {
+    left: 20px;
+    animation: dots-loader-middle 0.6s infinite;
+  }
+
+  .dots-loader > div:nth-child(4) {
+    left: 40px;
+    animation: dots-loader-last 0.6s infinite;
+  }
+
+  @keyframes dots-loader-first {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes dots-loader-middle {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(20px, 0);
+    }
+  }
+
+  @keyframes dots-loader-last {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  .otp-input-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+  }
+
+  .otp-input-container input {
+    border: none;
+    border-bottom: 1px solid #b2b3b5;
+    border-radius: 0;
+    text-align: center;
+    padding: 0;
+    width: 24px;
+    height: 32px;
+    font-size: 22px;
+  }
+
+  .otp-input-container input:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  .radio-buttons {
+    border: solid 1px var(--mdc-theme-primary);
+    border-radius: 4px;
+    display: flex;
+  }
+
+  .radio-buttons > button {
+    border: none;
+    border-right: solid 1px var(--mdc-theme-primary);
+    background: none;
+    flex: 1;
+    padding: 8px;
+    color: var(--mdc-theme-primary);
+  }
+
+  .radio-buttons > button.active {
+    background-color: var(--mdc-theme-primary);
+    color: white;
+  }
+
+  .radio-buttons > button:last-of-type {
+    border-right: none;
+  }
+
+  .visible-flex {
+    display: flex;
+  }
+
+  .visible {
+    display: block;
+  }
+
+  .non-visible {
+    display: none;
+  }
+
+  .pool-register-form {
+    max-height: 564px;
+    overflow-y: auto;
+    margin-right: -16px;
+    padding-right: 16px;
+  }
+
+  .steps-container {
+    color: #626576;
+    font-size: 10px;
+  }
+
+  .header-bottom-info {
+    color: #626576;
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 4px;
+    margin-bottom: 24px;
+  }
+
+  .button-top-margin-to-field {
+    margin-top: 8px;
+  }
+
+  .small-icon {
+    width: 24px;
+  }
+</style>
+
+{{ end }}

From fb7d24f7c22783574d8de66462c70cf14824fb24 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Fri, 24 Mar 2023 17:07:32 -0700
Subject: [PATCH 05/10] Add basic 'financroo' branding, custom layout on login
 pages

---
 .../pages/authorization/demo/index.tmpl       |   1 -
 .../pages/authorization/login/index.tmpl      |  64 +++++---
 .../login/login_content_mode_idps_list.tmpl   | 151 ++++++++++++++++++
 .../login/login_content_mode_static_idp.tmpl  |  65 ++++++++
 .../financroo-demo/pages/error/index.tmpl     |   3 +-
 .../identity/login/authn_mode_password.tmpl   |  73 +++++++++
 .../pages/identity/login/index.tmpl           |  47 +++---
 .../financroo-demo/shared/base.tmpl           |   2 +-
 .../financroo-demo/shared/header.tmpl         |   7 +
 .../shared/styles_financroo.tmpl              | 141 +++++++++++++---
 10 files changed, 488 insertions(+), 66 deletions(-)
 create mode 100644 custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_idps_list.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_static_idp.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/pages/identity/login/authn_mode_password.tmpl
 create mode 100644 custom-theme-examples/financroo-demo/shared/header.tmpl

diff --git a/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
index 9142307..7e1a546 100644
--- a/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
+++ b/custom-theme-examples/financroo-demo/pages/authorization/demo/index.tmpl
@@ -17,7 +17,6 @@
     <div class="custom-header">
       <div>
         <h2>Demo Application</h2>
-        <h3>This is customized</h3>
 
         <div class="demo-container">
           <div class="demo-info">
diff --git a/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
index 1cf0a2c..017a395 100644
--- a/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
+++ b/custom-theme-examples/financroo-demo/pages/authorization/login/index.tmpl
@@ -6,34 +6,48 @@
   {{ template "login_scripts" . }}
   {{ template "password_visibility_script" . }}
 
-  <div class="header-container">
-    {{ template "header" .Config }}
-  </div>
-  <h3>This is customized</h3>
-
-  {{ if not .Data.HasIDPs }}
-    {{ template "login_no_idp" . }}
-  {{ else }}
-    <div id="content-container">
-      <div class="card">
-        {{ if .Data.HasAdminTabs }}
-          {{ template "login_admin_tabs" }}
-        {{ end }}
-
-        <div id="sign-in">
-          <div class="content">
-            {{ template "login_content" . }}
+  <div class="content-wrapper">
+    <div class="content-flex" style="height: 100%;">
+      <div class="content-left">
+        <div class="content-background"></div>
+      </div>
+
+      <div class="content-right">
+        <div class="aut-content-wrapper">
+          <div class="header-container">
+            {{ template "header" .Config }}
           </div>
-        </div>
 
-        {{ template "login_admin_quick_access" . }}
-      </div>
+          <div class="card-right">
+            {{ if not .Data.HasIDPs }}
+              {{ template "login_no_idp" . }}
+            {{ else }}
+              <div id="content-container">
+                <div class="card-right">
+                  {{ if .Data.HasAdminTabs }}
+                    {{ template "login_admin_tabs" }}
+                  {{ end }}
+
+                  <div id="sign-in">
+                    <div class="content">
+                      {{ template "login_content" . }}
+                    </div>
+                  </div>
+
+                  {{ template "login_admin_quick_access" . }}
+                </div>
+
+                <div class="cancel-container">
+                  <a href="?login_id={{ .Data.SessionID }}&action=cancel" id="cancel" name="cancel">Cancel</a>
+                </div>
+              </div>
+            {{ end }}
+          </div>
+
+          {{ template "footer" }}
 
-      <div class="cancel-container">
-        <a href="?login_id={{ .Data.SessionID }}&action=cancel" id="cancel" name="cancel">Cancel</a>
+        </div>
       </div>
     </div>
-  {{ end }}
-
-  {{ template "footer" }}
+  </div>
 {{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_idps_list.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_idps_list.tmpl
new file mode 100644
index 0000000..1da9afe
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_idps_list.tmpl
@@ -0,0 +1,151 @@
+{{ define "login_content_mode_idps_list" }}
+
+<form action="?login_id={{ .Data.SessionID }}&prompt={{ .Data.Prompt }}&max_age={{ .Data.MaxAge }}" method="post" id="sign-in-form">
+  <input type="hidden" id="version" name="version" value="2">
+
+  <div class="error-container non-visible" id="idps-discovery-error">
+    <i class="material-icons">error_outline</i>
+    Failed to fetch IDPs
+  </div>
+
+  <div class="error-container non-visible" id="idps-empty-error">
+    <i class="material-icons">error_outline</i>
+    Authentication is not supported for this user/domain
+  </div>
+
+  {{ if .Data.RememberedSignInMethod }}
+    {{ template "login_content_remembered_idp" . }}
+  {{ else }}
+    {{ if .Data.IDPDiscoveryEnabled }}
+      <h2 id="log-in-header">Sign into your account</h2>
+      <div id="username-password-form">
+      {{ .Data.CsrfField }}
+
+      <div class="form-field">
+        <label for="text-field-username-input" class="label-with-link">
+          Username | Email | Phone
+          <button id="not-you-button" class="non-visible" type="button">Not You?</button>
+        </label>
+        <input id="text-field-username-input" name="username" autocomplete="off" data-lpignore="true" value="{{ .Data.Identifier }}">
+      </div>
+
+      <button class="submit-button" type="button" id="sign-in-button" disabled>
+        <span>Next</span>
+        <div class="non-visible">{{ template "loader" }}</div>
+      </button>
+    </div>
+
+    {{ else }}
+      <h2 id="log-in-header" class="header-small-margin">Select how you want to sign in</h2>
+      <input type="hidden" name="username" value="{{ .Data.Identifier }}">
+      <input type="hidden" name="password" value="">
+    {{ end }}
+  {{ end }}
+
+  <div
+    id="idps-list-header"
+    class="spacer-container {{ if .Data.HasNonHiddenIDP }}visible{{ else }}non-visible{{ end }}"
+    {{ if .Data.HasNonHiddenIDP }}
+      data-default-style-display="block"
+    {{ else }}
+      data-default-style-display="none"
+    {{ end }}
+  >
+    {{ if or .Data.RememberedSignInMethod .Data.IDPDiscoveryEnabled }}
+      <div>Sign in with</div>
+    {{ end }}
+  </div>
+
+  <div id="idps-list">
+    {{ range $method := .Data.Methods }}
+    <button
+      type="submit"
+      class="href-card {{ if $.Data.RememberedSignInMethod }}{{ if eq .ID $.Data.RememberedIDP.ID }}visible-flex{{ else }}non-visible{{ end }}{{ else }}{{ if .Hidden }}non-visible{{ else }}visible-flex{{ end }}{{ end }}"
+      name="authentication_id"
+      value="{{ .ID }}"
+      title="{{ .Name }}"
+      form="sign-in-form"
+      formaction="?{{ $.Data.Query }}"
+      {{ if $.Data.RememberedSignInMethod }}
+        {{ if eq .ID $.Data.RememberedIDP.ID }}
+          data-default-style-display="flex"
+        {{ else }}
+          data-default-style-display="none"
+        {{ end }}
+      {{ else }}
+        {{ if .Hidden }}
+          data-default-style-display="none"
+        {{ else }}
+          data-default-style-display="flex"
+        {{ end }}
+      {{ end }}
+    >
+      <div>
+        <img
+          {{ if and .LogoURI (gt (len .LogoURI) 0) }}
+            src="{{ .LogoURI }}"
+          {{ else }}
+            {{ if eq .Method "github" }}
+              src="/static/images/idps/github.svg"
+            {{ else if eq .Method "okta" }}
+              src="/static/images/idps/okta.svg"
+            {{ else if eq .Method "auth0" }}
+              src="/static/images/idps/auth0-icon.svg"
+            {{ else if eq .Method "saml" }}
+              src="/static/images/idps/saml-icon.svg"
+            {{ else if eq .Method "azureb2c" }}
+              src="/static/images/idps/azure-b2c-icon.svg"
+            {{ else if eq .Method "azure" }}
+              src="/static/images/idps/azure-icon.svg"
+            {{ else if eq .Method "cognito" }}
+              src="/static/images/idps/cognito-icon.svg"
+            {{ else if eq .Method "intelli_trust" }}
+              src="/static/images/idps/entrust-icon.svg"
+            {{ else if eq .Method "oidc" }}
+              src="/static/images/idps/openid-icon.svg"
+            {{ else if eq .Method "custom" }}
+              src="/static/images/idps/custom-circle.svg"
+            {{ else if eq .Method "external" }}
+              src="/static/images/idps/external-icon.svg"
+            {{ else if eq .Method "identity_pool" }}
+              src="/static/images/idps/cloudentity-icon.svg"
+            {{ else if eq .Method "github_embedded" }}
+              src="/static/images/idps/github.svg"
+            {{ else if eq .Method "google_embedded" }}
+              src="/static/images/idps/google-icon.svg"
+            {{ else if eq .Method "google" }}
+              src="/static/images/idps/google-icon.svg"
+            {{ else if eq .Method "static" }}
+              src="/static/images/idps/sandbox-icon.svg"
+            {{ else }}
+              src=""
+            {{ end }}
+          {{ end }}
+          alt="{{ .Method }}"
+        >
+        <span>{{ .Name }}</span>
+      </div>
+      <i class="material-icons">navigate_next</i>
+    </button>
+    {{ end }}
+  </div>
+
+  <div id="remember-my-sign-in-method">
+    <div class="login-remember-idp-switch-container">
+      <label class="switch-container" tabindex="0">
+        <div class="switch">
+          <input type="checkbox" name="remember_my_sign_in_method" tabindex="-1" {{ if .Data.RememberedSignInMethod }} checked {{ end }}>
+          <span class="slider"></span>
+        </div>
+        <span>Remember me</span>
+      </label>
+    </div>
+  </div>
+
+  {{ if .Data.IDPDiscoveryEnabled }}
+    <input type="hidden" id="idp-discovery-authentication-id" name="authentication_id" value="">
+  {{ end }}
+
+</form>
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_static_idp.tmpl b/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_static_idp.tmpl
new file mode 100644
index 0000000..9346376
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/authorization/login/login_content_mode_static_idp.tmpl
@@ -0,0 +1,65 @@
+{{ define "login_content_mode_static_idp" }}
+
+<form action="?login_id={{ .Data.SessionID }}&prompt={{ .Data.Prompt }}&max_age={{ .Data.MaxAge }}" method="post" id="sign-in-form">
+  <input type="submit" class="non-visible" />
+
+  <input type="hidden" id="version" name="version" value="2">
+
+  {{ range .Data.FormError.Errors }}
+    <div id="auth-error-container">
+      <div class="error-container">
+        <i class="material-icons">error_outline</i>
+        {{ .Message }}
+      </div>
+    </div>
+  {{ end }}
+
+  {{ if gt (len .Data.Methods) 1 }}
+    <button id="go-back-button" type="submit" name="mode" value="select">
+      <i class="material-icons">chevron_left</i>
+      Back
+    </button>
+  {{ end }}
+
+  <h2 id="log-in-header">Sign into your account</h2>
+
+  <div id="username-password-form">
+    {{ .Data.CsrfField }}
+
+    {{ if and .Data.IDP.SettingsHint (gt (len .Data.IDP.Credentials.Users) 0) }}
+      <div id="login-hint-description">
+        <p>This is a mock IDP login page.</p>
+        <div>
+          <div>Username: <b>{{ (index .Data.IDP.Credentials.Users 0).Username }}</b></div>
+          <div>Password: <b>{{ (index .Data.IDP.Credentials.Users 0).Password }}</b></div>
+        </div>
+      </div>
+    {{ end }}
+
+    <div class="form-field">
+      <label for="text-field-username-input" class="label-with-link">
+        Username | Email | Phone
+      </label>
+      <input id="text-field-username-input" name="username" value="{{ .Data.Identifier }}">
+    </div>
+
+    <div class="form-field">
+      <label for="text-field-password-input">Password</label>
+      <div class="input-with-button">
+        <input id="text-field-password-input" name="password" type="password">
+        <button id="toggle-password-visibility-button" type="button" aria-label="Toggle password visibility">
+          <i id="toggle-password-visibility-icon" class="material-icons">visibility_off</i>
+        </button>
+      </div>
+    </div>
+
+    <input type="hidden" id="remember_my_sign_in_method" name="remember_my_sign_in_method" value="{{ if .Data.RememberMySignInMethod }}on{{ end }}">
+
+    <button id="sign-in-button" class="submit-button no-bottom-margin" type="submit" disabled>
+      Continue
+    </button>
+  </div>
+
+</form>
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/error/index.tmpl b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
index bc83180..e5685ab 100644
--- a/custom-theme-examples/financroo-demo/pages/error/index.tmpl
+++ b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
@@ -7,12 +7,11 @@
   <div class="header-container">
     {{ template "header" .Config }}
   </div>
-  <h3>This is customized</h3>
 
   <div id="error-container">
     <input type="hidden" id="error" value="{{ .Data.Error }}">
     <input type="hidden" id="cause" value="{{ .Data.Cause }}">
-    <img src="{{ .Config.Assets }}/static/images/no-idp.svg" alt="icon" />
+    <!-- <img src="{{ .Config.Assets }}/static/images/no-idp.svg" alt="icon" /> -->
     <div id="error-title">{{ .Data.Name }}</div>
     <div id="error-description">{{ .Data.Description }}.</div>
 
diff --git a/custom-theme-examples/financroo-demo/pages/identity/login/authn_mode_password.tmpl b/custom-theme-examples/financroo-demo/pages/identity/login/authn_mode_password.tmpl
new file mode 100644
index 0000000..b7b5fc2
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/identity/login/authn_mode_password.tmpl
@@ -0,0 +1,73 @@
+{{ define "authn_password" }}
+
+  <h2 id="log-in-header">Sign into your account</h2>
+
+  <div class="form-field">
+    <label for="text-field-username-input" class="label-with-link">
+      <span id="username-label">Username | Email | Phone</span>
+      <button id="not-you-button" type="button" class="non-visible">Not You?</button>
+    </label>
+    <input id="text-field-username-input" name="identifier" value="{{ .Data.Identifier }}">
+  </div>
+
+  <div class="form-field" id="password-container">
+    <label for="text-field-password-input">
+      <span id="password-label">Password</span>
+      <a href="{{ .Data.ResetPasswordPath }}" id="forgot-password" class="input-above-link">Forgot?</a>
+    </label>
+
+    <div class="input-with-button">
+      <input id="text-field-password-input" name="password" type="password">
+      <button id="toggle-password-visibility-button" type="button" aria-label="Toggle password visibility">
+        <i id="toggle-password-visibility-icon" class="material-icons">visibility_off</i>
+      </button>
+    </div>
+  </div>
+
+  <button class="submit-button" type="submit" id="sign-in-button">
+    Continue
+  </button>
+
+  {{ if .Data.AuthnModeSwitch }}
+
+    <div id="authn-mode-switch-container">
+
+
+      <div class="spacer-container">
+        <div>or sign in with</div>
+      </div>
+
+      <div class="form-field">
+
+        {{ if .Data.AuthenticationMechanismsAvailability.otp }}
+          <button class="href-card" type="submit" name="action" value="change_to_otp" id="login-option-code" style="display: flex">
+            <div>
+              <span class="href-card-avatar href-card-avatar-with-img">
+                <img src="{{ .Config.Assets }}/static/images/otp-icon.svg" alt="icon" />
+              </span>
+              <span>Verification Code</span>
+            </div>
+            <i class="material-icons">navigate_next</i>
+          </button>
+        {{ end }}
+
+        {{ if .Data.AuthenticationMechanismsAvailability.webauthn }}
+          <button class="href-card" type="submit" name="action" value="change_to_web_authn" id="login-option-web-authn">
+            <div>
+              <span class="href-card-avatar href-card-avatar-with-img">
+                <img src="{{ .Config.Assets }}/static/images/webauthn-icon.svg" alt="icon" />
+              </span>
+              <span>Passkey</span>
+            </div>
+            <i class="material-icons">navigate_next</i>
+          </button>
+        {{ end }}
+
+      </div>
+    </div>
+  {{ end }}
+
+  <input type="checkbox" name="passwordMode" id="passwordMode" checked class="non-visible">
+  <input type="hidden" name="authn_mode" value="password_view" id="authnView-input">
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl b/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
index e15807f..6687b22 100644
--- a/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
+++ b/custom-theme-examples/financroo-demo/pages/identity/login/index.tmpl
@@ -6,26 +6,35 @@
   {{ template "identity_login_scripts" . }}
   {{ template "password_visibility_script" . }}
 
-  <div class="header-container">
-    {{ template "header" .Config }}
-  </div>
-  <h3>This is customized</h3>
-
-  <div class="card">
-    <div class="content">
-
-      {{ if .Data.AuthnView }}
-        {{ template "authn" . }}
-      {{ else }}
-        <div class="alert-danger">No Authentication Mechanisms Enabled</div>
-      {{ end }}
-
+  <div class="content-wrapper">
+    <div class="content-flex" style="height: 100%;">
+      <div class="content-left">
+        <div class="content-background"></div>
+      </div>
+
+      <div class="content-right">
+        <div class="aut-content-wrapper">
+          <div class="header-container">
+            {{ template "header" .Config }}
+          </div>
+
+          <div class="card-right">
+            <div class="content">
+
+              {{ if .Data.AuthnView }}
+                {{ template "authn" . }}
+              {{ else }}
+                <div class="alert-danger">No Authentication Mechanisms Enabled</div>
+              {{ end }}
+
+            </div>
+          </div>
+
+          {{ template "footer" }}
+
+        </div>
+      </div>
     </div>
   </div>
 
-  <div class="cancel-container">
-    <a href="?login_id={{ .Data.SessionID }}&action=cancel" id="cancel" name="cancel">Cancel</a>
-  </div>
-
-  {{ template "footer" }}
 {{ end }}
diff --git a/custom-theme-examples/financroo-demo/shared/base.tmpl b/custom-theme-examples/financroo-demo/shared/base.tmpl
index bbccf91..d21cddc 100644
--- a/custom-theme-examples/financroo-demo/shared/base.tmpl
+++ b/custom-theme-examples/financroo-demo/shared/base.tmpl
@@ -5,7 +5,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>{{ template "title" . }}</title>
 
     <script src="{{ .Config.Assets }}/static/utils.js" nonce="{{.Config.Nonce}}"></script>
diff --git a/custom-theme-examples/financroo-demo/shared/header.tmpl b/custom-theme-examples/financroo-demo/shared/header.tmpl
new file mode 100644
index 0000000..c729f7a
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/shared/header.tmpl
@@ -0,0 +1,7 @@
+{{ define "header" }}
+
+<div class="aut-banner-logo">
+  <img src="https://financroo-demo.s3.us-west-2.amazonaws.com/financroo-logo.svg" alt="Cloudentity ACP">
+</div>
+
+{{ end }}
diff --git a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
index 01236f6..c14ce8b 100644
--- a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
+++ b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
@@ -13,14 +13,15 @@
   }
 
   :root {
-    --mdc-theme-primary: #0083ff;
+    /* --mdc-theme-primary: #0083ff; */
+    --mdc-theme-primary: #1f2d48;
     --mdc-theme-secondary: #0083ff;
     --mdc-theme-background: #f7faff;
     --header: #434656;
   }
 
   body {
-    background-color: var(--mdc-theme-background);
+    /* background-color: var(--mdc-theme-background); */
     margin: 0;
   }
 
@@ -56,10 +57,12 @@
   }
 
   .aut-banner-logo img {
-    height: 24px;
-    width: auto;
-    max-width: 350px;
-    object-fit: contain;
+    /* height: 24px; */
+    /* width: auto; */
+    /* max-width: 350px; */
+    /* object-fit: contain; */
+    margin-top: 25px;
+    margin-bottom: 44px;
   }
 
   .demo-info {
@@ -239,7 +242,7 @@
   #cancel {
     font-size: 12px;
     font-weight: 600;
-    margin-left: 32px;
+    /* margin-left: 32px; */
     line-height: 24px;
   }
 
@@ -298,8 +301,8 @@
     align-items: center;
     justify-content: center;
     text-transform: uppercase;
-    height: 66px;
-    background: var(--header);
+    /* height: 66px; */
+    /* background: var(--header); */
     position: relative;
   }
 
@@ -309,11 +312,12 @@
   }
 
   .card {
-    max-width: 480px;
+    /* max-width: 480px; */
+    max-width: 600px;
     margin: 80px auto 20px auto;
     margin-bottom: 20px;
-    border: solid 1px rgb(0, 0, 0, 0.1);
-    background-color: white;
+    /* border: solid 1px rgb(0, 0, 0, 0.1); */
+    /* background-color: white; */
   }
 
   .color-bar {
@@ -349,14 +353,18 @@
   }
 
   .content {
-    padding: 32px;
+    /* padding: 32px; */
   }
 
   .content h2 {
-    font-weight: normal;
-    font-size: 28px;
+    /* font-weight: normal; */
+    font-weight: 600;
+    color: #626576;
+    /* font-size: 28px; */
+    font-size: 18px;
     line-height: 40px;
-    margin: 0 0 27px;
+    /* margin: 0 0 27px; */
+    margin: 0 0 14px;
   }
 
   .content input {
@@ -921,8 +929,10 @@
   }
 
   .cancel-container {
-    max-width: 480px;
-    margin: 0 auto;
+    /* max-width: 480px; */
+    max-width: 600px;
+    /* margin: 0 auto; */
+    margin-top: 25px;
   }
 
   .quick-access-content {
@@ -1517,6 +1527,101 @@
   .small-icon {
     width: 24px;
   }
+
+  /* Styles for custom classes */
+  .content-wrapper {
+    height: 100vh;
+  }
+
+  .content-flex {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+  }
+
+  .content-background {
+    width: 100%;
+    height: 100%;
+    background-image: url('https://financroo-demo.s3.us-west-2.amazonaws.com/background-login.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  .content-left {
+    box-sizing: border-box;
+    margin: 0px;
+    flex-direction: row;
+  }
+
+  .content-right {
+    box-sizing: border-box;
+    margin: 0px;
+    flex-direction: row;
+    flex-basis: 100%;
+    -webkit-box-flex: 0;
+    flex-grow: 0;
+    max-width: 100%;
+  }
+
+  @media (min-width: 1280px) {
+    .content-left {
+      flex-basis: 58.3333%;
+      -webkit-box-flex: 0;
+      flex-grow: 0;
+      max-width: 58.3333%;
+    }
+
+    .content-right {
+      flex-basis: 41.6667%;
+      -webkit-box-flex: 0;
+      flex-grow: 0;
+      max-width: 41.6667%;
+    }
+  }
+
+  @media (min-width: 480px) {
+    .content-left {
+      flex-basis: 50%;
+      -webkit-box-flex: 0;
+      flex-grow: 0;
+      max-width: 50%;
+    }
+
+    .content-right {
+      flex-basis: 50%;
+      -webkit-box-flex: 0;
+      flex-grow: 0;
+      max-width: 50%;
+    }
+  }
+
+  .card-right {
+    width: 100%;
+  }
+
+  @media (min-width: 1280px) {
+    .card-right {
+      width: 500px;
+    }
+  }
+
+  .aut-content-wrapper {
+    height: calc(100vh - 90px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    -webkit-box-pack: center;
+    justify-content: center;
+    padding: 45px;
+  }
+
+  @media (min-width: 1280px) {
+    .aut-content-wrapper {
+      padding: 45px 80px;
+    }
+  }
 </style>
 
 {{ end }}

From daa8322ab326e6503ddcaa65a87035d78ac58759 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Mon, 27 Mar 2023 10:57:49 -0700
Subject: [PATCH 06/10] Styling refinements

---
 .../financroo-demo/pages/error/index.tmpl     |  6 ++-
 .../shared/styles_financroo.tmpl              | 39 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/custom-theme-examples/financroo-demo/pages/error/index.tmpl b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
index e5685ab..828fd5b 100644
--- a/custom-theme-examples/financroo-demo/pages/error/index.tmpl
+++ b/custom-theme-examples/financroo-demo/pages/error/index.tmpl
@@ -13,7 +13,11 @@
     <input type="hidden" id="cause" value="{{ .Data.Cause }}">
     <!-- <img src="{{ .Config.Assets }}/static/images/no-idp.svg" alt="icon" /> -->
     <div id="error-title">{{ .Data.Name }}</div>
-    <div id="error-description">{{ .Data.Description }}.</div>
+
+    <div class="error-container">
+      <i class="material-icons">error_outline</i>
+      {{ .Data.Description }}.
+    </div>
 
     {{ if .Data.Hint  }}
       <div id="error-hint">{{ .Data.Hint }}</div>
diff --git a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
index c14ce8b..56e9a76 100644
--- a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
+++ b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
@@ -102,7 +102,7 @@
     margin-bottom: 12px;
     font-size: 28px;
     line-height: 40px;
-    color: #626576;
+    color: #cf3228;
   }
 
   #error-description {
@@ -259,7 +259,7 @@
     font-size: 12px;
     justify-content: center;
     color: #626576;
-    margin: 80px 0 32px 0;
+    margin: 50px 0 32px 0;
     width: 100%;
     line-height: 24px;
   }
@@ -314,16 +314,16 @@
   .card {
     /* max-width: 480px; */
     max-width: 600px;
-    margin: 80px auto 20px auto;
+    margin: 40px auto 20px auto;
     margin-bottom: 20px;
     /* border: solid 1px rgb(0, 0, 0, 0.1); */
     /* background-color: white; */
   }
 
   .color-bar {
-    height: 8px;
-    background-color: var(--mdc-theme-primary);
-    border-radius: 4px 4px 0 0;
+    /* height: 8px; */
+    /* background-color: var(--mdc-theme-primary); */
+    /* border-radius: 4px 4px 0 0; */
   }
 
   .header {
@@ -771,8 +771,9 @@
   }
 
   .consent-header {
-    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-    border-radius: 0;
+    /* border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
+    /* border-radius: 0; */
+    margin-bottom: 20px;
   }
 
   .consent-footer {
@@ -1565,35 +1566,35 @@
     max-width: 100%;
   }
 
-  @media (min-width: 1280px) {
+  @media (min-width: 480px) {
     .content-left {
-      flex-basis: 58.3333%;
+      flex-basis: 50%;
       -webkit-box-flex: 0;
       flex-grow: 0;
-      max-width: 58.3333%;
+      max-width: 50%;
     }
 
     .content-right {
-      flex-basis: 41.6667%;
+      flex-basis: 50%;
       -webkit-box-flex: 0;
       flex-grow: 0;
-      max-width: 41.6667%;
+      max-width: 50%;
     }
   }
 
-  @media (min-width: 480px) {
+  @media (min-width: 1280px) {
     .content-left {
-      flex-basis: 50%;
+      flex-basis: 58.3333%;
       -webkit-box-flex: 0;
       flex-grow: 0;
-      max-width: 50%;
+      max-width: 58.3333%;
     }
 
     .content-right {
-      flex-basis: 50%;
+      flex-basis: 41.6667%;
       -webkit-box-flex: 0;
       flex-grow: 0;
-      max-width: 50%;
+      max-width: 41.6667%;
     }
   }
 
@@ -1601,7 +1602,7 @@
     width: 100%;
   }
 
-  @media (min-width: 1280px) {
+  @media (min-width: 1580px) {
     .card-right {
       width: 500px;
     }

From f7e1ff2661c0ac2babfa3133fe6c2a4f19ac1aba Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Mon, 27 Mar 2023 11:44:54 -0700
Subject: [PATCH 07/10] Styling refinements for card element on mobile view

---
 .../financroo-demo/shared/styles_financroo.tmpl             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
index 56e9a76..10f74d7 100644
--- a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
+++ b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
@@ -1602,9 +1602,9 @@
     width: 100%;
   }
 
-  @media (min-width: 1580px) {
-    .card-right {
-      width: 500px;
+  @media (max-width: 650px) {
+    .card {
+      margin: 15px 20px 20px 20px;
     }
   }
 

From 50357a4be2f30b36961e40a22457aeb7ff9f36e9 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Mon, 27 Mar 2023 12:11:11 -0700
Subject: [PATCH 08/10] Docs improvements

---
 Makefile  | 2 +-
 README.md | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/Makefile b/Makefile
index 2c2f758..8946a7f 100644
--- a/Makefile
+++ b/Makefile
@@ -10,8 +10,8 @@
 CLIENT_ID	= PUT_YOUR_CLIENT_ID_HERE
 CLIENT_SECRET	= PUT_YOUR_CLIENT_SECRET_HERE
 TENANT_ID	= your-tenant
-SERVER_ID	= your-workspace-id
 ISSUER_URL	= https://your-tenant.your-region.authz.cloudentity.io/your-tenant/admin
+SERVER_ID	= your-workspace-id
 THEME_ID	= demo
 THEME_DIR = theme
 #
diff --git a/README.md b/README.md
index 45489ee..9fb2a49 100644
--- a/README.md
+++ b/README.md
@@ -25,9 +25,12 @@ If a situation comes up in which it's absolutely necessary for someone to make a
 
 ## How to use the Makefile/CLI
 
+Prerequisites:
+- `jq` - A command line [JSON processor](https://github.com/stedolan/jq).
+
 You will need to create an ACP Client named 'manage-themes' in the Admin workspace with the application type `Service`.
 
-> Note: If the `Service` application type is not available, in the Admin workspace, navigate to "Auth Setttings > OAuth," and under "Allowed Grant types," make sure "Client credentials" is selected.
+> **Note:** If the `Service` application type is not available, in the Admin workspace, navigate to "Auth Settings > OAuth," and under "Allowed Grant types," make sure "Client credentials" is selected.
 
 Confirm these OAuth settings after you have created the client:
 
@@ -40,12 +43,14 @@ Now create a file named `Makefile.inc` that overrides the following default valu
 CLIENT_ID	= PUT_YOUR_CLIENT_ID_HERE
 CLIENT_SECRET	= PUT_YOUR_CLIENT_SECRET_HERE
 TENANT_ID	= your-tenant
-SERVER_ID	= your-workspace-id
 ISSUER_URL	= https://your-tenant.your-region.authz.cloudentity.io/your-tenant/admin
+SERVER_ID	= your-workspace-id
 THEME_ID	= demo
 THEME_DIR = theme
 ```
 
+> **Note:** The `ISSUER_URL` is related to the OAuth client in the Admin workspace, thus the path pattern is `your-tenant/admin`. The `SERVER_ID` refers to the ID of the **workspace** to which the theme is to be bound. **NEVER** put `admin` as the value for `SERVER_ID`, as using a custom theme that is bound to the admin workspace has the potential to lock you out of your tenant if you make an edit in the custom theme templates that results in certain types of errors. Always use a dedicated test workspace for actively developing the theme.
+
 **IMPORTANT:** When working with a "vanity domain" that does not have a tenant ID in the URL params for API requests, leave the value of the `TENANT_ID` variable blank in the `Makefile.inc`, and set the value of `ISSUER_URL` without the `TENANT_ID` param, as shown below:
 
 ```

From 9a8d0923340dce4e4eb6288870bc63421338c057 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Tue, 28 Mar 2023 18:12:35 -0700
Subject: [PATCH 09/10] Fix styles for long page content on mobile devices

---
 .../financroo-demo/shared/styles_financroo.tmpl             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
index 10f74d7..9a871f7 100644
--- a/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
+++ b/custom-theme-examples/financroo-demo/shared/styles_financroo.tmpl
@@ -1609,18 +1609,18 @@
   }
 
   .aut-content-wrapper {
-    height: calc(100vh - 90px);
+    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     -webkit-box-pack: center;
     justify-content: center;
-    padding: 45px;
+    padding: 0 45px;
   }
 
   @media (min-width: 1280px) {
     .aut-content-wrapper {
-      padding: 45px 80px;
+      padding: 0 80px;
     }
   }
 </style>

From d6fc8a7b687fff6305b2a740bed36b428a37fa31 Mon Sep 17 00:00:00 2001
From: Caleb Sattgast <csattgast@cloudentity.com>
Date: Wed, 29 Mar 2023 12:12:08 -0700
Subject: [PATCH 10/10] Add customized self-register page

---
 .../pages/identity/register/index.tmpl        | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 custom-theme-examples/financroo-demo/pages/identity/register/index.tmpl

diff --git a/custom-theme-examples/financroo-demo/pages/identity/register/index.tmpl b/custom-theme-examples/financroo-demo/pages/identity/register/index.tmpl
new file mode 100644
index 0000000..dcd08bd
--- /dev/null
+++ b/custom-theme-examples/financroo-demo/pages/identity/register/index.tmpl
@@ -0,0 +1,47 @@
+{{ template "base" . }}
+
+{{ define "title" }}Register{{ end }}
+
+{{ define "content" }}
+
+<div class="content-wrapper">
+  <div class="content-flex" style="height: 100%;">
+    <div class="content-left">
+      <div class="content-background"></div>
+    </div>
+
+    <div class="content-right">
+      <div class="aut-content-wrapper">
+
+        <div class="header-container">
+          {{ template "header" .Config }}
+        </div>
+
+        {{ template "identity_register_scripts" . }}
+        {{ template "password_visibility_script" . }}
+        {{ template "submit_button_disabling_script" . }}
+
+        <div class="card-right">
+          <div class="content">
+            <h2>Sign up for a new account</h2>
+
+            {{ template "form" . }}
+
+              {{ range .Data.FormError.Errors }}
+                {{ template "error_message" . }}
+              {{ end }}
+
+            <div class="buttons-container">
+              <a href="{{ .Data.LoginPath }}">Back to sign in</a>
+            </div>
+          </div>
+        </div>
+
+        {{ template "footer" }}
+
+      </div>
+    </div>
+  </div>
+</div>
+
+{{ end }}