initial implementation

Dockerfile

@@ -0,0 +1,3 @@
+FROM quay.io/keycloak/keycloak:latest
+
+COPY ["./juice", "/opt/jboss/keycloak/themes/juice/"]

README.md

@@ -1,2 +1,45 @@
-# keycloak-themed
+# Keycloak image with juice theme inside
 
+A short project that inject juice theme into a docker image.
+Juice theme should be located in `./juice` folder.
+
+!!!IMPORTANT!!!: IF YOU MAKE AN UPDATE, PLEASE UPDATE THE VERSION.INI FILE ACORDING TO STANDARD VERSIONING RULES (NUMBERS ONLY).
+
+## Docker commands
+
+### Build the image
+Build an image with tag juice-keycloak.
+
+```bash
+docker build -t juice-keycloak .
+```
+
+### Stop previously running container
+```bash
+docker stop juice-keycloak
+```
+
+### Start a container
+```bash
+docker run --rm -it -d \
+  -p 8080:8080 \
+  -e KEYCLOAK_USER=admin \
+  -e KEYCLOAK_PASSWORD=admin \
+  -e DB_VENDOR=postgres \
+  -e DB_ADDR=172.17.0.1 \
+  -e DB_DATABASE=keycloak \
+  -e DB_USER=keycloak \
+  -e DB_PASSWORD=keycloak \
+  --name juice-keycloak \
+  juice-keycloak
+```
+
+Linux: PGHOST=172.17.0.1
+Mac&Win: PGHOST=host.docker.internal
+
+## Testing
+There is a file `url.test.js` that will generate a login URL. After sucessfull login, provide the redirect url from the browser as an argument for the script to acquire tokens.
+
+The script includes installable package listed at the top.
+
+Change configuration inside of the script according to your realm settings.

build.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+function cleanup {
+    if [ ! -z "${RPM_BUILD_ROOT}" ] && [ -d "${RPM_BUILD_ROOT}" ] && [ "${RPM_BUILD_ROOT}" != "./" ]
+    then
+        rm -rf "${RPM_BUILD_ROOT}"
+    fi
+}
+export SOURCE_DIR=`dirname $0`    
+echo "${SOURCE_DIR}" |grep -q "^\."     
+if [ $? -eq 0 ]
+then
+    echo "sourcdir is ."
+    export SOURCE_DIR="`pwd`/"
+fi
+echo "${SOURCE_DIR}" |grep -q "^/" 
+if [ $? -ne 0 ]
+then
+    export SOURCE_DIR="`pwd`/`dirname $0`"
+fi    
+echo "SOURCE_DIR: ${SOURCE_DIR}"
+export RELEASE_VERSION=`cat version.ini`
+if [ "${docker_registry}" != "" ] || [ "${1}" == "docker-image" ] || [ "${2}" == "docker-image" ] 
+then    
+    docker build -t ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:${RELEASE_VERSION} -t ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:latest . &&
+    docker login --username ${docker_registry_username} --password ${docker_registry_password} ${docker_registry} &&
+    docker push ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:${RELEASE_VERSION} &&
+    docker push ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:latest
+    exit $?
+fi
+
+
+if [ "${BUILD_RPM}" != "" ] || [ "${1}" == "rpm" ] || [ "${2}" == "rpm" ] 
+then
+    
+    export _RPMBUILD_DIR="${RPMBUILD_DIR:-/tmp/rpmbuild-juice-keycloak}"
+    export RPM_BUILD_ROOT="${RPM_BUILD_ROOT:-/tmp/build-juice-keycloak}"
+    if [ ! -d "${_RPMBUILD_DIR}" ]
+    then
+        mkdir -p "${_RPMBUILD_DIR}"
+        mkdir -p "${_RPMBUILD_DIR}"/RPMS/noarch
+        mkdir -p "${_RPMBUILD_DIR}"/SOURCES
+        mkdir -p "${_RPMBUILD_DIR}"/SPECS
+        mkdir -p "${_RPMBUILD_DIR}"/SRPMS
+    fi
+    if [ ! -d "${RPM_BUILD_ROOT}" ]
+    then
+        mkdir -p "${RPM_BUILD_ROOT}"
+    fi    
+    rpmbuild --target noarch -bb "${SOURCE_DIR}/juice-keycloak.spec" --buildroot="${RPM_BUILD_ROOT}" --define "_topdir ${_RPMBUILD_DIR}" --define "_release_version ${RELEASE_VERSION}"
+fi
+
+if [ "${RUN_HOOKS}" != "" ]
+then    
+    if [ "${BUILD_RPM}" != "" ] || [ "${1}" == "rpm" ] || [ "${2}" == "rpm" ] 
+    then        
+        run-parts "${SOURCE_DIR}/build-hooks/rpm"
+    fi
+    if [ "${docker_registry}" != "" ] || [ "${1}" == "docker-image" ] || [ "${2}" == "docker-image" ] 
+    then    
+        run-parts "${SOURCE_DIR}/build-hooks/docker-image"
+    fi
+fi
+cleanup

juice/account/resources/css/account.css

