/*********** Generic **************/
*, ::after, ::before {
  box-sizing: border-box;
}

html {
  --text-color-normal: #0a244d;
  --text-color-light: #383838;
  --text-color-dark: #000000;

  --background-section: #f9f9f9;
  --background-card: #ffffff;

  --background-accept-cards: #ffffff;
  --sanbox-online-lineal-fill : #FCD49B;
  --sanbox-recurring-lineal-fill : #45c4a0; 
  --sanbox-platform-lineal-fill : #c5d7f6;
  --inverse-background: #f3f4f6;
}

html[data-color-mode="dark"] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
  --text-color-dark-revers: #000000;

  --background-section: #1d2326;
  --background-card: #383838;
  --background-accept-cards: #1e2c34;

  --sanbox-online-lineal-fill : #ffd140;
  --sanbox-recurring-lineal-fill : #46b278;
  --sanbox-platform-lineal-fill : #6f37e3;
  
  --inverse-background: #2d3940;

}

.rm-Sidebar-link .active {
  --Sidebar-link-hover-background: #fff3eb !important;
}
:root {
  --sanbox-online-lineal-fill : #FCD49B;
  --sanbox-recurring-lineal-fill : #45c4a0;
  --sanbox-platform-lineal-fill : #c5d7f6;
}

.rm-TryIt, .additional-feature  { display: none !important; }
.rm-Logo-img_lg       { height: 30px; }
.rm-Guides .UpdatedAt { padding-top: 75px; }
.rm-Guides #content-head { padding-bottom: 20px; }
code[class^=APIResponse-empty-try] { display: none; }

/* code.rdmd-code[data-lang=""] { 
  border: 1px solid #fbdad6;
  background: rgba(251, 216, 212, 0.1) !important;
  font-weight: 600;
  letter-spacing: 0.05rem;
} */

code.rdmd-code[data-lang=""] {
  border: 1px solid #ecd4ac;
  background: #fbf6ef;
  letter-spacing: 0.05rem;
  border-radius: 0.2rem;
  color: #000;
  margin: 2px;
  display: inline-block;
  line-height: normal;
  font-weight: 400;
  font-family: "Inter";
  font-size: 13px;
}

[data-color-mode="dark"] code.rdmd-code[data-lang=""] { 
  border: 0px;
  background: rgb(255 255 255 / 32%);
}

body { 
  font-family: "Inter", "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-stretch: normal;
}

a, a:hover, a:active, a:visited { color: rgb(0, 105, 194); text-decoration: none; }

