@charset "UTF-8";
@font-face { font-family: ExpensifyNeue; font-weight: 400; font-style: normal; src: url("/assets/fonts/ExpensifyNeue-Regular.woff2") format("woff2"), url("/assets/fonts/ExpensifyNeue-Regular.woff") format("woff"); }
@font-face { font-family: ExpensifyNeue; font-weight: 700; font-style: bold; src: url("/assets/fonts/ExpensifyNeue-Bold.woff2") format("woff2"), url("/assets/fonts/ExpensifyNeue-Bold.woff") format("woff"); }
@font-face { font-family: ExpensifyNewKansas; font-weight: 500; font-style: normal; src: url("/assets/fonts/ExpensifyNewKansas-Medium.woff2") format("woff2"), url("/assets/fonts/ExpensifyNewKansas-Medium.woff") format("woff"); }
@font-face { font-family: ExpensifyNewKansas; font-weight: 500; font-style: italic; src: url("/assets/fonts/ExpensifyNewKansas-MediumItalic.woff2") format("woff2"), url("/assets/fonts/ExpensifyNewKansas-MediumItalic.woff") format("woff"); }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@font-face { font-family: ExpensifyNeue; font-weight: 400; font-style: normal; src: url("/assets/fonts/ExpensifyNeue-Regular.woff2") format("woff2"), url("/assets/fonts/ExpensifyNeue-Regular.woff") format("woff"); }
@font-face { font-family: ExpensifyNeue; font-weight: 700; font-style: bold; src: url("/assets/fonts/ExpensifyNeue-Bold.woff2") format("woff2"), url("/assets/fonts/ExpensifyNeue-Bold.woff") format("woff"); }
@font-face { font-family: ExpensifyNewKansas; font-weight: 500; font-style: normal; src: url("/assets/fonts/ExpensifyNewKansas-Medium.woff2") format("woff2"), url("/assets/fonts/ExpensifyNewKansas-Medium.woff") format("woff"); }
@font-face { font-family: ExpensifyNewKansas; font-weight: 500; font-style: italic; src: url("/assets/fonts/ExpensifyNewKansas-MediumItalic.woff2") format("woff2"), url("/assets/fonts/ExpensifyNewKansas-MediumItalic.woff") format("woff"); }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.search-icon { margin: auto 0px; }

#sidebar-search { background-color: #061B09; width: 375px; position: fixed; display: flex; flex-direction: column; bottom: 0; top: 0; right: 0; z-index: 2; }

#sidebar-search > div:last-child { flex-grow: 1; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
#sidebar-search > div:last-child::-webkit-scrollbar { display: none; }

