encrypt-password {
  action-sheet {
    .action-sheet-bottom {
      border-radius: 0px;
      display: grid;
      padding-top: 3rem; // Fix iOS 10.3
      padding-top: calc(4px + env(safe-area-inset-top));
      .encrypt-password {
        height: 100%;
        display: grid;
        grid-template-rows: 70% 30%;
        .encrypt-password-info {
          height: max-content;
          display: grid;
          grid-template-rows: 50% 50%;
          justify-content: center;
          align-self: center;
          .img-container {
            align-self: end;
            justify-self: center;
            img {
              margin: auto;
              max-height: 23rem;
              @media (max-width: 350px) {
                max-height: 10rem;
              }
            }
          }
          .info {
            align-self: start;
            display: grid;
            grid-template-rows: max-content max-content;
            height: 100%;
            padding: 4rem;
            .title {
              color: #060606;
              font-weight: 600;
              align-items: center;
              text-align: center;
              line-height: 34px;
              @media (max-width: 350px) {
                font-size: 17px;
                line-height: 20px;
              }
            }
            .text {
              font-size: 16px;
              text-align: center;
              color: rgb(46, 46, 46);
              font-weight: 300;
              padding-top: 15px;
              line-height: 25px;
              @media (max-width: 350px) {
                font-size: 12px;
                line-height: 15px;
              }
            }
          }
        }
        .encrypt-password-form {
          display: grid;
          grid-template-rows: 20% max-content max-content;
          .slide-title {
            padding-top: 3rem; // Fix iOS 10.3
            padding-top: env(safe-area-inset-top);
            color: black;
            font-size: 25px;
            font-weight: 600;
            align-self: center;
            justify-self: left;
            padding-left: 7.5%;
            padding-right: 7.5%;
            .description {
              margin-top: 20px;
              color: color($colors, light-grey);
              font-weight: normal;
              font-size: 16px;
            }
          }
          form {
            align-self: end;
            width: 85%;
            justify-self: center;
            ion-item {
              padding: 0px !important;
              ion-label {
                &.label-ios,
                &.label-md {
                  color: color($colors, light-grey);
                }
              }
              ion-input {
                input[type='password'],
                input[type='text'] {
                  color: #434d5a;
                  font-size: 18px;
                  margin: 0px;
                  line-height: 37px;
                }
              }
            }
            .item-inner {
              border-bottom: 0.75px solid;
              border-bottom-color: #e1e4e7 !important;
              padding-right: 0px;
            }
            ion-item.no-lines {
              .item-inner {
                border-bottom: 0px;
              }
            }
            button {
              align-self: flex-end;
              margin-bottom: 12px;
              ion-icon {
                font-size: 18px;
                align-self: flex-end;
              }
              .ion-md-alert:before {
                padding-right: 5px;
                color: color($colors, danger);
              }
              .ion-md-eye:before,
              .ion-md-eye-off:before {
                color: color($colors, light-grey);
              }
            }
          }
          label-tip {
            align-self: center;
            width: 85%;
          }
        }
      }
      .footer {
        align-self: end;
      }
    }
  }
}