@@ -0,0 +1,277 @@
+html {
+    height: 100%;
+}
+
+body {
+    background-color: #F9F9F9;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+header .navbar {
+    margin-bottom: 0;
+    min-height: inherit;
+}
+
+.header .container {
+    position: relative;
+}
+
+.navbar-title {
+    background-image: url('../img/logo.png');
+    height: 25px;
+    background-repeat: no-repeat;
+    width: 123px;
+    margin: 3px 10px 5px;
+    text-indent: -99999px;
+}
+
+.navbar-pf .navbar-utility {
+	right: 20px;
+    top: -34px;
+    font-size: 12px;
+}
+
+.navbar-pf .navbar-utility > li > a {
+    color: #fff !important;
+    padding-bottom: 12px;
+    padding-top: 11px;
+    border-left: medium none;
+}
+
+.container {
+    height: 100%;
+}
+
+.content-area {
+    background-color: #fff;
+    border-color: #CECECE;
+    border-style: solid;
+    border-width: 0 1px;
+    height: 100%;
+    padding: 0 30px;
+}
+
+.margin-bottom {
+    margin-bottom: 10px;
+}
+
+/* Sidebar */
+
+.bs-sidebar {
+    background-color: #f9f9f9;
+    padding-top: 44px;
+    padding-right: 0;
+    padding-left: 0;
+    z-index: 20;
+}
+.bs-sidebar ul {
+    list-style: none;
+    padding-left: 12px;
+}
+
+.bs-sidebar ul li {
+    margin-bottom: 0.5em;
+    margin-left: -1em;
+}
+.bs-sidebar ul li a {
+    font-size: 14px;
+    padding-left: 25px;
+    color: #4d5258;
+    line-height: 28px;
+    display: block;
+    border-width: 1px 0 1px 1px;
+    border-style: solid;
+    border-color: #f9f9f9;
+}
+.bs-sidebar ul li a:hover,
+.bs-sidebar ul li a:focus {
+    text-decoration: none;
+    color: #777777;
+    border-right: 2px solid #aaa;
+}
+.bs-sidebar ul li.active a {
+    background-color: #c7e5f0;
+    border-color: #56bae0;
+    font-weight: bold;
+    background-image: url(../img/icon-sidebar-active.png);
+    background-repeat: no-repeat;
+    background-position: right center;
+}
+
+.bs-sidebar ul li.active a:hover {
+	border-right: none;
+}
+
+
+.content-area h2 {
+    font-family: "Open Sans", sans-serif;
+    font-weight: 100;
+    font-size: 24px;
+    margin-bottom: 25px;
+    margin-top: 25px;
+}
+
+.subtitle {
+    text-align: right;
+    margin-top: 30px;
+    color: #909090;
+}
+
+.required {
+    color: #CB2915;
+}
+
+
+.alert {
+    margin-top: 30px;
+    margin-bottom: 0;
+}
+
+.feedback-aligner .alert {
+    background-position: 1.27273em center;
+    background-repeat: no-repeat;
+    border-radius: 2px;
+    border-width: 1px;
+    color: #4D5258;
+    display: inline-block;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    margin: 0;
+    padding: 0.909091em 3.63636em;
+    position: relative;
+    text-align: left;
+}
+.alert.alert-success {
+    background-color: #E4F1E1;
+    border-color: #4B9E39;
+}
+.alert.alert-error {
+    background-color: #F8E7E7;
+    border-color: #B91415;
+}
+.alert.alert-warning {
+    background-color: #FEF1E9;
+    border-color: #F17528;
+}
+.alert.alert-info {
+    background-color: #E4F3FA;
+    border-color: #5994B2;
+}
+
+.form-horizontal {
+    border-top: 1px solid #E9E8E8;
+    padding-top: 23px;
+}
+
+.form-horizontal .control-label {
+    color: #909090;
+    line-height: 1.4em;
+    padding-top: 5px;
+    position: relative;
+    text-align: right;
+    width: 100%;
+}
+
+.form-group {
+    position: relative;
+}
+
+.control-label + .required {
+    position: absolute;
+    right: -2px;
+    top: 0;
+}
+
+#kc-form-buttons {
+    text-align: right;
+    margin-top: 10px;
+}
+
+#kc-form-buttons .btn-primary {
+    float: right;
+    margin-left: 8px;
+}
+
+/* Authenticator page */
+
+ol {
+    padding-left: 40px;
+}
+
+ol li {
+    font-size: 13px;
+    margin-bottom: 10px;
+    position: relative;
+}
+
+ol li img {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    border: 1px solid #eee;
+}
+
+hr + .form-horizontal {
+    border: none;
+    padding-top: 0;
+}
+
+.kc-dropdown{
+    position: relative;
+}
+.kc-dropdown > a{
+    display:block;
+    padding: 11px 10px 12px;
+    line-height: 12px;
+    font-size: 12px;
+    color: #fff !important;
+    text-decoration: none;
+}
+.kc-dropdown > a::after{
+    content: "\2c5";
+    margin-left: 4px;
+}
+.kc-dropdown:hover > a{
+    background-color: rgba(0,0,0,0.2);
+}
+.kc-dropdown ul li a{
+    padding: 1px 11px;
+    font-size: 12px;
+    color: #000 !important;
+    border: 1px solid #fff;
+    text-decoration: none;
+    display:block;
+    line-height: 20px;
+}
+.kc-dropdown ul li a:hover{
+    color: #4d5258;
+    background-color: #d4edfa;
+    border-color: #b3d3e7;
+}
+.kc-dropdown ul{
+    position: absolute;
+    z-index: 2000;
+    list-style:none;
+    display:none;
+    padding: 5px 0px;
+    margin: 0px;
+    background-color: #fff !important;
+    border: 1px solid #b6b6b6;
+    border-radius: 1px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    background-clip: padding-box;
+    min-width: 100px;
+}
+.kc-dropdown:hover ul{
+    display:block;
+}
+
+
+#kc-totp-secret-key {
+    border: 1px solid #eee;
+    font-size: 16px;
+    padding: 10px;
+    margin: 50px 0;
+}

juice/account/theme.properties

@@ -0,0 +1,14 @@
+parent=base
+import=common/keycloak
+
+styles=css/account.css
+stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css
+
+##### css classes for form buttons
+# main class used for all buttons
+kcButtonClass=btn
+# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
+kcButtonPrimaryClass=btn-primary
+kcButtonDefaultClass=btn-default
+# classes defining size of the button
+kcButtonLargeClass=btn-lg

juice/admin/resources/css/styles.css

