sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/app/_general.scss

@@ -1,1199 +1,1199 @@
-/*#############################################################################
-# GENERAL CONTENT ELEMENTS
-#############################################################################*/
-// SECTION
-.webp .app-layout {
-  @include responsive($breakpoint-xmedium) {
-    .bg-application-incomplete {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d2.webp") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-
-    .bg-application-complete {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d1.webp") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-document-revision {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d1.webp") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-credit-options {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d7.webp") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-application-rejected {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d2.webp") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-
-    .bg-document-signature {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-signature.webp") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-credit-card-sempli-business {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-credit-card-ready.webp") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-  }
-
-  .dashboard-access-aside {
-    .login-default {
-      content: url("^assets/swl/interface/illustration-d9.webp");
-    }
-    .password-reset {
-      content: url("^assets/swl/interface/illustration-d2.webp");
-    }
-  }
-
-  .content-wrapper {
-    .empty-loan-application-list {
-      content: url("^assets/swl/interface/illustration-d8.webp");
-    }
-  }
-
-  .application-completed-content {
-    .application-completed-image {
-      content: url("^assets/swl/interface/illustration-d4.webp");
-    }
-  }
-
-  .response-handler {
-    img.empty {
-      content: url("^assets/swl/interface/illustration-d2.webp");
-    }
-
-    img.error {
-      content: url("^assets/swl/interface/illustration-d10.webp");
-    }
-  }
-
-  .virtual-card-section {
-    .front {
-      background: url('^assets/swl/interface/credit-card-front.webp') no-repeat center center;
-    }
-
-    .back {
-      background: url('^assets/swl/interface/credit-card-back.webp') no-repeat center center;
-    }
-  }
-}
-
-.no-webp .app-layout {
-  @include responsive($breakpoint-xmedium) {
-    .bg-application-incomplete {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d2.png") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-
-    .bg-application-complete {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d1.png") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-document-revision {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d1.png") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-credit-options {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d7.png") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-application-rejected {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-d2.png") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-
-    .bg-document-signature {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-signature.png") no-repeat right bottom;
-        background-size: contain;
-      }
-    }
-
-    .bg-credit-card-sempli-business {
-      .block-main {
-        background: url("^assets/swl/interface/illustration-credit-card-ready.png") no-repeat right bottom;
-        background-size: contain;
-        background-position-x: 80%;
-      }
-    }
-  }
-
-  .dashboard-access-aside {
-    .login-default {
-      content: url("^assets/swl/interface/illustration-d9.png");
-    }
-    .password-reset {
-      content: url("^assets/swl/interface/illustration-d2.png");
-    }
-  }
-
-  .content-wrapper {
-    .empty-loan-application-list {
-      content: url("^assets/swl/interface/illustration-d8.png");
-    }
-  }
-
-  .application-completed-content {
-    .application-completed-image {
-      content: url("^assets/swl/interface/illustration-d4.png");
-    }
-  }
-
-  .response-handler {
-    img.empty {
-      content: url("^assets/swl/interface/illustration-d2.png");
-    }
-
-    img.error {
-      content: url("^assets/swl/interface/illustration-d10.png");
-    }
-  }
-
-  .virtual-card-section {
-    .front {
-      background: url('^assets/swl/interface/credit-card-front.png') no-repeat center center;
-    }
-
-    .back {
-      background: url('^assets/swl/interface/credit-card-back.png') no-repeat center center;
-    }
-  }
-}
-
-a.navigate-back {
-  display: inline-block;
-  background: url("/assets/swl/interface/icons/arrow-left.svg") no-repeat 0 50%;
-  padding-left: 20px;
-  margin: 0 0 20px;
-}
-
-.step-title {
-  margin: 0 0 50px;
-}
-
-.step-actions {
-  margin-top: 60px;
-  @include pie-clearfix;
-
-  @include responsive-max($breakpoint-small) {
-    margin-top: 0;
-  }
-
-  .actions-wrapper {
-    background: #fff;
-    border-top: 1px solid #D7D9E2;
-    padding: 20px 0;
-    @include pie-clearfix;
-  }
-
-  &.is-sticky {
-    height: 75px;
-
-    .actions-wrapper {
-      padding: 15px;
-      width: 100vw;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      right: auto;
-      z-index: 1;
-
-      @include responsive($breakpoint-xmedium) {
-        padding: 15px 60px;
-        width: calc(100vw - 260px);
-
-        &.large {
-          width: calc(100vw - 400px);
-        }
-      }
-
-      @include responsive-max($breakpoint-small) {
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-between;
-
-        .button {
-          &.right {
-            display: flex;
-            align-items: center;
-          }
-        }
-      }
-    }
-  }
-
-  .button {
-    margin: 0;
-
-    &.left {
-      @include float(left);
-    }
-
-    &.right {
-      @include float(right);
-    }
-  }
-}
-
-.sidebar-left {
-  .step-actions {
-    &.is-sticky {
-      .actions-wrapper {
-        left: auto;
-        right: 0;
-      }
-    }
-  }
-}
-
-// Steps Specific Content
-
-.icon-msg-box {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-column-gap: 20px;
-
-  img.icon {
-    align-self: center;
-    display: block;
-    margin: 0;
-  }
-
-  .msg {
-    align-self: center;
-  }
-
-  p {
-    margin: 0 0 5px 0;
-  }
-}
-
-a.add-shareholder, .add-button {
-  line-height: 22px;
-
-  img.icon {
-    margin: 0 5px -5px 0;
-  }
-}
-
-ul.people {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  li.person {
-    border-bottom: 1px solid #D7D9E2;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-
-    .person-info {
-      > span {
-        display: block;
-      }
-
-      .name {
-        font-weight: 900;
-      }
-    }
-  }
-
-  &.compact {
-    li.person {
-      border-bottom: none;
-      margin-bottom: 15px;
-      padding-bottom: 0;
-    }
-  }
-}
-
-ul.documents {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  li.document {
-    display: grid;
-    grid-template-columns: 1fr 110px;
-    border-bottom: 1px solid #D7D9E2;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-
-    &:last-child {
-      border: none;
-    }
-
-    // Grid Items
-
-    .main-info {
-      grid-column: 1;
-      grid-row: 1;
-    }
-
-    .status-icon {
-      grid-column: 2;
-      grid-row: 1;
-      justify-self: center;
-      align-self: center;
-    }
-
-    // Document Element Styles
-
-    .title {
-      margin: 0 0 10px 0;
-    }
-
-    p.description,
-    p.alert {
-      max-width: 490px;
-      margin: 0;
-    }
-  }
-}
-
-.item-link-action {
-  display: inline-block;
-  color: $color-secondary;
-  font-size: rem-calc(14px);
-  margin-right: 12px;
-  padding-right: 17px;
-  position: relative;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  img.icon {
-    margin: 0 2px 0 0;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    background-color: $color-secondary-light;
-    width: 5px;
-    height: 5px;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    @include border-radius(100%);
-    @include transform(translateY(-50%));
-  }
-
-  &:last-child {
-    margin: 0;
-    padding: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  // Specific actions
-
-  &.modify {
-    img.icon {
-      margin-bottom: -1px;
-    }
-  }
-
-  &.review {
-    img.icon {
-      margin-bottom: -2px;
-    }
-  }
-
-  &.delete {
-    img.icon {
-      margin-bottom: -1px;
-    }
-  }
-
-  &.download {
-    color: $color-primary;
-  }
-
-  &.example {
-    img.icon {
-      margin-bottom: -2px;
-    }
-  }
-}
-
-.list-item-actions {
-  margin-top: 15px;
-
-  .item-action {
-    @extend .item-link-action;
-  }
-
-  .button {
-    margin-bottom: 0;
-  }
-}
-
-.entity-type-switch {
-  margin-bottom: 20px;
-  &.close {
-    margin-bottom: 10px;
-  }
-  @include pie-clearfix;
-
-  a.button {
-    margin: 0;
-    @include float(left);
-    @include border-radius(0);
-
-    &:first-child {
-      @include border-left-radius(4px);
-    }
-
-    &:last-child {
-      @include border-right-radius(4px);
-    }
-  }
-}
-
-.revision-needed {
-  background-color: #FFFFE5;
-  padding: 30px;
-  margin-bottom: 60px;
-
-  > h3 {
-    margin: 0;
-  }
-
-  ul.documents {
-    li:last-child {
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-}
-
-ul.checklist {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  li {
-    background: url("/assets/swl/interface/icons/check-purple.svg") no-repeat 0 50%;
-    padding-left: 20px;
-  }
-}
-
-ul.list-view {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  &.complete-list{
-    border-top: 1px solid $list-divider-color;
-  }
-
-  li {
-    border-bottom: 1px solid $color-secondary-light;
-    padding: 10px 0;
-    color: #000;
-
-    &.icon-action {
-      display: grid;
-      grid-template-columns: 24px 1fr 1fr;
-      grid-column-gap: 15px;
-      align-items: center;
-    }
-
-    &.selectable {
-      cursor: pointer;
-      display: grid;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      transform: scale(1.05);
-      background: $default-color-hover;
-      padding: 15px;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    img.icon {
-      display: block;
-      width: 100%;
-    }
-
-    .item-box {
-      span {
-        display: block;
-
-        &.actions {
-          font-size: rem-calc(14px);
-          font-weight: 900;
-          text-align: right;
-        }
-      }
-
-      &.left {
-        justify-self: start;
-      }
-
-      &.right {
-        justify-self: end;
-      }
-    }
-  }
-}
-
-.summary-block {
-  border-bottom: 1px solid #D7D9E2;
-  margin-bottom: 30px;
-  padding-bottom: 30px;
-
-  &:nth-last-of-type(2) {
-    border-bottom: none;
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-
-  h4.summary-title {
-    margin: 0 0 25px;
-
-    a {
-      font-size: rem-calc(14px);
-    }
-  }
-
-  p.credit-amount {
-    font-size: rem-calc(26px);
-  }
-
-  footer {
-    border-top: 2px solid lighten($color-secondary, 15%);
-    margin-top: 25px;
-    padding-top: 15px;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  // Dotted box
-  &.dotted {
-    background-color: lighten($color-secondary, 25%);
-    border: 2px dashed $color-secondary;
-    padding: 20px;
-    @include border-radius(4px);
-  }
-}
-
-.credit-option-main-info {
-  .label-title {
-    font-weight: 900;
-  }
-
-  .label-info {
-    color: $color-secondary;
-  }
-
-  @include responsive-max($breakpoint-small) {
-    .grid {
-      grid-gap: 20px;
-    }
-  }
-}
-
-.credit-simulation-panel {
-  h6 {
-    font-size: rem-calc(14px);
-    font-weight: 400;
-    opacity: 0.5;
-    margin: 0;
-  }
-
-  p {
-    font-size: rem-calc(16px);
-    font-weight: 900;
-    margin: 0;
-  }
-}
-
-.credit-simulation-table {
-
-  @include responsive-max($breakpoint-small) {
-    max-width: 100%;
-    overflow-x: auto;
-    width: 100%;
-  }
-
-  .table-header {
-    .table-row {
-      border-top: 2px solid $color-secondary;
-      border-bottom: 2px solid $color-secondary;
-
-      .table-cell {
-        color: $color-text;
-        font-size: rem-calc(15px);
-        font-weight: 900;
-        padding: 20px 15px;
-      }
-    }
-  }
-
-  .table-body {
-    .table-row {
-      .table-cell {
-
-      }
-    }
-  }
-
-  .table-footer {
-    .table-row {
-      border-bottom: none;
-
-      .table-cell {
-        color: $color-text;
-        font-size: rem-calc(15px);
-        font-weight: 900;
-      }
-    }
-  }
-
-  .table-row {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    border-bottom: 1px solid $color-secondary-light;
-
-    .table-cell {
-      color: $color-secondary;
-      font-size: rem-calc(13px);
-      padding: 15px;
-      text-align: center;
-
-      &:first-child {
-        text-align: left;
-      }
-
-      &:last-child {
-        text-align: right;
-      }
-    }
-  }
-
-  // Cell Specific
-
-  .installment-num {
-    display: inline-block;
-    background-color: lighten($color-secondary, 24%);
-    color: $color-text;
-    font-weight: 900;
-    padding: 1px 6px;
-    @include border-radius(4px);
-  }
-
-  .payment-total {
-    color: $color-text;
-    font-weight: 900;
-  }
-}
-
-.signatures {
-  .person-signatures {
-    border-bottom: 1px solid #D7D9E2;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    h4 {
-      margin: 0;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    ul.documents-to-sign {
-      margin: 15px 0 0;
-      padding: 0;
-      list-style: none;
-
-      li.document {
-        background: url("/assets/swl/interface/icons/signature-pending.svg") no-repeat 0 50%;
-        padding-left: 42px;
-        margin-bottom: 8px;
-
-        h6 {
-          margin: 0;
-        }
-
-        p.signature-status {
-          color: $color-secondary;
-          font-size: rem-calc(12px);
-          font-weight: 900;
-          margin: 0;
-        }
-
-        // Signed State
-
-        &.signed {
-          background-image: url("/assets/swl/interface/icons/check-green-circle-large.svg");
-        }
-      }
-    }
-
-    a.button {
-      float: right;
-    }
-  }
-}
-
-ul.signatures-doc-samples {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    a {
-      font-size: rem-calc(14px);
-    }
-  }
-}
-
-.sidebar-content {
-  display: flex;
-  flex-direction: column;
-  height: 90%;
-
-  .step-footer {
-    display: flex;
-    height: 100%;
-    align-items: flex-end;
-    .remaining-time-indicator{
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      gap: 8px;
-
-      .icon {
-        img {
-          max-width: 18px;
-          max-height: 18px;
-        }
-      }
-
-      .time-info {
-        display: flex;
-        flex-direction: column;
-        p {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  @include responsive-max($breakpoint-xmedium) {
-    .step-footer {
-      margin-top: 20px;
-    }
-  }
-}
-
-h4.wizard-step-title {
-  margin: 0 0 50px;
-  font-size: 1.1rem;
-}
-
-
-img.wizard-logo {
-  width: 130px;
-  margin: 0 0 30px;
-  overflow: hidden;
-
-  &.with-description {
-    +.wizard-step-title  {
-      margin: 0 0 30px;
-    }
-  }
-}
-
-.wizard-stepper {
-
-  section.app-body {
-    grid-template-columns: 260px 1fr !important;
-
-    .step-title {
-      font-size: 1.7rem;
-      font-weight: 900;
-      margin-bottom: 33px;
-    }
-
-    .step-actions {
-      &.is-sticky {
-        .actions-wrapper {
-          @include responsive($breakpoint-xmedium) {
-            width: calc(100vw - 260px);
-          }
-
-          @include responsive-max($breakpoint-xmedium) {
-            width: 100vw !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.without-header {
-    section.app-body {
-      height: 100vh;
-    }
-  }
-
-  @include responsive-max($breakpoint-xmedium) {
-    overflow: auto;
-    height: calc(100vh - 50px);
-  }
-}
-
-ul.wizard-steps {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    font-size: 0.8rem;
-    font-weight: 900;
-    line-height: 26px;
-    position: relative;
-    padding-top: 29px;
-    padding-left: 40px;
-
-    // Not being used, but perhaps necessary in the future
-    span.small {
-      display: block;
-      color: $color-secondary;
-      font-size: rem-calc(14px);
-      font-weight: 400;
-    }
-
-    // DOTS
-    &::after {
-      content: "";
-      display: block;
-      background: url("/assets/swl/interface/icons/signature-step-default.svg") no-repeat 50% 50%;
-      background-size: 24px 24px;
-      width: 26px;
-      height: 26px;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      z-index: 2;
-    }
-
-    // LINES
-    &::before {
-      content: "";
-      display: block;
-      background-color: #AFB3C0;
-      height: 56px;
-      width: 2px;
-      position: absolute;
-      left: 12px;
-      bottom: 24px;
-      z-index: 1;
-    }
-
-    &:first-child {
-      padding-top: 0;
-
-      &::after {
-
-      }
-
-      // Remove line from first element
-      &::before {
-        display: none;
-      }
-    }
-
-    // STATES
-
-    // Active
-    &.active {
-      &::before {
-        background-color: $color-primary;
-      }
-
-      &::after {
-        background: url("/assets/swl/interface/icons/signature-step-active.svg") no-repeat 50% 50%;
-      }
-    }
-
-    // Completed
-    &.completed {
-      cursor: pointer;
-      &::before {
-        background-color: $color-primary;
-      }
-
-      &::after {
-        background: url("/assets/swl/interface/icons/signature-step-completed.svg") no-repeat 50% 50%;
-      }
-
-      &.linear {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    }
-
-    &.linear {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    &.inactive {
-      cursor: not-allowed;
-      pointer-events: none;
-
-      span {
-        font-size: 0.8;
-        font-weight: 400;
-      }
-    }
-  }
-
-  &.small {
-    li {
-      padding-top: 20px;
-      // LINES
-
-      &:first-child {
-        padding-top: 0;
-      }
-
-      &::before {
-        height: 60px;
-        bottom: 20%;
-      }
-    }
-
-    &.inactive {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-
-  &.small {
-    li {
-      padding-top: 20px;
-      // LINES
-
-      &:first-child {
-        padding-top: 0;
-      }
-
-      &::before {
-        height: 60px;
-        bottom: 20%;
-      }
-    }
-  }
-}
-
-p.code-validation-instruction {
-  font-size: rem-calc(14px);
-  strong {
-    white-space: nowrap;
-  }
-}
-
-.validation-code-inputs {
-  .input-wrapper {
-    display: inline-block;
-    max-width: 70px;
-    margin: 0;
-    margin-right: 5px;
-
-    &:last-child {
-      margin: 0;
-    }
-
-    input[type=text] {
-      font-size: 36px;
-      font-weight: 900;
-      text-align: center;
-    }
-
-    @include responsive-max($breakpoint-small) {
-      width: 55px;
-
-      input {
-        padding: 7px 3px;
-      }
-    }
-  }
-}
-
-.report-checkbox {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.animate-rotation {
-  -webkit-animation:spin 4s linear infinite;
-  -moz-animation:spin 4s linear infinite;
-  animation:spin 4s linear infinite;
-}
-
-section.account-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  height: 100vh;
-  overflow: auto;
-
-  @include responsive-max($breakpoint-small) {
-    grid-template-columns: 1fr 0fr;
-  }
-
-  main {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    padding: 0 20px;
-    position: relative;
-
-    .account-block {
-      max-width: 400px;
-    }
-
-    // Content Elements
-
-    .sempli-logo {
-      width: 114px;
-      margin: 0 0 30px;
-
-      a {
-        display: block;
-        background: url("^assets/swl/interface/sempli-logo.svg") no-repeat 50% 50%;
-        background-size: 114px 30px;
-        height: 0;
-        width: 114px;
-        padding-top: 30px;
-        margin: 0;
-        overflow: hidden;
-      }
-    }
-
-    .welcome {
-      margin: 0 0 30px;
-
-      h3 {
-        margin: 0;
-        font-weight: 100;
-      }
-
-      h6 {
-        color: $color-secondary;
-        font-size: rem-calc(14px);
-        font-weight: 900;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        margin: 0;
-      }
-    }
-
-    .application-cta {
-      border-top: 1px solid $color-secondary-light;
-      color: $color-secondary;
-      font-size: rem-calc(14px);
-      padding: 30px 20px 0;
-
-      display: flex;
-      justify-content: center;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    a.secondary.forgot-password {
-      font-size: rem-calc(14px);
-    }
-  }
-
-  aside {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: lighten($color-secondary-light, 10%);
-    overflow: hidden;
-
-    img {
-      display: block;
-      width: 500px;
-    }
-
-    .password-reset {
-      width: 450px;
-    }
-
-    .login-default {
-      width: 330px;
-    }
-  }
-}
-
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
-.signature-box-wrapper {
-  width: 100%;
-  height: 190px;
-  border: 2px solid $color-secondary-light;
-  @include border-radius(4px);
-}
+/*#############################################################################
+# GENERAL CONTENT ELEMENTS
+#############################################################################*/
+// SECTION
+.webp .app-layout {
+  @include responsive($breakpoint-xmedium) {
+    .bg-application-incomplete {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d2.webp") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+
+    .bg-application-complete {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d1.webp") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-document-revision {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d1.webp") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-credit-options {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d7.webp") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-application-rejected {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d2.webp") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+
+    .bg-document-signature {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-signature.webp") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-credit-card-sempli-business {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-credit-card-ready.webp") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+  }
+
+  .dashboard-access-aside {
+    .login-default {
+      content: url("^assets/swl/interface/illustration-d9.webp");
+    }
+    .password-reset {
+      content: url("^assets/swl/interface/illustration-d2.webp");
+    }
+  }
+
+  .content-wrapper {
+    .empty-loan-application-list {
+      content: url("^assets/swl/interface/illustration-d8.webp");
+    }
+  }
+
+  .application-completed-content {
+    .application-completed-image {
+      content: url("^assets/swl/interface/illustration-d4.webp");
+    }
+  }
+
+  .response-handler {
+    img.empty {
+      content: url("^assets/swl/interface/illustration-d2.webp");
+    }
+
+    img.error {
+      content: url("^assets/swl/interface/illustration-d10.webp");
+    }
+  }
+
+  .virtual-card-section {
+    .front {
+      background: url('^assets/swl/interface/credit-card-front.webp') no-repeat center center;
+    }
+
+    .back {
+      background: url('^assets/swl/interface/credit-card-back.webp') no-repeat center center;
+    }
+  }
+}
+
+.no-webp .app-layout {
+  @include responsive($breakpoint-xmedium) {
+    .bg-application-incomplete {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d2.png") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+
+    .bg-application-complete {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d1.png") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-document-revision {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d1.png") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-credit-options {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d7.png") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-application-rejected {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-d2.png") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+
+    .bg-document-signature {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-signature.png") no-repeat right bottom;
+        background-size: contain;
+      }
+    }
+
+    .bg-credit-card-sempli-business {
+      .block-main {
+        background: url("^assets/swl/interface/illustration-credit-card-ready.png") no-repeat right bottom;
+        background-size: contain;
+        background-position-x: 80%;
+      }
+    }
+  }
+
+  .dashboard-access-aside {
+    .login-default {
+      content: url("^assets/swl/interface/illustration-d9.png");
+    }
+    .password-reset {
+      content: url("^assets/swl/interface/illustration-d2.png");
+    }
+  }
+
+  .content-wrapper {
+    .empty-loan-application-list {
+      content: url("^assets/swl/interface/illustration-d8.png");
+    }
+  }
+
+  .application-completed-content {
+    .application-completed-image {
+      content: url("^assets/swl/interface/illustration-d4.png");
+    }
+  }
+
+  .response-handler {
+    img.empty {
+      content: url("^assets/swl/interface/illustration-d2.png");
+    }
+
+    img.error {
+      content: url("^assets/swl/interface/illustration-d10.png");
+    }
+  }
+
+  .virtual-card-section {
+    .front {
+      background: url('^assets/swl/interface/credit-card-front.png') no-repeat center center;
+    }
+
+    .back {
+      background: url('^assets/swl/interface/credit-card-back.png') no-repeat center center;
+    }
+  }
+}
+
+a.navigate-back {
+  display: inline-block;
+  background: url("/assets/swl/interface/icons/arrow-left.svg") no-repeat 0 50%;
+  padding-left: 20px;
+  margin: 0 0 20px;
+}
+
+.step-title {
+  margin: 0 0 50px;
+}
+
+.step-actions {
+  margin-top: 60px;
+  @include pie-clearfix;
+
+  @include responsive-max($breakpoint-small) {
+    margin-top: 0;
+  }
+
+  .actions-wrapper {
+    background: #fff;
+    border-top: 1px solid #D7D9E2;
+    padding: 20px 0;
+    @include pie-clearfix;
+  }
+
+  &.is-sticky {
+    height: 75px;
+
+    .actions-wrapper {
+      padding: 15px;
+      width: 100vw;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      right: auto;
+      z-index: 1;
+
+      @include responsive($breakpoint-xmedium) {
+        padding: 15px 60px;
+        width: calc(100vw - 260px);
+
+        &.large {
+          width: calc(100vw - 400px);
+        }
+      }
+
+      @include responsive-max($breakpoint-small) {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        .button {
+          &.right {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+
+  .button {
+    margin: 0;
+
+    &.left {
+      @include float(left);
+    }
+
+    &.right {
+      @include float(right);
+    }
+  }
+}
+
+.sidebar-left {
+  .step-actions {
+    &.is-sticky {
+      .actions-wrapper {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+
+// Steps Specific Content
+
+.icon-msg-box {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: 20px;
+
+  img.icon {
+    align-self: center;
+    display: block;
+    margin: 0;
+  }
+
+  .msg {
+    align-self: center;
+  }
+
+  p {
+    margin: 0 0 5px 0;
+  }
+}
+
+a.add-shareholder, .add-button {
+  line-height: 22px;
+
+  img.icon {
+    margin: 0 5px -5px 0;
+  }
+}
+
+ul.people {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li.person {
+    border-bottom: 1px solid #D7D9E2;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+
+    .person-info {
+      > span {
+        display: block;
+      }
+
+      .name {
+        font-weight: 900;
+      }
+    }
+  }
+
+  &.compact {
+    li.person {
+      border-bottom: none;
+      margin-bottom: 15px;
+      padding-bottom: 0;
+    }
+  }
+}
+
+ul.documents {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li.document {
+    display: grid;
+    grid-template-columns: 1fr 110px;
+    border-bottom: 1px solid #D7D9E2;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+
+    &:last-child {
+      border: none;
+    }
+
+    // Grid Items
+
+    .main-info {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .status-icon {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: center;
+      align-self: center;
+    }
+
+    // Document Element Styles
+
+    .title {
+      margin: 0 0 10px 0;
+    }
+
+    p.description,
+    p.alert {
+      max-width: 490px;
+      margin: 0;
+    }
+  }
+}
+
+.item-link-action {
+  display: inline-block;
+  color: $color-secondary;
+  font-size: rem-calc(14px);
+  margin-right: 12px;
+  padding-right: 17px;
+  position: relative;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  img.icon {
+    margin: 0 2px 0 0;
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    background-color: $color-secondary-light;
+    width: 5px;
+    height: 5px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    @include border-radius(100%);
+    @include transform(translateY(-50%));
+  }
+
+  &:last-child {
+    margin: 0;
+    padding: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  // Specific actions
+
+  &.modify {
+    img.icon {
+      margin-bottom: -1px;
+    }
+  }
+
+  &.review {
+    img.icon {
+      margin-bottom: -2px;
+    }
+  }
+
+  &.delete {
+    img.icon {
+      margin-bottom: -1px;
+    }
+  }
+
+  &.download {
+    color: $color-primary;
+  }
+
+  &.example {
+    img.icon {
+      margin-bottom: -2px;
+    }
+  }
+}
+
+.list-item-actions {
+  margin-top: 15px;
+
+  .item-action {
+    @extend .item-link-action;
+  }
+
+  .button {
+    margin-bottom: 0;
+  }
+}
+
+.entity-type-switch {
+  margin-bottom: 20px;
+  &.close {
+    margin-bottom: 10px;
+  }
+  @include pie-clearfix;
+
+  a.button {
+    margin: 0;
+    @include float(left);
+    @include border-radius(0);
+
+    &:first-child {
+      @include border-left-radius(4px);
+    }
+
+    &:last-child {
+      @include border-right-radius(4px);
+    }
+  }
+}
+
+.revision-needed {
+  background-color: #FFFFE5;
+  padding: 30px;
+  margin-bottom: 60px;
+
+  > h3 {
+    margin: 0;
+  }
+
+  ul.documents {
+    li:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+}
+
+ul.checklist {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    background: url("/assets/swl/interface/icons/check-purple.svg") no-repeat 0 50%;
+    padding-left: 20px;
+  }
+}
+
+ul.list-view {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &.complete-list{
+    border-top: 1px solid $list-divider-color;
+  }
+
+  li {
+    border-bottom: 1px solid $color-secondary-light;
+    padding: 10px 0;
+    color: #000;
+
+    &.icon-action {
+      display: grid;
+      grid-template-columns: 24px 1fr 1fr;
+      grid-column-gap: 15px;
+      align-items: center;
+    }
+
+    &.selectable {
+      cursor: pointer;
+      display: grid;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      transform: scale(1.05);
+      background: $default-color-hover;
+      padding: 15px;
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    img.icon {
+      display: block;
+      width: 100%;
+    }
+
+    .item-box {
+      span {
+        display: block;
+
+        &.actions {
+          font-size: rem-calc(14px);
+          font-weight: 900;
+          text-align: right;
+        }
+      }
+
+      &.left {
+        justify-self: start;
+      }
+
+      &.right {
+        justify-self: end;
+      }
+    }
+  }
+}
+
+.summary-block {
+  border-bottom: 1px solid #D7D9E2;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+
+  &:nth-last-of-type(2) {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  h4.summary-title {
+    margin: 0 0 25px;
+
+    a {
+      font-size: rem-calc(14px);
+    }
+  }
+
+  p.credit-amount {
+    font-size: rem-calc(26px);
+  }
+
+  footer {
+    border-top: 2px solid lighten($color-secondary, 15%);
+    margin-top: 25px;
+    padding-top: 15px;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  // Dotted box
+  &.dotted {
+    background-color: lighten($color-secondary, 25%);
+    border: 2px dashed $color-secondary;
+    padding: 20px;
+    @include border-radius(4px);
+  }
+}
+
+.credit-option-main-info {
+  .label-title {
+    font-weight: 900;
+  }
+
+  .label-info {
+    color: $color-secondary;
+  }
+
+  @include responsive-max($breakpoint-small) {
+    .grid {
+      grid-gap: 20px;
+    }
+  }
+}
+
+.credit-simulation-panel {
+  h6 {
+    font-size: rem-calc(14px);
+    font-weight: 400;
+    opacity: 0.5;
+    margin: 0;
+  }
+
+  p {
+    font-size: rem-calc(16px);
+    font-weight: 900;
+    margin: 0;
+  }
+}
+
+.credit-simulation-table {
+
+  @include responsive-max($breakpoint-small) {
+    max-width: 100%;
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  .table-header {
+    .table-row {
+      border-top: 2px solid $color-secondary;
+      border-bottom: 2px solid $color-secondary;
+
+      .table-cell {
+        color: $color-text;
+        font-size: rem-calc(15px);
+        font-weight: 900;
+        padding: 20px 15px;
+      }
+    }
+  }
+
+  .table-body {
+    .table-row {
+      .table-cell {
+
+      }
+    }
+  }
+
+  .table-footer {
+    .table-row {
+      border-bottom: none;
+
+      .table-cell {
+        color: $color-text;
+        font-size: rem-calc(15px);
+        font-weight: 900;
+      }
+    }
+  }
+
+  .table-row {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border-bottom: 1px solid $color-secondary-light;
+
+    .table-cell {
+      color: $color-secondary;
+      font-size: rem-calc(13px);
+      padding: 15px;
+      text-align: center;
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+
+  // Cell Specific
+
+  .installment-num {
+    display: inline-block;
+    background-color: lighten($color-secondary, 24%);
+    color: $color-text;
+    font-weight: 900;
+    padding: 1px 6px;
+    @include border-radius(4px);
+  }
+
+  .payment-total {
+    color: $color-text;
+    font-weight: 900;
+  }
+}
+
+.signatures {
+  .person-signatures {
+    border-bottom: 1px solid #D7D9E2;
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    h4 {
+      margin: 0;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    ul.documents-to-sign {
+      margin: 15px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li.document {
+        background: url("/assets/swl/interface/icons/signature-pending.svg") no-repeat 0 50%;
+        padding-left: 42px;
+        margin-bottom: 8px;
+
+        h6 {
+          margin: 0;
+        }
+
+        p.signature-status {
+          color: $color-secondary;
+          font-size: rem-calc(12px);
+          font-weight: 900;
+          margin: 0;
+        }
+
+        // Signed State
+
+        &.signed {
+          background-image: url("/assets/swl/interface/icons/check-green-circle-large.svg");
+        }
+      }
+    }
+
+    a.button {
+      float: right;
+    }
+  }
+}
+
+ul.signatures-doc-samples {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    a {
+      font-size: rem-calc(14px);
+    }
+  }
+}
+
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 90%;
+
+  .step-footer {
+    display: flex;
+    height: 100%;
+    align-items: flex-end;
+    .remaining-time-indicator{
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 8px;
+
+      .icon {
+        img {
+          max-width: 18px;
+          max-height: 18px;
+        }
+      }
+
+      .time-info {
+        display: flex;
+        flex-direction: column;
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  @include responsive-max($breakpoint-xmedium) {
+    .step-footer {
+      margin-top: 20px;
+    }
+  }
+}
+
+h4.wizard-step-title {
+  margin: 0 0 50px;
+  font-size: 1.1rem;
+}
+
+
+img.wizard-logo {
+  width: 130px;
+  margin: 0 0 30px;
+  overflow: hidden;
+
+  &.with-description {
+    +.wizard-step-title  {
+      margin: 0 0 30px;
+    }
+  }
+}
+
+.wizard-stepper {
+
+  section.app-body {
+    grid-template-columns: 260px 1fr !important;
+
+    .step-title {
+      font-size: 1.7rem;
+      font-weight: 900;
+      margin-bottom: 33px;
+    }
+
+    .step-actions {
+      &.is-sticky {
+        .actions-wrapper {
+          @include responsive($breakpoint-xmedium) {
+            width: calc(100vw - 260px);
+          }
+
+          @include responsive-max($breakpoint-xmedium) {
+            width: 100vw !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.without-header {
+    section.app-body {
+      height: 100vh;
+    }
+  }
+
+  @include responsive-max($breakpoint-xmedium) {
+    overflow: auto;
+    height: calc(100vh - 50px);
+  }
+}
+
+ul.wizard-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    font-size: 0.8rem;
+    font-weight: 900;
+    line-height: 26px;
+    position: relative;
+    padding-top: 29px;
+    padding-left: 40px;
+
+    // Not being used, but perhaps necessary in the future
+    span.small {
+      display: block;
+      color: $color-secondary;
+      font-size: rem-calc(14px);
+      font-weight: 400;
+    }
+
+    // DOTS
+    &::after {
+      content: "";
+      display: block;
+      background: url("/assets/swl/interface/icons/signature-step-default.svg") no-repeat 50% 50%;
+      background-size: 24px 24px;
+      width: 26px;
+      height: 26px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    // LINES
+    &::before {
+      content: "";
+      display: block;
+      background-color: #AFB3C0;
+      height: 56px;
+      width: 2px;
+      position: absolute;
+      left: 12px;
+      bottom: 24px;
+      z-index: 1;
+    }
+
+    &:first-child {
+      padding-top: 0;
+
+      &::after {
+
+      }
+
+      // Remove line from first element
+      &::before {
+        display: none;
+      }
+    }
+
+    // STATES
+
+    // Active
+    &.active {
+      &::before {
+        background-color: $color-primary;
+      }
+
+      &::after {
+        background: url("/assets/swl/interface/icons/signature-step-active.svg") no-repeat 50% 50%;
+      }
+    }
+
+    // Completed
+    &.completed {
+      cursor: pointer;
+      &::before {
+        background-color: $color-primary;
+      }
+
+      &::after {
+        background: url("/assets/swl/interface/icons/signature-step-completed.svg") no-repeat 50% 50%;
+      }
+
+      &.linear {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    &.linear {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &.inactive {
+      cursor: not-allowed;
+      pointer-events: none;
+
+      span {
+        font-size: 0.8;
+        font-weight: 400;
+      }
+    }
+  }
+
+  &.small {
+    li {
+      padding-top: 20px;
+      // LINES
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &::before {
+        height: 60px;
+        bottom: 20%;
+      }
+    }
+
+    &.inactive {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &.small {
+    li {
+      padding-top: 20px;
+      // LINES
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &::before {
+        height: 60px;
+        bottom: 20%;
+      }
+    }
+  }
+}
+
+p.code-validation-instruction {
+  font-size: rem-calc(14px);
+  strong {
+    white-space: nowrap;
+  }
+}
+
+.validation-code-inputs {
+  .input-wrapper {
+    display: inline-block;
+    max-width: 70px;
+    margin: 0;
+    margin-right: 5px;
+
+    &:last-child {
+      margin: 0;
+    }
+
+    input[type=text] {
+      font-size: 36px;
+      font-weight: 900;
+      text-align: center;
+    }
+
+    @include responsive-max($breakpoint-small) {
+      width: 55px;
+
+      input {
+        padding: 7px 3px;
+      }
+    }
+  }
+}
+
+.report-checkbox {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.animate-rotation {
+  -webkit-animation:spin 4s linear infinite;
+  -moz-animation:spin 4s linear infinite;
+  animation:spin 4s linear infinite;
+}
+
+section.account-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 100vh;
+  overflow: auto;
+
+  @include responsive-max($breakpoint-small) {
+    grid-template-columns: 1fr 0fr;
+  }
+
+  main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 20px;
+    position: relative;
+
+    .account-block {
+      max-width: 400px;
+    }
+
+    // Content Elements
+
+    .sempli-logo {
+      width: 114px;
+      margin: 0 0 30px;
+
+      a {
+        display: block;
+        background: url("^assets/swl/interface/sempli-logo.svg") no-repeat 50% 50%;
+        background-size: 114px 30px;
+        height: 0;
+        width: 114px;
+        padding-top: 30px;
+        margin: 0;
+        overflow: hidden;
+      }
+    }
+
+    .welcome {
+      margin: 0 0 30px;
+
+      h3 {
+        margin: 0;
+        font-weight: 100;
+      }
+
+      h6 {
+        color: $color-secondary;
+        font-size: rem-calc(14px);
+        font-weight: 900;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        margin: 0;
+      }
+    }
+
+    .application-cta {
+      border-top: 1px solid $color-secondary-light;
+      color: $color-secondary;
+      font-size: rem-calc(14px);
+      padding: 30px 20px 0;
+
+      display: flex;
+      justify-content: center;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    a.secondary.forgot-password {
+      font-size: rem-calc(14px);
+    }
+  }
+
+  aside {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: lighten($color-secondary-light, 10%);
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 500px;
+    }
+
+    .password-reset {
+      width: 450px;
+    }
+
+    .login-default {
+      width: 330px;
+    }
+  }
+}
+
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+.signature-box-wrapper {
+  width: 100%;
+  height: 190px;
+  border: 2px solid $color-secondary-light;
+  @include border-radius(4px);
+}