1  /* =========================================================================
   2     General
   3     ========================================================================= */
   4  [data-braintree-id="wrapper"] {
   5      display: block !important;
   6      position: relative;
   7  }
   8  [data-braintree-id="svgs"] {
   9      display: none !important;
  10  }
  11  .braintree-dropin__disabled {
  12      position: absolute;
  13      top: 0;
  14      bottom: 0;
  15      left: 0;
  16      right: 0;
  17      cursor: not-allowed;
  18      z-index: 99999;
  19  }
  20  .braintree-dropin__disabled.braintree-hidden {
  21      display: none;
  22  }
  23  .braintree-dropin * {
  24      box-sizing: border-box;
  25  }
  26  .braintree-dropin {
  27      font-family: var(--pico-font-family);
  28      line-height: var(--pico-line-height);
  29      margin: 0;
  30      min-width: 200px;
  31      padding: 0;
  32  }
  33  .braintree-dropin .braintree-hidden {
  34      height: 0;
  35      margin: 0;
  36      opacity: 0;
  37      overflow: hidden;
  38      visibility: hidden;
  39  }
  40  /* =========================================================================
  41     Loaders
  42     ========================================================================= */
  43  .braintree-loader__container {
  44      height: 140px;
  45      opacity: 1;
  46      position: absolute;
  47      width: 100%;
  48      z-index: 2;
  49  }
  50  .braintree-loading .braintree-heading,
  51  .braintree-loading .braintree-toggle {
  52      visibility: hidden !important;
  53  }
  54  .braintree-loaded .braintree-loader__container {
  55      z-index: -2;
  56  }
  57  .braintree-loaded .braintree-loader__indicator {
  58      transform: translateY(-30%) scale(0);
  59  }
  60  .braintree-loader__indicator {
  61      border: solid 2px #bfbfbf;
  62      border-radius: 50%;
  63      height: 72px;
  64      margin: 0 auto;
  65      margin-top: -36px;
  66      position: relative;
  67      top: 50%;
  68      transition: transform 300ms cubic-bezier(0.43, 0.48, 0.62, 1.07);
  69      width: 72px;
  70  }
  71  .braintree-loader__indicator:before {
  72      animation: rotate 512ms infinite cubic-bezier(0.645, 0.045, 0.355, 1);
  73      border: solid 2px transparent;
  74      border-radius: 50%;
  75      border-top-color: #666666;
  76      box-sizing: content-box;
  77      content: "";
  78      display: block;
  79      height: 100%;
  80      margin-left: -2px;
  81      margin-top: -2px;
  82      width: 100%;
  83  }
  84  .braintree-loader__lock {
  85      fill: #666666;
  86      left: 50%;
  87      margin-left: -7px;
  88      margin-top: -9px;
  89      position: absolute;
  90      top: 50%;
  91  }
  92  @keyframes rotate {
  93      from {
  94          transform: rotate(0deg);
  95      }
  96      to {
  97          transform: rotate(360deg);
  98      }
  99  }
 100  .braintree-sheet--loading .braintree-sheet__content {
 101      opacity: 0.3;
 102  }
 103  .braintree-sheet--loading .braintree-sheet__header::after {
 104      animation:
 105          loader-scale 1s infinite,
 106          loader-origin 1s steps(1) infinite;
 107      background: var(--pico-primary);
 108      bottom: -2px;
 109      content: "";
 110      height: 2px;
 111      left: -1px;
 112      position: absolute;
 113      width: 100%;
 114  }
 115  @keyframes loader-scale {
 116      0% {
 117          transform: scaleX(0);
 118      }
 119      50% {
 120          transform: scaleX(1);
 121      }
 122      100% {
 123          transform: scaleX(0);
 124      }
 125  }
 126  @keyframes loader-origin {
 127      0% {
 128          transform-origin: 0 0;
 129      }
 130      50% {
 131          transform-origin: 100% 0;
 132      }
 133      100% {
 134          transform-origin: 0 0;
 135      }
 136  }
 137  /* =========================================================================
 138     Headings
 139     ========================================================================= */
 140  .braintree-placeholder,
 141  .braintree-heading {
 142      color: var(--pico-color);
 143      font-size: var(--pico-font-size);
 144      font-weight: var(--pico-font-weight);
 145      margin-bottom: 10px;
 146  }
 147  .braintree-placeholder {
 148      margin-bottom: 13px;
 149  }
 150  .braintree-icon--bordered {
 151      background: #ffffff;
 152      border: 1px solid #bbbbbb;
 153      border-radius: 3px;
 154      box-sizing: content-box;
 155  }
 156  /* =========================================================================
 157     Upper Container
 158     ========================================================================= */
 159  .braintree-upper-container {
 160      border-radius: 4px;
 161      min-height: 140px;
 162      opacity: 1;
 163      position: relative;
 164      transition: min-height 600ms;
 165      width: 100%;
 166      z-index: 2;
 167  }
 168  .braintree-upper-container:before {
 169      background-color: var(--pico-background-color);
 170      border: 1px solid var(--pico-form-element-border-color);
 171      border-radius: 4px;
 172      bottom: 5px;
 173      content: "";
 174      display: block;
 175      position: absolute;
 176      top: 0;
 177      width: 100%;
 178      z-index: -3;
 179  }
 180  .braintree-loaded .braintree-upper-container {
 181      min-height: inherit;
 182  }
 183  .braintree-loaded .braintree-upper-container:before {
 184      border: 0px;
 185  }
 186  /* =========================================================================
 187     Payment Options
 188     ========================================================================= */
 189  .braintree-options {
 190      margin: 0 auto;
 191      height: 0;
 192      overflow: hidden;
 193      visibility: hidden;
 194  }
 195  .braintree-options-initial {
 196      max-height: 0;
 197      opacity: 0;
 198  }
 199  .braintree-options-list {
 200      margin: 0 auto;
 201      padding-bottom: 5px;
 202      width: 100%;
 203  }
 204  .braintree-option {
 205      align-items: center;
 206      background-color: #fafafa;
 207      border-color: #b5b5b5;
 208      border-style: solid;
 209      border-width: 0 1px 1px 1px;
 210      cursor: pointer;
 211      display: flex;
 212      padding: 12px 10px;
 213  }
 214  .braintree-option:hover {
 215      background: white;
 216  }
 217  .braintree-option:hover .braintree-option__label {
 218      font-weight: 500;
 219  }
 220  .braintree-option.braintree-disabled {
 221      background: #eaeaea;
 222      cursor: not-allowed;
 223  }
 224  .braintree-option.braintree-disabled:hover .braintree-option__label {
 225      font-weight: normal;
 226  }
 227  .braintree-option.braintree-disabled .braintree-option__label {
 228      color: #787878;
 229  }
 230  .braintree-option.braintree-disabled .braintree-option__disabled-message {
 231      float: right;
 232      font-size: 14px;
 233  }
 234  .braintree-option.braintree-disabled .braintree-option__disabled-message span {
 235      border-bottom: 1px solid #b5b5b5;
 236  }
 237  .braintree-option:first-child {
 238      border-radius: 4px 4px 0 0;
 239      border-top-width: 1px;
 240  }
 241  .braintree-option:last-child {
 242      border-radius: 0 0 4px 4px;
 243  }
 244  .braintree-option .braintree-option__logo {
 245      display: flex;
 246      text-align: center;
 247      align-items: center;
 248  }
 249  .braintree-option .braintree-option__label {
 250      color: #000000;
 251      font-size: 16px;
 252      margin-left: 20px;
 253      width: 100%;
 254  }
 255  /* =========================================================================
 256     Apple Pay buttons
 257     ========================================================================= */
 258  @supports (-webkit-appearance: -apple-pay-button) {
 259      .apple-pay-button {
 260          display: inline-block;
 261          -webkit-appearance: -apple-pay-button;
 262          cursor: pointer;
 263      }
 264  }
 265  @supports not (-webkit-appearance: -apple-pay-button) {
 266      .apple-pay-button {
 267          display: inline-block;
 268          background-size: 100% 60%;
 269          background-repeat: no-repeat;
 270          background-position: 50% 50%;
 271          border-radius: 5px;
 272          padding: 0px;
 273          box-sizing: border-box;
 274          min-width: 200px;
 275          min-height: 32px;
 276          max-height: 64px;
 277          cursor: pointer;
 278      }
 279      .apple-pay-button-black {
 280          background-image: -webkit-named-image(apple-pay-logo-white);
 281          background-color: black;
 282      }
 283      .apple-pay-button-white {
 284          background-image: -webkit-named-image(apple-pay-logo-black);
 285          background-color: white;
 286      }
 287      .apple-pay-button-white-with-line {
 288          background-image: -webkit-named-image(apple-pay-logo-black);
 289          background-color: white;
 290          border: 0.5px solid black;
 291      }
 292  }
 293  /* =========================================================================
 294     Sheets
 295     ========================================================================= */
 296  .braintree-sheet {
 297      background-color: var(--pico-range-thumb-border-color);
 298      border: 1px solid var(--pico-form-element-border-color);
 299      border-radius: 4px;
 300      display: none;
 301      margin: 0 auto;
 302      max-height: 600px;
 303      max-height: fit-content;
 304      transition:
 305          transform 300ms,
 306          opacity 300ms,
 307          max-height 300ms ease;
 308      width: 100%;
 309  }
 310  .braintree-sheet--tokenized {
 311      max-height: 71px;
 312      opacity: 0.1;
 313      overflow: hidden;
 314      transform: translateY(20px);
 315  }
 316  .braintree-sheet--tokenized .braintree-sheet__header {
 317      opacity: 0.1;
 318  }
 319  .braintree-sheet--tokenized .braintree-sheet__content {
 320      opacity: 0.1;
 321  }
 322  .braintree-sheet--has-error .braintree-sheet {
 323      border: 2px solid var(--pico-form-element-invalid-border-color);
 324      border-radius: 4px 4px 0 0;
 325  }
 326  .braintree-sheet--has-error .braintree-methods--edit .braintree-method {
 327      border-left: 2px solid var(--pico-form-element-invalid-border-color);
 328      border-right: 2px solid var(--pico-form-element-invalid-border-color);
 329  }
 330  .braintree-sheet--has-error
 331      .braintree-methods--edit
 332      .braintree-method:first-child {
 333      border-top: 2px solid var(--pico-form-element-invalid-border-color);
 334  }
 335  .braintree-sheet--has-error
 336      .braintree-methods--edit
 337      .braintree-method:last-child {
 338      border-bottom: 2px solid var(--pico-form-element-invalid-border-color);
 339  }
 340  .braintree-sheet__container {
 341      display: none;
 342      margin: 0 auto 13px;
 343      max-height: 0;
 344      opacity: 0;
 345  }
 346  .braintree-sheet__error {
 347      display: none;
 348      margin: 0 auto;
 349      width: 100%;
 350  }
 351  .braintree-sheet--has-error .braintree-sheet__error {
 352      color: var(--pico-form-element-invalid-active-border-color);
 353      align-items: center;
 354      justify-content: center;
 355      display: flex;
 356      padding: 6px;
 357      position: relative;
 358      margin-top: 4px;
 359  }
 360  .braintree-sheet--has-error
 361      .braintree-sheet__error
 362      .braintree-sheet__error-icon {
 363      height: 24px;
 364      margin-top: -12px;
 365      margin-right: 4px;
 366      position: relative;
 367      top: 4px;
 368      width: 24px;
 369  }
 370  .braintree-sheet--has-error
 371      .braintree-sheet__error
 372      .braintree-sheet__error-icon
 373      use {
 374      fill: var(--pico-form-element-invalid-active-border-color);
 375  }
 376  .braintree-sheet--has-error
 377      .braintree-sheet__error
 378      .braintree-sheet__error-text {
 379      color: var(--pico-form-element-invalid-active-border-color);
 380      font-size: 14px;
 381      text-align: center;
 382  }
 383  .braintree-show-methods
 384      .braintree-sheet--active.braintree-sheet--has-error
 385      .braintree-sheet {
 386      border-color: var(--pico-form-element-invalid-active-border-color);
 387      border-radius: 5px 5px 0 0;
 388  }
 389  .braintree-show-methods .braintree-sheet--active .braintree-sheet {
 390      border-radius: 5px;
 391      border-color: var(--pico-form-element-border-color);
 392      border-width: 2px;
 393  }
 394  .braintree-sheet__header {
 395      align-items: center;
 396      border-bottom: 1px solid var(--pico-form-element-border-color);
 397      display: flex;
 398      flex-wrap: wrap;
 399      padding: 12px 15px 0 12px;
 400      position: relative;
 401  }
 402  .braintree-sheet__header .braintree-sheet__header-label {
 403      align-items: center;
 404      display: flex;
 405      flex-grow: 1;
 406      padding-bottom: 12px;
 407  }
 408  .braintree-sheet__header .braintree-sheet__label {
 409      font-size: 16px;
 410  }
 411  .braintree-sheet__header .braintree-sheet__logo--header {
 412      align-items: center;
 413      display: flex;
 414      text-align: center;
 415      width: 50px;
 416  }
 417  .braintree-sheet__header .braintree-sheet__card-icon {
 418      display: inline-block;
 419      padding-left: 5px;
 420  }
 421  .braintree-sheet__header .braintree-sheet__card-icon.braintree-hidden {
 422      display: none;
 423  }
 424  .braintree-sheet__header .braintree-sheet__text {
 425      color: var(--pico-form-element-color);
 426      font-size: 16px;
 427      margin-left: 20px;
 428  }
 429  .braintree-sheet__header .braintree-sheet__icons {
 430      padding-bottom: 10px;
 431  }
 432  .braintree-sheet__content--button {
 433      min-height: 84px;
 434      padding: 20px;
 435      text-align: center;
 436  }
 437  .braintree-sheet__content--button .braintree-sheet__button--paypal {
 438      margin: 0 auto;
 439  }
 440  .braintree-sheet__content--button .braintree-sheet__button--paypal iframe {
 441      display: inline-block !important;
 442  }
 443  .braintree-sheet__content--button .braintree-sheet__button--venmo {
 444      max-width: 100%;
 445  }
 446  .braintree-sheet__content--button .braintree-sheet__button--venmo use {
 447      cursor: pointer;
 448  }
 449  .braintree-sheet__content--button .braintree-sheet__button--apple-pay {
 450      margin: 0 auto;
 451  }
 452  .braintree-sheet__content--button .braintree-sheet__button--apple-pay iframe {
 453      display: inline-block !important;
 454  }
 455  .braintree-form__field-group--has-error .braintree-form__icon-container {
 456      margin-top: -12px;
 457  }
 458  /* =========================================================================
 459     Input Forms
 460     ========================================================================= */
 461  .braintree-form__hosted-field {
 462      transition: border-color 100ms;
 463      background-color: white;
 464  }
 465  .braintree-form__hosted-field iframe {
 466      margin: auto;
 467  }
 468  .braintree-sheet__content--form {
 469      padding: 10px 15px 10px 10px;
 470  }
 471  .braintree-sheet__content--form .braintree-form__notice-of-collection {
 472      font-size: 12px;
 473      margin: auto;
 474      text-align: center;
 475      flex-basis: 100%;
 476  }
 477  .braintree-sheet__content--form .braintree-form__field-group {
 478      margin-bottom: 10px;
 479      padding-left: 5px;
 480  }
 481  .braintree-sheet__content--form
 482      .braintree-form__field-group.braintree-form__field-group--has-error {
 483      margin-bottom: 3px;
 484  }
 485  .braintree-sheet__content--form
 486      .braintree-form__field-group.braintree-form__field-group--has-error
 487      .braintree-form__field
 488      .braintree-form__hosted-field {
 489      border-color: var(--pico-form-element-invalid-active-border-color);
 490  }
 491  .braintree-sheet__content--form
 492      .braintree-form__field-group.braintree-form__field-group--has-error
 493      .braintree-form__field
 494      .braintree-form__hosted-field:hover {
 495      border-color: var(--pico-form-element-invalid-active-border-color);
 496  }
 497  .braintree-sheet__content--form
 498      .braintree-form__field-group
 499      .braintree-form__label {
 500      color: var(--pico-form-element-color);
 501      display: block;
 502      font-size: 14px;
 503      font-weight: normal;
 504      line-height: 1.4;
 505      margin: 0;
 506      padding: 0;
 507      text-align: left;
 508  }
 509  .braintree-sheet__content--form
 510      .braintree-form__field-group
 511      .braintree-form__descriptor {
 512      color: var(--pico-form-element-placeholder-color);
 513      font-size: 13px;
 514      margin-left: 6px;
 515  }
 516  .braintree-sheet__content--form
 517      .braintree-form__field-group
 518      .braintree-form__field {
 519      position: relative;
 520  }
 521  .braintree-sheet__content--form
 522      .braintree-form__field-group
 523      .braintree-form__field
 524      label {
 525      cursor: text;
 526      display: block;
 527      margin: 0;
 528  }
 529  .braintree-sheet__content--form
 530      .braintree-form__field-group
 531      .braintree-form__field
 532      .braintree-form__icon-container {
 533      margin-top: -14px;
 534      position: absolute;
 535      right: 11px;
 536      top: 50%;
 537  }
 538  .braintree-sheet__content--form
 539      .braintree-form__field-group
 540      .braintree-form__field
 541      .braintree-form__hosted-field {
 542      border: 1px solid #bfbfbf;
 543      height: 44px;
 544      margin: 4px 0 0;
 545      padding: 0 8px;
 546  }
 547  .braintree-sheet__content--form
 548      .braintree-form__field-group
 549      .braintree-form__field
 550      .braintree-form__hosted-field:hover {
 551      border-color: var(--pico-form-element-border-color);
 552  }
 553  .braintree-sheet__content--form
 554      .braintree-form__field-group
 555      .braintree-form__field
 556      .braintree-form__hosted-field.braintree-form__field--valid {
 557      border-color: var(--pico-form-element-valid-border-color);
 558  }
 559  .braintree-sheet__content--form
 560      .braintree-form__field-group
 561      .braintree-form__field
 562      .braintree-form__hosted-field
 563      input.braintree-form__raw-input {
 564      border: none;
 565      background-image: none;
 566      background-color: transparent;
 567      -webkit-box-shadow: none;
 568      -moz-box-shadow: none;
 569      box-shadow: none;
 570      width: 100%;
 571      height: 100%;
 572      font-size: 16px;
 573      font-family: var(--pico-font-family);
 574      color: var(--pico-color);
 575  }
 576  .braintree-sheet__content--form
 577      .braintree-form__field-group
 578      .braintree-form__field
 579      .braintree-form__hosted-field
 580      input.braintree-form__raw-input:focus {
 581      outline: none;
 582  }
 583  .braintree-sheet__content--form
 584      .braintree-form__field-group
 585      .braintree-form__field.braintree-form__checkbox {
 586      float: left;
 587  }
 588  .braintree-sheet__content--form
 589      .braintree-form__field-group
 590      .braintree-form__field.braintree-form__checkbox
 591      input {
 592      margin: -5px 5px 0 0;
 593      padding: 0;
 594      line-height: 0;
 595      box-sizing: border-box;
 596  }
 597  .braintree-sheet__content--form
 598      .braintree-form__field-group.braintree-form__field-group--has-error
 599      .braintree-form__field-secondary-icon,
 600  .braintree-sheet__content--form
 601      .braintree-form__field-group.braintree-form__field-group--has-error.braintree-form__field-group--card-type-known
 602      .braintree-form__field-secondary-icon,
 603  .braintree-sheet__content--form
 604      .braintree-form__field-group.braintree-form__field-group--has-error.braintree-form__field-group--is-focused
 605      .braintree-form__field-secondary-icon,
 606  .braintree-sheet__content--form
 607      .braintree-form__field-group
 608      .braintree-form__field-error-icon,
 609  .braintree-sheet__content--form
 610      .braintree-form__field-group
 611      .braintree-form__field-secondary-icon {
 612      display: none;
 613      transform: scale(0);
 614  }
 615  .braintree-sheet__content--form
 616      .braintree-form__field-group.braintree-form__field-group--card-type-known
 617      .braintree-form__field-secondary-icon,
 618  .braintree-sheet__content--form
 619      .braintree-form__field-group.braintree-form__field-group--has-error
 620      .braintree-form__field-error-icon,
 621  .braintree-sheet__content--form
 622      .braintree-form__field-group.braintree-form__field-group--is-focused
 623      .braintree-form__field-secondary-icon {
 624      display: block;
 625      transform: scale(1);
 626  }
 627  .braintree-sheet__content--form
 628      .braintree-form__field-group
 629      .braintree-form__field-error {
 630      color: var(--pico-form-element-invalid-active-border-color);
 631      display: none;
 632      font-size: 13px;
 633      line-height: 1.4;
 634      margin: 3px 0;
 635      padding: 0;
 636  }
 637  .braintree-sheet__content--form
 638      .braintree-form__field-group
 639      .braintree-form__field-error-icon {
 640      margin-top: 2px;
 641  }
 642  .braintree-sheet__content--form
 643      .braintree-form__field-group
 644      .braintree-form__field-error-icon
 645      use {
 646      fill: var(--pico-form-element-invalid-active-border-color);
 647  }
 648  .braintree-sheet__content--form
 649      .braintree-form__field-group.braintree-form__field-group--has-error
 650      .braintree-form__field-error {
 651      display: block;
 652  }
 653  .braintree-sheet__content--form .braintree-form__flexible-fields {
 654      display: flex;
 655      flex-wrap: wrap;
 656      justify-content: space-between;
 657  }
 658  .braintree-sheet__content--form
 659      .braintree-form__flexible-fields
 660      .braintree-form__field-group {
 661      flex-basis: 190px;
 662      flex-grow: 1;
 663  }
 664  /* =========================================================================
 665     Payment Methods
 666     ========================================================================= */
 667  .braintree-method {
 668      align-items: center;
 669      background-color: var(--pico-range-thumb-border-color);
 670      cursor: pointer;
 671      display: flex;
 672      justify-content: space-between;
 673      margin: 0 auto;
 674      padding: 14px 10px;
 675      position: relative;
 676      transition:
 677          opacity 300ms,
 678          width 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
 679          border-color 300ms,
 680          border-radius 300ms;
 681      width: 98%;
 682      z-index: 0;
 683  }
 684  .braintree-method:hover .braintree-method__label {
 685      font-weight: 500;
 686  }
 687  .braintree-method:first-child {
 688      border-radius: 4px 4px 0 0;
 689      border-top-width: 1px;
 690  }
 691  .braintree-method:last-child {
 692      border-radius: 0 0 4px 4px;
 693  }
 694  
 695  .braintree-method:only-child {
 696      border-radius: 4px;
 697  }
 698  
 699  .braintree-method .braintree-method__logo {
 700      align-items: center;
 701  
 702      display: flex;
 703  
 704      justify-content: center;
 705  }
 706  
 707  .braintree-method .braintree-method__label {
 708      color: var(--pico-form-element-color);
 709      flex-grow: 1;
 710      font-size: 16px;
 711      margin-left: 20px;
 712      text-align: left;
 713      text-overflow: ellipsis;
 714      overflow: hidden;
 715  }
 716  
 717  .braintree-method .braintree-method__label .braintree-method__label--small {
 718      font-size: 13px;
 719  
 720      font-weight: normal;
 721  }
 722  
 723  .braintree-method .braintree-method__icon {
 724      background-color: var(--pico-range-thumb-border-color);
 725      border-radius: 100px;
 726      fill: var(--pico-range-thumb-border-color);
 727      height: 41px;
 728      width: 41px;
 729      padding: 10px;
 730      transform: scale(0);
 731      transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
 732  }
 733  
 734  .braintree-method .braintree-method__icon svg {
 735      width: 100%;
 736  }
 737  
 738  .braintree-methods--edit .braintree-method {
 739      cursor: auto;
 740  }
 741  
 742  .braintree-methods--active:not(.braintree-methods--edit)
 743      .braintree-method--active {
 744      border-radius: 5px;
 745      opacity: 1;
 746      width: 100%;
 747      z-index: 1;
 748      border-color: var(--pico-form-element-valid-border-color);
 749      border-width: 2px;
 750      margin-top: -1px;
 751      margin-bottom: -1px;
 752  }
 753  
 754  .braintree-methods--active:not(.braintree-methods--edit)
 755      .braintree-method--active:first-of-type {
 756      margin-top: 0;
 757  }
 758  
 759  .braintree-methods--active:not(.braintree-methods--edit)
 760      .braintree-method--active:last-of-type {
 761      margin-bottom: 0;
 762  }
 763  
 764  .braintree-methods--active:not(.braintree-methods--edit)
 765      .braintree-method--active
 766      .braintree-method__check {
 767      background-color: var(--pico-form-element-valid-border-color);
 768  }
 769  
 770  .braintree-methods--active:not(.braintree-methods--edit)
 771      .braintree-method--active
 772      .braintree-method__icon {
 773      fill: var(--pico-range-thumb-border-color);
 774  
 775      transform: scale(1);
 776  }
 777  
 778  .braintree-methods--active:not(.braintree-methods--edit)
 779      .braintree-method--active
 780      .braintree-method__label {
 781      font-weight: bold;
 782  }
 783  
 784  .braintree-method__delete-container {
 785      display: none;
 786  }
 787  
 788  .braintree-method__delete-container .braintree-method__delete {
 789      margin-right: 19px;
 790      height: 30px;
 791      width: 30px;
 792      padding: 7px;
 793      background-color: #ec493a;
 794      cursor: pointer;
 795  }
 796  
 797  .braintree-method__delete-container .braintree-method__delete:hover {
 798      background-color: #c62213;
 799      transform: scale(1.1);
 800  }
 801  
 802  .braintree-method__delete-container .braintree-method__delete svg {
 803      margin-top: -5px;
 804  
 805      margin-left: 1px;
 806  }
 807  
 808  .braintree-methods--edit .braintree-method__delete-container {
 809      display: block;
 810  }
 811  
 812  .braintree-methods--edit
 813      .braintree-method__delete-container
 814      .braintree-method__delete {
 815      transform: scale(1);
 816  }
 817  
 818  .braintree-methods {
 819      display: none;
 820  
 821      margin: 0 auto 6px auto;
 822  }
 823  
 824  .braintree-delete-confirmation {
 825      display: none;
 826      overflow: hidden;
 827      background: #fafafa !important;
 828      color: #606060;
 829      font-size: 1.125em;
 830  }
 831  
 832  .braintree-delete-confirmation
 833      [data-braintree-id="delete-confirmation__message"] {
 834      padding: 2.5em;
 835  
 836      text-align: center;
 837  }
 838  
 839  .braintree-delete-confirmation
 840      .braintree-delete-confirmation__button-container {
 841      display: flex;
 842      text-align: center;
 843  }
 844  
 845  .braintree-delete-confirmation
 846      .braintree-delete-confirmation__button-container
 847      .braintree-delete-confirmation__button {
 848      border: none;
 849      border-top: 1px solid #b5b5b5;
 850      font-size: 1em;
 851      background: #fafafa;
 852      color: #c4c4c4;
 853      cursor: pointer;
 854      flex-grow: 2;
 855      padding: 0.75em;
 856  }
 857  
 858  .braintree-delete-confirmation
 859      .braintree-delete-confirmation__button-container
 860      [data-braintree-id="delete-confirmation__yes"] {
 861      color: white;
 862      background: #ec493a;
 863      border-left: solid 1px #b5b5b5;
 864  }
 865  
 866  .braintree-delete-confirmation
 867      .braintree-delete-confirmation__button-container
 868      [data-braintree-id="delete-confirmation__yes"]:hover {
 869      background: #c62213;
 870  }
 871  
 872  .braintree-delete-confirmation
 873      .braintree-delete-confirmation__button-container
 874      [data-braintree-id="delete-confirmation__no"] {
 875      color: #666666;
 876  
 877      border-bottom-left-radius: 0.25em;
 878  }
 879  
 880  .braintree-delete-confirmation
 881      .braintree-delete-confirmation__button-container
 882      [data-braintree-id="delete-confirmation__no"]:hover {
 883      background: #efefef;
 884  }
 885  
 886  .braintree-methods-initial {
 887      display: none;
 888      max-height: 0;
 889      opacity: 0;
 890  }
 891  
 892  .braintree-large-button {
 893      background: var(--pico-background);
 894      border: 0;
 895      border-radius: 4px;
 896      color: var(--pico-color);
 897      cursor: pointer;
 898      font-size: 14px;
 899      margin: 0 auto;
 900      padding: 18px;
 901      text-align: center;
 902      width: 100%;
 903  }
 904  
 905  .braintree-large-button:hover {
 906      font-weight: 120%;
 907  }
 908  
 909  .braintree-large-button:hover span {
 910      --pico-background-color: var(--pico-primary-hover-background);
 911      --pico-border-color: var(--pico-primary-hover-border);
 912      --pico-box-shadow: var(
 913          --pico-button-hover-box-shadow,
 914          0 0 0 rgba(0, 0, 0, 0)
 915      );
 916      --pico-color: var(--pico-primary-inverse);
 917  }
 918  
 919  .braintree-large-button span {
 920      --pico-background-color: var(--pico-primary-background);
 921      --pico-border-color: var(--pico-primary-border);
 922      --pico-color: var(--pico-primary-inverse);
 923      --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
 924      padding: var(--pico-form-element-spacing-vertical)
 925          var(--pico-form-element-spacing-horizontal);
 926      border: var(--pico-border-width) solid var(--pico-border-color);
 927      border-radius: var(--pico-border-radius);
 928      outline: 0;
 929      background-color: var(--pico-background-color);
 930      box-shadow: var(--pico-box-shadow);
 931      color: var(--pico-color);
 932      font-weight: var(--pico-font-weight);
 933      font-size: 1rem;
 934      line-height: var(--pico-line-height);
 935      text-align: center;
 936      text-decoration: none;
 937      cursor: pointer;
 938      -webkit-user-select: none;
 939      -moz-user-select: none;
 940      user-select: none;
 941      transition:
 942          background-color var(--pico-transition),
 943          border-color var(--pico-transition),
 944          color var(--pico-transition),
 945          box-shadow var(--pico-transition);
 946  }
 947  
 948  .braintree-large-button.braintree-hidden {
 949      display: none;
 950  }
 951  
 952  /* =========================================================================
 953     Dropin Visibility States
 954     ========================================================================= */
 955  
 956  .braintree-show-card .braintree-card,
 957  .braintree-show-methods .braintree-methods,
 958  .braintree-show-delete-confirmation .braintree-delete-confirmation,
 959  .braintree-show-options .braintree-options,
 960  .braintree-show-paypal .braintree-paypal,
 961  .braintree-show-paypalCredit .braintree-paypalCredit,
 962  .braintree-show-applePay .braintree-applePay,
 963  .braintree-show-googlePay .braintree-googlePay,
 964  .braintree-show-venmo .braintree-venmo {
 965      display: block;
 966      height: auto;
 967      overflow: visible;
 968      visibility: visible;
 969  }
 970  
 971  [data-braintree-id="methods-label"],
 972  [data-braintree-id="methods-edit"],
 973  [data-braintree-id="choose-a-way-to-pay"] {
 974      position: absolute;
 975      transform: translateY(30px);
 976      transition: transform 200ms ease;
 977      visibility: hidden;
 978  }
 979  
 980  .braintree-show-methods [data-braintree-id="methods-label"],
 981  .braintree-show-methods [data-braintree-id="methods-edit"],
 982  .braintree-show-options [data-braintree-id="choose-a-way-to-pay"] {
 983      transform: none;
 984      visibility: visible;
 985  }
 986  
 987  .braintree-show-methods [data-braintree-id="methods-edit"] {
 988      right: 5px;
 989      text-decoration: underline;
 990      cursor: pointer;
 991  }
 992  
 993  .braintree-show-methods
 994      [data-braintree-id="methods-label"].braintree-no-payment-method-selected {
 995      transform: translateY(30px);
 996  }
 997  
 998  .braintree-show-methods.braintree-show-options
 999      [data-braintree-id="choose-a-way-to-pay"] {
1000      transform: translateY(30px);
1001      visibility: hidden;
1002  }
1003  
1004  /* =========================================================================
1005     Javascript hooks
1006     ========================================================================= */
1007  
1008  .braintree-loaded [data-braintree-id="methods"],
1009  .braintree-loaded [data-braintree-id="options"],
1010  .braintree-loaded [data-braintree-id="sheet-container"] {
1011      max-height: 2000px;
1012      max-height: fit-content;
1013      opacity: 1;
1014      transition:
1015          max-height 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
1016          opacity 300ms linear 100ms;
1017      min-height: 0;
1018  }
1019  
1020  .braintree-loaded .braintree-sheet__container {
1021      display: block;
1022  }
1023  
1024  .braintree-show-methods [data-braintree-id="other-ways-to-pay"],
1025  .braintree-show-options [data-braintree-id="other-ways-to-pay"] {
1026      display: none;
1027  }
1028  
1029  .braintree-show-card [data-braintree-id="other-ways-to-pay"],
1030  .braintree-show-methods [data-braintree-id="other-ways-to-pay"],
1031  .braintree-show-paypal [data-braintree-id="other-ways-to-pay"],
1032  .braintree-show-applePay [data-braintree-id="other-ways-to-pay"],
1033  .braintree-show-googlePay [data-braintree-id="other-ways-to-pay"],
1034  .braintree-show-venmo [data-braintree-id="other-ways-to-pay"] {
1035      display: block;
1036  }
1037  
1038  .braintree-loaded [data-braintree-id="methods"],
1039  .braintree-loaded [data-braintree-id="options"] {
1040      transition: none;
1041  }
1042  
1043  .braintree-options {
1044      display: none;
1045  }
1046  
1047  /* =========================================================================
1048     Flexbox-free styling
1049     ========================================================================= */
1050  
1051  [data-braintree-no-flexbox="true"] .braintree-option:after {
1052      content: "";
1053      display: table;
1054      clear: both;
1055  }
1056  
1057  [data-braintree-no-flexbox="true"] .braintree-option__label {
1058      float: left;
1059      width: auto;
1060  }
1061  
1062  [data-braintree-no-flexbox="true"] .braintree-option__logo {
1063      float: left;
1064  }
1065  
1066  [data-braintree-no-flexbox="true"] .braintree-sheet__header {
1067      display: table;
1068      width: 100%;
1069  }
1070  
1071  [data-braintree-no-flexbox="true"] .braintree-sheet__header:after {
1072      content: "";
1073      display: table;
1074      clear: both;
1075  }
1076  
1077  [data-braintree-no-flexbox="true"] .braintree-sheet__header-label {
1078      float: left;
1079  }
1080  
1081  [data-braintree-no-flexbox="true"] .braintree-sheet__header-label:after {
1082      content: "";
1083      display: table;
1084      clear: both;
1085  }
1086  
1087  [data-braintree-no-flexbox="true"] .braintree-sheet__logo--header {
1088      float: left;
1089  }
1090  
1091  [data-braintree-no-flexbox="true"] .braintree-sheet__text {
1092      float: left;
1093      width: auto;
1094  }
1095  
1096  [data-braintree-no-flexbox="true"] .braintree-sheet__icons {
1097      float: right;
1098  }
1099  
1100  [data-braintree-no-flexbox="true"] .braintree-method__label {
1101      float: left;
1102      width: auto;
1103  }
1104  
1105  [data-braintree-no-flexbox="true"] .braintree-method__logo {
1106      float: left;
1107  }
1108  
1109  [data-braintree-no-flexbox="true"] .braintree-method:after {
1110      content: "";
1111      display: table;
1112      clear: both;
1113  }
1114  
1115  [data-braintree-no-flexbox="true"] .braintree-method__icon-container {
1116      float: right;
1117      position: relative;
1118  }
1119  
1120  [data-braintree-no-flexbox="true"] .braintree-method__icon-container:before {
1121      right: 0;
1122  }
1123  
1124  [data-braintree-no-flexbox="true"] .braintree-method__icon {
1125      margin-right: 0;
1126      right: 0;
1127      position: absolute;
1128  }
1129  
1130  @media only screen and (max-height: 700px) {
1131      #Cardinal-Modal {
1132          top: 10px !important;
1133          bottom: 10px !important;
1134          left: 10px !important;
1135          right: 10px !important;
1136          transform: none !important;
1137          overflow: scroll !important;
1138          -webkit-overflow-scrolling: touch !important;
1139      }
1140      #Cardinal-Modal iframe {
1141          height: 100% !important;
1142          width: 100% !important;
1143      }
1144      #Cardinal-ModalContent {
1145          height: 100% !important;
1146      }
1147  }