@@ -0,0 +1,480 @@
+html,body {
+    height: 100%;
+}
+
+form {
+    margin-top: 20px;
+}
+
+table {
+    margin-top: 20px;
+}
+
+.required {
+    color: #f00;
+}
+
+.tooltip-inner {
+    min-width: 200px;
+}
+
+.margin-top {
+    margin-top: 20px;
+}
+
+.no-margin-top {
+    margin-top: 0px !important;
+}
+
+table {
+    max-width: 100%;
+}
+
+td.clip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 0;
+}
+
+th.w-10 {
+    width: 10%;
+}
+
+th.w-15 {
+    width: 15%;
+}
+
+th.w-20 {
+    width: 20%;
+}
+
+
+th.w-25 {
+    width: 25%;
+}
+
+th.w-30 {
+    width: 30%;
+}
+
+
+th.w-35 {
+    width: 35%;
+}
+
+th.w-40 {
+    width: 40%;
+}
+
+/*********** Loading ***********/
+
+.loading {
+    background-color: #f5f5f5;
+    border: 1px solid #eee;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    padding: 2px 200px 2px 5px;
+}
+
+/*********** Feedback ***********/
+
+.feedback-aligner {
+    position: fixed;
+    top: 15px;
+    text-align: center;
+    width: 100%;
+    height: 0;
+    z-index: 100;
+}
+.feedback-aligner .alert {
+    border-radius: 2px;
+    border-width: 1px;
+    display: inline-block;
+    position: relative;
+}
+
+/*********** On-Off Switch  ***********/
+
+.onoffswitch {
+    -moz-user-select: none;
+    height: 26px;
+    position: relative;
+    width: 62px;
+}
+.onoffswitch .onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch .onoffswitch-label {
+    border: 1px solid #bbb;
+    border-radius: 2px;
+    cursor: pointer;
+    display: block;
+    overflow: hidden;
+    width: 62px;
+}
+.onoffswitch .onoffswitch-inner {
+    display: block;
+    margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+    width: 200%;
+}
+.onoffswitch .onoffswitch-inner > span {
+    -moz-box-sizing: border-box;
+    color: white;
+    float: left;
+    font-size: 11px;
+    font-family: "Open Sans", sans-serif;
+    font-weight: bold;
+    height: 24px;
+    line-height: 24px;
+    padding: 0;
+    width: 50%;
+}
+.onoffswitch .onoffswitch-switch {
+    background-image: linear-gradient(top, #fafafa 0%, #ededed 100%);
+    background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%);
+    background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%);
+    background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%);
+    background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed));
+    border: 1px solid #aaa;
+    border-radius: 2px;
+    bottom: 0;
+    margin: 0;
+    position: absolute;
+    right: 39px;
+    top: 0;
+    transition: all 0.3s ease-in 0s;
+    -webkit-transition: all 0.3s ease-in 0s;
+    width: 23px;
+}
+.onoffswitch .onoffswitch-inner .onoffswitch-active {
+    background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+    background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+    background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+    background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+    background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3));
+    color: #FFFFFF;
+    padding-left: 10px;
+}
+.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-active,
+.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-inactive {
+    background-image: none;
+    background-color: #e5e5e5;
+    color: #9d9fa1;
+}
+.onoffswitch .onoffswitch-inner .onoffswitch-inactive {
+    background: linear-gradient(#fefefe, #e8e8e8) repeat scroll 0 0 transparent;
+    color: #4d5258;
+    padding-right: 10px;
+    text-align: right;
+}
+.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0;
+}
+
+
+/*********** Select 2 ***********/
+
+.select2-container {
+    width: 100%;
+}
+
+.select2-container-multi .select2-choices .select2-search-field {
+    height: 26px;
+}
+
+/*********** html select ********/
+.overflow-select {
+    overflow: auto;
+}
+
+
+/*********** New Menu ***********/
+
+
+.sidebar-pf-left{
+  background: #292e34;
+}
+
+.sidebar-pf .nav-pills > li a i, .sidebar-pf .nav-pills > li a span{
+  color:  #72767b;
+  display: inline-block;
+  margin-right: 10px;
+}
+.sidebar-pf .nav-pills > li > a{
+  color: #dbdada;
+  padding: 0px 20px 0 30px!important;
+  line-height: 30px;
+  border-left-width: 12px;
+  border-left-style:  solid;
+  border-left-color: #292e34;
+  margin-left: -6px;
+}
+
+.sidebar-pf .nav-pills > li > a:hover{
+  background: #393f44;
+  border-color:#292e34;
+  border-left-color: #393f44;
+  color: #fff;
+}
+
+.sidebar-pf .nav-pills > li > a:after{
+  display: none!important;
+}
+
+
+.sidebar-pf .nav-pills > li.active > a {
+  color: #fff;
+  background: #393f44!important;
+  border-bottom: 1px solid #000!important;
+  border-top: 1px solid #000!important;
+  border-left-color: #39a5dc!important;
+}
+
+.sidebar-pf .nav-pills > li.active a i, .sidebar-pf .nav-pills > li.active a span{
+  color: #39a5dc;
+}
+
+/*********** Realm selector ***********/
+
+.realm-selector{
+  color: #fff;
+  margin: 0 -20px;
+  position: relative;
+}
+
+.realm-dropmenu{
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background: #fff;
+}
+
+.realm-selector:hover .realm-dropmenu{
+  display: block;
+}
+
+.realm-add{
+  padding: 10px;
+}
+
+.realm-selector h2{
+  font-size: 16px;
+  line-height: 60px;
+  padding: 0 20px;
+  margin: 0;
+  border-bottom: 1px solid #d5d5d6;
+}
+
+.realm-selector h2 i{
+  display: inline-block;
+  float: right;
+  line-height: 60px;
+}
+
+
+.realm-selector ul{
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+  max-height: 200px;
+  overflow-y:auto;
+}
+
+
+.realm-selector ul li a{
+  line-height: 60px;
+  padding: 0 20px;
+  border-bottom: 1px solid #d5d5d6;
+  line-height: 39px;
+  display: block;
+  font-size: 14px;
+}
+
+
+/*********** Overwrites header defaults ***********/
+
+.navbar-pf{
+  border-top: none!important;
+}
+
+.navbar-pf .navbar-brand {
+  padding: 0;
+  height: 56px;
+  line-height: 56px;
+  background-position: center center;
+  background-image: url('../img/keyclok-logo.png');
+  background-size: 148px 30px;
+  background-repeat: no-repeat;
+  width: 148px;
+}
+
+.navbar-pf .navbar-utility .dropdown-toggle {
+    padding: 23px !important;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+h1 i {
+    color: #999999;
+    font-size: 18px;
+    margin-left: 10px;
+}
+
+/* Action cell */
+.kc-action-cell {
+    background-color: #eeeeee;
+    background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%);
+    background-repeat: repeat-x;
+
+    text-align: center;
+    vertical-align: middle;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    cursor:pointer;
+}
+
+.kc-action-cell:hover {
+    background-color: #eeeeee;
+    background-image: none;
+}
+
+.kc-sorter span {
+    margin-left: 10px;
+}
+
+
+/* Time selector */
+
+.time-selector input {
+    display: inline-block;
+    width: 120px;
+    padding-right: 0;
+    margin-right: 0;
+}
+
+.time-selector select {
+    display: inline-block;
+    width: 80px;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.ace_editor {
+    height: 600px;
+    width: 100%;
+}
+
+.kc-button-input-file input {
+    float: left;
+    width: 73%;
+}
+
+.kc-button-input-file label {
+    float: left;
+    margin-left: 2%;
+    width: 25%;
+}
+
+table.kc-authz-table-expanded {
+    margin-top: 0px !important;
+}
+
+.no-gutter > [class*='col-'] {
+    padding-right:0!important;
+    padding-left:0!important;
+}
+
+.password-conceal {
+  font-family: 'text-security-disc';
+  font-size: 14px;
+}
+
+/* Deactivation styles for user-group membership tree models */
+
+div[tree-model] li .deactivate {
+    color: #4a5053;
+    opacity: 0.4;
+}
+
+div[tree-model] li .deactivate_selected {
+    background-color: #dcdcdc;
+    font-weight: bold;
+    padding: 1px 5px;
+}
+
+/* search highlighting */
+
+div[tree-model] li .highlight {
+    background-color: #aaddff;
+}
+
+/* Manage credentials */
+table.credentials-table {
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+table.credentials-table td {
+    vertical-align: middle !important;
+}
+
+table.credentials-table input[type='text'] {
+    width: 100%;
+}
+
+td.credential-arrows-cell {
+    width: 75px;
+}
+
+td.credential-label-cell {
+    padding: 5px !important;
+}
+
+td.credential-action-cell {
+    padding: 0px !important;
+}
+
+td.credential-action-cell div.kc-action-cell {
+    width: 100%;
+    height: 36px;
+    line-height: 34px;
+}
+
+td.credential-action-cell.expanded div.kc-action-cell {
+    border-bottom: 1px solid #d1d1d1;
+}
+
+table.credential-data-table td {
+    word-break: break-all;
+}
+
+table.credential-data-table tr:first-child td {
+    border-top: 0;
+}
+
+table.credential-data-table td:first-child {
+    width: 150px;
+}
+
+table.credential-data-table td.key {
+    text-align: right;
+    font-weight: bold;
+}
+

juice/admin/resources/img/keyclok-logo.svg

@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
+	 viewBox="-145.2 359 325.4 77.2" enable-background="new -145.2 359 325.4 77.2" xml:space="preserve">
+<g>
+	<g>
+		<path fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1c-14-2.9-10.9,6-8.3,14
+			c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6c-0.5-1-0.2-2.4,0.6-3.1
+			c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1C-81.9,398.7-80.7,395-79.1,393.1z"
+			/>
+		<path fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3
+			c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1
+			v37.2l2.7,2.8h1.2l5.7-5.8v-34.2c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5
+			c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5C-108.7,369.5-111.6,367.9-112.4,367.4z"/>
+	</g>
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-227.7191" y1="2220.7964" x2="-165.056" y2="2220.7964" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#FDFDFD"/>
+		<stop  offset="0.1452" style="stop-color:#F4F5F5"/>
+		<stop  offset="0.6844" style="stop-color:#D9DBDB"/>
+		<stop  offset="1" style="stop-color:#CFD1D1"/>
+	</linearGradient>
+	<path fill="url(#SVGID_1_)" d="M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1
+		c-14-2.9-10.9,6-8.3,14c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6
+		c-0.5-1-0.2-2.4,0.6-3.1c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1
+		C-81.9,398.7-80.7,395-79.1,393.1z"/>
+	
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="192.3203" y1="1507.8835" x2="184.0467" y2="1507.8835" gradientTransform="matrix(1 0 0 1 -302 -1102)">
+		<stop  offset="0" style="stop-color:#E6E6E6"/>
+		<stop  offset="1" style="stop-color:#B2B3B3"/>
+	</linearGradient>
+	<path fill="url(#SVGID_2_)" d="M-115,391.3c0,5,0.7,22.8,4.5,30.4l-8.7-0.2v-31.5L-115,391.3z"/>
+	
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-200.8627" y1="2227.3811" x2="-193.8624" y2="2207.8804" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#F6F6F6"/>
+		<stop  offset="1" style="stop-color:#B2B3B3"/>
+	</linearGradient>
+	<path fill="url(#SVGID_3_)" d="M-134.6,403.1c-2.8-7.5-6.5-16.6,7.5-13.7c3.2,0.7,6.9,0.7,9.5-0.1c4.3-1.3,10-2.4,14.5,1.5
+		c8.9,7.7,16.9,8.3,24.1,3.3c-1.6,1.9-3.1,5.6-3.3,7.1c-0.2,1.3-1.1,1.9-2.4,2.4c-18.5,7.5-15.4-5.3-21.4-9.5
+		c-3.2-2.2-7.7-2.1-11.2-0.8c-3.2,1.2-6.4,0.9-9.8-0.4C-132.9,390.8-136.7,391.9-134.6,403.1z"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-miterlimit="10" x1="-117.4" y1="421.8" x2="-117.4" y2="390.6"/>
+	<g opacity="0.75">
+		<path fill="#FFFFFF" d="M-110.3,389c2.7,0,4.9,0.7,6.8,2.3c5.5,4.6,10.6,6.8,15.6,6.8c1.5,0,2.9-0.2,4.4-0.6
+			c-0.3,0.9-0.6,1.6-0.7,2.1c-0.4,1.4-1.6,1.8-4.4,2.4c-1.5,0.3-3.1,0.7-4.7,1.5c-1.6,0.8-2.5,2.3-2.5,3.9c0,1.5,0.9,2.8,2.4,3.5
+			c1.2,0.5,1.5,1.1,1.5,1.4c0,0.3-0.3,0.5-0.5,0.6c-0.6,0.3-1.2,0.4-2.1,0.4c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.5,0
+			c-1.6,0-3.4,0.2-5.2,1.7c-1.5,1.3-2,3.7-1.1,5.6c0.1,0.3,0.1,0.4,0.1,0.4c-0.1,0.1-0.8,0.6-2.6,0.6c-1.8,0-4.1-0.4-6.7-1.2
+			c-2-0.6-4.5-0.9-7.5-0.9c-3.8,0-8.4,0.6-12.6,1.5c-0.4,0.1-0.9,0.1-1.5,0.1c-1.9,0-4.2-0.5-5.7-1.6c1.7,0,3.3-0.9,4.4-2.4
+			c1.3-1.8,3.2-6.3,0.2-15.3l-0.1-0.2c-1.3-3.9-2.9-8.8-1.5-10.7c0.5-0.7,1.6-1.1,3.4-1.1c1.2,0,2.6,0.2,4.3,0.5
+			c1.8,0.4,3.6,0.6,5.4,0.6c1.9,0,3.7-0.2,5.1-0.7C-115.4,389.7-112.9,389-110.3,389 M-110.3,387c-2.7,0-5.2,0.6-7.3,1.3
+			c-1.3,0.4-2.9,0.6-4.6,0.6c-1.6,0-3.4-0.2-5-0.5c-1.9-0.4-3.4-0.6-4.7-0.6c-8.5,0-5.9,7.7-3.6,14.6c3.4,10.4,0.3,15.1-2.7,15.1
+			c-1.2,0-2.5-0.8-3.3-2.3c-1.5,5.6,4.8,7.9,9,7.9c0.7,0,1.4-0.1,2-0.2c3.7-0.8,8.1-1.5,12.2-1.5c2.5,0,4.9,0.2,6.9,0.8
+			c3,0.9,5.5,1.3,7.3,1.3c4,0,5.3-1.8,4.2-3.9c-0.5-1-0.2-2.4,0.6-3.1c1.4-1.2,2.7-1.3,3.9-1.3c0.3,0,0.7,0,1,0c1,0,2-0.1,3.1-0.7
+			c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1c0.4-1.5,1.7-5.2,3.3-7.1c-2.9,2-5.9,3-8.9,3
+			c-4.5,0-9.2-2.2-14.3-6.4C-104.7,387.7-107.6,387-110.3,387L-110.3,387z M-79.1,393.1L-79.1,393.1L-79.1,393.1z"/>
+	</g>
+	<path fill="none" stroke="#034672" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+		M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1c-14-2.9-10.9,6-8.3,14
+		c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6c-0.5-1-0.2-2.4,0.6-3.1
+		c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1C-81.9,398.7-80.7,395-79.1,393.1z"/>
+	<path fill="#034672" d="M-134.6,402.1c-2.8-7.5-6.5-16.6,7.5-13.7c3.2,0.7,6.9,0.7,9.5-0.1c4.3-1.3,10-2.4,14.5,1.5
+		c8.9,7.7,16.9,8.3,24.1,3.3c-1.6,1.9-3.1,5.6-3.3,7.1c-0.2,1.3-1.1,1.9-2.4,2.4c-13.1,4.8-14.1-5.5-20.1-9.7
+		c-3.2-2.2-9-1.9-12.5-0.6c-3.2,1.2-6.4,0.9-9.8-0.4C-132.9,389.8-136.7,390.9-134.6,402.1z"/>
+	<path fill="#FFFFFF" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1
+		c-0.8,0.5-3.7,2-3.7,6.3c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7
+		c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1v37.2l2.7,2.8h1.2l5.7-5.8v-34.2c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7
+		c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5C-108.7,369.5-111.6,367.9-112.4,367.4z"/>
+	
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-217.9037" y1="2215.0122" x2="-187.068" y2="2207.345" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#B8D7E9"/>
+		<stop  offset="0.3324" style="stop-color:#CCE3F1"/>
+		<stop  offset="0.6937" style="stop-color:#DAEBF7"/>
+		<stop  offset="1" style="stop-color:#DFEEF9"/>
+	</linearGradient>
+	<path fill="url(#SVGID_4_)" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9v69.3l4.8-4.9v-34.2
+		c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5
+		C-108.7,369.5-111.6,367.9-112.4,367.4z"/>
+	
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-214.9444" y1="2190.8406" x2="-206.3191" y2="2233.0925" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#F1F9FE"/>
+		<stop  offset="0.4254" style="stop-color:#E9F5FD"/>
+		<stop  offset="1" style="stop-color:#E4F3FD"/>
+	</linearGradient>
+	<path fill="url(#SVGID_5_)" d="M-122.3,362.5c-2.1,0-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3
+		c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1
+		v37.2l2.7,2.8h1.2l0.9-0.9L-122.3,362.5L-122.3,362.5z"/>
+	<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M-122.6,362.5c1.9,0.9,3.4,2,4.2,2.4
+		c0.8,0.5,4,2.5,5.1,3.1c0.8,0.5,3.7,2,3.7,6.3c0,1.3,0,2.8,0,3.8c0,2.8-1.6,5-4.5,6.4c-1,0.5-1.8,1.4-1.8,3.6v1.2"/>
+	<path fill="none" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1
+		c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4
+		c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1v37.2l2.7,2.8h1.2l5.7-5.8v-34.2
+		c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5
+		C-108.7,369.5-111.6,367.9-112.4,367.4z"/>
+	<path fill="#E9F6FE" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M-107.5,392.7"/>
+	<g>
+		
+			<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-106.4885" y1="2203.667" x2="-106.4885" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_6_)" d="M-14.5,407.6h-11.6c0.3,2.3,1,3.9,2.1,4.7s2.9,1.2,5.5,1.2c3.4,0,7.4-0.2,12-0.7l0.9,6
+			c-3.3,1.6-8,2.4-14,2.4c-6,0-10.3-1.3-12.9-3.9c-2.6-2.6-3.8-6.9-3.8-12.9c0-6.3,1.2-10.7,3.7-13.2c2.5-2.5,6.7-3.8,12.6-3.8
+			c5.3,0,9.2,0.9,11.6,2.8c2.4,1.8,3.6,4.7,3.6,8.4c0,3-0.8,5.2-2.3,6.7C-8.5,406.8-11,407.6-14.5,407.6z M-26.3,401.8h9.1
+			c1.2,0,2-0.3,2.4-0.8c0.4-0.6,0.6-1.4,0.6-2.5c0-1.5-0.4-2.6-1.2-3.2c-0.8-0.6-2.2-0.9-4.3-0.9c-2.5,0-4.2,0.5-5.1,1.5
+			C-25.6,396.9-26.1,398.8-26.3,401.8z"/>
+		
+			<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-72.864" y1="2203.667" x2="-72.864" y2="2254.5503" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_7_)" d="M31,388.3l-11.4,32.6c-0.6,1.7-1.4,3.3-2.2,4.8c-0.9,1.5-2,2.9-3.4,4.3c-1.4,1.4-3.1,2.4-5.2,3
+			c-2.1,0.7-4.4,0.8-6.9,0.5L1,427.8c2.6-0.7,4.6-1.6,6.1-2.7c1.5-1.1,2.6-2.6,3.5-4.5l0.1-0.3H8.9c-1.6,0-2.6-0.8-3.1-2.3
+			l-10.5-29.8H5.6l6,20.8c0.4,1.5,0.7,3.1,1,4.8h0.8c0.1-0.5,0.3-1.3,0.7-2.4s0.5-1.9,0.7-2.4l5.9-20.8L31,388.3L31,388.3z"/>
+		
+			<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-41.775" y1="2203.667" x2="-41.775" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_8_)" d="M57.6,412.8l0.9,6.3c-3.3,1.4-7.5,2.1-12.4,2.1c-5.9,0-10.1-1.3-12.5-3.8
+			c-2.4-2.5-3.6-6.9-3.6-13.1c0-6.2,1.2-10.6,3.6-13.1c2.4-2.5,6.6-3.8,12.6-3.8c4.9,0,8.8,0.7,11.9,2l-1,6
+			c-4.7-0.1-7.8-0.1-9.2-0.1c-3,0-5,0.6-6.1,1.9c-1.1,1.3-1.7,3.6-1.7,7.2c0,3.5,0.6,5.9,1.7,7.2c1.1,1.3,3.1,1.9,6.1,1.9
+			C51.6,413.4,54.9,413.2,57.6,412.8z"/>
+		
+			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="8.9715" y1="2203.667" x2="8.9715" y2="2254.553" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_9_)" d="M95,387.4c6,0,10.2,1.3,12.7,3.9c2.5,2.6,3.7,7,3.7,13.1c0,6.2-1.2,10.5-3.7,13.1
+			c-2.5,2.5-6.7,3.8-12.7,3.8c-6,0-10.3-1.3-12.8-3.8c-2.5-2.5-3.7-6.9-3.7-13.1c0-6.2,1.2-10.6,3.7-13.2
+			C84.7,388.7,89,387.4,95,387.4z M95,394.6c-2.6,0-4.3,0.6-5.1,2c-0.9,1.3-1.3,3.9-1.3,7.8c0,3.8,0.4,6.4,1.3,7.7
+			c0.9,1.3,2.6,2,5.1,2c2.5,0,4.2-0.7,5.1-2c0.9-1.3,1.3-3.9,1.3-7.7c0-3.9-0.4-6.5-1.3-7.8C99.2,395.3,97.5,394.6,95,394.6z"/>
+		
+			<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="42.879" y1="2203.667" x2="42.879" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_10_)" d="M115.9,395.5l-0.9-6.5c5.8-1,11.4-1.6,16.7-1.6c4.3,0,7.5,0.9,9.6,2.6c2,1.8,3.1,4.8,3.1,9.2v21.2
+			h-7.6l-1-4.9c-3.2,3.8-7.2,5.7-11.9,5.7c-3.1,0-5.6-0.8-7.6-2.4s-2.9-3.9-2.9-6.8v-3.3c0-2.6,0.9-4.6,2.6-6
+			c1.7-1.4,4.1-2.1,7.2-2.1h11.5v-1.4c0-1.6-0.4-2.8-1.1-3.3c-0.7-0.6-2.1-0.8-4.1-0.8C125.9,394.9,121.4,395.1,115.9,395.5z
+			 M122.9,409.4v1.2c0,2.2,1.3,3.3,3.8,3.3c2.6,0,5.3-1,8-3.1v-4.5H126C124,406.4,122.9,407.4,122.9,409.4z"/>
+		
+			<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-136.063" y1="2203.667" x2="-136.063" y2="2254.5491" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_11_)" d="M-43.5,406.1c-0.9-1.6-1.9-2.7-3-3.5v-0.1c1.3-0.9,2.3-1.9,3-3.1l8.3-11.1H-46l-7.9,11.2h-3
+			c0.3-1.8,0.5-3.7,0.5-5.9v-18.8h-3l-6.7,9.5v36.1h9.6v-10.1c0-1.3-0.2-2.9-0.5-4.8h3.1l9,14.9H-34L-43.5,406.1z"/>
+		
+			<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-16.68" y1="2203.667" x2="-16.68" y2="2254.551" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_12_)" d="M76.7,413.2h-2.6c-2.4,0-3.6-1.1-3.6-3.3v-35.1h-3l-6.6,9.4v28.2c0,2.8,0.8,5,2.5,6.5
+			c1.6,1.5,3.9,2.3,6.8,2.3c3.5,0,6-0.4,7.7-1.3L76.7,413.2z"/>
+		
+			<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="78.107" y1="2203.667" x2="78.107" y2="2254.5491" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+			<stop  offset="0" style="stop-color:#FFFFFE"/>
+			<stop  offset="0.4815" style="stop-color:#F2F1F1"/>
+			<stop  offset="1" style="stop-color:#E9E7E8"/>
+		</linearGradient>
+		<path fill="url(#SVGID_13_)" d="M170.7,406.1c-0.9-1.6-1.9-2.7-3-3.5v-0.1c1.3-0.9,2.3-1.9,3-3.1l8.3-11.1h-10.8l-7.9,11.2h-3
+			c0.3-1.8,0.5-3.7,0.5-5.9v-18.8h-3l-6.7,9.5v36.1h9.6v-10.1c0-1.3-0.2-2.9-0.5-4.8h3.1l9,14.9h10.8L170.7,406.1z"/>
+	</g>
+	
+		<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-208.281" y1="2186.001" x2="-208.281" y2="2196.1689" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#00639A"/>
+		<stop  offset="0.2355" style="stop-color:#00578A"/>
+		<stop  offset="0.507" style="stop-color:#004D7B"/>
+		<stop  offset="0.7167" style="stop-color:#004773"/>
+		<stop  offset="1" style="stop-color:#00446E"/>
+	</linearGradient>
+	<polygon fill="url(#SVGID_14_)" points="-122.3,372.4 -131.3,370.4 -132.3,374.1 -122.3,379.2 -112.2,374.1 -113.2,370.4 	"/>
+	<polyline opacity="0.2" enable-background="new    " points="-122.3,379.2 -112.2,374.1 -113.2,370.4 -122.3,372.4 	"/>
+	<path fill="#034672" d="M-127.2,391.9c3.4,1.3,6.7,1.5,9.8,0.4l-0.3-2.2c-2.6,0.8-6.3,0.7-9.5,0.1L-127.2,391.9z"/>
+	<path fill="#034672" d="M-122.6,391.5c-0.4,2.8,1.9,4.7,1.9,7.6C-116.8,394.8-121.7,393.3-122.6,391.5z"/>
+	<path fill="#034672" d="M-122.6,391.7c-0.1,3.2-0.4,5.6-1.7,7.2C-126.8,394.2-123.7,392.6-122.6,391.7z"/>
+	<circle fill="#034672" cx="-122.6" cy="391.7" r="1.6"/>
+	
+		<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="-197.511" y1="2237.772" x2="-197.511" y2="2237.772" gradientTransform="matrix(1 0 0 1 86 -1815.5)">
+		<stop  offset="0" style="stop-color:#F6F6F6"/>
+		<stop  offset="0.5386" style="stop-color:#E4E4E4"/>
+		<stop  offset="1" style="stop-color:#DADADA"/>
+	</linearGradient>
+	<path fill="url(#SVGID_15_)" d="M-111.5,422.3"/>
+</g>
+</svg>

