@gnar-engine/cli 1.0.3 → 1.0.5

package/bootstrap/services/portal/src/css/style.css

@@ -1,18 +1,23 @@
 /* vars */
 /* Fonts */
-body {
-  font-family: ubuntu, sans-serif;
-  color: #3C5063;
+html {
+  background: #242424;
+}
+body,
+body * {
+  font-family: ubuntu, sans-serif !important;
+  color: #ffffff;
   font-size: 14px;
 }
 /* Global styles */
 h1 {
   margin-top: 0px;
-  font-size: 28px;
-  font-weight: 600;
+  margin-bottom: 40px;
+  font-size: 18px;
+  font-weight: 400;
 }
 h2 {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
 }
 body {
@@ -23,10 +28,12 @@ body #root {
   min-height: 100vh;
 }
 .separator {
+  display: inline-block;
   margin-top: 20px;
   margin-bottom: 20px;
   height: 0px;
-  border-top: 1px solid #E4E4E4;
+  border-top: 1px solid #3C3C3C;
+  width: 100%;
 }
 .content-wrap {
   display: flex;
@@ -41,9 +48,9 @@ body #root {
   padding-right: 20px;
 }
 .instruction {
-  font-size: 12px;
   margin-top: 10px;
   margin-bottom: 10px;
+  color: #D9D9D9;
 }
 .flex-row {
   display: flex;
@@ -90,843 +97,409 @@ body #root {
   gap: 20px;
 }
 .button.button-loading {
-  background: #E4E4E4 !important;
+  background: #3C3C3C !important;
   cursor: not-allowed !important;
 }
 .button.button-loading:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.card {
-  background: #FFFFFF;
-  border: 1px solid #E4E4E4;
-  border-radius: 10px;
-  margin-top: 20px;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-}
-.card .card-header {
-  width: 100%;
-  background-color: #434343;
-  color: #FFFFFF;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  display: flex;
-  justify-content: space-between;
-}
-.card .card-header h2 {
-  padding: 20px;
-  margin: 0px;
-}
-.card .card-content {
-  padding: 20px;
-}
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"] {
-  width: 100%;
-  padding: 6px 10px;
-  margin: 10px 0;
-  border: 1px solid #E4E4E4;
-  background: #FFFFFF;
-  border-radius: 25px;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #3C5063;
-}
-input:focus {
-  outline: none;
-  border: 1px solid #479E78;
-}
-textarea {
-  font-family: 'Roboto', sans-serif;
-  width: 100%;
-  padding: 10px;
-  margin: 10px 0;
-  border: 1px solid #E4E4E4;
-  background: #FFFFFF;
-  border-radius: 4px;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #3C5063;
-}
-button,
-.mainButton {
-  padding: 6px 10px;
-  margin: 10px 0;
-  border: none;
-  background: #479E78;
-  color: #FFFFFF;
-  border-radius: 25px;
-  font-size: 14px;
+.text-link {
+  color: #D9D9D9;
   cursor: pointer;
-  transition-duration: 0.4s;
-  width: 150px;
-  border: 1px solid #479E78;
+  display: inline-block;
   text-decoration: none;
-  max-height: 40px;
+  font-size: 14px;
 }
-button.wide,
-.mainButton.wide {
-  width: 215px;
+.text-link:hover {
+  opacity: 0.8;
 }
-button:hover,
-.mainButton:hover {
-  opacity: 0.9;
-  cursor: pointer;
+.input {
+  font-size: 12px;
+  color: #2C2C2C;
 }
-.secondaryButton {
-  padding: 6px 10px;
-  margin: 10px 0;
-  border: none;
-  background: #434343;
-  color: #FFFFFF;
-  border-radius: 25px;
+.input input {
+  background: #242424 !important;
+  color: white;
+  padding: 10px;
+  padding-left: 48px;
+  border-radius: 20px;
   font-size: 14px;
-  cursor: pointer;
-  transition-duration: 0.4s;
-  width: 150px;
-  border: 1px solid #434343;
-  text-decoration: none;
-  max-height: 40px;
+  margin-top: 5px;
+  margin-bottom: 5px !important;
 }
-.secondaryButton.wide {
-  width: 215px;
+.input.icon {
+  background-size: 15px;
+  background-repeat: no-repeat;
+  background-position: 15px 15px;
 }
-.secondaryButton:hover {
-  opacity: 0.9;
-  cursor: pointer;
+.input.icon input {
+  padding-left: 50px;
 }
-.button-cont {
-  width: 100%;
-  display: inline-block;
+.single-crud-page .top-bar {
+  margin-bottom: 20px;
 }
-.button-cont.right {
-  text-align: right;
+.single-crud-page .bottom-bar {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  justify-content: flex-end;
 }
-.arrowButton {
-  width: 30px;
-  height: 30px;
-  background: #479E78;
-  color: #FFFFFF;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
+.error-messages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
-button.bin-icon {
-  background: none;
-  border: none;
-  width: 30px;
-  height: 30px;
+.error-messages ul {
+  list-style: none;
+  margin: 0px;
 }
-button.bin-icon.white {
-  padding-right: 50px;
+.error-messages li,
+.error-messages a,
+.error-messages span,
+.error-messages p {
+  color: #FF4D4F;
 }
-.pdfButton {
-  display: inline-block;
-  text-align: center;
-  line-height: 1.2em;
-  box-sizing: border-box;
+.button-group button {
+  margin-left: 15px;
 }
-button.success::after {
-  content: '✔';
-  color: #3C5063;
-  margin-left: 8px;
+input[type="text"],
+input[type="password"],
+input[type="email"],
+textarea,
+.custom-select .custom-select-input {
+  border: 1px solid #3C3C3C;
+  border-radius: 17px;
+  padding: 8px 10px;
   font-size: 14px;
-}
-button.error::after {
-  content: '✘';
-  color: #c73939;
-  margin-left: 8px;
-  font-size: 16px;
-}
-button.grey-btn {
-  color: #479E78;
-  border: 1px solid #E4E4E4;
-  background: #F6F8F9;
-}
-.date-selector-cont {
-  width: 100%;
-  display: inline-block;
-}
-.react-datepicker-wrapper {
-  width: 300px;
-  margin-bottom: 10px;
-}
-.react-datepicker-wrapper .react-datepicker__input-container {
   width: 100%;
-}
-.text-button {
+  box-sizing: border-box;
   background: none;
-  border: none;
-  color: #479E78;
-  padding: 0px;
-  width: auto !important;
-}
-.text-button:hover {
-  cursor: pointer;
+  margin-bottom: 25px;
+  transition: border-color 0.3s;
+}
+input[type="text"]::placeholder,
+input[type="password"]::placeholder,
+input[type="email"]::placeholder,
+textarea::placeholder,
+.custom-select .custom-select-input::placeholder {
+  color: #ffffff;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+textarea:focus,
+.custom-select .custom-select-input:focus {
+  outline: none;
+  border-color: #47DCA6;
+}
+button {
+  background: #47DCA6;
+  border: 1px solid #47DCA6;
+  border-radius: 17px;
+  color: #242424;
+  padding: 9px 19px;
+  min-width: 143px;
+  font-weight: 700;
+  transition: opacity 0.3s;
+}
+button[type="submit"] {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+button:hover {
   opacity: 0.8;
+  cursor: pointer;
 }
-.login-layout {
-  min-height: 100vh;
-  background: #434343;
-  display: flex;
-  flex-direction: row;
-  position: relative;
+button.secondary-btn {
+  background: #2C2C2C;
+  color: #ffffff;
+  border: 1px solid #3C3C3C;
 }
-.login-layout .left-cont {
-  min-width: 50%;
-  max-width: 50%;
-  min-height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.icon-dashboard {
+  background: url('../assets/icon-home.svg');
 }
-.login-layout .left-cont img {
-  max-width: 60%;
-  min-width: 60%;
+.icon-users {
+  background: url('../assets/icon-users.svg');
 }
-.login-layout .right-cont {
-  background: #F6F8F9;
-  min-height: 100%;
-  min-width: 50%;
-  max-width: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-wrap: nowrap;
-  padding: 50px;
-  box-sizing: border-box;
+.icon-settings {
+  background: url('../assets/icon-settings.svg');
 }
-.portal-layout {
-  min-height: 101vh;
-  background: linear-gradient(to right, #E7E7E7 0%, #E7E7E7 49%, #f7f7f7 51%, #f7f7f7 100%);
+.icon-reports {
+  background: url('../assets/icon-reports.svg');
 }
-.portal-layout .header {
-  background: #434343;
-  height: 30px;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.icon-agent {
+  background: url('../assets/icon-agent.svg');
 }
-.portal-layout .header .content-wrap {
-  max-height: 100%;
+.icon-page {
+  background: url('../assets/icon-page.svg');
 }
-.portal-layout .header .content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  max-height: 100%;
-  align-items: center;
+.icon-delete {
+  background: url('../assets/icon-delete.svg');
 }
-.portal-layout .main {
-  min-height: calc(100vh - 197px);
-  position: relative;
-}
-.portal-layout .main .content-wrap,
-.portal-layout .main .content {
-  height: 100%;
-  min-height: 100%;
+.card {
+  border: 1px solid #3C3C3C;
+  border-radius: 10px;
+  margin-bottom: 30px;
+  width: 100%;
 }
-.portal-layout .main .content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+.card .card-title {
+  background: #242424;
+  margin: 0px;
+  padding: 20px 40px;
+  font-size: 16px;
+  font-weight: 400;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  overflow: hidden;
 }
-.portal-layout .main .main-page {
-  background: #f7f7f7;
-  width: 100%;
-  height: 100%;
-  min-height: calc(100vh - 100px);
+.card .card-content {
   padding: 30px 40px;
 }
-.portal-layout .main .main-page .header-details {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 20px;
+.card .instruction {
+  color: #868686;
+  margin-bottom: 30px;
 }
-.portal-layout .main .main-page .header-logo {
-  max-height: 100%;
-  width: 180px;
+.card-columns {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: no-wrap;
+  gap: 50px;
 }
-.login-layout h1 {
-  margin-bottom: 10px;
+.card-columns > .col-66 {
+  width: 66%;
+}
+.card-columns > .col-33 {
+  width: 33%;
 }
-.login-layout h2 {
+.card-columns p {
   margin-top: 0px;
-  margin-bottom: 10px;
 }
-.crud-page .crud-list-cont .crud-list-header {
-  text-align: right;
+.card input[type="text"],
+.card input[type="password"],
+.card input[type="email"],
+.card textarea {
+  margin-top: 8px;
+  background: #242424;
+}
+.card input[type="text"]::placeholder,
+.card input[type="password"]::placeholder,
+.card input[type="email"]::placeholder,
+.card textarea::placeholder {
+  color: #D9D9D9;
+}
+.portal-main {
+  background: #2C2C2C;
+  min-height: calc(100vh - 71px);
+  width: 100vw;
+  position: absolute;
+  top: 71px;
+  left: 0px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  overflow: hidden;
 }
-.crud-page .crud-list-cont .crud-list-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+.portal-main .portal-main-inner {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 71px);
+  gap: 0px;
 }
-.crud-page .crud-list-cont .crud-list-controls .controls-left-col {
-  display: flex;
-  gap: 20px;
+.portal-main .portal-page {
+  width: 100%;
+  padding: 45px 45px 70px 45px;
+  box-sizing: border-box;
+  position: relative;
 }
-.crud-page .crud-list-cont .crud-list-controls .controls-right-col {
-  display: flex;
-  gap: 20px;
+.portal-main .portal-page .portal-page-header {
+  margin-bottom: 30px;
 }
-.login {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.portal-main .portal-page .portal-page-header .logo {
+  max-width: 200px;
 }
-.login .login-form {
+.portal-main .portal-page .portal-page-footer {
   display: flex;
-  flex-direction: column;
-  width: 400px;
-}
-.login .login-form #login-message {
-  color: #c73939;
-  min-height: 40px;
-}
-.login .login-form button.loading {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.login .login-form a {
-  text-decoration: none;
-  color: #479E78;
-  margin-left: 10px;
-}
-.login .login-form .input-container {
-  position: relative;
-}
-.login .login-form .input-container input {
-  padding-left: 50px;
-}
-.login .login-form .input-container::before {
-  content: '';
+  flex-direction: row-reverse;
+  width: 100%;
   position: absolute;
-  top: 50%;
-  left: 18px;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-.login .login-form .input-container:nth-child(1)::before {
-  background-image: url('../assets/user-black.svg');
+  box-sizing: border-box;
+  bottom: 30px;
+  left: 0px;
+  padding: 0px 45px;
 }
-.login .login-form .input-container:nth-child(2)::before {
-  background-image: url('../assets/lock.svg');
+.portal-main .portal-page .portal-page-footer p,
+.portal-main .portal-page .portal-page-footer span {
+  margin: 0px;
+  color: #868686;
 }
-.sidebar {
-  min-width: 240px;
-  max-width: 240px;
-  padding-top: 30px;
+.portal-sidebar {
+  background: #242424;
+  min-width: 264px;
+  min-height: 100%;
+  padding: 43px 32px;
   box-sizing: border-box;
 }
-.sidebar .collapsible-cont {
-  margin-bottom: 30px;
+.portal-sidebar .inner ul {
+  padding: 0px;
 }
-.sidebar .collapsible-content-inner {
-  padding-left: 32px;
+.portal-sidebar .inner ul li {
+  list-style: none;
+  background-size: 28px 28px;
+  background-position: left center;
+  background-repeat: no-repeat;
 }
-.sidebar a {
+.portal-sidebar .inner ul li a {
+  display: block;
   text-decoration: none;
-  color: #3C5063;
+  color: #868686;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 50px;
   font-size: 18px;
-  font-weight: 400;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  display: inline-block;
-  min-width: 100%;
+  cursor: pointer;
 }
-.sidebar .menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-left: 16px;
-  padding-right: 16px;
-  transition: all 0.3s;
+.portal-sidebar .inner ul li:first-of-type a {
+  color: #ffffff;
 }
-.sidebar .menu-item.active {
-  color: #479E78;
-  padding-left: 30px;
+.portal-topbar {
+  background: #47DCA6;
+  min-height: 100vh;
+  width: 100%;
 }
-.sidebar .menu-item.active img {
-  filter: none;
+.portal-topbar .content {
+  padding-left: 45px;
+  padding-right: 45px;
+  box-sizing: border-box;
 }
-.sidebar .menu-item img {
-  filter: grayscale(60%) brightness(0.5);
-  width: 35px;
-  height: 35px;
+.portal-topbar > .flex-row {
+  height: 71px;
+  align-items: center;
+  justify-content: flex-end;
 }
-.user-avatar-container {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-end;
-  padding-bottom: 10px;
+.portal-topbar .agent-question {
+  width: 50%;
+  box-sizing: border-box;
 }
-.user-avatar-container .user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.user-info {
+  position: absolute;
+  bottom: 30px;
 }
-.user-avatar-container .user-info .userAvatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px solid #37936B;
-  background: #479E78;
-  display: flex;
-  justify-content: center;
+.user-info .user-info-mini {
   align-items: center;
 }
-.user-avatar-container .user-info .userAvatar span {
-  text-transform: uppercase;
+.user-info .user-info-mini .email {
+  margin-top: auto;
+  margin-bottom: auto;
+  height: auto;
   font-size: 18px;
-  font-weight: 400;
-  color: #479E78;
-}
-.user-avatar-container .user-info .userAvatar span img {
-  width: 30px;
-  height: 30px;
-}
-.user-avatar-container .user-info span {
-  color: #479E78;
-  font-size: 14px;
-}
-.user-avatar-container .user-info .log-out {
-  color: #3C5063;
-  transition-duration: 0.4s;
 }
-.user-avatar-container .user-info .log-out:hover {
-  cursor: pointer;
-  opacity: 0.9;
-}
-.crud-list {
-  width: 100%;
-  /* Adjust width as needed */
-  margin-bottom: 20px;
-  /* Adjust margin as needed */
+.user-info .gravatar-image {
+  width: 35px;
+  border-radius: 20px;
 }
-.crud-list .custom-table {
+.list-table table {
   width: 100%;
   border-collapse: collapse;
-  border-spacing: 0px;
-  border: none;
-}
-.crud-list .custom-table .separator-row {
-  display: inline-block;
 }
-.crud-list .custom-table .checkbox {
-  display: flex;
-  align-items: center;
-}
-.crud-list .custom-table th {
-  background-color: #434343;
-  color: #FFFFFF;
+.list-table table thead th {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  font-size: 16px;
+  font-weight: 400;
   text-align: left;
-  padding: 10px;
-  text-transform: capitalize;
+  border: none;
+  background: #242424;
+  overflow: hidden;
 }
-.crud-list .custom-table th:first-child {
+.list-table table thead th:first-child {
   border-top-left-radius: 10px;
+  padding-left: 30px;
 }
-.crud-list .custom-table th:last-child {
+.list-table table thead th:last-child {
   border-top-right-radius: 10px;
-  width: 12%;
-}
-.crud-list .custom-table td {
-  padding: 5px 10px;
-  border: none;
-}
-.crud-list .custom-table td:last-child {
-  border-bottom: none;
-}
-.crud-list .custom-table td.edit-dots {
-  text-align: start;
-}
-.crud-list .custom-table tbody button {
-  width: 20px;
-  background: none;
-  border: none;
-  margin: 0;
-}
-.crud-list .custom-table tbody tr {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-.crud-list .custom-table tbody tr td {
-  line-height: 1em;
-}
-.crud-list .custom-table tbody tr td:first-child {
-  border-left: 1px solid #E4E4E4;
-}
-.crud-list .custom-table tbody tr td:last-child {
-  border-right: 1px solid #E4E4E4;
-}
-.crud-list .custom-table tbody tr:first-of-type td {
-  border-top: 1px solid #E4E4E4;
-}
-.crud-list .custom-table tbody tr:first-of-type td:first-child {
-  border-left: 1px solid #E4E4E4;
+  padding-right: 30px;
 }
-.crud-list .custom-table tbody tr:first-of-type td:last-child {
-  border-right: 1px solid #E4E4E4;
+.list-table table tr td {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  transition: color 0.2s;
 }
-.crud-list .custom-table tbody tr:last-of-type td {
-  border-bottom: 1px solid #E4E4E4;
-}
-.crud-list .custom-table tbody tr:last-of-type td:first-child {
-  border-left: 1px solid #E4E4E4;
-  border-bottom-left-radius: 10px;
-}
-.crud-list .custom-table tbody tr:last-of-type td:last-child {
-  border-right: 1px solid #E4E4E4;
-  border-bottom-right-radius: 10px;
+.list-table table tr td:first-child {
+  padding-left: 30px;
 }
-.crud-list .custom-table tbody tr:nth-child(even) td {
-  background-color: #f1f1f1;
+.list-table table tr td:last-child {
+  padding-right: 30px;
 }
-.crud-list .custom-table tbody tr:hover td {
-  border-top: 1px solid #479E78;
-  border-bottom: 1px solid #479E78;
-  cursor: pointer;
+.list-table table tr:nth-child(even) td {
+  background: #242424;
 }
-.crud-list .custom-table tbody tr:hover td:first-child {
-  border-left: 1px solid #479E78;
+.list-table table tr:hover {
   cursor: pointer;
 }
-.crud-list .custom-table tbody tr:hover td:last-child {
-  border-right: 1px solid #479E78;
-  cursor: pointer;
+.list-table table tr:hover td {
+  color: #47DCA6;
 }
-.pagination-labels-cont {
+.repeater-row {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  flex-wrap: nowrap;
+  position: relative;
   align-items: center;
-}
-.pagination-count {
-  margin-bottom: 20px;
-  text-align: left;
-  font-size: 12px;
-}
-.crud-edit .edit-heading {
-  display: flex;
-  justify-content: space-between;
-}
-.single-edit .single-edit-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.single-edit.subscriptions .subscriptions-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.single-edit.subscriptions .subscriptions-table thead {
-  border-bottom: 1px solid #434343;
-}
-.single-edit.subscriptions .subscriptions-table th,
-.single-edit.subscriptions .subscriptions-table td {
-  padding: 8px;
-  text-align: left;
-}
-.single-edit.order .billing-shipping-cont,
-.single-edit.subscriptions .billing-shipping-cont {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.single-edit.order .billing-shipping-cont .billing-cont,
-.single-edit.subscriptions .billing-shipping-cont .billing-cont,
-.single-edit.order .billing-shipping-cont .shipping-cont,
-.single-edit.subscriptions .billing-shipping-cont .shipping-cont {
-  width: 50%;
-  padding-right: 20px;
-}
-.single-edit.order .line-items-totals-cont .line-items-cont,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont {
-  margin-bottom: 40px;
-}
-.single-edit.order .line-items-totals-cont .line-items-cont .line-items-table,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .line-items-table,
-.single-edit.order .line-items-totals-cont .line-items-cont .totals-table,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .totals-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.single-edit.order .line-items-totals-cont .line-items-cont .line-items-table th,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .line-items-table th,
-.single-edit.order .line-items-totals-cont .line-items-cont .totals-table th,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .totals-table th {
-  border-bottom: 1px solid #434343;
-}
-.single-edit.order .line-items-totals-cont .line-items-cont .line-items-table th,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .line-items-table th,
-.single-edit.order .line-items-totals-cont .line-items-cont .totals-table th,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .totals-table th,
-.single-edit.order .line-items-totals-cont .line-items-cont .line-items-table td,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .line-items-table td,
-.single-edit.order .line-items-totals-cont .line-items-cont .totals-table td,
-.single-edit.subscriptions .line-items-totals-cont .line-items-cont .totals-table td {
-  padding: 8px;
-  text-align: left;
-}
-.single-edit.order .totals-cont,
-.single-edit.subscriptions .totals-cont {
-  display: flex;
-  justify-content: flex-end;
-}
-.single-edit.order .totals-cont .totals-table tr td,
-.single-edit.subscriptions .totals-cont .totals-table tr td {
-  padding: 8px 0px 8px 15px;
-  text-align: right;
-}
-.single-edit.order .totals-cont .totals-table .order-total,
-.single-edit.subscriptions .totals-cont .totals-table .order-total {
-  font-weight: bold;
-}
-.single-edit.order .subscription-details-cont,
-.single-edit.subscriptions .subscription-details-cont {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.single-edit.order .order-notes-cont .note-item,
-.single-edit.subscriptions .order-notes-cont .note-item {
-  display: flex;
-  margin-bottom: 20px;
-  width: 100%;
-  justify-content: space-between;
-}
-.single-edit.order .order-notes-cont .note-item .note-item-body,
-.single-edit.subscriptions .order-notes-cont .note-item .note-item-body {
-  flex: 1;
-  display: flex;
-}
-.single-edit.order .order-notes-cont .note-item .note-item-body textarea,
-.single-edit.subscriptions .order-notes-cont .note-item .note-item-body textarea {
-  width: 100%;
-  flex-grow: 1;
-}
-.single-edit .account form,
-.single-edit .contacts form {
-  display: flex;
-  gap: 20px;
-  align-items: flex-end;
-}
-.single-edit .user-form {
-  display: flex;
   gap: 20px;
-  align-items: flex-end;
-}
-.single-edit .api-key form {
-  width: 100%;
-}
-.single-edit .api-key form input {
-  width: 100%;
-}
-.single-edit .single-inner-cont {
-  position: relative;
-}
-.single-edit .single-inner-cont .repeater-cont {
-  width: 100%;
-  margin-top: 15px;
-}
-.single-edit .single-inner-cont .repeater-cont table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 10px;
-}
-.single-edit .single-inner-cont .repeater-cont table th {
-  min-width: 100%;
-  color: #3C5063;
-  opacity: 0.5;
-  font-size: 10px;
-  line-height: 1.1em;
-  font-style: italic;
-}
-.single-edit .single-inner-cont .repeater-cont table .contacts-bin-icon {
-  cursor: pointer;
-  margin-top: 15px;
-}
-.single-edit .single-inner-cont .repeater-cont table th,
-.single-edit .single-inner-cont .repeater-cont table td {
-  text-align: left;
-  vertical-align: top;
-}
-.single-edit .single-inner-cont .repeater-cont table th input,
-.single-edit .single-inner-cont .repeater-cont table td input {
-  width: 100%;
-}
-.single-edit .single-inner-cont .repeater-cont table .react-datepicker-wrapper {
-  width: 100%;
 }
-.single-edit .single-inner-cont .repeater-cont td.period-name {
-  width: 100%;
-  display: block;
-}
-.single-edit .single-inner-cont .react-datepicker-popper {
-  z-index: 99;
-}
-.single-edit .field-instruction {
-  min-width: 100%;
+.remove-repeater-row {
   display: inline-block;
-  color: #3C5063;
-  opacity: 0.5;
-  font-size: 10px;
-  line-height: 1.1em;
-  font-style: italic;
-}
-.single-edit .error-messages {
-  width: 100%;
-  background: #ffeeee;
-  border: 1px solid #c73939;
-  border-radius: 5px;
-  padding: 15px;
-  margin-bottom: 20px;
-  box-sizing: border-box;
-}
-.single-edit .error-messages p {
-  color: #c73939;
-  line-height: 1em;
-  margin-top: 3px;
-  margin-bottom: 3px;
-}
-.single-edit form label {
-  display: block;
-}
-.single-edit form input {
-  width: 300px;
-}
-.single-edit form input#marketingOptIn {
-  width: 15px;
-  height: 15px;
-}
-.crud-page,
-.manage-students {
-  position: relative;
-}
-.crud-page .flex-row-select-cont,
-.manage-students .flex-row-select-cont {
-  margin-top: 50px;
-}
-.crud-page .clear-filters-btn,
-.manage-students .clear-filters-btn {
-  position: absolute;
-  top: 65px;
-  right: 5px;
+  width: 30px;
+  height: 30px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  margin-bottom: 10px;
+  opacity: 0.6;
 }
-.crud-page .clear-filters-btn:hover,
-.manage-students .clear-filters-btn:hover {
+.remove-repeater-row:hover {
   cursor: pointer;
-  opacity: 0.8;
+  opacity: 1;
 }
-.crud-page .password-reset-btn,
-.manage-students .password-reset-btn {
-  display: block;
+.repeater-row {
   position: relative;
-  color: #479E78;
-  text-decoration: underline;
-}
-.crud-page .password-reset-btn:hover,
-.manage-students .password-reset-btn:hover {
-  cursor: pointer;
-  opacity: 0.8;
-}
-.form-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  gap: 20px;
-  align-items: center;
   flex-wrap: wrap;
 }
-.form-row .input-cont {
-  display: flex;
-  flex-direction: column;
-}
-.form-row .input-cont input {
-  width: 250px;
-}
-.form-group.categories {
+.repeater-row .nested-block .nested-block {
   width: 100%;
+  margin-bottom: 0px;
+  position: relative;
 }
-.form-group.categories .custom-select-input {
-  min-width: 500px !important;
-}
-.collapsible-header {
-  display: flex;
-  justify-content: space-between;
-}
-.collapsible-header h3 {
-  margin: 0px;
-}
-.collapsible-header:hover {
-  cursor: pointer;
-}
-.collapsible-content {
-  overflow: hidden;
-  transition-duration: 0.5s;
-}
-.collapsible-content-open {
-  margin-top: 30px;
-}
-.collapsible-content-inner ul {
-  margin: 0px;
+.repeater-row .nested-block .nested-block .repeater {
+  box-sizing: border-box;
+  margin-bottom: 60px;
+  border-left: 1px solid #3C3C3C;
+  padding-left: 35px;
 }
-.custom-checkbox {
-  position: relative;
-  margin-top: 15px;
-  margin-bottom: 10px;
+.repeater-row .nested-block .nested-block .repeater-row {
+  justify-content: flex-start;
 }
-.custom-checkbox input {
-  opacity: 0;
+.repeater-row .nested-block .nested-block .add-repeater-row {
   position: absolute;
   left: 0px;
-  min-width: 18px;
-  min-height: 18px;
-}
-.custom-checkbox input:hover {
-  cursor: pointer;
+  bottom: 10px;
 }
-.custom-checkbox label {
-  padding-left: 20px;
-  transition-duration: 0.1s;
-  box-sizing: border-box;
+.repeater-row .nested-block .nested-block input[type="text"],
+.repeater-row .nested-block .nested-block input[type="password"],
+.repeater-row .nested-block .nested-block input[type="email"],
+.repeater-row .nested-block .nested-block textarea,
+.repeater-row .nested-block .nested-block .custom-select .custom-select-input {
+  margin-bottom: 0px;
 }
-.custom-checkbox label:hover {
-  cursor: pointer;
-  opacity: 0.8;
+.repeater-row .nested-block .remove-repeater-row {
+  top: 25px;
 }
-.custom-checkbox:before {
-  content: '';
-  min-width: 18px;
-  min-height: 18px;
-  background: #F6F8F9;
-  border: 1px solid #E4E4E4;
-  border-radius: 6px;
+.repeater-row .remove-repeater-row {
   position: absolute;
-  left: 0px;
+  right: -35px;
 }
-.custom-checkbox.checked:before {
-  content: '';
-  background: #F6F8F9 url('../assets/check.svg') no-repeat center center;
+.custom-select-cont {
+  display: inline-block;
+}
+.custom-select-cont label {
+  width: 100%;
 }
 .custom-select {
   max-width: 215px;
@@ -938,12 +511,12 @@ button.grey-btn {
   width: 100%;
   padding: 6px 10px;
   margin: 10px 0;
-  border: 1px solid #E4E4E4;
-  background: #FFFFFF;
+  border: 1px solid #3C3C3C;
+  background: #242424;
   border-radius: 25px;
   box-sizing: border-box;
   font-size: 15px;
-  color: #3C5063;
+  color: #242424;
   z-index: 3;
 }
 .custom-select .custom-select-input:hover {
@@ -966,8 +539,8 @@ button.grey-btn {
   max-height: 200px;
   height: 0px !important;
   overflow: hidden;
-  background: #FFFFFF;
-  border: 1px solid #E4E4E4;
+  background: #242424;
+  border: 1px solid #3C3C3C;
   box-sizing: border-box;
   border-radius: 15px;
   z-index: 2;
@@ -985,13 +558,13 @@ button.grey-btn {
   padding: 10px;
   opacity: 0.8;
   transition-duration: 0.1s;
-  color: #3C5063;
+  color: #D9D9D9;
   font-size: 15px;
 }
 .custom-select .custom-select-options .custom-select-option:hover {
   opacity: 1;
   cursor: pointer;
-  color: #E8896D;
+  color: #47DCA6;
 }
 .custom-select.open {
   z-index: 5;
@@ -999,9 +572,140 @@ button.grey-btn {
 .custom-select.open .custom-select-options {
   height: 400px !important;
 }
+.custom-select.open .custom-select-input {
+  border: 1px solid #47DCA6;
+}
 .custom-select.open .custom-select-input:after {
   transform: rotate(180deg);
 }
 .custom-select.closing {
   z-index: 5;
 }
+.quill {
+  margin-top: 10px;
+}
+.quill .ql-toolbar {
+  border-color: #3C3C3C !important;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.quill .ql-toolbar button svg * {
+  stroke: #D9D9D9 !important;
+}
+.quill .ql-container {
+  border-color: #3C3C3C !important;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.quill .ql-editor {
+  min-height: 150px;
+}
+.quill button {
+  min-width: unset;
+}
+.quill .ql-picker .ql-picker-label {
+  border: none !important;
+}
+.quill .ql-picker-options {
+  background: #242424 !important;
+  border-color: #3C3C3C !important;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #47DCA6 !important;
+}
+.image-input {
+  position: relative;
+}
+.image-input > .flex-row {
+  margin-top: 10px;
+  flex-direction: row-reverse;
+  gap: 0px;
+}
+.image-input .upload-area {
+  border-color: #3C3C3C !important;
+  min-width: 190px;
+  margin-bottom: auto;
+  flex-grow: 2;
+}
+.image-input .preview-area .image-preview {
+  margin-right: 35px;
+}
+.image-input .preview-area .image-preview img {
+  max-width: 100%;
+  object-fit: contain;
+}
+.image-input .icon-delete {
+  min-width: 20px;
+  min-height: 20px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: -25px;
+  top: -3px;
+  opacity: 0.7;
+}
+.image-input .icon-delete:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.login-page {
+  width: 100%;
+  max-width: 100%;
+  height: 100vh;
+  gap: 0px;
+}
+.login-page .login-left-panel {
+  min-width: 50%;
+  background: url('../assets/login-green-rad-back-1.jpg');
+  background-size: cover;
+  background-position: center center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-page .login-right-panel {
+  min-width: 50%;
+  background: #242424;
+  padding: 135px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-page .username,
+.login-page .password {
+  padding-left: 50px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: 12px center;
+  background-size: 18px 18px;
+}
+.login-page .username {
+  background-image: url('../assets/icon-user.svg');
+}
+.login-page .password {
+  background-image: url('../assets/icon-padlock.svg');
+}
+.login-page .login-form {
+  max-width: 450px;
+}
+.login-page .forgotten-password {
+  width: 100%;
+}
+#MagiCSS-bookmarklet span {
+  color: black !important;
+}