/* ======================================================= */
/* Custom Properies */
/* ======================================================= */
:root {
    --color-bg-hero: #f4f6f9;
    --color-bg-hero-dark: #d5e8f0;
    --color-bg-section: #ffffff;
    --color-bg-section-shade: #f4f5f6;
    --color-bg-footer: #f7f7f7;
    --color-bg-card: #e4f2f8;
    --color-bg-search: #f4f5f6;
    --color-text-link-footer: #707070;
    --primary-color-blue: #026d97;
    --primary-color-darkblue: #16325c;
    --primary-color-blue-highlight: #def1fa;
    --spotlight-bg: #ffffff;
    --sidebar-width: 250px;
    --sidebar-width-full: 300px;
    --border-gray: #eee solid 2px;
    --card-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --trigger-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    --nav-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

    /* button colors */
    --button-color: #ffffff;
    --button-color-bg: #02a0e0;
    --button-color-bg-active: #007aac;
    --button-brand-color-bg: #c23934;
    --button-brand-color-bg-active: #a12b2b;

    /* alert colors */
    --important-border: #e0002e;
    --important-background: #ffe6e5;
    --note-border: #02a0e0;
    --note-background: #e2f4fc;
    --tip-border: #00b462;
    --tip-background: #e1f6ed;
    --warning-border: #f1a019;
    --warning-background: #f8f2e7;
}

/* ======================================================== */
/* Common Elements */
/* ======================================================== */
*,
:after,
:before {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
        sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    box-sizing: border-box;
}

body {
    background: white;
    color: var(--primary-color-darkblue);
    margin: 0;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;
}

header,
main,
footer {
    flex-shrink: 0;
}
footer .links img {
    height: 0.75em;
    margin-right:0.25em;
}

a {
    color: var(--primary-color-blue);
    text-decoration: underline;
    border: none;
}

a:hover {
    background-color: var(--primary-color-blue-highlight);
}

dl,
ol,
ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--primary-color-darkblue);
    line-height: 1.25;
}

h1 {
    font-size: 1.4rem;
    font-weight: 300;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size: 1.2rem;
}

h1 a,
h2 a,
h3 a,
h4 a {
    border: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
    background-color: unset;
    border: none;
}

button {
    background-color: var(--button-color-bg);
    border: none;
    display: inline-block;
    border-radius: 0.4rem;
    padding: 0.5rem 3rem;
    color: var(--button-color);
    font-size: 1.4rem;
}

button + button {
    margin-left: 10px;
}

button:hover,
button:focus,
button:active,
button:visited {
    text-decoration: none;
}

button:active,
button:hover,
button:focus {
    background-color: var(--button-color-bg-active);
}

button.brand {
    background-color: var(--button-brand-color-bg);
}

button.brand:active,
button.brand:hover,
button.brand:focus {
    background-color: var(--button-brand-color-bg-active);
}

.card {
    padding: 1rem;
    margin: 1rem;
    flex: 1;
}

.card-shade {
    background-color: var(--color-bg-card);
    border-radius: 5px;
    padding: 1rem 2rem;
}

.flex-wrapper {
    display: block;
}

article {
    flex: 1;
    padding: 2rem;
    overflow: auto;
    padding-top: 1rem;
    font-size: 1.1rem;
}

article ul li {
    color: var(--primary-color-darkblue);
}

article h1 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    text-indent: -1.7rem;
    padding-left: 1.7rem;
}

article h2 {
    text-indent: -1.6rem;
    padding-left: 1.5rem;
}
article a {
    border-bottom: dotted 1px;
}

article h1 a,
article h2 a,
article h3 a {
    border: none;
}

.blog article {
    max-width: unset;
}