juice/admin/theme.properties

@@ -0,0 +1,5 @@
+parent=base
+import=common/keycloak
+
+styles=css/styles.css css/mytheme.css
+stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css node_modules/select2/select2.css lib/angular/treeview/css/angular.treeview.css node_modules/text-security/text-security.css css/mytheme.css

juice/email/theme.properties

@@ -0,0 +1 @@
+parent=base

juice/login/error.ftl

@@ -0,0 +1,13 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=false; section>
+    <#if section = "header">
+        <div class="header-login-welcome">${msg("error")}</div>
+        <div class="header-login-title error-welcome">${msg("errorTitle")}</div>
+        <div class="error-image"></div>
+    <#elseif section = "form">
+        <div id="kc-error-message">
+            <p class="instruction">${message.summary?no_esc}</p>
+        </div>
+    </#if>
+</@layout.registrationLayout>
+<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>

juice/login/login-page-expired.ftl

@@ -0,0 +1,13 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout; section>
+    <#if section = "header">
+        <div class="header-login-welcome">${msg("error")}</div>
+        <div class="header-login-title error-welcome expired-title">${msg("pageExpiredTitle")}</div>
+        <div class="expired-image"></div>
+    <#elseif section = "form">
+        <p id="instruction1" class="instruction">
+            ${msg("pageExpiredMsg1")}
+        </p>
+         <a id="loginRestartLink" class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} expired-button" href="${url.loginRestartFlowUrl}">${msg("pageExpiredButton")}</a>
+    </#if>
+</@layout.registrationLayout>

