Enable new UI option

Author: lbartoli79

www/assets/css/account.css

@@ -181,6 +181,10 @@ body.theme-b {
   content: ":";
 }
 
+.breadcrumbs {
+  margin-top: 1rem;
+}
+
 .billing-history {
   display: block;
   padding-top: 2em;
@@ -663,13 +667,13 @@ body.theme-b {
 /**
  * begin signup step 2
  */
-
 .signup-flow-layout * {
   box-sizing: border-box;
 }
 
 .signup-flow-layout body {
   display: block;
+  background-color: #141e33;
 }
 
 .signup-flow-layout header {
@@ -682,6 +686,18 @@ body.theme-b {
   padding-bottom: 1.5rem;
 }
 
+
+.signup-flow-layout header ol {
+  height: auto;
+  max-height: 4.5rem;
+  padding-left: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0;
+  padding-right: 1.5rem;
+}
+
 .signup-flow-layout header ol {
   padding-left: 0;
   display: flex;
@@ -700,9 +716,18 @@ body.theme-b {
   font-weight: 700;
 }
 
+.signup-flow-layout header ol,
+.signup-flow-layout header .free-plan {
+  height: auto;
+  max-height: 4.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-right: 1.5rem;
+}
+
+
 @media (min-width: 37.5rem) {
   .signup-flow-layout header {
-    padding-left: 30px;
     display: flex;
     justify-content: flex-start;
   }
@@ -713,16 +738,33 @@ body.theme-b {
     margin: 1em 0;
   }
 
-  .signup-flow-layout header ol {
+  .signup-flow-layout header ol,
+  .signup-flow-layout header .free-plan {
     margin-left: 0;
+    margin-top: 0rem;
+    margin-bottom: 1rem;
   }
+}
 
+@media (min-width: 50em) {
+  .signup-flow-layout header ol,
   .signup-flow-layout header .free-plan {
-    margin-left: 0;
+    padding-right: 3rem;
   }
 }
 
-@media (min-width: 86.25rem) {
+@media (min-width: 86em) {
+
+  .signup-flow-layout header ol,
+  .signup-flow-layout header .free-plan {
+    margin: 0;
+    position: relative;
+    height: 6rem;
+    max-height: 6rem;
+    top: 0.75rem;
+    padding-right: 1rem;
+  }
+
   .signup-flow-layout header ol {
     margin-left: calc(50vw - 43.4375rem);
   }
@@ -927,16 +969,11 @@ a.button {
 /*
  * End signup step 2
  */
-.signup-flow-layout wpt-header,
-.signup-flow-layout header {
-  background: #141e33;
-}
-.signup-flow-layout header {
-  padding-left: 0;
-  margin-bottom: 0;
+.signup-flow-layout wpt-header {
+  background-color: #141e33;
 }
+
 .signup-flow-layout header {
-  padding-left: 0;
   margin-bottom: 0;
 }
 
@@ -945,13 +982,6 @@ a.button {
   padding-bottom: 1.5rem;
 }
 
-.signup-flow-layout header ol {
-  padding-left: 0;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-
 .signup-flow-layout header li {
   margin-left: 40px;
   color: #d0d0d0;
@@ -976,7 +1006,6 @@ a.button {
 
 @media (min-width: 600px) {
   .signup-flow-layout header {
-    padding-left: 30px;
     display: flex;
     justify-content: flex-start;
   }

www/assets/css/pagestyle2.css

@@ -5158,13 +5158,14 @@ label.test_preset_profile {
 
 #simplemodal-overlay {
   background-color: #000;
+  z-index: 9999999 !important;
 }
 
 #simplemodal-container {
   background-color: #fff !important;
   padding: 5vh 5vw;
   position: fixed;
-  z-index: 9999999 !important;
+  z-index: 99999999 !important;
   height: 80vh !important;
   width: 80vw !important;
   left: 5vw !important;
@@ -5175,6 +5176,85 @@ label.test_preset_profile {
   border-radius: 1em;
 }
 
+#new-portal-dialog-container {
+  height: 312px !important;
+  max-height: 600px;
+  min-width: 400px;
+  width: 50vw !important;
+  max-width: 600px;
+  background-color: #fff !important;
+  padding: 20px;
+  position: fixed;
+  z-index: 99999999 !important;
+  overflow: auto !important;
+  border-radius: 10px;
+}
+
+#new-portal-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  height: 100%;
+}
+
+#new-portal-dialog .dialog-title {
+  color: #111;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+}
+
+#new-portal-dialog .dialog-body {
+  color: #111;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#new-portal-dialog .dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#new-portal-dialog .dialog-close-btn {
+  font-size: 1.4rem;
+  width: 1.4em;
+  height: 1.4em;
+  line-height: 1;
+  position: relative;
+  border: none;
+}
+
+#new-portal-dialog .simplemodal-close {
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  margin: 0;
+  font-size: 1.4rem;
+  width: 1.4em;
+  height: 1.4em;
+  line-height: 1;
+  text-indent: -999px;
+}
+
+#new-portal-dialog .simplemodal-close:before,
+#new-portal-dialog .simplemodal-close:after {
+  content: "";
+  height: 1em;
+  width: 0.1em;
+  top: 0.2em;
+  left: 0.65em;
+  background: #777;
+  position: absolute;
+  transform: rotate(-45deg);
+}
+
+#new-portal-dialog .simplemodal-close:after {
+  transform: rotate(45deg);
+}
+
 #simplemodal-container #advanced {
   background-color: #fff !important;
   color: #111 !important;