@import "../variables";
@import "mixins";

.modal-main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../img/bg_blue.jpg");
  background-size: cover;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: 1s;
  z-index: 2;

  .modal-dialog {
    .flex-container;
    .flex-container-alignment(center, center);
    margin: 0;
    min-height: 100%;
    transform: translate(0,0) !important;
    transition: 0s !important;
    width: auto;

    .modal-content {
      box-shadow: none;
      background-color: transparent;
      border: none;
    }
  }

  .modal-form-wrapper {
    .flex-container-direction(column);
    position: relative;
    background: fade(white, 60%);
    border-radius: 3rem;
    box-shadow: @modal-form-shadow;
    transition: opacity 1s;

    .modal-form-header {
      position: relative;
      background: @program-modal-header-color;
      border-radius: 3rem 3rem 0 0;
      height: 10rem;

      .modal-form-header-icon {
        position: absolute;
        top: -8.5rem;
        left: 50%;
        transform: translateX(-50%);
        background: @program-modal-header-color;
        border-top-left-radius: 16rem;
        border-top-right-radius: 16rem;
        text-align: center;
        width: 32rem;
        height: 16rem;
        z-index: 1;

        .base-icon {
          .icon-sizing(7rem, 7rem, -2.5rem, -3.5rem);
          color: @program-dark-color;
          top: 2.5rem;

          &.wider-icon {
            .icon-sizing(7rem, 10rem, -2.5rem, -2rem);
          }
        }
      }

      .modal-form-header-title {
        position: relative;
        color: @program-dark-color;
        font-size: 4.75rem;
        font-weight: 300;
        line-height: 10rem;
        text-align: center;
        width: 100%;
        z-index: 2;

        .modal-form-header-arrow {
          .icon-sizing(2rem, 2rem, -5rem, -6rem);
          margin-left: 2rem;
          margin-bottom: 1rem;
        }
      }

      .modal-form-header-close {
        .flex-container;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 4rem;
        height: 4rem;
        width: 4rem;
        margin-top: 0.5rem;
        z-index: 3;

        button {
          .flex-container;
          background: transparent;
          border: none;
          color: @program-modal-header-close-color;
          padding: 0;

          .base-icon {
            .icon-sizing(4rem, 4rem, -4rem, -5rem);
          }
        }
      }

      &.modal-form-header-transparent {
        background: transparent;
      }

      &.closed-panel {
        border-radius: 3rem;

        .modal-form-header-title {

          .modal-form-header-arrow {
            transform: rotateX(180deg);
          }
        }
      }
    }

    &:first-child {
      margin-top: 10rem;
    }

    &:not(:first-child) {
      margin-top: 1rem;
    }

    &:last-child {
      margin-bottom: 10rem;
    }
  }

  &.in-remove {
    transition: 0.5s !important;
  }

  &.ng-leave {
    display: none !important;
  }
}

.modalTopClassBackground {

  .modal-form-wrapper {
    opacity: 0.2;
  }
}