juice/login/login-reset-password.ftl

@@ -0,0 +1,61 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section>
+    <#if section = "header">
+        <div class="header-login-welcome">${msg("passwordRecovery")}</div>
+        <div class="header-login-title">
+            ${msg("emailForgotTitle")}
+            <br />
+            ${msg("emailForgotTitle1")}
+        </div>
+    <#elseif section = "form">
+        <form id="kc-reset-password-form" class="${properties.kcFormClass!}"  action="${url.loginAction}" method="post">
+            <div class="${properties.kcFormGroupClass!}">
+            
+                <div class="email-instruction">
+                    ${msg("emailInstruction")}
+                    <br />
+                    ${msg("emailInstruction1")}
+                </div>
+                
+                <div  class="${properties.kcFormGroupClass!}">
+                    <#if auth?has_content && auth.showUsername()>
+                        <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autocomplete="off" autofocus value="${auth.attemptedUsername}"aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/>
+                        <label class="login-form-input-label">${msg("email")}</label>
+
+                        <#else>
+                        <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autocomplete="off" autofocus placeholder=${msg("email")} aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/>
+                        <label class="login-form-input-label">${msg("email")}</label>
+                    </#if>
+
+                    <#if messagesPerField.existsError('username')>
+                        <div id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                    ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                        </div>
+                    </#if>
+                </div>
+                
+                <div id="kc-form-buttons" >
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
+                </div>
+
+                <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                    <div id="kc-form-options">
+                            <#if client?? && client.baseUrl?has_content>
+                                <span><a href="${client.baseUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
+                            </#if>
+                    </div>
+                    <div class="${properties.kcFormOptionsWrapperClass!}">
+                            <div id="kc-registration">
+                                    <span>${msg("haveAccount")} <a tabindex="6"
+                                                                href="${url.loginUrl}">${msg("signInHere")}</a></span>
+                            </div>
+                    </div>
+                </div>
+            </div>
+
+        </form>
+    <#elseif section = "info" >
+    </#if>
+</@layout.registrationLayout>
+
+<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>

