{"__symbolic":"module","version":3,"metadata":{"TNKLoanSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"providers":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵi"}],"declarations":[{"__symbolic":"reference","name":"TNKLoanSliderComponent"}],"exports":[{"__symbolic":"reference","name":"TNKLoanSliderComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TNKLoanSliderModule"},"providers":[]}}}},"TNKLoanSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-loan-slider","template":"\n    <!-- If element state == 1 -->\n    <ng-container *ngIf=\"elementState == 1\">\n      <div class=\"loan__slider__widget\" [class.widget--embed]=\"sliderOnly\">\n        <div class=\"card card--loan-slider card--bg-blue card--no-padding\">\n          <div class=\"col-sm-3 col-xs-4\">\n            <p class=\"loan__description text--left text--clr-white text--big\">\n              Cicilan\n            </p>\n          </div>\n\n          <div class=\"col-sm-9 col-xs-8\">\n            <p class=\"align--right text--padding-top\">\n              <span class=\"loan__amount\">\n                {{ sliderData.loanMonthly | tnkCurrency: 'rupiah' }},-\n              </span>\n              <br />\n              <span>per bulan</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider\">\n          <div class=\"row\">\n            <div class=\"col-sm-6 col-xs-6\">\n              <p class=\"help-block\">Jumlah Pinjaman</p>\n            </div>\n\n            <div class=\"col-sm-6 col-xs-6 align--right\">\n              <p class=\"slider-title\">\n                {{ 'Rp ' + sliderData.loanAmount / 1000000 + ' juta' }}\n              </p>\n            </div>\n          </div>\n\n          <div class=\"row row--slider\">\n            <div class=\"col-sm-12\">\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">2</p>\n              </div>\n\n              <div\n                class=\"col-sm-10 col-xs-10\"\n                style=\"padding: 0\"\n                id=\"slider_jumlahPinjaman\"\n              >\n                <mat-slider\n                  [min]=\"2000000\"\n                  [max]=\"20000000\"\n                  [(ngModel)]=\"sliderData.loanAmount\"\n                  [step]=\"1000000\"\n                  (input)=\"calcMonthly($event, 'amount')\"\n                ></mat-slider>\n                <!-- <input type=\"range\" min=\"2000000\" max=\"20000000\" step=\"1000000\" id=\"slider_loanAmount\" value=\"10000000\" [(ngModel)]=\"sliderData.loanAmount\" name=\"loan_amount\" (input)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod, 'amount')\"> -->\n              </div>\n\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">20</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider\">\n          <div class=\"row\">\n            <div class=\"col-sm-6 col-xs-6\">\n              <p class=\"help-block\">Periode Pinjaman</p>\n            </div>\n\n            <div class=\"col-sm-6 col-xs-6 align--right\">\n              <p class=\"slider-title\">{{ sliderData.loanPeriod + ' bulan' }}</p>\n            </div>\n          </div>\n\n          <div class=\"row row--slider\">\n            <div class=\"col-sm-12\">\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">6</p>\n              </div>\n\n              <div\n                class=\"col-sm-10 col-xs-10\"\n                style=\"padding: 0\"\n                id=\"slider_periodePinjaman\"\n              >\n                <mat-slider\n                  [min]=\"6\"\n                  [max]=\"20\"\n                  [(ngModel)]=\"sliderData.loanPeriod\"\n                  [step]=\"1\"\n                  (input)=\"calcMonthly($event, 'period')\"\n                ></mat-slider>\n                <!-- <nouislider [connect]=\"[true, false]\" [min]=\"6\" [max]=\"20\" [(ngModel)]=\"sliderData.loanPeriod\" [step]=\"1\" (ngModelChange)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod)\"></nouislider> -->\n\n                <!-- <input type=\"range\" min=\"6\" max=\"20\" value=\"12\" step=\"1\" id=\"slider_loanPeriod\" [(ngModel)]=\"sliderData.loanPeriod\" name=\"loan_period\" (input)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod, 'period')\" /> -->\n              </div>\n\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">20</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider\">\n          <div class=\"row\" *ngIf=\"!sliderOnly || referralForm\">\n            <button\n              id=\"homeBtn_ajukanPinjaman\"\n              class=\"tnk__button button--green button--block\"\n              (click)=\"stateHandler(1)\"\n            >\n              Ajukan Pinjaman\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <!-- End if element state == 1 -->\n\n    <!-- If element state == 2 -->\n    <ng-container *ngIf=\"elementState == 2\">\n      <div class=\"loan__slider__widget\">\n        <div class=\"card card--loan-content card--bg-grey\">\n          <div class=\"col-sm-6 col-xs-6\">\n            <p>\n              Pinjaman\n              <b>Rp {{ this.sliderData.loanAmount / 1000000 }} Juta</b>\n            </p>\n          </div>\n\n          <div class=\"col-sm-6 col-xs-6\">\n            <p>\n              Lama cicilan\n              <b>{{ this.sliderData.loanPeriod }} Bulan</b>\n            </p>\n          </div>\n\n          <div class=\"col-sm-12\">\n            <p>\n              Cicilan per bulan\n              <strong>\n                {{ this.sliderData.loanMonthly | tnkCurrency: 'rupiah' }},-\n              </strong>\n            </p>\n\n            <a\n              id=\"homeBtn_kembali_Info_Pinjaman\"\n              class=\"link link--clr-blue\"\n              [routerLink]=\"routes[0]\"\n              *ngIf=\"stateURI\"\n            >\n              <span class=\"back__circle\">\n                <\n              </span>\n              Kembali ke info pinjaman\n            </a>\n\n            <a\n              id=\"inp_backToInfo\"\n              class=\"link link--clr-blue\"\n              href=\"javascript:void(0)\"\n              *ngIf=\"!stateURI\"\n              (click)=\"elementState = 1\"\n            >\n              <span class=\"back__circle\">\n                <\n              </span>\n              Kembali ke info pinjaman\n            </a>\n          </div>\n        </div>\n\n        <div class=\"card card--confirm-action row\">\n          <div class=\"col-sm-12\">\n            <p>Apakah Anda pernah mengajukan pinjaman di Tunaiku?</p>\n          </div>\n\n          <div class=\"col-sm-12 align--right\">\n            <button\n              id=\"inp_Ya_PinjamanPertama\"\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"handleFirstApplicant(true)\"\n              [ngClass]=\"{ 'button--active': activeForm && !notFirstApplicant }\"\n            >\n              BELUM PERNAH\n            </button>\n            <button\n              id=\"inp_Tidak_PinjamanPertama\"\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"handleFirstApplicant(false)\"\n              [ngClass]=\"{ 'button--active': notFirstApplicant && !activeForm }\"\n            >\n              SUDAH PERNAH\n            </button>\n          </div>\n        </div>\n\n        <ng-container *ngIf=\"notFirstApplicant\">\n          <div class=\"separator\">&nbsp;</div>\n\n          <div class=\"card card--loan-content\">\n            <div class=\"col-sm-12\">\n              <p class=\"help-block\">Masuk ke akun anda untuk:</p>\n              <ul class=\"tnk-list tnk-list--check\">\n                <li class=\"tnk-list__item\">Cek status pengajuan Anda</li>\n                <li class=\"tnk-list__item\">Pantau dan cek info cicilan pinjaman</li>\n                <li class=\"tnk-list__item\">\n                  Ajukan pinjaman berikutnya tanpa isi formulir\n                </li>\n              </ul>\n\n              <button\n                class=\"tnk__button button--green button--block\"\n                onclick=\"javascript:window.open('/customer/login', '_self')\"\n                id=\"inp_formMasukAkun\"\n              >\n                Masuk ke Akun Anda\n              </button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"activeForm\">\n          <div class=\"separator\">&nbsp;</div>\n\n          <div class=\"card card--loan-content\">\n            <div class=\"col-sm-12\">\n              <p>\n                <b>Isi Formulir Pengajuan</b>\n              </p>\n\n              <form\n                class=\"form-wrapper\"\n                [formGroup]=\"state2Form\"\n                (ngSubmit)=\"stateHandler(2)\"\n                autocomplete=\"off\"\n              >\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.name }\"\n                >\n                  <label class=\"help-block\">Nama Lengkap</label>\n\n                  <input\n                    id=\"field_namalengkap\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    formControlName=\"name\"\n                  />\n\n                  <span class=\"help-block\">{{ formErrors.name }}</span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.mobilePhoneNumber }\"\n                >\n                  <label class=\"help-block\">Nomor Handphone</label>\n\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon\">+62</span>\n                    <input\n                      id=\"field_nomorhandphone\"\n                      type=\"tel\"\n                      class=\"form-control\"\n                      name=\"mobilePhoneNumber\"\n                      formControlName=\"mobilePhoneNumber\"\n                      (keypress)=\"numericalInputOnly($event)\"\n                    />\n                  </div>\n\n                  <span class=\"help-block\" *ngIf=\"formErrors.mobilePhoneNumber\">\n                    {{ formErrors.mobilePhoneNumber }}\n                  </span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.emailAddress }\"\n                >\n                  <label class=\"help-block\">Alamat Email</label>\n                  <input\n                    id=\"field_email\"\n                    type=\"email\"\n                    class=\"form-control\"\n                    formControlName=\"emailAddress\"\n                    name=\"emailAddress\"\n                  />\n\n                  <span class=\"help-block\">{{ formErrors.emailAddress }}</span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.emailIsOwn }\"\n                >\n                  <label class=\"help-block\">Kepemilikan Email</label>\n                  <select\n                    class=\"form-control\"\n                    name=\"emailIsOwn\"\n                    formControlName=\"emailIsOwn\"\n                  >\n                    <option value=\"0\">Pilih salah satu</option>\n                    <option value=\"Personal\">Email Pribadi</option>\n                    <option value=\"Corporate\">Email Kantor</option>\n                    <option value=\"Other\">Lainnya</option>\n                  </select>\n\n                  <span class=\"help-block\">{{ formErrors.emailIsOwn }}</span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.loanPurpose }\"\n                >\n                  <label class=\"help-block\" style=\"margin-top: 10px\">\n                    Tujuan Pinjaman\n                  </label>\n\n                  <select\n                    class=\"form-control\"\n                    id=\"reviewField_tujuan_meminjam\"\n                    name=\"loanPurpose\"\n                    formControlName=\"loanPurpose\"\n                  >\n                    <option value=\"0\">Pilih salah satu</option>\n                    <option value=\"Holiday\">Liburan</option>\n                    <option value=\"HousingLoan\">KPR</option>\n                    <option value=\"CarOrMotorcycle\">Mobil/Motor</option>\n                    <option value=\"CreditCard\">Kartu Kredit</option>\n                    <option value=\"Renovation\">Renovasi</option>\n                    <option value=\"ElectronicUnsecuredLoan\">KTA Elektronik</option>\n                    <option value=\"Education\">Sekolah</option>\n                    <option value=\"VentureCapital\">Modal Usaha</option>\n                    <option value=\"Investment\">Investasi</option>\n                    <option value=\"Other\">Lainnya</option>\n                  </select>\n\n                  <span class=\"help-block\" *ngIf=\"formErrors.loanPurpose\">\n                    {{ formErrors.loanPurpose }}\n                  </span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.mediasource }\"\n                >\n                  <label class=\"help-block\">Darimana Anda mengetahui Tunaiku</label>\n                  <select\n                    class=\"form-control\"\n                    name=\"mediasource\"\n                    formControlName=\"mediasource\"\n                  >\n                    <option value=\"0\">Pilih salah satu</option>\n                    <option value=\"Internet\">Internet</option>\n                    <option value=\"Friend\">Teman</option>\n                    <option value=\"Radio\">Radio</option>\n                    <option value=\"Brochure\">Selebaran/Brosur</option>\n                    <option value=\"Television\">Televisi</option>\n                    <option value=\"Other\">Lainnya</option>\n                  </select>\n\n                  <span class=\"help-block\" *ngIf=\"formErrors.mediasource\">\n                    {{ formErrors.mediasource }}\n                  </span>\n                </div>\n\n                <div class=\"form-group\">\n                  <button\n                    id=\"inp_lanjutFormulir\"\n                    class=\"tnk__button button--green button--block\"\n                    type=\"submit\"\n                    [disabled]=\"state2Form.invalid\"\n                  >\n                    Lanjut Isi Formulir Pengajuan\n                  </button>\n                </div>\n              </form>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <!-- End if element state == 2 -->\n\n    <!-- If element state == 3 -->\n    <ng-container *ngIf=\"elementState == 3\">\n      <div class=\"loan__slider__widget\">\n        <div class=\"card card--loan-content no--pd-bot\">\n          <div class=\"col-sm-12\">\n            <h2>Ingin melanjutkan formulir yang telah Anda isi?</h2>\n\n            <table class=\"table table--borderless\">\n              <tr>\n                <td>\n                  <b>Atas Nama</b>\n                </td>\n                <td>\n                  {{\n                    sliderData.ktpName\n                      ? sliderData.ktpName\n                      : sliderData.firstName + ' ' + sliderData.lastName\n                  }}\n                </td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Nomor Handphone</b>\n                </td>\n                <td>{{ sliderData.mobilePhoneNumber }}</td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Jumlah Pinjaman</b>\n                </td>\n                <td>Rp {{ sliderData.loanAmount / 1000000 }} Juta</td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Lama Cicilan</b>\n                </td>\n                <td>{{ sliderData.loanPeriod }} Bulan</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-content no--pd-top\">\n          <div class=\"col-sm-12 align--right\">\n            <button\n              class=\"tnk__button button--green button--float-right button--sm\"\n              (click)=\"sessionHandler(true)\"\n            >\n              Lanjutkan\n            </button>\n\n            <button\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"sessionHandler(false)\"\n            >\n              Batalkan\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <!-- End if element state == 3 -->\n  ","styles":["\n    html {\n      font-size: 14px;\n    }\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\n    }\n    #loan-slider .card__header {\n      background-color: #004c7b;\n      color: #fff;\n    }\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    mat-slider {\n      width: 100%;\n    }\n    .mat-accent .mat-slider-thumb,\n    .mat-accent .mat-slider-thumb-label,\n    .mat-accent .mat-slider-track-fill {\n      background-color: #81be41;\n    }\n    .noUi-connect {\n      background: #81be41;\n    }\n    .loan__slider__widget {\n      position: relative;\n      margin: 5px;\n      border-radius: 5px;\n      background-color: #fff;\n      -webkit-box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n              box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n      overflow: hidden;\n      display: block;\n    }\n    .loan__slider__widget.widget--embed {\n      -webkit-box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n              box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n      border-radius: 5px 5px 0 0;\n      margin: 5px 2.9px 0 2.9px;\n    }\n    .loan__slider__widget .align--right {\n      text-align: right;\n    }\n    .loan__slider__widget .align--center {\n      text-align: center;\n    }\n    .loan__slider__widget .text--padding-top {\n      padding-top: 10px;\n    }\n    .loan__slider__widget .row {\n      position: relative;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      margin: 0 auto;\n    }\n    .loan__slider__widget .row.row--slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 0;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .row.row--slider input {\n      outline: none;\n    }\n    .loan__slider__widget .card.card--loan-slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      border-bottom: solid 1px #ccc;\n      margin: 0 5px;\n      padding: 15px 0 5px;\n      font-size: 20px;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card.card--loan-slider:last-child {\n      border-bottom: 0;\n    }\n    .loan__slider__widget .card.card--loan-slider button {\n      margin-bottom: 15px;\n    }\n    .loan__slider__widget .card.card--loan-content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 17px 0 15px;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--loan-content p,\n    .loan__slider__widget .card.card--loan-content a.link:link {\n      font-size: 13px;\n      margin-bottom: 13px;\n    }\n    .loan__slider__widget .card.card--loan-content h2 {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin-bottom: 30px;\n      line-height: 1.5em;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-top {\n      padding-top: 0;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-bot {\n      padding-bottom: 0;\n    }\n    .loan__slider__widget .card.card--loan-content .tnk-list {\n      color: #444;\n    }\n    .loan__slider__widget .card.card--bg-grey {\n      background-color: #ececec;\n    }\n    .loan__slider__widget .card.card--bg-blue {\n      background-color: #004c7b;\n      color: #fff;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--no-padding {\n      padding-top: 10px;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .card.card--confirm-action {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 18px;\n      text-align: left;\n    }\n    .loan__slider__widget .card span,\n    .loan__slider__widget .card p {\n      font-family: 'HelveticaLight', sans-serif;\n      font-size: 13px;\n    }\n    .loan__slider__widget .card p {\n      color: #555;\n    }\n    .loan__slider__widget .card p span {\n      color: #fff;\n    }\n    .loan__slider__widget .card span.loan__amount {\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      font-size: 21px;\n      color: #fff;\n    }\n    .loan__slider__widget .card h2 {\n      color: #535353;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal {\n      height: 40px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-background {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-fill {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card p.help-block {\n      font-weight: bold;\n      font-size: 14px;\n    }\n    .loan__slider__widget .card p.help-block span {\n      color: #fff;\n    }\n    .loan__slider__widget .card p.help-block-error {\n      color: #a94442;\n    }\n    .loan__slider__widget .card span.back__circle {\n      border-radius: 100%;\n      background-color: #004c7b;\n      color: #fff;\n      padding: 3px 5px;\n      font-weight: bold;\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .table td {\n      color: #535353;\n    }\n    .loan__slider__widget .card .loan__description {\n      text-align: center;\n      position: relative;\n      margin-top: 15px;\n    font-size\n      color: #8a8989;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card .loan__description.text--big {\n      font-size: 16px;\n    }\n    .loan__slider__widget .card .loan__description.text--sm {\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .loan__description.text--left {\n      text-align: left;\n    }\n    .loan__slider__widget .card .loan__description.text--clr-white {\n      color: #fff;\n    }\n    .loan__slider__widget .card .slider-title {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      padding-bottom: 0;\n      margin-top: 0;\n      margin-bottom: 0;\n      color: #7f7f7f;\n    }\n    .loan__slider__widget input[type=range] {\n      height: auto;\n      -webkit-appearance: none;\n      margin: 14px 0 0 0;\n      width: 100%;\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]:focus {\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      border: none;\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-thumb {\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      height: 24px;\n      width: 24px;\n      border: none;\n      border-radius: 100%;\n      background-color: #81be41;\n      cursor: pointer;\n      -webkit-appearance: none;\n      margin-top: -10px;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      animate: 0.2s;\n      box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n      border: 0px solid #000101;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-thumb {\n      box-shadow: 0px 0px 0px #000;\n      border: 0px solid #000;\n      height: 24px;\n      width: 24px;\n      outline: none;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n      margin-top: -14px;\n    }\n    .loan__slider__widget input[type=range]::-ms-track {\n      width: 100%;\n      height: 13px;\n      cursor: pointer;\n      animate: 0.2s;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-lower {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-upper {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-thumb {\n      margin-top: 1px;\n      box-shadow: 0px 0px 0px #000;\n      border: none;\n      height: 24px;\n      width: 24px;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n    }\n    .loan__slider__widget .col-sm-* {\n      position: relative;\n    }\n    @media screen and (min-width: 320px) and (max-width: 400px) {\n      .loan__slider__widget .card p.help-block {\n        margin-top: 5px;\n        font-size: 12px;\n      }\n    }\n    @media screen and (max-width: 320px) {\n      .tnk__button {\n        width: 100%;\n      }\n      .tnk__button.button--float-right {\n        margin: 10px 0 0;\n      }\n    }\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"referralForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["referralForm"]}]}],"elementState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderState"]}]}],"stateURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["stateURI"]}]}],"cookieService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["cookieService"]}]}],"createAccountURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["createAccountURI"]}]}],"formURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formURI"]}]}],"sliderOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderOnly"]}]}],"referralFormURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["referralFormURI"]}]}],"sliderEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["sliderOnChange"]}]}],"purposeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["purposeOnChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"calcInitMonthly":[{"__symbolic":"method"}],"calcMonthly":[{"__symbolic":"method"}],"handleFirstApplicant":[{"__symbolic":"method"}],"handleLoanPurpose":[{"__symbolic":"method"}],"stateHandler":[{"__symbolic":"method"}],"buildState2Form":[{"__symbolic":"method"}],"sessionHandler":[{"__symbolic":"method"}],"mixpanelIdentify":[{"__symbolic":"method"}]}},"TNKAuthCustomerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"declarations":[{"__symbolic":"reference","name":"TNKAuthCustomerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵg"}],"exports":[{"__symbolic":"reference","name":"TNKAuthCustomerComponent"}]}]}],"members":{}},"TNKAuthCustomerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-auth-customer","template":"\n    <div class=\"wrapper__login\">\n      <div class=\"container__login\">\n        <ng-container *ngIf=\"type === 'login'\">\n          <h2 class=\"title\">Masuk ke Akun Anda</h2>\n\n          <ng-container *ngIf=\"step == 1\">\n            <div class=\"login__block\">\n              <label>Nomor Handphone</label>\n              <div class=\"from-group\" [class.has-error]=\"inputError.phone\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon\">+62</span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    id=\"login_phone\"\n                    [(ngModel)]=\"loginData.phone\"\n                    (input)=\"handleInput(INPUT_TYPE.phone, $event)\"\n                  />\n                </div>\n\n                <p class=\"help-block\">{{ inputError.phone }}</p>\n              </div>\n            </div>\n\n            <div class=\"login__block\">\n              <button\n                class=\"tnk__button button--lg button--green button--block\"\n                [disabled]=\"isBusy\"\n                id=\"login_btn_step1\"\n                (click)=\"submitPhoneNumber()\"\n              >\n                {{ isBusy ? 'Mohon menunggu...' : 'Masuk' }}\n              </button>\n              <div class=\"changephonenumber-block\">\n                <p\n                  class=\"text-primary\"\n                  style=\"text-decoration: underline; cursor: pointer\"\n                  (click)=\"changePhoneNumber()\"\n                >\n                  Lupa atau ubah nomor handphone?\n                  <i\n                    class=\"fa\"\n                    [class.fa-chevron-circle-down]=\"!isChangePhoneNumber\"\n                    [class.fa-chevron-circle-up]=\"isChangePhoneNumber\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </p>\n                <p *ngIf=\"isChangePhoneNumber\">\n                  Hubungi\n                  <span class=\"text-primary\">02140005859</span>\n                  atau\n                  <span class=\"text-primary\">02130005859</span>\n                  untuk mengganti nomor handphone Anda.\n                </p>\n              </div>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"step == 2\">\n            <div class=\"login__block\">\n              <label>Nomor KTP</label>\n\n              <div class=\"form-group\" [class.has-error]=\"inputError.pin\">\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"login_pin\"\n                  [(ngModel)]=\"loginData.pin\"\n                  (input)=\"handleInput(INPUT_TYPE.pin, $event)\"\n                />\n\n                <p class=\"help-block\">{{ inputError.pin }}</p>\n              </div>\n            </div>\n\n            <div class=\"login__block\">\n              <button\n                class=\"tnk__button button--lg button--green button--block\"\n                [disabled]=\"isBusy\"\n                (click)=\"submitKTP()\"\n                id=\"login_btn_step2\"\n              >\n                {{ isBusy ? 'Mohon menunggu...' : 'Masuk' }}\n              </button>\n            </div>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"step == 3\">\n          <label class=\"tnk-margin-bottom--large label__title\">\n            Kode Verifikasi\n          </label>\n          <p *ngIf=\"type === 'login'\" class=\"description\">\n            Kode akses telah terkirim via SMS ke nomor handphone Anda, silakan\n            masukkan kode ke kolom di bawah ini\n          </p>\n\n          <div class=\"login__block\">\n            <div class=\"row\">\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  maxlength=\"1\"\n                  #otp_1\n                  id=\"login_otp1\"\n                  [(ngModel)]=\"loginData.otp_1\"\n                  (input)=\"OTPInputTab('otp_2', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_2\n                  maxlength=\"1\"\n                  id=\"login_otp2\"\n                  [(ngModel)]=\"loginData.otp_2\"\n                  (input)=\"OTPInputTab('otp_3', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_1', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_3\n                  maxlength=\"1\"\n                  id=\"login_otp3\"\n                  [(ngModel)]=\"loginData.otp_3\"\n                  (input)=\"OTPInputTab('otp_4', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_2', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_4\n                  maxlength=\"1\"\n                  id=\"login_otp4\"\n                  [(ngModel)]=\"loginData.otp_4\"\n                  (input)=\"OTPInputTab(null, $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_3', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"login__block\">\n            <button\n              class=\"tnk__button button--lg button--green button--block\"\n              (click)=\"submitOTP()\"\n              id=\"login_btn_step3\"\n            >\n              {{ isBusy ? 'Mohon menunggu...' : 'Masuk ke Akun' }}\n            </button>\n            <ng-container *ngIf=\"!isLoginLimitExceeded\">\n              <p\n                id=\"pinjamlagi_KirimUlangKode\"\n                class=\"description description--center\"\n                *ngIf=\"!isVerificationSent\"\n              >\n                Belum menerima kode?\n                <a\n                  href=\"javascript:void(0)\"\n                  (click)=\"resendVerificationCode()\"\n                  id=\"login_link_resendverification\"\n                >\n                  Kirim ulang kode\n                </a>\n              </p>\n\n              <p class=\"description description--center\" *ngIf=\"isBusy\">\n                Kode akses sedang dikirim, mohon menunggu\n              </p>\n\n              <p\n                class=\"description description--center\"\n                *ngIf=\"!isBusy && isVerificationSent\"\n              >\n                Masa Aktif OTP {{ displayCountDown }}\n              </p>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div class=\"login__block\" *ngIf=\"step != 3 && !submitValidation.display\">\n          <div class=\"block__info\">\n            <p>\n              Untuk keamanan data Anda, pastikan ikon\n              <span class=\"icon fa fa-lock\"></span>\n              tampil di halaman URL Tunaiku\n            </p>\n          </div>\n        </div>\n\n        <div class=\"login__block\" *ngIf=\"submitValidation.display\">\n          <div class=\"block__info error--block\">\n            <p>{{ submitValidation.msg }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    .wrapper__login {\n      position: relative;\n      background-color: #f8f8f8;\n      -webkit-box-shadow: 0px 2px 4.8px 0.3px rgba(65,65,65,0.15);\n              box-shadow: 0px 2px 4.8px 0.3px rgba(65,65,65,0.15);\n      border: solid 1px #e1e1e1;\n      margin: 10px;\n      display: block;\n    }\n    .wrapper__login .container__login {\n      position: relative;\n      display: block;\n      padding: 36px;\n      overflow: hidden;\n    }\n    .wrapper__login .title {\n      font-size: 21px;\n      font-weight: bold;\n      margin-bottom: 35px;\n    }\n    .wrapper__login .description {\n      font-size: 12.6px;\n      line-height: 1.5em;\n    }\n    .wrapper__login .description--center {\n      text-align: center;\n    }\n    .wrapper__login .label__title {\n      text-align: center;\n      font-size: 1.4em;\n    }\n    .wrapper__login .login__block {\n      position: relative;\n      width: 100%;\n      display: block;\n      margin-bottom: 15px;\n    }\n    .wrapper__login .login__block .input-group {\n      width: 100%;\n      margin-top: 18px;\n    }\n    .wrapper__login .login__block .tnk__button {\n      margin-top: 30px;\n      margin-bottom: 26px;\n    }\n    @media screen and (max-width: 480px) {\n      .wrapper__login .login__block .tnk__button {\n        margin-top: 20px;\n      }\n    }\n    .wrapper__login .login__block .otp--input {\n      height: 83px;\n      font-size: 24px;\n      font-weight: bold;\n      text-align: center;\n      -moz-appearance: textfield;\n    }\n    .wrapper__login .login__block .otp--input::-webkit-inner-spin-button,\n    .wrapper__login .login__block .otp--input ::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n              appearance: none;\n      -moz-appearance: none;\n    }\n    .wrapper__login .login__block .changephonenumber-block {\n      text-align: center;\n    }\n    .wrapper__login .login__block .col-sm-3 {\n      padding-right: 10px;\n      padding-left: 10px;\n    }\n    .wrapper__login .login__block .help-block {\n      font-size: 12.1px;\n    }\n    .wrapper__login .block__info {\n      position: relative;\n      display: block;\n      width: 90%;\n      margin: 0 auto;\n      background-color: #fff;\n      border: 1px solid #e1e1e1;\n      padding: 10px;\n    }\n    .wrapper__login .block__info p {\n      font-size: 12.1px;\n      text-align: justify;\n      line-height: 1.5em;\n    }\n    .wrapper__login .block__info .icon {\n      color: #008d45;\n    }\n    .wrapper__login .block__info.error--block {\n      border: 1px solid #f00;\n      padding: 20px;\n    }\n    .wrapper__login .block__info.error--block p {\n      color: #f00;\n    }\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  "]}]}],"members":{"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["step"]}]}],"callbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["callbackURI"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["type"]}]}],"phoneNumber":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"otp1Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_1"]}]}],"otp2Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_2"]}]}],"otp3Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_3"]}]}],"otp4Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_4"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵj"}]}],"ngOnInit":[{"__symbolic":"method"}],"autoLogin":[{"__symbolic":"method"}],"changePhoneNumber":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"submitPhoneNumber":[{"__symbolic":"method"}],"submitKTP":[{"__symbolic":"method"}],"submitOTP":[{"__symbolic":"method"}],"resendVerificationCode":[{"__symbolic":"method"}],"checkOTPComplete":[{"__symbolic":"method"}],"OTPInputTab":[{"__symbolic":"method"}],"OTPBackspaceTab":[{"__symbolic":"method"}],"setSubmitValidation":[{"__symbolic":"method"}],"setSubmitData":[{"__symbolic":"method"}],"transformPhoneNumber":[{"__symbolic":"method"}],"verifyPhoneNumber":[{"__symbolic":"method"}],"handleKTPTypeOTP":[{"__symbolic":"method"}],"handleKTPTypeLogin":[{"__symbolic":"method"}],"sendOTP":[{"__symbolic":"method"}],"handleLoginError":[{"__symbolic":"method"}],"setFocusOnOTPInputField":[{"__symbolic":"method"}],"getCombinedOTP":[{"__symbolic":"method"}],"showCountDown":[{"__symbolic":"method"}],"startCountDown":[{"__symbolic":"method"}]}},"TNKSurveyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"declarations":[{"__symbolic":"reference","name":"TNKSurveyComponent"}],"exports":[{"__symbolic":"reference","name":"TNKSurveyComponent"}],"providers":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TNKSurveyModule"},"providers":[{"__symbolic":"reference","name":"ɵh"}]}}}},"TNKSurveyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":"\n    <div class=\"survey__container\">\n      <h1 class=\"survey__heading survey__heading--big\">Masukan dan Saran</h1>\n      <p>Bantu kami melayani Anda lebih baik.</p>\n      <div class=\"ces\">\n        <h4 class=\"survey__heading survey__heading--medium\">\n          Seberapa mudah {{ surveyMessage[surveyContentType].ces }}\n        </h4>\n        <ul class=\"ces__stars\">\n          <li class=\"ces__point\">\n            <button\n              (click)=\"handlePoint($event)\"\n              [class.active]=\"cesPoint === 1\"\n              class=\"point\"\n              value=\"1\"\n            >\n              1\n            </button>\n            <span class=\"ces-text\">Sangat Sulit</span>\n          </li>\n          <li class=\"ces__point\">\n            <button\n              (click)=\"handlePoint($event)\"\n              [class.active]=\"cesPoint === 2\"\n              class=\"point\"\n              value=\"2\"\n            >\n              2\n            </button>\n            <span class=\"ces-text\">Cukup Sulit</span>\n          </li>\n          <li class=\"ces__point\">\n            <button\n              (click)=\"handlePoint($event)\"\n              [class.active]=\"cesPoint === 3\"\n              class=\"point\"\n              value=\"3\"\n            >\n              3\n            </button>\n            <span class=\"ces-text\">Biasa Saja</span>\n          </li>\n          <li class=\"ces__point\">\n            <button\n              (click)=\"handlePoint($event)\"\n              [class.active]=\"cesPoint === 4\"\n              class=\"point\"\n              value=\"4\"\n            >\n              4\n            </button>\n            <span class=\"ces-text\">Cukup Mudah</span>\n          </li>\n          <li class=\"ces__point\">\n            <button\n              (click)=\"handlePoint($event)\"\n              [class.active]=\"cesPoint === 5\"\n              class=\"point\"\n              value=\"5\"\n            >\n              5\n            </button>\n            <span class=\"ces-text\">Sangat Mudah</span>\n          </li>\n        </ul>\n      </div>\n\n      <div class=\"emoscore\">\n        <h4 class=\"survey__heading survey__heading--medium\">\n          Apa yang anda rasakan {{ surveyMessage[surveyContentType].emo }}\n        </h4>\n        <p>Pilih salah satu saja</p>\n        <ul class=\"emoscore__points\">\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 13\"\n            class=\"point\"\n            value=\"13\"\n          >\n            Khawatir\n          </li>\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 16\"\n            class=\"point\"\n            value=\"16\"\n          >\n            Antusias\n          </li>\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 17\"\n            class=\"point\"\n            value=\"17\"\n          >\n            Puas\n          </li>\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 14\"\n            class=\"point\"\n            value=\"14\"\n          >\n            Bingung\n          </li>\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 15\"\n            class=\"point\"\n            value=\"15\"\n          >\n            Nyaman\n          </li>\n          <li\n            (click)=\"handlePoint($event, 'emoscore')\"\n            [class.active]=\"emoscorePoint === 12\"\n            class=\"point\"\n            value=\"12\"\n          >\n            Kecewa\n          </li>\n        </ul>\n      </div>\n\n      <form class=\"feedback\" [formGroup]=\"helpWidgetForm\">\n        <h4 class=\"survey__heading survey__heading--medium\">\n          Ceritakan alasan Anda memberikan penilaian tersebut?\n        </h4>\n        <div\n          class=\"form-group\"\n          [ngClass]=\"{\n            'has-success': helpWidgetForm.valid,\n            'has-error': helpWidgetForm.dirty && widgetErrors.content\n          }\"\n        >\n          <textarea\n            id=\"inp_bantuan\"\n            formControlName=\"content\"\n            class=\"form-control\"\n            rows=\"5\"\n            placeholder=\"Tulis alasan Anda disini\"\n          ></textarea>\n          <p class=\"help-block\">{{ widgetErrors.content }}</p>\n        </div>\n        <button\n          type=\"button\"\n          id=\"btn_kirimBantuan\"\n          class=\"tnk-button tnk-button--secondary tnk-button--large\"\n          (click)=\"sendHelpWidgetForm()\"\n          [disabled]=\"emoscorePoint === 0 || cesPoint === 0\"\n        >\n          {{ sendBusy ? 'Loading...' : 'Kirim' }}\n        </button>\n      </form>\n    </div>\n  ","selector":"tnk-survey","styles":["\n    /*\t-----------------------------------------------------------------------------\n\n    \tformare v0.1.0 | MIT License | github.com/davidkk/formare\n\n    -----------------------------------------------------------------------------  */\n    /** This project uses sanitize.css as its style resetter. */\n    /*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */\n    /* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)\n    ========================================================================== */\n    /**\n    * 1. Remove repeating backgrounds in all browsers (opinionated).\n    * 2. Add box sizing inheritence in all browsers (opinionated).\n    */\n    :root {\n      --primary-color: #007dbc;\n      --secondary-color: #81be41;\n      --success-color: #48a900;\n      --warning-color: #ebc500;\n      --danger-color: #e85915;\n      --info-color: #1C415B;\n      --gray-color: #6D7A7D;\n      --light-color: #e2e4e5;\n      --lighter-color: #f0f2f2;\n      --dark-color: #2c3132;\n      --darker-color: #161819;\n      --tertiary-color: #002b45;\n      --font-size: 0.875rem;\n      --font-family-text: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;\n      --font-family-title: Georgia, Times New Roman, serif;\n      --font-family-code: SFMono-Regular, Menlo, Monaco, Consolas, Roboto Mono, Liberation Mono, Courier New, monospace;\n      --font-weight: 400;\n      --text-color: #2c3132;\n      --line-height: 1.5;\n      --background-color: #FFFFFF; }\n\n    *,\n    ::before,\n    ::after {\n      background-repeat: no-repeat;\n      /* 1 */\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      /* 2 */ }\n\n    /**\n    * 1. Add text decoration inheritance in all browsers (opinionated).\n    * 2. Add vertical alignment inheritence in all browsers (opinionated).\n    */\n    ::before,\n    ::after {\n      text-decoration: inherit;\n      /* 1 */\n      vertical-align: inherit;\n      /* 2 */ }\n\n    /**\n    * 1. Add border box sizing in all browsers (opinionated).\n    * 2. Add the default cursor in all browsers (opinionated).\n    * 3. Prevent font size adjustments after orientation changes in IE and iOS.\n    */\n    html {\n      font-family: sans-serif;\n      line-height: 1.15;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      /* 1 */\n      cursor: default;\n      /* 2 */\n      -ms-text-size-adjust: 100%;\n      /* 3 */\n      -webkit-text-size-adjust: 100%;\n      /* 3 */\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale; }\n\n    /* Sections (https://html.spec.whatwg.org/multipage/semantics.html#sections)\n    ========================================================================== */\n    /**\n    * Add the correct display in IE 9-.\n    */\n    article,\n    aside,\n    footer,\n    header,\n    nav,\n    section {\n      display: block; }\n\n    /**\n    * Remove the margin in all browsers (opinionated).\n    */\n    body {\n      margin: 0;\n      font-family: var(--font-family-text);\n      font-size: var(--font-size);\n      font-weight: var(--font-weight);\n      line-height: var(--line-height);\n      color: var(--text-color);\n      background-color: var(--background-color); }\n\n    /**\n    * Correct the font size and margin on `h1` elements within `section` and\n    * `article` contexts in Chrome, Firefox, and Safari.\n    */\n    h1 {\n      font-size: 2em;\n      margin: .67em 0; }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin: 0;\n      padding: 0;\n      font-size: 100%;\n      font-weight: normal; }\n\n    /* Grouping content (https://html.spec.whatwg.org/multipage/semantics.html#grouping-content)\n    ========================================================================== */\n    /**\n    * Add the correct display in IE 9-.\n    * 1. Add the correct display in IE.\n    */\n    figcaption,\n    figure,\n    main {\n      /* 1 */\n      display: block; }\n\n    /**\n    * Add the correct margin in IE 8.\n    */\n    figure {\n      margin: 1em 40px; }\n\n    /**\n    * 1. Add the correct box sizing in Firefox.\n    * 2. Show the overflow in Edge and IE.\n    */\n    hr {\n      -webkit-box-sizing: content-box;\n              box-sizing: content-box;\n      /* 1 */\n      height: 0;\n      /* 1 */\n      overflow: visible;\n      /* 2 */ }\n\n    /**\n    * Remove the list style on navigation lists in all browsers (opinionated).\n    */\n    nav ol,\n    nav ul {\n      list-style: none;\n      margin: 0;\n      padding: 0; }\n\n    /**\n    * 1. Correct the inheritance and scaling of font size in all browsers.\n    */\n    pre {\n      font-family: var(--font-family-code);\n      /* 1 */\n      font-size: 0.76087rem; }\n\n    /* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)\n    ========================================================================== */\n    /**\n    * 1. Remove the gray background on active links in IE 10.\n    * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n    */\n    a {\n      text-decoration: none;\n      color: inherit;\n      background-color: transparent;\n      /* 1 */\n      -webkit-text-decoration-skip: objects;\n      /* 2 */ }\n\n    /**\n    * 1. Remove the bottom border in Firefox 39-.\n    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n    */\n    abbr[title] {\n      border-bottom: none;\n      /* 1 */\n      text-decoration: underline;\n      /* 2 */\n      -webkit-text-decoration: underline dotted;\n              text-decoration: underline dotted;\n      /* 2 */ }\n\n    /**\n    * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n    */\n    b,\n    strong {\n      font-weight: inherit; }\n\n    /**\n    * Add the correct font weight in Chrome, Edge, and Safari.\n    */\n    b,\n    strong {\n      font-weight: bolder; }\n\n    /**\n    * 1. Correct the inheritance and scaling of font size in all browsers.\n    * 2. Correct the odd `em` font sizing in all browsers.\n    */\n    code,\n    kbd,\n    samp {\n      font-family: var(--font-family-code);\n      /* 1 */\n      font-size: 0.76087rem;\n      /* 2 */ }\n\n    code {\n      background-color: #f0f2f2;\n      color: #007dbc;\n      padding: .25em;\n      font-size: 0.76087rem;\n      border-radius: 4px; }\n\n    /**\n    * Add the correct font style in Android 4.3-.\n    */\n    dfn {\n      font-style: italic; }\n\n    /**\n    * Add the correct background and color in IE 9-.\n    */\n    mark {\n      background-color: #ffff00;\n      color: #000000; }\n\n    /**\n    * Add the correct font size in all browsers.\n    */\n    small {\n      font-size: 80%; }\n\n    /**\n    * Prevent `sub` and `sup` elements from affecting the line height in\n    * all browsers.\n    */\n    sub,\n    sup {\n      font-size: 75%;\n      line-height: 0;\n      position: relative;\n      vertical-align: baseline; }\n\n    sub {\n      bottom: -.25em; }\n\n    sup {\n      top: -.5em; }\n\n    /*\n    * Remove the text shadow on text selections (opinionated).\n    * 1. Restore the coloring undone by defining the text shadow (opinionated).\n    */\n    ::-moz-selection {\n      background-color: #b3d4fc;\n      /* 1 */\n      color: #000000;\n      /* 1 */\n      text-shadow: none; }\n\n    ::selection {\n      background-color: #b3d4fc;\n      /* 1 */\n      color: #000000;\n      /* 1 */\n      text-shadow: none; }\n\n    /* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)\n    ========================================================================== */\n    /*\n    * Change the alignment on media elements in all browers (opinionated).\n    */\n    audio,\n    canvas,\n    iframe,\n    img,\n    svg,\n    video {\n      vertical-align: middle; }\n\n    /**\n    * Add the correct display in IE 9-.\n    */\n    audio,\n    video {\n      display: inline-block; }\n\n    /**\n    * Add the correct display in iOS 4-7.\n    */\n    audio:not([controls]) {\n      display: none;\n      height: 0; }\n\n    /**\n    * Remove the border on images inside links in IE 10-.\n    */\n    img {\n      border-style: none; }\n\n    /**\n    * Change the fill color to match the text color in all browsers (opinionated).\n    */\n    svg {\n      fill: currentColor; }\n\n    /**\n    * Hide the overflow in IE.\n    */\n    svg:not(:root) {\n      overflow: hidden; }\n\n    /* Tabular data (https://html.spec.whatwg.org/multipage/tables.html#tables)\n    ========================================================================== */\n    /**\n    * Collapse border spacing\n    */\n    table {\n      border-collapse: collapse; }\n\n    /* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)\n    ========================================================================== */\n    /**\n    * Remove the margin in Firefox and Safari.\n    */\n    button,\n    input,\n    optgroup,\n    select,\n    textarea {\n      margin: 0; }\n\n    /**\n    * Inherit styling in all browsers (opinionated).\n    */\n    button,\n    input,\n    select,\n    textarea {\n      color: inherit;\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit; }\n\n    /**\n    * Show the overflow in IE.\n    * 1. Show the overflow in Edge.\n    */\n    button,\n    input {\n      /* 1 */\n      overflow: visible; }\n\n    /**\n    * Remove the inheritance of text transform in Edge, Firefox, and IE.\n    * 1. Remove the inheritance of text transform in Firefox.\n    */\n    button,\n    select {\n      /* 1 */\n      text-transform: none; }\n\n    /**\n    * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n    *    controls in Android 4.\n    * 2. Correct the inability to style clickable types in iOS and Safari.\n    */\n    button,\n    html [type=\"button\"],\n    [type=\"reset\"],\n    [type=\"submit\"] {\n      -webkit-appearance: button;\n      /* 2 */ }\n\n    /**\n    * Remove the inner border and padding in Firefox.\n    */\n    button::-moz-focus-inner,\n    [type=\"button\"]::-moz-focus-inner,\n    [type=\"reset\"]::-moz-focus-inner,\n    [type=\"submit\"]::-moz-focus-inner {\n      border-style: none;\n      padding: 0; }\n\n    /**\n    * Restore the focus styles unset by the previous rule.\n    */\n    button:-moz-focusring,\n    [type=\"button\"]:-moz-focusring,\n    [type=\"reset\"]:-moz-focusring,\n    [type=\"submit\"]:-moz-focusring {\n      outline: 1px dotted ButtonText; }\n\n    /**\n    * 1. Correct the text wrapping in Edge and IE.\n    * 2. Correct the color inheritance from `fieldset` elements in IE.\n    * 3. Remove the padding so developers are not caught out when they zero out\n    *    `fieldset` elements in all browsers.\n    */\n    legend {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      /* 1 */\n      color: inherit;\n      /* 2 */\n      display: table;\n      /* 1 */\n      max-width: 100%;\n      /* 1 */\n      padding: 0;\n      /* 3 */\n      white-space: normal;\n      /* 1 */ }\n\n    /**\n    * 1. Add the correct display in IE 9-.\n    * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n    */\n    progress {\n      display: inline-block;\n      /* 1 */\n      vertical-align: baseline;\n      /* 2 */ }\n\n    /**\n    * 1. Remove the default vertical scrollbar in IE.\n    * 2. Change the resize direction on textareas in all browsers (opinionated).\n    */\n    textarea {\n      overflow: auto;\n      /* 1 */\n      resize: vertical;\n      /* 2 */ }\n\n    /**\n    * 1. Add the correct box sizing in IE 10-.\n    * 2. Remove the padding in IE 10-.\n    */\n    [type=\"checkbox\"],\n    [type=\"radio\"] {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      /* 1 */\n      padding: 0;\n      /* 2 */ }\n\n    /**\n    * Correct the cursor style of increment and decrement buttons in Chrome.\n    */\n    [type=\"number\"]::-webkit-inner-spin-button,\n    [type=\"number\"]::-webkit-outer-spin-button {\n      height: auto; }\n\n    /**\n    * 1. Correct the odd appearance in Chrome and Safari.\n    * 2. Correct the outline style in Safari.\n    */\n    [type=\"search\"] {\n      -webkit-appearance: textfield;\n      /* 1 */\n      outline-offset: -2px;\n      /* 2 */ }\n\n    /**\n    * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n    */\n    [type=\"search\"]::-webkit-search-cancel-button,\n    [type=\"search\"]::-webkit-search-decoration {\n      -webkit-appearance: none; }\n\n    /**\n    * 1. Correct the inability to style clickable types in iOS and Safari.\n    * 2. Change font properties to `inherit` in Safari.\n    */\n    ::-webkit-file-upload-button {\n      -webkit-appearance: button;\n      /* 1 */\n      font: inherit;\n      /* 2 */ }\n\n    /* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)\n    ========================================================================== */\n    /*\n    * Add the correct display in IE 9-.\n    * 1. Add the correct display in Edge, IE, and Firefox.\n    */\n    details,\n    menu {\n      display: block; }\n\n    /*\n    * Add the correct display in all browsers.\n    */\n    summary {\n      display: list-item; }\n\n    /* Scripting (https://html.spec.whatwg.org/multipage/scripting.html#scripting-3)\n    ========================================================================== */\n    /**\n    * Add the correct display in IE 9-.\n    */\n    canvas {\n      display: inline-block; }\n\n    /**\n    * Add the correct display in IE.\n    */\n    template {\n      display: none; }\n\n    /* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)\n    ========================================================================== */\n    /*\n    * Remove the tapping delay on clickable elements (opinionated).\n    * 1. Remove the tapping delay in IE 10.\n    */\n    a,\n    area,\n    button,\n    input,\n    label,\n    select,\n    summary,\n    textarea,\n    [tabindex] {\n      -ms-touch-action: manipulation;\n      /* 1 */\n      touch-action: manipulation; }\n\n    /**\n    * Add the correct display in IE 10-.\n    */\n    [hidden] {\n      display: none; }\n\n    /* ARIA (https://w3c.github.io/html-aria/)\n    ========================================================================== */\n    /**\n    * Change the cursor on busy elements (opinionated).\n    */\n    [aria-busy=\"true\"] {\n      cursor: progress; }\n\n    /*\n    * Change the cursor on control elements (opinionated).\n    */\n    [aria-controls] {\n      cursor: pointer; }\n\n    /*\n    * Change the display on visually hidden accessible elements (opinionated).\n    */\n    [aria-hidden=\"false\"][hidden]:not(:focus) {\n      clip: rect(0, 0, 0, 0);\n      display: inherit;\n      position: absolute; }\n\n    /*\n    * Change the cursor on disabled, not-editable, or otherwise\n    * inoperable elements (opinionated).\n    */\n    [aria-disabled] {\n      cursor: default; }\n\n    h1,\n    .heading-1 {\n      font-size: 2.625rem; }\n\n    h2,\n    .heading-2 {\n      font-size: 2.275rem; }\n\n    h3,\n    .heading-3 {\n      font-size: 1.925rem; }\n\n    h4,\n    .heading-4 {\n      font-size: 1.575rem; }\n\n    h5,\n    .heading-5 {\n      font-size: 1.225rem; }\n\n    h6,\n    .heading-6 {\n      font-size: 0.875rem; }\n\n    .container {\n      position: relative;\n      margin: 0 auto;\n      padding: 0 1rem;\n      width: 100%; }\n      @media (min-width: 576px) {\n        .container {\n          max-width: 540px;\n          width: 540px; } }\n      @media (min-width: 768px) {\n        .container {\n          max-width: 720px;\n          width: 720px; } }\n      @media (min-width: 992px) {\n        .container {\n          max-width: 960px;\n          width: 960px; } }\n      @media (min-width: 1200px) {\n        .container {\n          max-width: 1140px;\n          width: 1140px; } }\n      .container--fluid {\n        max-width: none;\n        width: 100%; }\n\n    .row,\n    .grids {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -ms-flex-wrap: wrap;\n          flex-wrap: wrap;\n      margin: 0 -1rem; }\n      .row--gapless,\n      .grids--gapless {\n        padding: 0; }\n        .row--gapless .column,\n        .row--gapless .grid,\n        .row--gapless [class*='column-'],\n        .row--gapless [class*='grid-'],\n        .grids--gapless .column,\n        .grids--gapless .grid,\n        .grids--gapless [class*='column-'],\n        .grids--gapless [class*='grid-'] {\n          padding: 0; }\n\n    .grid,\n    .column {\n      -webkit-box-flex: 1;\n          -ms-flex-positive: 1;\n              flex-grow: 1;\n      -ms-flex-negative: 0;\n          flex-shrink: 0;\n      -ms-flex-preferred-size: 0;\n          flex-basis: 0;\n      max-width: 100%;\n      padding: 0 1rem; }\n      .grid.grid-1, .grid.column-1,\n      .column.grid-1,\n      .column.column-1 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 8.33333%;\n            flex-basis: 8.33333%;\n        max-width: 8.33333%; }\n      .grid.grid-2, .grid.column-2,\n      .column.grid-2,\n      .column.column-2 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 16.66667%;\n            flex-basis: 16.66667%;\n        max-width: 16.66667%; }\n      .grid.grid-3, .grid.column-3,\n      .column.grid-3,\n      .column.column-3 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 25%;\n            flex-basis: 25%;\n        max-width: 25%; }\n      .grid.grid-4, .grid.column-4,\n      .column.grid-4,\n      .column.column-4 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 33.33333%;\n            flex-basis: 33.33333%;\n        max-width: 33.33333%; }\n      .grid.grid-5, .grid.column-5,\n      .column.grid-5,\n      .column.column-5 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 41.66667%;\n            flex-basis: 41.66667%;\n        max-width: 41.66667%; }\n      .grid.grid-6, .grid.column-6,\n      .column.grid-6,\n      .column.column-6 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 50%;\n            flex-basis: 50%;\n        max-width: 50%; }\n      .grid.grid-7, .grid.column-7,\n      .column.grid-7,\n      .column.column-7 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 58.33333%;\n            flex-basis: 58.33333%;\n        max-width: 58.33333%; }\n      .grid.grid-8, .grid.column-8,\n      .column.grid-8,\n      .column.column-8 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 66.66667%;\n            flex-basis: 66.66667%;\n        max-width: 66.66667%; }\n      .grid.grid-9, .grid.column-9,\n      .column.grid-9,\n      .column.column-9 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 75%;\n            flex-basis: 75%;\n        max-width: 75%; }\n      .grid.grid-10, .grid.column-10,\n      .column.grid-10,\n      .column.column-10 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 83.33333%;\n            flex-basis: 83.33333%;\n        max-width: 83.33333%; }\n      .grid.grid-11, .grid.column-11,\n      .column.grid-11,\n      .column.column-11 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 91.66667%;\n            flex-basis: 91.66667%;\n        max-width: 91.66667%; }\n      .grid.grid-12, .grid.column-12,\n      .column.grid-12,\n      .column.column-12 {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-negative: 0;\n            flex-shrink: 0;\n        -ms-flex-preferred-size: 100%;\n            flex-basis: 100%;\n        max-width: 100%; }\n      @media (min-width: 0) {\n        .grid.grid-xs, .grid.column-xs,\n        .column.grid-xs,\n        .column.column-xs {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 0;\n              flex-basis: 0;\n          max-width: 100%; }\n        .grid.grid-xs-1, .grid.column-xs-1,\n        .column.grid-xs-1,\n        .column.column-xs-1 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 8.33333%;\n              flex-basis: 8.33333%;\n          max-width: 8.33333%; }\n        .grid.grid-xs-2, .grid.column-xs-2,\n        .column.grid-xs-2,\n        .column.column-xs-2 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 16.66667%;\n              flex-basis: 16.66667%;\n          max-width: 16.66667%; }\n        .grid.grid-xs-3, .grid.column-xs-3,\n        .column.grid-xs-3,\n        .column.column-xs-3 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 25%;\n              flex-basis: 25%;\n          max-width: 25%; }\n        .grid.grid-xs-4, .grid.column-xs-4,\n        .column.grid-xs-4,\n        .column.column-xs-4 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 33.33333%;\n              flex-basis: 33.33333%;\n          max-width: 33.33333%; }\n        .grid.grid-xs-5, .grid.column-xs-5,\n        .column.grid-xs-5,\n        .column.column-xs-5 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 41.66667%;\n              flex-basis: 41.66667%;\n          max-width: 41.66667%; }\n        .grid.grid-xs-6, .grid.column-xs-6,\n        .column.grid-xs-6,\n        .column.column-xs-6 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 50%;\n              flex-basis: 50%;\n          max-width: 50%; }\n        .grid.grid-xs-7, .grid.column-xs-7,\n        .column.grid-xs-7,\n        .column.column-xs-7 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 58.33333%;\n              flex-basis: 58.33333%;\n          max-width: 58.33333%; }\n        .grid.grid-xs-8, .grid.column-xs-8,\n        .column.grid-xs-8,\n        .column.column-xs-8 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 66.66667%;\n              flex-basis: 66.66667%;\n          max-width: 66.66667%; }\n        .grid.grid-xs-9, .grid.column-xs-9,\n        .column.grid-xs-9,\n        .column.column-xs-9 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 75%;\n              flex-basis: 75%;\n          max-width: 75%; }\n        .grid.grid-xs-10, .grid.column-xs-10,\n        .column.grid-xs-10,\n        .column.column-xs-10 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 83.33333%;\n              flex-basis: 83.33333%;\n          max-width: 83.33333%; }\n        .grid.grid-xs-11, .grid.column-xs-11,\n        .column.grid-xs-11,\n        .column.column-xs-11 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 91.66667%;\n              flex-basis: 91.66667%;\n          max-width: 91.66667%; }\n        .grid.grid-xs-12, .grid.column-xs-12,\n        .column.grid-xs-12,\n        .column.column-xs-12 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 100%;\n              flex-basis: 100%;\n          max-width: 100%; } }\n      @media (min-width: 576px) {\n        .grid.grid-sm, .grid.column-sm,\n        .column.grid-sm,\n        .column.column-sm {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 0;\n              flex-basis: 0;\n          max-width: 100%; }\n        .grid.grid-sm-1, .grid.column-sm-1,\n        .column.grid-sm-1,\n        .column.column-sm-1 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 8.33333%;\n              flex-basis: 8.33333%;\n          max-width: 8.33333%; }\n        .grid.grid-sm-2, .grid.column-sm-2,\n        .column.grid-sm-2,\n        .column.column-sm-2 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 16.66667%;\n              flex-basis: 16.66667%;\n          max-width: 16.66667%; }\n        .grid.grid-sm-3, .grid.column-sm-3,\n        .column.grid-sm-3,\n        .column.column-sm-3 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 25%;\n              flex-basis: 25%;\n          max-width: 25%; }\n        .grid.grid-sm-4, .grid.column-sm-4,\n        .column.grid-sm-4,\n        .column.column-sm-4 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 33.33333%;\n              flex-basis: 33.33333%;\n          max-width: 33.33333%; }\n        .grid.grid-sm-5, .grid.column-sm-5,\n        .column.grid-sm-5,\n        .column.column-sm-5 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 41.66667%;\n              flex-basis: 41.66667%;\n          max-width: 41.66667%; }\n        .grid.grid-sm-6, .grid.column-sm-6,\n        .column.grid-sm-6,\n        .column.column-sm-6 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 50%;\n              flex-basis: 50%;\n          max-width: 50%; }\n        .grid.grid-sm-7, .grid.column-sm-7,\n        .column.grid-sm-7,\n        .column.column-sm-7 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 58.33333%;\n              flex-basis: 58.33333%;\n          max-width: 58.33333%; }\n        .grid.grid-sm-8, .grid.column-sm-8,\n        .column.grid-sm-8,\n        .column.column-sm-8 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 66.66667%;\n              flex-basis: 66.66667%;\n          max-width: 66.66667%; }\n        .grid.grid-sm-9, .grid.column-sm-9,\n        .column.grid-sm-9,\n        .column.column-sm-9 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 75%;\n              flex-basis: 75%;\n          max-width: 75%; }\n        .grid.grid-sm-10, .grid.column-sm-10,\n        .column.grid-sm-10,\n        .column.column-sm-10 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 83.33333%;\n              flex-basis: 83.33333%;\n          max-width: 83.33333%; }\n        .grid.grid-sm-11, .grid.column-sm-11,\n        .column.grid-sm-11,\n        .column.column-sm-11 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 91.66667%;\n              flex-basis: 91.66667%;\n          max-width: 91.66667%; }\n        .grid.grid-sm-12, .grid.column-sm-12,\n        .column.grid-sm-12,\n        .column.column-sm-12 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 100%;\n              flex-basis: 100%;\n          max-width: 100%; } }\n      @media (min-width: 768px) {\n        .grid.grid-md, .grid.column-md,\n        .column.grid-md,\n        .column.column-md {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 0;\n              flex-basis: 0;\n          max-width: 100%; }\n        .grid.grid-md-1, .grid.column-md-1,\n        .column.grid-md-1,\n        .column.column-md-1 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 8.33333%;\n              flex-basis: 8.33333%;\n          max-width: 8.33333%; }\n        .grid.grid-md-2, .grid.column-md-2,\n        .column.grid-md-2,\n        .column.column-md-2 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 16.66667%;\n              flex-basis: 16.66667%;\n          max-width: 16.66667%; }\n        .grid.grid-md-3, .grid.column-md-3,\n        .column.grid-md-3,\n        .column.column-md-3 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 25%;\n              flex-basis: 25%;\n          max-width: 25%; }\n        .grid.grid-md-4, .grid.column-md-4,\n        .column.grid-md-4,\n        .column.column-md-4 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 33.33333%;\n              flex-basis: 33.33333%;\n          max-width: 33.33333%; }\n        .grid.grid-md-5, .grid.column-md-5,\n        .column.grid-md-5,\n        .column.column-md-5 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 41.66667%;\n              flex-basis: 41.66667%;\n          max-width: 41.66667%; }\n        .grid.grid-md-6, .grid.column-md-6,\n        .column.grid-md-6,\n        .column.column-md-6 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 50%;\n              flex-basis: 50%;\n          max-width: 50%; }\n        .grid.grid-md-7, .grid.column-md-7,\n        .column.grid-md-7,\n        .column.column-md-7 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 58.33333%;\n              flex-basis: 58.33333%;\n          max-width: 58.33333%; }\n        .grid.grid-md-8, .grid.column-md-8,\n        .column.grid-md-8,\n        .column.column-md-8 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 66.66667%;\n              flex-basis: 66.66667%;\n          max-width: 66.66667%; }\n        .grid.grid-md-9, .grid.column-md-9,\n        .column.grid-md-9,\n        .column.column-md-9 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 75%;\n              flex-basis: 75%;\n          max-width: 75%; }\n        .grid.grid-md-10, .grid.column-md-10,\n        .column.grid-md-10,\n        .column.column-md-10 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 83.33333%;\n              flex-basis: 83.33333%;\n          max-width: 83.33333%; }\n        .grid.grid-md-11, .grid.column-md-11,\n        .column.grid-md-11,\n        .column.column-md-11 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 91.66667%;\n              flex-basis: 91.66667%;\n          max-width: 91.66667%; }\n        .grid.grid-md-12, .grid.column-md-12,\n        .column.grid-md-12,\n        .column.column-md-12 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 100%;\n              flex-basis: 100%;\n          max-width: 100%; } }\n      @media (min-width: 992px) {\n        .grid.grid-lg, .grid.column-lg,\n        .column.grid-lg,\n        .column.column-lg {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 0;\n              flex-basis: 0;\n          max-width: 100%; }\n        .grid.grid-lg-1, .grid.column-lg-1,\n        .column.grid-lg-1,\n        .column.column-lg-1 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 8.33333%;\n              flex-basis: 8.33333%;\n          max-width: 8.33333%; }\n        .grid.grid-lg-2, .grid.column-lg-2,\n        .column.grid-lg-2,\n        .column.column-lg-2 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 16.66667%;\n              flex-basis: 16.66667%;\n          max-width: 16.66667%; }\n        .grid.grid-lg-3, .grid.column-lg-3,\n        .column.grid-lg-3,\n        .column.column-lg-3 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 25%;\n              flex-basis: 25%;\n          max-width: 25%; }\n        .grid.grid-lg-4, .grid.column-lg-4,\n        .column.grid-lg-4,\n        .column.column-lg-4 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 33.33333%;\n              flex-basis: 33.33333%;\n          max-width: 33.33333%; }\n        .grid.grid-lg-5, .grid.column-lg-5,\n        .column.grid-lg-5,\n        .column.column-lg-5 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 41.66667%;\n              flex-basis: 41.66667%;\n          max-width: 41.66667%; }\n        .grid.grid-lg-6, .grid.column-lg-6,\n        .column.grid-lg-6,\n        .column.column-lg-6 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 50%;\n              flex-basis: 50%;\n          max-width: 50%; }\n        .grid.grid-lg-7, .grid.column-lg-7,\n        .column.grid-lg-7,\n        .column.column-lg-7 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 58.33333%;\n              flex-basis: 58.33333%;\n          max-width: 58.33333%; }\n        .grid.grid-lg-8, .grid.column-lg-8,\n        .column.grid-lg-8,\n        .column.column-lg-8 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 66.66667%;\n              flex-basis: 66.66667%;\n          max-width: 66.66667%; }\n        .grid.grid-lg-9, .grid.column-lg-9,\n        .column.grid-lg-9,\n        .column.column-lg-9 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 75%;\n              flex-basis: 75%;\n          max-width: 75%; }\n        .grid.grid-lg-10, .grid.column-lg-10,\n        .column.grid-lg-10,\n        .column.column-lg-10 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 83.33333%;\n              flex-basis: 83.33333%;\n          max-width: 83.33333%; }\n        .grid.grid-lg-11, .grid.column-lg-11,\n        .column.grid-lg-11,\n        .column.column-lg-11 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 91.66667%;\n              flex-basis: 91.66667%;\n          max-width: 91.66667%; }\n        .grid.grid-lg-12, .grid.column-lg-12,\n        .column.grid-lg-12,\n        .column.column-lg-12 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 100%;\n              flex-basis: 100%;\n          max-width: 100%; } }\n      @media (min-width: 1200px) {\n        .grid.grid-xl, .grid.column-xl,\n        .column.grid-xl,\n        .column.column-xl {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 0;\n              flex-basis: 0;\n          max-width: 100%; }\n        .grid.grid-xl-1, .grid.column-xl-1,\n        .column.grid-xl-1,\n        .column.column-xl-1 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 8.33333%;\n              flex-basis: 8.33333%;\n          max-width: 8.33333%; }\n        .grid.grid-xl-2, .grid.column-xl-2,\n        .column.grid-xl-2,\n        .column.column-xl-2 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 16.66667%;\n              flex-basis: 16.66667%;\n          max-width: 16.66667%; }\n        .grid.grid-xl-3, .grid.column-xl-3,\n        .column.grid-xl-3,\n        .column.column-xl-3 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 25%;\n              flex-basis: 25%;\n          max-width: 25%; }\n        .grid.grid-xl-4, .grid.column-xl-4,\n        .column.grid-xl-4,\n        .column.column-xl-4 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 33.33333%;\n              flex-basis: 33.33333%;\n          max-width: 33.33333%; }\n        .grid.grid-xl-5, .grid.column-xl-5,\n        .column.grid-xl-5,\n        .column.column-xl-5 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 41.66667%;\n              flex-basis: 41.66667%;\n          max-width: 41.66667%; }\n        .grid.grid-xl-6, .grid.column-xl-6,\n        .column.grid-xl-6,\n        .column.column-xl-6 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 50%;\n              flex-basis: 50%;\n          max-width: 50%; }\n        .grid.grid-xl-7, .grid.column-xl-7,\n        .column.grid-xl-7,\n        .column.column-xl-7 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 58.33333%;\n              flex-basis: 58.33333%;\n          max-width: 58.33333%; }\n        .grid.grid-xl-8, .grid.column-xl-8,\n        .column.grid-xl-8,\n        .column.column-xl-8 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 66.66667%;\n              flex-basis: 66.66667%;\n          max-width: 66.66667%; }\n        .grid.grid-xl-9, .grid.column-xl-9,\n        .column.grid-xl-9,\n        .column.column-xl-9 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 75%;\n              flex-basis: 75%;\n          max-width: 75%; }\n        .grid.grid-xl-10, .grid.column-xl-10,\n        .column.grid-xl-10,\n        .column.column-xl-10 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 83.33333%;\n              flex-basis: 83.33333%;\n          max-width: 83.33333%; }\n        .grid.grid-xl-11, .grid.column-xl-11,\n        .column.grid-xl-11,\n        .column.column-xl-11 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 91.66667%;\n              flex-basis: 91.66667%;\n          max-width: 91.66667%; }\n        .grid.grid-xl-12, .grid.column-xl-12,\n        .column.grid-xl-12,\n        .column.column-xl-12 {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1;\n          -ms-flex-negative: 0;\n              flex-shrink: 0;\n          -ms-flex-preferred-size: 100%;\n              flex-basis: 100%;\n          max-width: 100%; } }\n\n    .structure {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1 100%;\n              flex: 1 1 100%;\n      min-width: 0; }\n      .structure--horizontal {\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row; }\n\n    .section {\n      position: relative; }\n      .section--primary {\n        background-color: #007dbc;\n        color: #f0f2f2; }\n      .section--secondary {\n        background-color: #81be41;\n        color: #f0f2f2; }\n      .section--success {\n        background-color: #48a900;\n        color: #f0f2f2; }\n      .section--warning {\n        background-color: #ebc500;\n        color: #f0f2f2; }\n      .section--danger {\n        background-color: #e85915;\n        color: #f0f2f2; }\n      .section--info {\n        background-color: #1C415B;\n        color: #f0f2f2; }\n      .section--gray {\n        background-color: #6D7A7D;\n        color: #f0f2f2; }\n      .section--light {\n        background-color: #e2e4e5;\n        color: #2c3132; }\n      .section--lighter {\n        background-color: #f0f2f2;\n        color: #2c3132; }\n      .section--dark {\n        background-color: #2c3132;\n        color: #f0f2f2; }\n      .section--darker {\n        background-color: #161819;\n        color: #f0f2f2; }\n      .section--tertiary {\n        background-color: #002b45;\n        color: #f0f2f2; }\n\n    .hero {\n      position: relative;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      min-height: 25em; }\n      .hero__bg {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        width: 100%;\n        z-index: 250;\n        background-position: center;\n        background-size: cover; }\n      .hero__body {\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        height: 100%;\n        padding-top: 2rem;\n        padding-bottom: 2rem; }\n        .hero__body--centerized {\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-align: center;\n              -ms-flex-align: center;\n                  align-items: center;\n          -webkit-box-pack: center;\n              -ms-flex-pack: center;\n                  justify-content: center; }\n      .hero > *:not(.hero__bg), .hero__body {\n        position: relative;\n        z-index: 500; }\n      .hero--x-small {\n        min-height: 12.5em; }\n      .hero--small {\n        min-height: 18.75em; }\n      .hero--normal {\n        min-height: 25em; }\n      .hero--large {\n        min-height: 37.5em; }\n      .hero--x-large {\n        min-height: 50em; }\n      .hero--primary {\n        background-color: #007dbc;\n        color: #f0f2f2; }\n        .hero--primary .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #007dbc;\n          opacity: 0.7; }\n      .hero--secondary {\n        background-color: #81be41;\n        color: #f0f2f2; }\n        .hero--secondary .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #81be41;\n          opacity: 0.7; }\n      .hero--success {\n        background-color: #48a900;\n        color: #f0f2f2; }\n        .hero--success .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #48a900;\n          opacity: 0.7; }\n      .hero--warning {\n        background-color: #ebc500;\n        color: #f0f2f2; }\n        .hero--warning .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #ebc500;\n          opacity: 0.7; }\n      .hero--danger {\n        background-color: #e85915;\n        color: #f0f2f2; }\n        .hero--danger .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #e85915;\n          opacity: 0.7; }\n      .hero--info {\n        background-color: #1C415B;\n        color: #f0f2f2; }\n        .hero--info .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #1C415B;\n          opacity: 0.7; }\n      .hero--gray {\n        background-color: #6D7A7D;\n        color: #f0f2f2; }\n        .hero--gray .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #6D7A7D;\n          opacity: 0.7; }\n      .hero--light {\n        background-color: #e2e4e5;\n        color: #2c3132; }\n        .hero--light .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #e2e4e5;\n          opacity: 0.7; }\n      .hero--lighter {\n        background-color: #f0f2f2;\n        color: #2c3132; }\n        .hero--lighter .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #f0f2f2;\n          opacity: 0.7; }\n      .hero--dark {\n        background-color: #2c3132;\n        color: #f0f2f2; }\n        .hero--dark .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #2c3132;\n          opacity: 0.7; }\n      .hero--darker {\n        background-color: #161819;\n        color: #f0f2f2; }\n        .hero--darker .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #161819;\n          opacity: 0.7; }\n      .hero--tertiary {\n        background-color: #002b45;\n        color: #f0f2f2; }\n        .hero--tertiary .hero__bg:before {\n          content: \"\";\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          background-color: #002b45;\n          opacity: 0.7; }\n      .hero--full-height {\n        height: 100vh;\n        min-height: 100vh; }\n\n    .flex {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex; }\n      .flex--inline {\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex; }\n      .flex--row {\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row; }\n      .flex--column {\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: column;\n                flex-direction: column; }\n\n    .jc-start,\n    .justify-content-start {\n      -webkit-box-pack: start;\n          -ms-flex-pack: start;\n              justify-content: flex-start; }\n\n    .jc-center,\n    .justify-content-center {\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    .jc-end,\n    .justify-content-end {\n      -webkit-box-pack: end;\n          -ms-flex-pack: end;\n              justify-content: flex-end; }\n\n    .jc-between,\n    .justify-content-between {\n      -webkit-box-pack: justify;\n          -ms-flex-pack: justify;\n              justify-content: space-between; }\n\n    .jc-around,\n    .justify-content-around {\n      -ms-flex-pack: distribute;\n          justify-content: space-around; }\n\n    .jc-evenly,\n    .justify-content-evenly {\n      -webkit-box-pack: space-evenly;\n          -ms-flex-pack: space-evenly;\n              justify-content: space-evenly; }\n\n    .ai-start,\n    .align-items-start {\n      -webkit-box-align: start;\n          -ms-flex-align: start;\n              align-items: flex-start; }\n\n    .ai-center,\n    .align-items-center {\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center; }\n\n    .ai-end,\n    .align-items-end {\n      -webkit-box-align: end;\n          -ms-flex-align: end;\n              align-items: flex-end; }\n\n    .ai-stretch,\n    .align-items-stretch {\n      -webkit-box-align: stretch;\n          -ms-flex-align: stretch;\n              align-items: stretch; }\n\n    .ai-baseline,\n    .align-items-baseline {\n      -webkit-box-align: baseline;\n          -ms-flex-align: baseline;\n              align-items: baseline; }\n\n    .form__label {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      font-weight: 500;\n      margin-bottom: 0.57143rem; }\n\n    .form__field {\n      margin-bottom: 1rem; }\n      .form__field--primary.form__label {\n        color: #007dbc; }\n      .form__field--primary.form .input,\n      .form__field--primary.form .select,\n      .form__field--primary.form .textarea {\n        border-color: #007dbc; }\n        .form__field--primary.form .input:hover,\n        .form__field--primary.form .select:hover,\n        .form__field--primary.form .textarea:hover {\n          border-color: #007dbc; }\n        .form__field--primary.form .input:focus,\n        .form__field--primary.form .select:focus,\n        .form__field--primary.form .textarea:focus {\n          border-color: #007dbc;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(0, 125, 188, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(0, 125, 188, 0.3); }\n      .form__field--secondary.form__label {\n        color: #81be41; }\n      .form__field--secondary.form .input,\n      .form__field--secondary.form .select,\n      .form__field--secondary.form .textarea {\n        border-color: #81be41; }\n        .form__field--secondary.form .input:hover,\n        .form__field--secondary.form .select:hover,\n        .form__field--secondary.form .textarea:hover {\n          border-color: #81be41; }\n        .form__field--secondary.form .input:focus,\n        .form__field--secondary.form .select:focus,\n        .form__field--secondary.form .textarea:focus {\n          border-color: #81be41;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(129, 190, 65, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(129, 190, 65, 0.3); }\n      .form__field--success.form__label {\n        color: #48a900; }\n      .form__field--success.form .input,\n      .form__field--success.form .select,\n      .form__field--success.form .textarea {\n        border-color: #48a900; }\n        .form__field--success.form .input:hover,\n        .form__field--success.form .select:hover,\n        .form__field--success.form .textarea:hover {\n          border-color: #48a900; }\n        .form__field--success.form .input:focus,\n        .form__field--success.form .select:focus,\n        .form__field--success.form .textarea:focus {\n          border-color: #48a900;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(72, 169, 0, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(72, 169, 0, 0.3); }\n      .form__field--warning.form__label {\n        color: #ebc500; }\n      .form__field--warning.form .input,\n      .form__field--warning.form .select,\n      .form__field--warning.form .textarea {\n        border-color: #ebc500; }\n        .form__field--warning.form .input:hover,\n        .form__field--warning.form .select:hover,\n        .form__field--warning.form .textarea:hover {\n          border-color: #ebc500; }\n        .form__field--warning.form .input:focus,\n        .form__field--warning.form .select:focus,\n        .form__field--warning.form .textarea:focus {\n          border-color: #ebc500;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(235, 197, 0, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(235, 197, 0, 0.3); }\n      .form__field--danger.form__label {\n        color: #e85915; }\n      .form__field--danger.form .input,\n      .form__field--danger.form .select,\n      .form__field--danger.form .textarea {\n        border-color: #e85915; }\n        .form__field--danger.form .input:hover,\n        .form__field--danger.form .select:hover,\n        .form__field--danger.form .textarea:hover {\n          border-color: #e85915; }\n        .form__field--danger.form .input:focus,\n        .form__field--danger.form .select:focus,\n        .form__field--danger.form .textarea:focus {\n          border-color: #e85915;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(232, 89, 21, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(232, 89, 21, 0.3); }\n      .form__field--info.form__label {\n        color: #1C415B; }\n      .form__field--info.form .input,\n      .form__field--info.form .select,\n      .form__field--info.form .textarea {\n        border-color: #1C415B; }\n        .form__field--info.form .input:hover,\n        .form__field--info.form .select:hover,\n        .form__field--info.form .textarea:hover {\n          border-color: #1C415B; }\n        .form__field--info.form .input:focus,\n        .form__field--info.form .select:focus,\n        .form__field--info.form .textarea:focus {\n          border-color: #1C415B;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(28, 65, 91, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(28, 65, 91, 0.3); }\n      .form__field--gray.form__label {\n        color: #6D7A7D; }\n      .form__field--gray.form .input,\n      .form__field--gray.form .select,\n      .form__field--gray.form .textarea {\n        border-color: #6D7A7D; }\n        .form__field--gray.form .input:hover,\n        .form__field--gray.form .select:hover,\n        .form__field--gray.form .textarea:hover {\n          border-color: #6D7A7D; }\n        .form__field--gray.form .input:focus,\n        .form__field--gray.form .select:focus,\n        .form__field--gray.form .textarea:focus {\n          border-color: #6D7A7D;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(109, 122, 125, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(109, 122, 125, 0.3); }\n      .form__field--light.form__label {\n        color: #e2e4e5; }\n      .form__field--light.form .input,\n      .form__field--light.form .select,\n      .form__field--light.form .textarea {\n        border-color: #e2e4e5; }\n        .form__field--light.form .input:hover,\n        .form__field--light.form .select:hover,\n        .form__field--light.form .textarea:hover {\n          border-color: #e2e4e5; }\n        .form__field--light.form .input:focus,\n        .form__field--light.form .select:focus,\n        .form__field--light.form .textarea:focus {\n          border-color: #e2e4e5;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(226, 228, 229, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(226, 228, 229, 0.3); }\n      .form__field--lighter.form__label {\n        color: #f0f2f2; }\n      .form__field--lighter.form .input,\n      .form__field--lighter.form .select,\n      .form__field--lighter.form .textarea {\n        border-color: #f0f2f2; }\n        .form__field--lighter.form .input:hover,\n        .form__field--lighter.form .select:hover,\n        .form__field--lighter.form .textarea:hover {\n          border-color: #f0f2f2; }\n        .form__field--lighter.form .input:focus,\n        .form__field--lighter.form .select:focus,\n        .form__field--lighter.form .textarea:focus {\n          border-color: #f0f2f2;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(240, 242, 242, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(240, 242, 242, 0.3); }\n      .form__field--dark.form__label {\n        color: #2c3132; }\n      .form__field--dark.form .input,\n      .form__field--dark.form .select,\n      .form__field--dark.form .textarea {\n        border-color: #2c3132; }\n        .form__field--dark.form .input:hover,\n        .form__field--dark.form .select:hover,\n        .form__field--dark.form .textarea:hover {\n          border-color: #2c3132; }\n        .form__field--dark.form .input:focus,\n        .form__field--dark.form .select:focus,\n        .form__field--dark.form .textarea:focus {\n          border-color: #2c3132;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(44, 49, 50, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(44, 49, 50, 0.3); }\n      .form__field--darker.form__label {\n        color: #161819; }\n      .form__field--darker.form .input,\n      .form__field--darker.form .select,\n      .form__field--darker.form .textarea {\n        border-color: #161819; }\n        .form__field--darker.form .input:hover,\n        .form__field--darker.form .select:hover,\n        .form__field--darker.form .textarea:hover {\n          border-color: #161819; }\n        .form__field--darker.form .input:focus,\n        .form__field--darker.form .select:focus,\n        .form__field--darker.form .textarea:focus {\n          border-color: #161819;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(22, 24, 25, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(22, 24, 25, 0.3); }\n      .form__field--tertiary.form__label {\n        color: #002b45; }\n      .form__field--tertiary.form .input,\n      .form__field--tertiary.form .select,\n      .form__field--tertiary.form .textarea {\n        border-color: #002b45; }\n        .form__field--tertiary.form .input:hover,\n        .form__field--tertiary.form .select:hover,\n        .form__field--tertiary.form .textarea:hover {\n          border-color: #002b45; }\n        .form__field--tertiary.form .input:focus,\n        .form__field--tertiary.form .select:focus,\n        .form__field--tertiary.form .textarea:focus {\n          border-color: #002b45;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(0, 43, 69, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(0, 43, 69, 0.3); }\n\n    .form__control {\n      position: relative;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: horizontal;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: row;\n              flex-direction: row;\n      width: 100%; }\n      .form__control > *:hover {\n        z-index: 2; }\n      .form__control > *:not(:last-child) {\n        margin-right: -1px; }\n      .form__control > *:first-child:not(:last-child),\n      .form__control > .select:first-child:not(:last-child) > select {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n      .form__control > *:not(:first-child):not(:last-child),\n      .form__control > .select:not(:first-child):not(:last-child) > select {\n        border-radius: 0; }\n      .form__control > *:last-child:not(:first-child),\n      .form__control > .select:last-child:not(:first-child) > select {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0; }\n\n    .alert {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      position: relative;\n      border-radius: 4px;\n      background-color: #f5e280;\n      color: #b09400; }\n      .alert--primary {\n        background-color: #80bede;\n        color: #005e8d; }\n      .alert--secondary {\n        background-color: #c0dfa0;\n        color: #618f31; }\n      .alert--success {\n        background-color: #a4d480;\n        color: #367f00; }\n      .alert--warning {\n        background-color: #f5e280;\n        color: #b09400; }\n      .alert--danger {\n        background-color: #f4ac8a;\n        color: #ae4310; }\n      .alert--info {\n        background-color: #8ea0ad;\n        color: #153144; }\n      .alert--gray {\n        background-color: #b6bdbe;\n        color: #525c5e; }\n      .alert--light {\n        background-color: #f1f2f2;\n        color: #aaabac; }\n      .alert--lighter {\n        background-color: #f8f9f9;\n        color: #b4b6b6; }\n      .alert--dark {\n        background-color: #969899;\n        color: #212526; }\n      .alert--darker {\n        background-color: #8b8c8c;\n        color: #111213; }\n      .alert--tertiary {\n        background-color: #8095a2;\n        color: #002034; }\n      .alert > * {\n        padding-top: 1rem;\n        padding-bottom: 1rem; }\n      .alert__body,\n      .alert > *:not(.alert__icon) {\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        padding-left: 1.5rem;\n        padding-right: 1.5rem; }\n      .alert__icon:first-child {\n        padding-left: 1rem; }\n      .alert__icon:last-child {\n        padding-right: 1rem; }\n\n    .article {\n      position: relative; }\n      .article .heading {\n        margin-bottom: 1rem; }\n\n    .title {\n      font-weight: 700; }\n\n    .subtitle {\n      font-weight: 400; }\n\n    .nav {\n      position: relative; }\n      .nav__list {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row; }\n      .nav__item {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        font-weight: 500;\n        padding-left: 1rem;\n        padding-right: 1rem; }\n      .nav__link {\n        display: block;\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        padding: 1rem;\n        margin-left: -1rem;\n        margin-right: -1rem; }\n        .nav__link:hover {\n          cursor: pointer;\n          color: #007dbc; }\n\n    .navbar {\n      position: relative;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n          -ms-flex-pack: justify;\n              justify-content: space-between;\n      height: 4em;\n      min-height: 4em;\n      -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      background: #f0f2f2; }\n      .navbar__block {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        height: 100%; }\n        .navbar__block--expanded {\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1; }\n        .navbar__block:not(:first-child):not(:only-child) {\n          padding-left: 0.8rem; }\n        .navbar__block:not(:last-child):not(:only-child) {\n          padding-right: 0.8rem; }\n        .navbar__block--start {\n          -webkit-box-pack: start;\n              -ms-flex-pack: start;\n                  justify-content: flex-start; }\n        .navbar__block--center {\n          -webkit-box-pack: center;\n              -ms-flex-pack: center;\n                  justify-content: center; }\n        .navbar__block--end {\n          -webkit-box-pack: end;\n              -ms-flex-pack: end;\n                  justify-content: flex-end; }\n      .navbar .nav {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        height: 100%; }\n        .navbar .nav .nav__link {\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          height: 100%;\n          -webkit-box-align: center;\n              -ms-flex-align: center;\n                  align-items: center;\n          padding-top: 0;\n          padding-bottom: 0;\n          color: #2c3132; }\n          .navbar .nav .nav__link:hover {\n            color: #007dbc; }\n      .navbar--primary {\n        background-color: #007dbc;\n        color: #f0f2f2; }\n        .navbar--primary .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--primary .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--secondary {\n        background-color: #81be41;\n        color: #f0f2f2; }\n        .navbar--secondary .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--secondary .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--success {\n        background-color: #48a900;\n        color: #f0f2f2; }\n        .navbar--success .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--success .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--warning {\n        background-color: #ebc500;\n        color: #f0f2f2; }\n        .navbar--warning .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--warning .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--danger {\n        background-color: #e85915;\n        color: #f0f2f2; }\n        .navbar--danger .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--danger .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--info {\n        background-color: #1C415B;\n        color: #f0f2f2; }\n        .navbar--info .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--info .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--gray {\n        background-color: #6D7A7D;\n        color: #f0f2f2; }\n        .navbar--gray .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--gray .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--light {\n        background-color: #e2e4e5;\n        color: #2c3132; }\n        .navbar--light .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(44, 49, 50, 0.7); }\n          .navbar--light .nav .nav__link:hover {\n            color: #2c3132; }\n      .navbar--lighter {\n        background-color: #f0f2f2;\n        color: #2c3132; }\n        .navbar--lighter .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(44, 49, 50, 0.7); }\n          .navbar--lighter .nav .nav__link:hover {\n            color: #2c3132; }\n      .navbar--dark {\n        background-color: #2c3132;\n        color: #f0f2f2; }\n        .navbar--dark .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--dark .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--darker {\n        background-color: #161819;\n        color: #f0f2f2; }\n        .navbar--darker .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--darker .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--tertiary {\n        background-color: #002b45;\n        color: #f0f2f2; }\n        .navbar--tertiary .nav .nav__link {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          color: rgba(240, 242, 242, 0.7); }\n          .navbar--tertiary .nav .nav__link:hover {\n            color: #f0f2f2; }\n      .navbar--x-small {\n        height: 2em;\n        min-height: 2em; }\n      .navbar--small {\n        height: 3em;\n        min-height: 3em; }\n      .navbar--base {\n        height: 4em;\n        min-height: 4em; }\n      .navbar--large {\n        height: 6em;\n        min-height: 6em; }\n      .navbar--x-large {\n        height: 8em;\n        min-height: 8em; }\n\n    .button {\n      position: relative;\n      font-weight: 500;\n      padding: 0.5em 1em;\n      background-color: #FFFFFF;\n      border-style: solid;\n      border-width: 1px;\n      border-color: #d3d7d8;\n      border-radius: 4px;\n      -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      color: #2c3132;\n      text-align: center;\n      white-space: nowrap;\n      vertical-align: middle;\n      outline: none;\n      cursor: pointer; }\n      .button:hover:not(:disabled), .button--hovered:not(:disabled) {\n        color: #007dbc;\n        border-color: #007dbc;\n        outline: none; }\n      .button:focus:not(:disabled):not(.button--clear), .button--focused:not(:disabled):not(.button--clear) {\n        color: #3397c9;\n        border-color: #3397c9;\n        -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n                box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n        outline: none; }\n      .button:active:not(:disabled), .button--active:not(:disabled) {\n        color: #004b71;\n        border-color: #004b71;\n        outline: none; }\n      .button:disabled, .button--disabled {\n        opacity: 0.5;\n        cursor: not-allowed; }\n      .button--primary {\n        background-color: #007dbc;\n        color: #f0f2f2;\n        border-color: #007dbc; }\n        .button--primary:hover:not(:disabled), .button--primary.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #3397c9;\n          border-color: #3397c9; }\n        .button--primary:focus:not(:disabled):not(.button--clear), .button--primary.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #3397c9;\n          border-color: #3397c9;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(0, 125, 188, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(0, 125, 188, 0.3); }\n        .button--primary:active:not(:disabled):not(.button--clear), .button--primary.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #006496;\n          border-color: #006496; }\n        .button--primary.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #0071a9; }\n        .button--primary.button--raised:hover:not(:disabled), .button--primary.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #007dbc; }\n        .button--primary.button--raised:focus:not(:disabled), .button--primary.button--raised.button--focus:not(:disabled) {\n          border-color: #1a8ac3;\n          border-bottom-width: 4px;\n          border-bottom-color: #0071a9;\n          background-color: #1a8ac3;\n          margin-top: 0px;\n          outline: none; }\n        .button--primary.button--raised:active:not(:disabled), .button--primary.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #006496;\n          background-color: #006496;\n          margin-top: 3px;\n          outline: none; }\n        .button--primary.button--outlined {\n          color: #007dbc;\n          background-color: transparent; }\n          .button--primary.button--outlined:hover:not(:disabled), .button--primary.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #1a8ac3;\n            border-color: #1a8ac3; }\n          .button--primary.button--outlined:focus:not(:disabled), .button--primary.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #1a8ac3;\n            border-color: #1a8ac3;\n            outline: none; }\n          .button--primary.button--outlined:active:not(:disabled), .button--primary.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #006496;\n            border-color: #006496; }\n      .button--secondary {\n        background-color: #81be41;\n        color: #f0f2f2;\n        border-color: #81be41; }\n        .button--secondary:hover:not(:disabled), .button--secondary.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #9acb67;\n          border-color: #9acb67; }\n        .button--secondary:focus:not(:disabled):not(.button--clear), .button--secondary.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #9acb67;\n          border-color: #9acb67;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(129, 190, 65, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(129, 190, 65, 0.3); }\n        .button--secondary:active:not(:disabled):not(.button--clear), .button--secondary.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #679834;\n          border-color: #679834; }\n        .button--secondary.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #74ab3b; }\n        .button--secondary.button--raised:hover:not(:disabled), .button--secondary.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #81be41; }\n        .button--secondary.button--raised:focus:not(:disabled), .button--secondary.button--raised.button--focus:not(:disabled) {\n          border-color: #8ec554;\n          border-bottom-width: 4px;\n          border-bottom-color: #74ab3b;\n          background-color: #8ec554;\n          margin-top: 0px;\n          outline: none; }\n        .button--secondary.button--raised:active:not(:disabled), .button--secondary.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #679834;\n          background-color: #679834;\n          margin-top: 3px;\n          outline: none; }\n        .button--secondary.button--outlined {\n          color: #81be41;\n          background-color: transparent; }\n          .button--secondary.button--outlined:hover:not(:disabled), .button--secondary.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #8ec554;\n            border-color: #8ec554; }\n          .button--secondary.button--outlined:focus:not(:disabled), .button--secondary.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #8ec554;\n            border-color: #8ec554;\n            outline: none; }\n          .button--secondary.button--outlined:active:not(:disabled), .button--secondary.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #679834;\n            border-color: #679834; }\n      .button--success {\n        background-color: #48a900;\n        color: #f0f2f2;\n        border-color: #48a900; }\n        .button--success:hover:not(:disabled), .button--success.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #6dba33;\n          border-color: #6dba33; }\n        .button--success:focus:not(:disabled):not(.button--clear), .button--success.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #6dba33;\n          border-color: #6dba33;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(72, 169, 0, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(72, 169, 0, 0.3); }\n        .button--success:active:not(:disabled):not(.button--clear), .button--success.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #3a8700;\n          border-color: #3a8700; }\n        .button--success.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #419800; }\n        .button--success.button--raised:hover:not(:disabled), .button--success.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #48a900; }\n        .button--success.button--raised:focus:not(:disabled), .button--success.button--raised.button--focus:not(:disabled) {\n          border-color: #5ab21a;\n          border-bottom-width: 4px;\n          border-bottom-color: #419800;\n          background-color: #5ab21a;\n          margin-top: 0px;\n          outline: none; }\n        .button--success.button--raised:active:not(:disabled), .button--success.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #3a8700;\n          background-color: #3a8700;\n          margin-top: 3px;\n          outline: none; }\n        .button--success.button--outlined {\n          color: #48a900;\n          background-color: transparent; }\n          .button--success.button--outlined:hover:not(:disabled), .button--success.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #5ab21a;\n            border-color: #5ab21a; }\n          .button--success.button--outlined:focus:not(:disabled), .button--success.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #5ab21a;\n            border-color: #5ab21a;\n            outline: none; }\n          .button--success.button--outlined:active:not(:disabled), .button--success.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #3a8700;\n            border-color: #3a8700; }\n      .button--warning {\n        background-color: #ebc500;\n        color: #f0f2f2;\n        border-color: #ebc500; }\n        .button--warning:hover:not(:disabled), .button--warning.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #efd133;\n          border-color: #efd133; }\n        .button--warning:focus:not(:disabled):not(.button--clear), .button--warning.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #efd133;\n          border-color: #efd133;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(235, 197, 0, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(235, 197, 0, 0.3); }\n        .button--warning:active:not(:disabled):not(.button--clear), .button--warning.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #bc9e00;\n          border-color: #bc9e00; }\n        .button--warning.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #d4b100; }\n        .button--warning.button--raised:hover:not(:disabled), .button--warning.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #ebc500; }\n        .button--warning.button--raised:focus:not(:disabled), .button--warning.button--raised.button--focus:not(:disabled) {\n          border-color: #edcb1a;\n          border-bottom-width: 4px;\n          border-bottom-color: #d4b100;\n          background-color: #edcb1a;\n          margin-top: 0px;\n          outline: none; }\n        .button--warning.button--raised:active:not(:disabled), .button--warning.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #bc9e00;\n          background-color: #bc9e00;\n          margin-top: 3px;\n          outline: none; }\n        .button--warning.button--outlined {\n          color: #ebc500;\n          background-color: transparent; }\n          .button--warning.button--outlined:hover:not(:disabled), .button--warning.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #edcb1a;\n            border-color: #edcb1a; }\n          .button--warning.button--outlined:focus:not(:disabled), .button--warning.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #edcb1a;\n            border-color: #edcb1a;\n            outline: none; }\n          .button--warning.button--outlined:active:not(:disabled), .button--warning.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #bc9e00;\n            border-color: #bc9e00; }\n      .button--danger {\n        background-color: #e85915;\n        color: #f0f2f2;\n        border-color: #e85915; }\n        .button--danger:hover:not(:disabled), .button--danger.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #ed7a44;\n          border-color: #ed7a44; }\n        .button--danger:focus:not(:disabled):not(.button--clear), .button--danger.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #ed7a44;\n          border-color: #ed7a44;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(232, 89, 21, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(232, 89, 21, 0.3); }\n        .button--danger:active:not(:disabled):not(.button--clear), .button--danger.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #ba4711;\n          border-color: #ba4711; }\n        .button--danger.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #d15013; }\n        .button--danger.button--raised:hover:not(:disabled), .button--danger.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #e85915; }\n        .button--danger.button--raised:focus:not(:disabled), .button--danger.button--raised.button--focus:not(:disabled) {\n          border-color: #ea6a2c;\n          border-bottom-width: 4px;\n          border-bottom-color: #d15013;\n          background-color: #ea6a2c;\n          margin-top: 0px;\n          outline: none; }\n        .button--danger.button--raised:active:not(:disabled), .button--danger.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #ba4711;\n          background-color: #ba4711;\n          margin-top: 3px;\n          outline: none; }\n        .button--danger.button--outlined {\n          color: #e85915;\n          background-color: transparent; }\n          .button--danger.button--outlined:hover:not(:disabled), .button--danger.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #ea6a2c;\n            border-color: #ea6a2c; }\n          .button--danger.button--outlined:focus:not(:disabled), .button--danger.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #ea6a2c;\n            border-color: #ea6a2c;\n            outline: none; }\n          .button--danger.button--outlined:active:not(:disabled), .button--danger.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #ba4711;\n            border-color: #ba4711; }\n      .button--info {\n        background-color: #1C415B;\n        color: #f0f2f2;\n        border-color: #1C415B; }\n        .button--info:hover:not(:disabled), .button--info.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #49677c;\n          border-color: #49677c; }\n        .button--info:focus:not(:disabled):not(.button--clear), .button--info.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #49677c;\n          border-color: #49677c;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(28, 65, 91, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(28, 65, 91, 0.3); }\n        .button--info:active:not(:disabled):not(.button--clear), .button--info.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #163449;\n          border-color: #163449; }\n        .button--info.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #193b52; }\n        .button--info.button--raised:hover:not(:disabled), .button--info.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #1C415B; }\n        .button--info.button--raised:focus:not(:disabled), .button--info.button--raised.button--focus:not(:disabled) {\n          border-color: #33546b;\n          border-bottom-width: 4px;\n          border-bottom-color: #193b52;\n          background-color: #33546b;\n          margin-top: 0px;\n          outline: none; }\n        .button--info.button--raised:active:not(:disabled), .button--info.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #163449;\n          background-color: #163449;\n          margin-top: 3px;\n          outline: none; }\n        .button--info.button--outlined {\n          color: #1C415B;\n          background-color: transparent; }\n          .button--info.button--outlined:hover:not(:disabled), .button--info.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #33546b;\n            border-color: #33546b; }\n          .button--info.button--outlined:focus:not(:disabled), .button--info.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #33546b;\n            border-color: #33546b;\n            outline: none; }\n          .button--info.button--outlined:active:not(:disabled), .button--info.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #163449;\n            border-color: #163449; }\n      .button--gray {\n        background-color: #6D7A7D;\n        color: #f0f2f2;\n        border-color: #6D7A7D; }\n        .button--gray:hover:not(:disabled), .button--gray.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #8a9597;\n          border-color: #8a9597; }\n        .button--gray:focus:not(:disabled):not(.button--clear), .button--gray.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #8a9597;\n          border-color: #8a9597;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(109, 122, 125, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(109, 122, 125, 0.3); }\n        .button--gray:active:not(:disabled):not(.button--clear), .button--gray.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #576264;\n          border-color: #576264; }\n        .button--gray.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #626e71; }\n        .button--gray.button--raised:hover:not(:disabled), .button--gray.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #6D7A7D; }\n        .button--gray.button--raised:focus:not(:disabled), .button--gray.button--raised.button--focus:not(:disabled) {\n          border-color: #7c878a;\n          border-bottom-width: 4px;\n          border-bottom-color: #626e71;\n          background-color: #7c878a;\n          margin-top: 0px;\n          outline: none; }\n        .button--gray.button--raised:active:not(:disabled), .button--gray.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #576264;\n          background-color: #576264;\n          margin-top: 3px;\n          outline: none; }\n        .button--gray.button--outlined {\n          color: #6D7A7D;\n          background-color: transparent; }\n          .button--gray.button--outlined:hover:not(:disabled), .button--gray.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #7c878a;\n            border-color: #7c878a; }\n          .button--gray.button--outlined:focus:not(:disabled), .button--gray.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #7c878a;\n            border-color: #7c878a;\n            outline: none; }\n          .button--gray.button--outlined:active:not(:disabled), .button--gray.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #576264;\n            border-color: #576264; }\n      .button--light {\n        background-color: #e2e4e5;\n        color: #2c3132;\n        border-color: #e2e4e5; }\n        .button--light:hover:not(:disabled), .button--light.button--hovered:not(:disabled) {\n          color: #2c3132;\n          background-color: #e8e9ea;\n          border-color: #e8e9ea; }\n        .button--light:focus:not(:disabled):not(.button--clear), .button--light.button--focused:not(:disabled) {\n          color: #2c3132;\n          background-color: #e8e9ea;\n          border-color: #e8e9ea;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(226, 228, 229, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(226, 228, 229, 0.3); }\n        .button--light:active:not(:disabled):not(.button--clear), .button--light.button--active:not(:disabled) {\n          color: #2c3132;\n          background-color: #b5b6b7;\n          border-color: #b5b6b7; }\n        .button--light.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #cbcdce; }\n        .button--light.button--raised:hover:not(:disabled), .button--light.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #e2e4e5; }\n        .button--light.button--raised:focus:not(:disabled), .button--light.button--raised.button--focus:not(:disabled) {\n          border-color: #e5e7e8;\n          border-bottom-width: 4px;\n          border-bottom-color: #cbcdce;\n          background-color: #e5e7e8;\n          margin-top: 0px;\n          outline: none; }\n        .button--light.button--raised:active:not(:disabled), .button--light.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #b5b6b7;\n          background-color: #b5b6b7;\n          margin-top: 3px;\n          outline: none; }\n        .button--light.button--outlined {\n          color: #e2e4e5;\n          background-color: transparent; }\n          .button--light.button--outlined:hover:not(:disabled), .button--light.button--outlined.button--hovered:not(:disabled) {\n            color: #2c3132;\n            background-color: #e5e7e8;\n            border-color: #e5e7e8; }\n          .button--light.button--outlined:focus:not(:disabled), .button--light.button--outlined.button--focused:not(:disabled) {\n            color: #2c3132;\n            background-color: #e5e7e8;\n            border-color: #e5e7e8;\n            outline: none; }\n          .button--light.button--outlined:active:not(:disabled), .button--light.button--outlined.button--active:not(:disabled) {\n            color: #2c3132;\n            background-color: #b5b6b7;\n            border-color: #b5b6b7; }\n      .button--lighter {\n        background-color: #f0f2f2;\n        color: #2c3132;\n        border-color: #f0f2f2; }\n        .button--lighter:hover:not(:disabled), .button--lighter.button--hovered:not(:disabled) {\n          color: #2c3132;\n          background-color: #f3f5f5;\n          border-color: #f3f5f5; }\n        .button--lighter:focus:not(:disabled):not(.button--clear), .button--lighter.button--focused:not(:disabled) {\n          color: #2c3132;\n          background-color: #f3f5f5;\n          border-color: #f3f5f5;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(240, 242, 242, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(240, 242, 242, 0.3); }\n        .button--lighter:active:not(:disabled):not(.button--clear), .button--lighter.button--active:not(:disabled) {\n          color: #2c3132;\n          background-color: #c0c2c2;\n          border-color: #c0c2c2; }\n        .button--lighter.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #d8dada; }\n        .button--lighter.button--raised:hover:not(:disabled), .button--lighter.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #f0f2f2; }\n        .button--lighter.button--raised:focus:not(:disabled), .button--lighter.button--raised.button--focus:not(:disabled) {\n          border-color: #f2f3f3;\n          border-bottom-width: 4px;\n          border-bottom-color: #d8dada;\n          background-color: #f2f3f3;\n          margin-top: 0px;\n          outline: none; }\n        .button--lighter.button--raised:active:not(:disabled), .button--lighter.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #c0c2c2;\n          background-color: #c0c2c2;\n          margin-top: 3px;\n          outline: none; }\n        .button--lighter.button--outlined {\n          color: #f0f2f2;\n          background-color: transparent; }\n          .button--lighter.button--outlined:hover:not(:disabled), .button--lighter.button--outlined.button--hovered:not(:disabled) {\n            color: #2c3132;\n            background-color: #f2f3f3;\n            border-color: #f2f3f3; }\n          .button--lighter.button--outlined:focus:not(:disabled), .button--lighter.button--outlined.button--focused:not(:disabled) {\n            color: #2c3132;\n            background-color: #f2f3f3;\n            border-color: #f2f3f3;\n            outline: none; }\n          .button--lighter.button--outlined:active:not(:disabled), .button--lighter.button--outlined.button--active:not(:disabled) {\n            color: #2c3132;\n            background-color: #c0c2c2;\n            border-color: #c0c2c2; }\n      .button--dark {\n        background-color: #2c3132;\n        color: #f0f2f2;\n        border-color: #2c3132; }\n        .button--dark:hover:not(:disabled), .button--dark.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #565a5b;\n          border-color: #565a5b; }\n        .button--dark:focus:not(:disabled):not(.button--clear), .button--dark.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #565a5b;\n          border-color: #565a5b;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(44, 49, 50, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(44, 49, 50, 0.3); }\n        .button--dark:active:not(:disabled):not(.button--clear), .button--dark.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #232728;\n          border-color: #232728; }\n        .button--dark.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #282c2d; }\n        .button--dark.button--raised:hover:not(:disabled), .button--dark.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #2c3132; }\n        .button--dark.button--raised:focus:not(:disabled), .button--dark.button--raised.button--focus:not(:disabled) {\n          border-color: #414647;\n          border-bottom-width: 4px;\n          border-bottom-color: #282c2d;\n          background-color: #414647;\n          margin-top: 0px;\n          outline: none; }\n        .button--dark.button--raised:active:not(:disabled), .button--dark.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #232728;\n          background-color: #232728;\n          margin-top: 3px;\n          outline: none; }\n        .button--dark.button--outlined {\n          color: #2c3132;\n          background-color: transparent; }\n          .button--dark.button--outlined:hover:not(:disabled), .button--dark.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #414647;\n            border-color: #414647; }\n          .button--dark.button--outlined:focus:not(:disabled), .button--dark.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #414647;\n            border-color: #414647;\n            outline: none; }\n          .button--dark.button--outlined:active:not(:disabled), .button--dark.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #232728;\n            border-color: #232728; }\n      .button--darker {\n        background-color: #161819;\n        color: #f0f2f2;\n        border-color: #161819; }\n        .button--darker:hover:not(:disabled), .button--darker.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #454647;\n          border-color: #454647; }\n        .button--darker:focus:not(:disabled):not(.button--clear), .button--darker.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #454647;\n          border-color: #454647;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(22, 24, 25, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(22, 24, 25, 0.3); }\n        .button--darker:active:not(:disabled):not(.button--clear), .button--darker.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #121314;\n          border-color: #121314; }\n        .button--darker.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #141617; }\n        .button--darker.button--raised:hover:not(:disabled), .button--darker.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #161819; }\n        .button--darker.button--raised:focus:not(:disabled), .button--darker.button--raised.button--focus:not(:disabled) {\n          border-color: #2d2f30;\n          border-bottom-width: 4px;\n          border-bottom-color: #141617;\n          background-color: #2d2f30;\n          margin-top: 0px;\n          outline: none; }\n        .button--darker.button--raised:active:not(:disabled), .button--darker.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #121314;\n          background-color: #121314;\n          margin-top: 3px;\n          outline: none; }\n        .button--darker.button--outlined {\n          color: #161819;\n          background-color: transparent; }\n          .button--darker.button--outlined:hover:not(:disabled), .button--darker.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #2d2f30;\n            border-color: #2d2f30; }\n          .button--darker.button--outlined:focus:not(:disabled), .button--darker.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #2d2f30;\n            border-color: #2d2f30;\n            outline: none; }\n          .button--darker.button--outlined:active:not(:disabled), .button--darker.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #121314;\n            border-color: #121314; }\n      .button--tertiary {\n        background-color: #002b45;\n        color: #f0f2f2;\n        border-color: #002b45; }\n        .button--tertiary:hover:not(:disabled), .button--tertiary.button--hovered:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #33556a;\n          border-color: #33556a; }\n        .button--tertiary:focus:not(:disabled):not(.button--clear), .button--tertiary.button--focused:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #33556a;\n          border-color: #33556a;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(0, 43, 69, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(0, 43, 69, 0.3); }\n        .button--tertiary:active:not(:disabled):not(.button--clear), .button--tertiary.button--active:not(:disabled) {\n          color: #f0f2f2;\n          background-color: #002237;\n          border-color: #002237; }\n        .button--tertiary.button--raised:not(:disabled) {\n          border-bottom-width: 4px;\n          border-bottom-color: #00273e; }\n        .button--tertiary.button--raised:hover:not(:disabled), .button--tertiary.button--raised.button--hovered:not(:disabled) {\n          border-bottom-color: #002b45; }\n        .button--tertiary.button--raised:focus:not(:disabled), .button--tertiary.button--raised.button--focus:not(:disabled) {\n          border-color: #1a4058;\n          border-bottom-width: 4px;\n          border-bottom-color: #00273e;\n          background-color: #1a4058;\n          margin-top: 0px;\n          outline: none; }\n        .button--tertiary.button--raised:active:not(:disabled), .button--tertiary.button--raised.button--active:not(:disabled) {\n          border-bottom-width: 1px;\n          border-bottom-color: #002237;\n          background-color: #002237;\n          margin-top: 3px;\n          outline: none; }\n        .button--tertiary.button--outlined {\n          color: #002b45;\n          background-color: transparent; }\n          .button--tertiary.button--outlined:hover:not(:disabled), .button--tertiary.button--outlined.button--hovered:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #1a4058;\n            border-color: #1a4058; }\n          .button--tertiary.button--outlined:focus:not(:disabled), .button--tertiary.button--outlined.button--focused:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #1a4058;\n            border-color: #1a4058;\n            outline: none; }\n          .button--tertiary.button--outlined:active:not(:disabled), .button--tertiary.button--outlined.button--active:not(:disabled) {\n            color: #f0f2f2;\n            background-color: #002237;\n            border-color: #002237; }\n      .button--x-small {\n        font-size: 0.64815rem;\n        padding: 0.25em 0.5em; }\n      .button--small {\n        font-size: 0.76087rem;\n        padding: 0.375em 0.75em; }\n      .button--base {\n        font-size: 0.875rem;\n        padding: 0.5em 1em; }\n      .button--large {\n        font-size: 1.09375rem;\n        padding: 0.625em 1.25em; }\n      .button--x-large {\n        font-size: 1.3125rem;\n        padding: 0.75em 1.5em; }\n      .button--clear {\n        border: none;\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        color: #007dbc; }\n        .button--clear:hover:not(:disabled) {\n          color: #006496;\n          text-decoration: underline; }\n      .button--pill {\n        border-radius: 50px; }\n      .button--full-width {\n        width: 100%; }\n\n    .input,\n    .textarea {\n      width: 100%; }\n\n    .input,\n    .select > select,\n    .textarea {\n      padding: 0.8rem 1rem;\n      position: relative;\n      -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      font-size: 0.875rem;\n      background-color: #FFFFFF;\n      color: #2c3132;\n      border-style: solid;\n      border-width: 1px;\n      border-color: #e2e4e5;\n      border-radius: 4px;\n      outline: none;\n      white-space: normal; }\n      .input:focus,\n      .select > select:focus,\n      .textarea:focus {\n        border-color: #007dbc;\n        -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n                box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3); }\n      .input:disabled,\n      .select > select:disabled,\n      .textarea:disabled {\n        background-color: #f0f2f2;\n        cursor: not-allowed; }\n      .input:hover:not(:disabled),\n      .select > select:hover:not(:disabled),\n      .textarea:hover:not(:disabled) {\n        border-color: #3397c9; }\n      .input--primary,\n      .select > select--primary,\n      .textarea--primary {\n        border-color: #3397c9; }\n        .input--primary:not(:disabled):hover,\n        .select > select--primary:not(:disabled):hover,\n        .textarea--primary:not(:disabled):hover {\n          border-color: #1a8ac3; }\n        .input--primary:focus,\n        .select > select--primary:focus,\n        .textarea--primary:focus {\n          border-color: #007dbc;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3); }\n      .input--secondary,\n      .select > select--secondary,\n      .textarea--secondary {\n        border-color: #9acb67; }\n        .input--secondary:not(:disabled):hover,\n        .select > select--secondary:not(:disabled):hover,\n        .textarea--secondary:not(:disabled):hover {\n          border-color: #8ec554; }\n        .input--secondary:focus,\n        .select > select--secondary:focus,\n        .textarea--secondary:focus {\n          border-color: #81be41;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(148, 200, 94, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(148, 200, 94, 0.3); }\n      .input--success,\n      .select > select--success,\n      .textarea--success {\n        border-color: #6dba33; }\n        .input--success:not(:disabled):hover,\n        .select > select--success:not(:disabled):hover,\n        .textarea--success:not(:disabled):hover {\n          border-color: #5ab21a; }\n        .input--success:focus,\n        .select > select--success:focus,\n        .textarea--success:focus {\n          border-color: #48a900;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(99, 182, 38, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(99, 182, 38, 0.3); }\n      .input--warning,\n      .select > select--warning,\n      .textarea--warning {\n        border-color: #efd133; }\n        .input--warning:not(:disabled):hover,\n        .select > select--warning:not(:disabled):hover,\n        .textarea--warning:not(:disabled):hover {\n          border-color: #edcb1a; }\n        .input--warning:focus,\n        .select > select--warning:focus,\n        .textarea--warning:focus {\n          border-color: #ebc500;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(238, 206, 38, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(238, 206, 38, 0.3); }\n      .input--danger,\n      .select > select--danger,\n      .textarea--danger {\n        border-color: #ed7a44; }\n        .input--danger:not(:disabled):hover,\n        .select > select--danger:not(:disabled):hover,\n        .textarea--danger:not(:disabled):hover {\n          border-color: #ea6a2c; }\n        .input--danger:focus,\n        .select > select--danger:focus,\n        .textarea--danger:focus {\n          border-color: #e85915;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(235, 114, 56, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(235, 114, 56, 0.3); }\n      .input--info,\n      .select > select--info,\n      .textarea--info {\n        border-color: #49677c; }\n        .input--info:not(:disabled):hover,\n        .select > select--info:not(:disabled):hover,\n        .textarea--info:not(:disabled):hover {\n          border-color: #33546b; }\n        .input--info:focus,\n        .select > select--info:focus,\n        .textarea--info:focus {\n          border-color: #1C415B;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(62, 94, 116, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(62, 94, 116, 0.3); }\n      .input--gray,\n      .select > select--gray,\n      .textarea--gray {\n        border-color: #8a9597; }\n        .input--gray:not(:disabled):hover,\n        .select > select--gray:not(:disabled):hover,\n        .textarea--gray:not(:disabled):hover {\n          border-color: #7c878a; }\n        .input--gray:focus,\n        .select > select--gray:focus,\n        .textarea--gray:focus {\n          border-color: #6D7A7D;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(131, 142, 145, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(131, 142, 145, 0.3); }\n      .input--light,\n      .select > select--light,\n      .textarea--light {\n        border-color: #e8e9ea; }\n        .input--light:not(:disabled):hover,\n        .select > select--light:not(:disabled):hover,\n        .textarea--light:not(:disabled):hover {\n          border-color: #e5e7e8; }\n        .input--light:focus,\n        .select > select--light:focus,\n        .textarea--light:focus {\n          border-color: #e2e4e5;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(230, 232, 233, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(230, 232, 233, 0.3); }\n      .input--lighter,\n      .select > select--lighter,\n      .textarea--lighter {\n        border-color: #f3f5f5; }\n        .input--lighter:not(:disabled):hover,\n        .select > select--lighter:not(:disabled):hover,\n        .textarea--lighter:not(:disabled):hover {\n          border-color: #f2f3f3; }\n        .input--lighter:focus,\n        .select > select--lighter:focus,\n        .textarea--lighter:focus {\n          border-color: #f0f2f2;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(242, 244, 244, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(242, 244, 244, 0.3); }\n      .input--dark,\n      .select > select--dark,\n      .textarea--dark {\n        border-color: #565a5b; }\n        .input--dark:not(:disabled):hover,\n        .select > select--dark:not(:disabled):hover,\n        .textarea--dark:not(:disabled):hover {\n          border-color: #414647; }\n        .input--dark:focus,\n        .select > select--dark:focus,\n        .textarea--dark:focus {\n          border-color: #2c3132;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(76, 80, 81, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(76, 80, 81, 0.3); }\n      .input--darker,\n      .select > select--darker,\n      .textarea--darker {\n        border-color: #454647; }\n        .input--darker:not(:disabled):hover,\n        .select > select--darker:not(:disabled):hover,\n        .textarea--darker:not(:disabled):hover {\n          border-color: #2d2f30; }\n        .input--darker:focus,\n        .select > select--darker:focus,\n        .textarea--darker:focus {\n          border-color: #161819;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(57, 59, 60, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(57, 59, 60, 0.3); }\n      .input--tertiary,\n      .select > select--tertiary,\n      .textarea--tertiary {\n        border-color: #33556a; }\n        .input--tertiary:not(:disabled):hover,\n        .select > select--tertiary:not(:disabled):hover,\n        .textarea--tertiary:not(:disabled):hover {\n          border-color: #1a4058; }\n        .input--tertiary:focus,\n        .select > select--tertiary:focus,\n        .textarea--tertiary:focus {\n          border-color: #002b45;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 75, 97, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(38, 75, 97, 0.3); }\n      .input--xx-small,\n      .select > select--xx-small,\n      .textarea--xx-small {\n        font-size: 0.5rem;\n        padding: 0.4rem; }\n      .input--x-small,\n      .select > select--x-small,\n      .textarea--x-small {\n        font-size: 0.64815rem;\n        padding: 0.57143rem; }\n      .input--small,\n      .select > select--small,\n      .textarea--small {\n        font-size: 0.76087rem;\n        padding: 0.8rem; }\n      .input--base,\n      .select > select--base,\n      .textarea--base {\n        font-size: 0.875rem;\n        padding: 1rem; }\n      .input--large,\n      .select > select--large,\n      .textarea--large {\n        font-size: 1.09375rem;\n        padding: 1.5rem; }\n      .input--x-large,\n      .select > select--x-large,\n      .textarea--x-large {\n        font-size: 1.3125rem;\n        padding: 2rem; }\n      .input--xx-large,\n      .select > select--xx-large,\n      .textarea--xx-large {\n        font-size: 1.75rem;\n        padding: 3rem; }\n      .input--pill,\n      .select > select--pill,\n      .textarea--pill {\n        border-radius: 50px; }\n\n    .select {\n      position: relative; }\n      .select--expanded {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1; }\n        .select--expanded > select {\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-flex: 1;\n              -ms-flex-positive: 1;\n                  flex-grow: 1; }\n      .select > select {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        padding-right: 3em;\n        cursor: pointer; }\n      .select:after {\n        content: \"\\f078\";\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        font-family: \"Font Awesome 5 Free\";\n        font-weight: 900;\n        position: absolute;\n        pointer-events: none;\n        right: 1rem;\n        top: 50%;\n        -webkit-transform: translateY(-50%);\n                transform: translateY(-50%);\n        line-height: 0;\n        color: #6D7A7D;\n        z-index: 5; }\n      .select:focus-within:after {\n        -webkit-transform: rotate(180deg) translateY(-50%);\n                transform: rotate(180deg) translateY(-50%);\n        color: #007dbc; }\n\n    .input-set {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: horizontal;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: row;\n              flex-direction: row;\n      -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n      border-style: solid;\n      border-width: 1px;\n      border-color: #e2e4e5;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      overflow: hidden;\n      width: 100%; }\n      .input-set:hover {\n        border-color: #3397c9; }\n      .input-set:focus-within {\n        -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n                box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n        border-color: #007dbc; }\n        .input-set:focus-within .input-set__icon > .icon {\n          color: #007dbc; }\n        .input-set:focus-within .input-set__extra {\n          background-color: #007dbc;\n          color: #f0f2f2; }\n      .input-set--primary {\n        border-color: #007dbc; }\n        .input-set--primary .input-set__icon > .icon {\n          color: #007dbc; }\n        .input-set--primary .input-set__extra {\n          background-color: #007dbc;\n          color: #f0f2f2; }\n        .input-set--primary:hover {\n          border-color: #007dbc; }\n        .input-set--primary:focus-within {\n          border-color: #007dbc;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(38, 145, 198, 0.3); }\n          .input-set--primary:focus-within .input-set__icon > .icon {\n            color: #007dbc; }\n          .input-set--primary:focus-within .input-set__extra {\n            background-color: #007dbc;\n            color: #f0f2f2; }\n      .input-set--secondary {\n        border-color: #81be41; }\n        .input-set--secondary .input-set__icon > .icon {\n          color: #81be41; }\n        .input-set--secondary .input-set__extra {\n          background-color: #81be41;\n          color: #f0f2f2; }\n        .input-set--secondary:hover {\n          border-color: #81be41; }\n        .input-set--secondary:focus-within {\n          border-color: #81be41;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(148, 200, 94, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(148, 200, 94, 0.3); }\n          .input-set--secondary:focus-within .input-set__icon > .icon {\n            color: #81be41; }\n          .input-set--secondary:focus-within .input-set__extra {\n            background-color: #81be41;\n            color: #f0f2f2; }\n      .input-set--success {\n        border-color: #48a900; }\n        .input-set--success .input-set__icon > .icon {\n          color: #48a900; }\n        .input-set--success .input-set__extra {\n          background-color: #48a900;\n          color: #f0f2f2; }\n        .input-set--success:hover {\n          border-color: #48a900; }\n        .input-set--success:focus-within {\n          border-color: #48a900;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(99, 182, 38, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(99, 182, 38, 0.3); }\n          .input-set--success:focus-within .input-set__icon > .icon {\n            color: #48a900; }\n          .input-set--success:focus-within .input-set__extra {\n            background-color: #48a900;\n            color: #f0f2f2; }\n      .input-set--warning {\n        border-color: #ebc500; }\n        .input-set--warning .input-set__icon > .icon {\n          color: #ebc500; }\n        .input-set--warning .input-set__extra {\n          background-color: #ebc500;\n          color: #f0f2f2; }\n        .input-set--warning:hover {\n          border-color: #ebc500; }\n        .input-set--warning:focus-within {\n          border-color: #ebc500;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(238, 206, 38, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(238, 206, 38, 0.3); }\n          .input-set--warning:focus-within .input-set__icon > .icon {\n            color: #ebc500; }\n          .input-set--warning:focus-within .input-set__extra {\n            background-color: #ebc500;\n            color: #f0f2f2; }\n      .input-set--danger {\n        border-color: #e85915; }\n        .input-set--danger .input-set__icon > .icon {\n          color: #e85915; }\n        .input-set--danger .input-set__extra {\n          background-color: #e85915;\n          color: #f0f2f2; }\n        .input-set--danger:hover {\n          border-color: #e85915; }\n        .input-set--danger:focus-within {\n          border-color: #e85915;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(235, 114, 56, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(235, 114, 56, 0.3); }\n          .input-set--danger:focus-within .input-set__icon > .icon {\n            color: #e85915; }\n          .input-set--danger:focus-within .input-set__extra {\n            background-color: #e85915;\n            color: #f0f2f2; }\n      .input-set--info {\n        border-color: #1C415B; }\n        .input-set--info .input-set__icon > .icon {\n          color: #1C415B; }\n        .input-set--info .input-set__extra {\n          background-color: #1C415B;\n          color: #f0f2f2; }\n        .input-set--info:hover {\n          border-color: #1C415B; }\n        .input-set--info:focus-within {\n          border-color: #1C415B;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(62, 94, 116, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(62, 94, 116, 0.3); }\n          .input-set--info:focus-within .input-set__icon > .icon {\n            color: #1C415B; }\n          .input-set--info:focus-within .input-set__extra {\n            background-color: #1C415B;\n            color: #f0f2f2; }\n      .input-set--gray {\n        border-color: #6D7A7D; }\n        .input-set--gray .input-set__icon > .icon {\n          color: #6D7A7D; }\n        .input-set--gray .input-set__extra {\n          background-color: #6D7A7D;\n          color: #f0f2f2; }\n        .input-set--gray:hover {\n          border-color: #6D7A7D; }\n        .input-set--gray:focus-within {\n          border-color: #6D7A7D;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(131, 142, 145, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(131, 142, 145, 0.3); }\n          .input-set--gray:focus-within .input-set__icon > .icon {\n            color: #6D7A7D; }\n          .input-set--gray:focus-within .input-set__extra {\n            background-color: #6D7A7D;\n            color: #f0f2f2; }\n      .input-set--light {\n        border-color: #e2e4e5; }\n        .input-set--light .input-set__icon > .icon {\n          color: #e2e4e5; }\n        .input-set--light .input-set__extra {\n          background-color: #e2e4e5;\n          color: #2c3132; }\n        .input-set--light:hover {\n          border-color: #e2e4e5; }\n        .input-set--light:focus-within {\n          border-color: #e2e4e5;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(230, 232, 233, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(230, 232, 233, 0.3); }\n          .input-set--light:focus-within .input-set__icon > .icon {\n            color: #e2e4e5; }\n          .input-set--light:focus-within .input-set__extra {\n            background-color: #e2e4e5;\n            color: #2c3132; }\n      .input-set--lighter {\n        border-color: #f0f2f2; }\n        .input-set--lighter .input-set__icon > .icon {\n          color: #f0f2f2; }\n        .input-set--lighter .input-set__extra {\n          background-color: #f0f2f2;\n          color: #2c3132; }\n        .input-set--lighter:hover {\n          border-color: #f0f2f2; }\n        .input-set--lighter:focus-within {\n          border-color: #f0f2f2;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(242, 244, 244, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(242, 244, 244, 0.3); }\n          .input-set--lighter:focus-within .input-set__icon > .icon {\n            color: #f0f2f2; }\n          .input-set--lighter:focus-within .input-set__extra {\n            background-color: #f0f2f2;\n            color: #2c3132; }\n      .input-set--dark {\n        border-color: #2c3132; }\n        .input-set--dark .input-set__icon > .icon {\n          color: #2c3132; }\n        .input-set--dark .input-set__extra {\n          background-color: #2c3132;\n          color: #f0f2f2; }\n        .input-set--dark:hover {\n          border-color: #2c3132; }\n        .input-set--dark:focus-within {\n          border-color: #2c3132;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(76, 80, 81, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(76, 80, 81, 0.3); }\n          .input-set--dark:focus-within .input-set__icon > .icon {\n            color: #2c3132; }\n          .input-set--dark:focus-within .input-set__extra {\n            background-color: #2c3132;\n            color: #f0f2f2; }\n      .input-set--darker {\n        border-color: #161819; }\n        .input-set--darker .input-set__icon > .icon {\n          color: #161819; }\n        .input-set--darker .input-set__extra {\n          background-color: #161819;\n          color: #f0f2f2; }\n        .input-set--darker:hover {\n          border-color: #161819; }\n        .input-set--darker:focus-within {\n          border-color: #161819;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(57, 59, 60, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(57, 59, 60, 0.3); }\n          .input-set--darker:focus-within .input-set__icon > .icon {\n            color: #161819; }\n          .input-set--darker:focus-within .input-set__extra {\n            background-color: #161819;\n            color: #f0f2f2; }\n      .input-set--tertiary {\n        border-color: #002b45; }\n        .input-set--tertiary .input-set__icon > .icon {\n          color: #002b45; }\n        .input-set--tertiary .input-set__extra {\n          background-color: #002b45;\n          color: #f0f2f2; }\n        .input-set--tertiary:hover {\n          border-color: #002b45; }\n        .input-set--tertiary:focus-within {\n          border-color: #002b45;\n          -webkit-box-shadow: 0 0 0.3em 0.2em rgba(38, 75, 97, 0.3);\n                  box-shadow: 0 0 0.3em 0.2em rgba(38, 75, 97, 0.3); }\n          .input-set--tertiary:focus-within .input-set__icon > .icon {\n            color: #002b45; }\n          .input-set--tertiary:focus-within .input-set__extra {\n            background-color: #002b45;\n            color: #f0f2f2; }\n      .input-set__extra {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        padding-left: 1rem;\n        padding-right: 1rem;\n        background-color: #e2e4e5; }\n      .input-set__icon {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83); }\n        .input-set__icon > .icon {\n          color: #6D7A7D; }\n        .input-set__icon:first-child {\n          padding-left: 1rem; }\n        .input-set__icon:last-child {\n          padding-right: 1rem; }\n      .input-set > .input,\n      .input-set > .select {\n        border: none;\n        -webkit-box-shadow: none;\n                box-shadow: none; }\n\n    .card, .tnk-card {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative;\n      background-color: #FFFFFF;\n      border-radius: 4px;\n      border: solid 1px #e2e4e5;\n      word-wrap: break-word;\n      overflow: hidden; }\n      .card__header, .tnk-card .tnk-card__header, .card__body, .tnk-card .tnk-card__body, .card__footer, .tnk-card .tnk-card__footer {\n        padding: 1rem; }\n      .card__header, .tnk-card .tnk-card__header {\n        border-bottom: solid 1px #e2e4e5; }\n        .card__header--primary {\n          background-color: #007dbc;\n          border: solid 1px #007dbc;\n          color: #f0f2f2; }\n        .card__header--secondary {\n          background-color: #81be41;\n          border: solid 1px #81be41;\n          color: #f0f2f2; }\n        .card__header--success {\n          background-color: #48a900;\n          border: solid 1px #48a900;\n          color: #f0f2f2; }\n        .card__header--warning {\n          background-color: #ebc500;\n          border: solid 1px #ebc500;\n          color: #f0f2f2; }\n        .card__header--danger {\n          background-color: #e85915;\n          border: solid 1px #e85915;\n          color: #f0f2f2; }\n        .card__header--info {\n          background-color: #1C415B;\n          border: solid 1px #1C415B;\n          color: #f0f2f2; }\n        .card__header--gray {\n          background-color: #6D7A7D;\n          border: solid 1px #6D7A7D;\n          color: #f0f2f2; }\n        .card__header--light {\n          background-color: #e2e4e5;\n          border: solid 1px #e2e4e5;\n          color: #2c3132; }\n        .card__header--lighter {\n          background-color: #f0f2f2;\n          border: solid 1px #f0f2f2;\n          color: #2c3132; }\n        .card__header--dark {\n          background-color: #2c3132;\n          border: solid 1px #2c3132;\n          color: #f0f2f2; }\n        .card__header--darker {\n          background-color: #161819;\n          border: solid 1px #161819;\n          color: #f0f2f2; }\n        .card__header--tertiary {\n          background-color: #002b45;\n          border: solid 1px #002b45;\n          color: #f0f2f2; }\n      .card .card__image, .tnk-card .card__image {\n        position: relative;\n        height: 200px;\n        min-height: 200px;\n        overflow: hidden; }\n        .card .card__image > img, .tnk-card .card__image > img {\n          height: 100%;\n          width: 100%;\n          -o-object-fit: cover;\n             object-fit: cover;\n          -o-object-position: center;\n             object-position: center; }\n      .card--primary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #007dbc;\n        color: #f0f2f2;\n        border: solid 1px #0071a9;\n        overflow: hidden; }\n        .card--primary.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--primary.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #007dbc;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--primary.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--primary.card--has-overlay .card__header, .card--primary.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--primary.card--has-overlay .tnk-card__header,\n          .card--primary.card--has-overlay .card__body,\n          .card--primary.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--primary.card--has-overlay .tnk-card__body,\n          .card--primary.card--has-overlay .card__footer,\n          .card--primary.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--primary.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--secondary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #81be41;\n        color: #f0f2f2;\n        border: solid 1px #74ab3b;\n        overflow: hidden; }\n        .card--secondary.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--secondary.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #81be41;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--secondary.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--secondary.card--has-overlay .card__header, .card--secondary.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--secondary.card--has-overlay .tnk-card__header,\n          .card--secondary.card--has-overlay .card__body,\n          .card--secondary.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--secondary.card--has-overlay .tnk-card__body,\n          .card--secondary.card--has-overlay .card__footer,\n          .card--secondary.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--secondary.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--success {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #48a900;\n        color: #f0f2f2;\n        border: solid 1px #419800;\n        overflow: hidden; }\n        .card--success.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--success.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #48a900;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--success.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--success.card--has-overlay .card__header, .card--success.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--success.card--has-overlay .tnk-card__header,\n          .card--success.card--has-overlay .card__body,\n          .card--success.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--success.card--has-overlay .tnk-card__body,\n          .card--success.card--has-overlay .card__footer,\n          .card--success.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--success.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--warning {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #ebc500;\n        color: #f0f2f2;\n        border: solid 1px #d4b100;\n        overflow: hidden; }\n        .card--warning.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--warning.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #ebc500;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--warning.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--warning.card--has-overlay .card__header, .card--warning.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--warning.card--has-overlay .tnk-card__header,\n          .card--warning.card--has-overlay .card__body,\n          .card--warning.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--warning.card--has-overlay .tnk-card__body,\n          .card--warning.card--has-overlay .card__footer,\n          .card--warning.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--warning.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--danger {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #e85915;\n        color: #f0f2f2;\n        border: solid 1px #d15013;\n        overflow: hidden; }\n        .card--danger.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--danger.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #e85915;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--danger.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--danger.card--has-overlay .card__header, .card--danger.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--danger.card--has-overlay .tnk-card__header,\n          .card--danger.card--has-overlay .card__body,\n          .card--danger.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--danger.card--has-overlay .tnk-card__body,\n          .card--danger.card--has-overlay .card__footer,\n          .card--danger.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--danger.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--info {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #1C415B;\n        color: #f0f2f2;\n        border: solid 1px #193b52;\n        overflow: hidden; }\n        .card--info.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--info.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #1C415B;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--info.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--info.card--has-overlay .card__header, .card--info.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--info.card--has-overlay .tnk-card__header,\n          .card--info.card--has-overlay .card__body,\n          .card--info.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--info.card--has-overlay .tnk-card__body,\n          .card--info.card--has-overlay .card__footer,\n          .card--info.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--info.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--gray {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #6D7A7D;\n        color: #f0f2f2;\n        border: solid 1px #626e71;\n        overflow: hidden; }\n        .card--gray.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--gray.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #6D7A7D;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--gray.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--gray.card--has-overlay .card__header, .card--gray.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--gray.card--has-overlay .tnk-card__header,\n          .card--gray.card--has-overlay .card__body,\n          .card--gray.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--gray.card--has-overlay .tnk-card__body,\n          .card--gray.card--has-overlay .card__footer,\n          .card--gray.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--gray.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--light {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #e2e4e5;\n        color: #2c3132;\n        border: solid 1px #cbcdce;\n        overflow: hidden; }\n        .card--light.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--light.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #e2e4e5;\n            color: #2c3132;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--light.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--light.card--has-overlay .card__header, .card--light.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--light.card--has-overlay .tnk-card__header,\n          .card--light.card--has-overlay .card__body,\n          .card--light.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--light.card--has-overlay .tnk-card__body,\n          .card--light.card--has-overlay .card__footer,\n          .card--light.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--light.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--lighter {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #f0f2f2;\n        color: #2c3132;\n        border: solid 1px #d8dada;\n        overflow: hidden; }\n        .card--lighter.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--lighter.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #f0f2f2;\n            color: #2c3132;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--lighter.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--lighter.card--has-overlay .card__header, .card--lighter.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--lighter.card--has-overlay .tnk-card__header,\n          .card--lighter.card--has-overlay .card__body,\n          .card--lighter.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--lighter.card--has-overlay .tnk-card__body,\n          .card--lighter.card--has-overlay .card__footer,\n          .card--lighter.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--lighter.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--dark {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #2c3132;\n        color: #f0f2f2;\n        border: solid 1px #282c2d;\n        overflow: hidden; }\n        .card--dark.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--dark.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #2c3132;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--dark.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--dark.card--has-overlay .card__header, .card--dark.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--dark.card--has-overlay .tnk-card__header,\n          .card--dark.card--has-overlay .card__body,\n          .card--dark.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--dark.card--has-overlay .tnk-card__body,\n          .card--dark.card--has-overlay .card__footer,\n          .card--dark.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--dark.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--darker {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #161819;\n        color: #f0f2f2;\n        border: solid 1px #141617;\n        overflow: hidden; }\n        .card--darker.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--darker.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #161819;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--darker.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--darker.card--has-overlay .card__header, .card--darker.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--darker.card--has-overlay .tnk-card__header,\n          .card--darker.card--has-overlay .card__body,\n          .card--darker.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--darker.card--has-overlay .tnk-card__body,\n          .card--darker.card--has-overlay .card__footer,\n          .card--darker.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--darker.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--tertiary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #002b45;\n        color: #f0f2f2;\n        border: solid 1px #00273e;\n        overflow: hidden; }\n        .card--tertiary.card--has-overlay {\n          display: -webkit-box;\n          display: -moz-flex;\n          display: -ms-flexbox;\n          display: flex;\n          -webkit-box-direction: normal;\n          -webkit-box-orient: vertical;\n          -moz-flex-direction: column;\n          -ms-flex-direction: column;\n          flex-direction: column;\n          -webkit-box-pack: end;\n          -ms-flex-pack: end;\n          -moz-justify-content: flex-end;\n          justify-content: flex-end;\n          min-height: 15em;\n          border: 0; }\n          .card--tertiary.card--has-overlay:after {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            background-color: #002b45;\n            color: #f0f2f2;\n            opacity: 0.7;\n            z-index: 10; }\n          .card--tertiary.card--has-overlay .card__image {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            width: 100%;\n            z-index: 5; }\n          .card--tertiary.card--has-overlay .card__header, .card--tertiary.card--has-overlay .tnk-card .tnk-card__header, .tnk-card .card--tertiary.card--has-overlay .tnk-card__header,\n          .card--tertiary.card--has-overlay .card__body,\n          .card--tertiary.card--has-overlay .tnk-card .tnk-card__body,\n          .tnk-card .card--tertiary.card--has-overlay .tnk-card__body,\n          .card--tertiary.card--has-overlay .card__footer,\n          .card--tertiary.card--has-overlay .tnk-card .tnk-card__footer,\n          .tnk-card .card--tertiary.card--has-overlay .tnk-card__footer {\n            z-index: 15; }\n      .card--transparent {\n        border: 0;\n        background: transparent; }\n        .card--transparent .card__header, .card--transparent .tnk-card .tnk-card__header, .tnk-card .card--transparent .tnk-card__header,\n        .card--transparent .card__body,\n        .card--transparent .tnk-card .tnk-card__body,\n        .tnk-card .card--transparent .tnk-card__body,\n        .card--transparent .card__footer,\n        .card--transparent .tnk-card .tnk-card__footer,\n        .tnk-card .card--transparent .tnk-card__footer {\n          padding-left: 0;\n          padding-right: 0; }\n        .card--transparent .card__image {\n          border-radius: 4px; }\n\n    .table {\n      border-radius: 4px;\n      overflow: hidden; }\n      .table > table {\n        width: 100%;\n        text-align: left; }\n      .table__head {\n        border-bottom-width: 3px;\n        border-bottom-style: solid;\n        border-bottom-color: #e2e4e5; }\n        .table__head--primary {\n          background-color: #007dbc;\n          color: #f0f2f2;\n          border-bottom-color: #0071a9; }\n        .table__head--secondary {\n          background-color: #81be41;\n          color: #f0f2f2;\n          border-bottom-color: #74ab3b; }\n        .table__head--success {\n          background-color: #48a900;\n          color: #f0f2f2;\n          border-bottom-color: #419800; }\n        .table__head--warning {\n          background-color: #ebc500;\n          color: #f0f2f2;\n          border-bottom-color: #d4b100; }\n        .table__head--danger {\n          background-color: #e85915;\n          color: #f0f2f2;\n          border-bottom-color: #d15013; }\n        .table__head--info {\n          background-color: #1C415B;\n          color: #f0f2f2;\n          border-bottom-color: #193b52; }\n        .table__head--gray {\n          background-color: #6D7A7D;\n          color: #f0f2f2;\n          border-bottom-color: #626e71; }\n        .table__head--light {\n          background-color: #e2e4e5;\n          color: #2c3132;\n          border-bottom-color: #cbcdce; }\n        .table__head--lighter {\n          background-color: #f0f2f2;\n          color: #2c3132;\n          border-bottom-color: #d8dada; }\n        .table__head--dark {\n          background-color: #2c3132;\n          color: #f0f2f2;\n          border-bottom-color: #282c2d; }\n        .table__head--darker {\n          background-color: #161819;\n          color: #f0f2f2;\n          border-bottom-color: #141617; }\n        .table__head--tertiary {\n          background-color: #002b45;\n          color: #f0f2f2;\n          border-bottom-color: #00273e; }\n        .table__head > tr > th {\n          padding: 1rem; }\n      .table__body > tr {\n        background-color: #FFFFFF;\n        border-bottom: solid 1px #f0f2f2; }\n        .table__body > tr > td {\n          padding: 1rem; }\n      .table--striped .table__body > tr:nth-child(2n + 2) {\n        background-color: #f0f2f2; }\n\n    .fs-xx-small, .font-size-xx-small {\n      font-size: 0.5rem !important; }\n\n    .fs-x-small, .font-size-x-small {\n      font-size: 0.64815rem !important; }\n\n    .fs-small, .font-size-small {\n      font-size: 0.76087rem !important; }\n\n    .fs-base, .font-size-base {\n      font-size: 0.875rem !important; }\n\n    .fs-large, .font-size-large {\n      font-size: 1.09375rem !important; }\n\n    .fs-x-large, .font-size-x-large {\n      font-size: 1.3125rem !important; }\n\n    .fs-xx-large, .font-size-xx-large {\n      font-size: 1.75rem !important; }\n\n    .fw-thin, .font-weight-thin {\n      font-weight: 100 !important; }\n\n    .fw-extra-light, .font-weight-extra-light {\n      font-weight: 200 !important; }\n\n    .fw-ultra-light, .font-weight-ultra-light {\n      font-weight: 200 !important; }\n\n    .fw-light, .font-weight-light {\n      font-weight: 300 !important; }\n\n    .fw-normal, .font-weight-normal {\n      font-weight: 400 !important; }\n\n    .fw-book, .font-weight-book {\n      font-weight: 400 !important; }\n\n    .fw-regular, .font-weight-regular {\n      font-weight: 400 !important; }\n\n    .fw-medium, .font-weight-medium {\n      font-weight: 500 !important; }\n\n    .fw-semi-bold, .font-weight-semi-bold {\n      font-weight: 600 !important; }\n\n    .fw-semibold, .font-weight-semibold {\n      font-weight: 600 !important; }\n\n    .fw-demi-bold, .font-weight-demi-bold {\n      font-weight: 600 !important; }\n\n    .fw-bold, .font-weight-bold {\n      font-weight: 700 !important; }\n\n    .fw-extra-bold, .font-weight-extra-bold {\n      font-weight: 800 !important; }\n\n    .fw-ultra-bold, .font-weight-ultra-bold {\n      font-weight: 900 !important; }\n\n    .fw-heavy, .font-weight-heavy {\n      font-weight: 900 !important; }\n\n    .fw-black, .font-weight-black {\n      font-weight: 900 !important; }\n\n    .fw-ultra, .font-weight-ultra {\n      font-weight: 900 !important; }\n\n    .fw-ultra-black, .font-weight-ultra-black {\n      font-weight: 900 !important; }\n\n    .fw-extra-ultra, .font-weight-extra-ultra {\n      font-weight: 900 !important; }\n\n    .ta-left, .align-left {\n      text-align: left !important; }\n\n    .ta-right, .align-right {\n      text-align: right !important; }\n\n    .ta-center, .align-center {\n      text-align: center !important; }\n\n    .ta-justify, .align-justify {\n      text-align: justify !important; }\n\n    .ta-justify-all, .align-justify-all {\n      text-align: justify-all !important; }\n\n    .ta-start, .align-start {\n      text-align: start !important; }\n\n    .ta-end, .align-end {\n      text-align: end !important; }\n\n    .ta-match-parent, .align-match-parent {\n      text-align: match-parent !important; }\n\n    .color-primary {\n      color: #007dbc !important; }\n\n    .bg-color-primary {\n      background-color: #007dbc !important; }\n\n    .color-secondary {\n      color: #81be41 !important; }\n\n    .bg-color-secondary {\n      background-color: #81be41 !important; }\n\n    .color-success {\n      color: #48a900 !important; }\n\n    .bg-color-success {\n      background-color: #48a900 !important; }\n\n    .color-warning {\n      color: #ebc500 !important; }\n\n    .bg-color-warning {\n      background-color: #ebc500 !important; }\n\n    .color-danger {\n      color: #e85915 !important; }\n\n    .bg-color-danger {\n      background-color: #e85915 !important; }\n\n    .color-info {\n      color: #1C415B !important; }\n\n    .bg-color-info {\n      background-color: #1C415B !important; }\n\n    .color-gray {\n      color: #6D7A7D !important; }\n\n    .bg-color-gray {\n      background-color: #6D7A7D !important; }\n\n    .color-light {\n      color: #e2e4e5 !important; }\n\n    .bg-color-light {\n      background-color: #e2e4e5 !important; }\n\n    .color-lighter {\n      color: #f0f2f2 !important; }\n\n    .bg-color-lighter {\n      background-color: #f0f2f2 !important; }\n\n    .color-dark {\n      color: #2c3132 !important; }\n\n    .bg-color-dark {\n      background-color: #2c3132 !important; }\n\n    .color-darker {\n      color: #161819 !important; }\n\n    .bg-color-darker {\n      background-color: #161819 !important; }\n\n    .color-tertiary {\n      color: #002b45 !important; }\n\n    .bg-color-tertiary {\n      background-color: #002b45 !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-xx-small, .mg-xx-small {\n      margin: 0.4rem !important; }\n\n    .padding-xx-small, .pd-xx-small {\n      padding: 0.4rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-x-small, .mg-x-small {\n      margin: 0.57143rem !important; }\n\n    .padding-x-small, .pd-x-small {\n      padding: 0.57143rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-small, .mg-small {\n      margin: 0.8rem !important; }\n\n    .padding-small, .pd-small {\n      padding: 0.8rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-base, .mg-base {\n      margin: 1rem !important; }\n\n    .padding-base, .pd-base {\n      padding: 1rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-large, .mg-large {\n      margin: 1.5rem !important; }\n\n    .padding-large, .pd-large {\n      padding: 1.5rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-x-large, .mg-x-large {\n      margin: 2rem !important; }\n\n    .padding-x-large, .pd-x-large {\n      padding: 2rem !important; }\n\n    .margin, .mg {\n      margin: 1rem !important; }\n\n    .padding, .pd {\n      padding: 1rem !important; }\n\n    .margin-xx-large, .mg-xx-large {\n      margin: 3rem !important; }\n\n    .padding-xx-large, .pd-xx-large {\n      padding: 3rem !important; }\n\n    .pd-top, .padding-top {\n      padding-top: 1rem !important; }\n\n    .mg-top, .margin-top {\n      margin-top: 1rem !important; }\n\n    .mg-top-xx-small, .margin-top-xx-small {\n      margin-top: 0.4rem !important; }\n\n    .pd-top-xx-small, .padding-top-xx-small {\n      padding-top: 0.4rem !important; }\n\n    .mg-top-x-small, .margin-top-x-small {\n      margin-top: 0.57143rem !important; }\n\n    .pd-top-x-small, .padding-top-x-small {\n      padding-top: 0.57143rem !important; }\n\n    .mg-top-small, .margin-top-small {\n      margin-top: 0.8rem !important; }\n\n    .pd-top-small, .padding-top-small {\n      padding-top: 0.8rem !important; }\n\n    .mg-top-base, .margin-top-base {\n      margin-top: 1rem !important; }\n\n    .pd-top-base, .padding-top-base {\n      padding-top: 1rem !important; }\n\n    .mg-top-large, .margin-top-large {\n      margin-top: 1.5rem !important; }\n\n    .pd-top-large, .padding-top-large {\n      padding-top: 1.5rem !important; }\n\n    .mg-top-x-large, .margin-top-x-large {\n      margin-top: 2rem !important; }\n\n    .pd-top-x-large, .padding-top-x-large {\n      padding-top: 2rem !important; }\n\n    .mg-top-xx-large, .margin-top-xx-large {\n      margin-top: 3rem !important; }\n\n    .pd-top-xx-large, .padding-top-xx-large {\n      padding-top: 3rem !important; }\n\n    .pd-left, .padding-left {\n      padding-left: 1rem !important; }\n\n    .mg-left, .margin-left {\n      margin-left: 1rem !important; }\n\n    .mg-left-xx-small, .margin-left-xx-small {\n      margin-left: 0.4rem !important; }\n\n    .pd-left-xx-small, .padding-left-xx-small {\n      padding-left: 0.4rem !important; }\n\n    .mg-left-x-small, .margin-left-x-small {\n      margin-left: 0.57143rem !important; }\n\n    .pd-left-x-small, .padding-left-x-small {\n      padding-left: 0.57143rem !important; }\n\n    .mg-left-small, .margin-left-small {\n      margin-left: 0.8rem !important; }\n\n    .pd-left-small, .padding-left-small {\n      padding-left: 0.8rem !important; }\n\n    .mg-left-base, .margin-left-base {\n      margin-left: 1rem !important; }\n\n    .pd-left-base, .padding-left-base {\n      padding-left: 1rem !important; }\n\n    .mg-left-large, .margin-left-large {\n      margin-left: 1.5rem !important; }\n\n    .pd-left-large, .padding-left-large {\n      padding-left: 1.5rem !important; }\n\n    .mg-left-x-large, .margin-left-x-large {\n      margin-left: 2rem !important; }\n\n    .pd-left-x-large, .padding-left-x-large {\n      padding-left: 2rem !important; }\n\n    .mg-left-xx-large, .margin-left-xx-large {\n      margin-left: 3rem !important; }\n\n    .pd-left-xx-large, .padding-left-xx-large {\n      padding-left: 3rem !important; }\n\n    .pd-bottom, .padding-bottom {\n      padding-bottom: 1rem !important; }\n\n    .mg-bottom, .margin-bottom {\n      margin-bottom: 1rem !important; }\n\n    .mg-bottom-xx-small, .margin-bottom-xx-small {\n      margin-bottom: 0.4rem !important; }\n\n    .pd-bottom-xx-small, .padding-bottom-xx-small {\n      padding-bottom: 0.4rem !important; }\n\n    .mg-bottom-x-small, .margin-bottom-x-small {\n      margin-bottom: 0.57143rem !important; }\n\n    .pd-bottom-x-small, .padding-bottom-x-small {\n      padding-bottom: 0.57143rem !important; }\n\n    .mg-bottom-small, .margin-bottom-small {\n      margin-bottom: 0.8rem !important; }\n\n    .pd-bottom-small, .padding-bottom-small {\n      padding-bottom: 0.8rem !important; }\n\n    .mg-bottom-base, .margin-bottom-base {\n      margin-bottom: 1rem !important; }\n\n    .pd-bottom-base, .padding-bottom-base {\n      padding-bottom: 1rem !important; }\n\n    .mg-bottom-large, .margin-bottom-large {\n      margin-bottom: 1.5rem !important; }\n\n    .pd-bottom-large, .padding-bottom-large {\n      padding-bottom: 1.5rem !important; }\n\n    .mg-bottom-x-large, .margin-bottom-x-large {\n      margin-bottom: 2rem !important; }\n\n    .pd-bottom-x-large, .padding-bottom-x-large {\n      padding-bottom: 2rem !important; }\n\n    .mg-bottom-xx-large, .margin-bottom-xx-large {\n      margin-bottom: 3rem !important; }\n\n    .pd-bottom-xx-large, .padding-bottom-xx-large {\n      padding-bottom: 3rem !important; }\n\n    .pd-right, .padding-right {\n      padding-right: 1rem !important; }\n\n    .mg-right, .margin-right {\n      margin-right: 1rem !important; }\n\n    .mg-right-xx-small, .margin-right-xx-small {\n      margin-right: 0.4rem !important; }\n\n    .pd-right-xx-small, .padding-right-xx-small {\n      padding-right: 0.4rem !important; }\n\n    .mg-right-x-small, .margin-right-x-small {\n      margin-right: 0.57143rem !important; }\n\n    .pd-right-x-small, .padding-right-x-small {\n      padding-right: 0.57143rem !important; }\n\n    .mg-right-small, .margin-right-small {\n      margin-right: 0.8rem !important; }\n\n    .pd-right-small, .padding-right-small {\n      padding-right: 0.8rem !important; }\n\n    .mg-right-base, .margin-right-base {\n      margin-right: 1rem !important; }\n\n    .pd-right-base, .padding-right-base {\n      padding-right: 1rem !important; }\n\n    .mg-right-large, .margin-right-large {\n      margin-right: 1.5rem !important; }\n\n    .pd-right-large, .padding-right-large {\n      padding-right: 1.5rem !important; }\n\n    .mg-right-x-large, .margin-right-x-large {\n      margin-right: 2rem !important; }\n\n    .pd-right-x-large, .padding-right-x-large {\n      padding-right: 2rem !important; }\n\n    .mg-right-xx-large, .margin-right-xx-large {\n      margin-right: 3rem !important; }\n\n    .pd-right-xx-large, .padding-right-xx-large {\n      padding-right: 3rem !important; }\n\n    /*\tend of framework\n    --------------------------------------  */\n    .tnk-card {\n      border: none !important; }\n      .tnk-card .tnk-card__header--primary {\n        background-color: #007dbc;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--secondary {\n        background-color: #81be41;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--success {\n        background-color: #48a900;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--warning {\n        background-color: #ebc500;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--danger {\n        background-color: #e85915;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--info {\n        background-color: #1C415B;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--gray {\n        background-color: #6D7A7D;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--light {\n        background-color: #e2e4e5;\n        color: #2c3132; }\n      .tnk-card .tnk-card__header--lighter {\n        background-color: #f0f2f2;\n        color: #2c3132; }\n      .tnk-card .tnk-card__header--dark {\n        background-color: #2c3132;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--darker {\n        background-color: #161819;\n        color: #f0f2f2; }\n      .tnk-card .tnk-card__header--tertiary {\n        background-color: #002b45;\n        color: #f0f2f2; }\n\n    /*\t----------------------------\n    \tVARIABLES\n    ----------------------------- */\n    /*\tGeneral variables  */\n    /*\tStates variables  */\n    /*\t----------------------------\n    \tSTYLE RULES\n    ----------------------------- */\n    button {\n      background: transparent;\n      border: none;\n      outline: none; }\n      button:focus {\n        outline: none; }\n\n    .tnk-button {\n      display: inline-block;\n      position: relative;\n      border: 0;\n      color: inherit;\n      cursor: pointer;\n      padding: 12.5px 15px;\n      font-weight: 700;\n      border-radius: 4px;\n      line-height: 1;\n      background: #6D7A7D;\n      -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 0.5px 1px rgba(0, 0, 0, 0.1);\n              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 0.5px 1px rgba(0, 0, 0, 0.1);\n      /*\tGenerates different themes for button component. */\n      /*\tGenerates different sizes for button component. */\n      /*\tDisbaled state modifiers  */\n      /*\tModifier classes for iconed buttons  */\n      /*\tRound-edged button modifier class  */\n      /*\tMakes the button covers over the span of a button's parent width  */ }\n      .tnk-button--primary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #007dbc;\n        color: #f0f2f2; }\n        .tnk-button--primary:hover {\n          background-color: #1a8ac3; }\n        .tnk-button--primary.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #007dbc;\n          border: solid 1px #007dbc; }\n          .tnk-button--primary.tnk-button--outlined:hover {\n            background-color: #007dbc;\n            color: #f0f2f2; }\n          .tnk-button--primary.tnk-button--outlined:focus {\n            background-color: #007dbc;\n            color: #f0f2f2; }\n      .tnk-button--secondary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #81be41;\n        color: #f0f2f2; }\n        .tnk-button--secondary:hover {\n          background-color: #8ec554; }\n        .tnk-button--secondary.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #81be41;\n          border: solid 1px #81be41; }\n          .tnk-button--secondary.tnk-button--outlined:hover {\n            background-color: #81be41;\n            color: #f0f2f2; }\n          .tnk-button--secondary.tnk-button--outlined:focus {\n            background-color: #81be41;\n            color: #f0f2f2; }\n      .tnk-button--success {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #48a900;\n        color: #f0f2f2; }\n        .tnk-button--success:hover {\n          background-color: #5ab21a; }\n        .tnk-button--success.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #48a900;\n          border: solid 1px #48a900; }\n          .tnk-button--success.tnk-button--outlined:hover {\n            background-color: #48a900;\n            color: #f0f2f2; }\n          .tnk-button--success.tnk-button--outlined:focus {\n            background-color: #48a900;\n            color: #f0f2f2; }\n      .tnk-button--warning {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #ebc500;\n        color: #f0f2f2; }\n        .tnk-button--warning:hover {\n          background-color: #edcb1a; }\n        .tnk-button--warning.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #ebc500;\n          border: solid 1px #ebc500; }\n          .tnk-button--warning.tnk-button--outlined:hover {\n            background-color: #ebc500;\n            color: #f0f2f2; }\n          .tnk-button--warning.tnk-button--outlined:focus {\n            background-color: #ebc500;\n            color: #f0f2f2; }\n      .tnk-button--danger {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #e85915;\n        color: #f0f2f2; }\n        .tnk-button--danger:hover {\n          background-color: #ea6a2c; }\n        .tnk-button--danger.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #e85915;\n          border: solid 1px #e85915; }\n          .tnk-button--danger.tnk-button--outlined:hover {\n            background-color: #e85915;\n            color: #f0f2f2; }\n          .tnk-button--danger.tnk-button--outlined:focus {\n            background-color: #e85915;\n            color: #f0f2f2; }\n      .tnk-button--info {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #1C415B;\n        color: #f0f2f2; }\n        .tnk-button--info:hover {\n          background-color: #33546b; }\n        .tnk-button--info.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #1C415B;\n          border: solid 1px #1C415B; }\n          .tnk-button--info.tnk-button--outlined:hover {\n            background-color: #1C415B;\n            color: #f0f2f2; }\n          .tnk-button--info.tnk-button--outlined:focus {\n            background-color: #1C415B;\n            color: #f0f2f2; }\n      .tnk-button--gray {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #6D7A7D;\n        color: #f0f2f2; }\n        .tnk-button--gray:hover {\n          background-color: #7c878a; }\n        .tnk-button--gray.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #6D7A7D;\n          border: solid 1px #6D7A7D; }\n          .tnk-button--gray.tnk-button--outlined:hover {\n            background-color: #6D7A7D;\n            color: #f0f2f2; }\n          .tnk-button--gray.tnk-button--outlined:focus {\n            background-color: #6D7A7D;\n            color: #f0f2f2; }\n      .tnk-button--light {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #e2e4e5;\n        color: #2c3132; }\n        .tnk-button--light:hover {\n          background-color: #e5e7e8; }\n        .tnk-button--light.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #e2e4e5;\n          border: solid 1px #e2e4e5; }\n          .tnk-button--light.tnk-button--outlined:hover {\n            background-color: #e2e4e5;\n            color: #2c3132; }\n          .tnk-button--light.tnk-button--outlined:focus {\n            background-color: #e2e4e5;\n            color: #2c3132; }\n      .tnk-button--lighter {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #f0f2f2;\n        color: #2c3132; }\n        .tnk-button--lighter:hover {\n          background-color: #f2f3f3; }\n        .tnk-button--lighter.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #f0f2f2;\n          border: solid 1px #f0f2f2; }\n          .tnk-button--lighter.tnk-button--outlined:hover {\n            background-color: #f0f2f2;\n            color: #2c3132; }\n          .tnk-button--lighter.tnk-button--outlined:focus {\n            background-color: #f0f2f2;\n            color: #2c3132; }\n      .tnk-button--dark {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #2c3132;\n        color: #f0f2f2; }\n        .tnk-button--dark:hover {\n          background-color: #414647; }\n        .tnk-button--dark.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #2c3132;\n          border: solid 1px #2c3132; }\n          .tnk-button--dark.tnk-button--outlined:hover {\n            background-color: #2c3132;\n            color: #f0f2f2; }\n          .tnk-button--dark.tnk-button--outlined:focus {\n            background-color: #2c3132;\n            color: #f0f2f2; }\n      .tnk-button--darker {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #161819;\n        color: #f0f2f2; }\n        .tnk-button--darker:hover {\n          background-color: #2d2f30; }\n        .tnk-button--darker.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #161819;\n          border: solid 1px #161819; }\n          .tnk-button--darker.tnk-button--outlined:hover {\n            background-color: #161819;\n            color: #f0f2f2; }\n          .tnk-button--darker.tnk-button--outlined:focus {\n            background-color: #161819;\n            color: #f0f2f2; }\n      .tnk-button--tertiary {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        background-color: #002b45;\n        color: #f0f2f2; }\n        .tnk-button--tertiary:hover {\n          background-color: #1a4058; }\n        .tnk-button--tertiary.tnk-button--outlined {\n          -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n          background-color: transparent;\n          color: #002b45;\n          border: solid 1px #002b45; }\n          .tnk-button--tertiary.tnk-button--outlined:hover {\n            background-color: #002b45;\n            color: #f0f2f2; }\n          .tnk-button--tertiary.tnk-button--outlined:focus {\n            background-color: #002b45;\n            color: #f0f2f2; }\n      .tnk-button--small {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        padding: 6.25px 7.5px; }\n      .tnk-button--base {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        padding: 12.5px 15px; }\n      .tnk-button--large {\n        -webkit-transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        transition: all 150ms cubic-bezier(0.78, 0.23, 0.33, 0.83);\n        padding: 18.75px 22.5px; }\n      .tnk-button:disabled {\n        opacity: 0.5;\n        cursor: not-allowed; }\n      .tnk-button--has-icon-front > i.tnk-button__icon {\n        margin-right: 1rem; }\n      .tnk-button--has-icon-back > i.tnk-button__icon {\n        margin-left: 1rem; }\n      .tnk-button--pill, .tnk-button--is-pill {\n        border-radius: 30px; }\n      .tnk-button--full-width, .tnk-button--is-full-width {\n        width: 100%; }\n\n    .survey__container ul,\n    .survey__container li {\n      list-style: none;\n      padding: 0; }\n\n    .survey__heading {\n      font-weight: bold;\n      font-size: 16px; }\n      .survey__heading--big {\n        font-size: 30px; }\n      .survey__heading--medium {\n        font-size: 16px; }\n\n    .ces__stars,\n    .emoscore__points {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -ms-flex-wrap: wrap;\n          flex-wrap: wrap; }\n\n    .ces {\n      border-bottom: solid 1px #e2e4e5;\n      padding-top: 1.5em;\n      padding-bottom: 1.5em;\n      color: #535353; }\n      @media (max-width: 575px) {\n        .ces {\n          padding-top: 0;\n          padding-bottom: 0; } }\n      .ces__point {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        text-align: center;\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: column;\n                flex-direction: column;\n        margin-right: 1rem; }\n        .ces__point .point {\n          -webkit-box-flex: 1;\n              -ms-flex: 1 0 33%;\n                  flex: 1 0 33%;\n          text-align: center;\n          margin-bottom: 1rem;\n          padding: 1rem 1.5rem;\n          font-weight: bold;\n          cursor: pointer;\n          border: 1px solid #007dbc;\n          color: #007dbc;\n          border-radius: 6px;\n          -webkit-transition: all 200ms ease-in-out;\n          transition: all 200ms ease-in-out; }\n          .ces__point .point.active {\n            color: #f0f2f2;\n            background-color: #007dbc; }\n          @media (min-width: 576px) {\n            .ces__point .point {\n              -webkit-box-flex: 0;\n                  -ms-flex: 0 0 auto;\n                      flex: 0 0 auto; } }\n        .ces__point span {\n          display: block;\n          max-width: 40px; }\n\n    .emoscore {\n      border-bottom: solid 1px #e2e4e5;\n      padding-top: 1.5em;\n      padding-bottom: 1.5em;\n      margin-bottom: 1rem;\n      color: #535353; }\n      @media (max-width: 575px) {\n        .emoscore {\n          padding-bottom: 0; } }\n      .emoscore .emoscore__points {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -ms-flex-wrap: wrap;\n            flex-wrap: wrap;\n        margin-top: 1.5rem; }\n      .emoscore .point {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 0 33%;\n                flex: 1 0 33%;\n        text-align: center;\n        margin-right: 1rem;\n        margin-bottom: 1rem;\n        padding: 1rem 1.5rem;\n        font-weight: bold;\n        cursor: pointer;\n        border: 1px solid #007dbc;\n        color: #007dbc;\n        border-radius: 30px;\n        -webkit-transition: all 200ms ease-in-out;\n        transition: all 200ms ease-in-out; }\n        .emoscore .point.active {\n          color: #f0f2f2;\n          background-color: #007dbc; }\n        @media (min-width: 576px) {\n          .emoscore .point {\n            -webkit-box-flex: 0;\n                -ms-flex: 0 0 auto;\n                    flex: 0 0 auto; } }\n        @media (max-width: 575px) {\n          .emoscore .point {\n            -webkit-box-flex: 0;\n                -ms-flex: 0;\n                    flex: 0;\n            margin-right: 0.75rem;\n            padding: 0.5rem 1rem;\n            font-size: 13px; } }\n\n    .feedback {\n      padding-top: 1.5em;\n      padding-bottom: 1.5em; }\n      @media (max-width: 575px) {\n        .feedback {\n          padding-top: 0; } }\n      .feedback .survey__heading {\n        margin-bottom: 1rem; }\n  "]}]}],"members":{"hideHelpButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["hideHelpButton"]}]}],"media":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["media"]}]}],"openSuccessDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"setSurveyContentType":[{"__symbolic":"method"}],"buildHelpWidgetForm":[{"__symbolic":"method"}],"getCookiesUserData":[{"__symbolic":"method"}],"sendHelpWidgetForm":[{"__symbolic":"method"}],"onChangedValues":[{"__symbolic":"method"}]}},"TNKDigitalContractComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":"\n    <div class=\"digital-contract\">\n      <ng-container *ngIf=\"!isAgreeContract\">\n        <div class=\"digital-contract__agreement\">\n          <p>\n            Berikut adalah kontrak pinjaman Anda. Mohon mengunduh dan membaca dengan\n            teliti kontrak tersebut.\n          </p>\n          <div class=\"digital-contract__btn-download tnk-margin-bottom--base\">\n            <a href=\"{{ contractPdfUrl }}\">\n              <span class=\"tnk-color--secondary\">\n                <i class=\"fa fa-1x fa-download\"></i>\n                <strong style=\"text-decoration: underline;\">\n                  Unduh file kontrak pinjaman\n                </strong>\n              </span>\n            </a>\n          </div>\n\n          <div class=\"digital-contract__checkbox tnk-padding--base\">\n            <label class=\"tnk-checkbox\">\n              <input type=\"checkbox\" [(ngModel)]=\"isAgreeContractCheckbox\" />\n              Saya telah membaca dan menyetujui Kontrak Pinjaman yang terlampir di\n              halaman ini. Dengan demikian saya menyetujui untuk menjalankan hak dan\n              kewajiban sesuai yang tertera dalam kontrak pinjaman dan sesuai dengan\n              hukum yang berlaku di indonesia.\n            </label>\n            <div class=\"digital-contract__btn-confirm tnk-margin-top--large \">\n              <button\n                (click)=\"submitContract()\"\n                [disabled]=\"!isAgreeContractCheckbox\"\n                class=\"tnk-button tnk-button--primary\"\n              >\n                Lanjut tanda tangan kontrak\n              </button>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"isAgreeContract\">\n        <div class=\"digital-contract__otp\">\n          <ul class=\"tnk-list tnk-list--check\">\n            <li class=\"tnk-list__item\">\n              Kami Telah mengirim kode verifikasi ke No. HP anda:\n              <strong>{{ profileData && profileData.phone }}</strong>\n            </li>\n            <li class=\"tnk-list__item\">\n              Masukan\n              <strong>kode verifikasi sebagai tanda kontrak online Anda</strong>\n            </li>\n            <li class=\"tnk-list__item\">\n              Hubungi 02140005859 atau 02130005859 untuk mengubah nomor handphone.\n            </li>\n          </ul>\n\n          <div class=\"login__block\">\n            <p>Kode Akses baru saja dikirim ke handphone anda</p>\n            <div class=\"row\">\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  maxlength=\"1\"\n                  #otp_1\n                  id=\"login_otp1\"\n                  [(ngModel)]=\"digitalSignatureData.otp_1\"\n                  (input)=\"OTPInputTab('otp_2', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_2\n                  maxlength=\"1\"\n                  id=\"login_otp2\"\n                  [(ngModel)]=\"digitalSignatureData.otp_2\"\n                  (input)=\"OTPInputTab('otp_3', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_1', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_3\n                  maxlength=\"1\"\n                  id=\"login_otp3\"\n                  [(ngModel)]=\"digitalSignatureData.otp_3\"\n                  (input)=\"OTPInputTab('otp_4', $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_2', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n\n              <div class=\"col-sm-3 col-xs-3 col-3\">\n                <input\n                  type=\"number\"\n                  class=\"form-control otp--input\"\n                  #otp_4\n                  maxlength=\"1\"\n                  id=\"login_otp4\"\n                  [(ngModel)]=\"digitalSignatureData.otp_4\"\n                  (input)=\"OTPInputTab(null, $event)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                  (keydown.backspace)=\"OTPBackspaceTab('otp_3', $event)\"\n                  (focus)=\"$event.target.select()\"\n                  (click)=\"$event.target.select()\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"login__block\">\n            <button\n              class=\"tnk-button tnk-button--primary\"\n              disabled\n              [disabled]=\"isBusy && checkOTPComplete()\"\n              (click)=\"submitOTPSignature()\"\n              id=\"login_btn_step3\"\n            >\n              {{ isBusy ? 'Mohon menunggu...' : 'Tanda Tangan Kontrak' }}\n            </button>\n\n            <p\n              id=\"pinjamlagi_KirimUlangKode\"\n              class=\"description\"\n              *ngIf=\"!verificationSent\"\n            >\n              Belum menerima kode?\n              <a\n                class=\"tnk-color--primary\"\n                href=\"javascript:void(0)\"\n                (click)=\"resendVerificationCode()\"\n                id=\"login_link_resendverification\"\n              >\n                Kirim ulang kode\n              </a>\n            </p>\n\n            <p class=\"description\" *ngIf=\"verificationSent\">\n              Kode akses sedang dikirim, mohon menunggu\n            </p>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"digital-contract__otp\">\n        <div class=\"login__block\" *ngIf=\"submitValidation.display\">\n          <div class=\"block__info error--block\">\n            <p>{{ submitValidation.msg }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","selector":"tnk-digital-contract","styles":["\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    .digital-contract .digital-contract__agreement {\n      margin-bottom: 20px;\n    }\n    .digital-contract .digital-contract__agreement .digital-contract__btn-download,\n    .digital-contract .digital-contract__agreement .digital-contract__checkbox,\n    .digital-contract .digital-contract__agreement .digital-contract__btn-confirm {\n      margin-top: 20px;\n    }\n    .digital-contract .digital-contract__agreement .digital-contract__checkbox {\n      background-color: rgba(204,204,204,0.2);\n    }\n    .digital-contract .digital-contract__otp {\n      position: relative;\n      display: block;\n      padding: 10px;\n      overflow-x: hidden;\n    }\n    .digital-contract .digital-contract__otp .login__block {\n      position: relative;\n      width: 100%;\n      display: block;\n      margin: 20px auto;\n      margin-top: 30px;\n      text-align: center;\n    }\n    @media screen and (min-width: 767px) {\n      .digital-contract .digital-contract__otp .login__block {\n        width: 70%;\n      }\n    }\n    @media screen and (min-width: 1110px) {\n      .digital-contract .digital-contract__otp .login__block {\n        width: 50%;\n      }\n    }\n    .digital-contract .digital-contract__otp .login__block .input-group {\n      width: 100%;\n      margin-top: 18px;\n    }\n    .digital-contract .digital-contract__otp .login__block .tnk__button {\n      margin-top: 53px;\n      margin-bottom: 26px;\n    }\n    .digital-contract .digital-contract__otp .login__block .otp--input {\n      height: 83px;\n      font-size: 24px;\n      font-weight: bold;\n      text-align: center;\n      -moz-appearance: textfield;\n    }\n    .digital-contract .digital-contract__otp .login__block .otp--input::-webkit-inner-spin-button,\n    .digital-contract .digital-contract__otp .login__block .otp--input ::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n              appearance: none;\n      -moz-appearance: none;\n    }\n    .digital-contract .digital-contract__otp .login__block .col-sm-3 {\n      padding-right: 10px;\n      padding-left: 10px;\n    }\n    .digital-contract .digital-contract__otp .login__block .help-block {\n      font-size: 12.1px;\n    }\n    .digital-contract .digital-contract__otp .login__block .description {\n      margin-top: 20px;\n    }\n    .digital-contract .digital-contract__otp .block__info {\n      position: relative;\n      display: block;\n      width: 90%;\n      margin: 0 auto;\n      background-color: #fff;\n      border: 1px solid #e1e1e1;\n      padding: 10px;\n    }\n    .digital-contract .digital-contract__otp .block__info p {\n      font-size: 12.1px;\n      text-align: justify;\n      line-height: 1.5em;\n    }\n    .digital-contract .digital-contract__otp .block__info .icon {\n      color: #008d45;\n    }\n    .digital-contract .digital-contract__otp .block__info.error--block {\n      border: 1px solid #f00;\n      padding: 20px;\n    }\n    .digital-contract .digital-contract__otp .block__info.error--block p {\n      color: #f00;\n    }\n  "]}]}],"members":{"profileData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loanId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"accessToken":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showModalSucessDigitalContract":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"otp1Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_1"]}]}],"otp2Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_2"]}]}],"otp3Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_3"]}]}],"otp4Element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["otp_4"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"}]}],"ngOnInit":[{"__symbolic":"method"}],"setSubmitValidation":[{"__symbolic":"method"}],"setSubmitData":[{"__symbolic":"method"}],"resendVerificationCode":[{"__symbolic":"method"}],"submitContract":[{"__symbolic":"method"}],"submitOTPSignature":[{"__symbolic":"method"}],"OTPInputTab":[{"__symbolic":"method"}],"OTPBackspaceTab":[{"__symbolic":"method"}],"checkOTPComplete":[{"__symbolic":"method"}]}},"TNKDigitalContractModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"declarations":[{"__symbolic":"reference","name":"TNKDigitalContractComponent"}],"providers":[{"__symbolic":"reference","name":"ɵh"}],"exports":[{"__symbolic":"reference","name":"TNKDigitalContractComponent"}]}]}],"members":{}},"TNKAuthLoanSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"},{"__symbolic":"reference","name":"ɵk"}],"declarations":[{"__symbolic":"reference","name":"TNKAuthLoanSliderComponent"}],"providers":[{"__symbolic":"reference","name":"ɵh"}],"exports":[{"__symbolic":"reference","name":"TNKAuthLoanSliderComponent"}]}]}],"members":{}},"TNKAuthLoanSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"auth-loan-slider","template":"\n    <div class=\"loan__slider__widget--disabled \" *ngIf=\"!widgetEnabled\">\n      <p>Sedang Mengambil data pinjaman....</p>\n    </div>\n\n    <!-- <div class=\"loan__slider__widget--error \" *ngIf=\"failGetData\">\n    \t<p>Terjadi Kesalahan..</p>\n    \t<button>Coba lagi..</button>\n    </div> -->\n\n    <div class=\"loan__slider__widget\" *ngIf=\"widgetEnabled\">\n      <div class=\"card card--loan-slider card--bg-blue card--no-padding\">\n        <div class=\"col-sm-3 col-xs-4\">\n          <p class=\"loan__description text--left text--clr-white\">\n            Cicilan\n            <br />\n            mulai dari:\n          </p>\n        </div>\n\n        <div class=\"col-sm-9 col-xs-8\">\n          <p class=\"align--right text--padding-top\">\n            <span class=\"loan__amount\">\n              {{ sliderData.loanMonthly | tnkCurrency: 'rupiah' }},-\n            </span>\n            <br />\n            <span>per bulan</span>\n          </p>\n        </div>\n      </div>\n\n      <div class=\"card card--loan-slider\">\n        <div class=\"row\">\n          <div class=\"col-sm-6 col-xs-6\">\n            <p class=\"help-block\">Jumlah Pinjaman</p>\n          </div>\n\n          <div class=\"col-sm-6 col-xs-6 align--right\">\n            <p class=\"slider-title\">\n              {{ 'Rp ' + sliderData.loanAmount / 1000000 + ' juta' }}\n            </p>\n          </div>\n        </div>\n\n        <div class=\"row row--slider\">\n          <div class=\"col-sm-12\">\n            <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n              <p class=\"loan__description\">\n                {{ this.sliderData.loanMinimum / 1000000 }}\n              </p>\n            </div>\n\n            <div class=\"col-sm-10 col-xs-10\" style=\"padding: 0\">\n              <mat-slider\n                [min]=\"sliderData.loanMinimum\"\n                [max]=\"20000000\"\n                [(ngModel)]=\"sliderData.loanAmount\"\n                [step]=\"1000000\"\n                (input)=\"calcMonthly($event, 'amount')\"\n              ></mat-slider>\n            </div>\n\n            <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n              <p class=\"loan__description\">20</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"card card--loan-slider\">\n        <div class=\"row\">\n          <div class=\"col-sm-6 col-xs-6\">\n            <p class=\"help-block\">Periode Pinjaman</p>\n          </div>\n\n          <div class=\"col-sm-6 col-xs-6 align--right\">\n            <p class=\"slider-title\">{{ sliderData.loanPeriod + ' bulan' }}</p>\n          </div>\n        </div>\n\n        <div class=\"row row--slider\">\n          <div class=\"col-sm-12\">\n            <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n              <p class=\"loan__description\">6</p>\n            </div>\n\n            <div class=\"col-sm-10 col-xs-10\" style=\"padding: 0\">\n              <mat-slider\n                [min]=\"6\"\n                [max]=\"20\"\n                [(ngModel)]=\"sliderData.loanPeriod\"\n                [step]=\"1\"\n                (input)=\"calcMonthly($event, 'period')\"\n              ></mat-slider>\n            </div>\n\n            <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n              <p class=\"loan__description\">20</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"card card--loan-slider\">\n        <div class=\"row\">\n          <div class=\"form-group\" [ngClass]=\"{ 'has-error': invalidSliderForm }\">\n            <div class=\"col-sm-5 col-xs-5\">\n              <p class=\"help-block\" style=\"margin-top: 10px\">Tujuan Pinjaman</p>\n            </div>\n\n            <div class=\"col-sm-7 col-xs-7\">\n              <select\n                class=\"form-control\"\n                id=\"reviewField_tujuan_meminjam\"\n                [(ngModel)]=\"sliderData.loanPurpose\"\n                name=\"loan_purpose\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Holiday\">Liburan</option>\n                <option value=\"HousingLoan\">KPR</option>\n                <option value=\"CarOrMotorcycle\">Mobil/Motor</option>\n                <option value=\"CreditCard\">Kartu Kredit</option>\n                <option value=\"Renovation\">Renovasi</option>\n                <option value=\"ElectronicUnsecuredLoan\">KTA Elektronik</option>\n                <option value=\"Education\">Sekolah</option>\n                <option value=\"VentureCapital\">Modal Usaha</option>\n                <option value=\"Investment\">Investasi</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n              <p class=\"help-block help-block-error\" *ngIf=\"invalidSliderForm\">\n                Tujuan pinjaman wajib dipilih\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <button\n            id=\"pinjamlagi_AjukanPinjaman\"\n            class=\"tnk__button button--green button--block\"\n            (click)=\"submitLoan()\"\n            [disabled]=\"submitBusy\"\n          >\n            {{ submitBusy ? 'Loading...' : 'Ajukan Pinjaman' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    html {\n      font-size: 14px;\n    }\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\n    }\n    #loan-slider .card__header {\n      background-color: #004c7b;\n      color: #fff;\n    }\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    mat-slider {\n      width: 100%;\n    }\n    .mat-accent .mat-slider-thumb,\n    .mat-accent .mat-slider-thumb-label,\n    .mat-accent .mat-slider-track-fill {\n      background-color: #81be41;\n    }\n    .noUi-connect {\n      background: #81be41;\n    }\n    .loan__slider__widget {\n      position: relative;\n      margin: 5px;\n      border-radius: 5px;\n      background-color: #fff;\n      -webkit-box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n              box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n      overflow: hidden;\n      display: block;\n    }\n    .loan__slider__widget.widget--embed {\n      -webkit-box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n              box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n      border-radius: 5px 5px 0 0;\n      margin: 5px 2.9px 0 2.9px;\n    }\n    .loan__slider__widget .align--right {\n      text-align: right;\n    }\n    .loan__slider__widget .align--center {\n      text-align: center;\n    }\n    .loan__slider__widget .text--padding-top {\n      padding-top: 10px;\n    }\n    .loan__slider__widget .row {\n      position: relative;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      margin: 0 auto;\n    }\n    .loan__slider__widget .row.row--slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 0;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .row.row--slider input {\n      outline: none;\n    }\n    .loan__slider__widget .card.card--loan-slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      border-bottom: solid 1px #ccc;\n      margin: 0 5px;\n      padding: 15px 0 5px;\n      font-size: 20px;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card.card--loan-slider:last-child {\n      border-bottom: 0;\n    }\n    .loan__slider__widget .card.card--loan-slider button {\n      margin-bottom: 15px;\n    }\n    .loan__slider__widget .card.card--loan-content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 17px 0 15px;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--loan-content p,\n    .loan__slider__widget .card.card--loan-content a.link:link {\n      font-size: 13px;\n      margin-bottom: 13px;\n    }\n    .loan__slider__widget .card.card--loan-content h2 {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin-bottom: 30px;\n      line-height: 1.5em;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-top {\n      padding-top: 0;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-bot {\n      padding-bottom: 0;\n    }\n    .loan__slider__widget .card.card--loan-content .tnk-list {\n      color: #444;\n    }\n    .loan__slider__widget .card.card--bg-grey {\n      background-color: #ececec;\n    }\n    .loan__slider__widget .card.card--bg-blue {\n      background-color: #004c7b;\n      color: #fff;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--no-padding {\n      padding-top: 10px;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .card.card--confirm-action {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 18px;\n      text-align: left;\n    }\n    .loan__slider__widget .card span,\n    .loan__slider__widget .card p {\n      font-family: 'HelveticaLight', sans-serif;\n      font-size: 13px;\n    }\n    .loan__slider__widget .card p {\n      color: #555;\n    }\n    .loan__slider__widget .card p span {\n      color: #fff;\n    }\n    .loan__slider__widget .card span.loan__amount {\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      font-size: 21px;\n      color: #fff;\n    }\n    .loan__slider__widget .card h2 {\n      color: #535353;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal {\n      height: 40px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-background {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-fill {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card p.help-block {\n      font-weight: bold;\n      font-size: 14px;\n    }\n    .loan__slider__widget .card p.help-block span {\n      color: #fff;\n    }\n    .loan__slider__widget .card p.help-block-error {\n      color: #a94442;\n    }\n    .loan__slider__widget .card span.back__circle {\n      border-radius: 100%;\n      background-color: #004c7b;\n      color: #fff;\n      padding: 3px 5px;\n      font-weight: bold;\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .table td {\n      color: #535353;\n    }\n    .loan__slider__widget .card .loan__description {\n      text-align: center;\n      position: relative;\n      margin-top: 15px;\n    font-size\n      color: #8a8989;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card .loan__description.text--big {\n      font-size: 16px;\n    }\n    .loan__slider__widget .card .loan__description.text--sm {\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .loan__description.text--left {\n      text-align: left;\n    }\n    .loan__slider__widget .card .loan__description.text--clr-white {\n      color: #fff;\n    }\n    .loan__slider__widget .card .slider-title {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      padding-bottom: 0;\n      margin-top: 0;\n      margin-bottom: 0;\n      color: #7f7f7f;\n    }\n    .loan__slider__widget input[type=range] {\n      height: auto;\n      -webkit-appearance: none;\n      margin: 14px 0 0 0;\n      width: 100%;\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]:focus {\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      border: none;\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-thumb {\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      height: 24px;\n      width: 24px;\n      border: none;\n      border-radius: 100%;\n      background-color: #81be41;\n      cursor: pointer;\n      -webkit-appearance: none;\n      margin-top: -10px;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      animate: 0.2s;\n      box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n      border: 0px solid #000101;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-thumb {\n      box-shadow: 0px 0px 0px #000;\n      border: 0px solid #000;\n      height: 24px;\n      width: 24px;\n      outline: none;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n      margin-top: -14px;\n    }\n    .loan__slider__widget input[type=range]::-ms-track {\n      width: 100%;\n      height: 13px;\n      cursor: pointer;\n      animate: 0.2s;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-lower {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-upper {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-thumb {\n      margin-top: 1px;\n      box-shadow: 0px 0px 0px #000;\n      border: none;\n      height: 24px;\n      width: 24px;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n    }\n    .loan__slider__widget .col-sm-* {\n      position: relative;\n    }\n    @media screen and (min-width: 320px) and (max-width: 400px) {\n      .loan__slider__widget .card p.help-block {\n        margin-top: 5px;\n        font-size: 12px;\n      }\n    }\n    @media screen and (max-width: 320px) {\n      .tnk__button {\n        width: 100%;\n      }\n      .tnk__button.button--float-right {\n        margin: 10px 0 0;\n      }\n    }\n    input[type='number']::-webkit-outer-spin-button,\n    input[type='number']::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"remainingLoan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["remainingLoan"]}]}],"accessToken":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["accessToken"]}]}],"errorServerURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["errorServerURI"]}]}],"successURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["successURI"]}]}],"formURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formURI"]}]}],"sliderType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderType"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"getInitialData":[{"__symbolic":"method"}],"calcInitSlider":[{"__symbolic":"method"}],"calculateSliderLoanMinimun":[{"__symbolic":"method"}],"calcInitMonthly":[{"__symbolic":"method"}],"calcMonthly":[{"__symbolic":"method"}],"submitLoan":[{"__symbolic":"method"}]}},"TNKAuthLoanFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","name":"TNKLoanSliderModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"},{"__symbolic":"reference","module":"ng2-currency-mask","name":"CurrencyMaskModule"},{"__symbolic":"reference","name":"TNKDateDropdownModule"},{"__symbolic":"reference","name":"ɵm"}],"declarations":[{"__symbolic":"reference","name":"TNKAuthLoanFormComponent"}],"exports":[{"__symbolic":"reference","name":"TNKAuthLoanFormComponent"}],"providers":[{"__symbolic":"reference","name":"TNKAuthLoanFormService"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{}},"TNKAuthLoanFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"auth-loan-form","template":"\n    <ng-container *ngIf=\"!showForm\">\n      <h3 class=\"alert title alert-success\">\n        Mohon menunggu, sedang mengambil data pinjaman anda...\n      </h3>\n    </ng-container>\n\n    <div class=\"loanform__wrapper\" *ngIf=\"!loanFormData.submitBusy && showForm\">\n      <form [formGroup]=\"loanFormData.form\">\n        <ng-container *ngIf=\"loanFormData.step == 1\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Data Pribadi</h4>\n            <br />\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.mobilePhoneNumber,\n                'has-success': loanFormData.form.controls.mobilePhoneNumber.valid\n              }\"\n            >\n              <label class=\"help-block\">Nomor Handphone</label>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">+62</span>\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"mobilePhoneNumber\"\n                  formControlName=\"mobilePhoneNumber\"\n                  id=\"inp_noHandphone\"\n                  [attr.disabled]=\"checkInputValid('mobilePhoneNumber')\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <p class=\"help-block\">{{ loanFormData.errors.mobilePhoneNumber }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.emailAddress,\n                'has-success': loanFormData.form.controls.emailAddress.valid\n              }\"\n            >\n              <label class=\"help-block\">Email</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"emailAddress\"\n                formControlName=\"emailAddress\"\n                id=\"inp_email\"\n                [attr.disabled]=\"checkInputValid('emailAddress')\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.emailAddress }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.emailIsOwn,\n                'has-success': loanFormData.form.controls.emailIsOwn.valid\n              }\"\n            >\n              <label class=\"help-block\">Kepemilikan Email</label>\n\n              <select\n                class=\"form-control\"\n                name=\"emailIsOwn\"\n                formControlName=\"emailIsOwn\"\n                id=\"inp_emailIsOwn\"\n                [attr.disabled]=\"checkInputValid('emailIsOwn')\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Personal\">Email Pribadi</option>\n                <option value=\"Corporate\">Email Kantor</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.emailIsOwn }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.bankName,\n                'has-success': loanFormData.form.controls.bankName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Bank</label>\n              <input\n                class=\"form-control\"\n                name=\"bankName\"\n                formControlName=\"bankName\"\n                id=\"inp_namaBank\"\n                list=\"inp_namaBankList\"\n                [attr.disabled]=\"checkInputValid('bankName')\"\n                placeholder=\"Ketik nama bank anda\"\n              />\n              <datalist id=\"inp_namaBankList\">\n                <option\n                  *ngFor=\"let bank of loanFormData.banks\"\n                  value=\"{{ bank.name }}\"\n                ></option>\n              </datalist>\n\n              <p class=\"help-block\">{{ loanFormData.errors.bankName }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.bankAccount,\n                'has-success': loanFormData.form.controls.bankAccount.valid\n              }\"\n            >\n              <label class=\"help-block\">Nomor Rekening</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"bankAccount\"\n                formControlName=\"bankAccount\"\n                placeholder=\"Uang pinjaman akan dikirim ke nomor ini\"\n                id=\"inp_noRekening\"\n                [attr.disabled]=\"checkInputValid('bankAccount')\"\n                (keypress)=\"numericalInputOnly($event)\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.bankAccount }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.mothersName,\n                'has-success': loanFormData.form.controls.mothersName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Ibu Kandung</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"mothersName\"\n                formControlName=\"mothersName\"\n                id=\"inp_namaIbu\"\n                [attr.disabled]=\"checkInputValid('mothersName')\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.mothersName }}</p>\n            </div>\n\n            <!-- <p style=\"margin-top: 10px\" *ngIf=\"!loanFormData.loadingKTP && referralForm\">\n    \t\t\t\t\t<span class=\"icon glyphicon glyphicon-refresh\"></span> Mohon menunggu, sedang mengecek KTP Anda...</p> -->\n          </div>\n\n          <!-- <div class=\"loanform__card\" *ngIf=\"!referralForm\">\n    \t\t\t\t<h4 class=\"border__title\">Area Layanan</h4>\n\t\t\t\t\n    \t\t\t\t<p>Saat ini Tunaiku dapat melayani Anda yang tinggal atau bekerja di area:</p>\n\n    \t\t\t\t<p>\n    \t\t\t\t\t<b><span class=\"icon fa fa-map-marker\"></span> JABODETABEK</b><br>\n    \t\t\t\t\tJakarta, Bogor, Depok, Tangerang, Tangerang Selatan, Bekasi\n    \t\t\t\t</p>\n\n    \t\t\t\t<p>\n    \t\t\t\t\t<b><span class=\"icon fa fa-map-marker\"></span> SIDOARJO</b>\n    \t\t\t\t</p>\n\n    \t\t\t\t<p>\n    \t\t\t\t\t<b><span class=\"icon fa fa-map-marker\"></span> SURABAYA</b>\n    \t\t\t\t</p>\n\n    \t\t\t\t<p>\n    \t\t\t\t\t<b><span class=\"icon fa fa-map-marker\"></span> GRESIK</b>\n    \t\t\t\t</p>\n\n    \t\t\t\t<hr class=\"separator\">\n\n    \t\t\t\t<p>Apakah Anda tinggal atau bekerja di area layanan kami?</p>\n\n    \t\t\t\t<section>\n    \t\t\t\t\t<button id=\"inp_yaAreaLayanan\" class=\"tnk__button button--blue button--hole button--float-left button--margin-sm\" (click)=\"service.setServiceArea('yes')\" [ngClass]=\"{'button--active': loanFormData.serviceAreaIncluded == 'yes' }\" [disabled]=\"!loanFormData.loadingKTP\" style=\"margin-left: 0\"><span class=\"icon fa\" [ngClass]=\"{'fa-circle-thin': loanFormData.serviceAreaIncluded != 'yes', 'fa-check-circle': loanFormData.serviceAreaIncluded == 'yes'}\"></span> Ya</button>\n\n    \t\t            <button id=\"inp_bukanAreaLayanan\" class=\"tnk__button button--blue button--hole button--float-left button--margin-sm\" (click)=\"service.setServiceArea('no')\" [ngClass]=\"{'button--active': loanFormData.serviceAreaIncluded == 'no'}\" [disabled]=\"!loanFormData.loadingKTP\"><span class=\"icon fa\" [ngClass]=\"{'fa-circle-thin': loanFormData.serviceAreaIncluded != 'no', 'fa-check-circle': loanFormData.serviceAreaIncluded == 'no'}\"></span> Tidak</button>\n\n    \t\t            <span class=\"clearfix\"></span>\n\n    \t\t            <p style=\"margin-top: 10px\" [hidden]=\"loanFormData.loadingKTP\"><span class=\"icon glyphicon glyphicon-refresh\"></span> Mohon menunggu, sedang mengecek KTP Anda...</p>\n    \t\t        </section>\n\n    \t\t        <div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"loanFormData.serviceAreaIncluded == 'no' && loanFormData.loadingKTP\">\n    \t\t\t\t\t<h4 class=\"alert-heading\">Area Layanan</h4>\n    \t\t\t\t\t<hr>\n    \t\t\t\t\t<p>Mohon maaf, saat ini Tunaiku belum bisa melayani di daerah Anda. Untuk pertimbangan perluasan wilayah, sebutkan wilayah dan berikan bintang 5 di Google Review kami.</p>\n\n    \t\t\t\t\t<button id=\"inp_formGoogleReview\" class=\"tnk__button button--hole button--red button--margin-md button--sm\" onclick=\"javascript:window.open('https://www.google.co.id/search?ei=OHxUWrmUPIjrvgTSl6roBA&q=kredit%20tanpa%20agunan&oq=kredit+tanpa&gs_l=psy-ab.3.1.0i67k1j0i131k1j0i67k1j0l7.7177.8899.0.9792.12.8.0.4.4.0.161.760.0j6.6.0....0...1c.1.64.psy-ab..2.10.788....0.8fruiqRnp6Y&npsic=0&rflfq=1&rlha=0&rllag=-6181926,106809271,2087&tbm=lcl&rldimm=15109014892766128888&ved=0ahUKEwj_6YmpusrYAhUmSY8KHQ_uD7IQvS4IcDAB&rldoc=1&tbs=lrf:!2m1!1e2!2m1!1e3!3sIAE,lf:1,lf_ui:2#rlfi=hd:;si:15109014892766128888;mv:!1m3!1d255097.4225906899!2d106.8321983!3d-6.362325800000001!2m3!1f0!2f0!3f0!3m2!1i270!2i386!4f13.1;tbs:lrf:!2m1!1e2!2m1!1e3!3sIAE,lf:1,lf_ui:2', '_blank')\">Voting di Google Review</button>\n    \t\t\t\t</div>\n    \t\t\t</div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 2\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Data KTP</h4>\n            <br />\n            <div class=\"form-group\">\n              <label class=\"help-block\">Nomor KTP (NIK)</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"pin_step2\"\n                [attr.value]=\"loanFormData.form.controls['pin'].value\"\n                [attr.disabled]=\"loanFormData.form.controls.pin.valid\"\n              />\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.ktpName,\n                'has-success': loanFormData.form.controls.ktpName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Lengkap (sesuai KTP)</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"ktpName\"\n                formControlName=\"ktpName\"\n                id=\"inp_namaKTP\"\n                (blur)=\"service.onNameChanged($event.target.value)\"\n                [attr.disabled]=\"checkInputValid('ktpName')\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.ktpName }}</p>\n            </div>\n\n            <span class=\"clearfix\"></span>\n\n            <div\n              class=\"form-group\"\n              [class.has-error]=\"loanFormData.errors.birthProvinceId\"\n              [class.has-success]=\"loanFormData.form.controls.birthProvinceId.valid\"\n            >\n              <label class=\"help-block\">Tempat Lahir</label>\n              <p>Provinsi</p>\n              <select\n                class=\"form-control\"\n                name=\"birthProvinceId\"\n                formControlName=\"birthProvinceId\"\n                id=\"inp_tempatLahirProvinsi\"\n                (change)=\"service.setBirthPlace($event, 'province')\"\n                [attr.disabled]=\"checkInputValid('birthProvinceId')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let province of loanFormData.provinces\"\n                  [value]=\"province.province_id\"\n                >\n                  {{ province.province }}\n                </option>\n              </select>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [class.has-error]=\"loanFormData.errors.birthCityId\"\n              [class.has-success]=\"loanFormData.form.controls.birthCityId.valid\"\n            >\n              <label class=\"help-block\">Tempat Lahir</label>\n              <p>Kota</p>\n              <select\n                class=\"form-control\"\n                name=\"birthCityid\"\n                formControlName=\"birthCityId\"\n                id=\"inp_tempatLahirKota\"\n                (change)=\"service.setBirthPlace($event, 'city')\"\n                [attr.disabled]=\"checkInputValid('birthCityId')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let city of loanFormData.birthCities\"\n                  [value]=\"city.city_id\"\n                >\n                  {{ city.city }}\n                </option>\n              </select>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.dateOfBirth,\n                'has-success': loanFormData.form.controls.dateOfBirth.valid\n              }\"\n            >\n              <label class=\"help-block\">Tanggal Lahir</label>\n              <p>\n                Minimal umur 21 tahun akan kami cek kesesuaian dengan KTP Anda saat\n                Tanda Tangan Kontrak\n              </p>\n\n              <date-dropdown\n                #dob\n                [dob]=\"loanFormData.form.value.dateOfBirth\"\n                [bindForm]=\"loanFormData.form\"\n                [bindControlName]=\"'dateOfBirth'\"\n                (dateModel)=\"service.setBirthDate($event)\"\n                [disabledInput]=\"loanFormData.form.controls.dateOfBirth.valid\"\n              ></date-dropdown>\n\n              <p class=\"help-block\">{{ loanFormData.errors.dateOfBirth }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.gender,\n                'has-success': loanFormData.form.controls.gender.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Kelamin</label>\n\n              <button\n                id=\"inp_laki\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                [ngClass]=\"{\n                  'button--active': loanFormData.form.value['gender'] == 'Male'\n                }\"\n                (click)=\"loanFormData.form.patchValue({ gender: 'Male' })\"\n                [attr.disabled]=\"checkInputValid('gender')\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': loanFormData.form.value.gender != 'Male',\n                    'fa-check-circle': loanFormData.form.value.gender == 'Male'\n                  }\"\n                ></span>\n                Laki-Laki\n              </button>\n\n              <button\n                id=\"inp_perempuan\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                [ngClass]=\"{\n                  'button--active': loanFormData.form.value['gender'] == 'Female'\n                }\"\n                (click)=\"loanFormData.form.patchValue({ gender: 'Female' })\"\n                [attr.disabled]=\"checkInputValid('gender')\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': loanFormData.form.value.gender != 'Female',\n                    'fa-check-circle': loanFormData.form.value.gender == 'Female'\n                  }\"\n                ></span>\n                Perempuan\n              </button>\n\n              <p class=\"help-block\">{{ loanFormData.errors.gender }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [hidden]=\"!loanFormData.PINDataConfirmationBlock\"\n            >\n              <hr />\n\n              <label class=\"help-block\">\n                Yakin data pribadi Anda berbeda dengan data di KTP?\n              </label>\n\n              <p>\n                Sistem kami telah secara otomatis mengisi data pribadi Anda dari\n                nomor KTP Anda. Jika Anda mengubah data tersebut, maka data ini akan\n                berbeda dengan yang tertulis di KTP Anda.\n              </p>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <button\n                  class=\"tnk__button button--hole button--blue button--block\"\n                  (click)=\"service.confirmPINDataChanges(true)\"\n                >\n                  Simpan Perubahan\n                </button>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <button\n                  class=\"tnk__button button--hole button--blue button--block\"\n                  (click)=\"service.confirmPINDataChanges(false)\"\n                >\n                  Batalkan Perubahan\n                </button>\n              </div>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.religion,\n                'has-success': loanFormData.form.controls.religion.valid\n              }\"\n            >\n              <label class=\"help-block\">Agama</label>\n\n              <select\n                class=\"form-control\"\n                name=\"religion\"\n                formControlName=\"religion\"\n                id=\"inp_agama\"\n                [attr.disabled]=\"checkInputValid('religion')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Muslim\">Islam</option>\n                <option value=\"Christian\">Kristen</option>\n                <option value=\"Catholic\">Katolik</option>\n                <option value=\"Hindu\">Hindu</option>\n                <option value=\"Buddha\">Budha</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.religion }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.citizenship,\n                'has-success': loanFormData.form.controls.citizenship.valid\n              }\"\n            >\n              <label class=\"help-block\">Kewarganegaraan</label>\n\n              <select\n                class=\"form-control\"\n                name=\"citizenship\"\n                formControlName=\"citizenship\"\n                id=\"inp_kewarganegaraan\"\n                [attr.disabled]=\"checkInputValid('citizenship')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Indonesian\">WNI</option>\n                <option value=\"NonIndonesian\">WNA</option>\n                <option value=\"PermanentResidence\">Permanent Residence</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.citizenship }}</p>\n            </div>\n          </div>\n\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Alamat KTP</h4>\n            <br />\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_street,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_street.valid\n              }\"\n            >\n              <label class=\"help-block\">Alamat KTP</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"domicileAddress_street\"\n                formControlName=\"domicileAddress_street\"\n                id=\"inp_alamatKTP\"\n                [attr.disabled]=\"checkInputValid('domicileAddress_street')\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_street }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_buildingType,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_buildingType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Tempat Tinggal KTP</label>\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_buildingType\"\n                formControlName=\"domicileAddress_buildingType\"\n                id=\"inp_jenisTinggalKTP\"\n                [attr.disabled]=\"checkInputValid('domicileAddress_buildingType')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Rumah\">Rumah</option>\n                <option value=\"Apartemen\">Apartemen</option>\n                <option value=\"Kantor\">Kantor</option>\n              </select>\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_buildingType }}\n              </p>\n            </div>\n\n            <div class=\"row\" style=\"margin: 0\">\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_bldNumber,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_bldNumber.valid\n                  }\"\n                >\n                  <label class=\"help-block\">Nomor Blok</label>\n                  <p>Isi 0 jika tidak ada</p>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_bldNumber\"\n                    formControlName=\"domicileAddress_bldNumber\"\n                    id=\"inp_noBlokKTP\"\n                    [attr.disabled]=\"checkInputValid('domicileAddress_bldNumber')\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_bldNumber }}\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_flatNumber,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_flatNumber.valid\n                  }\"\n                >\n                  <label class=\"help-block\">Nomor Rumah</label>\n                  <p>Isi 0 jika tidak ada</p>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_flatNumber\"\n                    formControlName=\"domicileAddress_flatNumber\"\n                    id=\"inp_noRumahKTP\"\n                    [attr.disabled]=\"checkInputValid('domicileAddress_flatNumber')\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_flatNumber }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"row\" style=\"margin: 0\">\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_rt,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_rt.valid\n                  }\"\n                >\n                  <label class=\"help-block\">RT</label>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_rt\"\n                    formControlName=\"domicileAddress_rt\"\n                    id=\"inp_RTKTP\"\n                    [attr.disabled]=\"checkInputValid('domicileAddress_rt')\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_rt }}\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_rw,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_rw.valid\n                  }\"\n                >\n                  <label class=\"help-block\">RW</label>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_rw\"\n                    formControlName=\"domicileAddress_rw\"\n                    id=\"inp_RWKTP\"\n                    [attr.disabled]=\"checkInputValid('domicileAddress_rw')\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_rw }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_province,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_province.valid\n              }\"\n            >\n              <label class=\"help-block\">Provinsi</label>\n              <p>Isi provinsi untuk mengisi kolom-kolom di bawah</p>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_province\"\n                formControlName=\"domicileAddress_province\"\n                id=\"inp_provinsiKTP\"\n                (change)=\"\n                  service.getRegions(\n                    { province: $event.target.value },\n                    'city',\n                    'subscribe',\n                    null,\n                    true\n                  )\n                \"\n                [attr.disabled]=\"checkInputValid('domicileAddress_province')\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let province of loanFormData.provinces\"\n                  [value]=\"province.province_id\"\n                >\n                  {{ province.province }}\n                </option>\n              </select>\n\n              <p\n                style=\"margin-top: 10px\"\n                *ngIf=\"loanFormData.provinces.length == 0\"\n              >\n                <span class=\"glyphicon glyphicon-refresh\"></span>\n                Sedang mengambil data provinsi...\n              </p>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_province }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_city,\n                'has-success': loanFormData.form.controls.domicileAddress_city.valid\n              }\"\n              [hidden]=\"loanFormData.cities.length == 0\"\n            >\n              <label class=\"help-block\">Kota</label>\n\n              <select\n                [attr.disabled]=\"checkInputValid('domicileAddress_city')\"\n                class=\"form-control\"\n                name=\"domicileAddress_city\"\n                formControlName=\"domicileAddress_city\"\n                id=\"inp_kotaKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: $event.target.value\n                    },\n                    'district',\n                    'subscribe',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let city of loanFormData.cities\"\n                  [value]=\"city.city_id\"\n                >\n                  {{ city.city }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_city }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_district,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_district.valid\n              }\"\n              [hidden]=\"loanFormData.districts.length == 0\"\n            >\n              <label class=\"help-block\">Kecamatan</label>\n\n              <select\n                [attr.disabled]=\"checkInputValid('domicileAddress_district')\"\n                class=\"form-control\"\n                name=\"domicileAddress_district\"\n                formControlName=\"domicileAddress_district\"\n                id=\"inp_kecamatanKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: loanFormData.form.value.domicileAddress_city,\n                      district: $event.target.value\n                    },\n                    'village',\n                    'subscribe',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let district of loanFormData.districts\"\n                  [value]=\"district.district_id\"\n                >\n                  {{ district.district }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_district }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_village,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_village.valid\n              }\"\n              [hidden]=\"loanFormData.villages.length == 0\"\n            >\n              <label class=\"help-block\">Kelurahan/Desa</label>\n\n              <select\n                [attr.disabled]=\"checkInputValid('domicileAddress_village')\"\n                class=\"form-control\"\n                name=\"domicileAddress_village\"\n                formControlName=\"domicileAddress_village\"\n                id=\"inp_kelurahanKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: loanFormData.form.value.domicileAddress_city,\n                      district: loanFormData.form.value.domicileAddress_district,\n                      village: $event.target.value\n                    },\n                    'postal_code',\n                    'subscribe',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let village of loanFormData.villages\"\n                  [value]=\"village.village_id\"\n                >\n                  {{ village.village }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_village }}\n              </p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 3\">\n          <div class=\"loanform__card\">\n            <h4>Status Tempat Tinggal</h4>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_propertyType,\n                'has-success': loanFormData.form.controls.housing_propertyType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Tempat Tinggal</label>\n\n              <select\n                class=\"form-control\"\n                name=\"housing_propertyType\"\n                formControlName=\"housing_propertyType\"\n                id=\"inp_jenisTinggal\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Apartment\">Apartemen</option>\n                <option value=\"House\">Rumah</option>\n                <option value=\"HomeStore\">Ruko</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_propertyType }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_residentialType,\n                'has-success':\n                  loanFormData.form.controls.housing_residentialType.valid\n              }\"\n            >\n              <label class=\"help-block\">Status Kepemilikan Rumah</label>\n\n              <select\n                class=\"form-control\"\n                name=\"housing_residentialType\"\n                formControlName=\"housing_residentialType\"\n                id=\"inp_statusTinggal\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Family\">Keluarga</option>\n                <option value=\"BoardingHouse\">Kost</option>\n                <option value=\"Parents\">Orang Tua</option>\n                <option value=\"OfficeHousing\">Rumah Dinas</option>\n                <option value=\"Personal\">Sendiri</option>\n                <option value=\"Contract\">Sewa/Kontrak</option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_residentialType }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_monthlyCost,\n                'has-success': loanFormData.form.controls.housing_monthlyCost.valid\n              }\"\n            >\n              <label class=\"help-block\">Sewa/Cicilan per bulan</label>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"housing_monthlyCost_show\"\n                  maxlength=\"20\"\n                  formControlName=\"housing_monthlyCost_show\"\n                  id=\"inp_sewaTinggal\"\n                  [value]=\"\n                    numberDelimiter(loanFormData.form.value.housing_monthlyCost)\n                  \"\n                  (keyup)=\"\n                    handleDelimiter('housing_monthlyCost', $event.target.value)\n                  \"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <input\n                type=\"hidden\"\n                name=\"housing_monthlyCost\"\n                formControlName=\"housing_monthlyCost\"\n                id=\"inp_sewaTinggal\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_monthlyCost }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_expenseCost,\n                'has-success': loanFormData.form.controls.housing_expenseCost.valid\n              }\"\n            >\n              <label class=\"help-block\">Biaya PLN & PDAM per Bulan</label>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"housing_expenseCost_show\"\n                  maxlength=\"20\"\n                  formControlName=\"housing_expenseCost_show\"\n                  id=\"inp_biayaTinggal\"\n                  [value]=\"\n                    numberDelimiter(loanFormData.form.value.housing_expenseCost)\n                  \"\n                  (keyup)=\"\n                    handleDelimiter('housing_expenseCost', $event.target.value)\n                  \"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <input\n                type=\"hidden\"\n                name=\"housing_expenseCost\"\n                formControlName=\"housing_expenseCost\"\n                id=\"inp_biayaTinggal\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_expenseCost }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_numberOfPeople,\n                'has-success':\n                  loanFormData.form.controls.housing_numberOfPeople.valid\n              }\"\n            >\n              <label class=\"help-block\">Jumlah Penghuni</label>\n              <p>Masukkan jumlah penghuni tempat tinggal Anda</p>\n\n              <input\n                type=\"tel\"\n                class=\"form-control\"\n                name=\"housing_numberOfPeople\"\n                formControlName=\"housing_numberOfPeople\"\n                id=\"inp_jmlTinggalSerumah\"\n                (keypress)=\"numericalInputOnly($event)\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_numberOfPeople }}\n              </p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 3\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Alamat Tempat Tinggal</h4>\n\n            <p class=\"subtitle\">\n              Pastikan Anda tinggal/bekerja di Area Layanan Kami\n            </p>\n\n            <!-- <div class=\"form-group\">\n    \t\t\t\t\t<label style=\"margin-bottom: 10px\">Apakah alamat tempat tinggal Anda sama dengan alamat yang tertulis di KTP Anda?</label><br>\n\n    \t\t\t\t\t<button class=\"tnk__button button--hole button--blue button--margin-sm\" (click)=\"service.setDomicileAsContact(true)\" [class.button--active]=\"!loanFormData.showStep5Form\" id=\"inp_domisiliSama\"><span class=\"icon fa\" [ngClass]=\"{'fa-circle-thin': loanFormData.showStep5Form, 'fa-check-circle': !loanFormData.showStep5Form}\"></span> Sama</button>\n\n    \t\t\t\t\t<button class=\"tnk__button button--hole button--blue button--margin-sm\" (click)=\"service.setDomicileAsContact(false)\" [class.button--active]=\"loanFormData.showStep5Form\" id=\"inp_domisiliBeda\"><span class=\"icon fa\" [ngClass]=\"{'fa-circle-thin': !loanFormData.showStep5Form, 'fa-check-circle': loanFormData.showStep5Form}\"></span> Berbeda</button>\n\n    \t\t\t\t\t<hr>\n\n    \t\t\t\t\t<p class=\"bold\">\n    \t\t\t\t\t\t- Tidak masalah alamat tinggal berbeda dengan KTP<br>\n    \t\t\t\t\t\t- Pastikan Anda tinggal/bekerja di Area Layanan Kami\n    \t\t\t\t\t</p>\n    \t\t\t\t</div> -->\n\n            <ng-container>\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_street,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_street.valid\n                }\"\n              >\n                <hr />\n\n                <label class=\"help-block\">Alamat Tempat Tinggal</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"contactAddress_street\"\n                  formControlName=\"contactAddress_street\"\n                  id=\"inp_alamatKTPTinggal\"\n                />\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_street }}\n                </p>\n              </div>\n\n              <div class=\"row\" style=\"margin: 0\">\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_bldNumber,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_bldNumber.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">Nomor Blok</label>\n                    <p>Isi 0 jika tidak ada</p>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_bldNumber\"\n                      formControlName=\"contactAddress_bldNumber\"\n                      id=\"inp_noBlokKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_bldNumber }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_flatNumber,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_flatNumber.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">Nomor Rumah</label>\n                    <p>Isi 0 jika tidak ada</p>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_flatNumber\"\n                      formControlName=\"contactAddress_flatNumber\"\n                      id=\"inp_noRumahKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_flatNumber }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row\" style=\"margin: 0\">\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_rt,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_rt.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">RT</label>\n\n                    <input\n                      type=\"tel\"\n                      class=\"form-control\"\n                      name=\"contactAddress_rt\"\n                      formControlName=\"contactAddress_rt\"\n                      id=\"inp_RTKTPTinggal\"\n                      (keypress)=\"numericalInputOnly($event)\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_rt }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_rw,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_rw.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">RW</label>\n\n                    <input\n                      type=\"tel\"\n                      class=\"form-control\"\n                      name=\"contactAddress_rw\"\n                      formControlName=\"contactAddress_rw\"\n                      id=\"inp_RWKTPTinggal\"\n                      (keypress)=\"numericalInputOnly($event)\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_rw }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_province,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_province.valid\n                }\"\n              >\n                <label class=\"help-block\">Provinsi</label>\n                <p>Isi provinsi untuk mengisi kolom-kolom di bawah</p>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_province\"\n                  formControlName=\"contactAddress_province\"\n                  id=\"inp_provinsiKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      { province: $event.target.value },\n                      'city',\n                      'subscribe',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let province of loanFormData.provinces\"\n                    [value]=\"province.province_id\"\n                  >\n                    {{ province.province }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_province }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_city,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_city.valid\n                }\"\n                [hidden]=\"loanFormData.citiesContact.length == 0\"\n              >\n                <label class=\"help-block\">Kota</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_city\"\n                  formControlName=\"contactAddress_city\"\n                  id=\"inp_kotaKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: $event.target.value\n                      },\n                      'district',\n                      'subscribe',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let city of loanFormData.citiesContact\"\n                    [value]=\"city.city_id\"\n                  >\n                    {{ city.city }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_city }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_district,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_district.valid\n                }\"\n                [hidden]=\"loanFormData.districtsContact.length == 0\"\n              >\n                <label class=\"help-block\">Kecamatan</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_district\"\n                  formControlName=\"contactAddress_district\"\n                  id=\"inp_kecamatanKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: loanFormData.form.value.contactAddress_city,\n                        district: $event.target.value\n                      },\n                      'village',\n                      'subscribe',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let district of loanFormData.districtsContact\"\n                    [value]=\"district.district_id\"\n                  >\n                    {{ district.district }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_district }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_village,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_village.valid\n                }\"\n                [hidden]=\"loanFormData.villagesContact.length == 0\"\n              >\n                <label class=\"help-block\">Kelurahan/Desa</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_village\"\n                  formControlName=\"contactAddress_village\"\n                  id=\"inp_kelurahanKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: loanFormData.form.value.contactAddress_city,\n                        district: loanFormData.form.value.contactAddress_district,\n                        village: $event.target.value\n                      },\n                      'postal_code',\n                      'subscribe',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let village of loanFormData.villagesContact\"\n                    [value]=\"village.village_id\"\n                  >\n                    {{ village.village }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_village }}\n                </p>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 4\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Pekerjaan Saat Ini</h4>\n            <p class=\"subtitle bold\">\n              Kami akan melakukan tanda tangan kontrak dengan kurir ke tempat kerja\n              Anda\n            </p>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_jobType,\n                'has-success': loanFormData.form.controls.income_jobType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Pekerjaan</label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_jenisKerja\"\n                name=\"income_jobType\"\n                formControlName=\"income_jobType\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"PublicServant\">PNS</option>\n                <option value=\"PrivateEmployee\">Swasta</option>\n                <option value=\"RetiredPublicServant\">Pensiunan PNS</option>\n                <option value=\"Retired\">Pensiunan Biasa</option>\n                <option value=\"MilitaryPolice\">TNI/Polri</option>\n                <option value=\"Entrepreneur\">Wiraswasta</option>\n                <option value=\"Student\">Pelajar</option>\n                <option value=\"Unemployed\">Tidak Bekerja</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.income_jobType }}</p>\n            </div>\n\n            <!-- Loan purpose Entrepreneur -->\n            <div\n              class=\"form-group\"\n              *ngIf=\"\n                loanFormData.form.value.loanPurpose === 'VentureCapital' &&\n                loanFormData.form.value.income_jobType === 'Entrepreneur'\n              \"\n            >\n              <label class=\"help-block\">\n                Bagaimana Anda Menggunakan Dana Pinjaman yang Akan Anda Terima?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_loanPurposeOfWorkingCapital\"\n                formControlName=\"income_loanPurposeOfWorkingCapital\"\n                id=\"inp_loanPurposeOfWorkingCapital\"\n              >\n                <option value=\"\">Pilih Salah Satu</option>\n                <option\n                  value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.BUY_MORE_INVENTORIES }}\"\n                >\n                  Menambah persediaan/menambah barang\n                </option>\n                <option\n                  value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.PAY_SHOP_OR_OUTLET_RENTAL }}\"\n                >\n                  Membayar sewa tempat/toko/gedung\n                </option>\n                <option\n                  value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.RENOVATE_SHOP_OR_OUTLET }}\"\n                >\n                  Renovasi tempat/toko/gedung\n                </option>\n                <option\n                  value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.EXPAND_OR_ADD_MORE_SHOP }}\"\n                >\n                  Membuka/menambah usaha baru\n                </option>\n                <option value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.PAY_BACK_LOANS }}\">\n                  Membayar pinjaman lainnya\n                </option>\n                <option\n                  value=\"{{ LOAN_PURPOSE_ENTREPRENEUR.RECRUIT_MORE_EMPLOYEES }}\"\n                >\n                  Membayar/menambah karyawan\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.contactAddress_province }}\n              </p>\n            </div>\n            <!-- End of Loan purpose Entrepreneur -->\n\n            <section\n              [hidden]=\"\n                loanFormData.form.value.income_jobType != 'PublicServant' &&\n                loanFormData.form.value.income_jobType != 'PrivateEmployee' &&\n                loanFormData.form.value.income_jobType != 'MilitaryPolice'\n              \"\n            >\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_employmentStatus,\n                  'has-success':\n                    loanFormData.form.controls.income_employmentStatus.valid\n                }\"\n              >\n                <label class=\"help-block\">Status Pekerjaan</label>\n\n                <select\n                  class=\"form-control\"\n                  id=\"inp_statusKerja\"\n                  name=\"income_employmentStatus\"\n                  formControlName=\"income_employmentStatus\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option value=\"Permanent\">Permanen</option>\n                  <option value=\"Contract\">Kontrak</option>\n                  <option value=\"Daily\">Lepas/Harian</option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_employmentStatus }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_employerName,\n                  'has-success':\n                    loanFormData.form.controls.income_employerName.valid\n                }\"\n              >\n                <label class=\"help-block\">\n                  Nama Perusahaan / Nama usaha jika Anda pengusaha\n                </label>\n                <!-- <p>Nama usaha jika Anda pengusaha</p> -->\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"income_employerName\"\n                  formControlName=\"income_employerName\"\n                  id=\"inp_namaPerusahaan\"\n                  maxlength=\"80\"\n                />\n\n                <p class=\"text__length\">\n                  {{\n                    loanFormData.form.controls.income_employerName.value\n                      ? loanFormData.form.controls.income_employerName.value.length\n                      : 0\n                  }}/80\n                </p>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_employerName }}\n                </p>\n              </div>\n\n              <!-- <div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.contactAddress_province, 'has-success': loanFormData.form.controls.contactAddress_province.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Bidang Usaha</label>\n\n    \t\t\t\t\t\t<select class=\"form-control\" name=\"contactAddress_province\" formControlName=\"contactAddress_province\" id=\"inp_bidangUsaha\">\n    \t\t\t\t\t\t\t<option value=\"0\">Pilih Salah Satu</option>\n    \t\t\t\t\t\t\t<option value=\"1\">Perbankan/Akunting</option>\n    \t\t\t\t\t\t\t<option value=\"2\">Telekomunikasi</option>\n    \t\t\t\t\t\t\t<option value=\"3\">Jasa</option>\n    \t\t\t\t\t\t\t<option value=\"4\">Perdagangan/Distributor</option>\n    \t\t\t\t\t\t\t<option value=\"5\">Manufaktur</option>\n    \t\t\t\t\t\t\t<option value=\"99\">Lainnya</option>\n    \t\t\t\t\t\t</select>\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.contactAddress_province}}</p>\n    \t\t\t\t\t</div> -->\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_workPosition,\n                  'has-success':\n                    loanFormData.form.controls.income_workPosition.valid\n                }\"\n              >\n                <label class=\"help-block\">Jabatan di Perusahaan</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"income_workPosition\"\n                  formControlName=\"income_workPosition\"\n                  id=\"inp_jabatan\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option value=\"Contract\">Kontrak</option>\n                  <option value=\"Staff\">Staff</option>\n                  <option value=\"Supervisor\">Supervisor</option>\n                  <option value=\"JuniorManagement\">Manajemen Junior</option>\n                  <option value=\"MiddleManagement\">Manajemen Menengah</option>\n                  <option value=\"SeniorManagement\">Manajemen Senior</option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_workPosition }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_monthlyIncome,\n                  'has-success':\n                    loanFormData.form.controls.income_monthlyIncome.valid\n                }\"\n              >\n                <label class=\"help-block\">Penghasilan Bulanan Saat Ini</label>\n                <p>Pendapatan pekerjaan/usaha saat ini (Tidak harus UMR)</p>\n\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon\">Rp</span>\n\n                  <input\n                    type=\"tel\"\n                    class=\"form-control\"\n                    name=\"income_monthlyIncome_show\"\n                    maxlength=\"20\"\n                    formControlName=\"income_monthlyIncome_show\"\n                    id=\"inp_gaji\"\n                    [value]=\"\n                      numberDelimiter(loanFormData.form.value.income_monthlyIncome)\n                    \"\n                    (keyup)=\"\n                      handleDelimiter('income_monthlyIncome', $event.target.value)\n                    \"\n                    (keypress)=\"numericalInputOnly($event)\"\n                  />\n                </div>\n\n                <input\n                  type=\"hidden\"\n                  name=\"income_monthlyIncome\"\n                  formControlName=\"income_monthlyIncome\"\n                  id=\"inp_gaji\"\n                />\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_monthlyIncome }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_previousIncome,\n                  'has-success':\n                    loanFormData.form.controls.income_previousIncome.valid\n                }\"\n              >\n                <label class=\"help-block\">Penghasilan Bulanan Sebelumnya</label>\n                <p>Pendapatan pekerjaan, posisi atau tahun sebelumnya</p>\n\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon\">Rp</span>\n\n                  <input\n                    type=\"tel\"\n                    class=\"form-control\"\n                    name=\"income_previousIncome_show\"\n                    maxlength=\"20\"\n                    formControlName=\"income_previousIncome_show\"\n                    id=\"inp_gajiSebelumnya\"\n                    [value]=\"\n                      numberDelimiter(loanFormData.form.value.income_previousIncome)\n                    \"\n                    (keyup)=\"\n                      handleDelimiter('income_previousIncome', $event.target.value)\n                    \"\n                    (keypress)=\"numericalInputOnly($event)\"\n                  />\n                </div>\n\n                <input\n                  type=\"hidden\"\n                  name=\"income_previousIncome\"\n                  formControlName=\"income_previousIncome\"\n                  id=\"inp_gajiSebelumnya\"\n                />\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_previousIncome }}\n                </p>\n              </div>\n            </section>\n          </div>\n\n          <!-- Start of Entrepreneur Form -->\n          <div\n            class=\"loanform__card has--subtitle\"\n            *ngIf=\"loanFormData.form.value.income_jobType === 'Entrepreneur'\"\n          >\n            <h4>Detail Bisnis</h4>\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessName,\n                'has-success': loanFormData.form.controls.income_businessName.valid\n              }\"\n            >\n              <label class=\"help-block\">Apa Nama Bisnis Anda Saat Ini?</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"income_businessName\"\n                formControlName=\"income_businessName\"\n                id=\"inp_businessName\"\n                maxlength=\"80\"\n              />\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessName }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessType,\n                'has-success': loanFormData.form.controls.income_businessType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Bisnis Apa yang Anda Jalani?</label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_businessType\"\n                formControlName=\"income_businessType\"\n                id=\"inp_businessType\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"{{ BUSINESS_TYPE_ENTREPRENEUR.FOOD }}\">\n                  Makanan\n                </option>\n                <option value=\"{{ BUSINESS_TYPE_ENTREPRENEUR.RETAIL_TRADING }}\">\n                  Retail\n                </option>\n                <option value=\"{{ BUSINESS_TYPE_ENTREPRENEUR.CLOTHES_TRADING }}\">\n                  Pakaian\n                </option>\n                <option value=\"{{ BUSINESS_TYPE_ENTREPRENEUR.SERVICES }}\">\n                  Servis / Jasa\n                </option>\n                <option value=\"{{ BUSINESS_TYPE_ENTREPRENEUR.OTHERS }}\">\n                  Lain-lain\n                </option>\n              </select>\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessType }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessAge,\n                'has-success': loanFormData.form.controls.income_businessAge.valid\n              }\"\n            >\n              <label class=\"help-block\">\n                Sudah Berapa Lama Bisnis Anda Berjalan?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_businessAge\"\n                formControlName=\"income_businessAge\"\n                id=\"inp_businessAge\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"{{ BUSINESS_AGE_ENTREPRENEUR.LESS_THAN_ONE_YEAR }}\">\n                  Kurang dari satu tahun\n                </option>\n                <option value=\"{{ BUSINESS_AGE_ENTREPRENEUR.MORE_THAN_ONE_YEAR }}\">\n                  1 - 3 tahun\n                </option>\n                <option\n                  value=\"{{ BUSINESS_AGE_ENTREPRENEUR.MORE_THAN_THREE_YEARS }}\"\n                >\n                  3 - 5 tahun\n                </option>\n                <option\n                  value=\"{{ BUSINESS_AGE_ENTREPRENEUR.MORE_THAN_FIVE_YEARS }}\"\n                >\n                  5 - 10 tahun\n                </option>\n                <option value=\"{{ BUSINESS_AGE_ENTREPRENEUR.MORE_THAN_TEN_YEARS }}\">\n                  lebih dari 10 tahun\n                </option>\n              </select>\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessAge }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessIncome,\n                'has-success':\n                  loanFormData.form.controls.income_businessIncome.valid\n              }\"\n            >\n              <label class=\"help-block\">\n                Berapa Rata-Rata Keuntungan Bisnis Anda Setiap Bulannya?\n              </label>\n              <p>Jumlah pendapatan dari usaha atau toko Anda</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"income_businessIncome_show\"\n                  maxlength=\"20\"\n                  formControlName=\"income_businessIncome_show\"\n                  id=\"inp_businessIncome\"\n                  [value]=\"\n                    numberDelimiter(loanFormData.form.value.income_businessIncome)\n                  \"\n                  (keyup)=\"\n                    handleDelimiter('income_businessIncome', $event.target.value)\n                  \"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <input\n                type=\"hidden\"\n                name=\"income_businessIncome\"\n                formControlName=\"income_businessIncome\"\n                id=\"inp_businessIncome\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessIncome }}\n              </p>\n            </div>\n          </div>\n\n          <div\n            class=\"loanform__card has--subtitle\"\n            *ngIf=\"loanFormData.form.value.income_jobType === 'Entrepreneur'\"\n          >\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessPromotion,\n                'has-success':\n                  loanFormData.form.controls.income_businessPromotion.valid\n              }\"\n            >\n              <label class=\"help-block\">\n                Bagaimana Cara Anda Menjalankan Bisnis Anda?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_businessPromotion\"\n                formControlName=\"income_businessPromotion\"\n                id=\"inp_businessPromotion\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  value=\"{{ BUSINESS_PROMOTION_ENTREPRENEUR.MOSTLY_OFFLINE }}\"\n                >\n                  Offline (usaha di tempat)\n                </option>\n                <option value=\"{{ BUSINESS_PROMOTION_ENTREPRENEUR.MOSTLY_ONLINE }}\">\n                  Online (usaha menggunakan social media atau ecommerce)\n                </option>\n                <option value=\"{{ BUSINESS_PROMOTION_ENTREPRENEUR.BOTH }}\">\n                  Keduanya\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessPromotion }}\n              </p>\n            </div>\n\n            <!-- Will shown if option above is online or both -->\n            <div\n              class=\"form-group\"\n              *ngIf=\"\n                loanFormData.form.value.income_businessPromotion ===\n                  BUSINESS_PROMOTION_ENTREPRENEUR.MOSTLY_ONLINE ||\n                loanFormData.form.value.income_businessPromotion ===\n                  BUSINESS_PROMOTION_ENTREPRENEUR.BOTH\n              \"\n            >\n              <label class=\"help-block\">\n                Dimana Anda Menjalankan Bisnis Online Anda?\n              </label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_onlineChannel\"\n                name=\"income_onlineChannel\"\n                formControlName=\"income_onlineChannel\"\n              >\n                <option value=\"\">Pilih Salah Satu</option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.TOKOPEDIA }}\">\n                  Tokopedia\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.LAZADA }}\">\n                  Lazada\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.SHOPEE }}\">\n                  Shopee\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.BUKALAPAK }}\">\n                  Bukalapak\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.INSTAGRAM }}\">\n                  Instagram\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.OWN_WEBSITE }}\">\n                  Memiliki website sendiri\n                </option>\n                <option value=\"{{ ONLINE_CHANNEL_ENTREPRENEUR.OTHER }}\">\n                  Lain-lain\n                </option>\n              </select>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_businessPlace,\n                'has-success': loanFormData.form.controls.income_businessPlace.valid\n              }\"\n            >\n              <label class=\"help-block\">\n                Dimana Anda Menjalankan Bisnis Tersebut?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_businessPlace\"\n                formControlName=\"income_businessPlace\"\n                id=\"inp_businessPlace\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"{{ BUSINESS_PLACE_ENTREPRENEUR.OWN_HOUSE }}\">\n                  Rumah sendiri\n                </option>\n                <option value=\"{{ BUSINESS_PLACE_ENTREPRENEUR.RENT_RUKO }}\">\n                  Sewa tempat (sewa lapak, ruko atau rumah)\n                </option>\n                <option value=\"{{ BUSINESS_PLACE_ENTREPRENEUR.OWN_RUKO }}\">\n                  Memiliki ruko/bangunan khusus usaha\n                </option>\n                .\n              </select>\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_businessPlace }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              *ngIf=\"\n                loanFormData.form.value.income_businessPlace ===\n                BUSINESS_PLACE_ENTREPRENEUR.RENT_RUKO\n              \"\n            >\n              <label class=\"help-block\">\n                Berapa Biaya Sewa per Bulan Tempat Bisnis Anda?\n              </label>\n              <p>Isi dengan angka, contoh 1000000</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"income_rentalCosts_show\"\n                  maxlength=\"20\"\n                  formControlName=\"income_rentalCosts_show\"\n                  id=\"inp_rentalCosts\"\n                  [value]=\"\n                    numberDelimiter(loanFormData.form.value.income_rentalCosts)\n                  \"\n                  (keyup)=\"\n                    handleDelimiter('income_rentalCosts', $event.target.value)\n                  \"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <input\n                type=\"hidden\"\n                name=\"income_rentalCosts\"\n                formControlName=\"income_rentalCosts\"\n                id=\"inp_rentalCosts\"\n              />\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_numberOfEmployees,\n                'has-success':\n                  loanFormData.form.controls.income_numberOfEmployees.valid\n              }\"\n            >\n              <label class=\"help-block\">\n                Berapa Banyak Pegawai yang Membantu Bisnis Anda?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_numberOfEmployees\"\n                formControlName=\"income_numberOfEmployees\"\n                id=\"inp_numberOfEmployees\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  value=\"{{ NUMBER_OF_EMPLOYEES_ENTREPRENEUR.RUN_BY_MYSELF }}\"\n                >\n                  Saya menjalankan bisnis/usaha saya sendiri\n                </option>\n                <option\n                  value=\"{{\n                    NUMBER_OF_EMPLOYEES_ENTREPRENEUR.HELPED_BY_FAMILY_MEMBERS\n                  }}\"\n                >\n                  Dibantu oleh keluarga\n                </option>\n                <option\n                  value=\"{{ NUMBER_OF_EMPLOYEES_ENTREPRENEUR.ONE_TO_FIVE_PEOPLE }}\"\n                >\n                  Dibantu 1-5 karyawan\n                </option>\n                <option\n                  value=\"{{ NUMBER_OF_EMPLOYEES_ENTREPRENEUR.FIVE_TO_TEN_PEOPLE }}\"\n                >\n                  Dibantu 6-10 karyawan\n                </option>\n                <option\n                  value=\"{{\n                    NUMBER_OF_EMPLOYEES_ENTREPRENEUR.MORE_THAN_TEN_PEOPLE\n                  }}\"\n                >\n                  Dibantu lebih dari 10 karyawan\n                </option>\n              </select>\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_numberOfEmployees }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              *ngIf=\"\n                loanFormData.form.value.income_numberOfEmployees ===\n                NUMBER_OF_EMPLOYEES_ENTREPRENEUR.HELPED_BY_FAMILY_MEMBERS\n              \"\n            >\n              <label class=\"help-block\">\n                Berapa Banyak Anggota Keluarga yang Membantu Menjalankan Bisnis\n                Anda?\n              </label>\n\n              <select\n                class=\"form-control\"\n                name=\"income_helpedByFamilyMembers\"\n                formControlName=\"income_helpedByFamilyMembers\"\n                id=\"inp_helpedByFamilyMembers\"\n              >\n                <option value=\"\">Pilih Salah Satu</option>\n                <option value=\"{{ HELPED_BY_FAMILY_MEMBERS.ONE_TO_THREE }}\">\n                  1 - 3 orang\n                </option>\n                <option value=\"{{ HELPED_BY_FAMILY_MEMBERS.FOUR_TO_FIVE }}\">\n                  4 - 5 orang\n                </option>\n                <option value=\"{{ HELPED_BY_FAMILY_MEMBERS.MORE_THAN_FIVE }}\">\n                  lebih dari 5\n                </option>\n              </select>\n            </div>\n          </div>\n          <!-- End of Entrepreneur Form -->\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 5\">\n          <div class=\"loanform__card\">\n            <h4>Status Pernikahan</h4>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.maritalStatusType,\n                'has-success': loanFormData.form.controls.maritalStatusType.valid\n              }\"\n            >\n              <label class=\"help-block\">Status Pernikahan</label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_statusNikah\"\n                name=\"maritalStatusType\"\n                formControlName=\"maritalStatusType\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Single\">Belum Menikah</option>\n                <option value=\"Married\">Menikah</option>\n                <option value=\"Divorced\">Cerai</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.maritalStatusType }}</p>\n            </div>\n\n            <section\n              [hidden]=\"loanFormData.form.value.maritalStatusType != 'Married'\"\n            >\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_pin,\n                  'has-success': loanFormData.form.controls.spouse_pin.valid\n                }\"\n              >\n                <label class=\"help-block\">Nomor KTP Pasangan</label>\n\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  name=\"spouse_pin\"\n                  id=\"inp_ktpPasangan\"\n                  formControlName=\"spouse_pin\"\n                  (blur)=\"service.spouseDob($event.target.value)\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.spouse_pin }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_name,\n                  'has-success': loanFormData.form.controls.spouse_name.valid\n                }\"\n              >\n                <label class=\"help-block\">Nama Pasangan</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"spouse_name\"\n                  id=\"inp_namaPasangan\"\n                  formControlName=\"spouse_name\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.spouse_name }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_dateOfBirth,\n                  'has-success': loanFormData.form.controls.spouse_dateOfBirth.valid\n                }\"\n              >\n                <label class=\"help-block\">Tanggal Lahir Pasangan</label>\n\n                <date-dropdown\n                  #spouseDob\n                  [dob]=\"loanFormData.form.value.spouse_dateOfBirth\"\n                  [bindForm]=\"loanFormData.form\"\n                  [bindControlName]=\"'spouse_dateOfBirth'\"\n                  (dateModel)=\"service.setBirthDate($event, 'spouse')\"\n                ></date-dropdown>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.spouse_dateOfBirth }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_splitAssetAgreement,\n                  'has-success':\n                    loanFormData.form.controls.spouse_splitAssetAgreement.valid\n                }\"\n              >\n                <label class=\"help-block\">\n                  Apakah Anda dan pasangan Anda pisah harta?\n                </label>\n\n                <button\n                  id=\"inp_yaPisahHarta\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  [class.button--active]=\"\n                    loanFormData.form.value.spouse_splitAssetAgreement == 'Y'\n                  \"\n                  (click)=\"\n                    loanFormData.form.patchValue({\n                      spouse_splitAssetAgreement: 'Y'\n                    })\n                  \"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin':\n                        loanFormData.form.value.spouse_splitAssetAgreement != 'Y',\n                      'fa-check-circle':\n                        loanFormData.form.value.spouse_splitAssetAgreement == 'Y'\n                    }\"\n                  ></span>\n                  Ya, Pisah\n                </button>\n\n                <button\n                  id=\"inp_tidakPisahHarta\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  [class.button--active]=\"\n                    loanFormData.form.value.spouse_splitAssetAgreement == 'N'\n                  \"\n                  (click)=\"\n                    loanFormData.form.patchValue({\n                      spouse_splitAssetAgreement: 'N'\n                    })\n                  \"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin':\n                        loanFormData.form.value.spouse_splitAssetAgreement != 'N',\n                      'fa-check-circle':\n                        loanFormData.form.value.spouse_splitAssetAgreement == 'N'\n                    }\"\n                  ></span>\n                  Tidak, Campur\n                </button>\n              </div>\n            </section>\n          </div>\n\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Data Kerabat</h4>\n            <p class=\"subtitle\">\n              Masukkan data kontak kerabat terdekat (sepupu, saudara, atau keluarga)\n              sebaiknya yang tidak serumah\n            </p>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_name,\n                'has-success':\n                  loanFormData.form.controls.personalReference_name.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Kerabat</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"inp_namaKerabat\"\n                name=\"personalReference_name\"\n                formControlName=\"personalReference_name\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_name }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_mobilePhone,\n                'has-success':\n                  loanFormData.form.controls.personalReference_mobilePhone.valid\n              }\"\n            >\n              <label class=\"help-block\">Nomor Handphone Kerabat</label>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">+62</span>\n\n                <input\n                  type=\"tel\"\n                  class=\"form-control\"\n                  id=\"inp_HPKerabat\"\n                  name=\"personalReference_mobilePhone\"\n                  formControlName=\"personalReference_mobilePhone\"\n                  (keypress)=\"numericalInputOnly($event)\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_mobilePhone }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_address,\n                'has-success':\n                  loanFormData.form.controls.personalReference_address.valid\n              }\"\n            >\n              <label class=\"help-block\">Alamat Lengkap Kerabat</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"inp_alamatKerabat\"\n                name=\"personalReference_address\"\n                formControlName=\"personalReference_address\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_address }}\n              </p>\n            </div>\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.educationType,\n                'has-success': loanFormData.form.controls.educationType.valid\n              }\"\n            >\n              <label class=\"help-block\">Tingkat Pendidikan Terakhir</label>\n\n              <select\n                class=\"form-control\"\n                name=\"educationType\"\n                formControlName=\"educationType\"\n                id=\"inp_tingkatPendidikan\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Elementary\">SD</option>\n                <option value=\"JuniorHighSchool\">SMP</option>\n                <option value=\"HighSchool\">SMA</option>\n                <option value=\"Diploma\">Diploma</option>\n                <option value=\"BachelorDegree\">S1</option>\n                <option value=\"Master\">S2</option>\n                <option value=\"PostGraduate\">S3</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.educationType }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.dependants,\n                'has-success': loanFormData.form.controls.dependants.valid\n              }\"\n            >\n              <label class=\"help-block\">Jumlah Tanggungan</label>\n              <p>Masukkan jumlah orang yang ditanggung dengan angka</p>\n\n              <input\n                type=\"tel\"\n                class=\"form-control\"\n                name=\"dependants\"\n                formControlName=\"dependants\"\n                id=\"inp_jmlTanggungan\"\n                (keypress)=\"numericalInputOnly($event)\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.dependants }}</p>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- <ng-container *ngIf=\"loanFormData.step == 7\">\n    \t\t\t<ng-container *ngIf=\"!loanFormData.editReviewForm\">\n    \t\t\t\t<div class=\"loanform__card\">\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Jumlah Pinjaman</label>\n\n    \t\t\t\t\t\t<p>{{loanFormData.form.controls.loanAmount.value? (loanFormData.form.controls.loanAmount.value | tnkCurrency: 'rupiah') : 'Tidak ada data'}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Periode Pinjaman</label>\n\n    \t\t\t\t\t\t<p>{{loanFormData.form.controls.loanPeriod.value? loanFormData.form.controls.loanPeriod.value + ' Bulan' : 'Tidak ada data'}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Tujuan Pinjaman</label>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == '0'\">Tidak ada data</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Holiday'\">Liburan</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'HousingLoan'\">KPR</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'CarOrMotorcycle'\">Mobil/Motor</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'CreditCard'\">Kartu Kredit</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Renovation'\">Renovasi</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'ElectronicUnsecuredLoan'\">KTA Elektronik</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Education'\">Sekolah</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'VentureCapital'\">Modal Usaha</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Investment'\">Investasi</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Other'\">Lainnya</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nomor KTP (NIK)</label>\n\n    \t\t\t\t\t\t<p>{{loanFormData.form.controls.pin.value}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nama Bank</label>\n\n    \t\t\t\t\t\t<p>{{loanFormData.selectedBankName}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nomor Rekening</label>\n\n    \t\t\t\t\t\t<p>{{loanFormData.form.controls.bankAccount.value}}</p>\n    \t\t\t\t\t</div>\n\n\n    \t\t\t\t\t<div class=\"form-group\">\n    \t\t\t\t\t\t<label class=\"help-block\">Darimana Anda mengetahui Tunaiku</label>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == '0'\">Tidak ada data</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Friend'\">Teman</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Internet'\">Internet</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Radio'\">Radio</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Brochure'\">Selebaran/Brosur</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Television'\">Televisi</p>\n\n    \t\t\t\t\t\t<p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Other'\">Lainnya</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group align--center\">\n    \t\t\t\t\t\t<button id=\"inp_ubahData\" class=\"tnk__button button--hole button--blue button--margin-sm\" (click)=\"service.confirmEditReview()\">Ubah Data</button>\n    \t\t\t\t\t</div>\n    \t\t\t\t</div>\n\n    \t\t\t\t<span class=\"clearfix\"></span>\n\n    \t\t\t\t<div class=\"col-sm-12\">\n    \t\t\t\t\t<div class=\"checkbox__wrapper\">\n    \t\t\t\t\t\t<div class=\"checkbox\">\n    \t\t\t\t\t\t\t<label class=\"help-block\"><input type=\"checkbox\" (change)=\"service.agreeToFormPrivacy($event)\" name=\"agreedForm\" formControlName=\"agreedForm\" id=\"inp_agreement\" /> Saya menyetujui syarat dan ketentuan umum serta kebijakan privasi yang ditetapkan oleh PT Bank Amar Indonesia</label>\n    \t\t\t\t\t\t</div>\n    \t\t\t\t\t</div>\n    \t\t\t\t</div>\n\n    \t\t\t</ng-container>\n\n    \t\t\t<ng-container *ngIf=\"loanFormData.editReviewForm\">\n    \t\t\t\t<div class=\"col-sm-12\" style=\"padding-left: 5.5px; padding-right: 5.5px\">\n    \t\t\t\t\t<tnk-loan-slider [stateURI]=\"false\" [sliderState]=\"1\" [sliderOnly]=\"true\" (sliderOnChange)=\"service.handleLoanSlider('amount_period', $event)\" (purposeOnChange)=\"service.handleLoanSlider('purpose', $event)\"></tnk-loan-slider>\n    \t\t\t\t</div>\n\n    \t\t\t\t<div class=\"loanform__card has--top-widget\">\t\t\t\t\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.pin || loanFormData.doubleKTP, 'has-success': loanFormData.form.controls.pin.valid && !loanFormData.doubleKTP}\">\n\n    \t\t\t\t\t\t<label class=\"help-block\">Nomor KTP (NIK)</label>\n    \t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"pin\" formControlName=\"pin\" id=\"inp_noKTP\" (blur)=\"service.checkUserKTP(loanFormData.form.controls.pin.value)\" />\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.pin}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.bankName, 'has-success': loanFormData.form.controls.bankName.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nama Bank</label>\n\n    \t\t\t\t\t\t<select class=\"form-control\" name=\"bankName\" formControlName=\"bankName\" id=\"inp_namaBank\">\n    \t\t\t\t\t\t\t<option value=\"0\">Pilih salah satu</option>\n    \t\t\t\t\t\t\t<option *ngFor=\"let bank of loanFormData.banks\" [value]=\"bank.code\">{{bank.name}}</option>\n    \t\t\t\t\t\t</select>\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.bankName}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.bankAccount, 'has-success': loanFormData.form.controls.bankAccount.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nomor Rekening</label>\n\n    \t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"bankAccount\" formControlName=\"bankAccount\" placeholder=\"Uang pinjaman akan dikirim ke nomor ini\" id=\"inp_noRekening\" />\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.bankAccount}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.mobilePhoneNumber, 'has-success': loanFormData.form.controls.mobilePhoneNumber.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Nomor Handphone</label>\n\n    \t\t\t\t\t\t<div class=\"input-group\">\n    \t\t\t\t\t\t\t<span class=\"input-group-addon\">+62</span>\n    \t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"mobilePhoneNumber\" formControlName=\"mobilePhoneNumber\" id=\"inp_noHandphone\" />\n    \t\t\t\t\t\t</div>\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.mobilePhoneNumber}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.emailAddress, 'has-success': loanFormData.form.controls.emailAddress.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Email</label>\n\n    \t\t\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"emailAddress\" formControlName=\"emailAddress\" id=\"inp_email\" />\n\n    \t\t\t\t\t\t<p class=\"help-block\">{{loanFormData.errors.emailAddress}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.mediasource, 'has-success': loanFormData.form.controls.mediasource.valid}\">\n    \t\t\t\t\t\t<label class=\"help-block\">Darimana Anda mengetahui Tunaiku?</label>\n\n    \t\t\t\t\t\t<select class=\"form-control\" name=\"mediasource\" formControlName=\"mediasource\">\n                                <option value=\"0\">Pilih salah satu</option>\n                                <option value=\"Internet\">Internet</option>\n                                <option value=\"Friend\">Teman</option>\n                                <option value=\"Radio\">Radio</option>\n                                <option value=\"Brochure\">Selebaran/Brosur</option>\n                                <option value=\"Television\">Televisi</option>\n                                <option value=\"Other\">Lainnya</option>\n                            </select>\n\n                            <p class=\"help-block\">{{loanFormData.errors.mediasource}}</p>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"checkbox__wrapper\">\n    \t\t\t\t\t\t<div class=\"checkbox\">\n    \t\t\t\t\t\t\t<label class=\"help-block\"><input type=\"checkbox\" (change)=\"service.agreeToFormPrivacy($event)\" name=\"agreedForm\" formControlName=\"agreedForm\" id=\"inp_agreement\" /> Saya menyetujui syarat dan ketentuan umum serta kebijakan privasi yang ditetapkan oleh PT Bank Amar Indonesia</label>\n    \t\t\t\t\t\t</div>\n    \t\t\t\t\t</div>\n\n    \t\t\t\t\t<div class=\"form-group align--center\">\t\t\t\t\t\t\n    \t\t\t\t\t\t<button class=\"tnk__button button--hole button--blue button--margin-sm\" (click)=\"service.confirmEditReview()\" [disabled]=\"service.stepValidator(9)\">Simpan Data</button>\n    \t\t\t\t\t</div>\n    \t\t\t\t</div>\n    \t\t\t</ng-container>\n    \t\t</ng-container> -->\n      </form>\n\n      <div\n        id=\"auth-loan-form-footer\"\n        class=\"loanform__card\"\n        [hidden]=\"loanFormData.editReviewForm || !loanFormData.showActionButton\"\n      >\n        <div class=\"form-group no--margin\">\n          <p class=\"pull-right\">*) Lengkapi data agar bisa melanjutkan formulir</p>\n          <span class=\"clearfix\"></span>\n\n          <button\n            id=\"inp_formSebelumnya\"\n            type=\"button\"\n            class=\"tnk__button button--hole button--green button--float-left button--lg no--margin\"\n            (click)=\"service.stepHandler(loanFormData.step, 'previous')\"\n          >\n            < Kembali\n          </button>\n          <button\n            id=\"inp_formSelanjutnya\"\n            type=\"button\"\n            class=\"tnk__button button--green button--float-right button--lg no--margin\"\n            [disabled]=\"loanFormData.disabledNextButton\"\n            (click)=\"service.stepHandler(loanFormData.step, 'next')\"\n            data-toggle=\"tooltip\"\n            title=\"Lengkapi data agar bisa melanjutkan formulir\"\n          >\n            {{ loanFormData.step == 5 ? 'Kirim Formulir' : 'Selanjutnya\n    \t\t\t\t\t>' }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <section class=\"tnk__modal\" *ngIf=\"loanFormData.submitBusy\">\n      <div class=\"modal__inner modal--size-small\">\n        <div class=\"modal__content content--align-center\">\n          <h4 class=\"head__icon\">\n            <span class=\"icon glyphicon glyphicon-refresh icon--green\"></span>\n          </h4>\n          <h4 class=\"clr--green\">Pinjaman sedang diajukan</h4>\n\n          <p>\n            Pengajuan Anda sedang diproses. Pastikan jaringan Anda aman dan mohon\n            jangan menutup tab atau jendela browser.\n          </p>\n        </div>\n      </div>\n    </section>\n\n\n    <tnk-modal [isOpen]=\"isFraudAttemptAlert\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h6>Maaf Ada Kesalahan Pada Data</h6>\n        <p>\n          Sistem kami menemukan adanya kesalahan pada data anda, silahkan hubungi\n          tim kami untuk memastikan data-data anda sudah sesuai.\n        </p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"closeFraudAttemptAlert()\"\n        >\n          Hubungi Kami Melalui Chat\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n  ","styles":["\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    #auth-loan-form-footer {\n      position: -webkit-sticky;\n      position: sticky;\n      bottom: 0;\n      z-index: 1000;\n    }\n    .loanform__wrapper {\n      position: relative;\n      display: block;\n      width: 100%;\n      overflow: visible;\n      padding-bottom: 15px;\n    }\n    .loanform__wrapper .loanform__card {\n      width: 98%;\n      background-color: #fff;\n      margin: 5px auto 20px;\n      border-radius: 5px;\n      -webkit-box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n              box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n      padding: 20px;\n      overflow: hidden;\n    }\n    .loanform__wrapper .loanform__card.has--top-widget {\n      border-radius: 0 0 5px 5px;\n      margin: 0 auto 20px;\n      padding-top: 20px;\n    }\n    .loanform__wrapper .loanform__card.has--subtitle h4 {\n      margin-bottom: 5px;\n    }\n    .loanform__wrapper .loanform__card.has--subtitle p.subtitle {\n      margin-bottom: 30px;\n    }\n    .loanform__wrapper .loanform__card h4 {\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      font-size: 24px;\n      color: #535353;\n      margin-bottom: 20px;\n    }\n    .loanform__wrapper .loanform__card h4.border__title {\n      padding-bottom: 15px;\n      border-bottom: 1px solid #ccc;\n    }\n    .loanform__wrapper .loanform__card p {\n      font-size: 13px;\n    }\n    .loanform__wrapper .loanform__card p.text__length {\n      text-align: right;\n      margin-top: 10px;\n    }\n    .loanform__wrapper .loanform__card input[type=checkbox],\n    .loanform__wrapper .loanform__card input[type=radio] {\n      margin-top: 2px;\n    }\n    .loanform__wrapper .alert {\n      margin-top: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .loanform__wrapper .alert.alert-danger h4 {\n      color: #721c24;\n    }\n    .loanform__wrapper .alert.alert-danger p {\n      color: #721c24;\n    }\n    .loanform__wrapper .alert.alert-success p {\n      color: #155724;\n    }\n    .form-group.has-error label.help-block {\n      color: #a94442;\n    }\n    .form-group.has-success label.help-block {\n      color: #3c763d;\n    }\n    .form-group label {\n      margin-bottom: 0;\n      color: #444;\n      font-weight: normal;\n    }\n    .form-group label.help-block {\n      margin-top: 10px;\n    }\n    .form-group input,\n    .form-group textarea,\n    .form-group select {\n      margin-top: 5px;\n    }\n    .form-group .input-group input,\n    .form-group .input-group textarea,\n    .form-group .input-group select {\n      margin-top: 0;\n    }\n    .form-group p {\n      font-style: italic;\n      color: #888;\n      margin-bottom: 5px;\n    }\n    .form-group p.bold {\n      font-weight: bold;\n    }\n    .form-group p.help-block {\n      font-style: normal;\n    }\n  "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TNKAuthLoanFormService"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵf"}]}],"accessToken":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["accessToken"]}]}],"cookieService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["cookieService"]}]}],"successCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["successCallbackURI"]}]}],"errorServerCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["errorServerCallbackURI"]}]}],"stepURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["stepURI"]}]}],"activeStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["activeStep"]}]}],"actionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["showActionButton"]}]}],"busyServerCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["busyServerCallbackURI"]}]}],"isDebug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["debug"]}]}],"onDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"closeFraudAttemptAlert":[{"__symbolic":"method"}],"toggleZendesk":[{"__symbolic":"method"}],"checkInputValid":[{"__symbolic":"method"}],"handleDelimiter":[{"__symbolic":"method"}],"getBrowserInformation":[{"__symbolic":"method"}]}},"TNKAuthLoanFormService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵr"}]}],"setStore":[{"__symbolic":"method"}],"showDelimiter":[{"__symbolic":"method"}],"getProfileData":[{"__symbolic":"method"}],"getBank":[{"__symbolic":"method"}],"setBirthPlace":[{"__symbolic":"method"}],"getBirthCity":[{"__symbolic":"method"}],"transformRegionValue":[{"__symbolic":"method"}],"assignContactAddressObject":[{"__symbolic":"method"}],"assignDomicileAddressObject":[{"__symbolic":"method"}],"isObjectEmpty":[{"__symbolic":"method"}],"getInitRegions":[{"__symbolic":"method"}],"validateNullData":[{"__symbolic":"method"}],"getRegions":[{"__symbolic":"method"}],"calcInitMonthly":[{"__symbolic":"method"}],"setDomicileAsContact":[{"__symbolic":"method"}],"checkUserKTP":[{"__symbolic":"method"}],"deleteUnwantedObject":[{"__symbolic":"method"}],"stepHandler":[{"__symbolic":"method"}],"submitRepeatLoan":[{"__symbolic":"method"}],"handleNewLoanError":[{"__symbolic":"method"}],"logout":[{"__symbolic":"method"}],"removeCookies":[{"__symbolic":"method"}],"handleAffiliateTracking":[{"__symbolic":"method"}],"setCashTreeCallback":[{"__symbolic":"method"}],"confirmPINDataChanges":[{"__symbolic":"method"}],"setServiceArea":[{"__symbolic":"method"}],"stepValidator":[{"__symbolic":"method"}],"buildForm":[{"__symbolic":"method"}],"clearValidatorEntrepreneurField":[{"__symbolic":"method"}],"updateValueAndValidityEntrepreneurField":[{"__symbolic":"method"}],"validateJob":[{"__symbolic":"method"}],"validityCost":[{"__symbolic":"method"}],"validateNumOfPeople":[{"__symbolic":"method"}],"spouseValidity":[{"__symbolic":"method"}],"onNameChanged":[{"__symbolic":"method"}],"onChangedValue":[{"__symbolic":"method"}],"spouseDob":[{"__symbolic":"method"}],"setBirthDate":[{"__symbolic":"method"}],"findBankByCode":[{"__symbolic":"method"}],"confirmEditReview":[{"__symbolic":"method"}],"handleLoanSlider":[{"__symbolic":"method"}],"agreeToFormPrivacy":[{"__symbolic":"method"}],"transformReactiveToJSON":[{"__symbolic":"method"}]}},"TNKDateDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"declarations":[{"__symbolic":"reference","name":"TNKDateDropdownComponent"}],"exports":[{"__symbolic":"reference","name":"TNKDateDropdownComponent"}],"providers":[]}]}],"members":{}},"TNKDateDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"date-dropdown","template":"\n    <div class=\"col-sm-4 col-xs-4\" style=\"padding-left: 0\">\n      <div class=\"review-form-field-input\">\n        <div class=\"form-group\">\n          <select\n            class=\"form-control\"\n            id=\"inp_tgl_lahir\"\n            (change)=\"onChangeDate($event)\"\n            [(ngModel)]=\"dateStore.selectedDate\"\n            [disabled]=\"disabledInput\"\n          >\n            <option *ngFor=\"let list of dateStore.days\" [value]=\"list\">\n              {{ list }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 col-xs-4\">\n      <div class=\"review-form-field-input\">\n        <div class=\"form-group\">\n          <select\n            class=\"form-control\"\n            id=\"inp_bln_lahir\"\n            (change)=\"onChangeMonth($event)\"\n            [(ngModel)]=\"dateStore.selectedMonth\"\n            [disabled]=\"disabledInput\"\n          >\n            <option\n              *ngFor=\"let list of dateStore.months; let i = index\"\n              [value]=\"i\"\n            >\n              {{ list }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 col-xs-4\" style=\"padding-right: 0\">\n      <div class=\"review-form-field-input\">\n        <div class=\"form-group\">\n          <select\n            class=\"form-control\"\n            id=\"inp_thn_lahir\"\n            (change)=\"onChangeYear($event)\"\n            [(ngModel)]=\"dateStore.selectedYear\"\n            [disabled]=\"disabledInput\"\n          >\n            <option *ngFor=\"let list of dateStore.years\" [value]=\"list\">\n              {{ list }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"dob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dob"]}]}],"bindForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["bindForm"]}]}],"bindControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["bindControlName"]}]}],"disabledInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabledInput"]}]}],"maxYear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["maxYear"]}]}],"selectedFullDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["dateModel"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"setStore":[{"__symbolic":"method"}],"setFullDate":[{"__symbolic":"method"}],"onChangeDate":[{"__symbolic":"method"}],"onChangeMonth":[{"__symbolic":"method"}],"onChangeYear":[{"__symbolic":"method"}]}},"TNKUtilitiesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"NumericalValidator":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":3,"character":9,"module":"./src/app/validator/numerical/numerical.validator"}},"RequiredSelectValidator":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":3,"character":9,"module":"./src/app/validator/required-select/required-select.validator"}},"AlphaNumericalValidator":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"error","message":"Function call not supported","line":3,"character":9,"module":"./src/app/validator/alphanumeric/alpha-numeric.validator"}},"B2BTNKLoanSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"declarations":[{"__symbolic":"reference","name":"B2BTNKLoanSliderComponent"}],"exports":[{"__symbolic":"reference","name":"B2BTNKLoanSliderComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"B2BTNKLoanSliderModule"},"providers":[]}}}},"B2BTNKLoanFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","name":"TNKLoanSliderModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","name":"TNKDateDropdownModule"}],"declarations":[{"__symbolic":"reference","name":"B2BTNKLoanFormComponent"}],"exports":[{"__symbolic":"reference","name":"B2BTNKLoanFormComponent"}],"providers":[{"__symbolic":"reference","name":"B2BTNKLoanFormService"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{}},"B2BTNKLoanFormService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/router","name":"Router"}]}],"setStore":[{"__symbolic":"method"}],"getBank":[{"__symbolic":"method"}],"getBirthCity":[{"__symbolic":"method"}],"setGender":[{"__symbolic":"method"}],"handleGenderAndDob":[{"__symbolic":"method"}],"getRegions":[{"__symbolic":"method"}],"getRegionName":[{"__symbolic":"method"}],"calcInitMonthly":[{"__symbolic":"method"}],"setDomicileAsContact":[{"__symbolic":"method"}],"checkUserKTP":[{"__symbolic":"method"}],"successTrackerRedirection":[{"__symbolic":"method"}],"lProfAffTracking":[{"__symbolic":"method"}],"saveFormReview":[{"__symbolic":"method"}],"saveLoanDataInEveryStep":[{"__symbolic":"method"}],"goToNextStep":[{"__symbolic":"method"}],"isUserPinExist":[{"__symbolic":"method"}],"stepHandler":[{"__symbolic":"method"}],"confirmPINDataChanges":[{"__symbolic":"method"}],"setServiceArea":[{"__symbolic":"method"}],"stepValidator":[{"__symbolic":"method"}],"buildForm":[{"__symbolic":"method"}],"validateJob":[{"__symbolic":"method"}],"validityCost":[{"__symbolic":"method"}],"spouseValidity":[{"__symbolic":"method"}],"onChangedValue":[{"__symbolic":"method"}],"setBirthDate":[{"__symbolic":"method"}],"confirmEditReview":[{"__symbolic":"method"}],"handleLoanSlider":[{"__symbolic":"method"}],"agreeToFormPrivacy":[{"__symbolic":"method"}],"showErrors":[{"__symbolic":"method"}],"transformPhoneNumber":[{"__symbolic":"method"}],"transformReactiveToJSON":[{"__symbolic":"method"}]}},"B2BTNKLoanFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"b2b-tnk-loan-form","template":"\n    <div id=\"loan-form\" class=\"loanform__wrapper\" *ngIf=\"!loanFormData.submitBusy\">\n      <form\n        [formGroup]=\"loanFormData.form\"\n        TNKAccessibleForm\n        (ngSubmit)=\"\n          !loanFormData.disabledNextButton\n            ? service.stepHandler(loanFormData.step, 'next')\n            : service.showErrors(loanFormData.step)\n        \"\n      >\n        <ng-container *ngIf=\"loanFormData.step == 1\">\n          <div class=\"loanform__card\" *ngIf=\"referralForm\">\n            <h4>Data Referral</h4>\n            <!-- <p>Pengisian data dibawah ini tidak diwajibkan (hanya opsional) dan tidak akan mempengaruhi persetujuan pengajuan Anda.</p> -->\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.referralCode,\n                'has-success': loanFormData.form.controls.referralCode.valid\n              }\"\n            >\n              <label class=\"help-block\">Kode Referral/Agen (Opsional)</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"referralCode\"\n                formControlName=\"referralCode\"\n                id=\"inp_refCode\"\n                maxlength=\"8\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.referralCode }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.mediasource,\n                'has-success': loanFormData.form.controls.mediasource.valid\n              }\"\n            >\n              <label class=\"help-block\">Darimana Anda mengetahui Tunaiku</label>\n\n              <select\n                class=\"form-control\"\n                name=\"mediasource\"\n                formControlName=\"mediasource\"\n                id=\"inp_mediasource\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Internet\">Internet</option>\n                <option value=\"Friend\">Teman</option>\n                <option value=\"Radio\">Radio</option>\n                <option value=\"Brochure\">Selebaran/Brosur</option>\n                <option value=\"Television\">Televisi</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.mediasource }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.loanPurpose,\n                'has-success': loanFormData.form.controls.loanPurpose.valid\n              }\"\n            >\n              <label class=\"help-block\" style=\"margin-top: 10px\">\n                Tujuan Pinjaman\n              </label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_tujuan_meminjam\"\n                name=\"loanPurpose\"\n                formControlName=\"loanPurpose\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Holiday\">Liburan</option>\n                <option value=\"HousingLoan\">KPR</option>\n                <option value=\"CarOrMotorcycle\">Mobil/Motor</option>\n                <option value=\"CreditCard\">Kartu Kredit</option>\n                <option value=\"Renovation\">Renovasi</option>\n                <option value=\"ElectronicUnsecuredLoan\">KTA Elektronik</option>\n                <option value=\"Education\">Sekolah</option>\n                <option value=\"VentureCapital\">Modal Usaha</option>\n                <option value=\"Investment\">Investasi</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.mediasource }}</p>\n            </div>\n          </div>\n\n          <div class=\"loanform__card\">\n            <div class=\"row\">\n              <div class=\"col-lg-9 col-md-8\">\n                <h4>Data Pribadi</h4>\n              </div>\n              <div class=\"col-lg-3 col-md-4\">\n                <p\n                  class=\"kode-agen\"\n                  *ngIf=\"loanFormData.form.controls['referralCode'].value\"\n                >\n                  <strong>Kode Agen:</strong>\n                  {{ loanFormData.form.controls['referralCode'].value }}\n                </p>\n              </div>\n            </div>\n\n            <ng-container *ngIf=\"referralForm\">\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.mobilePhoneNumber,\n                  'has-success': loanFormData.form.controls.mobilePhoneNumber.valid\n                }\"\n              >\n                <label class=\"help-block\">Nomor Handphone</label>\n\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon\">+62</span>\n                  <input\n                    #mobilePhoneNumber\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"mobilePhoneNumber\"\n                    formControlName=\"mobilePhoneNumber\"\n                    id=\"inp_noHandphone\"\n                  />\n                </div>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.mobilePhoneNumber }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.emailAddress,\n                  'has-success': loanFormData.form.controls.emailAddress.valid\n                }\"\n              >\n                <label class=\"help-block\">Email</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"emailAddress\"\n                  formControlName=\"emailAddress\"\n                  id=\"inp_email\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.emailAddress }}</p>\n              </div>\n            </ng-container>\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.pin || loanFormData.doubleKTP,\n                'has-success':\n                  loanFormData.form.controls.pin.valid && !loanFormData.doubleKTP\n              }\"\n            >\n              <label class=\"help-block\">Nomor KTP (NIK)</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"pin\"\n                formControlName=\"pin\"\n                id=\"inp_noKTP\"\n                (blur)=\"\n                  service.checkUserKTP(\n                    loanFormData.form.controls.pin.value,\n                    getKTPStatus\n                  )\n                \"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.pin }}</p>\n            </div>\n\n            <div class=\"alert alert-danger\" *ngIf=\"loanFormData.doubleKTP\">\n              <h4 class=\"alert-heading\">KTP Sudah Terdaftar</h4>\n              <hr />\n              <p>\n                Nomor KTP Anda sudah terdaftar di sistem kami. Ajukan pinjaman\n                berikutnya dengan mudah tanpa mengisi semua data lagi melalui\n                formulir di akun Anda.\n              </p>\n\n              <a\n                type=\"button\"\n                role=\"button\"\n                class=\"text-center tnk__button button--hole button--red button--margin-md button--sm\"\n                target=\"_blank\"\n                href=\"{{ api.tunaikuClient + '/customer/login' }}\"\n              >\n                Masuk Ke Akun Anda\n              </a>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.bankName,\n                'has-success': loanFormData.form.controls.bankName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Bank</label>\n\n              <select\n                class=\"form-control\"\n                name=\"bankName\"\n                formControlName=\"bankName\"\n                id=\"inp_namaBank\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option *ngFor=\"let bank of loanFormData.banks\" [value]=\"bank.name\">\n                  {{ bank.name }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.bankName }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.bankAccount,\n                'has-success': loanFormData.form.controls.bankAccount.valid\n              }\"\n            >\n              <label class=\"help-block\">Nomor Rekening</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"bankAccount\"\n                formControlName=\"bankAccount\"\n                placeholder=\"Uang pinjaman akan dikirim ke nomor ini\"\n                id=\"inp_noRekening\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.bankAccount }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.educationType,\n                'has-success': loanFormData.form.controls.educationType.valid\n              }\"\n            >\n              <label class=\"help-block\">Tingkat Pendidikan Terakhir</label>\n\n              <select\n                class=\"form-control\"\n                name=\"educationType\"\n                formControlName=\"educationType\"\n                id=\"inp_tingkatPendidikan\"\n              >\n                <option value=\"0\">Pilih salah satu</option>\n                <option value=\"Elementary\">SD</option>\n                <option value=\"JuniorHighSchool\">SMP</option>\n                <option value=\"HighSchool\">SMA</option>\n                <option value=\"Diploma\">Diploma</option>\n                <option value=\"BachelorDegree\">S1</option>\n                <option value=\"Master\">S2</option>\n                <option value=\"PostGraduate\">S3</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.educationType }}</p>\n            </div>\n\n            <p\n              style=\"margin-top: 10px\"\n              *ngIf=\"!loanFormData.loadingKTP && referralForm\"\n            >\n              <span class=\"icon glyphicon glyphicon-refresh\"></span>\n              Mohon menunggu, sedang mengecek KTP Anda...\n            </p>\n          </div>\n\n          <div class=\"loanform__card\" *ngIf=\"!referralForm\">\n            <h4 class=\"border__title\">Area Layanan</h4>\n\n            <p>\n              Saat ini Tunaiku dapat melayani Anda yang tinggal atau bekerja di\n              area:\n            </p>\n\n            <p>\n              <b>\n                <span class=\"icon fa fa-map-marker\"></span>\n                JAWA\n              </b>\n              <br />\n              Jabodetabek, Bandung, Semarang, Yogyakarta, Gresik, Sidoarjo, Surabaya\n            </p>\n\n            <p>\n              <b>\n                <span class=\"icon fa fa-map-marker\"></span>\n                SUMATERA\n              </b>\n              <br />\n              Medan, Palembang, Pekanbaru\n            </p>\n\n            <p>\n              <b>\n                <span class=\"icon fa fa-map-marker\"></span>\n                KOTA LAINNYA\n              </b>\n              <br />\n              Denpasar, Makassar\n            </p>\n\n            <div\n              class=\"loanform__service-area\"\n              [class.danger]=\"\n                (loanFormData.serviceAreaIncluded == 'no' &&\n                  loanFormData.loadingKTP) ||\n                loanFormData.serviceAreaIncluded == 'notSelected'\n              \"\n            >\n              <p>\n                <strong>\n                  Apakah Anda tinggal atau bekerja di area layanan kami?\n                </strong>\n              </p>\n\n              <section>\n                <button\n                  id=\"inp_yaAreaLayanan\"\n                  class=\"tnk__button button--blue button--hole button--float-left button--margin-sm\"\n                  (click)=\"service.setServiceArea('yes')\"\n                  [ngClass]=\"{\n                    'button--active': loanFormData.serviceAreaIncluded == 'yes'\n                  }\"\n                  [disabled]=\"!loanFormData.loadingKTP\"\n                  style=\"margin-left: 0\"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin': loanFormData.serviceAreaIncluded != 'yes',\n                      'fa-check-circle': loanFormData.serviceAreaIncluded == 'yes'\n                    }\"\n                  ></span>\n                  Ya\n                </button>\n\n                <button\n                  id=\"inp_bukanAreaLayanan\"\n                  class=\"tnk__button button--blue button--hole button--float-left button--margin-sm\"\n                  (click)=\"service.setServiceArea('no')\"\n                  [ngClass]=\"{\n                    'button--active': loanFormData.serviceAreaIncluded == 'no'\n                  }\"\n                  [disabled]=\"!loanFormData.loadingKTP\"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin': loanFormData.serviceAreaIncluded != 'no',\n                      'fa-check-circle': loanFormData.serviceAreaIncluded == 'no'\n                    }\"\n                  ></span>\n                  Tidak\n                </button>\n\n                <span class=\"clearfix\"></span>\n\n                <p style=\"margin-top: 10px\" [hidden]=\"loanFormData.loadingKTP\">\n                  <span class=\"icon glyphicon glyphicon-refresh\"></span>\n                  Mohon menunggu, sedang mengecek KTP Anda...\n                </p>\n              </section>\n\n              <div\n                class=\"alert\"\n                *ngIf=\"loanFormData.serviceAreaIncluded == 'notSelected'\"\n              >\n                <p>Silahkan memilih area layanan Anda!</p>\n              </div>\n\n              <div\n                class=\"alert\"\n                role=\"alert\"\n                *ngIf=\"\n                  loanFormData.serviceAreaIncluded == 'no' &&\n                  loanFormData.loadingKTP\n                \"\n              >\n                <!-- <p>Mohon maaf, saat ini Tunaiku belum bisa melayani di daerah Anda. Untuk pertimbangan perluasan wilayah, sebutkan wilayah dan berikan bintang 5 di Google Review kami.</p> -->\n                <p>\n                  Mohon maaf, saat ini Tunaiku belum bisa melayani di daerah Anda.\n                  Selain area layanan di atas, kami tidak bisa mengirimkan kontrak\n                  pinjaman Anda. Mohon menunggu sampai area layanan kami diperluas.\n                </p>\n\n                <!-- <button id=\"inp_formGoogleReview\" class=\"tnk__button button--hole button--red button--margin-md button--sm\" onclick=\"javascript:window.open('https://www.google.co.id/search?ei=OHxUWrmUPIjrvgTSl6roBA&q=kredit%20tanpa%20agunan&oq=kredit+tanpa&gs_l=psy-ab.3.1.0i67k1j0i131k1j0i67k1j0l7.7177.8899.0.9792.12.8.0.4.4.0.161.760.0j6.6.0....0...1c.1.64.psy-ab..2.10.788....0.8fruiqRnp6Y&npsic=0&rflfq=1&rlha=0&rllag=-6181926,106809271,2087&tbm=lcl&rldimm=15109014892766128888&ved=0ahUKEwj_6YmpusrYAhUmSY8KHQ_uD7IQvS4IcDAB&rldoc=1&tbs=lrf:!2m1!1e2!2m1!1e3!3sIAE,lf:1,lf_ui:2#rlfi=hd:;si:15109014892766128888;mv:!1m3!1d255097.4225906899!2d106.8321983!3d-6.362325800000001!2m3!1f0!2f0!3f0!3m2!1i270!2i386!4f13.1;tbs:lrf:!2m1!1e2!2m1!1e3!3sIAE,lf:1,lf_ui:2', '_blank')\">Voting di Google Review</button> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 2\">\n          <div class=\"loanform__card\">\n            <h4>Data KTP</h4>\n\n            <div class=\"form-group\">\n              <label class=\"help-block\">Nomor KTP (NIK)</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"pin_step2\"\n                [attr.value]=\"loanFormData.form.controls['pin'].value\"\n                disabled\n              />\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.ktpName,\n                'has-success': loanFormData.form.controls.ktpName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Lengkap (sesuai KTP)</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"ktpName\"\n                formControlName=\"ktpName\"\n                id=\"inp_namaKTP\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.ktpName }}</p>\n            </div>\n\n            <div class=\"birth__province col-md-6 col-sm-12\">\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.birthProvinceId,\n                  'has-success': loanFormData.form.controls.birthProvinceId.valid\n                }\"\n              >\n                <label class=\"help-block\">Tempat Lahir Provinsi</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"birthProvinceId\"\n                  formControlName=\"birthProvinceId\"\n                  id=\"inp_tempatLahirProvinsi\"\n                  (change)=\"service.getBirthCity($event.target.value)\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let province of loanFormData.provinces\"\n                    [value]=\"province.province_id\"\n                  >\n                    {{ province.province }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">{{ loanFormData.errors.birthProvinceId }}</p>\n              </div>\n            </div>\n\n            <div class=\"birth__city col-md-6 col-sm-12\">\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.birthCityId,\n                  'has-success': loanFormData.form.controls.birthCityId.valid\n                }\"\n              >\n                <label class=\"help-block\">Tempat Lahir Kota</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"birthCityId\"\n                  formControlName=\"birthCityId\"\n                  id=\"inp_tempatLahirKota\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let city of loanFormData.birthCities\"\n                    [value]=\"city.city_id\"\n                  >\n                    {{ city.city }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">{{ loanFormData.errors.birthCityId }}</p>\n              </div>\n            </div>\n\n            <span class=\"clearfix\"></span>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.dateOfBirth,\n                'has-success': loanFormData.form.controls.dateOfBirth.valid\n              }\"\n            >\n              <label class=\"help-block\">Tanggal Lahir</label>\n              <p>\n                Minimal umur 21 tahun akan kami cek kesesuaian dengan KTP Anda saat\n                Tanda Tangan Kontrak\n              </p>\n\n              <date-dropdown\n                #dob\n                [dob]=\"loanFormData.form.value.dateOfBirth\"\n                [bindForm]=\"loanFormData.form\"\n                [bindControlName]=\"'dateOfBirth'\"\n                (dateModel)=\"service.setBirthDate($event)\"\n              ></date-dropdown>\n\n              <p class=\"help-block\">{{ loanFormData.errors.dateOfBirth }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.gender,\n                'has-success': loanFormData.form.controls.gender.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Kelamin</label>\n\n              <button\n                type=\"button\"\n                id=\"inp_laki\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                [ngClass]=\"{\n                  'button--active': loanFormData.form.value['gender'] == 'Male'\n                }\"\n                (click)=\"service.setGender('Male')\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': loanFormData.form.value.gender != 'Male',\n                    'fa-check-circle': loanFormData.form.value.gender == 'Male'\n                  }\"\n                ></span>\n                Laki-Laki\n              </button>\n\n              <button\n                type=\"button\"\n                id=\"inp_perempuan\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                [ngClass]=\"{\n                  'button--active': loanFormData.form.value['gender'] == 'Female'\n                }\"\n                (click)=\"service.setGender('Female')\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': loanFormData.form.value.gender != 'Female',\n                    'fa-check-circle': loanFormData.form.value.gender == 'Female'\n                  }\"\n                ></span>\n                Perempuan\n              </button>\n\n              <p class=\"help-block\">{{ loanFormData.errors.gender }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [hidden]=\"!loanFormData.PINDataConfirmationBlock\"\n            >\n              <hr />\n\n              <label class=\"help-block\">\n                Yakin data pribadi Anda berbeda dengan data di KTP?\n              </label>\n\n              <p>\n                Sistem kami telah secara otomatis mengisi data pribadi Anda dari\n                nomor KTP Anda. Jika Anda mengubah data tersebut, maka data ini akan\n                berbeda dengan yang tertulis di KTP Anda.\n              </p>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <button\n                  type=\"button\"\n                  class=\"tnk__button button--hole button--blue button--block\"\n                  (click)=\"service.confirmPINDataChanges(true)\"\n                >\n                  Simpan Perubahan\n                </button>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <button\n                  type=\"button\"\n                  class=\"tnk__button button--hole button--blue button--block\"\n                  (click)=\"service.confirmPINDataChanges(false)\"\n                >\n                  Batalkan Perubahan\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 3\">\n          <div class=\"loanform__card\">\n            <h4>Alamat KTP</h4>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.street,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_street.valid\n              }\"\n            >\n              <label class=\"help-block\">Alamat KTP</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"domicileAddress_street\"\n                formControlName=\"domicileAddress_street\"\n                id=\"inp_alamatKTP\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_street }}\n              </p>\n            </div>\n\n            <div class=\"row\" style=\"margin: 0\">\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_bldNumber,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_bldNumber.valid\n                  }\"\n                >\n                  <label class=\"help-block\">Nomor Blok</label>\n                  <p>Isi 0 jika tidak ada</p>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_bldNumber\"\n                    formControlName=\"domicileAddress_bldNumber\"\n                    id=\"inp_noBlokKTP\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_bldNumber }}\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_flatNumber,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_flatNumber.valid\n                  }\"\n                >\n                  <label class=\"help-block\">Nomor Rumah</label>\n                  <p>Isi 0 jika tidak ada</p>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_flatNumber\"\n                    formControlName=\"domicileAddress_flatNumber\"\n                    id=\"inp_noRumahKTP\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_flatNumber }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <span class=\"clearfix\"></span>\n\n            <div class=\"row\" style=\"margin: 0\">\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_rt,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_rt.valid\n                  }\"\n                >\n                  <label class=\"help-block\">RT</label>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_rt\"\n                    formControlName=\"domicileAddress_rt\"\n                    id=\"inp_RTKTP\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_rt }}\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{\n                    'has-error': loanFormData.errors.domicileAddress_rw,\n                    'has-success':\n                      loanFormData.form.controls.domicileAddress_rw.valid\n                  }\"\n                >\n                  <label class=\"help-block\">RW</label>\n\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"domicileAddress_rw\"\n                    formControlName=\"domicileAddress_rw\"\n                    id=\"inp_RWKTP\"\n                  />\n\n                  <p class=\"help-block\">\n                    {{ loanFormData.errors.domicileAddress_rw }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <span class=\"clearfix\"></span>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_province,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_province.valid\n              }\"\n            >\n              <label class=\"help-block\">Provinsi</label>\n              <p>Isi provinsi untuk mengisi kolom-kolom di bawah</p>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_province\"\n                formControlName=\"domicileAddress_province\"\n                id=\"inp_provinsiKTP\"\n                (change)=\"\n                  service.getRegions(\n                    { province: $event.target.value },\n                    'city',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let province of loanFormData.provinces\"\n                  [value]=\"province.province_id\"\n                >\n                  {{ province.province }}\n                </option>\n              </select>\n\n              <p\n                style=\"margin-top: 10px\"\n                *ngIf=\"loanFormData.provinces.length == 0\"\n              >\n                <span class=\"glyphicon glyphicon-refresh\"></span>\n                Sedang mengambil data provinsi...\n              </p>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_province }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_city,\n                'has-success': loanFormData.form.controls.domicileAddress_city.valid\n              }\"\n            >\n              <label class=\"help-block\">Kota</label>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_city\"\n                formControlName=\"domicileAddress_city\"\n                id=\"inp_kotaKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: $event.target.value\n                    },\n                    'district',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let city of loanFormData.cities\"\n                  [value]=\"city.city_id\"\n                >\n                  {{ city.city }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_city }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_district,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_district.valid\n              }\"\n            >\n              <label class=\"help-block\">Kecamatan</label>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_district\"\n                formControlName=\"domicileAddress_district\"\n                id=\"inp_kecamatanKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: loanFormData.form.value.domicileAddress_city,\n                      district: $event.target.value\n                    },\n                    'village',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let district of loanFormData.districts\"\n                  [value]=\"district.district_id\"\n                >\n                  {{ district.district }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_district }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_village,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_village.valid\n              }\"\n            >\n              <label class=\"help-block\">Kelurahan/Desa</label>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_village\"\n                formControlName=\"domicileAddress_village\"\n                id=\"inp_kelurahanKTP\"\n                (change)=\"\n                  service.getRegions(\n                    {\n                      province: loanFormData.form.value.domicileAddress_province,\n                      city: loanFormData.form.value.domicileAddress_city,\n                      district: loanFormData.form.value.domicileAddress_district,\n                      village: $event.target.value\n                    },\n                    'postal_code',\n                    null,\n                    true\n                  )\n                \"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let village of loanFormData.villages\"\n                  [value]=\"village.village_id\"\n                >\n                  {{ village.village }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_village }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.domicileAddress_postalCode,\n                'has-success':\n                  loanFormData.form.controls.domicileAddress_postalCode.valid\n              }\"\n            >\n              <label class=\"help-block\">Kode Pos</label>\n\n              <select\n                class=\"form-control\"\n                name=\"domicileAddress_postalCode\"\n                formControlName=\"domicileAddress_postalCode\"\n                id=\"inp_kodePos\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option\n                  *ngFor=\"let list of loanFormData.postal_codes\"\n                  [value]=\"list.postal_code\"\n                >\n                  {{ list.postal_code }}\n                </option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.domicileAddress_postalCode }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.religion,\n                'has-success': loanFormData.form.controls.religion.valid\n              }\"\n            >\n              <label class=\"help-block\">Agama</label>\n\n              <select\n                class=\"form-control\"\n                name=\"religion\"\n                formControlName=\"religion\"\n                id=\"inp_agama\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Muslim\">Islam</option>\n                <option value=\"Christian\">Kristen</option>\n                <option value=\"Catholic\">Katolik</option>\n                <option value=\"Hindu\">Hindu</option>\n                <option value=\"Buddha\">Budha</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.religion }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.citizenship,\n                'has-success': loanFormData.form.controls.citizenship.valid\n              }\"\n            >\n              <label class=\"help-block\">Kewarganegaraan</label>\n\n              <select\n                class=\"form-control\"\n                name=\"citizenship\"\n                formControlName=\"citizenship\"\n                id=\"inp_kewarganegaraan\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Indonesian\">WNI</option>\n                <option value=\"NonIndonesian\">WNA</option>\n                <option value=\"PermanentResidence\">Permanent Residence</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.citizenship }}</p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 4\">\n          <div class=\"loanform__card\">\n            <h4>Status Tempat Tinggal</h4>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_propertyType,\n                'has-success': loanFormData.form.controls.housing_propertyType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Tempat Tinggal</label>\n\n              <select\n                class=\"form-control\"\n                name=\"housing_propertyType\"\n                formControlName=\"housing_propertyType\"\n                id=\"inp_jenisTinggal\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Apartment\">Apartemen</option>\n                <option value=\"House\">Rumah</option>\n                <option value=\"HomeStore\">Ruko</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_propertyType }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.numberOfPeople,\n                'has-success': loanFormData.form.controls.numberOfPeople.valid\n              }\"\n            >\n              <label class=\"help-block\">Jumlah orang tinggal serumah</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"numberOfPeople\"\n                formControlName=\"numberOfPeople\"\n                id=\"inp_jmlTinggalSerumah\"\n                placeholder=\"Apabila tinggal sendiri maka isi 1\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.numberOfPeople }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_residentialType,\n                'has-success':\n                  loanFormData.form.controls.housing_residentialType.valid\n              }\"\n            >\n              <label class=\"help-block\">Status Kepemilikan Rumah</label>\n\n              <select\n                class=\"form-control\"\n                name=\"housing_residentialType\"\n                formControlName=\"housing_residentialType\"\n                id=\"inp_statusTinggal\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Family\">Keluarga</option>\n                <option value=\"BoardingHouse\">Kost</option>\n                <option value=\"Parents\">Orang Tua</option>\n                <option value=\"OfficeHousing\">Rumah Dinas</option>\n                <option value=\"Personal\">Sendiri</option>\n                <option value=\"Contract\">Sewa/Kontrak</option>\n              </select>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_residentialType }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_monthlyCost,\n                'has-success': loanFormData.form.controls.housing_monthlyCost.valid\n              }\"\n            >\n              <label class=\"help-block\">Sewa/Cicilan per bulan</label>\n              <p>isi dengan angka ribuan, contoh: 100000</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"housing_monthlyCost\"\n                  formControlName=\"housing_monthlyCost\"\n                  id=\"inp_sewaTinggal\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_monthlyCost }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.housing_expenseCost,\n                'has-success': loanFormData.form.controls.housing_expenseCost.valid\n              }\"\n            >\n              <label class=\"help-block\">Biaya PLN & PDAM per Bulan</label>\n              <p>isi dengan angka ribuan, contoh: 100000</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"housing_expenseCost\"\n                  formControlName=\"housing_expenseCost\"\n                  id=\"inp_biayaTinggal\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.housing_expenseCost }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.dependants,\n                'has-success': loanFormData.form.controls.dependants.valid\n              }\"\n            >\n              <label class=\"help-block\">Jumlah Tanggungan</label>\n              <p>Masukkan jumlah orang yang ditanggung dengan angka</p>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"dependants\"\n                formControlName=\"dependants\"\n                id=\"inp_jmlTanggungan\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.dependants }}</p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.mothersName,\n                'has-success': loanFormData.form.controls.mothersName.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Ibu Kandung</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                name=\"mothersName\"\n                formControlName=\"mothersName\"\n                id=\"inp_namaIbu\"\n              />\n\n              <p class=\"help-block\">{{ loanFormData.errors.mothersName }}</p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 5\">\n          <div class=\"loanform__card\">\n            <h4>Alamat Tempat Tinggal</h4>\n\n            <div class=\"form-group\">\n              <label style=\"margin-bottom: 10px\">\n                Apakah alamat tempat tinggal Anda sama dengan alamat yang tertulis\n                di KTP Anda?\n              </label>\n              <br />\n\n              <button\n                type=\"button\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                (click)=\"service.setDomicileAsContact(true)\"\n                [class.button--active]=\"!loanFormData.showStep5Form\"\n                id=\"inp_domisiliSama\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': loanFormData.showStep5Form,\n                    'fa-check-circle': !loanFormData.showStep5Form\n                  }\"\n                ></span>\n                Sama\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"tnk__button button--hole button--blue button--margin-sm\"\n                (click)=\"service.setDomicileAsContact(false)\"\n                [class.button--active]=\"loanFormData.showStep5Form\"\n                id=\"inp_domisiliBeda\"\n              >\n                <span\n                  class=\"icon fa\"\n                  [ngClass]=\"{\n                    'fa-circle-thin': !loanFormData.showStep5Form,\n                    'fa-check-circle': loanFormData.showStep5Form\n                  }\"\n                ></span>\n                Berbeda\n              </button>\n\n              <hr />\n\n              <p class=\"bold\">\n                - Tidak masalah alamat tinggal berbeda dengan KTP\n                <br />\n                - Pastikan Anda tinggal/bekerja di Area Layanan Kami\n              </p>\n            </div>\n\n            <ng-container *ngIf=\"loanFormData.showStep5Form\">\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_street,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_street.valid\n                }\"\n              >\n                <hr />\n\n                <label class=\"help-block\">Alamat Tempat Tinggal</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"contactAddress_street\"\n                  formControlName=\"contactAddress_street\"\n                  id=\"inp_alamatKTPTinggal\"\n                />\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_street }}\n                </p>\n              </div>\n\n              <div class=\"row\" style=\"margin: 0\">\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_bldNumber,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_bldNumber.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">Nomor Blok</label>\n                    <p>Isi 0 jika tidak ada</p>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_bldNumber\"\n                      formControlName=\"contactAddress_bldNumber\"\n                      id=\"inp_noBlokKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_bldNumber }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_flatNumber,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_flatNumber.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">Nomor Rumah</label>\n                    <p>Isi 0 jika tidak ada</p>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_flatNumber\"\n                      formControlName=\"contactAddress_flatNumber\"\n                      id=\"inp_noRumahKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_flatNumber }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row\" style=\"margin: 0\">\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-left: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_rt,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_rt.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">RT</label>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_rt\"\n                      formControlName=\"contactAddress_rt\"\n                      id=\"inp_RTKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_rt }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"col-xs-6 col-sm-6\" style=\"padding-right: 0\">\n                  <div\n                    class=\"form-group\"\n                    [ngClass]=\"{\n                      'has-error': loanFormData.errors.contactAddress_rw,\n                      'has-success':\n                        loanFormData.form.controls.contactAddress_rw.valid\n                    }\"\n                  >\n                    <label class=\"help-block\">RW</label>\n\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"contactAddress_rw\"\n                      formControlName=\"contactAddress_rw\"\n                      id=\"inp_RWKTPTinggal\"\n                    />\n\n                    <p class=\"help-block\">\n                      {{ loanFormData.errors.contactAddress_rw }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_province,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_province.valid\n                }\"\n              >\n                <label class=\"help-block\">Provinsi</label>\n                <p>Isi provinsi untuk mengisi kolom-kolom di bawah</p>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_province\"\n                  formControlName=\"contactAddress_province\"\n                  id=\"inp_provinsiKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      { province: $event.target.value },\n                      'city',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let province of loanFormData.provinces\"\n                    [value]=\"province.province_id\"\n                  >\n                    {{ province.province }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_province }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_city,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_city.valid\n                }\"\n              >\n                <label class=\"help-block\">Kota</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_city\"\n                  formControlName=\"contactAddress_city\"\n                  id=\"inp_kotaKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: $event.target.value\n                      },\n                      'district',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let city of loanFormData.citiesContact\"\n                    [value]=\"city.city_id\"\n                  >\n                    {{ city.city }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_city }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_district,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_district.valid\n                }\"\n              >\n                <label class=\"help-block\">Kecamatan</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_district\"\n                  formControlName=\"contactAddress_district\"\n                  id=\"inp_kecamatanKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: loanFormData.form.value.contactAddress_city,\n                        district: $event.target.value\n                      },\n                      'village',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let district of loanFormData.districtsContact\"\n                    [value]=\"district.district_id\"\n                  >\n                    {{ district.district }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_district }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_village,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_village.valid\n                }\"\n              >\n                <label class=\"help-block\">Kelurahan/Desa</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_village\"\n                  formControlName=\"contactAddress_village\"\n                  id=\"inp_kelurahanKTPTinggal\"\n                  (change)=\"\n                    service.getRegions(\n                      {\n                        province: loanFormData.form.value.contactAddress_province,\n                        city: loanFormData.form.value.contactAddress_city,\n                        district: loanFormData.form.value.contactAddress_district,\n                        village: $event.target.value\n                      },\n                      'postal_code',\n                      'contact',\n                      true\n                    )\n                  \"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let village of loanFormData.villagesContact\"\n                    [value]=\"village.village_id\"\n                  >\n                    {{ village.village }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_village }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.contactAddress_postalCode,\n                  'has-success':\n                    loanFormData.form.controls.contactAddress_postalCode.valid\n                }\"\n              >\n                <label class=\"help-block\">Kode Pos</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"contactAddress_postalCode\"\n                  formControlName=\"contactAddress_postalCode\"\n                  id=\"inp_kodePosTinggal\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option\n                    *ngFor=\"let list of loanFormData.postalCodesContact\"\n                    [value]=\"list.postal_code\"\n                  >\n                    {{ list.postal_code }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.contactAddress_postalCode }}\n                </p>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 6\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Pekerjaan Saat Ini</h4>\n            <p class=\"subtitle bold\">\n              Kami akan melakukan tanda tangan kontrak dengan kurir ke tempat kerja\n              Anda\n            </p>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_jobType,\n                'has-success': loanFormData.form.controls.income_jobType.valid\n              }\"\n            >\n              <label class=\"help-block\">Jenis Pekerjaan</label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_jenisKerja\"\n                name=\"income_jobType\"\n                formControlName=\"income_jobType\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"PublicServant\">PNS</option>\n                <option value=\"PrivateEmployee\">Pegawai Swasta</option>\n                <option value=\"RetiredPublicServant\">Pensiunan PNS</option>\n                <option value=\"Retired\">Pensiunan Biasa</option>\n                <option value=\"MilitaryPolice\">TNI/Polri</option>\n                <option value=\"Entrepreneur\">Wiraswasta atau Pengusaha</option>\n                <option value=\"Student\">Pelajar</option>\n                <option value=\"Unemployed\">Tidak Bekerja</option>\n                <option value=\"Other\">Lainnya</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.income_jobType }}</p>\n            </div>\n\n            <section\n              [hidden]=\"\n                loanFormData.form.value.income_jobType != 'PublicServant' &&\n                loanFormData.form.value.income_jobType != 'PrivateEmployee' &&\n                loanFormData.form.value.income_jobType != 'MilitaryPolice' &&\n                loanFormData.form.value.income_jobType != 'Entrepreneur' &&\n                loanFormData.form.value.income_jobType != 'Other'\n              \"\n            >\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_employmentStatus,\n                  'has-success':\n                    loanFormData.form.controls.income_employmentStatus.valid\n                }\"\n              >\n                <label class=\"help-block\">Status Pekerjaan</label>\n\n                <select\n                  class=\"form-control\"\n                  id=\"inp_statusKerja\"\n                  name=\"income_employmentStatus\"\n                  formControlName=\"income_employmentStatus\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option value=\"Permanent\">Permanen</option>\n                  <option value=\"Contract\">Kontrak</option>\n                  <option value=\"Daily\">Lepas/Harian</option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_employmentStatus }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_employerName,\n                  'has-success':\n                    loanFormData.form.controls.income_employerName.valid\n                }\"\n              >\n                <label class=\"help-block\">Nama Perusahaan/Instansi</label>\n                <p>Nama usaha (jika Anda pengusaha) dan tidak boleh kosong</p>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"income_employerName\"\n                  formControlName=\"income_employerName\"\n                  id=\"inp_namaPerusahaan\"\n                  maxlength=\"80\"\n                />\n\n                <!-- <p class=\"text__length\">{{loanFormData.form.controls.income_employerName.value.length}}/80</p> -->\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_employerName }}\n                </p>\n              </div>\n\n              <!-- <div class=\"form-group\" [ngClass]=\"{'has-error': loanFormData.errors.domicileAddress_province, 'has-success': loanFormData.form.controls.domicileAddress_province.valid}\">\n                            <label class=\"help-block\">Bidang Usaha</label>\n    \n                            <select class=\"form-control\" name=\"domicileAddress_province\" formControlName=\"domicileAddress_province\" id=\"inp_bidangUsaha\">\n                                <option value=\"0\">Pilih Salah Satu</option>\n                                <option value=\"1\">Perbankan/Akunting</option>\n                                <option value=\"2\">Telekomunikasi</option>\n                                <option value=\"3\">Jasa</option>\n                                <option value=\"4\">Perdagangan/Distributor</option>\n                                <option value=\"5\">Manufaktur</option>\n                                <option value=\"99\">Lainnya</option>\n                            </select>\n    \n                            <p class=\"help-block\">{{loanFormData.errors.domicileAddress_province}}</p>\n                        </div> -->\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.income_workPosition,\n                  'has-success':\n                    loanFormData.form.controls.income_workPosition.valid\n                }\"\n              >\n                <label class=\"help-block\">Jabatan di Perusahaan</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"income_workPosition\"\n                  formControlName=\"income_workPosition\"\n                  id=\"inp_jabatan\"\n                >\n                  <option value=\"0\">Pilih Salah Satu</option>\n                  <option value=\"Contract\">Kontrak</option>\n                  <option value=\"Staff\">Staff</option>\n                  <option value=\"Supervisor\">Supervisor</option>\n                  <option value=\"JuniorManagement\">Manajemen Junior</option>\n                  <option value=\"MiddleManagement\">Manajemen Menengah</option>\n                  <option value=\"SeniorManagement\">Manajemen Senior</option>\n                </select>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.income_workPosition }}\n                </p>\n              </div>\n            </section>\n          </div>\n\n          <div\n            class=\"loanform__card has--subtitle\"\n            [hidden]=\"\n              loanFormData.form.value.income_jobType != 'PublicServant' &&\n              loanFormData.form.value.income_jobType != 'PrivateEmployee' &&\n              loanFormData.form.value.income_jobType != 'MilitaryPolice' &&\n              loanFormData.form.value.income_jobType != 'Entrepreneur' &&\n              loanFormData.form.value.income_jobType != 'Other'\n            \"\n          >\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_monthlyIncome,\n                'has-success': loanFormData.form.controls.income_monthlyIncome.valid\n              }\"\n            >\n              <h4>Data Penghasilan</h4>\n              <p class=\"bold\">Untuk Penghasilan Bulanan:</p>\n\n              <div>\n                <p>- Tidak harus diisi dengan UMR</p>\n                <p>\n                  - isi dengan\n                  <strong>angka,</strong>\n                  contoh:\n                  <strong>100000</strong>\n                  (seratus ribu)\n                </p>\n              </div>\n\n              <label class=\"help-block\">Penghasilan Bulanan Saat Ini</label>\n              <p>Pendapatan pekerjaan/usaha saat ini</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"income_monthlyIncome\"\n                  formControlName=\"income_monthlyIncome\"\n                  id=\"inp_gaji\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_monthlyIncome }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.income_previousIncome,\n                'has-success':\n                  loanFormData.form.controls.income_previousIncome.valid\n              }\"\n            >\n              <label class=\"help-block\">Penghasilan Bulanan Sebelumnya</label>\n              <p>Pendapatan pekerjaan, posisi atau tahun sebelumnya</p>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">Rp</span>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"income_previousIncome\"\n                  formControlName=\"income_previousIncome\"\n                  id=\"inp_gajiSebelumnya\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.income_previousIncome }}\n              </p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 7\">\n          <div class=\"loanform__card\">\n            <h4>Status Pernikahan</h4>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.maritalStatusType,\n                'has-success': loanFormData.form.controls.maritalStatusType.valid\n              }\"\n            >\n              <label class=\"help-block\">Status Pernikahan</label>\n\n              <select\n                class=\"form-control\"\n                id=\"inp_statusNikah\"\n                name=\"maritalStatusType\"\n                formControlName=\"maritalStatusType\"\n              >\n                <option value=\"0\">Pilih Salah Satu</option>\n                <option value=\"Single\">Belum Menikah</option>\n                <option value=\"Married\">Menikah</option>\n                <option value=\"Divorced\">Cerai</option>\n              </select>\n\n              <p class=\"help-block\">{{ loanFormData.errors.maritalStatusType }}</p>\n            </div>\n\n            <section\n              [hidden]=\"loanFormData.form.value.maritalStatusType != 'Married'\"\n            >\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_pin,\n                  'has-success': loanFormData.form.controls.spouse_pin.valid\n                }\"\n              >\n                <label class=\"help-block\">Nomor KTP Pasangan</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"spouse_pin\"\n                  id=\"inp_ktpPasangan\"\n                  formControlName=\"spouse_pin\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.spouse_pin }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_name,\n                  'has-success': loanFormData.form.controls.spouse_name.valid\n                }\"\n              >\n                <label class=\"help-block\">Nama Pasangan</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"spouse_name\"\n                  id=\"inp_namaPasangan\"\n                  formControlName=\"spouse_name\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.spouse_name }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_dateOfBirth,\n                  'has-success': loanFormData.form.controls.spouse_dateOfBirth.valid\n                }\"\n              >\n                <label class=\"help-block\">Tanggal Lahir Pasangan</label>\n\n                <date-dropdown\n                  #spouseDob\n                  [dob]=\"loanFormData.form.value.spouse_dateOfBirth\"\n                  [bindForm]=\"loanFormData.form\"\n                  [bindControlName]=\"'spouse_dateOfBirth'\"\n                  (dateModel)=\"service.setBirthDate($event, 'spouse')\"\n                ></date-dropdown>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.spouse_dateOfBirth }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.spouse_splitAssetAgreement,\n                  'has-success':\n                    loanFormData.form.controls.spouse_splitAssetAgreement.valid\n                }\"\n              >\n                <label class=\"help-block\">\n                  Apakah Anda dan pasangan Anda pisah harta?\n                </label>\n\n                <button\n                  type=\"button\"\n                  id=\"inp_yaPisahHarta\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  [class.button--active]=\"\n                    loanFormData.form.value.spouse_splitAssetAgreement == 'Y'\n                  \"\n                  (click)=\"\n                    loanFormData.form.patchValue({\n                      spouse_splitAssetAgreement: 'Y'\n                    })\n                  \"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin':\n                        loanFormData.form.value.spouse_splitAssetAgreement != 'Y',\n                      'fa-check-circle':\n                        loanFormData.form.value.spouse_splitAssetAgreement == 'Y'\n                    }\"\n                  ></span>\n                  Ya, Pisah\n                </button>\n\n                <button\n                  type=\"button\"\n                  id=\"inp_tidakPisahHarta\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  [class.button--active]=\"\n                    loanFormData.form.value.spouse_splitAssetAgreement == 'N'\n                  \"\n                  (click)=\"\n                    loanFormData.form.patchValue({\n                      spouse_splitAssetAgreement: 'N'\n                    })\n                  \"\n                >\n                  <span\n                    class=\"icon fa\"\n                    [ngClass]=\"{\n                      'fa-circle-thin':\n                        loanFormData.form.value.spouse_splitAssetAgreement != 'N',\n                      'fa-check-circle':\n                        loanFormData.form.value.spouse_splitAssetAgreement == 'N'\n                    }\"\n                  ></span>\n                  Tidak, Campur\n                </button>\n              </div>\n            </section>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 8\">\n          <div class=\"loanform__card has--subtitle\">\n            <h4>Data Kerabat</h4>\n            <p class=\"subtitle\">\n              Masukkan data kontak kerabat terdekat (sepupu, saudara, atau keluarga)\n              sebaiknya yang tidak serumah\n            </p>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_name,\n                'has-success':\n                  loanFormData.form.controls.personalReference_name.valid\n              }\"\n            >\n              <label class=\"help-block\">Nama Kerabat</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"inp_namaKerabat\"\n                name=\"personalReference_name\"\n                formControlName=\"personalReference_name\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_name }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_mobilePhone,\n                'has-success':\n                  loanFormData.form.controls.personalReference_mobilePhone.valid\n              }\"\n            >\n              <label class=\"help-block\">Nomor Handphone Kerabat</label>\n\n              <div class=\"input-group\">\n                <span class=\"input-group-addon\">+62</span>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"inp_HPKerabat\"\n                  name=\"personalReference_mobilePhone\"\n                  formControlName=\"personalReference_mobilePhone\"\n                />\n              </div>\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_mobilePhone }}\n              </p>\n            </div>\n\n            <div\n              class=\"form-group\"\n              [ngClass]=\"{\n                'has-error': loanFormData.errors.personalReference_address,\n                'has-success':\n                  loanFormData.form.controls.personalReference_address.valid\n              }\"\n            >\n              <label class=\"help-block\">Alamat Lengkap Kerabat</label>\n\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"inp_alamatKerabat\"\n                name=\"personalReference_address\"\n                formControlName=\"personalReference_address\"\n              />\n\n              <p class=\"help-block\">\n                {{ loanFormData.errors.personalReference_address }}\n              </p>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"loanFormData.step == 9\">\n          <ng-container *ngIf=\"!loanFormData.editReviewForm\">\n            <div class=\"loanform__card\">\n              <div class=\"form-group\">\n                <label class=\"help-block\">Jumlah Pinjaman</label>\n\n                <p>\n                  {{\n                    loanFormData.form.controls.loanAmount.value\n                      ? (loanFormData.form.controls.loanAmount.value\n                        | tnkCurrency: 'rupiah')\n                      : 'Tidak ada data'\n                  }}\n                </p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Periode Pinjaman</label>\n\n                <p>\n                  {{\n                    loanFormData.form.controls.loanPeriod.value\n                      ? loanFormData.form.controls.loanPeriod.value + ' Bulan'\n                      : 'Tidak ada\n                                    data'\n                  }}\n                </p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Tujuan Pinjaman</label>\n\n                <p *ngIf=\"loanFormData.form.controls.loanPurpose.value == '0'\">\n                  Tidak ada data\n                </p>\n\n                <p\n                  *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Holiday'\"\n                >\n                  Liburan\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'HousingLoan'\n                  \"\n                >\n                  KPR\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value ==\n                    'CarOrMotorcycle'\n                  \"\n                >\n                  Mobil/Motor\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'CreditCard'\n                  \"\n                >\n                  Kartu Kredit\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'Renovation'\n                  \"\n                >\n                  Renovasi\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value ==\n                    'ElectronicUnsecuredLoan'\n                  \"\n                >\n                  KTA Elektronik\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'Education'\n                  \"\n                >\n                  Sekolah\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'VentureCapital'\n                  \"\n                >\n                  Modal Usaha\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.loanPurpose.value == 'Investment'\n                  \"\n                >\n                  Investasi\n                </p>\n\n                <p *ngIf=\"loanFormData.form.controls.loanPurpose.value == 'Other'\">\n                  Lainnya\n                </p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Nomor KTP (NIK)</label>\n\n                <p>{{ loanFormData.form.controls.pin.value }}</p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Nama Bank</label>\n\n                <p>{{ loanFormData.form.controls.bankName.value }}</p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Nomor Rekening</label>\n\n                <p>{{ loanFormData.form.controls.bankAccount.value }}</p>\n              </div>\n              <div class=\"form-group\">\n                <label class=\"help-block\">Nomor Handphone</label>\n\n                <p>\n                  {{\n                    loanFormData.form.controls.mobilePhoneNumber.value\n                      ? '+62' + loanFormData.form.controls.mobilePhoneNumber.value\n                      : 'Tidak\n                                    ada data'\n                  }}\n                </p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Email</label>\n\n                <p>\n                  {{\n                    loanFormData.form.controls.emailAddress.value\n                      ? loanFormData.form.controls.emailAddress.value\n                      : 'Tidak ada data'\n                  }}\n                </p>\n              </div>\n\n              <div class=\"form-group\">\n                <label class=\"help-block\">Darimana Anda mengetahui Tunaiku</label>\n\n                <p *ngIf=\"loanFormData.form.controls.mediasource.value == '0'\">\n                  Tidak ada data\n                </p>\n\n                <p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Friend'\">\n                  Teman\n                </p>\n\n                <p\n                  *ngIf=\"loanFormData.form.controls.mediasource.value == 'Internet'\"\n                >\n                  Internet\n                </p>\n\n                <p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Radio'\">\n                  Radio\n                </p>\n\n                <p\n                  *ngIf=\"loanFormData.form.controls.mediasource.value == 'Brochure'\"\n                >\n                  Selebaran/Brosur\n                </p>\n\n                <p\n                  *ngIf=\"\n                    loanFormData.form.controls.mediasource.value == 'Television'\n                  \"\n                >\n                  Televisi\n                </p>\n\n                <p *ngIf=\"loanFormData.form.controls.mediasource.value == 'Other'\">\n                  Lainnya\n                </p>\n              </div>\n\n              <div class=\"form-group align--center\">\n                <button\n                  type=\"button\"\n                  id=\"inp_ubahData\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  (click)=\"service.confirmEditReview()\"\n                >\n                  Ubah Data\n                </button>\n              </div>\n              <div class=\"row phonenumber--warn\">\n                <div class=\"col-xs-2 col-sm-1 icon\">\n                  <i class=\"fa fa-exclamation-circle fa-3x\"></i>\n                </div>\n                <div class=\"col-xs-10 col-sm-11 desc\">\n                  <span>\n                    Pastikan nomor handphone yang tertulis benar supaya Anda bisa\n                    menerima SMS kode verifikasi kami\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <span class=\"clearfix\"></span>\n\n            <div class=\"col-sm-12\">\n              <div\n                class=\"checkbox__wrapper\"\n                [ngClass]=\"{ 'has-error': loanFormData.errors.agreedForm }\"\n              >\n                <div class=\"checkbox\">\n                  <p *ngIf=\"loanFormData.errors.agreedForm\">\n                    <strong>Mohon mencentang kotak dibawah ini</strong>\n                  </p>\n                  <label class=\"help-block tnk-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      (change)=\"service.agreeToFormPrivacy($event)\"\n                      name=\"agreedForm\"\n                      formControlName=\"agreedForm\"\n                      id=\"inp_agreement\"\n                    />\n                    Saya menyetujui syarat dan ketentuan umum serta kebijakan\n                    privasi yang ditetapkan oleh PT Bank Amar Indonesia\n                  </label>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"loanFormData.editReviewForm\">\n            <div\n              class=\"col-sm-12\"\n              style=\"padding-left: 5.5px; padding-right: 5.5px\"\n            >\n              <tnk-loan-slider\n                [stateURI]=\"false\"\n                [sliderState]=\"1\"\n                [sliderOnly]=\"true\"\n                (sliderOnChange)=\"service.handleLoanSlider('amount_period', $event)\"\n                (purposeOnChange)=\"service.handleLoanSlider('purpose', $event)\"\n              ></tnk-loan-slider>\n            </div>\n\n            <div class=\"loanform__card has--top-widget\">\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.pin || loanFormData.doubleKTP,\n                  'has-success':\n                    loanFormData.form.controls.pin.valid && !loanFormData.doubleKTP\n                }\"\n              >\n                <label class=\"help-block\">Nomor KTP (NIK)</label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"pin\"\n                  formControlName=\"pin\"\n                  id=\"inp_noKTP\"\n                  (blur)=\"\n                    service.checkUserKTP(\n                      loanFormData.form.controls.pin.value,\n                      getKTPStatus\n                    )\n                  \"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.pin }}</p>\n              </div>\n\n              <div class=\"alert alert-danger\" *ngIf=\"loanFormData.doubleKTP\">\n                <h4 class=\"alert-heading\">KTP Sudah Terdaftar</h4>\n                <hr />\n                <p>\n                  Nomor KTP Anda sudah terdaftar di sistem kami. Ajukan pinjaman\n                  berikutnya dengan mudah tanpa mengisi semua data lagi melalui\n                  formulir di akun Anda.\n                </p>\n\n                <a\n                  type=\"button\"\n                  role=\"button\"\n                  target=\"_blank\"\n                  class=\"text-center tnk__button button--hole button--red button--margin-md button--sm\"\n                  href=\"{{ api.tunaikuClient + '/customer/login' }}\"\n                >\n                  Masuk Ke Akun Anda\n                </a>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.bankName,\n                  'has-success': loanFormData.form.controls.bankName.valid\n                }\"\n              >\n                <label class=\"help-block\">Nama Bank</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"bankName\"\n                  formControlName=\"bankName\"\n                  id=\"inp_namaBank\"\n                >\n                  <option value=\"0\">Pilih salah satu</option>\n                  <option\n                    *ngFor=\"let bank of loanFormData.banks\"\n                    [value]=\"bank.name\"\n                  >\n                    {{ bank.name }}\n                  </option>\n                </select>\n\n                <p class=\"help-block\">{{ loanFormData.errors.bankName }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.bankAccount,\n                  'has-success': loanFormData.form.controls.bankAccount.valid\n                }\"\n              >\n                <label class=\"help-block\">Nomor Rekening</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"bankAccount\"\n                  formControlName=\"bankAccount\"\n                  placeholder=\"Uang pinjaman akan dikirim ke nomor ini\"\n                  id=\"inp_noRekening\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.bankAccount }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.mobilePhoneNumber,\n                  'has-success': loanFormData.form.controls.mobilePhoneNumber.valid\n                }\"\n              >\n                <label class=\"help-block\">Nomor Handphone</label>\n\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon\">+62</span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"mobilePhoneNumber\"\n                    formControlName=\"mobilePhoneNumber\"\n                    id=\"inp_noHandphone\"\n                  />\n                </div>\n\n                <p class=\"help-block\">\n                  {{ loanFormData.errors.mobilePhoneNumber }}\n                </p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.emailAddress,\n                  'has-success': loanFormData.form.controls.emailAddress.valid\n                }\"\n              >\n                <label class=\"help-block\">Email</label>\n\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  name=\"emailAddress\"\n                  formControlName=\"emailAddress\"\n                  id=\"inp_email\"\n                />\n\n                <p class=\"help-block\">{{ loanFormData.errors.emailAddress }}</p>\n              </div>\n\n              <div\n                class=\"form-group\"\n                [ngClass]=\"{\n                  'has-error': loanFormData.errors.loanPurpose,\n                  'has-success': loanFormData.form.controls.loanPurpose.valid\n                }\"\n              >\n                <label class=\"help-block\">Tujuan Pinjaman</label>\n\n                <select\n                  class=\"form-control\"\n                  name=\"loanPurpose\"\n                  formControlName=\"loanPurpose\"\n                >\n                  <option value=\"0\">Pilih salah satu</option>\n                  <option value=\"Holiday\">Liburan</option>\n                  <option value=\"HousingLoan\">KPR</option>\n                  <option value=\"CarOrMotorcycle\">Mobil/Motor</option>\n                  <option value=\"CreditCard\">Kartu Kredit</option>\n                  <option value=\"Renovation\">Renovasi</option>\n                  <option value=\"ElectronicUnsecuredLoan\">KTA Elektronik</option>\n                  <option value=\"Education\">Sekolah</option>\n                  <option value=\"VentureCapital\">Modal Usaha</option>\n                  <option value=\"Investment\">Investasi</option>\n                  <option value=\"Bills\">Tagihan</option>\n                  <option value=\"Other\">Lainnya</option>\n                </select>\n\n                <p class=\"help-block\">{{ loanFormData.errors.loanPurpose }}</p>\n              </div>\n\n              <div\n                class=\"checkbox__wrapper\"\n                [ngClass]=\"{ 'has-error': loanFormData.errors.agreedForm }\"\n              >\n                <div class=\"checkbox\">\n                  <p *ngIf=\"loanFormData.errors.agreedForm\">\n                    <strong>Mohon mencentang kotak dibawah ini</strong>\n                  </p>\n                  <label class=\"help-block tnk-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      (change)=\"service.agreeToFormPrivacy($event)\"\n                      name=\"agreedForm\"\n                      formControlName=\"agreedForm\"\n                      id=\"inp_agreement\"\n                    />\n                    Saya menyetujui syarat dan ketentuan umum serta kebijakan\n                    privasi yang ditetapkan oleh PT Bank Amar Indonesia\n                  </label>\n                </div>\n              </div>\n\n              <div\n                *ngIf=\"loanFormData.reviewFormError\"\n                class=\"alert alert-danger text-center\"\n              >\n                <strong>{{ loanFormData.reviewFormError }}</strong>\n              </div>\n              <div class=\"form-group align--center\">\n                <button\n                  type=\"button\"\n                  class=\"tnk__button button--hole button--blue button--margin-sm\"\n                  (click)=\"service.confirmEditReview()\"\n                  [disabled]=\"service.stepValidator(9)\"\n                >\n                  Simpan Data\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n\n        <div class=\"pd-left-right-20\">\n          <div\n            *ngIf=\"loanFormData.errorResponse\"\n            class=\"alert alert-danger text-center\"\n          >\n            <strong>{{ loanFormData.errorResponse }}</strong>\n          </div>\n        </div>\n\n        <div\n          class=\"loanform__card\"\n          [hidden]=\"loanFormData.editReviewForm || !loanFormData.showActionButton\"\n        >\n          <div class=\"form-group no--margin\">\n            <p class=\"pull-right\">\n              *) Lengkapi data agar bisa melanjutkan formulir\n            </p>\n            <span class=\"clearfix\"></span>\n\n            <button\n              id=\"{{\n                'inp_formSebelumnya' + btnNavigationFormId[loanFormData.step - 1]\n              }}\"\n              type=\"button\"\n              class=\"tnk__button button--hole button--green button--float-left button--lg no--margin\"\n              [disabled]=\"loanFormData.step < 2\"\n              (click)=\"service.stepHandler(loanFormData.step, 'previous')\"\n            >\n              < Kembali\n            </button>\n\n            <!-- <button id=\"{{loanFormData.step === 9? 'inp_kirimFormulir' : 'inp_formSelanjutnya' + btnNavigationFormId[loanFormData.step - 1] }}\"\n                            type=\"button\" class=\"tnk__button button--green button--float-right button--lg no--margin\" [disabled]=\"loanFormData.disabledNextButton || loanFormData.PINDataConfirmationBlock\"\n                            (click)=\"service.stepHandler(loanFormData.step, 'next')\" data-toggle=\"tooltip\" title=\"Lengkapi data agar bisa melanjutkan formulir\">\n                            {{loanFormData.step == 9? 'Kirim Formulir' : 'Selanjutnya >'}} </button> -->\n\n            <button\n              id=\"{{\n                loanFormData.step === 9\n                  ? 'inp_kirimFormulir'\n                  : 'inp_formSelanjutnya' +\n                    btnNavigationFormId[loanFormData.step - 1]\n              }}\"\n              type=\"submit\"\n              class=\"tnk__button button--green button--float-right button--lg no--margin\"\n              data-toggle=\"tooltip\"\n              title=\"Lengkapi data agar bisa melanjutkan formulir\"\n              [disabled]=\"loanFormData.nextStepBusy\"\n            >\n              {{ loanFormData.step == 9 ? 'Kirim Formulir' : 'Selanjutnya >' }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <section class=\"tnk__modal\" *ngIf=\"loanFormData.submitBusy\">\n      <div class=\"modal__inner modal--size-small\">\n        <div class=\"modal__content content--align-center\">\n          <h4 class=\"head__icon\">\n            <span class=\"icon glyphicon glyphicon-refresh icon--green\"></span>\n          </h4>\n          <h4 class=\"clr--green\">Pinjaman sedang diajukan</h4>\n\n          <p>\n            Pengajuan Anda sedang diproses. Pastikan jaringan Anda aman dan mohon\n            jangan menutup tab atau jendela browser.\n          </p>\n        </div>\n      </div>\n    </section>\n  ","styles":["\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    .loanform__wrapper {\n      position: relative;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      padding-bottom: 15px;\n    }\n    .loanform__wrapper .loanform__card {\n      width: 98%;\n      background-color: #fff;\n      margin: 5px auto 20px;\n      border-radius: 5px;\n      -webkit-box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n              box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n      padding: 20px;\n      overflow: hidden;\n    }\n    .loanform__wrapper .loanform__card.has--top-widget {\n      border-radius: 0 0 5px 5px;\n      margin: 0 auto 20px;\n      padding-top: 20px;\n    }\n    .loanform__wrapper .loanform__card.has--subtitle h4 {\n      margin-bottom: 5px;\n    }\n    .loanform__wrapper .loanform__card.has--subtitle p.subtitle {\n      margin-bottom: 30px;\n    }\n    .loanform__wrapper .loanform__card h4 {\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      font-size: 24px;\n      color: #535353;\n      margin-bottom: 20px;\n    }\n    .loanform__wrapper .loanform__card h4.border__title {\n      padding-bottom: 15px;\n      border-bottom: 1px solid #ccc;\n    }\n    .loanform__wrapper .loanform__card p {\n      font-size: 13px;\n    }\n    .loanform__wrapper .loanform__card p.text__length {\n      text-align: right;\n      margin-top: 10px;\n    }\n    .loanform__wrapper .loanform__card input[type=checkbox],\n    .loanform__wrapper .loanform__card input[type=radio] {\n      margin-top: 2px;\n    }\n    .loanform__wrapper .loanform__card .kode-agen {\n      margin-top: 15px;\n      color: #808080;\n      text-align: right;\n    }\n    @media screen and (max-width: 768px) {\n      .loanform__wrapper .loanform__card .kode-agen {\n        text-align: left;\n      }\n    }\n    .loanform__wrapper .alert {\n      margin-top: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .loanform__wrapper .alert.alert-danger h4 {\n      color: #721c24;\n    }\n    .loanform__wrapper .alert.alert-danger p {\n      color: #721c24;\n    }\n    .loanform__wrapper .alert.alert-success p {\n      color: #155724;\n    }\n    .form-group.has-error label.help-block,\n    .form-group.has-error p.help-block {\n      color: #a94442;\n    }\n    .form-group.has-success label.help-block {\n      color: #3c763d;\n    }\n    .form-group label {\n      margin-bottom: 0;\n      color: #444;\n      font-weight: normal;\n    }\n    .form-group label.help-block {\n      margin-top: 10px;\n    }\n    .form-group input,\n    .form-group textarea,\n    .form-group select {\n      margin-top: 5px;\n    }\n    .form-group .input-group input,\n    .form-group .input-group textarea,\n    .form-group .input-group select {\n      margin-top: 0;\n    }\n    .form-group p {\n      font-style: italic;\n      color: #888;\n      margin-bottom: 5px;\n    }\n    .form-group p.bold {\n      font-weight: bold;\n    }\n    .form-group p.help-block {\n      font-style: normal;\n    }\n    .loanform__service-area {\n      margin: 0 -20px;\n      padding: 15px;\n      background-color: #cfe6f0;\n    }\n    .loanform__service-area.danger {\n      background-color: #f2dede;\n    }\n    .loanform__service-area.danger p {\n      color: #721c24;\n    }\n    .loanform__service-area .alert {\n      padding: 0;\n    }\n    .checkbox input[type=checkbox] {\n      background-color: #fff;\n    }\n    .checkbox input[type=checkbox]:checked {\n      background-color: #81be41;\n    }\n    .phonenumber--warn {\n      margin-top: 20px;\n      font-size: 1rem;\n    }\n    .phonenumber--warn .icon {\n      color: #ffc412;\n      text-align: center;\n    }\n    .phonenumber--warn .desc {\n      padding-left: 0;\n    }\n    @media screen and (min-width: 600px) {\n      .phonenumber--warn .icon {\n        padding-right: 0;\n      }\n      .phonenumber--warn .desc {\n        margin-top: 5px;\n      }\n    }\n  "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","name":"B2BTNKLoanFormService"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵh"}]}],"cookieService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["cookieService"]}]}],"successCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["successCallbackURI"]}]}],"doubleKTPCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["doubleKTPCallbackURI"]}]}],"errorServerCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["errorServerCallbackURI"]}]}],"stepURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["stepURI"]}]}],"activeStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["activeStep"]}]}],"actionButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["showActionButton"]}]}],"busyServerCallbackURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["busyServerCallbackURI"]}]}],"isDebug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["debug"]}]}],"referralForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["referralForm"]}]}],"successTrackerURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["successTrackerURL"]}]}],"getKTPStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"getBrowserInformation":[{"__symbolic":"method"}]}},"B2BTNKLoanSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"b2b-tnk-loan-slider","template":"\n    <!-- If element state == 1 -->\n    <ng-container *ngIf=\"elementState == 1\">\n      <div class=\"loan__slider__widget\" [class.widget--embed]=\"sliderOnly\">\n        <div\n          class=\"card card--loan-slider card--no-padding\"\n          [style.background-color]=\"sliderColor\"\n        >\n          <!--card--bg-blue-->\n          <div class=\"col-sm-3 col-xs-4\">\n            <p class=\"loan__description text--left text--clr-white text--big\">\n              Cicilan\n            </p>\n          </div>\n\n          <div class=\"col-sm-9 col-xs-8\">\n            <p class=\"align--right text--padding-top\">\n              <span class=\"loan__amount\">\n                {{ sliderData.loanMonthly | tnkCurrency: 'rupiah' }},-\n              </span>\n              <br />\n              <span>per bulan</span>\n            </p>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider side--margin\">\n          <div class=\"row\">\n            <div class=\"col-sm-6 col-xs-6\">\n              <p class=\"help-block\">Jumlah Pinjaman</p>\n            </div>\n\n            <div class=\"col-sm-6 col-xs-6 align--right\">\n              <p class=\"slider-title\">\n                {{ 'Rp ' + sliderData.loanAmount / 1000000 + ' juta' }}\n              </p>\n            </div>\n          </div>\n\n          <div class=\"row row--slider\">\n            <div class=\"col-sm-12\">\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">2</p>\n              </div>\n\n              <div\n                class=\"col-sm-10 col-xs-10\"\n                style=\"padding: 0\"\n                id=\"slider_jumlahPinjaman\"\n              >\n                <mat-slider\n                  [min]=\"2000000\"\n                  [max]=\"20000000\"\n                  [(ngModel)]=\"sliderData.loanAmount\"\n                  [step]=\"1000000\"\n                  (input)=\"calcMonthly($event, 'amount')\"\n                ></mat-slider>\n                <!-- <input type=\"range\" min=\"2000000\" max=\"20000000\" step=\"1000000\" id=\"slider_loanAmount\" value=\"10000000\" [(ngModel)]=\"sliderData.loanAmount\" name=\"loan_amount\" (input)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod, 'amount')\"> -->\n              </div>\n\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">20</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider side--margin\">\n          <div class=\"row\">\n            <div class=\"col-sm-6 col-xs-6\">\n              <p class=\"help-block\">Periode Pinjaman</p>\n            </div>\n\n            <div class=\"col-sm-6 col-xs-6 align--right\">\n              <p class=\"slider-title\">{{ sliderData.loanPeriod + ' bulan' }}</p>\n            </div>\n          </div>\n\n          <div class=\"row row--slider\">\n            <div class=\"col-sm-12\">\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">6</p>\n              </div>\n\n              <div\n                class=\"col-sm-10 col-xs-10\"\n                style=\"padding: 0\"\n                id=\"slider_periodePinjaman\"\n              >\n                <mat-slider\n                  [min]=\"6\"\n                  [max]=\"20\"\n                  [(ngModel)]=\"sliderData.loanPeriod\"\n                  [step]=\"1\"\n                  (input)=\"calcMonthly($event, 'period')\"\n                ></mat-slider>\n                <!-- <nouislider [connect]=\"[true, false]\" [min]=\"6\" [max]=\"20\" [(ngModel)]=\"sliderData.loanPeriod\" [step]=\"1\" (ngModelChange)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod)\"></nouislider> -->\n\n                <!-- <input type=\"range\" min=\"6\" max=\"20\" value=\"12\" step=\"1\" id=\"slider_loanPeriod\" [(ngModel)]=\"sliderData.loanPeriod\" name=\"loan_period\" (input)=\"calcMonthly(sliderData.loanAmount, sliderData.loanPeriod, 'period')\" /> -->\n              </div>\n\n              <div class=\"col-sm-1 col-xs-1\" style=\"padding: 0\">\n                <p class=\"loan__description\">20</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-slider side--margin\">\n          <div class=\"row\" *ngIf=\"!sliderOnly || referralForm\">\n            <button\n              id=\"homeBtn_ajukanPinjaman\"\n              class=\"tnk__button button--green button--block\"\n              (click)=\"stateHandler(1)\"\n            >\n              Ajukan Pinjaman\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <!-- End if element state == 1 -->\n\n    <!-- If element state == 2 -->\n    <ng-container *ngIf=\"elementState == 2\">\n      <div class=\"loan__slider__widget\">\n        <div class=\"card card--loan-content card--bg-grey\">\n          <div class=\"col-sm-6 col-xs-6\">\n            <p>\n              Pinjaman\n              <b>Rp {{ this.sliderData.loanAmount / 1000000 }} Juta</b>\n            </p>\n          </div>\n\n          <div class=\"col-sm-6 col-xs-6\">\n            <p>\n              Lama cicilan\n              <b>{{ this.sliderData.loanPeriod }} Bulan</b>\n            </p>\n          </div>\n\n          <div class=\"col-sm-12\">\n            <p>\n              Cicilan per bulan\n              <strong>\n                {{ this.sliderData.loanMonthly | tnkCurrency: 'rupiah' }},-\n              </strong>\n            </p>\n\n            <a\n              id=\"homeBtn_kembali_Info_Pinjaman\"\n              class=\"link link--clr-blue\"\n              [routerLink]=\"routes[0]\"\n              *ngIf=\"stateURI\"\n            >\n              <span class=\"back__circle\">\n                <\n              </span>\n              Kembali ke info pinjaman\n            </a>\n\n            <a\n              id=\"inp_backToInfo\"\n              class=\"link link--clr-blue\"\n              href=\"javascript:void(0)\"\n              *ngIf=\"!stateURI\"\n              (click)=\"elementState = 1\"\n            >\n              <span class=\"back__circle\">\n                <\n              </span>\n              Kembali ke info pinjaman\n            </a>\n          </div>\n        </div>\n\n        <div class=\"card card--confirm-action row\">\n          <div class=\"col-sm-12\">\n            <p>Apakah Anda pernah mengajukan pinjaman di Tunaiku?</p>\n          </div>\n\n          <div class=\"col-sm-12 align--right\">\n            <button\n              id=\"inp_Ya_PinjamanPertama\"\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"handleFirstApplicant(true)\"\n              [ngClass]=\"{ 'button--active': activeForm && !notFirstApplicant }\"\n            >\n              BELUM PERNAH\n            </button>\n            <button\n              id=\"inp_Tidak_PinjamanPertama\"\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"handleFirstApplicant(false)\"\n              [ngClass]=\"{ 'button--active': notFirstApplicant && !activeForm }\"\n            >\n              SUDAH PERNAH\n            </button>\n          </div>\n        </div>\n\n        <ng-container *ngIf=\"notFirstApplicant\">\n          <div class=\"separator\">&nbsp;</div>\n\n          <div class=\"card card--loan-content\">\n            <div class=\"col-sm-12\">\n              <p class=\"help-block\">Masuk ke akun anda untuk:</p>\n              <ul class=\"tnk-list tnk-list--check\">\n                <li class=\"tnk-list__item\">Cek status pengajuan Anda</li>\n                <li class=\"tnk-list__item\">Pantau dan cek info cicilan pinjaman</li>\n                <li class=\"tnk-list__item\">\n                  Ajukan pinjaman berikutnya tanpa isi formulir\n                </li>\n              </ul>\n\n              <a\n                target=\"_blank\"\n                type=\"button\"\n                role=\"button\"\n                class=\"text-center tnk__button button--green button--block\"\n                href=\"{{ api.tunaikuClient + '/customer/login' }}\"\n                id=\"inp_formMasukAkun\"\n              >\n                Masuk ke Akun Anda\n              </a>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"activeForm\">\n          <div class=\"separator\">&nbsp;</div>\n\n          <div class=\"card card--loan-content\">\n            <div class=\"col-sm-12\">\n              <p>\n                <b>Isi Formulir Pengajuan</b>\n              </p>\n\n              <form\n                class=\"form-wrapper\"\n                [formGroup]=\"state2Form\"\n                (ngSubmit)=\"stateHandler(2)\"\n                autocomplete=\"off\"\n              >\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.name }\"\n                >\n                  <label class=\"help-block\">Nama Lengkap</label>\n\n                  <input\n                    id=\"field_namalengkap\"\n                    type=\"text\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    formControlName=\"name\"\n                  />\n\n                  <span class=\"help-block\">{{ formErrors.name }}</span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.mobilePhoneNumber }\"\n                >\n                  <label class=\"help-block\">Nomor Handphone</label>\n\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon\">+62</span>\n                    <input\n                      id=\"field_nomorhandphone\"\n                      type=\"text\"\n                      class=\"form-control\"\n                      name=\"mobilePhoneNumber\"\n                      formControlName=\"mobilePhoneNumber\"\n                    />\n                  </div>\n\n                  <span class=\"help-block\" *ngIf=\"formErrors.mobilePhoneNumber\">\n                    {{ formErrors.mobilePhoneNumber }}\n                  </span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.emailAddress }\"\n                >\n                  <label class=\"help-block\">Alamat Email</label>\n                  <input\n                    id=\"field_email\"\n                    type=\"email\"\n                    class=\"form-control\"\n                    formControlName=\"emailAddress\"\n                    name=\"emailAddress\"\n                  />\n\n                  <span class=\"help-block\">{{ formErrors.emailAddress }}</span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.emailIsOwn }\"\n                >\n                  <label class=\"help-block\">Kepemilikan Email</label>\n                  <select\n                    class=\"form-control\"\n                    id=\"field_kepemilikanEmail\"\n                    name=\"emailIsOwn\"\n                    formControlName=\"emailIsOwn\"\n                  >\n                    <option value=\"0\">Pilih salah satu</option>\n                    <option value=\"Personal\">Email Pribadi</option>\n                    <option value=\"Corporate\">Email Kantor</option>\n                    <option value=\"Other\">Lainnya</option>\n                  </select>\n                  <span class=\"help-block\" *ngIf=\"formErrors.emailIsOwn\">\n                    {{ formErrors.emailIsOwn }}\n                  </span>\n                </div>\n\n                <div\n                  class=\"form-group\"\n                  [ngClass]=\"{ 'has-error': formErrors.loanPurpose }\"\n                >\n                  <label class=\"help-block\" style=\"margin-top: 10px\">\n                    Tujuan Pinjaman\n                  </label>\n\n                  <select\n                    class=\"form-control\"\n                    id=\"reviewField_tujuan_meminjam\"\n                    name=\"loanPurpose\"\n                    formControlName=\"loanPurpose\"\n                  >\n                    <option value=\"0\">Pilih salah satu</option>\n                    <option value=\"Holiday\">Liburan</option>\n                    <option value=\"HousingLoan\">KPR</option>\n                    <option value=\"CarOrMotorcycle\">Mobil/Motor</option>\n                    <option value=\"CreditCard\">Kartu Kredit</option>\n                    <option value=\"Renovation\">Renovasi</option>\n                    <option value=\"ElectronicUnsecuredLoan\">KTA Elektronik</option>\n                    <option value=\"Education\">Sekolah</option>\n                    <option value=\"VentureCapital\">Modal Usaha</option>\n                    <option value=\"Investment\">Investasi</option>\n                    <option value=\"Bills\">Tagihan</option>\n                    <option value=\"Other\">Lainnya</option>\n                  </select>\n\n                  <span class=\"help-block\" *ngIf=\"formErrors.loanPurpose\">\n                    {{ formErrors.loanPurpose }}\n                  </span>\n                </div>\n\n                <div *ngIf=\"errorMsg\" class=\"alert alert-danger text-center\">\n                  <strong>{{ errorMsg }}</strong>\n                </div>\n\n                <div class=\"form-group\">\n                  <button\n                    id=\"inp_lanjutFormulir\"\n                    class=\"tnk__button button--green button--block\"\n                    type=\"submit\"\n                    [disabled]=\"state2Form.invalid || actionBusy\"\n                  >\n                    Lanjut Isi Formulir Pengajuan\n                  </button>\n                </div>\n              </form>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <!-- End if element state == 2 -->\n\n    <!-- If element state == 3 -->\n    <ng-container *ngIf=\"elementState == 3\">\n      <div class=\"loan__slider__widget\">\n        <div class=\"card card--loan-content no--pd-bot\">\n          <div class=\"col-sm-12\">\n            <h2>Ingin melanjutkan formulir yang telah Anda isi?</h2>\n\n            <table class=\"table table--borderless\">\n              <tr>\n                <td>\n                  <b>Atas Nama</b>\n                </td>\n                <td>\n                  {{ sliderData.ktpName ? sliderData.ktpName : sliderData.name }}\n                </td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Nomor Handphone</b>\n                </td>\n                <td>{{ sliderData.mobilePhoneNumber }}</td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Jumlah Pinjaman</b>\n                </td>\n                <td>Rp {{ sliderData.loanAmount / 1000000 }} Juta</td>\n              </tr>\n\n              <tr>\n                <td>\n                  <b>Lama Cicilan</b>\n                </td>\n                <td>{{ sliderData.loanPeriod }} Bulan</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"card card--loan-content no--pd-top\">\n          <div class=\"col-sm-12 align--right\">\n            <button\n              class=\"tnk__button button--green button--float-right button--sm\"\n              (click)=\"sessionHandler(true)\"\n            >\n              Lanjutkan\n            </button>\n\n            <button\n              class=\"tnk__button button--green button--hole button--float-right\"\n              (click)=\"sessionHandler(false)\"\n            >\n              Batalkan\n            </button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <!-- End if element state == 3 -->\n  ","styles":["\n    html {\n      font-size: 14px;\n    }\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;\n    }\n    #loan-slider .card__header {\n      background-color: #004c7b;\n      color: #fff;\n    }\n    .pd-left-right-20 {\n      padding-left: 20px;\n      padding-right: 20px;\n    }\n    .separator {\n      position: relative;\n      width: 100%;\n      height: 1px;\n      display: block;\n      overflow: hidden;\n      background-color: #ececec;\n      margin: 5px auto;\n    }\n    .separator:after {\n      content: ' ';\n    }\n    .table.table--borderless td,\n    .table.table--borderless th {\n      border: none;\n    }\n    .table.table--borderless td {\n      font-size: 14px;\n    }\n    .separator {\n      position: relative;\n      display: block;\n      height: 1px;\n      width: 100%;\n      background-color: #ccc;\n      margin-bottom: 10px;\n    }\n    .no--margin {\n      margin: 0 !important;\n    }\n    a.link {\n      -webkit-transition: all 0.2s ease-in-out;\n      transition: all 0.2s ease-in-out;\n      font-weight: bold;\n    }\n    a.link.link--clr-blue:link {\n      color: #004c7b;\n    }\n    .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group {\n      margin-bottom: 20px;\n      display: block;\n      overflow: hidden;\n    }\n    .form-wrapper .form-group.align--center {\n      text-align: center;\n    }\n    .form-wrapper .form-group .help-block {\n      font-size: 13px;\n    }\n    .form-wrapper .form-group .help-block.label--control {\n      color: #444;\n    }\n    .form-wrapper .form-group .col-sm-* p {\n      margin-bottom: 15px;\n    }\n    a.tnk__button {\n      text-decoration: none;\n    }\n    .tnk__button {\n      position: relative;\n      display: inline-block;\n      min-width: 70px;\n      padding: 10px;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      outline: 0;\n      cursor: pointer;\n      border: 1px solid transparent;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin: 0 auto;\n      border-radius: 35px;\n      -webkit-box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n              box-shadow: 0 2px 4.8px 0.3px rgba(0,0,0,0.25);\n      text-transform: uppercase;\n      margin-top: 15px;\n    }\n    .tnk__button[disabled] {\n      cursor: not-allowed;\n    }\n    .tnk__button.button--sm {\n      font-size: 12px;\n    }\n    .tnk__button.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n    }\n    .tnk__button.button--block {\n      min-width: 100%;\n      width: 100%;\n      padding: 10px 0;\n    }\n    .tnk__button.button--float-right {\n      float: right;\n      margin-right: 10px;\n    }\n    .tnk__button.button--float-left {\n      float: left;\n      margin-left: 10px;\n    }\n    .tnk__button.button--min {\n      width: 110px;\n      padding: 10px 5px;\n      margin-bottom: 5px;\n    }\n    .tnk__button.button--green {\n      font-size: 12px;\n      color: #fff;\n      background-color: #81be41;\n    }\n    .tnk__button.button--green.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--green:hover {\n      background-color: #72b63e;\n    }\n    .tnk__button.button--green:active {\n      color: #f2f2f2;\n      bakground-color: #6ab631;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--green[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--green.button--sm {\n      -webkit-box-shadow: none;\n              box-shadow: none;\n      padding: 8.5px 10px;\n    }\n    .tnk__button.button--blue {\n      background-color: #1a72a4;\n      color: #fff;\n      font-size: 12px;\n    }\n    .tnk__button.button--blue.button--lg {\n      font-size: 14px;\n    }\n    .tnk__button.button--blue:hover {\n      background-color: #1e6a94;\n      color: #fff;\n    }\n    .tnk__button.button--blue:active {\n      color: #f2f2f2;\n      background-color: #004c7b;\n      -webkit-box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n              box-shadow: inset 2px 6px 3px rgba(0,0,0,0.075);\n    }\n    .tnk__button.button--blue[disabled] {\n      background-color: #b7b7b7;\n      color: #fff;\n    }\n    .tnk__button.button--blue.button--min {\n      font-size: 10px;\n    }\n    .tnk__button.button--red {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole {\n      border-radius: 16.5px;\n      padding: 7px 10px;\n    }\n    .tnk__button.button--hole.button--red {\n      background-color: #fff;\n      border: 2px solid #721c24;\n      color: #721c24;\n    }\n    .tnk__button.button--hole.button--red:hover,\n    .tnk__button.button--hole.button--red :active {\n      background-color: #721c24;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green {\n      background-color: transparent;\n      border: 2px solid #81be41;\n      color: #81be41;\n    }\n    .tnk__button.button--hole.button--green.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--green.button--active {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--green.button--active:hover,\n    .tnk__button.button--hole.button--green.button--active :active {\n      background-color: #6ab631;\n    }\n    .tnk__button.button--hole.button--green:hover {\n      background-color: #81be41;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue {\n      background-color: transparent;\n      border: 2px solid #1a72a4;\n      color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue.button--lg {\n      font-size: 14px;\n      font-weight: bold;\n      padding: 15px 30px;\n      border-radius: 15.5px;\n    }\n    .tnk__button.button--hole.button--blue.button--active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue.button--active:hover,\n    .tnk__button.button--hole.button--blue.button--active :active {\n      background-color: #1a72a4;\n    }\n    .tnk__button.button--hole.button--blue:hover,\n    .tnk__button.button--hole.button--blue :active {\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--hole.button--blue[disabled] {\n      border: 2px solid transparent;\n      background-color: #1a72a4;\n      color: #fff;\n    }\n    .tnk__button.button--margin-sm {\n      margin-top: 5px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button.button--margin-md {\n      margin-top: 10px;\n      margin-right: 15px;\n      min-width: 200px;\n    }\n    .tnk__button .icon {\n      margin-right: 10px;\n    }\n    .tnk__modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 5000;\n      width: 100%;\n      height: 100vh;\n      overflow: hidden;\n      background-color: rgba(0,0,0,0.75);\n    }\n    .tnk__modal .modal__inner {\n      position: relative;\n      border-radius: 8px;\n      background-color: #fff;\n      -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n              box-shadow: 0 0 5px 3px rgba(0,0,0,0.25);\n      width: 80%;\n      min-height: 240px;\n      margin: 7.5% auto 0;\n      display: block;\n    }\n    .tnk__modal .modal__inner.modal--size-small {\n      width: 30%;\n      border-radius: 8px;\n      min-height: 120px;\n      margin: 0 auto;\n    }\n    .tnk__modal .modal__inner.modal--size-small .modal__content {\n      margin-top: 25vh;\n      padding: 30px;\n    }\n    .tnk__modal .modal__inner .modal__content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n    }\n    .tnk__modal .modal__inner .modal__content.content--align-center {\n      text-align: center;\n    }\n    .tnk__modal .modal__inner .modal__content h4 {\n      font-size: 22px;\n      color: #81be41;\n    }\n    .tnk__modal .modal__inner .modal__content .head__icon {\n      font-size: 48px;\n    }\n    .tnk__modal .modal__inner .modal__content p {\n      color: #8a8989;\n      margin-top: 28px;\n    }\n    .checkbox__wrapper {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      background-color: #cfe6f0;\n      padding: 20px 30px;\n      border-radius: 5px;\n      margin: 0 0 10px;\n    }\n    .checkbox__wrapper.has-error {\n      background-color: #f2dede;\n    }\n    .checkbox__wrapper.has-error p {\n      color: #721c24;\n    }\n    .checkbox__wrapper label {\n      color: #191919;\n    }\n    .checkbox__wrapper label input[type=checkbox] {\n      width: 16px;\n      height: 16px;\n      margin-left: -25px;\n      margin-top: 3px;\n    }\n    .birth__province {\n      padding-left: 0 !important;\n    }\n    .birth__city {\n      padding-right: 0 !important;\n    }\n    @media screen and (min-width: 240px) and (max-width: 800px) {\n      .birth__province {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .birth__city {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n      .tnk__button.button--margin-sm {\n        min-width: 42.5%;\n      }\n      .tnk__button.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--hole.button--green.button--lg {\n        padding: 10px;\n      }\n      .tnk__button.button--float-left {\n        margin-left: 0;\n      }\n      .tnk__modal .modal__inner.modal--size-small {\n        width: 100%;\n        border-radius: 0;\n        min-height: 100vh;\n      }\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        margin-top: 0;\n        padding: 0;\n        padding-top: 25vh;\n      }\n    }\n    @media screen and (max-width: 1024px) {\n      .tnk__button.button--hole.button--green:active {\n        background-color: #81be41;\n        color: #fff;\n      }\n    }\n    @media screen and (min-width: 1024px) {\n      .tnk__modal .modal__inner.modal--size-small .modal__content {\n        padding-top: 25;\n      }\n      .checkbox__wrapper {\n        margin: 0 0 10px;\n      }\n    }\n    mat-slider {\n      width: 100%;\n    }\n    .mat-accent .mat-slider-thumb,\n    .mat-accent .mat-slider-thumb-label,\n    .mat-accent .mat-slider-track-fill {\n      background-color: #81be41;\n    }\n    .noUi-connect {\n      background: #81be41;\n    }\n    .loan__slider__widget {\n      position: relative;\n      margin: 5px;\n      border-radius: 5px;\n      background-color: #fff;\n      -webkit-box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n              box-shadow: 0px -2px 9px 1px rgba(28,28,28,0.4);\n      overflow: hidden;\n      display: block;\n    }\n    .loan__slider__widget.widget--embed {\n      -webkit-box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n              box-shadow: 0 0 3px 1px rgba(28,28,28,0.15);\n      border-radius: 5px 5px 0 0;\n      margin: 5px 2.9px 0 2.9px;\n    }\n    .loan__slider__widget .align--right {\n      text-align: right;\n    }\n    .loan__slider__widget .align--center {\n      text-align: center;\n    }\n    .loan__slider__widget .text--padding-top {\n      padding-top: 10px;\n    }\n    .loan__slider__widget .row {\n      position: relative;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      margin: 0 auto;\n    }\n    .loan__slider__widget .row.row--slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 0;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .row.row--slider input {\n      outline: none;\n    }\n    .loan__slider__widget .card.card--loan-slider {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      border-bottom: solid 1px #ccc;\n      padding: 15px 0 5px;\n      font-size: 20px;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card.side--margin {\n      margin: 0 5px;\n    }\n    .loan__slider__widget .card.side--margin:last-child {\n      border-bottom: 0;\n    }\n    .loan__slider__widget .card.side--margin button {\n      margin-bottom: 15px;\n    }\n    .loan__slider__widget .card.card--loan-content {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 17px 0 15px;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--loan-content p,\n    .loan__slider__widget .card.card--loan-content a.link:link {\n      font-size: 13px;\n      margin-bottom: 13px;\n    }\n    .loan__slider__widget .card.card--loan-content h2 {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      margin-bottom: 30px;\n      line-height: 1.5em;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-top {\n      padding-top: 0;\n    }\n    .loan__slider__widget .card.card--loan-content.no--pd-bot {\n      padding-bottom: 0;\n    }\n    .loan__slider__widget .card.card--loan-content .tnk-list {\n      color: #444;\n    }\n    .loan__slider__widget .card.card--bg-grey {\n      background-color: #ececec;\n    }\n    .loan__slider__widget .card.card--bg-blue {\n      background-color: #004c7b;\n      color: #fff;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n    }\n    .loan__slider__widget .card.card--no-padding {\n      padding-top: 10px;\n      padding-bottom: 5px;\n    }\n    .loan__slider__widget .card.card--confirm-action {\n      position: relative;\n      display: block;\n      overflow: hidden;\n      padding: 18px;\n      text-align: left;\n    }\n    .loan__slider__widget .card span,\n    .loan__slider__widget .card p {\n      font-family: 'HelveticaLight', sans-serif;\n      font-size: 13px;\n    }\n    .loan__slider__widget .card p {\n      color: #555;\n    }\n    .loan__slider__widget .card p span {\n      color: #fff;\n    }\n    .loan__slider__widget .card span.loan__amount {\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      font-size: 21px;\n      color: #fff;\n    }\n    .loan__slider__widget .card h2 {\n      color: #535353;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal {\n      height: 40px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-background {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-fill {\n      height: 5px;\n    }\n    .loan__slider__widget .card .mat-slider-horizontal .mat-slider-track-wrapper {\n      height: 5px;\n    }\n    .loan__slider__widget .card p.help-block {\n      font-weight: bold;\n      font-size: 14px;\n    }\n    .loan__slider__widget .card p.help-block span {\n      color: #fff;\n    }\n    .loan__slider__widget .card span.back__circle {\n      border-radius: 100%;\n      background-color: #004c7b;\n      color: #fff;\n      padding: 3px 5px;\n      font-weight: bold;\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .table td {\n      color: #535353;\n    }\n    .loan__slider__widget .card .loan__description {\n      text-align: center;\n      position: relative;\n      margin-top: 15px;\n    font-size\n      color: #8a8989;\n      font-weight: bold;\n    }\n    .loan__slider__widget .card .loan__description.text--big {\n      font-size: 16px;\n    }\n    .loan__slider__widget .card .loan__description.text--sm {\n      font-size: 11px;\n    }\n    .loan__slider__widget .card .loan__description.text--left {\n      text-align: left;\n    }\n    .loan__slider__widget .card .loan__description.text--clr-white {\n      color: #fff;\n    }\n    .loan__slider__widget .card .slider-title {\n      font-size: 18px;\n      font-family: 'HelveticaBold', sans-serif;\n      font-weight: bold;\n      padding-bottom: 0;\n      margin-top: 0;\n      margin-bottom: 0;\n      color: #7f7f7f;\n    }\n    .loan__slider__widget input[type=range] {\n      height: auto;\n      -webkit-appearance: none;\n      margin: 14px 0 0 0;\n      width: 100%;\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]:focus {\n      outline: none;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      border: none;\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n    }\n    .loan__slider__widget input[type=range]::-webkit-slider-thumb {\n      -webkit-box-shadow: 0px 0px 0px #000;\n              box-shadow: 0px 0px 0px #000;\n      height: 24px;\n      width: 24px;\n      border: none;\n      border-radius: 100%;\n      background-color: #81be41;\n      cursor: pointer;\n      -webkit-appearance: none;\n      margin-top: -10px;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      animate: 0.2s;\n      box-shadow: 0px 0px 0px #000;\n      background: #ececec;\n      border-radius: 25px;\n      border: 0px solid #000101;\n    }\n    .loan__slider__widget input[type=range]::-moz-range-thumb {\n      box-shadow: 0px 0px 0px #000;\n      border: 0px solid #000;\n      height: 24px;\n      width: 24px;\n      outline: none;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n      margin-top: -14px;\n    }\n    .loan__slider__widget input[type=range]::-ms-track {\n      width: 100%;\n      height: 13px;\n      cursor: pointer;\n      animate: 0.2s;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-lower {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-fill-upper {\n      background: #ececec;\n      border: none;\n      border-radius: 50px;\n      box-shadow: 0px 0px 0px #000;\n    }\n    .loan__slider__widget input[type=range]::-ms-thumb {\n      margin-top: 1px;\n      box-shadow: 0px 0px 0px #000;\n      border: none;\n      height: 24px;\n      width: 24px;\n      border-radius: 100%;\n      background: #81be41;\n      cursor: pointer;\n    }\n    .loan__slider__widget .col-sm-* {\n      position: relative;\n    }\n    @media screen and (min-width: 320px) and (max-width: 400px) {\n      .loan__slider__widget .card p.help-block {\n        margin-top: 5px;\n        font-size: 12px;\n      }\n    }\n    @media screen and (max-width: 320px) {\n      .tnk__button {\n        width: 100%;\n      }\n      .tnk__button.button--float-right {\n        margin: 10px 0 0;\n      }\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"referralForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["referralForm"]}]}],"elementState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderState"]}]}],"stateURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["stateURI"]}]}],"cookieService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["cookieService"]}]}],"createAccountURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["createAccountURI"]}]}],"formURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formURI"]}]}],"startURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["startURI"]}]}],"sliderOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderOnly"]}]}],"customerIp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["customerIp"]}]}],"referralFormURI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["referralFormURI"]}]}],"requestsource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["requestsource"]}]}],"sliderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sliderColor"]}]}],"encryptedRefCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["encryptedRefCode"]}]}],"micrositePurpose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["micrositePurpose"]}]}],"sliderEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["sliderOnChange"]}]}],"purposeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["purposeOnChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"determineWhichElementStateToRender":[{"__symbolic":"method"}],"getBrowserInformation":[{"__symbolic":"method"}],"calcInitMonthly":[{"__symbolic":"method"}],"calcMonthly":[{"__symbolic":"method"}],"handleFirstApplicant":[{"__symbolic":"method"}],"handleLoanPurpose":[{"__symbolic":"method"}],"stateHandler":[{"__symbolic":"method"}],"getTracerToken":[{"__symbolic":"method"}],"saveStep1LoanData":[{"__symbolic":"method"}],"setStep1SucceedIntoCookies":[{"__symbolic":"method"}],"buildState2Form":[{"__symbolic":"method"}],"sessionHandler":[{"__symbolic":"method"}],"mixpanelIdentify":[{"__symbolic":"method"}]}},"ConfirmationFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-confirmation-form","template":"\n    <ng-container>\n      <ng-container\n        *ngIf=\"data.step == 0 && loanData.applicationStatus === CONFIRMATION_SENT\"\n      >\n        <confirmation-confirmed></confirmation-confirmed>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"data.step == 0 && loanData.applicationStatus !== CONFIRMATION_SENT\"\n      >\n        <confirmation-index\n          [profile]=\"data.profile\"\n          [loan]=\"loanData\"\n          (statusCancelCb)=\"statusCancelFromChildren($event)\"\n        ></confirmation-index>\n      </ng-container>\n\n      <ng-container *ngIf=\"data.step == 1\">\n        <confirmation-work-place></confirmation-work-place>\n      </ng-container>\n\n      <ng-container *ngIf=\"data.step == 2\">\n        <confirmation-bank-account\n          [bankData]=\"data.bankData\"\n        ></confirmation-bank-account>\n      </ng-container>\n\n      <ng-container *ngIf=\"data.step == 3\">\n        <confirmation-pin-picture\n          [profile]=\"data.profile\"\n          [loan]=\"loanData\"\n        ></confirmation-pin-picture>\n      </ng-container>\n\n      <ng-container *ngIf=\"data.step == 4\">\n        <confirmation-selfie-picture\n          [profile]=\"data.profile\"\n          [loan]=\"loanData\"\n        ></confirmation-selfie-picture>\n\n        <tnk-modal [isOpen]=\"data.modal == data.consts.MODAL_SUCCESS\">\n          <tnk-modal-body class=\"tnk-align--center\">\n            <h5 class=\"tnk-color--secondary\">\n              Formulir Konfirmasi Anda sudah terkirim!\n            </h5>\n            <p>\n              Terima kasih telah mengirimkan formulir konfirmasi. Status pinjaman\n              Anda akan diperbaharui setelah Anda menerima notifikasi SMS dan email\n              draft kontrak.\n            </p>\n          </tnk-modal-body>\n          <tnk-modal-footer>\n            <button\n              class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n              (click)=\"confirmationFormservice.closeSuccessModal()\"\n            >\n              Saya Mengerti\n            </button>\n          </tnk-modal-footer>\n        </tnk-modal>\n\n        <tnk-modal [isOpen]=\"data.modal == data.consts.MODAL_FAILED\">\n          <tnk-modal-body class=\"tnk-align--center\">\n            <h5 class=\"tnk-color--secondary\">Maaf terjadi kesalahan</h5>\n            <p>Terjadi kesalahan. Silahkan cek kembali form Anda.</p>\n          </tnk-modal-body>\n          <tnk-modal-footer>\n            <button\n              class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n              (click)=\"confirmationFormservice.closeModal()\"\n            >\n              Saya Mengerti\n            </button>\n          </tnk-modal-footer>\n        </tnk-modal>\n\n        <tnk-modal [isOpen]=\"data.modal == data.consts.MODAL_ERROR\">\n          <tnk-modal-body class=\"tnk-align--center\">\n            <h5 class=\"tnk-color--secondary\">\n              Mohon maaf terdapat kesalahan dengan sistem kami\n            </h5>\n            <p>\n              Mohon maaf terjadi masalah server. Silakan coba beberapa saat lagi.\n            </p>\n          </tnk-modal-body>\n          <tnk-modal-footer>\n            <button\n              class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n              (click)=\"confirmationFormservice.closeModal()\"\n            >\n              Saya Mengerti\n            </button>\n          </tnk-modal-footer>\n        </tnk-modal>\n      </ng-container>\n    </ng-container>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"statusCancelCb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loanData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"profileData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"statusCancelFromChildren":[{"__symbolic":"method"}],"setBankData":[{"__symbolic":"method"}]}},"TNKConfirmationFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ConfirmationFormComponent"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"TNKUtilitiesModule"}],"exports":[{"__symbolic":"reference","name":"ConfirmationFormComponent"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"}],"providers":[{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","module":"ngx-image-compress","name":"NgxImageCompressService"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵr"}],"entryComponents":[]}]}],"members":{}},"FeedbackJourneyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"},{"__symbolic":"reference","name":"TNKUtilitiesModule"},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule"}],"declarations":[{"__symbolic":"reference","name":"ɵbg"}],"exports":[{"__symbolic":"reference","name":"ɵbg"}],"providers":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"FeedbackJourneyModule"},"providers":[{"__symbolic":"reference","name":"ɵbh"}]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"tnkCurrency"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"tnkLimitArray"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"tnkOffsetArray"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵg"}]}],"isValueExist":[{"__symbolic":"method"}],"createHttpOptions":[{"__symbolic":"method"}],"getUserId":[{"__symbolic":"method"}],"sendDropOffLeads":[{"__symbolic":"method"}],"checkUserId":[{"__symbolic":"method"}],"buildUserIdResponse":[{"__symbolic":"method"}],"inputFieldConstants":[{"__symbolic":"method"}],"getRelatedFormFields":[{"__symbolic":"method"}],"getRefcodeValue":[{"__symbolic":"method"}],"transformSliderFields":[{"__symbolic":"method"}],"getWebsitePlatform":[{"__symbolic":"method"}],"addFinishedFormFlag":[{"__symbolic":"method"}],"trackEvent":[{"__symbolic":"method"}],"trackFormEvent":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"set":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"updateSource":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID"}]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"}]}],"formatErrors":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"post":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"set":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"valueExist":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"}]}],"postLogin":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"}],"declarations":[],"exports":[],"providers":[{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"sliderAuthModel":[{"__symbolic":"method"}],"formModel":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}]}]}],"members":{}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-modal","template":"\n    <div class=\"tnk-modal\" [@modalState]=\"isOpen\">\n      <div class=\"tnk-modal__dialog\" [@modalDialogState]=\"isOpen\">\n        <ng-content></ng-content>\n        <ng-content select=\"tnk-modal-header\"></ng-content>\n        <ng-content select=\"tnk-modal-body\"></ng-content>\n        <ng-content select=\"tnk-modal-footer\"></ng-content>\n      </div>\n      <span class=\"tnk-modal__backdrop\"></span>\n    </div>\n  ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["modalState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["false",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"display":"none","visibility":"hidden","opacity":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["true",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"display":"block","visibility":"visible","opacity":"1"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["false <=> true",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"group"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query"},"arguments":["@modalDialogState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animateChild"}}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["250ms ease-in-out"]}]]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["modalDialogState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["false",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translate(-50%, 100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["true",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translate(-50%, -50%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["false <=> true",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["250ms ease-in-out"]}]}]]}]}]}],"members":{"isOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-modal-header","template":"\n    <div class=\"tnk-modal__header\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-modal-body","template":"\n    <div class=\"tnk-modal__body\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tnk-modal-footer","template":"\n    <div class=\"tnk-modal__footer\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"getAuthToken":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵr"}]}],"setStore":[{"__symbolic":"method"}],"nextStep":[{"__symbolic":"method"}],"prevStep":[{"__symbolic":"method"}],"closeModal":[{"__symbolic":"method"}],"closeSuccessModal":[{"__symbolic":"method"}],"sendForm":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵv"}]}],"initData":[{"__symbolic":"method"}],"getProfileData":[{"__symbolic":"method"}],"form":[{"__symbolic":"method"}],"setInitialRegion":[{"__symbolic":"method"}],"buildForm":[{"__symbolic":"method"}],"onChangedValues":[{"__symbolic":"method"}],"getRegions":[{"__symbolic":"method"}],"setStore":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"}]}],"getRegionId":[{"__symbolic":"method"}],"inquireRegionDataByUserSubmission":[{"__symbolic":"method"}]}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵs"}]}],"buildForm":[{"__symbolic":"method"}],"setStore":[{"__symbolic":"method"}],"getRejReasonsList":[{"__symbolic":"method"}],"cancelLoan":[{"__symbolic":"method"}],"nextForm":[{"__symbolic":"method"}],"closeModal":[{"__symbolic":"method"}],"closeSuccessModal":[{"__symbolic":"method"}],"getSingleStatusCancelLoan":[{"__symbolic":"method"}],"checkStatusCancel":[{"__symbolic":"method"}],"sentCancelLoan":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-index","template":"\n    <ng-container *ngIf=\"data.statusCancel === CANCEL_STATUS.PENDING\">\n      <div class=\"tnk-card\">\n        <div class=\"tnk-card__header\">\n          <h1>Pembatalan Pinjaman Anda sedang Diproses</h1>\n        </div>\n        <div class=\"tnk-card__body\">\n          <div class=\"tnk-padding\">\n            <div class=\"main-content\">\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    Mohon tunggu beberapa saat lagi, pembatalan pinjaman Anda sedang\n                    kami proses, Silahkan tekan tombol di bawah ini untuk mengetahui\n                    status terbaru Anda.\n                  </div>\n                  <div class=\"alert alert-warning\">\n                    Status pembatalan Anda masih diproses\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"col-xs-12\">\n          <button\n            id=\"btn-check-status-cancel\"\n            class=\"tnk-button tnk-button__green block active\"\n            [ngClass]=\"{ busy: data.isFetching }\"\n            (click)=\"checkStatusCancel()\"\n          >\n            <span *ngIf=\"data.isFetching\" class=\"fa fa-spinner fa-spin\"></span>\n            Cek Status Anda\n          </button>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"data.statusCancel !== CANCEL_STATUS.PENDING\">\n      <div class=\"tnk-card\">\n        <div class=\"tnk-card__header\">\n          <h1>Segera konfirmasi pinjaman Anda</h1>\n        </div>\n        <div class=\"tnk-card__body\">\n          <div class=\"tnk-padding\">\n            <div class=\"main-content\">\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    Selamat! Pinjaman Anda telah kami setujui. Berdasarkan Sistem\n                    Scoring Tunaiku, Anda layak mendapat pinjaman dengan:\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    <div class=\"row\">\n                      <div class=\"col-xs-6\">\n                        Nomor Pinjaman\n                      </div>\n                      <div class=\"col-xs-6\">\n                        <strong>{{ loan.id }}</strong>\n                      </div>\n                    </div>\n                    <div class=\"row\">\n                      <div class=\"col-xs-6\">\n                        Jumlah Pinjaman\n                      </div>\n                      <div class=\"col-xs-6\">\n                        <strong>{{ loan.amount | tnkCurrency: 'rupiah' }}</strong>\n                      </div>\n                    </div>\n                    <div class=\"row\">\n                      <div class=\"col-xs-6\">\n                        Lama Cicilan\n                      </div>\n                      <div class=\"col-xs-6\">\n                        <strong>{{ loan.period }} Bulan</strong>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    Jumlah dan tenor yang disetujui bisa jadi berbeda dari pengajuan\n                    Anda. Jika Anda setuju, silakan klik tombol “\n                    <strong>Lanjutkan Form Konfirmasi</strong>\n                    ”. Formulir ini cukup diisi dan dikirimkan sekali saja.\n                    <!-- Jika tidak ingin mengambil pinjaman, Anda cukup klik tombol “Batalkan\n                    pinjaman”. -->\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    <p>\n                      <!-- <button\n                        [disabled]=\"\n                          data.loan.confirmed ||\n                          data.statusCancel === CANCEL_STATUS.NOT_ACCEPTED ||\n                          data.statusCancel === CANCEL_STATUS.ACCEPTED\n                        \"\n                        [ngClass]=\"{\n                          active: data.isCancel,\n                          disabled:\n                            data.loan.confirmed ||\n                            data.statusCancel === CANCEL_STATUS.NOT_ACCEPTED ||\n                            data.statusCancel === CANCEL_STATUS.ACCEPTED\n                        }\"\n                        class=\"tnk-button__blue\"\n                        (click)=\"service.cancelLoan()\"\n                      >\n                        Batalkan Pinjaman\n                      </button> -->\n                      <button\n                        [disabled]=\"\n                          data.loan.confirmed ||\n                          data.statusCancel === CANCEL_STATUS.ACCEPTED\n                        \"\n                        [ngClass]=\"{\n                          disabled:\n                            data.loan.confirmed ||\n                            data.statusCancel === CANCEL_STATUS.ACCEPTED\n                        }\"\n                        class=\"tnk-button__green\"\n                        (click)=\"service.nextForm()\"\n                      >\n                        Lanjut Form Konfirmasi\n                      </button>\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"cancel-content\" *ngIf=\"data.isCancel\">\n            <div class=\"tnk-padding\">\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <h1>Apa alasan Anda membatalkan pinjaman di Tunaiku?</h1>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <div class=\"p-y\">\n                    <h4>bantu kami mengetahui alasan pembatalan anda</h4>\n                  </div>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <form [formGroup]=\"data.cancelForm\">\n                    <div *ngFor=\"let reason of data.rejReasonsList\" class=\"radio\">\n                      <label>\n                        <input\n                          type=\"radio\"\n                          formControlName=\"reasonEnum\"\n                          name=\"reasonEnum\"\n                          [value]=\"reason.enumeration\"\n                        />\n                        {{ reason.description_id }}\n                      </label>\n                    </div>\n                  </form>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-xs-12\">\n                  <button\n                    [ngClass]=\"{ disabled: !data.cancelForm.valid }\"\n                    class=\"tnk-button__green active block\"\n                    [disabled]=\"!data.cancelForm.valid\"\n                    (click)=\"service.sentCancelLoan()\"\n                  >\n                    kirim\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <ng-container\n            *ngIf=\"\n              data.statusCancel === CANCEL_STATUS.NOT_ACCEPTED &&\n              !data.loan.confirmed\n            \"\n          >\n            <div class=\"row\">\n              <div class=\"col-xs-12\">\n                <div class=\"alert alert-danger\">\n                  <h5>Pembatalan Pinjaman Gagal Terkirim</h5>\n                  <p>\n                    Mohon maaf ada kesalahan dengan sistem kami, mohon segera\n                    hubungi\n                    <strong>(021)4000-5859</strong>\n                    untuk membatalkan pinjaman secara manual\n                  </p>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <tnk-modal [isOpen]=\"data.modal == MODAL_STATUS.SUCCESS\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">Pembatalan Anda sudah terkirim!</h5>\n        <p>\n          Mohon menunggu sampai pembatalan Anda diproses dan status pengajuan Anda\n          diperbarui sistem kami.\n        </p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeSuccessModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n\n    <tnk-modal [isOpen]=\"data.modal == MODAL_STATUS.FAILED\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">Maaf terjadi kesalahan</h5>\n        <p>Terjadi kesalahan. Silahkan cek kembali form Anda.</p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n\n    <tnk-modal [isOpen]=\"data.modal == MODAL_STATUS.ERROR\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">\n          Mohon maaf terdapat kesalahan dengan sistem kami\n        </h5>\n        <p>Mohon maaf terjadi masalah server. Silakan coba beberapa saat lagi.</p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n\n    <tnk-modal\n      [isOpen]=\"data.modal == MODAL_STATUS.FAILED_TO_CANCEL && !data.loan.confirmed\"\n    >\n      <tnk-modal-body class=\"tnk-align--center\">\n        <img src=\"assets/images/icon-failed-cancel.png\" alt=\"Icon Failed Cancel\" />\n        <h5 class=\"tnk-color--secondary\">Pembatalan Pinjaman Gagal Terkirim</h5>\n        <p>\n          Mohon maaf ada kesalahan dengan sistem kami, mohon segera hubungi\n          <strong>(021)4000-5859</strong>\n          untuk membatalkan pinjaman secara manual.\n        </p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeModal()\"\n        >\n          Kembali ke Dasbor\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"statusCancelCb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["profile"]}]}],"loan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["loan"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵw"}]}],"ngOnInit":[{"__symbolic":"method"}],"checkStatusCancel":[{"__symbolic":"method"}],"handleCancelAccepted":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-bank-account","template":"\n    <div class=\"tnk-card\">\n      <div class=\"tnk-card__header\">\n        <h1>Rekening Bank</h1>\n        <div>\n          <small>Langkah 2 dari 4</small>\n        </div>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <div class=\"main-content\">\n            <div>\n              <label class=\"control-label\">Nama Bank</label>\n              <p>\n                {{ bankData.bankName }}\n              </p>\n\n              <label class=\"control-label\">Nomor Rekening</label>\n              <p>\n                {{ bankData.accountNumber }}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"info-card padding-15\">\n      <span>\n        Hubungi kami jika ingin mengubah akun Rekening Bank Anda.\n        <a\n          class=\"info-card--mobile-view\"\n          id=\"LinkPhoneNumberMobileView\"\n          href=\"tel:{{ OFFICE_PHONE.area }}{{ OFFICE_PHONE.phone }}\"\n        >\n          Silahkan klik disini\n        </a>\n        <a\n          class=\"info-card--desktop-view\"\n          id=\"LinkPhoneNumberWebView\"\n          (click)=\"togglePhoneNumber()\"\n        >\n          Silahkan klik disini\n        </a>\n      </span>\n    </div>\n\n    <div class=\"tnk-card__nav\">\n      <div class=\"tnk-padding\">\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <button\n              id=\"BtnPrevStep\"\n              class=\"tnk-button__green block\"\n              (click)=\"parentService.prevStep()\"\n            >\n              Sebelumnya\n            </button>\n          </div>\n          <div class=\"col-xs-6\">\n            <button\n              (click)=\"parentService.nextStep()\"\n              id=\"BtnNextStep\"\n              class=\"tnk-button__green block active right\"\n            >\n              Selanjutnya\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <tnk-modal [isOpen]=\"isShowPhoneNumber\">\n      <tnk-modal-body>\n        <p>\n          Untuk mengubah Rekening Bank, silahkan hubungi Call Center kami di\n          <strong>{{ OFFICE_PHONE.area }}-{{ OFFICE_PHONE.phone }}</strong>\n        </p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          id=\"BtnCloseModalToggelPhoneNumber\"\n          class=\"tnk-button tnk-button--primary tnk-button--full-width\"\n          (click)=\"togglePhoneNumber()\"\n        >\n          Tutup\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"bankData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵs"}]}],"togglePhoneNumber":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-pin-picture","template":"\n    <div class=\"tnk-card\">\n      <div class=\"tnk-card__header\">\n        <h1>Foto KTP</h1>\n        <div>\n          <small>Langkah 3 dari 4</small>\n        </div>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <div class=\"main-content\">\n            <div>\n              <form>\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <p>\n                      Mohon unggah foto yang jelas: wajah terlihat jelas dan tidak\n                      terpotong. Pastikan foto sesuai karena akan di verifikasi oleh\n                      tim Tunaiku.\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <div class=\"exampling-container\">\n                      <div class=\"exampling-container__item\">\n                        <div class=\"row\">\n                          <div class=\"col-xs-12\">\n                            <h2>Contoh Foto KTP</h2>\n                          </div>\n                        </div>\n                        <div class=\"row\">\n                          <div class=\"col-xs-6\">\n                            <div class=\"exampling-img text-green\">\n                              <img\n                                class=\"img-responsive\"\n                                src=\"assets/images/contoh_ktp_benar.png\"\n                                alt=\"\"\n                              />\n                              <h4>Benar</h4>\n                            </div>\n                          </div>\n                          <div class=\"col-xs-6\">\n                            <div class=\"exampling-img text-red\">\n                              <img\n                                class=\"img-responsive\"\n                                src=\"assets/images/contoh_ktp_salah.png\"\n                                alt=\"\"\n                              />\n                              <h4>Salah</h4>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"text-center\">\n                          <small>\n                            Foto di kanan tidak sesuai karena terlalu gelap, buram\n                            dan tulisannya tidak terbaca.\n                          </small>\n                        </div>\n                      </div>\n\n                      <div\n                        class=\"exampling-container__preview\"\n                        *ngIf=\"data.isValid || data.isError\"\n                      >\n                        <img [src]=\"data.preview\" />\n                        <div>\n                          <small>{{ data.image?.name }}</small>\n                        </div>\n                      </div>\n\n                      <div>\n                        <div class=\"progress\" *ngIf=\"data.isValid || data.isError\">\n                          <div\n                            class=\"progress-bar progress-bar-striped progress-bar-success\"\n                            [style.width]=\"data.progress + '%'\"\n                          >\n                            {{ data.progress + '%' }}\n                          </div>\n                        </div>\n                      </div>\n\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'file'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Maaf, terjadi error. Pastikan ukuran foto tidak lebih dari\n                          2mb dan Pastikan format foto sesuai. Jika sudah sesuai\n                          tapi masih gagal, mohon tunggu sesaat sebelum mengunggah\n                          lagi\n                        </p>\n                      </div>\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'connection'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Mohon maaf terjadi masalah koneksi. Silakan unggah lagi\n                          saat sinyal internet Anda lebih baik\n                        </p>\n                      </div>\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'server'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Mohon maaf terjadi masalah server. Silakan unggah foto\n                          beberapa jam lagi.\n                        </p>\n                      </div>\n\n                      <button\n                        [ngClass]=\"{ disabled: data.isBusy }\"\n                        class=\"tnk-button__blue block\"\n                        (click)=\"service.compressFile()\"\n                      >\n                        {{ data.isBusy ? 'Uploading' : 'Unggah dari galeri' }}\n                      </button>\n\n                      <div>\n                        <small>\n                          Format file: JPG, PNG (maksimum 2mb)\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tnk-card__nav\">\n      <div class=\"tnk-padding\">\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <button\n              class=\"tnk-button__green block\"\n              (click)=\"service.parentService.prevStep()\"\n            >\n              Sebelumnya\n            </button>\n          </div>\n          <div class=\"col-xs-6\">\n            <button\n              (click)=\"service.parentService.nextStep()\"\n              [disabled]=\"data.progress !== 100\"\n              [ngClass]=\"{ disabled: data.progress !== 100 }\"\n              class=\"tnk-button__green block active right\"\n            >\n              Selanjutnya\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["profile"]}]}],"loan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["loan"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵba"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","module":"ngx-image-compress","name":"NgxImageCompressService"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵh"}]}],"setStore":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"compressFile":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transformImage":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-selfie-picture","template":"\n    <div class=\"tnk-card\">\n      <div class=\"tnk-card__header\">\n        <h1>Foto Selfie</h1>\n        <div>\n          <small>Langkah 4 dari 4</small>\n        </div>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <div class=\"main-content\">\n            <div>\n              <form>\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <ul class=\"tnk-ul\">\n                      Mohon unggah foto yang jelas:\n                      <li class=\"tnk-li\">\n                        Wajah terlihat jelas dan tidak terpotong\n                      </li>\n                      <li class=\"tnk-li\">Memegang kartu identitas (KTP)</li>\n                      <li class=\"tnk-li\">\n                        Posisi foto vertikal (tidak menyamping)\n                      </li>\n                    </ul>\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <div class=\"exampling-container\">\n                      <div class=\"exampling-container__item\">\n                        <div class=\"row\">\n                          <div class=\"col-xs-12\">\n                            <h2>Contoh Foto Selfie</h2>\n                          </div>\n                        </div>\n                        <div class=\"exampling-container__item-row\">\n                          <div class=\"exampling-img text-green img-padding\">\n                            <img\n                              class=\"img-responsive\"\n                              src=\"assets/images/contoh_selfie_benar.png\"\n                              alt=\"Selfie Benar\"\n                            />\n                            <h4>Benar</h4>\n                          </div>\n                          <div class=\"exampling-img text-red img-padding\">\n                            <img\n                              class=\"img-responsive\"\n                              src=\"assets/images/contoh_selfie_salah.png\"\n                              alt=\"Selfie Salah\"\n                            />\n                            <h4>Salah</h4>\n                          </div>\n                          <div class=\"exampling-img text-red img-padding\">\n                            <img\n                              class=\"img-responsive\"\n                              src=\"assets/images/contoh_selfie_horizontal.png\"\n                              alt=\"Selfie Salah\"\n                            />\n                            <h4>Salah</h4>\n                          </div>\n                        </div>\n                        <div class=\"text-center\">\n                          <small>\n                            Pastikan foto yang diambil sesuai karena akan\n                            diverifikasi oleh tim Tunaiku\n                          </small>\n                        </div>\n                      </div>\n\n                      <div\n                        class=\"exampling-container__preview\"\n                        *ngIf=\"data.isValid || data.isError\"\n                      >\n                        <img [src]=\"data.preview\" />\n                        <div>\n                          <small>{{ data.image?.name }}</small>\n                        </div>\n                      </div>\n\n                      <div>\n                        <div class=\"progress\" *ngIf=\"data.isValid || data.isError\">\n                          <div\n                            class=\"progress-bar progress-bar-striped progress-bar-success\"\n                            [style.width]=\"data.progress + '%'\"\n                          >\n                            {{ data.progress + '%' }}\n                          </div>\n                        </div>\n                      </div>\n\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'file'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Maaf, terjadi error. Pastikan ukuran foto tidak lebih dari\n                          2mb dan Pastikan format foto sesuai. Jika sudah sesuai\n                          tapi masih gagal, mohon tunggu sesaat sebelum mengunggah\n                          lagi\n                        </p>\n                      </div>\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'connection'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Mohon maaf terjadi masalah koneksi. Silakan unggah lagi\n                          saat sinyal internet Anda lebih baik\n                        </p>\n                      </div>\n                      <div\n                        class=\"exampling-container__error\"\n                        *ngIf=\"data.isError == 'server'\"\n                      >\n                        <p>\n                          <span><i class=\"fa fa-exclamation-circle\"></i></span>\n                          Mohon maaf terjadi masalah server. Silakan unggah foto\n                          beberapa jam lagi.\n                        </p>\n                      </div>\n\n                      <button\n                        [ngClass]=\"{ disabled: data.isBusy }\"\n                        class=\"tnk-button__blue block\"\n                        (click)=\"service.compressFile()\"\n                      >\n                        {{ data.isBusy ? 'Uploading' : 'Unggah dari galeri' }}\n                      </button>\n                      <div>\n                        <small>\n                          Format file: JPG, PNG (maksimum 2mb)\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tnk-card__nav\">\n      <div class=\"tnk-padding\">\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <button\n              class=\"tnk-button__green block\"\n              (click)=\"service.parentService.prevStep()\"\n            >\n              Sebelumnya\n            </button>\n          </div>\n          <div class=\"col-xs-6\">\n            <button\n              (click)=\"service.parentService.sendForm()\"\n              [disabled]=\"data.progress !== 100\"\n              [ngClass]=\"{ disabled: data.progress !== 100 }\"\n              class=\"tnk-button__green block active right\"\n            >\n              Kirim Formulir\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <tnk-modal [isOpen]=\"data.modal == 'success'\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">\n          Formulir Konfirmasi Anda sudah terkirim!\n        </h5>\n        <p>\n          Terima kasih telah mengirimkan formulir konfirmasi. Status pinjaman Anda\n          akan diperbaharui setelah Anda menerima notifikasi SMS dan email draft\n          kontrak.\n        </p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeSuccessModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n\n    <tnk-modal [isOpen]=\"data.modal == 'failed'\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">Maaf terjadi kesalahan</h5>\n        <p>Terjadi kesalahan. Silahkan cek kembali form Anda.</p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n\n    <tnk-modal [isOpen]=\"data.modal == 'error'\">\n      <tnk-modal-body class=\"tnk-align--center\">\n        <h5 class=\"tnk-color--secondary\">\n          Mohon maaf terdapat kesalahan dengan sistem kami\n        </h5>\n        <p>Mohon maaf terjadi masalah server. Silakan coba beberapa saat lagi.</p>\n      </tnk-modal-body>\n      <tnk-modal-footer>\n        <button\n          class=\"tnk-button tnk-button--secondary tnk-button--full-width tnk-button--pill\"\n          (click)=\"service.closeModal()\"\n        >\n          Saya Mengerti\n        </button>\n      </tnk-modal-footer>\n    </tnk-modal>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["profile"]}]}],"loan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["loan"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbd"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","module":"ngx-image-compress","name":"NgxImageCompressService"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵh"}]}],"setStore":[{"__symbolic":"method"}],"closeModal":[{"__symbolic":"method"}],"closeSuccessModal":[{"__symbolic":"method"}],"upload":[{"__symbolic":"method"}],"compressFile":[{"__symbolic":"method"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-work-place","template":"\n    <div class=\"tnk-card\">\n      <div class=\"tnk-card__header\">\n        <h1>Data Tempat Kerja</h1>\n        <div>\n          <small>Langkah 1 dari 4</small>\n        </div>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <div class=\"main-content\">\n            <div>\n              <form [formGroup]=\"data.workPlaceForm\">\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.compOrBuilding }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_compOrBuilding\">\n                        Nama Gedung\n                      </label>\n                      <p>Contoh : grha niaga thamrin</p>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_compOrBuilding\"\n                        formControlName=\"compOrBuilding\"\n                      />\n                      <small class=\"text-danger\">\n                        {{ data.errors.compOrBuilding }}\n                      </small>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-xs-12 col-md-4\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.buildingNumber }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_buildingNumber\">\n                        Nomor Gedung\n                      </label>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_buildingNumber\"\n                        formControlName=\"buildingNumber\"\n                      />\n                      <small class=\"text-danger\">\n                        {{ data.errors.buildingNumber }}\n                      </small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12 col-md-4\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.flatNumber }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_flatNumber\">\n                        Nomor Blok/Kavling\n                      </label>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_flatNumber\"\n                        formControlName=\"flatNumber\"\n                      />\n                      <small class=\"text-danger\">\n                        {{ data.errors.flatNumber }}\n                      </small>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.buildingType }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_buildingType\">\n                        Jenis Bangunan\n                      </label>\n                      <select\n                        id=\"acc_buildingType\"\n                        class=\"form-control\"\n                        id=\"acc_buildingType\"\n                        formControlName=\"buildingType\"\n                      >\n                        <option [value]=\"0\">Pilih Salah Satu</option>\n                        <option\n                          *ngFor=\"let building of data.buildingType\"\n                          [value]=\"building.value\"\n                        >\n                          {{ building.name }}\n                        </option>\n                      </select>\n                      <small class=\"text-danger\">\n                        {{ data.errors.buildingType }}\n                      </small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.street }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_street\">\n                        Nama Jalan\n                      </label>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_street\"\n                        formControlName=\"street\"\n                      />\n                      <small class=\"text-danger\">{{ data.errors.street }}</small>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-xs-6 col-md-4\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.rt }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_rt\">RT</label>\n                      <p>Jika tidak ada, isi 0 (nol)</p>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_rt\"\n                        formControlName=\"rt\"\n                        (keypress)=\"numericalInputOnly($event)\"\n                      />\n                      <small class=\"text-danger\">{{ data.errors.rt }}</small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-6 col-md-4\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.rw }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_rw\">RW</label>\n                      <p>Jika tidak ada, isi 0 (nol)</p>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_rw\"\n                        formControlName=\"rw\"\n                        (keypress)=\"numericalInputOnly($event)\"\n                      />\n                      <small class=\"text-danger\">{{ data.errors.rw }}</small>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.province }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_province\">\n                        Provinsi\n                      </label>\n                      <select\n                        id=\"acc_province\"\n                        class=\"form-control\"\n                        id=\"acc_province\"\n                        formControlName=\"province\"\n                        (change)=\"\n                          service.getRegions(\n                            { province: $event.target.value },\n                            'city',\n                            null,\n                            true\n                          )\n                        \"\n                      >\n                        <option [value]=\"0\" disabled hidden>\n                          Pilih Salah Satu\n                        </option>\n                        <option\n                          *ngFor=\"let province of data.provinces\"\n                          [value]=\"province.province\"\n                        >\n                          {{ province.province }}\n                        </option>\n                      </select>\n                      <small class=\"text-danger\">{{ data.errors.province }}</small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.city }\"\n                      *ngIf=\"data.workPlaceForm.value.province !== '0'\"\n                    >\n                      <label class=\"control-label\" for=\"acc_city\">Kota</label>\n                      <select\n                        id=\"acc_city\"\n                        class=\"form-control\"\n                        id=\"acc_city\"\n                        formControlName=\"city\"\n                        (change)=\"\n                          service.getRegions(\n                            { city: $event.target.value },\n                            'district',\n                            null,\n                            true\n                          )\n                        \"\n                      >\n                        <option [value]=\"0\" disabled hidden>\n                          Pilih Salah Satu\n                        </option>\n                        <option\n                          *ngFor=\"let city of data.cities\"\n                          [value]=\"city.city\"\n                        >\n                          {{ city.city }}\n                        </option>\n                      </select>\n                      <small class=\"text-danger\">{{ data.errors.city }}</small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.district }\"\n                      *ngIf=\"data.workPlaceForm.value.city !== '0'\"\n                    >\n                      <label class=\"control-label\" for=\"acc_district\">\n                        Kecamatan\n                      </label>\n                      <select\n                        id=\"acc_district\"\n                        class=\"form-control\"\n                        id=\"acc_district\"\n                        formControlName=\"district\"\n                        (change)=\"\n                          service.getRegions(\n                            { district: $event.target.value },\n                            'village',\n                            null,\n                            true\n                          )\n                        \"\n                      >\n                        <option [value]=\"0\" disabled hidden>\n                          Pilih Salah Satu\n                        </option>\n                        <option\n                          *ngFor=\"let district of data.districts\"\n                          [value]=\"district.district\"\n                        >\n                          {{ district.district }}\n                        </option>\n                      </select>\n                      <small class=\"text-danger\">{{ data.errors.district }}</small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.village }\"\n                      *ngIf=\"data.workPlaceForm.value.district !== '0'\"\n                    >\n                      <label class=\"control-label\" for=\"acc_village\">\n                        Kelurahan\n                      </label>\n                      <select\n                        id=\"acc_village\"\n                        class=\"form-control\"\n                        id=\"acc_village\"\n                        formControlName=\"village\"\n                        (change)=\"\n                          service.getRegions(\n                            { village: $event.target.value },\n                            'postal_code',\n                            null,\n                            true\n                          )\n                        \"\n                      >\n                        <option [value]=\"0\" disabled hidden>\n                          Pilih Salah Satu\n                        </option>\n                        <option\n                          *ngFor=\"let village of data.villages\"\n                          [value]=\"village.village\"\n                        >\n                          {{ village.village }}\n                        </option>\n                      </select>\n                      <small class=\"text-danger\">{{ data.errors.village }}</small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.postalCode }\"\n                      *ngIf=\"data.workPlaceForm.value.village !== '0'\"\n                    >\n                      <label class=\"control-label\" for=\"acc_postalCode\">\n                        Kode Pos\n                      </label>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_postalCode\"\n                        formControlName=\"postalCode\"\n                        [attr.disabled]=\"true\"\n                      />\n                      <small class=\"text-danger\">\n                        {{ data.errors.postalCode }}\n                      </small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.officePhoneNumber }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_officePhoneNumber\">\n                        Nomor Telepon Tempat Kerja\n                      </label>\n                      <p>Contoh: 021123456</p>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_officePhoneNumber\"\n                        formControlName=\"officePhoneNumber\"\n                        (keypress)=\"numericalInputOnly($event)\"\n                      />\n                      <small class=\"text-danger\">\n                        {{ data.errors.officePhoneNumber }}\n                      </small>\n                    </div>\n                  </div>\n                  <div class=\"col-xs-12\">\n                    <div\n                      class=\"form-group\"\n                      [ngClass]=\"{ 'has-error': data.errors.jobRole }\"\n                    >\n                      <label class=\"control-label\" for=\"acc_jobRole\">\n                        Jabatan Pekerjaan\n                      </label>\n                      <p>Contoh: Bagian Keuangan, Akuntan</p>\n                      <input\n                        type=\"text\"\n                        class=\"form-control\"\n                        id=\"acc_jobRole\"\n                        formControlName=\"jobRole\"\n                      />\n                      <small class=\"text-danger\">{{ data.errors.jobRole }}</small>\n                    </div>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tnk-card__nav\">\n      <div class=\"tnk-padding\">\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <button\n              class=\"tnk-button__green block\"\n              (click)=\"service.parentService.prevStep()\"\n            >\n              Sebelumnya\n            </button>\n          </div>\n          <div class=\"col-xs-6\">\n            <button\n              (click)=\"service.parentService.nextStep()\"\n              [disabled]=\"!data.workPlaceForm.valid\"\n              [ngClass]=\"{ disabled: !data.workPlaceForm.valid }\"\n              class=\"tnk-button__green block active right\"\n            >\n              Selanjutnya\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵt"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"confirmation-confirmed","template":"\n    <div class=\"tnk-card tnk-card--primary\">\n      <div class=\"tnk-card__header\">\n        <span class=\"tnk-font--lead\">Formulir konfirmasi telah terkirim</span>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <p class=\"tnk-confirmation--p\">\n            Pantau terus aplikasi Tunaiku untuk mengikuti perkembangan pengajuan\n            pinjaman Anda.\n          </p>\n          <ul class=\"tnk-ul\">\n            <li class=\"tnk-li\">Proses kurang dari 24 jam.</li>\n            <li class=\"tnk-li\">\n              Jika terdapat kendala, paling lama akan diproses dalam 1-3 hari kerja.\n            </li>\n            <li class=\"tnk-li\">\n              Pastikan handphone Anda selalu\n              <strong>AKTIF</strong>\n              .\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tnk-card tnk-card--primary\">\n      <div class=\"tnk-card__header\">\n        <span class=\"tnk-font--lead\">Persiapkan dokumen Anda!</span>\n      </div>\n      <div class=\"tnk-card__body\">\n        <div class=\"tnk-padding\">\n          <p class=\"tnk-confirmation--p\">\n            Tahapan selanjutnya adalah tanda tangan kontrak, Sebelum bertemu tim\n            kami, siapkan beberapa dokumen sebagai berikut:\n          </p>\n          <ul class=\"tnk-ul\">\n            <li class=\"tnk-li\">KTP/Resi (Asli)</li>\n            <li class=\"tnk-li\">\n              Kartu Keluarga (Asli)\n            </li>\n            <li class=\"tnk-li\">\n              Buku Tabungan (Asli)\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    .tnk-card {\n      background: #fdfdfd;\n      border-left: 5px solid #ffc412;\n      border-radius: 5px;\n      color: #535353;\n      margin-bottom: 15px; }\n      .tnk-card__nav {\n        margin: 15px 0; }\n      .tnk-card__header {\n        border-bottom: 1px solid #e1e1e1;\n        padding: 15px;\n        -ms-flex-flow: wrap;\n            flex-flow: wrap; }\n        .tnk-card__header h1 {\n          font-size: 16px;\n          margin: 0;\n          width: 100%; }\n        .tnk-card__header small {\n          font-size: 12px;\n          color: #9b9b9b;\n          width: 100%; }\n      .tnk-card__body {\n        padding: 10px 0; }\n        .tnk-card__body .exampling-container__item {\n          background: #f4f4f4;\n          border-radius: 10px;\n          padding: 10px;\n          margin: 5px 0 15px 0;\n          text-align: center; }\n          .tnk-card__body .exampling-container__item-row {\n            display: -webkit-box;\n            display: -ms-flexbox;\n            display: flex;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                -ms-flex-direction: row;\n                    flex-direction: row;\n            justify-items: center;\n            -webkit-box-pack: center;\n                -ms-flex-pack: center;\n                    justify-content: center;\n            margin: 0 auto; }\n          .tnk-card__body .exampling-container__item .img-padding {\n            padding: 4px; }\n          .tnk-card__body .exampling-container__item .exampling-img {\n            margin: 5px 0 10px 0; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-red {\n              color: #ff0000; }\n            .tnk-card__body .exampling-container__item .exampling-img.text-green {\n              color: #80bd01; }\n            .tnk-card__body .exampling-container__item .exampling-img img {\n              margin: 0 auto;\n              height: 100px; }\n            .tnk-card__body .exampling-container__item .exampling-img h4 {\n              margin: 5px 0;\n              font-size: 12px;\n              font-weight: bolder; }\n          .tnk-card__body .exampling-container__item h2 {\n            font-size: 14px;\n            margin: 0 0 10px 0;\n            text-align: center;\n            font-weight: bolder; }\n          .tnk-card__body .exampling-container__item small {\n            font-size: 12px;\n            margin: 5px 0; }\n        .tnk-card__body .exampling-container__preview img {\n          max-width: 150px; }\n        .tnk-card__body .exampling-container__error p {\n          color: #ff0000;\n          padding-bottom: 10px; }\n        .tnk-card__body .cancel-content form div {\n          margin: 15px 0; }\n        .tnk-card__body .form-group p {\n          font-size: 12px;\n          margin: -7px 0 4px 0; }\n        .tnk-card__body h1 {\n          margin: 0;\n          font-size: 16px;\n          font-weight: bolder;\n          line-height: 21px; }\n        .tnk-card__body h4 {\n          margin: 0;\n          font-size: 12px; }\n        .tnk-card__body ul {\n          padding: 0;\n          margin: 0; }\n          .tnk-card__body ul li:not(.tnk-li) {\n            list-style-type: none; }\n        .tnk-card__body ul.tnk-ul {\n          margin-left: 15px; }\n        .tnk-card__body strong {\n          font-weight: bolder; }\n        .tnk-card__body p {\n          font-size: 14px;\n          line-height: 21px; }\n        .tnk-card__body p.tnk-confirmation--p {\n          font-size: 16px; }\n        .tnk-card__body small {\n          font-size: 12px; }\n\n    .p-t {\n      padding-top: 10px; }\n\n    .p-b {\n      padding-bottom: 10px; }\n\n    .p-y {\n      padding: 5px 0px; }\n\n    .p-x {\n      padding: 0px 5px; }\n\n    .tnk-button__blue {\n      width: 120px;\n      color: #0087c6;\n      background-color: #fdfdfd;\n      border: 2.5px solid #0087c6;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__blue.active {\n        color: #fdfdfd;\n        background-color: #0087c6; }\n      .tnk-button__blue.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__blue.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n\n    .tnk-button__green {\n      width: 120px;\n      color: #80bd01;\n      background-color: #fdfdfd;\n      border: 2.5px solid #80bd01;\n      border-radius: 5px;\n      line-height: 13px;\n      padding: 5px;\n      margin: 5px 0; }\n      .tnk-button__green.active {\n        color: #fdfdfd;\n        background-color: #80bd01; }\n      .tnk-button__green.disabled {\n        color: #e1e1e1;\n        cursor: not-allowed;\n        background-color: #9b9b9b;\n        border-color: #9b9b9b; }\n      .tnk-button__green.block {\n        width: 100%;\n        max-width: 180px;\n        text-transform: capitalize;\n        padding: 13px 0 10px 0;\n        text-align: center; }\n      .tnk-button__green.right {\n        float: right; }\n\n    .info-card {\n      width: 100%;\n      background-color: #fffcdb; }\n\n    .info-card--mobile-view {\n      display: none; }\n\n    .info-card--desktop-view {\n      display: inline; }\n\n    @media (max-width: 768px) {\n      .info-card--mobile-view {\n        display: inline; }\n      .info-card--desktop-view {\n        display: none; } }\n  "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":"\n    <div\n      class=\"feedback\"\n      *ngIf=\"!isDismissed\"\n      (click)=\"handleClickPropagation($event)\"\n    >\n      <div *ngIf=\"isSended\" class=\"feedback-message\">\n        <p>Terima kasih. Saran Anda telah terkirim</p>\n      </div>\n\n      <div *ngIf=\"isError\" class=\"feedback-message\">\n        <p>\n          Maaf, server kami sedang mengalami masalah. Silahkan coba beberapa saat\n          lagi\n        </p>\n        <div class=\"feedback-message-actions\">\n          <button\n            id=\"BtnFeedbackActionDismiss\"\n            class=\"button-action\"\n            (click)=\"handleDismiss()\"\n          >\n            Lewati\n          </button>\n          <button\n            id=\"BtnFeedbackActionSubmitAgain\"\n            class=\"button-action\"\n            (click)=\"handleSubmitAgain()\"\n          >\n            Isi Survey Lagi\n          </button>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!isSended && !isError\">\n        <div class=\"feedback-header\">\n          <h2>Survey Kepuasan</h2>\n          <div class=\"feedback-close\">\n            <button id=\"BtnFeedbackActionDismissHeader\" (click)=\"handleDismiss()\">\n              X\n            </button>\n          </div>\n        </div>\n\n        <div class=\"feedback-body\">\n          <div *ngIf=\"!isEmoScoreOnly\" class=\"feedback-item\">\n            <p class=\"feedback-description\">\n              {{ FEEDBACK_CONTENT[journeyPoint].ces.description }}\n            </p>\n            <div class=\"feedback-emotion\">\n              <ul class=\"feedback-emotion-list\">\n                <li\n                  *ngFor=\"let item of FEEDBACK_JOURNEY_CES_ITEM\"\n                  class=\"feedback-emotion-list-item\"\n                >\n                  <img\n                    [src]=\"item.src\"\n                    [alt]=\"item.alt\"\n                    (click)=\"handleClickPoint($event)\"\n                    [attr.data-name]=\"item.name\"\n                    [attr.data-value]=\"item.value\"\n                    [class.active]=\"cesPoint === item.value\"\n                    [id]=\"item.id\"\n                  />\n                </li>\n              </ul>\n              <div class=\"feedback-emotion-text\">\n                <p class=\"feedback-emotion-text-low\">\n                  {{ FEEDBACK_CONTENT[journeyPoint].ces.emotionTextLow }}\n                </p>\n                <p class=\"feedback-emotion-text-high\">\n                  {{ FEEDBACK_CONTENT[journeyPoint].ces.emotionTextHigh }}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"feedback-item\">\n            <p class=\"feedback-description\">\n              {{ FEEDBACK_CONTENT[journeyPoint].emoScore.description }}\n            </p>\n            <div class=\"feedback-emotion\">\n              <ul class=\"feedback-emotion-list\">\n                <li\n                  *ngFor=\"let item of FEEDBACK_JOURNEY_EMOSCORE_ITEM\"\n                  class=\"feedback-emotion-list-item\"\n                >\n                  <img\n                    [src]=\"item.src\"\n                    [alt]=\"item.alt\"\n                    (click)=\"handleClickPoint($event)\"\n                    [attr.data-name]=\"item.name\"\n                    [attr.data-value]=\"item.value\"\n                    [class.active]=\"emoScorePoint === item.value\"\n                    [id]=\"item.id\"\n                  />\n                </li>\n              </ul>\n              <div class=\"feedback-emotion-text\">\n                <p class=\"feedback-emotion-text-low\">\n                  {{ FEEDBACK_CONTENT[journeyPoint].emoScore.emotionTextLow }}\n                </p>\n                <p class=\"feedback-emotion-text-high\">\n                  {{ FEEDBACK_CONTENT[journeyPoint].emoScore.emotionTextHigh }}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"feedback-item\">\n            <p\n              *ngIf=\"(emoScorePoint === 1 || emoScorePoint === 2) && isEmoScoreOnly\"\n              class=\"feedback-description\"\n            >\n              Apa hal yang dapat kami tingkatkan untuk melayani Anda lebih baik?\n            </p>\n            <p\n              *ngIf=\"\n                (emoScorePoint > 2 && isEmoScoreOnly) ||\n                !isEmoScoreOnly ||\n                emoScorePoint === 0\n              \"\n              class=\"feedback-description\"\n            >\n              Ceritakan alasan Anda memberikan penilaian tersebut?\n            </p>\n            <form [formGroup]=\"reasonForm\" method=\"POST\">\n              <div class=\"form-group\">\n                <textarea\n                  formControlName=\"content\"\n                  class=\"form-control\"\n                  rows=\"5\"\n                  placeholder=\"Tulis alasan Anda disini\"\n                  id=\"TxtReasonForm\"\n                ></textarea>\n              </div>\n            </form>\n          </div>\n          <button\n            *ngIf=\"isEmoScoreOnly\"\n            type=\"submit\"\n            class=\"feedback-button\"\n            [disabled]=\"emoScorePoint === 0 || isBusy\"\n            (click)=\"handleSubmit()\"\n            id=\"BtnSubmitFeedbackJourney\"\n          >\n            Kirim Saran\n          </button>\n          <button\n            *ngIf=\"!isEmoScoreOnly\"\n            type=\"submit\"\n            class=\"feedback-button\"\n            [disabled]=\"cesPoint === 0 || emoScorePoint === 0 || isBusy\"\n            (click)=\"handleSubmit()\"\n            id=\"BtnSubmitFeedbackJourney\"\n          >\n            Kirim Saran\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  ","selector":"feedback-journey","styles":["\n    .feedback {\n      display: block;\n      max-width: 640px;\n      width: 100%;\n      margin-left: auto;\n      margin-right: auto;\n      border: 1px solid #c2c2c2;\n      border-radius: 10px;\n      color: #535353;\n      font-size: 16px;\n      text-align: left;\n      background-color: #fff; }\n      .feedback-message {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        width: 100%;\n        border-radius: 6px;\n        -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);\n                box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);\n        background-color: #323232;\n        font-family: inherit;\n        padding: 15px 20px;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-box-pack: justify;\n            -ms-flex-pack: justify;\n                justify-content: space-between; }\n        @media screen and (max-width: 610px) {\n          .feedback-message {\n            display: block; } }\n        .feedback-message p {\n          width: 60%;\n          margin: 0;\n          color: #fff; }\n          @media screen and (max-width: 610px) {\n            .feedback-message p {\n              width: 100%; } }\n        .feedback-message-actions {\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex; }\n          @media screen and (max-width: 610px) {\n            .feedback-message-actions {\n              -webkit-box-pack: end;\n                  -ms-flex-pack: end;\n                      justify-content: flex-end; } }\n        .feedback-message .button-action {\n          display: inline-block;\n          border: 0;\n          outline: none;\n          background: none;\n          color: #81be41;\n          font-weight: bold; }\n          .feedback-message .button-action:not(:last-child) {\n            margin-right: 10px; }\n      .feedback-header {\n        padding: 15px 20px;\n        border-bottom: 1px solid #c2c2c2;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center; }\n        @media screen and (max-width: 550px) {\n          .feedback-header {\n            padding: 10px 15px; } }\n        .feedback-header h2 {\n          margin: 0;\n          margin-right: auto;\n          font-family: inherit;\n          font-size: 24px;\n          font-weight: 700;\n          color: #535353; }\n          @media screen and (max-width: 550px) {\n            .feedback-header h2 {\n              font-size: 20px; } }\n      .feedback-close button {\n        display: block;\n        text-align: center;\n        white-space: nowrap;\n        cursor: pointer;\n        background: none;\n        outline: 0;\n        font-size: 18px;\n        color: #c2c2c2;\n        border: 0; }\n      .feedback-body {\n        padding: 30px 20px; }\n        @media screen and (max-width: 550px) {\n          .feedback-body {\n            padding: 10px 15px; } }\n      .feedback-item {\n        margin-bottom: 30px; }\n        @media screen and (max-width: 550px) {\n          .feedback-item {\n            margin-bottom: 0; } }\n      .feedback-description {\n        font-family: inherit;\n        font-size: 16px;\n        font-weight: 700;\n        margin-bottom: 15px;\n        color: #535353; }\n        @media screen and (max-width: 550px) {\n          .feedback-description {\n            margin-bottom: 7.5px; } }\n      .feedback-emotion {\n        display: inline-block; }\n        .feedback-emotion-list {\n          padding: 0;\n          margin-top: 0;\n          margin-bottom: 5px; }\n          @media screen and (max-width: 550px) {\n            .feedback-emotion-list {\n              margin-bottom: 0; } }\n        .feedback-emotion-list-item {\n          list-style: none;\n          display: inline-block;\n          cursor: pointer; }\n          .feedback-emotion-list-item:not(:first-child) {\n            margin-left: 10px; }\n            @media screen and (max-width: 550px) {\n              .feedback-emotion-list-item:not(:first-child) {\n                margin-left: 5px; } }\n          .feedback-emotion-list-item img {\n            -webkit-filter: grayscale(100%);\n                    filter: grayscale(100%);\n            opacity: 0.5;\n            -webkit-transition: 0.2s ease-in-out;\n            transition: 0.2s ease-in-out;\n            display: block;\n            max-width: 52px; }\n            .feedback-emotion-list-item img.active {\n              opacity: 1;\n              -webkit-filter: none;\n                      filter: none; }\n            @media screen and (max-width: 550px) {\n              .feedback-emotion-list-item img {\n                max-width: 40px; } }\n      .feedback-emotion-text {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-pack: justify;\n            -ms-flex-pack: justify;\n                justify-content: space-between;\n        font-size: 14px; }\n        .feedback-emotion-text-low, .feedback-emotion-text-high {\n          color: #535353;\n          margin-bottom: 5px; }\n      .feedback-button {\n        display: block;\n        text-align: center;\n        white-space: nowrap;\n        cursor: pointer;\n        padding: 15px 65px;\n        background: none;\n        border-radius: 5px;\n        color: #80bd01;\n        border: 1px solid #80bd01;\n        outline: 0;\n        -webkit-transition: all 0.3s;\n        transition: all 0.3s;\n        margin-left: auto;\n        margin-right: auto; }\n        .feedback-button:disabled {\n          color: #cacccf;\n          border: 1px solid #cacccf;\n          cursor: not-allowed; }\n        @media screen and (max-width: 550px) {\n          .feedback-button {\n            padding: 5px 50px; } }\n  "]}]}],"members":{"media":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"journeyPoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onCloseFeedback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","module":"@angular/router","name":"Router"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵe"}]}],"ngOnInit":[{"__symbolic":"method"}],"checkUserSendedFeedback":[{"__symbolic":"method"}],"buildForm":[{"__symbolic":"method"}],"handleClickPoint":[{"__symbolic":"method"}],"checkCesOrEmoContent":[{"__symbolic":"method"}],"handleClickPropagation":[{"__symbolic":"method"}],"handleSubmit":[{"__symbolic":"method"}],"setCookieFeedbackSubmitted":[{"__symbolic":"method"}],"handleSubmitAgain":[{"__symbolic":"method"}],"handleDismiss":[{"__symbolic":"method"}]}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"}]}],"postToGeneralBantuan":[{"__symbolic":"method"}]}}},"origins":{"TNKLoanSliderModule":"./src/app/components/loan-slider/loan-slider.module","TNKLoanSliderComponent":"./src/app/components/loan-slider/loan-slider.component","TNKAuthCustomerModule":"./src/app/components/auth-customer/auth-customer.module","TNKAuthCustomerComponent":"./src/app/components/auth-customer/auth-customer.component","TNKSurveyModule":"./src/app/components/survey/survey.module","TNKSurveyComponent":"./src/app/components/survey/survey.component","TNKDigitalContractComponent":"./src/app/components/digital-contract/digital-contract.component","TNKDigitalContractModule":"./src/app/components/digital-contract/digital-contract.module","TNKAuthLoanSliderModule":"./src/app/components/auth-loan-slider/auth-loan-slider.module","TNKAuthLoanSliderComponent":"./src/app/components/auth-loan-slider/auth-loan-slider.component","TNKAuthLoanFormModule":"./src/app/forms/auth-loan-form/auth-loan-form.module","TNKAuthLoanFormComponent":"./src/app/forms/auth-loan-form/auth-loan-form.component","TNKAuthLoanFormService":"./src/app/forms/auth-loan-form/auth-loan-form.service","TNKDateDropdownModule":"./src/app/components/date-dropdown/date-dropdown.module","TNKDateDropdownComponent":"./src/app/components/date-dropdown/date-dropdown.component","TNKUtilitiesModule":"./src/app/utils/utilities.module","NumericalValidator":"./src/app/validator/numerical/numerical.validator","RequiredSelectValidator":"./src/app/validator/required-select/required-select.validator","AlphaNumericalValidator":"./src/app/validator/alphanumeric/alpha-numeric.validator","B2BTNKLoanSliderModule":"./src/app/components/b2b-loan-slider/b2b-loan-slider.module","B2BTNKLoanFormModule":"./src/app/forms/b2b-loan-form/b2b-loan-form.module","B2BTNKLoanFormService":"./src/app/forms/b2b-loan-form/b2b-loan-form.service","B2BTNKLoanFormComponent":"./src/app/forms/b2b-loan-form/b2b-loan-form.component","B2BTNKLoanSliderComponent":"./src/app/components/b2b-loan-slider/b2b-loan-slider.component","ConfirmationFormComponent":"./src/app/forms/confirmation-form/confirmation-form.component","TNKConfirmationFormModule":"./src/app/forms/confirmation-form/confirmation-form.module","FeedbackJourneyModule":"./src/app/components/feedback-journey/feedback-journey.module","ɵa":"./src/app/utils/currency/currency.pipe","ɵb":"./src/app/utils/limit-array/limit-array.pipe","ɵc":"./src/app/utils/offset-array/offset-array.pipe","ɵd":"./src/app/services/analytics.service","ɵe":"./src/app/services/cookie.service","ɵf":"./src/app/services/platform.services","ɵg":"./src/app/services/api-request.service","ɵh":"./src/app/utils/api-constant/api-constant.service","ɵi":"./src/app/services/storage.service","ɵj":"./src/app/components/auth-customer/auth-customer.service","ɵk":"./src/app/utils/transform-object-form/transform-object-form.module","ɵl":"./src/app/utils/transform-object-form/transform-object-form.service","ɵm":"./src/app/components/tnk-modal/modal.module","ɵn":"./src/app/components/tnk-modal/modal.component","ɵo":"./src/app/components/tnk-modal/modal.component","ɵp":"./src/app/components/tnk-modal/modal.component","ɵq":"./src/app/components/tnk-modal/modal.component","ɵr":"./src/app/services/authToken.service","ɵs":"./src/app/forms/confirmation-form/confirmation-form.service","ɵt":"./src/app/forms/confirmation-form/confirmation-work-place/confirmation-work-place.service","ɵu":"./src/app/forms/confirmation-form/shared/services/confirmation.const","ɵv":"./src/app/services/region.service","ɵw":"./src/app/forms/confirmation-form/confirmation-index/confirmation-index.service","ɵx":"./src/app/forms/confirmation-form/confirmation-index/confirmation-index.component","ɵy":"./src/app/forms/confirmation-form/confirmation-bank-account/confirmation-bank-account.component","ɵz":"./src/app/forms/confirmation-form/confirmation-pin-picture/confirmation-pin-picture.component","ɵba":"./src/app/forms/confirmation-form/confirmation-pin-picture/confirmation-pin-picture.service","ɵbb":"./src/app/forms/confirmation-form/shared/services/confirmation-global.service","ɵbc":"./src/app/forms/confirmation-form/confirmation-selfie-picture/confirmation-selfie-picture.component","ɵbd":"./src/app/forms/confirmation-form/confirmation-selfie-picture/confirmation-selfie-picture.service","ɵbe":"./src/app/forms/confirmation-form/confirmation-work-place/confirmation-work-place.component","ɵbf":"./src/app/forms/confirmation-form/confirmation-confirmed/confirmation-confirmed.component","ɵbg":"./src/app/components/feedback-journey/feedback-journey.component","ɵbh":"./src/app/utils/api/api.service"},"importAs":"tnkmodule"}