.general-form {
  .flex-container-direction(column);
  .flex-container-alignment(center, center);

  .general-form-header {
    color: @program-dark-color;
    font-size: 4.75rem;
    text-align: center;
  }

  .general-form-progress-bar-wrapper {
    margin: 6rem 0;
    width: 100%;

    .general-form-progress-bar {
      background-color: @create-safe-progress-bar-bg-color;
      border-radius: 1rem;
      height: 1rem;
      width: 100%;

      .progress-bar-fill {
        background-color: @create-safe-progress-bar-fill-color;
        border-radius: 1rem;
        height: 1rem;
        width: 25%;
        transition: all 0.5s linear;
      }
    }

    .general-form-step-container {
      .flex-container;
      .flex-container-alignment(center, space-between);
      height: 15rem;
      width: 100%;

      .general-form-step {
        color: @create-safe-progress-bar-step-color;
        flex-grow: 1;
        font-size: 3.5rem;
        text-align: center;

        &.active {
          color: @program-label-color;
          font-weight: 600;
        }

        &.passed {
          color: @program-label-color;
        }
      }
    }
  }

  .general-form-field-group {
    width: 100%;

    &.field-group-vertical {
      .flex-container-direction(column);
      .flex-container-alignment(center, center);
      margin-top: 5rem;

      &:first-child {
        margin-top: 0;
      }
      
      .general-input, .general-input-wrapper, .general-textarea {
        margin-top: 4rem;

        &.bigger-indent {
          margin-top: 7rem;
        }
      }

      .general-range-wrapper {
        margin-top: 5rem;
      }

      .field-group-error {
        display: block;
        align-self: flex-start;
        color: @error-color;
        font-size: 3.25rem;
        font-style: italic;
        margin-top: 2rem;
      }
    }

    &.field-group-horizontal {
      .flex-container-direction(row);
      .flex-container-alignment(flex-start, flex-start);
      margin-top: 7rem;

      .field-group-label {
        .flex-container-direction(column);
        .flex-container-alignment(flex-end, center);
        height: 7rem;
        line-height: 3.5rem;
        padding-right: 3rem;
        text-align: right;
      }

      &:hover {

        &:not(.no-hover) {

          .field-group-label {
            color: @program-hover-color;

            .field-group-label-info {
              color: @program-input-placeholder-hover-color
            }
          }

          .general-input, .general-textarea {
            border-bottom-color: @program-hover-color;
            color: @program-hover-color;

            &::-webkit-input-placeholder {
              color: @program-input-placeholder-hover-color;
            }
          }

          .general-input-wrapper {
            border-bottom-color: @program-hover-color;
            color: @program-hover-color;

            .eye-icon {
              color: @program-input-placeholder-hover-color;

              &.open {
                color: @program-hover-color;
              }
            }

            .autocomplete-caret {
              color: @program-hover-color;
            }
          }

          .general-select {

            .dropdown-toggle {
              border-bottom-color: @program-hover-color;
              color: @program-hover-color;

              .caret {
                color: @program-hover-color;
              }
            }
          }
        }
      }
    }

    &.field-group-review {
      .flex-container-direction(row);
      .flex-container-alignment(flex-start, center);
      border-bottom: 1px solid @program-modal-divider-color;
      font-size: 3.5rem;
      padding: 2rem 0;
      line-height: 5.5rem;

      .field-group-label {
        color: @program-dark-color;
        font-weight: 600;
        padding-right: 10rem;
        text-align: left;
        min-width: 50%;
        width: 50%;
      }

      .field-group-description {
        color: @program-main-color;
        padding-right: 2rem;
        min-width: 50%;
        width: 50%;
        word-break: break-word;
      }

      .field-group-error {
        display: block;
        align-self: flex-start;
        color: @error-color;
        font-size: 3.25rem;
        font-style: italic;
        margin-top: 2rem;
      }

      &.active-line {
        background: fade(@program-modal-active-line-color, 20%);
      }

      &:last-child {
        border-bottom: none!important;
      }
    }

    &.field-group-review-full {
      .flex-container-direction(column);
      .flex-container-alignment(center, center);
      color: @program-dark-color;
      font-size: 4rem;
      margin-top: 10rem;

      .review-description {
        color: @program-hover-color;
        font-size: 3.5rem;
      }
    }

    &.field-group-review-full-second {
      .flex-container-direction(row);
      .flex-container-alignment(center, center);
      color: @program-dark-color;
      font-size: 4rem;

      .transaction-status-indicator{
        margin-right: 3rem;
      }
    }

    &.need-master-password {
      margin-top: 13rem;
      margin-bottom: 4rem;
      max-width: 95rem;
    }

    &.field-group-buttons-wrapper {
      margin-top: 3.5rem;

      .field-group-dropdown {
        margin-right: 3rem;

        & > button {
          .flex-container;
          .flex-container-alignment(center, center);
          background: white;
          border: 1px solid @program-button-border-color;
          border-radius: 1rem;
          color: @program-main-color;
          height: 7rem;
          min-width: 12rem;
          overflow: hidden;

          .dropdown-arrow-icon {
            .icon-sizing(2rem, 2rem, -5rem, -6rem);
          }

          &:hover {
            background: @program-button-hover-bg-color;
          }

          &:active {
            background: @program-button-active-bg-color;
          }
        }

        &.open {

          & > button {
            background: @program-button-active-bg-color !important;
          }
        }
      }
    }

    &.field-group-checkbox-wrapper {
      margin-top: 3.5rem;
    }

    &.field-group-range-wrapper {
      margin-top: 9.5rem;
      margin-bottom: 1rem;

      .field-group-label {
        margin-top: 2.5rem;
      }
    }

    &.field-group-extra-icons {
      position: relative;
      align-self: flex-end;

      .extra-icon-wrapper {
        position: absolute;
        right: -8.5rem;
        margin-top: 7rem;
        display: inline-flex;
        color: @program-light-color;

        .base-icon {
          .icon-sizing(6rem, 6rem, -3rem, -4rem);
          cursor: pointer;
        }

        &.active {
          color: @program-dark-color;
        }

        &:hover {
          color: @program-dark-color;
        }
      }
    }

    &.bigger-indent {
      margin-top: 10rem;
    }

    .field-group-label {
      color: @program-dark-color;
      font-size: 3.5rem;
      font-weight: 400;
      margin: 0;
      text-align: center;

      &.bolder-label {
        font-weight: 600;
      }

      .field-group-label-info {
        color: @program-label-subtext-color;
        font-size: 2.75rem;
        font-style: italic;
        font-weight: 400;
      }
    }

    .field-group-subgroup {
      display: flex;
    }

    .field-group-error-wrapper {
      .flex-container-direction(column);
      width: 100%;

      .field-group-error {
        display: block;
        color: @error-color;
        font-size: 3.25rem;
        line-height: 2.75rem;
        font-style: italic;
        margin-top: 1.5rem;
      }
    }
  }

  .general-form-control-buttons {
    .flex-container;
    border-radius: 5rem;
    margin-top: 7rem;

    .control-button {
      background-color: white;
      border: 1px solid @program-button-border-color;
      color: @program-button-text-color;
      font-size: 4rem;
      padding: 1.25rem 2.5rem;
      min-width: 32.5rem;

      .control-button-info {
        display: block;
        color: @program-button-subtext-color;
        font-size: 2.75rem;
      }

      &.larger-button {
        min-width: 37.5rem !important;
      }

      &.large-button {
        min-width: 48rem !important;
      }

      &.extra-large-button {
        min-width: 65rem !important;
      }

      &:first-child {
        border-bottom-left-radius: 5rem;
        border-top-left-radius: 5rem;
      }

      &:not(:last-child) {
        border-right: none;
      }

      &:last-child {
        border-bottom-right-radius: 5rem;
        border-top-right-radius: 5rem;
      }

      &:hover {
        background: @program-button-hover-bg-color;
      }

      &:active {
        background: @program-button-active-bg-color;
      }

      &:disabled {
        background: fade(white, 20%);
        color: @program-light-color;
      }

      &.inactive {
        background: fade(white, 20%) !important;
        color: @program-light-color;
      }
    }
  }

  .general-form-review-wrapper {
    width: 100%;
  }

  .general-form-price-description {
    .flex-container-direction(column);
    .flex-container-alignment(center, center);
    margin-top: 12rem;

    .price-text {
      color: @program-hover-color;
      font-size: 3.5rem;
    }

    .price-error {
      display: block;
      color: @error-color;
      font-size: 3.25rem;
      font-style: italic;
      margin-top: 2rem;
    }
  }

  .general-form-warning {
    .flex-container-direction(column);
    .flex-container-alignment(center, center);
    color: @error-color;
    margin-top: 9rem;
    max-width: 77rem;

    .warning-title {
      font-size: 4rem;
      margin: 1.75rem 0;
      text-align: center;
    }

    .warning-description {
      font-size: 3.25rem;
      line-height: 3.75rem;
      text-align: center;
    }
  }

  .focused-line {

    .field-group-label {
      color: @program-hover-color;

      .field-group-label-info {
        color: @program-input-placeholder-hover-color;
      }
    }

    .general-input, .general-textarea {
      border-bottom-color: @program-hover-color;
      color: @program-hover-color;

      &::-webkit-input-placeholder {
        color: @program-input-placeholder-hover-color;
      }
    }
    
    .general-input-wrapper, &.general-input-wrapper {
      border-bottom-color: @program-hover-color;
      color: @program-hover-color;

      .eye-icon {
        color: @program-input-placeholder-hover-color;

        &.open {
          color: @program-hover-color;
        }
      }

      .autocomplete-caret {
        color: @program-hover-color;
      }
    }

    .general-select {

        .dropdown-toggle {
          border-bottom-color: @program-hover-color;
          color: @program-hover-color;

          .caret {
            color: @program-hover-color;
          }
        }
      }
  }
}