juice/login/login-verify-email.ftl

@@ -0,0 +1,14 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=true; section>
+    <#if section = "header">
+        <div class="header-login-welcome">${msg("emailVerifyTitle")}</div>
+        <div class="header-login-title">${msg("emailVerifyTitle")}</div>
+        <div class="verify-image"></div>
+    <#elseif section = "form">
+        <p class="instruction">${msg("emailVerifyInstruction1")}</p>
+    <#elseif section = "info">
+            <div class="verify-email-question">${msg("emailVerifyInstruction2")}</div>
+            <a class="verify-email-link" href="${url.loginAction}"> ${msg("emailVerifyInstruction3")}</a>
+    </#if>
+</@layout.registrationLayout>
+<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>

juice/login/login.ftl

@@ -0,0 +1,122 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
+    <#if section = "header">
+        <div class="welcome-container">
+            <div class="header-login-welcome">${msg("welcome")}</div>
+            <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
+                    <div id="kc-locale">
+                        <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
+                            <div class="kc-dropdown" id="kc-locale-dropdown">
+                                <a href="#" id="kc-current-locale-link">${locale.current}</a>
+                                <ul>
+                                    <#list locale.supported as l>
+                                        <#if locale.current==l.label>
+                                            <li class="kc-dropdown-item selected ${l.label}"><a href="${l.url}">${l.label}</a></li>
+                                        <#else>
+                                            <li class="kc-dropdown-item ${l.label}"><a href="${l.url}">${l.label}</a></li>
+                                        </#if>
+                                    </#list>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </#if>
+        </div>
+        <div class="header-login-title">${msg("loginAccountTitle")}</div>
+    <#elseif section = "form">
+        <div id="kc-form">
+        <div id="kc-form-wrapper">
+            <#if realm.password>
+                <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
+                    <div class="${properties.kcFormGroupClass!}">
+
+                        <#if usernameEditDisabled??>
+                            <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" placeholder=${msg("usernameOrEmail")}  type="text" disabled />
+                        <#else>
+                            <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" placeholder=${msg("usernameOrEmail")} type="text" autofocus autocomplete="off"
+                                aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
+                            />
+                            <#if messagesPerField.existsError('username','password')>
+                                <div id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                        ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
+                                </div>
+                            </#if>
+                            <label class="login-form-input-label">${msg("usernameOrEmail")}</label>
+
+                        </#if>
+                    </div>
+
+                    <div class="${properties.kcFormGroupClass!}">
+
+                        <input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" placeholder=${msg("password")} autocomplete="off"
+                            aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
+                        />
+                        <label class="login-form-input-label">${msg("password")}</label>
+                    </div>
+
+                    <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
+                        <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
+                        <input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
+                    </div>
+
+                    
+            <#if realm.password && social.providers??>
+                <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
+                    <div class="separate-container">
+                        <div class="separator"></div>
+                            <div class="separate-text">${msg("identity-provider-login-label")} </div>
+                        <div class="separator"></div>
+                    </div>
+
+                    <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
+                        <#list social.providers as p>
+                            <a id="social-${p.alias}" class="${properties.kcButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if> social-button"
+                                    type="button" href="${p.loginUrl}">
+                                <#if p.displayName=="Facebook" >
+                                        <div class="login-sign-image facebook"></div>
+                                    <#elseif p.displayName=="Twitter" >
+                                        <div class="login-sign-image twitter"></div>
+                                    <#elseif p.displayName=="Google" >
+                                        <div class="login-sign-image google"></div>
+                                    <#elseif p.displayName=="LinkedIn" >
+                                        <div class="login-sign-image linkedin"></div>
+                                    <#elseif p.displayName=="Apple" >
+                                        <div class="login-sign-image apple"></div>
+                                    <#elseif p.iconClasses?has_content>
+                                    <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
+                                <#else>
+                                    <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
+                                </#if>
+                            </a>
+                        </#list>
+                    </ul>
+                </div>
+            </#if>
+            
+            <div class="signup-terms login-signup-terms">${msg("signinTerms")}</div>
+
+                    <div>
+                        <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                            <div id="kc-form-options">
+                                    <#if realm.resetPasswordAllowed>
+                                        <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
+                                    </#if>
+                        </div>
+                        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+                            <div id="kc-registration-container">
+                                <div id="kc-registration">
+                                    <span>${msg("noAccount")} <a tabindex="6"
+                                                                href="${url.registrationUrl}">${msg("signUpHere")}</a></span>
+                                </div>
+                            </div>
+                        </#if>
+                    </div>
+
+                </form>
+            </#if>
+            </div>
+        </div>
+    </#if>
+</@layout.registrationLayout>
+
+<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>