@media screen and (min-width: 48em) {
    article {
        padding-left: 4rem;
        padding-right: 2.3rem;
    }

    .blog article {
        padding-left: 3rem;
    }

    body {
        display: flex;
    }

    .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    .flex-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media only screen and (min-width: 55em) {
    article h1 {
        font-size: 3rem;
    }
}

/* ======================================================== */
/* HEADER */
/* ======================================================== */
.header {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.header a:hover,
.header a:active {
    background-color: transparent;
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
}

.header li {
    margin-bottom: 0;
}

.header li a {
    display: block;
    padding: 0;
    margin: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-color);
}

.header li a:hover,
.header .menu-btn:hover {
    color: #1b96ff;
}

.header .logo {
    display: block;
    float: left;
    text-decoration: none;
    padding: 15px 10px 0;
}

.header .icon-logo {
    display: inline-block;
    width: 40px;
    height: 36px;
    vertical-align: middle;
}

.header .title {
    display: none;
    vertical-align: middle;
}

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.header .menu-icon {
    cursor: pointer;
    float: right;
    padding: 32px 20px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked ~ .menu {
    max-height: 260px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

@media screen and (min-width: 48em) {
    .header .logo {
        padding: 5px;
    }

    .header .title {
        display: inline-block;
    }

    .header li {
        float: left;
    }

    .header li a {
        margin: 22px 30px;
        font-weight: 300;
    }

    .header .menu {
        clear: none;
        float: right;
        max-height: none;
        padding-right: 40px;
    }

    .header .menu-icon {
        display: none;
    }

    .header .menu li.active {
        box-shadow: inset 0 -4px 0 var(--primary-color-blue);
    }
}

@media screen and (min-width: 55em) {
    .header .logo {
        padding: 5px 0;
    }
}

@media (min-width: 65em) {
    .header .menu {
        padding-right: 48px;
    }
}

.navbar-right {
    display: flex;
    float: right;
}

.github-corner::before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
    content: "";
    margin-right: 0px;
    height: 32px;
    width: 32px;
    margin-top: 20px;
    float: left;
}

.github-corner:hover::before {
    /* filter computed using: https://codepen.io/sosuke/pen/Pjoqqp  from the a:hover hex color*/
    filter: invert(43%) sepia(82%) saturate(2095%) hue-rotate(190deg) brightness(103%) contrast(102%);
}

@media screen and (max-width: 48em) {
    .github-corner {
        display: none
    }
}

/* search */
.search-box {
    margin: 16px 0 0;
    padding-right: 24px;
    float: right;
}

.search-input {
    width: 0;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--primary-color-darkblue);
    font-size: 1.1rem;
    font-weight: 300;
    font-family: inherit;
    position: relative;
    padding: 4px 4px 4px 34px;
    margin: 0;
    background-image: url(/public/assets/images/search.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 4px;
    transition: width 0.2s ease, padding 0.2s ease;
    cursor: pointer;
}

.search-input:focus {
    width: 170px;
    background-color: var(--color-bg-search);
    outline: none;
}

/*
 * Override Doc Search styling in a less intrusive way once documented:
 * https://docsearch.algolia.com/docs/styling
 */
.DocSearch-Button:hover {
    box-shadow: inset 0 0 0 2px #1b96ff !important;
}

.DocSearch-Button-Key {
    font-size: 15px;
}

.DocSearch-Button-Key:nth-of-type(1) {
    padding-top: 3px;
}

.DocSearch-Button-Key:nth-of-type(2) {
    font-size: 13px;
    padding-top: 1px;
}

.ds-dropdown-menu {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

@media screen and (min-width: 48em) {
    .ds-dropdown-menu {
        position: absolute !important;
        width: auto !important;
        min-width: 500px !important;
    }
}

@media (min-width: 65em) {
    .search-box {
        margin-top: 18px;
        padding-right: 2em;
    }
}

/* ======================================================== */
/* FOOTER */
/* ======================================================== */
.footer {
    background-color: var(--color-bg-footer);
    padding: 2rem;
}

.footer .flex-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.footer .copyright {
    margin-bottom: 20px;
}

.footer .links {
    font-size: 1.15rem;
    line-height: 2.2rem;
}

.footer .sf-links {
    flex: 1 1 70%;
}

.footer .social-links {
    flex: 1 1 30%;
}

.footer .footer-sfdc-logo {
    width: 100px;
}

.footer h4 {
    margin-top: 0;
    text-transform: uppercase;
}

.footer li {
    list-style: none;
    margin: 0;
}

.footer li a {
    color: var(--color-text-link-footer);
}

.footer li a:hover {
    color: var(--primary-color-blue);
}

@media screen and (min-width: 48em) {
    .footer .copyright {
        flex: 1 1 50%;
    }

    .footer .sf-links {
        flex: 1 1 30%;
    }

    .footer .social-links {
        flex: 1 1 20%;
    }

    .footer {
        padding-bottom: 5rem;
    }
}

/* ======================================================== */
/* Hero */
/* ======================================================== */
section.hero {
    background-color: var(--color-bg-hero);
}

.hero .flex-wrapper {
    flex-wrap: nowrap;
}

.hero .title {
    font-weight: 100;
    padding: 0;
    margin-top: 0;
    text-indent: 0;
}

.hero .subtitle {
    font-size: 1.1rem;
    line-height: 1.8rem;
}

.center-content {
    display: none;
}

.hero .left-content,
.hero .right-content {
    padding: 20px 30px;
}

.hero .left-content {
    text-align: center;
}

.hero .right-content {
    background-color: var(--color-bg-hero-dark);
}

.hero .description {
    padding: 0.25rem 1rem;
    margin-top: 2rem;
    text-align: left;
}

.hero .left-content .description {
    border-left: 5px solid #fff;
    font-size: 1rem;
}

.hero .right-content .description {
    text-align: center;
}

.hero .thunder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

.hero code {
    margin: 0 0.2rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.hero pre {
    overflow: auto;
    margin-bottom: 0;
}

.hero pre > code {
    display: block;
    white-space: pre;
    text-align: left;
}

@media (min-width: 65em) {
    .home section.hero {
        padding: 4rem;
    }

    .hero .title {
        font-size: 2.5rem;
    }

    .hero .subtitle {
        font-size: 1.2rem;
    }

    .hero .left-content {
        background-color: transparent;
        flex: 1 1 30%;
        padding: 80px 30px;
    }
    .hero .left-content .description {
        font-size: 1.1rem;
    }
    .hero .center-content {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex: 1 1 30%;
    }

    .hero .right-content {
        background-color: transparent;
        margin: auto 0;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex: 1 1 30%;
    }

    .hero pre > code {
        font-size: 1.3rem;
    }
}

/* ======================================================== */
/* Other homepage content */
/* ======================================================== */
.home article {
    padding: 0;
}

.home .learn {
    margin: 0 auto;
}

.home section {
    padding: 1rem;
}

.home section.hero {
    padding: 0;
}

.home section.shade {
    padding: 2rem;
    background: var(--color-bg-section-shade);
    text-align: center;
}

.home section h3 {
    font-size: 1.7rem;
}

.home section h4 {
    font-size: 1.4rem;
    margin: 1rem 0;
}

h3.benefitsHeading {
    text-align: center;
}

.spotlight {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: auto;
    border-radius: 50%;
    background: var(--spotlight-bg);
    width: 190px;
    height: 190px;
    margin: 10px auto;
}

.secondCard {
    border-top: var(--border-gray);
    border-bottom: var(--border-gray);
    border-left: none;
    border-right: none;
}

@media screen and (min-width: 48em) {
    .home .learn {
        max-width: 600px;
    }

    h2.title {
        font-size: 2.5rem;
        margin-top: unset;
    }

    .secondCard {
        border-top: none;
        border-bottom: none;
        border-left: var(--border-gray);
        border-right: var(--border-gray);
    }
}

/* ======================================================== */
/* NOT FOUND */
/* ======================================================== */

.notfound .content-wrapper {
    padding: 50px;
    text-align: center;
}

/* ======================================================== */
/* NAV */
/* ======================================================== */

.nav {
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: calc(-1 * (var(--sidebar-width) + 10px));
    width: var(--sidebar-width);
    transition: margin 0.2s ease;
    box-shadow: var(--nav-box-shadow);
    background-color: #f6f4f4;
    z-index: 10;
}
.nav.open {
    margin-left: 0;
}
.home .nav-trigger {
    display: none;
}
.nav-trigger {
    position: fixed;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color-blue-highlight) !important;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: var(--trigger-box-shadow);
    z-index: 9;
}

.nav-trigger.open > svg {
    display: none;
}

.nav-trigger.open:after {
    content: 'X';
    font-weight: bold;
    color: var(--primary-color-darkblue);
    font-size: 1.7rem;
}

@media screen and (min-width: 48em) {
    .nav {
        position: sticky;
        top: 5px;
        align-self: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 100vh;
        bottom: 0;
        display: block;
        margin: 7px 0 0;
        box-shadow: none;
        background-color: transparent;
    }
    .nav-trigger {
        display: none;
    }
}

@media screen and (min-width: 55em) {
    .nav {
        width: var(--sidebar-width-full);
    }
}

.nav input {
    display: none;
}

.nav ol,
.nav ul,
.nav li {
    list-style: none;
    margin: 0;
}

.nav label {
    margin: 0;
    cursor: pointer;
    font-weight: 300;
    line-height: 0.8rem;
    color: #111;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

.nav a,
.nav label {
    color: #333;
}

.nav label > .icon-angle,
.nav label > a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav label a {
    padding: 1.3rem;
    flex-grow: 1;
}

nav li.active label {
    background-color: var(--primary-color-blue);
}

nav li.active label a {
    color: #fff;
}

nav li.active label:hover {
    background-color: var(--primary-color-darkblue);
}

nav li.active span.icon-angle {
    color: #fff;
}

nav li label:hover {
    background: rgba(3, 160, 224, 0.1);
}

nav li.active ul a {
    background: rgba(3, 160, 224, 0.2);
}

nav li.active ul a:hover {
    background: rgba(3, 160, 224, 0.35);
}

.page-nav .next {
    float: right;
}

nav a:focus,
nav a:hover,
nav label:focus,
nav label:hover {
    background: unset;
}

nav ul.nav__list {
    background-color: #f6f4f4;
    border-radius: 5px;
}

/**
   * Styling first level lists items
   */

.group-list a,
.group-list label {
    padding: 0.8rem 3rem;
    padding-right: 1rem;
    display: block;
}

.group-list a:focus,
.group-list a:hover,
.group-list label:focus,
.group-list label:hover {
    background: rgba(220, 241, 252);
}

.group-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.nav__list input[type='checkbox']:checked + label + ul {
    /* reset the height when checkbox is checked */
    max-height: 6000px;
}

/**
   * Rotating chevron icon
   */

.nav__list > li.active input[type='checkbox']:checked + label > span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* ======================================================== */
/* Icons */
/* ======================================================== */
@font-face {
    font-family: 'icomoon';
    src: url('data:font/woff;base64,d09GRgABAAAAAAM4AAsAAAAABEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAD4AAABgDxID6mNtYXAAAAFIAAAAOAAAAFQXVtKHZ2FzcAAAAYAAAAAIAAAACAAAABBnbHlmAAABiAAAAFEAAACIR1/mS2hlYWQAAAHcAAAAKgAAADYSeHnEaGhlYQAAAggAAAAcAAAAJAUQA8ZobXR4AAACJAAAABIAAAAUB4AAMmxvY2EAAAI4AAAADAAAAAwAKABYbWF4cAAAAkQAAAAWAAAAIAAHABduYW1lAAACXAAAAM0AAAGGmUoJ+3Bvc3QAAAMsAAAADAAAACAAAwAAeAFjYGY8wDiBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKMKABBwaGlwzMB/4fYHBgBmKQGiRZBQYGAF9ECwUAAHgBY2BgYIZiGQZGCA0kGcE0C4MFkOZi4GBgAkJGBoWXDP///v/PAARwNuP/x+IsYB1wAAByagy+AAEAAf//AA94AWNgZIABJgYGc0sQlwQxI4bjjH5MOxlEgBx2NiV9RjUTe0Z1EGFmJM8oJsLo94ZdhJ2Pnf3sWXYgJcL+hp1x/QsI8+RJiNQLdqBuAGAvDs8AAAB4AWNgZACDj7OnOsfz23xl4GYB82+yzWZHphn9mHYCKQ4GJhAPAAaeCCoAAHgBY2BkYGA+8P8AAwMLAwgw+gFFUAErAFHlAt14AWNhQAAmIGZsYDACAAIqALoAAAAAAAAACgAUAB4ARHgBY2BkYGBgZRAF0iDAxIAGAAMMAB8AAHgBbcw1UkRBEIDhf903wqO5AC4ZIe6arvb6vql6gp+AcxBzRrqKDp/NfK1Ak18yAHqWwJxVt8059YE5r07MBWosmouavzBXWeObHJl8RTNNSuasemjOqQ/NefWXucASzlzU/L25yh4/456fex8wpodnjscTPEsYjX3gtje2eEYIiRijBRzbbLCVOpWavJdhMuuE3CMMSZjRIUztPPZB7IYSSNiJpe+67+6s56+0bYNjtE6MY4iohJAOMUIfR5d3HGfoLq7+d7HxB9yDPbcAAAB4AWNgZsALAAB9AAQ=')
        format('woff');
    font-weight: normal;
    font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-angle {
    margin: 10px;
}

.icon-angle:before {
    content: '\e900';
}