.modal-unlock-app {

  .unlock-app {
    .flex-container;

    .unlock-app-btn {
      .flex-container-direction(column);
      .flex-container-alignment(center, center);
      background: transparent;
      border: none;
      color: @program-exuding-color;
      font-size: 8.25rem;
      font-weight: 200;
      line-height: 20rem;
      margin: 0;
      padding: 0;

      .base-icon {
        .icon-sizing(20rem, 20rem, 0, -2rem);
        font-size: 24rem;
      }
    }
  }
}

.modal-app-blocked {

  .modal-form-wrapper {
    width: 114rem;

    .modal-form-body {
      padding: 11.5rem 9.5rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group {
      margin-bottom: 9.5rem;

      .field-group-label {
        font-size: 4rem;
        line-height: 4rem;
      }

      .general-input-wrapper {
        margin-top: 9rem;
      }
    }

    .general-form-control-buttons {
      margin-top: 3rem;
    }
  }
}

.modal-use-master-password {

  .modal-form-wrapper {
    width: 114rem;

    .modal-form-body {
      padding: 2.5rem 9.5rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .general-input-wrapper {
        margin-top: 10rem;
      }
    }

    .use-master-password-description {
      position: relative;
      color: @program-dark-color;
      font-size: 3.5rem;
      margin: 10rem auto 5rem;
      text-align: center;

      .base-icon {
        .icon-sizing(4rem, 4rem, -4rem, -5rem);
        position: absolute;
        top: -2rem;
        right: -4rem;
        color: @program-label-info-color;
        cursor: pointer;
      }
    }

    .general-form-control-buttons {
      margin-top: 3rem;
    }
  }
}

.modal-cancel-master-password {

  .modal-form-wrapper {
    width: 156.5rem;

    .modal-form-body {
      padding: 1.5rem 9.5rem 6rem;
    }
  }

  .general-form {

    .general-form-control-buttons {

      .control-button {
        max-width: 37.5rem;
      }
    }
  }
}

.modal-change-master-password {

  .modal-form-wrapper {
    width: 114rem;

    .modal-form-body {
      padding: 7rem 9.5rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group.new-password {
      margin-top: 7rem;
    }
  }
}

.modal-error-report {

  .modal-form-wrapper {
    width: 124rem;

    .modal-form-body {
      padding: 11rem 9rem 8rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .error-report-field-wrapper {
        .flex-container;
        width: 100%;

        .general-select {
          margin-right: 3.25rem;
        }

        .general-input {
          margin-top: 0;
          margin-left: 3.25rem;
        }
      }

      .error-report-indent {
        margin-top: 6rem;
      }

      &.error-report-indent {
        margin-top: 6rem;
      }
    }

    .error-report-sending {
      color: @success-color;
      font-size: 3.5rem;
    }

    .error-report-success {
      color: @success-color;
      font-size: 3.5rem;
    }

    .error-report-fail {
      color: @error-color;
      font-size: 3.5rem;
    }

    .general-form-control-buttons {
      margin-top: 5.5rem;
    }
  }
}

.general-form-safe-backup {
  .flex-container-direction(column);
  .flex-container-alignment(center, center);

  .general-form-safe-description {
    .flex-container-direction(column);
    color: @program-dark-color;
    padding: 0 8rem;

    span {
      text-align: center;
    }

    .first-description {
      font-size: 4.75rem;
      line-height: 10rem;
      margin-top: 3rem;
    }

    .second-description {
      font-size: 3.25rem;
      line-height: 5rem;
    }

    .third-description {
      font-size: 4.75rem;
      line-height: 7rem;
      margin-top: 9rem;
    }
  }

  .general-form-control-buttons {
    margin-top: 4rem;
    margin-bottom: 2rem;

    .control-button {
      min-width: 75rem;
    }
  }
}

.modal-create-safe, .modal-open-smartsafe {

  .modal-form-wrapper {

    .modal-form-body {
      padding: 7rem 12rem 9.5rem;
    }

    .modal-form-body.start-use-safe {
      padding: 6rem 9rem 7rem;

      .general-form {

        .general-form-control-buttons {
          margin-top: 0;

          .control-button {
            min-width: 75rem;
          }
        }
      }
    }
  }

  .general-form {

    .general-form-field-group {
      margin-top: 4.5rem;
      padding-left: 8rem;
      padding-right: 8rem;

      .field-group-label {
        font-size: 4rem;
        line-height: 4rem;
        margin-bottom: 1.5rem;
      }

      .general-input-wrapper {
        margin-top: 7.5rem;
      }
    }

    .general-form-warning {
      margin-top: 2.5rem;
      margin-bottom: 6.5rem;
    }

    .general-form-control-buttons {
      margin-top: 4.5rem;

      .base-icon {
        .icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
        animation: checkbox-animation linear 0.3s;
        animation-iteration-count: 1;
        color: @program-button-done-icon-color;
        margin-left: 1.5rem;
        margin-bottom: -1rem;
      }
    }
  }
}

.modal-create-safe {

  .modal-form-wrapper {
    width: 136rem;
  }
}

.modal-create-smartsafe {

  .modal-form-wrapper {
    width: 220rem;

    .modal-form-body {
      padding: 7rem 8.5rem;
    }
  }

  .general-form {

    .smartsafe-header {
      color: @program-dark-color;
      font-size: 4rem;
      line-height: 12.5rem;
      text-align: center;
    }

    .smartsafe-description {
      color: @program-dark-color;
      font-size: 3.25rem;
      line-height: 4.25rem;
      padding: 0 10rem;
      text-align: center;
    }

    .smartsafe-phrase {
      .flex-container;
      .flex-container-alignment(center, space-between);
      border-bottom: 1px solid @program-input-border-color;
      color: @program-input-text-color;
      font-size: 3rem;
      padding: 1rem 0;
      margin-top: 9rem;
      width: 100%;
    }

    .smartsafe-buttons {
      .flex-container;
      margin: 8rem auto;

      .smartsafe-button {
        .general-button(auto, 5.75rem);
        border: 1px solid @program-button-border-color;
        color: @program-button-text-color;
        font-size: 3.5rem;
        margin: 0 2.5rem;
        padding: 0 2.5rem;
        min-width: 25rem;

        &:hover {
          background: rgba(255, 255, 255, 0.8);
        }

        .base-icon {
          .icon-sizing(4rem, 4rem, -4rem, -5rem);
          margin-right: 1.5rem;
        }

        .copied-icon {
          animation: checkbox-animation linear 0.5s;

          &:before {
            content: 'A' !important;
          }
        }
      }
    }

    .smartsafe-checkbox {
      margin-top: 4rem;

      .general-checkbox {

        .general-checkbox-text {
          font-size: 3.25rem;
        }
      }
    }

    .general-form-control-buttons {
      margin-top: 9rem;

      .control-button {
        min-width: 60rem;
      }
    }
  }
}

.modal-open-safe {

  .modal-form-wrapper {
    width: 114rem;

    .modal-form-body {
      padding: 7rem 9.5rem 9.5rem;
    }
  }
}

.modal-open-smartsafe {

  .modal-form-wrapper {
    width: 196.5rem;
  }

  .general-form {

    .general-form-field-group:not(.phrase-group) {
      max-width: 112rem;
    }
  }
}

.modal-restore-safe {

  .modal-form-wrapper {
    width: 114rem;

    .modal-form-body {
      padding: 7rem 9.5rem 9.5rem;
    }
  }

  .general-form {

    .restored-safe-name {
      color: @program-hover-color;
      font-size: 6.25rem;
      font-weight: 300;
      line-height: 6rem;
      margin-top: 8rem;
    }

    .restored-safe-path {
      color: @program-dark-color;
      font-size: 3.5rem;
      line-height: 3.5rem;
      margin-top: 4.5rem;
      text-align: center;
      word-break: break-word;
    }

    .general-form-field-group {
      margin-top: 13.5rem;

      .field-group-label {
        font-size: 4rem;
        line-height: 4rem;
      }

      .general-input-wrapper {
        margin-top: 9rem;
      }
    }

    .general-form-control-buttons {
      margin-top: 11rem;
    }
  }
}

.modal-safe-backup {

  .modal-form-wrapper {
    width: 136rem;

    .modal-form-body {
      padding: 0 12rem 6.5rem;
    }
  }
}

.modal-change-safe-password {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 11rem 9.5rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group.new-password {
      margin-top: 7rem;
    }

    .general-form-control-buttons {
      margin-top: 2rem;
    }
  }
}

.modal-disable-safe {

  .modal-form-wrapper {
    width: 101rem;

    .modal-form-body {
      padding: 1.5rem 9.5rem 6rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .field-group-label {
        font-size: 4.75rem;
        line-height: 5rem;
      }
    }

    .general-form-control-buttons {
      margin-top: 11rem;
    }
  }
}

.modal-create-alias {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 7.5rem 9.5rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .create-alias-description {
        color: @program-dark-color;
        font-size: 3.25rem;
        line-height: 4rem;
        padding: 0 5rem;
        margin-top: 0.5rem;
        text-align: center;
      }

      &.smaller-indent {
        margin-top: 3.5rem;
      }
    }

    .general-input-wrapper {

      .alias-character {
        color: @program-dark-color;
        font-size: 3.5rem;
        margin-right: 1rem;
        padding: 1rem 0;
      }

      &:hover, &.focused-line {

        .alias-character {
          color: @program-hover-color;
        }
      }
    }

    .general-form-price-description {
      margin-top: 6rem;
    }
  }
}