juice/login/messages/messages_de.properties

@@ -0,0 +1,35 @@
+welcome=Willkommen!
+error=Fehler
+signinTerms=Mit der Registrierung erkl\u00E4ren Sie sich mit den Nutzungsbedingungen und der Datenschutzerkl\u00E4rung von Juice einverstanden.
+signupTerms=Mit der Registrierung erkl\u00E4ren Sie sich mit den Nutzungsbedingungen und der Datenschutzerkl\u00E4rung von Juice einverstanden.
+signInHere=Hier anmelden
+signUpHere=Mit Email registrieren
+passwordRecovery=Passwort wiederherstellen
+
+loginAccountTitle=Anmelden
+doRegister=Registrieren
+doForgotPassword=Passwort vergessen?
+noAccount=Haben Sie ein Konto?
+
+emailForgotTitle=Ihr Passwort
+emailForgotTitle1=zur\u00FCcksetzen
+emailInstruction=Bitte geben Sie Ihre E-Mail Adresse ein
+emailInstruction1=Wir senden Ihnen dann eine E-Mail, um Ihr Passwort zur\u00FCckzusetzen.
+
+doSubmit=E-Mail senden
+backToLogin=Zur\u00FCck
+haveAccount=Haben Sie ein Konto?
+
+registerTitle=Welcome to the
+registerTitle1=JUICE WORLD
+
+emailVerifyTitle=Verifizieren Sie Ihre E-Mail
+emailVerifyInstruction1=Sie m\u00FCssen Ihre E-Mail-Adresse verifizieren, um Ihr Konto zu aktivieren. Eine E-Mail mit Anweisungen zur Verifizierung Ihrer E-Mail-Adresse wurde an Sie gesendet
+emailVerifyInstruction3=Senden Sie die E-Mail erneut
+identity-provider-login-label=Oder registrieren/anmelden mit
+
+pageExpiredTitle=Ihre Sitzung ist abgelaufen
+pageExpiredMsg1=Keine Sorge, melden Sie sich einfach erneut an
+
+pageExpiredButton=Gehen Sie zu Anmelden
+

juice/login/messages/messages_en.properties

@@ -0,0 +1,33 @@
+welcome=Welcome!
+error=Error
+signinTerms=By signing up, you agree to Juice''s ToS and Privacy
+signupTerms=By signing up, you agree to Juice''s Terms of Use
+signInHere=Sign in here
+signUpHere=Sign up with the email
+passwordRecovery=Password recovery
+
+loginAccountTitle=Sign in
+doRegister=Sign up
+doForgotPassword=Forgot password?
+noAccount=Not a member?
+
+emailForgotTitle=Reset
+emailForgotTitle1=your password
+emailInstruction=Please enter your email address.
+emailInstruction1=We will send you an email to reset your password.
+
+doSubmit=Send email
+backToLogin=Go back
+haveAccount=Have an account?
+
+registerTitle=Welcome to the
+registerTitle1=JUICE WORLD
+
+emailVerifyTitle=Verify your email
+emailVerifyInstruction1=You need to verify your email address to activate your account. An email with instructions to verify your email address has been sent to you
+emailVerifyInstruction3=Re-send the email
+
+pageExpiredTitle=Your session has expired
+pageExpiredMsg1=No worry, simply sign in again
+
+pageExpiredButton=Go to Sign In

juice/login/register.ftl

