@charset "UTF-8";
body { overflow-x: hidden; }

main#design > frame-context { height: calc(100vh - 60px); overflow: auto; width: 100vw; overflow-x: hidden; }

main#design section#preview { height: calc(calc(100vh - 80px) - 120px); background-color: #C7CACC; overflow: auto; display: flex; justify-content: center; align-items: center; }

div#quantity_and_price { height: 60px; background-color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 2; }

div#quantity_and_price > div > select { display: inline-block; width: auto; margin: 0 0 0 0.8rem; }

.quantity-container { white-space: nowrap; }

body.edit-listing .quantity-container { visibility: hidden; }

input#quantity { width: 50px; text-align: center; padding-right: 0px; }

.price-container { display: flex; align-items: center; }

.invalid-frame { display: none; font-size: 11px; margin-left: 20px; color: #D95941; }

.invalid-frame.shown { display: block; }

div#actions { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-column-gap: 16px; padding: 0 20px; background-color: white; height: 60px; align-items: center; }

/* Hide Klaviyo 10% off offer for listings */
body.view-listing .kl-teaser-HRWZyi, body.view-listing .needsclick { display: none !important; }

body.view-listing div#actions, div#actions.from-pro-app, div#actions.without-favorites { grid-template-columns: 1.5fr 2fr; }

body.edit-listing div#actions button.primary { grid-column: span 3; }

body.view-listing #alert-indicator.design-only { display: none; }

#listing-info, .view-listing-only { display: none; }

body.view-listing #listing-info { display: block; padding: 28px; margin: 0 auto; max-width: 600px; word-break: break-word; }

#listing-info .listing-description { margin-top: 16px; color: #000; }

listing-options { display: grid; margin-top: 16px; gap: 16px; }

listing-options .single-variant { display: none; }

listing-options select { margin-top: 4px; }

body.view-listing .view-listing-only { display: grid; }

body.view-listing #options { padding-top: 0; }

body.view-listing dl { display: grid; margin: 0; }

div#options { padding: 20px; overflow: hidden; }

div#options select { font-weight: 500; color: #000000; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: 500; text-align: left; line-height: 18px; margin-bottom: 42px; }

div#options h2, div#listing-info h2 { color: #04734A; font-size: 20px; font-family: 'Blanco', Georgia, serif; font-weight: bold; text-align: left; letter-spacing: 0; line-height: 28px; margin: 0; }

div#listing-info h2 { color: #000; }

#search-tags { width: 100%; }

#tags .autocomplete-results { position: relative; font-size: 14px; }

#tags .pill[role=button] { display: flex; cursor: pointer; border: 1px solid #0000000f; }

#tags .pill[role=button]:after { display: inline-block; content: "×"; font-size: 22px; font-weight: 500; line-height: 13px; padding-left: 6px; color: #888; transition: color 0.2s ease-out; }

#tags .pill[role=button]:hover { background-color: #dbdfe7; }

#tags .pill[role=button]:hover:after { color: #333; }

#related-tags { padding: 12px 8px; }

.edit-listing #related-tags { padding: 0; margin-top: -8px; }

div#related-tags h2 { color: #848484; font-size: 12px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: 500; letter-spacing: 1px; line-height: normal; text-transform: uppercase; margin-bottom: 12px; }

#related-tags .pill { padding-left: 0; padding-right: 0; }

#related-tags .pill a { padding: 4px 8px; border-radius: 8px; color: inherit; text-decoration: none; }

#related-tags .pill:hover { background-color: #dbdfe7; }

div.overlay p, div#options p, div#listing-info p { color: #595959; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: normal; text-align: left; line-height: 24px; margin: 0; }

div.overlay p { font-size: 16px; margin: 18px 0 18px 20px; }

div.overlay p.info-icon { position: relative; font-size: 14px; margin: 18px 0 18px 20px; }

div.overlay p.info-icon > .svg-icon { position: absolute; right: 100%; }

.auto-shortname-container { display: grid; grid-template-columns: 1fr max-content; align-items: baseline; column-gap: 16px; margin: 24px 0; font-size: 14px; }

.auto-shortname-container label { grid-column: span 2; }

.auto-shortname-container span { color: #000; }

.auto-shortname-container button { top: -2px; }

div#options > dl > div { padding: 8px 8px 12px 2px; background: #FFFFFF; box-shadow: inset 0 1px 0 0 #eee; cursor: pointer; background: url("https://static.simplyframed.com/images/icons/right_arrow.svg") no-repeat; background-position: 100% 16px; background-size: 24px; }

body.view-listing div#options > dl > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 12px 8px; align-items: center; cursor: default; background: none; }

body.view-listing div#options > dl > div[data-overlay=PP] { order: 1; /* Move PP down for viewlisting */ }

body.view-listing .design-only, body.view-listing div#options > div.design-only, body.view-listing div#options > dl > div.design-only { display: none; }

body.edit-listing .except-edit-listing { display: none; }

body.edit-variant .variant-hidden { display: none; }

body.edit-variant div#options > dl > div.variant-disabled, body.edit-size-variant div#options > dl > div.size-variant-disabled, body.edit-frame-variant div#options > dl > div.frame-variant-disabled { background: #f4f4f4; cursor: default; }

.child-option { display: grid; grid-template-areas: "icon term" "icon definition"; justify-content: start; margin-right: -2px; }

.child-option::before { width: 26px; height: 26px; display: block; content: ''; grid-area: icon; align-self: center; margin: 4px 0 0 -2px; background: url("https://static.simplyframed.com/images/icons/child_arrow.svg"); }

body.view-listing .child-option::before { display: none; }

div#options dl.options > div:last-child { border-bottom: 1px solid #eee; }

div#options dl.options dl { margin-bottom: 0; padding-bottom: 0; }

div#options > dl > div:last-of-type { background-color: #FFFFFF; box-shadow: inset 0 1px 0 0 #eee; }

div#options > dl > div > dt { color: #848484; font-size: 12px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: 500; text-align: left; text-transform: uppercase; letter-spacing: 1px; line-height: 20px; }

body.view-listing div#options > dl > div > dt { line-height: normal; white-space: nowrap; }

div#options > dl > div > dd { padding: 0; margin: 0; color: #000000; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: normal; text-align: left; line-height: 16px; }

div#options > dl > div > dd > div { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px; }

body.view-listing div#options > dl > div > dd > div { white-space: normal; }

div.overlay { position: absolute; top: 60px; bottom: 0; height: calc(100vh - 60px); width: 420px; z-index: 1; background-color: #F4F4F4; transition-property: right; transition-duration: .5s; overflow-y: auto; display: none; }

div.overlay.show { display: block; width: 100%; }

div.overlay header { display: grid; grid-template-columns: 160px 1fr; align-items: center; padding: 2px 20px; position: sticky; position: -webkit-sticky; top: 0; background-color: #F4F4F4; z-index: 1; border-bottom: 1px solid #e4e4e4; margin-bottom: 28px; }

div.overlay header > h2 { color: #04734A; font-size: 18px; font-family: 'Blanco', Georgia, serif; font-weight: bold; letter-spacing: 0; line-height: 28px; position: relative; top: -1px; }

div.overlay header > div { text-align: right; }

div.overlay header > div button:first-child { margin-right: 4px; }

div.overlay header > p.error { grid-column: span 2; font-size: 14px; color: #d95941; }

div.overlay nav.option-tabs { display: flex; padding: 15px 0 20px; grid-column: 1 / span 2; }

div.overlay nav.option-tabs > div { flex-grow: 1; margin: 0 10px 0 0; }

div.overlay nav.option-tabs > div:last-child { margin-right: 0; }

div.overlay nav.option-tabs label { display: flex; justify-content: center; }

.option-search { position: relative; grid-column: 1 / span 2; margin-bottom: 15px; }

.option-search input[type=search] { width: 100%; }

.option-search .clear-search { position: absolute; display: none; top: 0; right: 0; padding: 5px; width: 34px; height: 34px; border: none; background: none; }

.option-search input.searching[type=search] { background-image: none; }

.option-search .searching + .clear-search { display: block; }

div.overlay div.values { padding: 0 20px 20px 20px; }

div.overlay div.values.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

div.overlay div.values div.customize.option { width: auto; }

div.overlay div.values.two-col div.customize.option { height: 100%; margin: 0; }

div.overlay-info { padding: 0 20px 20px 20px; color: #848484; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: normal; text-align: left; line-height: 24px; }

div#FR div.values:not(.active) { display: none; }

div.empty-frame-line { font-size: 16px; }

div.frame-dimensions { display: grid; grid-template-columns: 1fr 2fr; padding: 0 20px; color: #595959; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: normal; }

#PB .frame-dimensions { margin-top: -16px; }

#MD .mat-design-controls .content { color: #000; text-transform: none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; }

#MD .mat-design-controls input[type=radio] { width: 0; /* Allow clicks to pass to color input (label still clickable) */ }

.dimensions-value { display: inline-grid; width: 150px; grid-template-columns: 4fr 2fr 4fr 5fr; }

section#sidebar { position: relative; }

section#sidebar.subpane_open { overflow: hidden; }

fieldset { border: none; margin: 0; padding: 0; }

legend { margin: 0 32px 16px; }

div#sidebar-header { position: sticky; position: -webkit-sticky; top: 0; border-bottom: 1px solid #e4e4e4; z-index: 1; }

div.error, div.success { position: absolute; top: 0; height: 0; width: 100%; text-align: center; font-size: 14px; font-family: 'National2'; z-index: 10000; transition: height .5s; overflow: hidden; }

div.error { background-color: #eee; color: #d95941; }

div.success { background-color: #C8DEC5; color: #02734A; }

div#add-to-cart-error.error, div#listing-is-draft.error, div#listing-sold-out.error { position: relative; }

div#listing-is-draft.error { color: #04734A; }

div.error.show, div.success.show { display: block; height: 60px; }

div.error > p, div.success > p { margin: 20px 0; }

div#file { display: flex; align-items: center; column-gap: 20px; margin-bottom: 20px; }

div#file span { color: #343434; font-size: 14px; font-family: 'National2'; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Setting max-widths */
div.values, div#options, div#sidebar-header form, div.overlay header { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }

div.overlay.show { width: 100%; }

#listing-form { display: flex; flex-direction: column; margin-top: -16px; }

#listing-form > div { margin-bottom: 16px; }

#listing-form label { display: flex; line-height: 24px; }

#listing-form label input[type=checkbox] { margin: 4px 8px 4px 0; }

#listing-form .tooltip-label { height: 24px; }

#listing-form input { background-color: #fff; }

#listing-form input[type=text], #listing-form input[type=number] { width: 100%; }

#listing-form textarea { overflow: hidden; background-color: #fff; }

#listing-form select { margin: 0 0 8px; background-color: #fff; }

#listing-form [readonly] { background-color: #f4f4f4; }

#listing-active-container { margin-top: 4px; }

.growing-textarea { display: grid; }

.growing-textarea:after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; padding: 8px 8px 8px 12px; border: 1px solid black; font-size: 14px; font-family: National2; line-height: 16px; }

.growing-textarea > textarea { height: auto; resize: none; overflow: hidden; }

.growing-textarea > textarea, .growing-textarea:after { grid-area: 1 / 1 / 2 / 2; }

.dollar-input-container, .percent-input-container { position: relative; }

.dollar-input-container:after { content: "$"; position: absolute; bottom: 8px; left: 14px; font-size: 16px; }

.dollar-input-container input { padding-left: 30px; }

.percent-input-container:after { content: "%"; position: absolute; bottom: 8px; right: 14px; font-size: 16px; }

.percent-input-container input { padding-right: 38px; }

#listing-form input:invalid, #listing-form textarea:invalid { border-color: #e4e4e4; }

#listing-form input:invalid:focus, #listing-form textarea:invalid:focus { border-color: #0077cc; }

#listing-form .invalid { border-color: #d95941; }

#listing-form .error { display: none; margin: 0; color: red; font-size: 13px; }

#listing-form .error.show { display: block; }

#listing-form .info { font-size: 13px; margin: -2px 0 4px; }

.listing-price-part { display: grid; grid-template-columns: 240px auto; gap: 24px; align-items: end; font-size: 14px; }

.listing-price-divider { grid-column: span 2; border-bottom: 1px solid #ddd; }

.listing-price-totals > label { text-align: right; }

.listing-price-totals { margin-top: 16px; align-items: center; }

.listing-price-equals { position: relative; line-height: 32px; }

.listing-price-equals:before { position: absolute; content: '='; left: -16px; }

.listing-price-input-container { margin-left: -14px; }

.dollar-input-container.listing-price-input-container input { padding-left: 22px; }

/* Media query for layout break */
@media (min-width: 1000px) { main#design > frame-context { display: grid; grid-template-columns: auto 420px; height: calc(100vh - 80px); } main#design section#preview { height: calc(100vh - 80px); } section#sidebar { position: static; height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; } div.overlay { visibility: hidden; right: -420px; width: 420px; height: calc(100vh - 141px); } div.overlay.show { right: 0; top: 139px; visibility: visible; width: 420px; } }