.modal-transfer-alias {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 10rem 9.5rem 5rem;
    }
  }
}

.modal-edit-alias-comment {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 10.5rem 9.5rem 5rem;
    }

    .general-form-price-description {
      margin-top: 6rem;
    }
  }
}

.modal-send-money {

  .modal-form-wrapper {
    width: 166.5rem;

    .modal-form-body {
      padding: 7rem 18.5rem 8rem 0;
    }
  }

  .general-form {
    @left-padding: 42rem;

    .general-form-field-group {

      .field-group-label {
        padding-left: 6rem;
        min-width: @left-padding;
        width: @left-padding;
      }

      &.field-group-checkbox-wrapper {
        padding-left: @left-padding;
      }

      &.field-group-buttons-wrapper {
        padding-left: @left-padding;

        .field-group-dropdown {

          .dropdown-menu {
            min-width: 48rem;
          }
        }

        .dropdown-clock-icon {
          .icon-sizing(6rem, 6rem, -3rem, -4rem);
        }

        .dropdown-contact-icon {
          .icon-sizing(6rem, 6rem, -2.5rem, -3rem);
          font-size: 12rem;
        }
      }

      .send-money-subgroup-left, .send-money-subgroup-right {
        .flex-container;

        &:hover {

          &:not(.no-hover) {

            .field-group-label {
              color: @program-hover-color;
            }
          }
        }
      }

      .send-money-subgroup-left {

        .general-input-wrapper {
          width: 45.5rem;
        }
      }

      .send-money-subgroup-right {

        .field-group-label {
          padding-left: 0;
          min-width: 38.5rem;
          width: 38.5rem;
        }

        .general-input-wrapper {
          width: 22rem;
        }
      }
    }

    .safe-alias-modal-wrapper {
      margin-top: 3.5rem;
      padding-left: @left-padding;
      width: 100%;
    }

    .recent-transaction-table-wrapper {
      align-self: flex-start;
      margin-top: 3.5rem;
    }

    .recent-transactions-table {
      max-height: 45.25rem;
      width: 100%;
      overflow-y: auto;

      table {
        color: @program-main-color;
        font-size: 3.5rem;
        width: 100%;

        tbody {

          tr {
            height: 9rem;

            .transaction-status-indicator {
              margin-left: 2rem;
            }

            &:nth-child(odd) {
              background-color: @program-table-header-bg-color;
            }
          }
        }
      }

      .no-recent-transactions {
        display: block;
        color: @program-empty-color;
        font-size: 3.5rem;
        line-height: 7rem;
        text-align: center;
      }
    }

    .general-form-control-buttons {
      margin-top: 10.5rem;
      margin-left: 18.5rem;
    }
  }
}