@media only screen and (max-width: 800px) { #sidebar-search { width: 100%; } }
.searchbar-title-wrapper { padding: 20px; }

.search-title { font-size: 17px; padding-bottom: 20px; }

#toggle-search-close { margin: auto; margin-left: 0px; margin-right: 10px; }

/* Sidebar Layer */
#sidebar-layer { position: fixed; /* Sit on top of the page content */ display: none; /* Hidden by default */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; }

/* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
#___gcse_0 { margin-left: 20px; }

/* This input is in #___gcse_0 search bar */
input#gsc-i-id1.gsc-input { background-color: #061B09; color: #E7ECE9; font-family: "ExpensifyNeue", "Segoe UI Emoji", "Noto Color Emoji" !important; }

/* These below #gsc-iw-id1, .gsc-input-box & .gsib_a are inner wrapper of search bar input */
#gsc-iw-id1 { background-color: #061B09; border-bottom: #1A3D32 2px solid; border-bottom-left-radius: 0px; }
#gsc-iw-id1:focus-within { border-bottom: #03D47C 2px solid; }

.gsc-input-box .gsib_a { padding: 5px 9px 4px 0px; }

.search-icon { margin-left: auto; }

/* This is the close icon on search bar */
.gsib_b .gsst_a .gscb_a { color: #8B9C8F; }
.gsib_b .gsst_a .gscb_a:hover { color: #E7ECE9; }

/* This is to manage hover on parent close icon and make it the same effect on close icon */
.gsst_a:hover .gscb_a { color: #E7ECE9 !important; }

/* Manage Google Search label animation */
input#gsc-i-id1:focus + label.search-label, input#gsc-i-id1:valid + label.search-label, input#gsc-i-id1:active + label.search-label { transform: translateY(-100%) scale(0.8); }

label.search-label { display: block; position: absolute; margin-top: -20px; font-size: 15px; font-family: "ExpensifyNeue", "Segoe UI Emoji", "Noto Color Emoji"; transform: translateY(-50%); left: 20px; color: #afbbb0; transform-origin: left top; user-select: none; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms; }

/* Hide the relevance, Ads, Branding, find more button & etc sections */
.gsc-above-wrapper-area, .gsc-webResult.gsc-result .gsc-url-top, .gsc-results-wrapper-visible .gsc-adBlock, .gcsc-more-maybe-branding-root, .gcsc-find-more-on-google-root { display: none; }

.gsc-control-cse { background-color: #061B09; border: #061B09; font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; }

/* Hide the scrollbar */
.gsc-control-cse::-webkit-scrollbar { display: none; }

.gs-title { font-weight: bold; }

/* Change the Google Search Button icon into Expensify icon button */
.gsc-search-button.gsc-search-button-v2 { padding: 10px; margin-top: -7px; margin-left: 15px; margin-right: 20px; border-radius: 25px; background-color: #03D47C; cursor: pointer; width: 40px; height: 40px; }

.gsc-search-button.gsc-search-button-v2:hover { background-color: #00a862; }

.gsc-search-button.gsc-search-button-v2 svg { fill: #E7ECE9; height: auto; width: auto; }

/* Change the path of the Google Search Button icon into Expensify icon */
.gsc-search-button.gsc-search-button-v2 svg path { d: path("M8 1c3.9 0 7 3.1 7 7 0 1.4-.4 2.7-1.1 3.8l5.2 5.2c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0l-5.2-5.2C10.7 14.6 9.4 15 8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7zm0 3c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z"); fill-rule: evenodd; clip-rule: evenodd; }

.gsc-resultsbox-visible .gsc-webResult .gsc-result { border-bottom: none; }

/* Change Font the Google Search result */
.gsc-control-cse .gsc-table-result { font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; }

/* Change Font result Paragraph color */
.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType { color: #E7ECE9; }

/* Change the color of the Google Search Suggestion font */
.gs-spelling.gs-result { color: #E7ECE9; }

/* Pagination related style */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box { text-align: center; }

.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { margin: 4px; width: 28px; height: 28px; border-radius: 25px; display: inline-block; line-height: 2.5; background-color: #03D47C; font-weight: bold; font-size: 11px; }

/* Change the color & background of Google Search Pagination */
.gsc-cursor-next-page, .gsc-cursor-final-page { color: #E7ECE9; background-color: #061B09; }

/* Change the color & background of Google Search Current Page */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page { background-color: #03D47C; color: #E7ECE9; }
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover { text-decoration: none; background-color: #03D47C; }

/* Change the color & background of Google Search of Other Page */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page { background-color: #1A3D32; color: #E7ECE9; }
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page:hover { background-color: #2C6755; text-decoration: none; }

* { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { line-height: 1; }
@media screen and (max-width: 800px) { html { scroll-padding-top: 80px; } }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: 400; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

html, body { height: 100%; min-height: 100%; background: #061B09; }

hr { background: #1A3D32; border: none; display: inline-block; width: 24px; height: 2px; margin: 0 0 16px; }

strong { font-weight: bold; }

em { font-style: italic; }

a { color: #5AB0FF; text-decoration: none; }
a img { display: block; }

h1, h2, h3, h4, h5, h6 { color: #E7ECE9; font-weight: bold; padding-bottom: 12px; }

h2, h3, h4, h5, h6 { margin-top: 20px; }

h1 { font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight: 500; font-size: larger; }

h2 { font-size: large; }

p { padding-bottom: 20px; }

body, button, input, select, textarea { line-height: 1.4; font-weight: 400; font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif; font-size: 16px; color: #E7ECE9; }

button { border-radius: 12px; padding: 12px; font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif; font-size: 15px; font-weight: bold; }
button.success { background-color: #03D47C; color: #E7ECE9; width: 100%; border-radius: 100px; padding-left: 20px; padding-right: 20px; }
button.success:hover { background-color: #13c479; cursor: pointer; }
@media screen and (min-width: 800px) { button.success { width: auto; } }

#logo { width: 240px; padding: 80px; display: block; margin-left: auto; margin-right: auto; align-content: center; }

.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; align-content: space-between; }

#lhn { position: fixed; background-color: #07271F; box-sizing: border-box; border-right-color: #1A3D32; border-right-width: 1px; border-style: solid; width: 100%; height: auto; }
#lhn.expanded { height: 100%; }
@media screen and (min-width: 800px) { #lhn { width: 320px; height: 100%; } }
@media screen and (min-width: 1120px) { #lhn { width: 420px; } }
#lhn ul, #lhn li { list-style: none; }
#lhn #lhn-content { overflow: auto; display: none; height: calc(100% - 100px); padding: 0 24px 24px 24px; }
#lhn #lhn-content .in-this-article { padding-top: 40px; display: block; }
@media screen and (min-width: 800px) { #lhn #lhn-content { display: block; height: calc(100% - 150px); padding: 0 44px 44px 44px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
  #lhn #lhn-content::-webkit-scrollbar { display: none; } }
#lhn #lhn-content.expanded { display: block; }
#lhn #lhn-content .article-toc { margin-top: 20px; }
#lhn .lhn-header { padding: 24px; }
@media screen and (min-width: 800px) { #lhn .lhn-header { padding: 44px; } }
#lhn .lhn-header #header-button { display: block; padding-right: 24px; }
@media screen and (min-width: 800px) { #lhn .lhn-header #header-button { display: none; } }
#lhn .lhn-header .logo { width: 160px; align-content: center; display: block; margin-left: auto; margin-right: auto; }
@media screen and (min-width: 1120px) { #lhn .lhn-header .logo { width: 210px; align-content: normal; display: flex; margin-left: 0; margin-right: 0; } }
#lhn .icon-with-link { display: grid; grid-template-columns: 40px auto; cursor: pointer; align-items: center; }
#lhn .selected { font-weight: bold; color: #E7ECE9; }
#lhn .hide { display: none; position: fixed; }

#content-area { display: flex; flex-direction: column; min-height: 100vh; margin-left: 0; padding: 80px 24px 0px 24px; }
@media screen and (min-width: 800px) { #content-area { margin-left: 320px; } }
@media screen and (min-width: 1120px) { #content-area { /* Same as the width of the lhn */ margin-left: 420px; padding: 52px 68px 0 68px; box-sizing: border-box; } }
@media screen and (min-width: 1600px) { #content-area { margin-left: 420px; /* On wide screens, the padding needs to be equal to
the view width, minus the content size, minus the lhn size, divided by two. */ padding: 52px calc((100vw - 1000px - 420px)/2) 0 calc((100vw - 1000px - 420px)/2); } }
#content-area ul, #content-area ol { margin-left: 24px; padding-bottom: 20px; }
#content-area h1.title { font-size: 2.25em; }
#content-area .article img { display: block; margin: 20px auto; border-radius: 10px; }
@media screen and (max-width: 800px) { #content-area .article img { width: 100%; height: 100%; max-width: auto; max-height: auto; } }
@media screen and (min-width: 800px) { #content-area .article img { max-width: -webkit-fill-available; max-height: -webkit-fill-available; } }
#content-area .article .img-wrap { display: flex; justify-content: space-around; flex-wrap: wrap; }
#content-area .article h2, #content-area .article h3 { font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; }
#content-area .article blockquote { margin-top: 20px; margin-bottom: 20px; padding-top: 20px; padding-left: 5%; border-left: 5px solid #1B5744; }
#content-area .article blockquote em:before { content: "\“\a"; white-space: pre; font-size: 60px; line-height: 1em; color: #03d47c; }
#content-area .article blockquote p:first-child { font-size: large; font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; opacity: 0.8; }

.link { display: inline; color: #5AB0FF; cursor: pointer; }
.link:hover { color: #B0D9FF; }

.lhn-items ol, .lhn-items ul { padding-left: 32px; }
.lhn-items ul, .lhn-items li { margin-bottom: 20px; /* Apply recursive style to add a margin to the nested items */ }
.lhn-items ul ul, .lhn-items ul li, .lhn-items li ul, .lhn-items li li { margin-top: 20px; cursor: pointer; }
.lhn-items .nested-treeview { margin-left: 40px; }
.lhn-items .selected-article { font-weight: bold; color: #E7ECE9; }
.lhn-items .home-link { padding-left: 40px; }

.cards-group, .platform-cards-group { display: grid; grid-template-columns: auto; row-gap: 20px; column-gap: 20px; padding-bottom: 20px; }
@media screen and (min-width: 1120px) { .cards-group, .platform-cards-group { grid-template-columns: 50% 50%; } }

@media screen and (min-width: 1120px) { .platform-cards-group { grid-template-columns: 33.33% 33.33% 33.33%; } }

.card, .article-card, .platform-card, .hub-card { display: flex; flex-wrap: nowrap; border-radius: 16px; padding: 28px; font-weight: 700; cursor: pointer; color: #E7ECE9; background-color: #07271F; }
.card:hover, .article-card:hover, .platform-card:hover, .hub-card:hover { background-color: #06231c; }
.card .row, .article-card .row, .platform-card .row, .hub-card .row { display: flex; flex-basis: 100%; }
.card .body, .article-card .body, .platform-card .body, .hub-card .body { display: flex; flex-wrap: nowrap; flex-direction: column; flex-grow: 2; }
.card h3.title, .article-card h3.title, .platform-card h3.title, .hub-card h3.title { font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; }
.card h3.title, .article-card h3.title, .platform-card h3.title, .hub-card h3.title, .card h4.title, .article-card h4.title, .platform-card h4.title, .hub-card h4.title { padding: 0; margin: 0; }
.card p.description, .article-card p.description, .platform-card p.description, .hub-card p.description, .card p.url, .article-card p.url, .platform-card p.url, .hub-card p.url { margin: 0; font-weight: normal; }

.article-card .right-icon { display: flex; align-items: center; padding-left: 16px; }

.platform-card .row { flex-direction: column; }
.platform-card .platform-screenshot { display: flex; align-items: center; }
.platform-card .platform-screenshot img { border-radius: 12px; width: 100%; }
.platform-card .submit-button { display: flex; align-items: center; margin-top: 16px; padding-left: 0; }
@media screen and (min-width: 1120px) { .platform-card .submit-button { margin-top: 0; padding-left: 16px; } }
.platform-card .body .header { display: flex; align-items: center; justify-content: space-between; }
.platform-card .body .header .select-button { display: flex; }
.platform-card .body .header .select-button .success { align-items: flex-end; font-size: 0.8em; }
.platform-card h3.title.with-margin, .platform-card h4.title.with-margin { margin: 0 0 4px 0; }
.platform-card h3.title { font-size: 1.4em; font-weight: normal; }
.platform-card p.description { padding: 20px 0 20px 0; }
.platform-card p.url { padding: 0; font-size: 0.8em; color: #afbbb0; }

.hub-card { padding: 24px; }
.hub-card .row { flex-direction: column; }
.hub-card h3.title { font-size: 1.2em; font-weight: normal; }
.hub-card h3.title.with-margin { margin: 20px 0 8px 0; }
.hub-card p.description { padding: 0; }
.hub-card p.description.with-min-height { min-height: 68px; }
@media screen and (min-width: 800px) { .hub-card p.description.with-min-height { min-height: 48px; } }

.base-icon { width: 20px; height: 20px; cursor: pointer; }

.homepage h1 { margin-top: 0; padding-bottom: 20px; padding-top: 8px; }
@media screen and (min-width: 800px) { .homepage h1 { padding-top: 0px; } }
.homepage h2 { padding-bottom: 24px; }
.homepage p { margin-bottom: 20px; }
.homepage .cards-group, .homepage .platform-cards-group { padding-bottom: 32px; }

.centered-content { width: 100%; height: calc(100vh - 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.centered-content div { margin-top: 8px; }
.centered-content strong { font-size: 20px; }
.centered-content .icon { width: 76px; padding: 28px; display: block; margin-left: auto; margin-right: auto; }

#floating-concierge-button-global { position: fixed; display: block; }
@media screen and (min-width: 800px) { #floating-concierge-button-global { display: none; } }

#floating-concierge-button-lhn { position: absolute; display: none; }
@media screen and (min-width: 800px) { #floating-concierge-button-lhn { display: block; } }

.get-help { flex-wrap: wrap; margin-top: auto; }

.floating-concierge-button { bottom: 2rem; right: 2rem; }
.floating-concierge-button img { width: 4rem; height: 4rem; }
.floating-concierge-button img:hover { filter: saturate(2); }

@media screen and (max-width: 800px) { .disable-scrollbar { overflow: hidden; } }

.page-footer { font-size: 15px; }
@media screen and (max-width: 1120px) { .page-footer { background: url("/assets/images/expensify-footer-logo--vertical.svg") no-repeat right 120px; background-size: 111px 618px; margin-right: -25px; } }
.page-footer h3 { color: #03D47C; font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.page-footer ul { margin: 0px !important; padding: 0; }
.page-footer ul li { list-style-type: none !important; margin: 0 0 8px; }
.page-footer ul li a { color: #E7ECE9; display: block; padding: 4px 0; word-break: break-word; }
.page-footer ul li a:hover { color: #03D47C; }
.page-footer__social-icons { padding-bottom: 20px; }
.page-footer__social-icons a { color: #E7ECE9; display: inline-block; }
.page-footer__social-icons a:hover { color: #03D47C; }
.page-footer__fine-print { color: #AFBBB0; font-size: 10px; }
.page-footer__fine-print a { color: #5AB0FF; }
.page-footer__logo { margin-top: 40px; }
.page-footer__logo img { display: block; }
@media screen and (max-width: 1120px) { .page-footer__logo { display: none; } }
.page-footer__wrapper { margin: 0 auto; max-width: 1000px; padding: 64px 0 0; }
@media screen and (max-width: 800px) { .page-footer__wrapper { padding: 64px 0px 20px; } }
@media screen and (min-width: 1120px) { .page-footer .columns { display: flex; margin-left: -16px; margin-right: -16px; } }
.page-footer .column { margin-bottom: 40px; }
@media screen and (min-width: 1120px) { .page-footer .column { padding: 16px; width: 25%; } }