@reflowhq/cart-react
Version:
This is a React 18+ component for rendering a Reflow shopping cart in your application.
2 lines (1 loc) • 22 kB
CSS
:root{--ref-white: var(--bs-white, var(--white, #fff));--ref-gray-100: var(--bs-gray-100, #f8f9fa);--ref-gray-300: var(--bs-gray-300, #dee2e6);--ref-gray-700: var(--bs-gray-700, #848e97);--ref-gray: var(--bs-gray-600, #868e96);--ref-darkgray: var(--bs-gray-800, #495057);--ref-black: var(--bs-black, var(--black, #000));--ref-primary: var(--bs-primary, var(--primary, #0d6efd));--ref-success: var(--bs-success, var(--success, #20c997));--ref-danger: var(--bs-danger, var(--danger, #ff0051));--ref-warning: var(--bs-warning, var(--warning, #f7e296));--ref-body-color: var(--bs-body-color, #212529);--ref-body-bg: var(--bs-body-bg, #fff);--ref-secondary-color: var(--bs-secondary-color, var(--ref-gray-700));--ref-secondary-bg: var(--bs-secondary-bg, var(--ref-gray-300));--ref-tertiary-color: var(--bs-tertiary-color, var(--ref-darkgray));--ref-tertiary-bg: var(--bs-tertiary-bg, var(--ref-gray-100));--ref-border-radius: .3rem;--ref-gutter-sm: .5em;--ref-gutter-md: 1em;--ref-gutter-lg: 2em;--ref-gutter: var(--ref-gutter-md);--ref-input-bg: var(--ref-body-bg);--ref-input-padding: .5rem;--ref-input-padding-sm: .5rem;--ref-btn-padding: .5rem 1.5rem;--ref-btn-border-radius: var(--ref-border-radius);--ref-message-bg: var(--ref-tertiary-bg);--ref-list-bg: var(--ref-tertiary-bg);--ref-dropdown-bg: var(--bs-body-bg, var(--ref-white))}.text-primary{--bs-text-opacity: 1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))}.ref-message{background-color:var(--ref-message-bg);padding:10px;text-align:center}.ref-heading{margin-bottom:50px;font-weight:700;font-size:1.5em}.ref-heading-small{margin-bottom:20px;font-weight:700;font-size:18px}.ref-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.ref-button{display:inline-block;text-decoration:none;padding:var(--ref-btn-padding);background-color:var(--ref-primary);color:var(--ref-white);border:1px solid var(--ref-primary);border-radius:var(--ref-btn-border-radius);line-height:1.5;font-size:1em;cursor:pointer;user-select:none}.ref-button:hover{opacity:.92;color:var(--ref-white)}.ref-button:active{position:relative;bottom:-1px}.ref-button.ref-button-success{background-color:var(--ref-success);border-color:var(--ref-success)}.ref-button.inactive{background-color:var(--ref-secondary-bg);border-color:var(--ref-secondary-bg);pointer-events:none}.ref-form-control{width:100%;padding:var(--ref-input-padding);border:1px solid var(--ref-gray-300);border-radius:var(--ref-border-radius);box-shadow:2px 2px #00000005;background:var(--ref-input-bg);font:inherit;color:inherit}.ref-form-checkbox-group span{display:inline-block;margin-right:8px;margin-bottom:0}.ref-form-checkbox-group input{font-size:1rem;display:inline-block;margin-bottom:3px;margin-left:0}.ref-validation-error{color:red;font-size:.85em;padding-top:4px}.ref-validation-error:empty{display:none}.ref-loading-backdrop{display:block;position:absolute;inset:0;background-color:#0003;transition:opacity .1s;pointer-events:none;z-index:9999;opacity:0}.ref-loading-backdrop.active{opacity:1}.reflow-auth-button{text-align:center}.reflow-auth-button .ref-auth-button-signed{display:flex;place-content:center}.reflow-auth-button .ref-profile-info{text-decoration:none;display:flex;place-items:center}.reflow-auth-button .ref-profile-info .ref-profile-name{color:var(--ref-body-color);font-weight:700}.reflow-auth-button .ref-profile-info .ref-profile-photo{width:2em;height:2em;border-radius:50%;margin-right:10px}.reflow-auth-button .ref-button.ref-sign-out{margin-left:20px}.reflow-auth-button .ref-register{cursor:pointer}.ref-summary{background:var(--ref-tertiary-bg);padding:var(--ref-gutter-lg)}.ref-summary-content{display:none}.ref-summary-content.open{display:block}.ref-summary-content .ref-heading{margin-bottom:40px}.ref-summary-content .ref-product{margin-bottom:var(--ref-gutter-md)}.ref-summary .ref-quantity-widget input,.ref-summary .ref-quantity-widget>div{padding:var(--ref-input-padding-sm)}.ref-product{display:flex}.ref-product .ref-product-photo{width:80px;height:80px;float:left;margin-right:20px;background-color:var(--ref-gray-300);background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:var(--ref-border-radius);object-fit:cover}.ref-product .ref-product-secondary{font-size:.75rem;color:var(--ref-gray)}.ref-product .ref-product-data{flex:1;display:flex;flex-direction:column;justify-content:center}.ref-product .ref-product-info{display:flex;justify-content:space-between}.ref-product-total{font-weight:700}.ref-product-total.out-of-stock{color:var(--ref-gray)}.reflow-shopping-cart{position:relative;min-height:400px;display:flex;flex-direction:column;justify-content:center}.reflow-shopping-cart *{box-sizing:border-box}.reflow-shopping-cart fieldset{min-width:0;padding:0;margin:0;border:0}.reflow-shopping-cart hr{margin:20px 0;height:1px;background-color:var(--ref-gray);border:0}.ref-cart{text-align:left}.ref-cart .ref-cart-table .ref-line-item{display:flex;flex-direction:column;width:100%;padding:var(--ref-gutter-md) 0;border-top:1px solid var(--ref-gray-300);overflow:hidden}.ref-cart .ref-cart-table .ref-product .ref-product-controls{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:.8em}.reflow-shopping-cart .ref-cart .ref-cart-table .ref-product .ref-product-controls .ref-product-remove{padding:.5em;margin-left:.6em}.ref-cart .ref-cart-table .ref-quantity-widget{margin-bottom:0}.ref-cart .ref-th{display:none;width:100%;font-size:.75rem;text-transform:uppercase;border-bottom:1px solid var(--ref-gray-300);padding:12px 0}.ref-cart .ref-product-col{display:flex;flex-direction:column}.ref-cart .ref-product-wrapper{display:flex;flex:1;align-items:flex-start;padding:var(--ref-gutter-md) 0}.ref-cart .ref-price-col,.ref-cart .ref-quantity-col,.ref-cart .ref-total-col{display:none}.ref-cart .ref-cart-table .ref-product-photo{background-color:var(--ref-gray-300);width:25%;height:90px;margin-right:1em;margin-top:5px}.ref-cart .ref-cart-table .ref-product-name{font-weight:700;word-break:break-word}.ref-cart .ref-cart-table .ref-product .ref-product-price{margin-left:var(--ref-gutter-lg)}.ref-cart .ref-cart-table .ref-product-data .ref-product-total{display:block}.ref-cart .ref-cart-table .ref-product-row{display:flex;flex:1;justify-content:space-between}@media (min-width: 576px){.ref-cart .ref-cart-table .ref-product-total{text-align:right}.ref-cart .ref-cart-table .ref-product-photo{height:120px}}@media (min-width: 768px){.ref-cart .ref-product-wrapper{align-items:center;padding:0}.ref-cart .ref-cart-table .ref-product-data{margin:var(--ref-gutter-md) 0}.ref-cart .ref-cart-table .ref-line-item{flex-direction:row;border:none;margin:var(--ref-gutter-md) 0;padding:0}.ref-cart .ref-th{display:table}.ref-cart .ref-product-col,.ref-cart .ref-price-col,.ref-cart .ref-quantity-col,.ref-cart .ref-total-col{display:table-cell}.ref-cart .ref-cart-table .ref-price-col,.ref-cart .ref-cart-table .ref-quantity-col,.ref-cart .ref-cart-table .ref-total-col{padding-top:var(--ref-gutter-md)}.ref-cart .ref-product-col{width:50%}.ref-cart .ref-price-col{width:15%;text-align:center}.ref-cart .ref-quantity-col{width:20%;text-align:center}.ref-cart .ref-total-col{width:15%;text-align:right}.ref-cart .ref-cart-table .ref-product .ref-product-price,.ref-cart .ref-cart-table .ref-product .ref-product-controls{display:none}.ref-cart .ref-cart-table .ref-product-price,.ref-cart .ref-cart-table .ref-product-total{padding-top:var(--ref-gutter-sm)}.ref-cart .ref-cart-table .ref-product-photo{width:100px;height:100px;border-radius:var(--ref-border-radius)}.ref-cart .ref-cart-table .ref-quantity-widget{margin:0}}.ref-quantity-widget{display:inline-flex;border:1px solid var(--ref-gray-300);border-radius:var(--ref-border-radius);box-shadow:2px 2px 2px #0000000d}.ref-quantity-widget input{text-align:center;color:inherit;background:none;border:none;outline:none;width:2.5em;font-size:.9em;padding:var(--ref-input-padding)}.ref-quantity-widget>div{display:flex;align-items:center;justify-content:center;border:0 solid;border-color:inherit;cursor:pointer;font-size:1.1em;line-height:1.5em;width:1.6em;padding:.2em 0;text-align:center;user-select:none;padding:var(--ref-input-padding);min-width:32px}.ref-quantity-widget>div:active{background-color:#979ca01a}.ref-increase span,.ref-decrease span{position:relative;display:block;width:10px;height:10px}.ref-increase span:before,.ref-increase span:after,.ref-decrease span:before{content:"";position:absolute;top:50%;left:0;display:block;width:10px;height:2px;background:currentColor;transform:translateY(-50%)}.ref-increase span:after{transform:translateY(-50%) rotate(90deg)}.ref-quantity-widget .ref-decrease{border-right-width:1px}.ref-quantity-widget .ref-increase{border-left-width:1px}.ref-quantity-widget.inactive,.ref-quantity-widget .ref-increase.inactive{opacity:.3;pointer-events:none}.ref-cart .ref-product-remove{text-transform:uppercase;color:var(--ref-danger);font-size:.75rem;margin-top:6px;cursor:pointer;display:inline-block}.ref-cart .ref-product-qty-message{font-size:.75rem;margin-top:6px}.ref-links{text-align:center}.ref-links a{color:var(--ref-tertiary-color);font-size:.8em;text-decoration:none;margin-right:10px}.ref-checkout .ref-links{margin-top:30px}.ref-cart .ref-footer{display:flex;flex-direction:column-reverse;align-items:center;justify-content:space-between;border-top:1px solid var(--ref-gray-300);padding-top:35px;margin-top:25px}.ref-cart .ref-totals{text-align:center;margin-bottom:30px}.ref-cart .ref-subtotal{font-size:1.2em;font-weight:700;margin-bottom:20px}.ref-cart .ref-shipping-taxes{margin-bottom:30px}.ref-cart .ref-accept-terms input[type=checkbox]{display:inline-block;margin-right:8px;margin-bottom:3px}.ref-cart .ref-accept-terms .ref-terms-agreement-text span,.ref-cart .ref-accept-terms .ref-terms-agreement-text a{display:inline;font-size:1rem}.ref-cart .ref-checkout-buttons{flex-direction:column;align-items:center;margin-top:1.5em}.ref-cart .ref-checkout-buttons .ref-paypal-express-checkout-holder>div{width:180px}.ref-cart .ref-checkout-buttons .ref-standard-checkout-button{width:180px;text-align:center}@media (min-width: 576px){.ref-cart .ref-footer{flex-direction:row;align-items:flex-start}.ref-cart .ref-totals{text-align:right;margin-bottom:0}.ref-cart .ref-links,.ref-checkout .ref-links{text-align:left}.ref-cart .ref-checkout-buttons{flex-direction:row;justify-content:flex-end;align-items:flex-start}.ref-cart .ref-checkout-buttons .ref-standard-checkout-button{margin-left:12px}}.ref-discount-code.hidden{display:none}.ref-discount-code-container{display:flex;flex-grow:1}.ref-discount-code .ref-discount-code-input-holder{flex-grow:1;margin-right:10px;position:relative}.ref-discount-code #ref-discount-code-input{width:100%;height:100%;font-size:.9rem;padding:8px 14px;border:1px solid var(--ref-gray-300);border-radius:var(--ref-border-radius);box-shadow:2px 2px #00000005;background:var(--ref-body-bg)}.ref-discount-code .ref-discount-code-input-clear{position:absolute;right:10px;top:7px;color:var(--ref-gray);cursor:default}.ref-discount-code .ref-button.ref-add-code{font-size:.9rem}.ref-checkout{display:flex;flex-direction:column-reverse;align-items:flex-start;width:100%}.ref-checkout .ref-checkout-content,.ref-checkout .ref-summary{flex-grow:1;width:100%;padding:0}.ref-checkout .ref-checkout-content{padding:5% 0}.ref-checkout .ref-summary-content{padding:5%}.ref-checkout-form .ref-heading-delivery,.ref-checkout-form .ref-heading-payment{margin-top:40px}.ref-checkout .ref-checkout-content .ref-zero-value-form{margin-bottom:20px}.ref-checkout .ref-summary .ref-heading{display:none}.ref-checkout .ref-summary-toggle{width:100%;background:var(--ref-gray-100);cursor:pointer;font-size:.8em;user-select:none}.ref-checkout .ref-summary-toggle .ref-field-toggle{padding:1em 5%}.ref-checkout-form label{display:block;margin-bottom:16px}.ref-checkout-form label span{display:block;font-size:.9em;margin-bottom:5px}.ref-checkout-form .ref-auth-button-holder{margin-bottom:20px}.ref-checkout-form .ref-register{font-size:.8em;margin-top:5px;cursor:pointer}.ref-checkout-form .ref-auth-save-address{margin-top:5px;padding-bottom:10px}.ref-checkout-form .ref-auth-save-address span{display:inline;padding-left:3px}.ref-checkout-form .ref-tax-note .ref-field-toggle-title,.ref-checkout-form .ref-note-to-seller .ref-field-toggle-title{display:block;font-size:.9em;margin-bottom:0;font-weight:700;color:var(--ref-primary)}.ref-checkout-form .ref-tax-note .ref-tax-exemption-text,.ref-checkout-form .ref-tax-note .ref-new-tax-file,.ref-checkout-form .ref-tax-note .ref-old-tax-file{margin-top:10px}.ref-checkout-form .ref-tax-note .ref-old-tax-file{display:block;font-size:.9em}.ref-checkout-form .ref-tax-note .ref-remove-tax-file{color:var(--ref-danger);border:1px solid var(--ref-danger);font-size:.6rem;font-weight:700;text-transform:uppercase;padding:1px 5px;border-radius:4px;cursor:pointer;position:relative;top:-1px;margin-left:10px}.ref-checkout-form .ref-note-to-seller textarea{margin-top:10px}.ref-checkout-form .ref-checkbox span{display:inline;margin-bottom:0;user-select:none;vertical-align:middle}.reflow-shopping-cart label input[type=text],.reflow-shopping-cart label input[type=email],.reflow-shopping-cart label input[type=tel],.reflow-shopping-cart label textarea,.reflow-shopping-cart label select,.reflow-add-to-cart.ref-product-controls label select{display:block;width:100%}.reflow-shopping-cart label textarea{min-height:80px}.reflow-shopping-cart label input[type=checkbox]{width:16px;height:16px;vertical-align:middle}.ref-checkout-form .ref-row-region>:nth-child(1){width:100%}.ref-checkout-form .ref-row-region>:nth-child(2){width:200px}.ref-checkout-form .ref-products{margin-top:10px}.ref-checkout-form .ref-product{display:flex;justify-content:space-between;margin-bottom:var(--ref-gutter-lg);align-items:center}.ref-checkout .ref-product .ref-product-col{flex-grow:1;display:flex;align-items:center}.ref-checkout .ref-product .ref-product-name{font-weight:700;word-break:break-word}.ref-checkout .ref-product .ref-product-photo{display:none}.ref-checkout .ref-product .ref-product-remove{display:block;color:var(--ref-danger);font-size:.75rem;cursor:pointer;text-align:right;text-transform:uppercase}.ref-checkout .ref-product.ref-warning .ref-product-name,.ref-checkout .ref-product.ref-warning .ref-product-price-breakdown{color:var(--ref-danger)}.ref-checkout .ref-product-qty-message{font-size:.75rem;display:inline-block}.ref-checkout .ref-product-update-cart{font-size:.75rem;display:inline-block;text-decoration:underline;font-weight:700;cursor:pointer}.ref-checkout .ref-applied-coupon .ref-remove-coupon,.ref-checkout .ref-applied-gift-card .ref-remove-gift-card{color:var(--ref-danger);border:1px solid var(--ref-danger);font-size:.6rem;font-weight:700;text-transform:uppercase;padding:1px 5px;border-radius:4px;margin-left:5px;cursor:pointer;position:relative;top:-1px}.ref-checkout .ref-applied-coupon .ref-applied-coupon-error,.ref-checkout .ref-applied-gift-card .ref-applied-gift-card-error{color:red;font-size:.9em}.ref-summary .ref-totals{font-size:.9em;line-height:1.8}.ref-summary .ref-total .ref-row{font-weight:700;font-size:1.1em}.ref-summary .ref-total-note{text-align:right;font-size:.8em}.ref-checkout .ref-back{font-size:.9em;cursor:pointer;margin-bottom:6px;color:var(--ref-secondary-color)}.ref-field-collapsible .ref-collapse,.ref-field-collapsible input[type=text],.ref-field-collapsible input[type=email],.ref-field-collapsible input[type=tel],.ref-field-collapsible textarea{display:none}.ref-field-collapsible .ref-field-toggle-title:after{content:"";display:inline-block;width:1px;height:1px;border:5px solid transparent;border-width:5px 6px;border-left-color:currentColor;position:relative;bottom:0;margin-left:10px}.ref-field-collapsible.open span:after{border-left-color:transparent;border-top-color:currentColor;border-width:6px 5px;bottom:-4px;margin-left:8px}.ref-field-collapsible.open .ref-collapse,.ref-field-collapsible.open input[type=text],.ref-field-collapsible.open input[type=email],.ref-field-collapsible.open input[type=tel],.ref-field-collapsible.open textarea{display:block}.ref-field-toggle{display:flex;justify-content:space-between;cursor:default}.ref-summary-total{font-weight:700}@media (min-width: 576px){.ref-checkout .ref-checkout-content{padding:5%}.ref-checkout .ref-product .ref-product-photo{display:inline-block}}@media (min-width: 992px){.ref-checkout{flex-direction:row}.ref-checkout .ref-checkout-content{width:55%;padding:5%}.ref-checkout .ref-summary{display:block;width:45%;padding:5%;min-height:650px}.ref-checkout .ref-summary-content{display:block;padding:0}.ref-checkout .ref-summary .ref-heading{display:block}.ref-checkout .ref-summary-toggle{display:none}}.ref-payment-method-instructions{border:1px solid var(--ref-gray-300);background:var(--ref-body-bg);border-radius:var(--ref-border-radius);padding:15px;margin-bottom:20px}.ref-payment-method-instructions>p{font-family:var(--bs-body-font-family);margin-bottom:0}.ref-delivery-card{background:var(--ref-body-bg);border:1px solid var(--ref-gray-300);border-radius:12px;margin-bottom:50px}.ref-delivery-card .ref-tab{border:1px solid var(--ref-gray-300);border-width:0px}.ref-delivery-card.tabbable .ref-tab:first-of-type{border-bottom-width:1px}.ref-delivery-card .ref-tab-toggle{display:none;align-items:center;padding:15px;margin-bottom:0}.ref-delivery-card.tabbable .ref-tab-toggle{display:flex}.ref-delivery-card .ref-tab .ref-tab-toggle .ref-heading-small{margin-bottom:0;margin-left:15px}.ref-delivery-card .ref-tab .ref-tab-content{display:none;padding:10px 15px 30px}.ref-delivery-card .ref-tab.open .ref-tab-content{display:block}.ref-locations{margin-bottom:40px}.ref-locations label{margin-bottom:0;position:relative}.ref-locations label .ref-location-card{cursor:pointer;border:1px solid var(--ref-gray-300);padding:12px 16px;border-bottom-width:0px}.ref-locations label:first-child .ref-location-card{border-top-left-radius:12px;border-top-right-radius:12px}.ref-locations label:last-of-type .ref-location-card{border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-width:1px}.ref-locations input[type=radio]{position:absolute;top:20px;left:20px}.ref-locations input[type=radio]:checked+.ref-location-card{box-shadow:inset 0 0 1px 1px var(--ref-primary)}.ref-locations .ref-location-name{display:block;font-size:1em;margin-bottom:12px;margin-left:28px}.ref-locations .ref-location-address{font-size:.9em;margin-bottom:5px}.ref-billing-container{margin-top:30px}.ref-billing-container .ref-button{background:var(--ref-body-bg);color:var(--ref-primary);border:1px solid var(--ref-primary);font-size:.9rem;padding:4px 10px 2px;border-radius:4px;cursor:pointer}.ref-billing-container .ref-remove-billing{margin-bottom:20px;color:var(--ref-gray-700);border:1px solid var(--ref-darkgray)}.ref-heading-shipping-methods{margin-top:40px}.ref-shipping-methods label{display:flex;cursor:pointer;border:1px solid var(--ref-gray-300);padding:10px 15px;margin-bottom:0;border-bottom-width:0px}.ref-shipping-methods label:first-child{border-top-left-radius:12px;border-top-right-radius:12px}.ref-shipping-methods label:last-of-type{border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-width:1px}.ref-shipping-methods .ref-method-radio{display:flex}.ref-shipping-methods input[type=radio]{width:18px;height:18px}.ref-shipping-methods .ref-method-name{flex:1;padding:0 12px 0 10px;word-break:break-word}.ref-shipping-methods .ref-method-name small{display:block;color:var(--ref-gray)}.ref-delivery-unavailable{border:1px solid var(--bs-danger);padding:20px;margin-bottom:40px}.ref-standard-payment-buttons .ref-button{display:block;margin-bottom:7px;text-align:center;font-size:18px;padding:14px}@media (min-width: 576px){.ref-payment-method-instructions{padding:30px}.ref-shipping-methods label{padding:15px 20px}.ref-shipping-methods .ref-method-name{padding:0 16px 0 18px}.ref-delivery-card .ref-tab-toggle{padding:20px 25px}.ref-delivery-card .ref-tab .ref-tab-content{padding:25px 35px 35px}}.reflow-shopping-cart .paypal-button{height:55px;padding:16px;margin-bottom:7px;font-size:16px;text-align:center;border-radius:var(--ref-border-radius);cursor:pointer}.paypal-button.paypal-button-gold:hover{filter:brightness(.95)}.reflow-shopping-cart .ref-paypal-express-checkout-holder .paypal-button{height:43px;padding:10px}.reflow-shopping-cart .paypal-button-gold{color:#2c2e2f;background:#ffc439}.reflow-shopping-cart .paypal-button-black{color:var(--ref-white);background:#2c2e2f}.reflow-add-to-cart .ref-variant{margin-bottom:var(--ref-gutter-md)}.reflow-add-to-cart .ref-variant label{display:inline-block}.reflow-add-to-cart .ref-quantity-widget{margin:0 var(--ref-gutter-sm) var(--ref-gutter-sm) 0}.reflow-add-to-cart .ref-personalization{margin-top:1em;margin-bottom:1.5em;max-width:400px}.reflow-add-to-cart .ref-personalization .ref-row{align-items:baseline;justify-content:space-between;margin-bottom:8px}.reflow-add-to-cart .ref-personalization input[type=checkbox]{margin-left:8px}.reflow-add-to-cart .ref-personalization input[type=text]{width:100%}.reflow-add-to-cart .ref-personalization .ref-price{text-transform:capitalize;font-weight:700;margin:0}.reflow-add-to-cart .ref-personalization p{margin-bottom:8px}.reflow-add-to-cart .ref-min-qty-message{font-size:.9em;margin-top:4px}.reflow-add-to-cart .ref-personalization.ref-required label span{color:var(--ref-danger)}.reflow-add-to-cart .ref-personalization.ref-required .ref-check svg{color:var(--ref-primary);width:1.2em;height:1.2em;position:relative;top:-1px}.reflow-add-to-cart .ref-personalization-label{display:flex;align-items:center}.reflow-add-to-cart .ref-form-control{width:auto}.ref-test-mode-badge{background:#e79520;color:#fff;padding:8px 12px;max-width:100px;font-size:.8rem;font-weight:700;text-align:center;margin-bottom:10px;border-radius:2px}