.modal-select-contact {

  .modal-form-wrapper {
    width: 119rem;

    .modal-form-body {
      padding: 8rem 7rem;
    }
  }

  .general-form {

    .select-contact-options {
      .flex-container;
      .flex-container-alignment(center, space-between);
      margin-bottom: 3rem;
      width: 100%;

      .select-contact-groups {
        position: relative;

        .groups-btn {
          .flex-container;
          .flex-container-alignment(center, space-between);
          background: fade(white, 40%);
          border: 1px solid @program-button-border-color;
          border-radius: 4rem;
          color: @program-exuding-color;
          font-size: 3.75rem;
          height: 8.25rem;
          padding: 0 4rem;
          width: 50rem;

          .general-select {
            .dropdown-toggle{
              border-bottom: 0;
            }
            .dropdown-menu.open {
              width: 50rem;
              margin-left: -4rem;
              margin-top: 2.5rem;
            }
          }

          .base-icon {
            .icon-sizing(2rem, 2rem, -5rem, -6rem);
          }
        }

        .groups-menu {
          .menu-list(10.5rem, 0, 0, 100%);
        }
      }

      .select-contact-search {
        .flex-container-direction(row);
        .flex-container-alignment(center, center);
        background: fade(white, 40%);
        border: 1px solid @program-button-border-color;
        border-radius: 4rem;
        color: @program-dark-color;
        font-size: 3.5rem;
        height: 8.25rem;
        padding: 0 3rem;
        width: 50rem;

        .search-icon {
          .icon-sizing(6rem, 8rem, -3rem, -4rem);
        }

        .search-input {
          display: block;
          background: transparent;
          border: none;
          padding-left: 2rem;
          width: 100%;
        }
      }
    }

    .select-contact-list {
      max-height: 69rem;
      min-height:25.75rem;
      overflow-y: auto;
      width: 100%;

      .select-contact-item {
        .flex-container-direction(row);
        .flex-container-alignment(center, center);
        border-bottom: 1px solid @program-modal-divider-color;
        min-height: 11.5rem;
        width: 100%;

        .contact-name {
          .flex-container;
          .flex-container-alignment(center, flex-start);
          color: @program-main-color;
          font-size: 3.5rem;
          line-height: 3.5rem;
          width: 72.5%;
          word-break: break-word;

          .base-icon {
            .icon-sizing(3.5rem, 3.5rem, -4.25rem, -5.25rem);
            flex-shrink: 0;
            color: @program-table-icon-color;
            margin: 0 1.5rem;
          }
        }

        .contact-address {
          color: @program-input-icon-color;
          font-size: 3rem;
          font-style: italic;
          line-height: 3rem;
          margin-top: 0.5rem;
          width: 27.5%;
          word-break: break-word;
        }

        &:last-child {
          border-bottom: none;
        }

        &:hover, &.active-contact {
          cursor: pointer;

          .contact-name {
            color: @program-hover-color;

            .base-icon {
              color: @send-money-contacts-icon-hover-color;
            }
          }

          .contact-address {
            color: @send-money-contacts-address-hover-color;
          }
        }

        &.active-contact {
          background: fade(@send-money-contacts-hover-color, 50%);
        }
      }

      .empty-contacts-groups {
        .flex-container-direction(column);
        .flex-container-alignment(center, center);
        color: @program-empty-color;
        margin: 3.5rem 0 1rem;

        .empty-contacts-groups-icon {
          .icon-sizing(14rem, 14rem, 1rem, 0);
        }

        .empty-contacts-groups-text {
          font-size: 3.75rem;
          font-weight: 300;
          margin-top: 2rem;
        }
      }
    }
  }
}