.App 	{ --font-family: "Inter", "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
.rm-Header					{ position: sticky; position: -webkit-sticky; top:0px; }
.rm-Sidebar, .content-toc 	{ top: 106px !important; }
.rm-Sidebar                 { padding-right: 0px !important; }
.icon-clipboard             { border: 1px solid rgba(255, 255, 255, 0.2) !important; }
.text-left 					{ text-align: left !important; }
.rm-Guides #content-head h1	{ font-size: 1.75em; }
h1.heading.heading-1 .heading-text	{ font-size: 1.25rem; }
.callout.callout .callout-heading 	{ font-size: 1.20rem; }
.APIMethod					{ box-shadow: none !important; height: 18px; line-height: 18px; font-size: 10px; text-shadow: none !important; }
.APIMethod_post				{ background: #bfdbfe; color: #2563eb; }

.ThemeContext_line .rm-Header 	{ --Header-border-width: 2px; }
.LanguagePicker-divider			{ display: none; }

.rm-Logo  { position: relative; }
/* .rm-Logo:after { position: absolute;
  right: -50px;
  bottom: 0px;
  content: "DOCS";
  padding: 0px;
  background-color: orange;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  top: 50%;
  transform: translate(0%, -55%);
  color: white;
  font-weight: 600;
  font-family: Inter;
} */

/*********** Landing Hero Container **************/
main.rm-LandingPage 			{ padding: 0; font-family: Inter,sans-serif; font-size: 14px; line-height: 24px; margin: 0 auto; width: 100%; color: #240253; --LandingPage-gap: var(--gap, 0em); }
.landing-container 						{ box-sizing: border-box; max-width: 1258px; margin-left: auto; margin-right: auto; width: 100%; }
.landing-hero-banner 					{ min-height: 300px; display: flex; align-items: center; }
.landing-hero-banner .container 		{ text-align: center; width: 100%; box-sizing: border-box; }
.landing-hero-banner .container span 	{ padding: 6px 15px; background-color: #ffe0b2; border-radius: 4px; margin: 7px 0; display: inline-block; font-weight: 600;}
.landing-hero-banner .container h2 		{ font-family: Inter,sans-serif; font-size: 48px; margin: 0 auto; font-weight: 700; line-height: 51px; padding: 8px 0 12px; max-width: 550px; position: relative; z-index: 99 !important; }
.landing-hero-banner .container p 		{ position: relative; font-family: Inter,sans-serif; padding: 0; max-width: 905px; margin: 0 auto; font-size: 16px; line-height: 24px; z-index: 99 !important; }

.ThemeContext_line .rm-Header 			{ --Header-border-width: 1px !important; }

/**** Top Bar Navigation ***/
.rm-Container nav { padding-top: 0px !important; padding-bottom: 0px !important; }
.rm-Container .rm-Header-bottom-link { height: auto !important; }

/**** Left Navigation ***/
.rm-Sidebar  		    { padding: 10px; }
.rm-Sidebar h3.rm-Sidebar-heading { font-weight: 600; margin: 0px 0 8px 0px; position: relative; text-transform: uppercase; font-size: 14px; line-height: 21px; letter-spacing: .01em; padding-left: 8px; color: var(--color-text-default); }
.rm-Sidebar-link 	  { display: block; overflow: hidden; text-overflow: ellipsis; padding: 8px; margin: 2px; font-size: 14px; font-size: 15px !important; padding: 5px 0px; color: var(--color-text-muted) } 
.rm-Sidebar-link button { position: absolute; right: 5px; }
.rm-Sidebar-link.active { background-color: #FFD180 !important; color: white !important; border-radius: 4px; color: black !important; }

.rm-Sidebar-list li a span span { font-size: 14px; padding: 1px; }
.rm-Sidebar-list li a { padding-left: 5px !important; position: relative; }
.rm-Sidebar-list li a[class^=Sidebar-link_parent] { padding-left: 5px; }

.rm-Sidebar .rm-Sidebar-section .rm-Sidebar-heading   { padding: 0 0 10px 8px;}
/* .rm-Sidebar .rm-Sidebar-section .rm-Sidebar-heading:after { content: ""; position: absolute; left: 8px; bottom: 0; height: 1px; width: 40px; border-bottom: 1px solid #dce0e5; } */
.reference-redesign .Sidebar-link:active { background-color: #fff1eb !important; }

/**** Section Content ***/
.rm-Guides #content-head p { font-size: 14px; }
.rm-Guides #content-head .excerpt { margin-top: 5px; }

h1, h2, h3, h4 { font-family: Inter, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

h1.heading.heading-1, 
h2.heading.heading-2, 
h3.heading.heading-3 {
  line-height: 32px;
  margin: 32px 0 24px 0 !important;
  padding: 0px 0 0 0;
  clear: both;
  font-weight: 600;
  position: relative;
}

h2.heading.heading-2 {
  padding-top: 0px;
}

h4.heading.heading-4 {
  margin: 32px 0 24px 0;
  /* padding: 32px 0 0 0; */
}
.content-body .markdown-body > h1.heading-1:first-child {
  margin-top: 0px !important;
  padding-top: 0px !important;
}


/* h1.heading.heading-1 ~ p, h2.heading-2 ~ p, h3.heading-3 ~ p { margin-top: -10px !important; } */
.markdown-body ol li::marker { font-weight: 600; }
.markdown-body p  { margin: 16px 0 16px 0; line-height: 28px; }

.field-description li + li, .markdown-body li + li { line-height: 28px; }



/************ Table ***********/
.markdown-body .rdmd-table table  { border: 0px; }
.markdown-body table thead tr, .markdown-body table:not(.plain) tr:nth-child(2n) { background-color: transparent; }
.markdown-body table td, .markdown-body table th { border: 0px; font-size: 13px; }
.markdown-body .rdmd-table table th { border-bottom: 2px solid #cccccc; padding: 14px; }
.markdown-body .rdmd-table table td { padding: 10px; border-bottom: 1px solid #ddd; vertical-align: top; }


.markdown-body table td ul br ~ * { list-style: disc; }
.markdown-body table td ul { list-style-type: upper-alpha; }

blockquote .rdmd-table > .rdmd-table-inner > table thead { display: none; }
blockquote .rdmd-table > .rdmd-table-inner > table tbody tr, blockquote .rdmd-table > .rdmd-table-inner > table tbody tr td 
	{ border: 0px;  padding: 15px 6px; }
blockquote .rdmd-table > .rdmd-table-inner > table tbody td a { padding:10px; border-radius: 50px; background-color: var(--inverse-background); color: var(--text-color-light); text-decoration: none !important; font-size: 12px; transition: transform .3s; border:1px solid transparent; }
blockquote .rdmd-table > .rdmd-table-inner > table tbody td a:hover { transform: translateY(-8px); border:1px solid rgba(0,0,0,0.2); }

/**** Right Content ***/
ul.toc-list       { border-left: 1px solid #ddd; }
ul.toc-list li a  { padding-left: 8px; color: var(--color-text-minimum) !important; }
ul.toc-list li a strong { font-weight: 400 !important;}


/**** Buttons ***/
.rm-Header-bottom-link.Button:active  { box-shadow: none !important; border-color: #ddd !important; }
.rm-Header-bottom-link.active         { background-color: transparent; border-bottom: 2px solid salmon; border-radius: 0px; }
.rm-LandingPage .products-title       { margin: 60px 0 0; padding: 0; font-weight: 600; font-size: 20px; line-height: 30px; }
.rm-LandingPage .products             { display: flex; flex-wrap: wrap; margin-top: 4px; }
.rm-LandingPage .product-container    { padding: 24px 16px; background: #ffffff; height: 100%; display: flex; min-height: 115px; border-radius: 4px; color: #000000; border-radius: 5px; border: 1px solid #ddd; transition: 0.3s; }

.markdown-body h3.product-name            { margin-top: 0px !important; margin-bottom: 1.5rem;   position: relative; }
.markdown-body h3.product-name::before    { position: absolute; content: ''; width: 10%; bottom: 0; background: #f50056; height: 2px; left: 0; right: auto; margin: auto; border-radius: 30px; top: 35px; }
.rm-LandingPage .product-container:hover  { border: 1px solid #f0792c; transform: translateY(-5px); }
.rm-LandingPage a[href]                   { text-decoration: none; }
.rm-LandingPage .product-icon             { width: 60px; height: 60px; flex-shrink: 0; margin-right: 12px; }

@media (min-width: 768px) {
  .rm-LandingPage .products {
    margin-left: -10px;
    margin-right: -10px;
  }
  .rm-LandingPage .product {
    padding: 10px;
    width: 33.33%;
  }
}

.rm-LandingPage .products-title { margin-bottom: 14px; }


/**** cards ***/
/* .card { box-sizing: border-box; display: flex; flex-wrap: wrap; margin-top: 4px; border-radius: 0.25rem; position: relative; border: 1px solid #ddd; padding: 10px 19px; width: 33.33%; margin: 0 4% 4% 0; }
.card-header { background-color: transparent; align-items: stretch; box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); display: flex; }
.card-body { background-color: transparent; padding: 1.5rem; } */

.bd-cards                     { display: flex; flex-wrap: wrap; }
.bd-cards.cards-1 blockquote  { width: 100%; }
.bd-cards.cards-2 blockquote  { width: 49%; }
.bd-cards.cards-3 blockquote  { width: 32.33%; }

/***************** Callout general ******************/
.callout.callout { border-style: solid; border-width: 1px; border-color: var(--border); border-radius: 6px; }
.callout.callout_ok, .callout.callout_okay, .callout.callout_success 	{ --border: #c1d6a7 !important; }
.callout.callout_err, .callout.callout_error		{ --border: #fbb1b8 !important; }
.callout.callout_err, .callout.callout_error p 		{ line-height: 22px; }
.callout.callout_info 								{ --border: #9bd4d8; --background: #ecf8f8; }
blockquote.callout p:not(.callout-heading)      { margin-top: 0px; }


.bd-cards blockquote { } 
.bd-cards blockquote.callout.callout { background-color: white; box-shadow: 0px 0px 6px rgba(27, 33, 47, 0.05); border: 1px solid #ededed; }
[data-color-mode="dark"] .bd-cards blockquote.callout.callout { background: transparent; }
.bd-cards blockquote.callout.callout > * { margin-left: 0px; }
.bd-cards blockquote .callout-icon { display: none; }
.bd-cards blockquote { box-sizing: border-box; align-content: flex-start; position: relative; width: 48.73%; padding: 20px 10px 15px 85px; display: flex; flex-wrap: wrap; border: 0px solid #ddd; border-radius: 0.25rem; margin: 0 1% 2% 0; background-color: #F1F6FC; }
.bd-cards blockquote span.img      { position: absolute; top: 20px; left: 15px; width: 60px; }
.bd-cards blockquote p             { line-height: 22px; margin-bottom: 15px !important; width: 100%; margin-top: auto; }
.bd-cards blockquote p:last-child  { margin-bottom: 0px !important; }
/* display: flex; justify-content: space-between; */
.bd-cards blockquote p.callout-heading  { font-size: 20px; margin-bottom: 10px !important; display: block; }
.bd-cards blockquote p:first-child { font-size: 18px; font-weight: 550; width: 100%; min-height: 20px; margin-bottom: 0px !important; }
.bd-cards[class*="links-cols-2"] blockquote p      { display: flex; justify-content: space-between; align-items: flex-start; }
.bd-cards[class*="links-cols-2"] blockquote p a    { display: flex; align-items: center; }
/* .bd-cards blockquote p a           { display: flex; align-items: center; } */

.bd-cards blockquote a, .bd-cards blockquote a:hover, .bd-cards blockquote a:visited, .bd-cards blockquote a:active, .markdown-body a[href], .markdown-body a:not([href='']) { color: rgb(0, 105, 194); }

[data-color-mode="dark"] .bd-cards blockquote a, [data-color-mode="dark"] .bd-cards blockquote a:visited, [data-color-mode="dark"] .bd-cards blockquote a:active, [data-color-mode="dark"] .markdown-body a[href], [data-color-mode="dark"] .markdown-body a:not([href='']) { text-decoration: underline; }

[data-color-mode="dark"] .bd-cards blockquote a:hover, [data-color-mode="dark"] .markdown-body a[href]:hover,  [data-color-mode="dark"] .markdown-body a:not([href='']):hover { text-decoration: none !important ; } 

[data-color-mode="dark"] .bd-cards blockquote.callout.callout { border-color: #4c4c4c; }

.bd-cards blockquote a:hover       { text-decoration: underline !important; }
.bd-cards blockquote:last-child    { margin-bottom: 2% !important; }
.bd-cards.cards-1.card-image-top-full span.img { max-height: 130px; width: auto; }
.bd-cards.cards-1.card-image-top-full span.img img { height: 130px; }
.bd-cards.cards-2.card-image-top-full span.img { 
  top: -1px;
  position: absolute;
  width: 100%;
  left: 0px;
  height: 140px;
}
.bd-cards.card-image-top-full blockquote { padding-top: 160px; }

.bd-cards.text-left p { text-align: left !important; } 

.bd-cards.card-image-left blockquote { padding-left: 90px !important; padding-right: 10px !important; }
.bd-cards.card-image-top blockquote { padding-top: 100px !important; padding-left: 1.35rem !important; }
.bd-cards.card-image-top blockquote p.callout-heading { display: block; margin: 20px 0px 10px auto !important; }
.bd-cards.card-image-top h2.callout-heading { width: 100%; }
.bd-cards.card-image-top blockquote p { width: 100%; text-align: center; margin-left: 0px !important; }
.bd-cards.card-image-top blockquote p a { text-align: left; }
.bd-cards.card-image-top blockquote span.img { left: 50% !important; transform: translate(-50%, 0%) !important; margin-left: 0px !important; }
.bd-cards.links-cols-2 blockquote p a  { width: 50%; }
.markdown-body code:not(.lang-html) > div[class*="cm-"] { white-space: pre-wrap; word-wrap: break-word; padding: 8px 0px 0px 0px; }


ol li > strong { margin-bottom: 10px; }


/**** code blocks ***/

.CodeTabs-toolbar { background: #121923; }
.CodeTabs-toolbar button { padding: 1rem; font-size: .900rem; }
.CodeTabs         { color: var(--md-code-text, white); border-radius: 0.9rem !important; box-shadow: var(--box-shadow-request, 0 1px 2px rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.02));  }

[data-color-mode="dark"] .CodeTabs { border: 1px solid rgba(255,255,255,0.1); }

.CodeTabs pre {
  background: #282d44;
}
.markdown-body pre { margin-bottom: 0px !important; }
.markdown-body pre > code { background-color: #282d44 !important; font-size: 110%; color: rgba(255, 255, 255, 0.80); }

.CodeTabs-toolbar button.CodeTabs_active, .theme-light .CodeTabs-toolbar button.CodeTabs_active {
  background: #282d44 !important;
  color: white  !important;
  color: var(--md-code-text, white);
  box-shadow: inset 0px 3px #ff8a00;
}
.CodeTabs.CodeTabs_initial .CodeTabs-toolbar button:first-child, .CodeTabs-toolbar button.CodeTabs_active { 
	background: #282a36;
	background: var(--md-code-background, #282a36);
}


:root {
  --editor-top-bar-background: black;
  --tab-bg: #131417;
  --tab-border-color: #2a2c33;
  --resizer-background: var(--editor-top-bar-background);
  --resizer-border: #242424
}

.theme-light .cm-header { font-weight:700 }
.theme-light .cm-strong { font-weight:700 }
.theme-light .cm-em { font-style:italic }


.theme-light .CodeMirror-cursor { border-left-color:#fff!important }
.theme-light .cm-fat-cursor .CodeMirror-cursor { background:#13ff0f!important; border-left-color:transparent!important; opacity:.5 }
.theme-light .CodeMirror-selected { background:rgba(255,255,255,.05) }
.theme-light .CodeMirror-focused .CodeMirror-selected { background:rgba(255,255,255,.1) }
.theme-light .CodeMirror-matchingbracket { border-bottom:1px solid rgba(255,255,255,.5) }
.theme-light .CodeMirror-matchingtag { border-bottom:1px solid rgba(255,255,255,.3) }
.theme-light .cm-searching { background:#000; outline:2px solid rgba(255,255,255,.25) }

.CodeMirror-hints,
.emmet-abbreviation-preview {
  border:1px solid #5a5f73;
  background:#1e1f26
}

.CodeMirror-hint {
  color:#fff
}

li.CodeMirror-hint-active {
  background:#c7c9d3;
  color:#000
}

.project-editor-warning {
  background:rgba(255,255,255,.1)
}

.editor-footer {
  border-top-color:var(--resizer-border,var(--cp-color-6))
}

.theme-light .cm-keyword        { color:#ffdd40; }
.theme-light .cm-s-neo .cm-atom { color:#a3d65a  }
.theme-light .box-html .cm-atom { color:#ff3c41  }
.theme-light .cm-s-neo .cm-def  { color:#0ebeff  }
.theme-light .cm-s-neo .cm-variable { color:#c7c9d3 !important;   }
.theme-light .cm-s-neo .cm-variable-2 { color:#47cf73 !important; }
.theme-light .cm-s-neo .cm-variable-3 { color:#fff !important; }
.theme-light .cm-s-neo .cm-header     { color:#ff3c41 !important; }
.theme-light .cm-s-neo .cm-number     { color:#2bc7b9 !important; }
.theme-light .cm-s-neo .cm-property   { color:rgb(214, 222, 235) !important; padding-top: 0.8px !important; }
.theme-light .cm-s-neo .cm-attribute  { color:#e3e4e8 !important; }
.theme-light .cm-s-neo .cm-builtin { color:#ae63e4 }
.theme-light .cm-s-neo .cm-qualifier { color:#ffdd40 }
.theme-light .cm-operator { color:#47cf73 }
.theme-light .cm-meta { color:#0ebeff }
.theme-light .cm-s-neo .cm-string { color:#ffdd40 !important; }
.theme-light .cm-s-neo .cm-string-2 { color:#d75093 !important; }
.theme-light .cm-s-neo .cm-tag { color:rgb(128, 203, 196) !important; }
.theme-light .box-css .cm-tag { color:#ff8d41 }
.theme-light .cm-tag.cm-bracket { color:#9b9dad }
.theme-light .cm-s-neo .cm-comment { color:#88afbf; margin-top:15px; display:inline-block; }
.theme-light .cm-s-neo .cm-comment + .cm-comment { margin-top: 0px; }
.theme-light body.editor { background:#131417 }
.theme-light .box.box.box,
.theme-light .editor .top-boxes,
.theme-light .CodeMirror-gutter-wrapper,
.theme-light body.project .editor-pane,
.theme-light body.project .editor {
  background:#131417
}

.box.box.box pre,
.editor .top-boxes pre,
.CodeMirror-gutter-wrapper pre,
body.project .editor-pane pre,
body.project .editor pre {
  color:#d5d7de
}
.CodeMirror-guttermarker-subtle,
.CodeMirror-linenumber {
  color:rgba(113,119,144,.6)
}
#output pre,
#output iframe {
  scrollbar-color:#373c49 transparent
}
#output pre::-webkit-scrollbar,
#output iframe::-webkit-scrollbar {
  width:10px;
  height:10px
}
#output pre::-webkit-scrollbar-thumb,
#output iframe::-webkit-scrollbar-thumb {
  background:#373c49;
  border-radius:1px
}
#output pre::-webkit-scrollbar-track,
#output iframe::-webkit-scrollbar-track {
  background:0 0
}
.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
  background:#373c49
}
.powers .mini-button {
  background:#444857
}
.powers .mini-button:hover,
.powers .mini-button:focus {
  background:#c7c9d3
}
.powers .mini-button:hover svg,
.powers .mini-button:focus svg {
  fill:#000
}

.flex-cards { display: flex; }

section.hero-banner, section.landing-page, section.developer-tools {
  width: 100%;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  position: relative;
  box-sizing: border-box;
  align-content: center;

  padding: 30px 0px;
  --Param-color: var(--color-text-default);
  color: var(--Param-color);
}

source {
  background: transparent url(./blurry.png) no-repeat center right -300px;
  width: 99.1%;
  height: 1000px;
  position: absolute;
  z-index: -10;
  top: 0px;
  background-position-y: -400px;
}

section div.section-container {
  max-width: 1140px;
  margin: 0 auto;
}

section div.section-container h3    { margin-bottom: 20px; }
section a.section-more-button  { background-color: #f47524; padding: 15px 20px; border: 0px; z-index: 71; border-radius: 30px;
color: white !important; color: var(--white); font-size: 15px; font-weight: 550; letter-spacing: 0.02rem; height: 50px; margin: 30px 0px; display: inline-block; text-decoration: none; cursor: pointer; }

section.hero-banner header, section.hero-banner article    { display: flex; align-items: end; justify-content: space-between; }
section.hero-banner header > div h5 { border: 1px solid var(--color-border-default); padding: 10px; display: inline-block; border-radius: 5px; font-weight: 400; }
section.hero-banner header > div h1 { font-size: 45px; font-weight: 700; margin: 0px 0px 25px 0px; }
section.hero-banner header > div p  { font-size: 16px; line-height: 30px; max-width: 650px; }
section.hero-banner header img.documentations { margin-left: 100px; }

section article.cards-3  { display: flex; flex-wrap: nowrap; box-sizing: border-box; align-content: flex-start; justify-content: space-around; position:  relative; }

.markdown-body pre button.rdmd-code-copy { right: 15px; cursor: pointer; border: 1px solid rgba(134, 129, 129, 0.54); }
.root-directory code.theme-light > span.cm-s-neo { color: #e8e7e7; }

section article.cards-3 .cards  { 
  width: 31.5%; box-sizing: border-box; margin-right: 20px; padding: 25px; border-radius: 7px; box-shadow: 0px 5px 35px 0px rgba(30, 34.00000000000001, 40, 0.07);
  -webkit-transition: transform .3s; transition: transform .3s;
  background-color: var(--background-accept-cards);
}

section article.cards-3.callout.callout .callout-heading {
	min-height: 44px;
}

[data-color-mode="dark"] section article.cards-3 .cards {
  box-shadow: 0px 5px 35px 0px rgba(221, 221, 221, 0.07)
}
[data-color-mode="dark"] section article .cards.online-payment    { border-bottom: 5px solid var(--sanbox-online-lineal-fill); }
[data-color-mode="dark"] section article .cards.recurring-payment { border-bottom: 5px solid var(--sanbox-recurring-lineal-fill); }
[data-color-mode="dark"] section article .cards.platforms-plugins { border-bottom: 5px solid var(--sanbox-platform-lineal-fill); }

section article.cards-3 .cards:hover { transform: translateY(-8px); }
section article .cards p { font-size: 14px; line-height: 22px; }
html[data-color-mode="dark"] section article .cards p { opacity: 0.70; }
section article .cards ul { margin: 0px; padding-left: 20px; }
section article .cards ul li { margin: 5px 0px; }
section article .cards ul li a  { font-size: 15px; color: var(--color-text-default); border-bottom: 1px solid; cursor: pointer; }
html[data-color-mode="dark"] section article .cards ul li a { opacity: 0.70; }
section article .cards ul li a:hover { color: var(--color-text-default); border-bottom: 0px; }
section article .cards .row  { display: flex; flex-wrap: wrap; }
section article .cards .col-6  { width: 49.5%; }
section article .cards .card-heading  svg { height: 46px; }
section article .cards .card-footer { display: flex; padding: 10px 0px 0px; }


section article .cards.online-payment     { border-bottom: 5px solid #fee9cd; padding: 20px; }
section article .cards.online-payment a.learn-more, section article .cards.online-payment a.learn-more:hover, section article .cards.online-payment a.learn-more:active { color: #f8a61c; cursor: pointer; }

section article .cards.recurring-payment  { border-bottom: 5px solid #c7ede3; padding: 20px; }
section article .cards.recurring-payment a.learn-more, section article .cards.recurring-payment a.learn-more:hover, section article .cards.recurring-payment a.learn-more:active { color: #45c4a0; }

section article .cards.platforms-plugins  { border-bottom: 5px solid #c5d7f6; padding: 20px; }
section article .cards.platforms-plugins a.learn-more, section article .cards.platforms-plugins a.learn-more:hover, section article .cards.platforms-plugins a.learn-more:active { color: #005aff; }

section article .cards a.learn-more { font-size: 16px; text-decoration: none; display: block; margin-top: 15px; font-weight: 500; -webkit-transition: padding .3s; transition: padding .3s; }
section article .cards a.learn-more:hover { padding-left: 6px; }

section article.card-no-padding h1 { margin: 0px; font-family: Inter; font-size: 19px; font-weight: 500; }
section article.card-no-padding a.cards { color: #000; cursor: pointer; }
section article.card-no-padding a.cards:hover { transform: translateY(0px); background-color: #fff; box-shadow: 0 5px 35px rgba(30, 34, 40, 0.07); }
section article.card-no-padding .cards { padding: 0px; box-shadow: none; padding: 28px 24px; }
section article.card-no-padding .cards:nth-child(2) { background-color: #fff; box-shadow: 0 5px 35px rgba(30, 34, 40, 0.07);}
section article.card-no-padding .cards svg { width: 150px; height: 60px; margin-right: 15px; }
section article.card-no-padding .cards p { margin-bottom: 0px; }

section.developer-tools { background-color: var(--background-section); padding: 100px 0px; margin-top: 50px; }
section.developer-tools div.section-container > div:first-child { width: 25%; display: flex; flex-flow: wrap; align-content: space-between; }
section.developer-tools div.section-container > div:first-child a { text-decoration: none !important; color: white; }
section.developer-tools div.section-container > article         { width: 75%; }
section.developer-tools div.section-container > article h1      { padding-top: 20px; font-size: 19px; font-weight: 600; }
section.developer-tools div.section-container > article h1::before    { position: absolute; width: 50px; height: 2px; content: ""; background: black;  top: 30px; }
section.developer-tools div.section-container .cards            { cursor: pointer; color: var(--color-text-default); }
section.developer-tools div.section-container .cards:hover      { background-color: rgb(249, 215, 131); color: var(--text-color-dark-revers); }
section.developer-tools div.section-container .cards span       { color: var(--color-text-default); font-size: 16px; }
section.developer-tools div.section-container .cards:hover span.learn-more { color: var(--text-color-dark-revers); }
section.developer-tools div.section-container .card-footer      { position: relative; display: flex; justify-content: space-between; align-items: center; }
section.developer-tools div.section-container .card-footer .detail-arrow { 
  border-radius: 100%; background-color: #000; color: white; width: 50px; height: 50px; 
  padding: 15px 16px;
  transition: 0.4s ease-in-out;
  overflow: hidden;
}

section.developer-tools div.section-container .cards .detail-arrow b        { transition: all 0.4s ease-in-out; }
section.developer-tools div.section-container .cards:hover .detail-arrow b  { transform: translate(19px, 0px); position: absolute; opacity: 0; }

.detail-arrow::before {
  opacity: 1;
  content: "\2197";
  position: absolute;
  /* background: url(../images/arrow-transform-black.svg); */
  background-repeat: repeat;
  background-repeat: no-repeat;
  right: 0;
  top: 0;
  height: 100%;
  width: 42px;
  opacity: 0;
  transform: translate(-5px, 35px);
  transition: all 0.4s ease-in-out;
  color: black;
  font-size: 25px;
  font-weight: 700;
}
section.developer-tools div.section-container .cards:hover .card-footer .detail-arrow { background-color: white; }
section.developer-tools div.section-container .cards:hover .detail-arrow::before {
  transform: translate(4px, 20px);
  opacity: 1;
}

section.api-play-ground { padding: 100px 0px; margin: 0px;}
section.api-play-ground div.section-container { display: flex; }
section.api-play-ground div.section-container article { width: 100%; min-height: 350px; }
section.api-play-ground div.section-container div:first-child { display: flex;
  flex-flow: wrap;
  align-content: space-between; 
  position: relative;
}
section.api-play-ground div.section-container div:first-child section h1 { font-size: 28px; line-height: 35px; font-weight: 600; }
section.api-play-ground div.section-container div:first-child p { width: 50%; line-height: 28px; font-size: 17.2px;  }
section.api-play-ground div.section-container div:first-child svg { position: absolute; bottom: 20px; left: 30%; }

section.faq-section { padding: 50px 0px; margin-top: 0px; background-color: var(--background-section); }
section.faq-section div.section-container { text-align: center; }
section.faq-section div.section-container h6 { margin:8px 0px; font-size: 14px; }
section.faq-section div.section-container h1 { width: 600px; margin: 20px auto; line-height: 36px; font-weight: 500; font-size: 24px; }
section.faq-section .faq-content { width: 550px; margin: 0 auto; display: flex; flex-wrap: nowrap; align-content: center; flex-direction: column; }
section.faq-section summary { background-color: var(--background-accept-cards); border-radius: 10px; padding: 15px; margin: 5px auto; cursor: pointer; font-size: 16px; }
section.faq-section details p { font-size: 15px; line-height: 28px; }
section.faq-section .section-view-more { text-align: right; font-size: 14px; margin: 15px 0px; }
section.faq-section .section-view-more a { color: var(--color-text-muted); }
section.faq-section .section-view-more a { transform: translateX(10px);}
.card-placeholder { border-radius: 10px; background-color: #f1f1f1; }

section.page-footer { padding: 20px 0px; border-top: 1px solid var(--color-border-default); background-color: var(--background-section); }
section.page-footer .card-footers .cards { background: transparent; box-shadow: none;}
section.page-footer .card-footers .cards:hover { transition: none !important; transform: translateY(0px);}

section.page-footer .card-footers .cards h2 { font-size: 16px; font-weight: 700; }
section.page-footer .card-footers .cards ul { margin-left: 0px; padding-left: 0px; }
section.page-footer .card-footers .cards ul li  { list-style: none; margin-left: 0px; padding-left: 0px; }
section.page-footer .card-footers .cards ul li a { color: var(--color-text-default); text-decoration: none !important; border: 0px; }
section.page-footer .card-footers .cards ul li a:hover { border-bottom: 1px solid #000; }
section.page-footer .card-footers .cards > a { font-size: 14px; color: var(--white); text-decoration: none !important; padding: 10px 10px; border-radius: 5px; border: 1px solid #dadada; cursor: pointer; display: inline-block; background-color: #f47524; }

.fill-primary       { fill: #3f78e0; }
.lineal-fill-split  { fill: #8FDCC6; }

div.online-payment .lineal-fill           { fill: var(--sanbox-online-lineal-fill);     }
div.recurring-payment .lineal-fill        { fill: var(--sanbox-recurring-lineal-fill);  }
div.platforms-plugins .lineal-fill        { fill: var(--sanbox-platform-lineal-fill);   }
html[data-color-mode="dark"] .lineal-stroke      { fill: white; }


ul.toc-list li.toc-children ul { position: relative; }
ul.toc-list li.toc-children ul:before { position: absolute; top:0px; bottom: 0px; width: 2px; background-color: #2bc7b9; }
ul.toc-list li.toc-children ul li ul { position: relative; }
/* ul.toc-list li.toc-children ul li ul::before { position: absolute; content: ""; width: 1px; left: 0px; top: 0px; bottom: 0px; width: 1px; background: transparent; border-left: 2px dotted #ddd; }  */
ul.toc-list li.toc-children ul li ul li { position: relative; margin-left: 10px; }
ul.toc-list li.toc-children ul li ul li::before { position: absolute; content: "\21A6"; left: 0px; top: 2px; }
ul.toc-list li.toc-children ul li ul li::after { position: absolute; content: ""; left: 8px; top: 0px; width: 1px; border-left: 2px dotted #ddd; }
ul.toc-list li.toc-children a:hover { font-weight: 700; }

section a.section-more-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(30, 34, 40, 0.15);
}
section a.section-more-button { transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
/* section a.section-more-button::before {
  position: absolute;
  content: "";
  border-radius: inherit;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 102% 102%;
  opacity: 0;
}

section a.section-more-button::after{
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  top: 50%;
  opacity: 0;
  transform: translate(0,100%);
  transition: opacity .2s,transform .2s;
    transition-timing-function: ease, ease;
  transition-timing-function: cubic-bezier(.455,.03,.515,.955);
  white-space: nowrap;
} */





.theme-light .cm-keyword { color: #ddca7e }
.theme-light .cm-atom { color: #ddca7e }
.theme-light .box-html .cm-atom { color: #96b38a }
.theme-light .cm-number { color: #d0782a }
.theme-light .cm-unit { color: #d0782a }
.theme-light .cm-def {  color: #809bbd }
.theme-light .cm-variable { color: #ddca7e }
.theme-light .cm-variable-2 {color: #809bbd }
.theme-light .cm-property { color: #9a8297 }
.theme-light .cm-operator { color: #ccc }
.theme-light .cm-comment { color: #717790 }
.theme-light .cm-string { color: #96b38a }
.theme-light .cm-string-2 { color: #96b38a }
.theme-light .cm-meta { color: #9a8297 }
.theme-light .cm-header { color: #ff6400 }
.theme-light .cm-tag { color: #a7925a }
.theme-light .box-css .cm-tag { color: #ddca7e }
.theme-light .cm-attribute { color: #ddca7e }
.theme-light .cm-strong { color: #ddca7e }
.theme-light .cm-em { color: #ddca7e }
.theme-light .cm-qualifier { color: #ddca7e }
.theme-light .cm-builtin {  color: #ddca7e }



@media (max-width: 768px) {
  section.hero-banner header img.documentations { display: none; }
  section.hero-banner, section.landing-page, section.developer-tools { padding-left: 20px; padding-right: 20px; }
  section.section-container article.cards-3  { flex-direction: column; }
  section.section-container article.cards-3 .cards { width: 100%; margin-bottom: 20px; }
  section article.cards-3.callout.callout .callout-heading, .callout.callout .callout-heading { width: 100%; }

  .bd-cards blockquote { padding: 80px 0.75rem 0.75rem 0.75rem !important; }
  .bd-cards blockquote p { text-align: center !important; width: 100%; }
  .bd-cards blockquote span.img { left: 50% !important; top: 10px; transform: translate(-50%, 0%) !important; margin-left: 0px !important; }
  .bd-cards blockquote.callout.callout > * { margin-left: 0px !important; }

  .bd-cards.cards-3 blockquote { width: 100% !important; }
  .bd-cards.card-image-left blockquote { padding-left: 5px !important;}
}

@media (max-width: 640px) {
	
	section.hero-banner header > div h1 { font-size: 40px; }
	.bd-cards[class*="links-cols-2"] blockquote p      { display: flex; justify-content: space-around; align-items: flex-start; }
	.bd-cards[class*="links-cols-2"] blockquote p a		{ justify-content: space-around; }
	
	.bd-cards.cards-1 { margin-bottom: 15px; }
	section.landing-page article.cards-3, section.api-play-ground div.section-container	{ display: flex; flex-direction: column; }
	section.landing-page article.cards-3 .cards	{ width: 100%; margin-bottom: 20px; }
	section.api-play-ground div.section-container div:first-child p 	{ width: 90%; }
	section.api-play-ground div.section-container div:first-child svg 	{ bottom: 30px; left: 60%; }
	section a.section-more-button { margin-top: 10px; }
	
	section.developer-tools div.section-container > article, section.developer-tools div.section-container > div:first-child 	{ width: 100%; }
	section.developer-tools div.section-container.flex-cards	{ display: block;  }
	
	section.api-play-ground, section.developer-tools { padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; }
	
	.bd-cards.cards-1.card-image-top-full span.img { width: 100%; top: 0px; }
	.bd-cards.cards-1.card-image-top-full span.img img { height: 130px; }
	.bd-cards.cards-1.card-image-top-full blockquote { padding-top: 145px !important; }
	
}