/* Global */ /*.App { --font-family: 'Lato'; --font-weight: 400; }*/ /* h1, h2, h3, p { color: #141414; }*/ a { display: inline-block; text-decoration: none !important; } hr { border-top: 0.5px solid #bbb; } a > i { padding:0 8px; } h3 > img { width:20px; height:20px; margin-right:.5rem!important; } header > h1 { display: none; } mark { display: inline-block; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, rgb(255 69 0) 65%); box-shadow: inset 0 -0.5em 0 rgb(29, 219, 169); } [data-color-mode="dark"] .App mark { color: #fff; } li { padding: 2px 8px; } .maintext { font-size:16px; } .wrapper { margin: 20px; } .post { background: #0272d9; font-weight: bold; border-radius: 10px; color: #fff !important; padding: 0 13px 0 13px; text-decoration: none; pointer-events: none; } .put { background: #fca130; font-weight: bold; border-radius: 10px; color: #fff !important; padding: 0 13px 0 13px; text-decoration: none; pointer-events: none; } .get { background: #0e9b71; font-weight: bold; border-radius: 10px; color: #fff !important; padding: 0 13px 0 13px; text-decoration: none; pointer-events: none; } .patch { background: #df7d03; font-weight: bold; border-radius: 10px; color: #fff !important; padding: 0 13px 0 13px; text-decoration: none; pointer-events: none; } .delete { background: #c71b29; font-weight: bold; border-radius: 10px; color: #fff !important; padding: 0 13px 0 13px; text-decoration: none; pointer-events: none; } /* Landing page */ .MobileFlyout1hHJpUd-nYkd { background-color: #fff !important; } .sectioncentered { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 24px -16px; } .sectionstretched { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; margin: 24px -16px; } .subsectiontext { margin: 0 16px 24px; padding: 8px 24px 56px; flex: 1 0 500px; } .subsectionimg { margin: 0 16px 24px; flex: 1 0 300px; max-width: 300px; } .subsectionunboxed { margin: 0 16px 24px; flex: 1 0 250px; position: relative; } .subsectionboxed { background-color: #F7FAFD; margin: 0 16px 24px; padding: 8px 24px 56px; flex: 1 0 250px; position: relative; } [data-color-mode="dark"] .App .subsectionboxed { background-color: #6AB4FC; } .subsectionboxed > a { display: inline-block; position: absolute; bottom: 20px; left: 24px; } .subsectiontab { background-color: #FFFFFF; margin: 0 16px 24px; padding: 8px; flex: 1 0 100%; position: relative; } .mainbutton { display: inline-block; font-weight: bold; background-color: #2A45A7; color: #fff !important; border: solid; border-color: #2A45A7; border-radius: 8px; padding: 15px 32px; text-align: center; cursor: pointer; } .mainbutton:hover { display: inline-block; background-color:#17308C; color: #fff !important; border-color:#17308C; } .secondarybutton { display: inline-block; font-weight: bold; background-color: transparent; color: #2A45A7 !important; border: solid; border-color:#2A45A7; border-radius: 8px; padding: 15px 32px; text-align: center; cursor: pointer; margin: 8px; } .secondarybutton:hover { display: inline-block; background-color:#F2F3F7 !important; color: #2A45A7; } .thirdbutton { display: inline-block; font-weight: bold; background-color:#0B1643 !important; border-radius: 8px; color: #ffffff; padding: 5px 32px; text-decoration: none; border:none; cursor: pointer; margin:4px; } .thirdbutton:hover { display: inline-block; color: #ffffff !important; } .postmanbutton { display: inline-block; font-weight: bold; background-color:#EF5B25; border-radius: 8px; color: #ffffff !important; padding: 5px 32px; text-decoration: none; border:none; cursor: pointer; } .postmanbutton:hover { display: inline-block; color: #ffffff !important; } .diagrambutton { background-color:transparent; border-radius: 8px; color: #0B1643 !important; padding: 10px 32px; border:none; cursor: pointer; } .console-nav { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; font-weight: bold; background-color:#0B1643; padding: 0px 15px; margin: 0px 5px; font-size: 14px; color:#fff !important; text-decoration:none; width: auto; } .console-nav:hover { color: #fff !important; } .console-btn { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; font-weight: bold; background-color:#2a45a7; padding: 0px 15px; margin: 0px 5px; color:#fff !important; font-size: 14px; text-decoration:none; border-radius: 10px; text-align: center; width: auto; } .console-btn:hover { color: #fff !important; } .download-btn { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; font-weight: bold; font-size: 14px; background-color:transparent; padding-right:20px; color:#2A45A7 !important; text-decoration:none; text-align: center; line-height: 30px; } .download-btn:hover { color: #2A45A7 !important; } .buttons-list { display:flex; justify-content: start; } .flexline { display:flex; justify-content: start; } .console-tabbutton { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; font-weight: bold; background-color: #F8F8F8; color: #2A45A7 !important; border-bottom: solid; border-color:#2A45A7; line-height: 24px; width: 30%; font-size: 14px; pointer-events: none; cursor: default; } .console-tabbutton:hover { color: #2A45A7 !important; } [data-color-mode="dark"] .console-tabbutton { color: #2A45A7; } .console-select { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; font-weight: bold; text-decoration:none; line-height: 20px; border: solid; border-color: #2A45A7; line-height: 24px; border-radius: 5px; font-size: 14px; color:#000000 !important; padding: 0px 15px; margin: 0px 5px; width: auto; pointer-events: none; cursor: default; } .console-select:hover { color: #000000 !important; } .console-icon { margin: 8px; } .console-txt { margin: 8px; } /* Array CSS */ .markdown-body .rdmd-table { --table-head: #F7FAFD; --table-stripe: #F7FAFD; --table-edges: none; --table-row: white; } .markdown-body .rdmd-table th { height: 52px; padding: 8px, 12px, 8px, 12px; gap: 8px; } .markdown-body .rdmd-table td { height: 52px; padding: 8px, 12px, 8px, 12px; gap: 8px; } [data-color-mode="dark"] .App .markdown-body .rdmd-table { --table-head: #6AB4FC; --table-stripe: #6AB4FC; --table-edges: none; --table-row: transparent; } /* Tabs CSS */ .tab { display: none; } .tab:target { display: block; } .tab:last-child { display: block; } .tab:target ~ section.tab:last-child { display: none; } .tab > nav > a.active { color: #17308C; background-color: #F7FAFD; font-weight: bold; text-decoration:none; flex-grow: 1; padding: 20px; border-color: #F2F3F7; border-radius: 10px 10px 0px 0px; } [data-color-mode="dark"] .App .tab > nav > a.active { color: #141414; } .tab > nav > a.inactive { color: #595959; background-color: #F8F8F8; font-weight: bold; text-decoration:none; flex-grow: 1; padding: 20px; border-radius: 10px 10px 0px 0px; } [data-color-mode="dark"] .App .tab > nav > a.inactive { color: #fff; background-color: transparent; } .icon { padding-top: 10px; margin: 0; } .tab > * { width: 100%; padding-top: 10px; margin: 0; } .tab > nav { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 5px; } .tab > nav > a { display: inline-block; background-color: #595959; padding: 10px; } .tabpanel { background-color: #F7FAFD; padding: 20px; } .tabpanel > ul > li::marker { color: green; content: "📖"; } .tabpanel > ul > li span { display:block; margin-left:1em; } [data-color-mode="dark"] .App .tabpanel > ul > li span { color: #141414; } [data-color-mode="dark"] .App .tabpanel > li span { color: #000000; } .availability { font-size:100%; color: green; padding:0 8px; } .unavailability { font-size:60%; font-weight: bold; font-style: oblique 10deg; padding:0 8px; } /* Footer */ .footer { text-align:center; padding: 50px; } .footer > a { display: inline-block; font-size:20px; margin:30px 10px; text-decoration:none; color:#141414; } [data-color-mode="dark"] .App .footer > a { color:#fff; } /* -------------------------------- Breadcrumbs -------------------------------- */ /**/ .breadcrumb { width: 90%; max-width: 768px; padding: 0.5em 1em; margin: 1em auto; border-radius: .25em; } .breadcrumb::after { clear: both; content: ""; display: table; } .breadcrumb li { display: inline-block; float: left; margin: 0.5em 0; } .breadcrumb li::after { /* this is the separator between items */ display: inline-block; content: '\00bb'; margin: 0 .6em; color: #959fa5; } .breadcrumb li:last-of-type::after { /* hide separator after the last item */ display: none; } .breadcrumb li > * { /* single step */ display: inline-block; color: #2c3f4c; } .breadcrumb li.current > * { /* selected step */ color: #0B1643; } .no-touch .breadcrumb a:hover { /* steps already visited */ color: #0B1643; } @media only screen and (min-width: 768px) { .breadcrumb { padding: 0 1.2em; } .breadcrumb li { margin: 1.2em 0; } .breadcrumb li::after { margin: 0 1em; } .breadcrumb li > * { /* font-size: 1.6rem; */ } } /* Multi steps indicator */ @media only screen and (min-width: 768px) { .breadcrumb { /* reset style */ background-color: transparent; padding: 0; text-align: center; } .breadcrumb li { position: relative; float: none; margin: 0.4em 40px 0.4em 0; } .breadcrumb li:last-of-type { margin-right: 0; } .breadcrumb li::after { /* this is the line connecting 2 adjacent items */ position: absolute; content: ''; height: 3px; background: #B7B7B7; /* reset style */ margin: 0; } .breadcrumb li.visited::after { background-color: #0B1643; } .breadcrumb li > *, .breadcrumb li.current > * { position: relative; color: #2c3f4c; } .breadcrumb.text-bottom li { width: 80px; text-align: center; } .breadcrumb.text-bottom li::after { /* this is the line connecting 2 adjacent items */ position: absolute; left: 50%; /* 40px is the

right margin value */ width: calc(100% + 40px); } .breadcrumb.text-bottom li > *::before { /* this is the spot indicator */ content: ''; position: absolute; z-index: 1; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 12px; width: 12px; border-radius: 50%; background-color: #edeff0; } .breadcrumb.text-bottom li.visited > *::before, .breadcrumb.text-bottom li.current > *::before { border: 3px solid #0B1643; background-color: #fff; } .no-touch .breadcrumb.text-bottom a:hover { color: #0B1643; } .no-touch .breadcrumb.text-bottom a:hover::before { box-shadow: 0 0 0 3px rgba(11, 22, 67, 0.3); } .breadcrumb.text-bottom li::after { /* this is the line connecting 2 adjacent items */ top: 2px; } .breadcrumb.text-bottom li > * { padding-top: 20px; } .breadcrumb.text-bottom li > *::before { /* this is the spot indicator */ top: 0; } } /* Add a counter to the multi-steps indicator */ .breadcrumb.count li { counter-increment: steps; } .breadcrumb.count li > *::before { content: counter(steps) " - "; } @media only screen and (min-width: 768px) { .breadcrumb.text-bottom.count li > *::before { /* this is the spot indicator */ content: counter(steps); height: 26px; width: 26px; line-height: 26px; font-weight: bold; color: #0B1643; } .breadcrumb.text-bottom.count li:not(.current) em::before { /* steps not visited yet - counter color */ border: solid 3px #B7B7B7; background-color: #fff; color: #B7B7B7; } .breadcrumb.text-bottom.count li::after { top: 11px; } .breadcrumb.text-bottom.count li > * { padding-top: 34px; } } /* FOR THE TOGGLES */ #contents { display: none; top: 15%; } #btn4 a[href="#revert"] { text-decoration: none; color: black; display: none; } #contents:target { display: block; } /* CMS PRODUCT BADGE */ .product-badge { border-radius: 15px; color: #FFF; margin-right: 5px; padding: 5px 10px; font-size: 10px; } .it-badge { background: #0171c2; text-shadow: 1px 1px 0 #0168b3, 0 1px 0 #0168b3, 1px 0 0 #0168b3; } .it-st-badge { background: #df7d03; text-shadow: 1px 1px 0 #d07503, 0 1px 0 #d07503, 1px 0 0 #d07503; } .bnpl-badge { background: #0e9b71; text-shadow: 1px 1px 0 #0d8d67, 0 1px 0 #0d8d67, 1px 0 0 #0d8d67; } @media (prefers-color-scheme: dark) { [data-color-mode="system"] .App .Button_slate_text { color: #fff; } [data-color-mode="system"] .App mark { color: #fff; } [data-color-mode="system"] .App .subsectionboxed { background-color: #6AB4FC; } [data-color-mode="system"] .console-tabbutton { color: #2A45A7; } [data-color-mode="system"] .App .markdown-body .rdmd-table { --table-head: #6AB4FC; --table-stripe: #6AB4FC; --table-edges: none; --table-row: transparent; } [data-color-mode="system"] .App .tab > nav > a.active { color: #141414; } [data-color-mode="system"] .App .tab > nav > a.inactive { color: #fff; background-color: transparent; } [data-color-mode="system"] .App .tabpanel > ul > li span { color: #141414; } [data-color-mode="system"] .App .tabpanel > li span { color: #000000; } [data-color-mode="system"] .App .footer > a { color:#fff; } [data-color-mode="system"] .App .Button_slate_text { color: #fff; } }

Boost your sells with our Shopify app

Resources

Boost your sells with
our Shopify app