.modal-select-contact-address {

  .modal-form-wrapper {
    width: 119rem;

    .modal-form-body {
      padding: 12rem 7rem 9rem 7rem;
    }
  }

  .general-form {

    .select-contact-options {
      .flex-container;
      .flex-container-alignment(center, space-between);
      margin-bottom: 3rem;
      width: 100%;
    }

    .select-contact-list {
      height: 66rem;
      overflow-y: auto;

      .select-contact-item {
        .flex-container-direction(column);
        border-bottom: 1px solid @program-modal-divider-color;
        height: 16.5rem;
        padding: 2rem;

        .safe-address {

          .safe-address-wrap {
            width: 100rem;
          }
        }

        alias-display {

          .safe-alias {
            margin: 1.5rem 0;
          }
        }

        &:last-child {
          border-bottom: none;
        }

        &:hover, &.active-contact {
          cursor: pointer;

          .safe-address {

            .safe-address-wrap {

              .safe-address-text {
                background: -webkit-linear-gradient(left, @program-hover-color 0, @program-hover-color 75%, transparent 100%);
                -webkit-background-clip: text;
              }
            }
          }

          alias-display {

            .safe-alias {

              .safe-alias-btn {
                border-color: @safes-alias-border-hover-color;
                color: @program-hover-color;
              }
            }
          }
        }

        &.active-contact {
          background: fade(@send-money-contacts-hover-color, 50%);
        }
      }
    }
  }
}

.modal-confirm-transaction {
  background-image: none;

  .modal-form-wrapper {
    background: white;
    width: 136rem;

    .modal-form-body {
      padding: 7rem 8.5rem 8rem;
    }
  }

  .general-form {

    .general-form-field-group.field-group-review {

      .field-group-label {
        min-width: 35%;
        width: 35%;
      }

      .field-group-description {
        min-width: 65%;
        width: 65%;

        .safe-address {

          .safe-address-wrap {
            width: 76rem;
          }
        }
      }
    }

    .general-form-control-buttons {
      margin-top: 6rem;
    }
  }
}

.modal-transaction-details {

  .modal-form-wrapper {
    width: 136rem;

    .modal-form-body {
      padding: 7rem 9.5rem 0;
    }
  }

  .general-form {

    .general-form-field-group {

      .safe-address {

        .safe-address-wrap {
          width: 54rem;
        }
      }

      .field-group-description.transaction-details {
        max-height: 41.75rem;
        overflow: auto;

        .transaction-status-wrapper {
          .flex-container;
          padding: 0.75rem 0;
          margin-bottom: 3rem;

          .transaction-status {
            position: relative;
            height: 6rem;
            width: 6rem;
            margin-right: 2.5rem;

            .status-blank {
              stroke: @program-transaction-status-inner-color;
            }

            .status-graph {

              &.income {
                stroke: @program-payments-income-color;
              }

              &.outgoing {
                stroke: @program-payments-outgoing-color;
              }
            }

            .status-inner {
              .flex-container;
              .flex-container-alignment(center, center);
              position: absolute;
              top: 0;
              left: 0;
              color: @program-transaction-status-inner-color;
              height: 100%;
              width: 100%;

              &.income {
                color: @program-payments-income-color;
              }

              &.outgoing {
                color: @program-payments-outgoing-color;

                .base-icon {
                  transform: rotateX(180deg);
                }
              }

              .base-icon {
                .icon-sizing(4rem, 4rem, -4rem, -5rem);
              }
            }
          }

          &:last-child {
            margin-bottom: 0.75rem;
          }
        }
      }
    }
  }
}