@@ -0,0 +1,139 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
+    <#if section = "header">
+        <div class="welcome-container">
+            <div class="header-login-welcome">${msg("welcome")}</div>
+            <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
+                    <div id="kc-locale">
+                        <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
+                            <div class="kc-dropdown" id="kc-locale-dropdown">
+                                <a href="#" id="kc-current-locale-link">${locale.current}</a>
+                                <ul>
+                                    <#list locale.supported as l>
+                                        <#if locale.current==l.label>
+                                            <li class="kc-dropdown-item selected ${l.label}"><a href="${l.url}">${l.label}</a></li>
+                                        <#else>
+                                            <li class="kc-dropdown-item ${l.label}"><a href="${l.url}">${l.label}</a></li>
+                                        </#if>
+                                    </#list>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </#if>
+        </div>
+        <div class="header-login-title">${msg("registerTitle")} <br /> ${msg("registerTitle1")}</div>
+    <#elseif section = "form">
+        <form id="kc-register-form"  action="${url.registrationAction}" method="post">
+
+            <div>
+                <div class="${properties.kcFormGroupClass!} register-form">
+                    <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
+                           value="${(register.formData.email!'')}" autocomplete="off"
+                           placeholder=${msg("email")}
+                           aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
+                    />
+                    <label class="login-form-input-label">${msg("email")}</label>
+
+                    <#if messagesPerField.existsError('email')>
+                        <div id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('email'))?no_esc}
+                        </div>
+                    </#if>
+                </div>
+                
+            <#if passwordRequired??>
+                <div class="${properties.kcFormGroupClass!}  register-form">
+                        <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
+                               autocomplete="off"
+                               placeholder=${msg("password")}
+                               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
+                        />
+                        <label for="password" class="login-form-input-label">${msg("password")}</label>
+
+                        <#if messagesPerField.existsError('password')>
+                            <div id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('password'))?no_esc}
+                            </div>
+                        </#if>
+                </div>
+
+                <div class="${properties.kcFormGroupClass!}">
+                        <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
+                               name="password-confirm" autocomplete="off"
+                               placeholder=${msg("passwordConfirm")}
+                               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                        />
+                        <label for="password-confirm"
+                                class="login-form-input-label">${msg("passwordConfirm")}</label>
+
+                        <#if messagesPerField.existsError('password-confirm')>
+                            <div id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
+                            </div>
+                        </#if>
+                </div>
+            </#if>
+            </div>
+
+            <#if !realm.registrationEmailAsUsername>
+                <div>
+                    <div>
+                        <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
+                    </div>
+                    <div>
+                        <input type="text" id="username" name="username"
+                               value="${(register.formData.username!'')}" autocomplete="off"
+                               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+                        />
+
+                        <#if messagesPerField.existsError('username')>
+                            <div id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                            </div>
+                        </#if>
+                    </div>
+                </div>
+            </#if>
+
+            <#if recaptchaRequired??>
+                <div class="form-group">
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
+                    </div>
+                </div>
+            </#if>
+
+            <div class="${properties.kcFormGroupClass!}">
+
+                <div id="kc-form-buttons">
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
+                </div>
+                
+                <div class="signup-terms">${msg("signupTerms")}</div>
+
+            </div>
+
+            
+            <div>
+                <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
+                    <div id="kc-form-options" class="signup-password">
+                            <#if realm.resetPasswordAllowed>
+                                <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
+                            </#if>
+                    </div>
+                    <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+                        <div id="kc-registration-container">
+                            <div id="kc-registration">
+                                <span>${msg("haveAccount")} <a tabindex="6"
+                                                            href="${url.loginUrl}">${msg("signInHere")}</a></span>
+                            </div>
+                        </div>
+                    </#if>
+                </div>
+            </div>
+        </form>
+    </#if>
+</@layout.registrationLayout>
+
+<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>

juice/login/resources/css/styles.css

@@ -0,0 +1,758 @@
+@font-face {
+    font-family: "Swis721 Th Bt";
+    src: local("Swiss721ThinBT.ttf"), url("../fonts/Swiss721ThinBT.ttf") format("truetype");
+    font-weight: 300;
+}
+@font-face {
+    font-family: "Swis721 Md BT";
+    src: local("Swiss721MediumBT.ttf"), url("../fonts/Swiss721MediumBT.ttf") format("truetype");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto-Medium.ttf"), url("../fonts/Roboto-Medium.ttf") format("truetype");
+    font-weight: 300;
+}
+  
+.login-pf {
+    height: 100%;
+    background: none;
+}
+
+.login-pf body {
+    background: url(../img/juice-bc.svg);
+    background-repeat: no-repeat;
+    background-color: #202020;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.login-pf body::before {
+    position: absolute;
+    width: 56px;
+    height: 56px;
+    content: "";
+    top: 56px;
+    left: 63px;
+    background: url(../img/juice.svg);
+    background-repeat: no-repeat;
+}
+
+.login-pf-page {
+    padding-top: 0px;
+}
+
+.h1, .h2, .h3, h1, h2, h3 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+#kc-header-wrapper {
+    padding: 0px 10px;
+}
+
+.card-login {
+    margin: 0 auto;
+    box-shadow: -8px -8px 32px rgba(101, 101, 101, 0.12), -2px -2px 16px rgba(101, 101, 101, 0.24), 4px 4px 16px rgba(0, 0, 0, 0.3), 8px 8px 32px rgba(0, 0, 0, 0.1);
+    padding: 56px;
+    min-width: 440px;
+    max-width: 440px;
+    border-radius: 16px;
+    background-color: #212121;
+}
+
+.login-pf-page-header {
+    background: url(../img/juice.svg);
+    background-position-x: 63px;
+    background-position-y: 56px;
+    background-repeat: no-repeat;
+}
+.header-login-welcome {
+    font-family: "Swis721 Th Bt";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 20px;
+    color: #98989E;
+}
+.header-login-title {
+    padding-top: 4px;
+    font-family: "Swis721 Th Bt";
+    font-style: normal; 
+    font-weight: 300;
+    font-size: 38px;
+    line-height: 48px;
+    letter-spacing: -0.75px;
+    background: linear-gradient(180deg, #FF9900 0%, #FF7100 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.error-welcome {
+    background: #F52E2E;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.error-image {
+    width: 96px;
+    height: 96px;
+    background: url(../img/error.svg);
+    margin: 32px 0px 12px;
+}
+.verify-image {
+    width: 96px;
+    height: 96px;
+    background: url(../img/verify-email.svg);
+    margin: 32px 0px 12px;
+}
+.instruction {
+    margin: 0px;
+    font-family: "Swis721 Th BT";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 19px;
+    line-height: 28px;
+    display: flex;
+    align-items: center;
+    letter-spacing: -0.1px;
+    color: #BDBFBF;
+}
+#kc-error-message .instruction {
+    margin: 0px;
+    font-family: "Swis721 Th BT";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 19px;
+    line-height: 28px;
+    display: flex;
+    align-items: center;
+    letter-spacing: -0.1px;
+    color: #BDBFBF;
+}
+#kc-info {
+    margin: 0px;
+}
+.verify-email-question {
+    margin-top: 32px;
+    margin-bottom: 8px;
+    font-family: "Swis721 Md BT";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    color: #BDBFBF;
+}
+.login-pf-page .login-pf-signup a {
+    margin-left: 0px;
+}
+.login-pf-page .login-pf-settings {
+    flex-wrap: nowrap;
+}
+.verify-email-link {
+    margin-left: 0px;
+    font-family: "Swis721 Md BT";
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    text-align: right;
+    color: #FF7100;
+}
+a.verify-email-link:hover {
+    color: #FF7100;
+}
+
+#kc-page-title{
+    text-align: left;
+}
+
+#kc-form-buttons {
+    margin-top: 32px;
+    margin-bottom: 32px;
+}
+
+.pf-c-button {
+    height: 56px;