.modal-complete-transaction {

  .modal-form-wrapper {
    width: 116.5rem;

    .modal-form-body {
      padding: 0 9.5rem 6.5rem;
    }
  }
}

.modal-return-pledges {

  .modal-form-wrapper {
    width: 156.5rem;

    .modal-form-body {
      padding: 0 9.5rem 6.5rem;
    }
  }

  .general-form {

    .general-form-header.attention {
      color: @error-color;
    }

    .general-form-field-group {

      .field-group-label.attention {
        color: @error-color;
      }
    }

    .general-form-price-description {
      margin-top: 10rem;
    }

    .general-form-control-buttons {
      margin-top: 10rem;
    }
  }
}

.modal-cancel-transaction {

  .modal-form-wrapper {
    width: 156.5rem;

    .modal-form-body {
      padding: 0 26rem 6.5rem;
    }
  }

  .general-form {

    .general-form-field-group {

      &.special-indent {
        margin-top: 16rem;
      }
    }

    .general-form-price-description {
      margin-top: 14rem;
    }

    .general-form-control-buttons {
      margin-top: 10rem;
    }
  }
}

.modal-new-contact {

  .modal-form-wrapper {
    width: 166.5rem;

    .modal-form-body {
      padding: 3rem 18rem 8rem 0;

      .general-form-control-buttons {
        margin-left: 18rem;
      }
    }
  }

  .general-form {

    .general-form-field-group {

      .field-group-label {
        padding-left: 7rem;
        min-width: 49rem;
        width: 49rem;
      }

      .contact-connection-wrapper {
        .flex-container;
        width: 100%;

        .messenger-type, angucomplete-alt {
          margin-right: 6.5rem;
          min-width: 37%;
          width: 37%;
        }
      }
    }

    .safe-alias-modal {
      align-self: flex-start;
      margin-top: 5rem;
    }

    .add-contact-btn {
      .flex-container-direction(row);
      .flex-container-alignment(center, center);
      background: transparent;
      border: none;
      color: @contacts-accounts-btn-text-color;
      font-size: 3rem;
      line-height: 7rem;
      margin: 0 0 0.25rem;
      padding: 0;

      .base-icon {
        .icon-sizing(6rem, 6rem, -3rem, -4rem);
        margin-right: 1.5rem;
        margin-left: -0.5rem;
      }

      &:hover {
        color: @program-hover-color;
      }
    }

    .contact-account-btn-wrapper {
      .flex-container;
      .flex-container-alignment(flex-start, flex-start);
      margin-top: 6.5rem;
      margin-bottom: 2rem;
      width: 100%;

      .contact-account-btn {
        .flex-container-direction(row);
        .flex-container-alignment(center, center);
        background: transparent;
        border: none;
        color: @contacts-accounts-btn-text-color;
        font-size: 3rem;
        margin: 0 13rem 0 0;
        padding: 0;

        .base-icon {
          .icon-sizing(6rem, 6rem, -3rem, -4rem);
          margin-right: 1.5rem;
          margin-left: -0.5rem;
          min-width: 6rem;
        }

        &:hover {
          color: @program-hover-color;
        }
      }
    }

    .edit-groups-field {
      .flex-container;
      .flex-container-alignment(center, flex-start);

      .edit-groups-icon {
        .icon-sizing(5rem, 5rem, -3.5rem, -4.55rem);
        margin-right: 1.5rem;
        flex-shrink: 0;

        &:before {
          content: '#';
        }
      }
    }
  }
}

.modal-contacts-groups {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 4.5rem 6.5rem 9rem;
    }
  }

  .general-form {

    .empty-contacts-groups {
      .flex-container-direction(column);
      .flex-container-alignment(center, center);
      color: @program-empty-color;
      margin: 3.5rem 0 1rem;

      .empty-contacts-groups-icon {
        .icon-sizing(14rem, 14rem, 1rem, 0);
      }

      .empty-contacts-groups-text {
        font-size: 3.75rem;
        font-weight: 300;
        margin-top: 2rem;
      }
    }

    .contacts-groups-list {
      color: @program-dark-color;
      font-size: 3.75rem;
      margin-top: 0.25rem;
      width: 100%;

      #groups-list-items {
        max-height: 92rem;
        overflow-x: auto;
        padding-right: 3rem;
        margin-right: -3rem;
      }

      .contacts-groups-list-item {
        .flex-container-direction(row);
        .flex-container-alignment(center, space-between);
        border-bottom: 1px solid @program-modal-divider-color;
        height: 11.5rem;
        width: 100%;

        .group-icons {
          visibility: hidden;

          .base-icon {
            .icon-sizing(4rem, 4rem, -4rem, -5rem);
            margin-left: 3rem;
          }
        }

        &:hover {
          color: @program-hover-color;
          cursor: pointer;

          .group-icons {
            visibility: visible;
          }
        }
      }

      .create-new-group-btn {
        .flex-container-direction(row);
        .flex-container-alignment(center, center);
        background: transparent;
        border: none;
        color: @program-light-color;
        font-size: 3.75rem;
        font-weight: 300;
        height: 11.5rem;
        margin: 0 0 2.5rem;
        padding: 0;

        .base-icon {
          .icon-sizing(4rem, 4rem, -2.25rem, -3rem);
          font-size: 10rem;
          margin-right: 2rem;
          margin-top: 1rem;
        }

        &:hover {
          color: @program-hover-color;
          cursor: pointer;
        }
      }
    }
  }
}

.modal-add-group {
  background-image: none;

  .modal-form-wrapper {
    background: white;
    width: 101rem;

    .modal-form-body {
      padding: 7.5rem 9rem 3rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .add-group-wrapper {
        .flex-container;
        .flex-container-alignment(center, space-between);
        width: 100%;

        .general-input {
          border: none;
          font-size: 4rem;
          margin-top: 0;
        }

        .add-group-btn {
          border-radius: 5rem;
          color: @program-dark-color;
          height: 5.5rem;
          line-height: 5rem;
          min-width: 21rem;
          width: 21rem;
        }
      }

      .field-group-error {
        margin-top: 0;
      }
    }
  }
}

.modal-delete-group {
  background-image: none;

  .modal-form-wrapper {
    background: white;
    min-width: 101rem;

    .modal-form-body {
      padding: 0 9rem 5rem;
    }
  }

  .general-form {

    .general-form-field-group {

      .field-group-label {
        font-size: 4.75rem;
        font-weight: 300;
      }
    }
  }
}

.modal-edit-group {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-body {
      padding: 4.5rem 6.5rem 9rem;
    }

    .general-form {

      .general-form-field-group {
        margin: 2.5rem 0 4.5rem;

        .field-group-label {
          white-space: nowrap;
          min-width: initial;
          width: auto;
        }
      }

      .editing-group-search {
        .flex-container-direction(row);
        .flex-container-alignment(center, center);
        background: fade(white, 40%);
        border: 1px solid @program-tab-border-color;
        border-radius: 4rem;
        color: @program-dark-color;
        font-size: 3.5rem;
        font-weight: 300;
        height: 8.25rem;
        margin-top: 2.5rem;
        padding: 0 3rem;
        width: 100%;

        .base-icon {
          .icon-sizing(6rem, 6rem, -3rem, -4rem);
        }

        .search-input {
          display: block;
          background: transparent;
          border: none;
          padding-left: 2rem;
          width: 100%;
        }
      }

      .editing-group-empty-contacts {
        .flex-container-direction(column);
        .flex-container-alignment(center, center);
        color: @program-empty-color;
        height: 28rem;
        padding: 5rem 0 1rem;

        .editing-group-empty-contacts-icon {
          .icon-sizing(14rem, 14rem, 1rem, 0);
        }

        .editing-group-empty-contacts-text {
          font-size: 3.75rem;
          font-weight: 300;
        }
      }

      .editing-group-contacts-list {
        color: @program-main-color;
        font-size: 3.5rem;
        margin: 2.5rem 0;
        min-height: 23rem;
        width: 100%;
        max-height: 92rem;
        overflow-x: auto;

        .editing-group-contact-item {
          .flex-container-direction(row);
          .flex-container-alignment(center, space-between);
          border-bottom: 1px solid @program-modal-divider-color;
          height: 11.5rem;
          width: 100%;

          .editing-group-contact-name {
            .flex-container-direction(row);
            .flex-container-alignment(center, center);

            .editing-group-contact-icon {
              .icon-sizing(4rem, 4rem, -4rem, -5rem);
              color: @program-table-icon-color;
              margin-right: 2rem;
            }
          }

          .delete-group-contact-icon {
            .icon-sizing(4rem, 4rem, -4rem, -5rem);
            margin-left: 3rem;
            visibility: hidden;
          }

          &:last-child {
            border: none;
          }

          &:hover {
            color: @program-hover-color;
            cursor: pointer;

            .editing-group-contact-icon {
              color: @program-hover-color;
            }

            .delete-group-contact-icon {
              visibility: visible;
            }
          }
        }
      }
    }
  }
}

.modal-update {

  .modal-form-wrapper {
    width: 106.5rem;

    .modal-form-header {

      .modal-form-header-title {
        color: @modal-update-text-color;
      }

      .modal-form-header-icon {

        .base-icon {
          color: @modal-update-text-color;
        }
      }

      .modal-form-header-close {

        button {
          color: @modal-update-text-color;
        }
      }
    }

    .modal-form-body {
      height: 45rem;
      padding: 7rem 9.5rem 5rem;
    }

    &.update-green {

      .modal-form-header {
        background: @modal-update-green-color;

        .modal-form-header-icon {
          background: @modal-update-green-color;
        }
      }
    }

    &.update-yellow {

      .modal-form-header {
        background: @modal-update-yellow-color;

        .modal-form-header-icon {
          background: @modal-update-yellow-color;
        }
      }
    }

    &.update-red {

      .modal-form-header {
        background: @modal-update-red-color;

        .modal-form-header-icon {
          background: @modal-update-red-color;
        }
      }
    }
  }

  .general-form {

    .general-form-field-group {

      .field-group-label {
        font-size: 3.75rem;
      }

      &:first-child {
        margin-top: 2.5rem;
        line-height: 6rem;
      }
    }

    .general-form-control-buttons {
      margin-top: 7.75rem;

      .control-button {
        min-width: 40rem;
      }
    }
  }
}