@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,700&display=swap');
@font-face {
  font-family: 'Roobert';
  src: url(https://miroapp.github.io/developer-portal/fonts/roobert-regular.woff2) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
.html {
  overflow-x: hidden;
}

body {
  background: var(--color-bg-page) !important;
  color: var(--color-text-default) !important;
}

/* Fix issue with readme overwriting button color */
.button-primary {
  color: #fff !important;
}

/* README overrides for each component */
#content-container {
  padding-top: 0 !important;
  --container: 1380px !important;
}

a {
  color: #3f53d9;
}

/**
Workaround for similar class names `icon` and `icon-` used for icons in Readme and Mirotone.
Assumption: we use <span> for Mirotone icons, and Readme uses <i>.
**/
[data-is-rendered='yes'] span.icon[class*='icon-']:before {
  display: none !important;
}

[data-is-rendered='yes'] *,
[data-is-rendered='yes'] *::before,
[data-is-rendered='yes'] *::after {
  box-sizing: border-box !important;
}

i.icon[class*='icon-'] {
  height: auto;
  width: auto;
}

:root {
  --body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji;
  --backdrop-z-index: 10000000;
  --dialog-z-index: 3100;
  --link-hover-background: var(--gray100);
  --shadows-100: 0 0 15px rgba(0, 0, 0, 0.15);
  --miro-interactive-area: 40px;
  --miro-gap: 8px;
  --miro-border-radius: 8px;
  --zindex-dropdown: 100;
  /* Colors from Design System */
  --colors-gray-100: #f3f4f6 !important;
  --colors-gray-150: #ebecf0 !important;
  --colors-gray-700: #343741 !important;
  --colors-gray-800: #24262c !important;
  --colors-gray-850: #1e1f24 !important;
  --colors-blue-200: #d9dffc !important;
  --colors-blue-300: #b1bdfd !important;
  --colors-blue-500: #3859ff !important;
  --colors-blue-700: #1e2d7b !important;
  --colors-background-neutrals-hover: var(--colors-gray-100);
  --colors-background-neutrals-active: var(--colors-gray-150);
  --colors-background-neutrals-container: var(--white);
  --colors-background-primary-prominent-selected: var(--colors-blue-500);
  --colors-background-primary-subtle-selected: var(--colors-blue-200);
  --colors-text-primary-selected: var(--colors-blue-500);
  --icon-neutrals-disabled: #adb1bd;
  --shadows-50: 0 4px 16px #05003812;
}

:root .App {
  --header-font: 'Roobert', Open-sans, system-ui;
  --markdown-title-font: var(--header-font);
  --font-family: var(--body-font);
  color: #1c1c1e;
  --color-text-minimum: #1c1c1e;
  --color-text-muted: #1c1c1e;
  --markdown-text: #1c1c1e;
  --color-text-default: #1c1c1e;
  --Sidebar-link-hover-background: var(--colorsgray-200);
}

:root .Tabs {
  --Tabs-color-active: var(--project-color-primary, #018ef5);
}

[data-color-mode='dark'] {
  /* Colors from Design System */
  --colors-background-neutrals-active: var(--colors-gray-700) !important;
  --colors-background-neutrals-hover: var(--colors-gray-800) !important;
  --colors-background-neutrals-container: var(--colors-gray-850) !important;
  --colors-background-primary-prominent-selected: var(--colors-blue-500) !important;
  --colors-background-primary-subtle-selected: var(--colors-blue-700) !important;
  --colors-text-primary-selected: var(--colors-blue-300) !important;
  --icon-neutrals-disabled: #4a4e5e;
  --shadows-50: 0px 0px 8px 0px rgba(9, 9, 9, 0.65);
  --link-hover-background: var(--gray15);
}
[data-color-mode='dark'] .rm-Header {
  --Header-button-color: var(--indigo100) !important;
}
[data-color-mode='dark'] .App .rm-SuggestedEdits [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-SuggestionDiff [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-Guides article [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-ReferenceMain article [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-Changelog [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-Discuss [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App .rm-CustomPage [data-is-rendered='yes'] a,
[data-color-mode='dark'] .App [data-is-rendered='yes'] .rm-CustomPage a {
  color: var(--colors-text-primary);
}
[data-color-mode='dark'] .App,
[data-color-mode='dark'] [data-is-rendered='yes'],
[data-color-mode='dark'] body {
  color: #fbf7ef;
  --color-text-minimum: #fbf7ef;
  --color-text-muted: #fbf7ef;
  --markdown-text: #fbf7ef;
  --color-text-default: #fbf7ef;
  --color-bg-page: #1c1c1e;
  --color-bg-page-rgb: 28, 28, 30;
}

@media (prefers-color-scheme: dark) {
  [data-color-mode='auto'],
  [data-color-mode='system'] {
    /* Colors from Design System */
    --colors-background-neutrals-active: var(--colors-gray-700) !important;
    --colors-background-neutrals-hover: var(--colors-gray-800) !important;
    --colors-background-neutrals-container: var(--colors-gray-850) !important;
    --colors-background-primary-prominent-selected: var(--colors-blue-500) !important;
    --colors-background-primary-subtle-selected: var(--colors-blue-700) !important;
    --colors-text-primary-selected: var(--colors-blue-300) !important;
    --icon-neutrals-disabled: #4a4e5e;
    --shadows-50: 0px 0px 8px 0px rgba(9, 9, 9, 0.65);
    --link-hover-background: var(--gray15);
  }
  [data-color-mode='auto'] .rm-Header,
  [data-color-mode='system'] .rm-Header {
    --Header-button-color: var(--indigo100) !important;
  }
  [data-color-mode='auto'] .App .rm-SuggestedEdits [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-SuggestionDiff [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-Guides article [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-ReferenceMain article [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-Changelog [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-Discuss [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App .rm-CustomPage [data-is-rendered='yes'] a,
  [data-color-mode='auto'] .App [data-is-rendered='yes'] .rm-CustomPage a,
  [data-color-mode='system'] .App .rm-SuggestedEdits [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-SuggestionDiff [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-Guides article [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-ReferenceMain article [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-Changelog [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-Discuss [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App .rm-CustomPage [data-is-rendered='yes'] a,
  [data-color-mode='system'] .App [data-is-rendered='yes'] .rm-CustomPage a {
    color: var(--colors-text-primary);
  }
  [data-color-mode='auto'] .App,
  [data-color-mode='auto'] [data-is-rendered='yes'],
  [data-color-mode='auto'] body,
  [data-color-mode='system'] .App,
  [data-color-mode='system'] [data-is-rendered='yes'],
  [data-color-mode='system'] body {
    color: #fbf7ef;
    --color-text-minimum: #fbf7ef;
    --color-text-muted: #fbf7ef;
    --markdown-text: #fbf7ef;
    --color-text-default: #fbf7ef;
    --color-bg-page: #1c1c1e;
    --color-bg-page-rgb: 28, 28, 30;
  }
}

/* Fix for label color issues in REST API docs */
#ssr-main .rm-ParamContainer label {
  color: inherit;
}

.sdk-reference-type code {
  max-height: 300px !important;
  overflow-x: auto !important;
}

.sdk-reference-type {
  padding: 1em !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 300px !important;
}

html:not(.useReactApp) nav#hub-sidebar ul a.active:not(.active),
html:not(.useReactApp) nav#hub-sidebar ul > li.subnav-expanded > a:not(.active) {
  color: white;
}

#portal-container {
  position: relative;
  left: 0;
  right: 0;
  height: 100%;
  top: 30px;
}

.LandingPageHeader20SNhBZ58Jy5 {
  padding: 40px 20px !important;
}

[class^='DeprecationWarning'] {
  visibility: hidden;
}

[class^='DeprecationWarning']:hover:after {
  background-color: #dd1e2e;
}

[class^='DeprecationWarning']:after {
  visibility: visible;
  content: 'You are viewing the documentation for Miro Developer Platform 1.0, which is deprecated. To view the documentation for Miro Developer Platform 2.0, our current version, click this banner.';
  text-align: center;
  position: absolute;
  margin-inline: auto;
  left: 40px;
  right: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 600px;
  padding: 15px;
  margin: auto;
  background-color: #e95f6a;
  color: #fff;
  min-height: 50px;
  border-radius: 5px;
}

.rm-CustomPage #content-head {
  display: none;
}

.AppFooter {
  display: none;
}

.App .rm-Container {
  max-width: var(--container-lg) !important;
}

.Header-topuTMpygDG4e1V {
  border-bottom: none !important;
}

.markdown-body > #developer-playground {
  padding-top: 24px;
  margin-top: 0;
}

.markdown-body > #developer-playground > div[class*='wrapperFullScreen'] {
  margin-top: 159px;
}

.markdown-body > .embed_hasImg:nth-of-type(even) {
  margin-left: 15px;
  margin-right: 15px;
}

.rm-Header {
  --Header-border-color: transparent !important;
  --Header-button-color: var(--indigo700) !important;
  --Header-button-hover: var(--colors-background-neutrals-active) !important;
  --Header-border-radius: var(--miro-border-radius);
  --Header-top-link-hover: var(--colors-background-neutrals-hover) !important;
  --Header-button-size: var(--miro-interactive-area);
  --Header-gap: var(--miro-gap);
  --Header-font-size: 16px;
}

.rm-Header-top.rm-Header-top {
  height: auto;
}

.rm-Header-top-link.rm-Header-top-link.rm-Header-top-link.rm-Header-top-link.rm-Header-top-link,
.rm-Header-bottom-link {
  color: var(--Header-button-color);
  font-weight: 400;
}

.hub-sidebar button,
.hub-sidebar span {
  font-family: var(--font-family);
}

.LandingPageHeader20SNhBZ58Jy5 {
  padding: 40px 20px !important;
}

/* Fix sticky header with transparent background on mobile */
header#hub-header {
  z-index: 1000000 !important;
}

header#hub-header #header-top {
  background-color: #ffffff;
}

header#hub-header #header-top #header-nav-left ol,
header#hub-header #header-top #header-nav-left ul {
  padding-left: 0;
  margin-top: 10px;
  margin-bottom: 0;
}

header#hub-header #header-top #header-nav-left li,
header#hub-header #header-top #header-nav-right li {
  margin-top: 10px;
}

/* Header general styles */
.rm-Header-left,
.rm-Header-right {
  height: 72px;
  box-sizing: border-box;
  gap: var(--Header-gap);
}

.rm-Header-left > * + * {
  margin: 0;
}

.rm-Header-left:not([class*='Header-left_mobile']) {
  display: flex;
  padding-left: 12px;
}

.rm-Header-left:not([class*='Header-left_mobile']) .rm-Header-top-link {
  display: none;
}

.rm-Header-left[class*='Header-left_mobile'] {
  order: -1;
  display: flex;
  flex: none;
  /* make shadow visible on the right side */
  padding-right: 5px;
  margin-right: -5px;
}

.rm-Header-right [class^='Header-right_desktop'] {
  display: none;
  width: var(--Header-button-size);
  height: var(--Header-button-size);
}

.rm-Header-right [class^='Header-right_desktop'] > * {
  margin: 0;
}

.rm-Header-bottom .Dropdown,
.rm-Header-bottom .Dropdown .rm-Header-link,
.rm-Header-bottom .Dropdown-toggle {
  height: 40px !important;
}

.rm-Header-bottom {
  padding: 0;
}

.rm-Header-bottom .Dropdown .rm-Header-link {
  border: 1px solid var(--colors-background-neutrals-active) !important;
}

@media (max-width: 575px) {
  .rm-Header-right {
    display: none;
  }
}
@media (min-width: 1024px) {
  .rm-Header-left:not([class*='Header-left_mobile']) .rm-Header-top-link {
    display: inline-flex;
  }
  .rm-Header-left[class*='Header-left_mobile'] {
    display: none;
  }
}
@media (min-width: 576px) {
  .rm-Header-bottom {
    display: none !important;
  }
  [class^='Header-search'] {
    display: block !important;
  }
  .rm-SearchToggle,
  .rm-ThemeToggle {
    display: inline-flex;
  }
  .rm-SearchToggle:after {
    content: '⌘K';
    margin-left: 9px;
    font: 500 13px var(--header-font);
    color: var(--color-input-placeholder);
  }
  .rm-Header-right [class^='Header-right_desktop'] {
    display: block;
  }
  .rm-Header-left:not([class*='Header-left_mobile']) {
    padding-left: 20px;
  }
}
/* Header logo */
.rm-Logo {
  height: var(--header-logo-height);
  margin-right: calc(var(--Header-gap) * 2);
  padding: 0;
  border: none;
  display: block;
}

.rm-Header-top-link {
  font: var(--Header-font-size) / 150% var(--header-font);
  height: var(--Header-button-size);
  border: none;
  border-radius: var(--Header-border-radius);
}

.rm-Header-left .rm-Header-top-link {
  margin: 0;
}

/* Header links */
.rm-Header-top-link_active:not([data-is-rendered='yes']) {
  background-color: transparent;
}

.rm-Header-top-link:hover {
  background-color: var(--Header-top-link-hover);
}

.rm-Header-top-link:active {
  background-color: var(--Header-button-hover) !important;
  outline: none !important;
  box-shadow: none !important;
}

.rm-Header-top-link[href$='/docs']::after,
.rm-Header-top-link[href$='/docs/resources']::after,
.rm-Header-top-link[href$='/docs/miro-marketplace']::after {
  font-family: 'ReadMe-Icons' !important;
  content: '\ea10';
  margin-left: var(--Header-gap);
  transition: rotate 0.14s ease-out;
  rotate: 90deg;
}

.rm-Flyout {
  --Flyout-background: var(--colors-background-neutrals-container) !important;
}

.rm-ThemeToggle,
.rm-SearchToggle {
  border-radius: var(--Header-border-radius);
  border: 1px solid var(--Header-button-hover) !important;
  height: var(--Header-button-size);
  width: var(--Header-button-size) !important;
}

.rm-ThemeToggle:hover,
.rm-SearchToggle:hover {
  background-color: var(--Header-top-link-hover) !important;
}

.rm-SearchToggle {
  padding: var(--Header-gap) 10px;
  width: auto !important;
}

.rm-SearchToggle-icon {
  font-size: var(--icon-lg) !important;
}

.rm-ThemeToggle {
  vertical-align: middle;
}

.rm-ThemeToggle .Icon {
  height: var(--icon-lg) !important;
  width: var(--icon-lg) !important;
}

[class^='Header-search'] {
  margin: 0;
  padding: 0;
  order: -1;
}

[class^='ThemeToggle-wrapper'] {
  height: auto;
  order: -1;
}

/* Header - profile preloader */
.rm-Header-right [class^='Header-right_desktop'] a[href*='createDevTeam'] {
  position: relative;
  width: calc(var(--Header-button-size) - 2px);
  height: calc(var(--Header-button-size) - 2px);
  margin: 1px;
  overflow: hidden;
  font-size: 0;
  background: var(--Header-button-hover);
  border-radius: 50%;
}

.rm-Header-right [class^='Header-right_desktop'] a[href*='createDevTeam']:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-name: loader-animate;
  animation-timing-function: linear;
  background: linear-gradient(
    to right,
    rgba(var(--color-bg-page-rgb), 0) 0%,
    rgba(var(--color-bg-page-rgb), 0.6) 30%,
    rgba(var(--color-bg-page-rgb), 0) 81%
  );
}

/* Header - mobile */
.rm-Header-left[class*='Header-left_mobile'] [class^='Header-left-nav'] {
  display: none;
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu'] {
  height: var(--Header-button-size);
  width: var(--Header-button-size);
  border-radius: var(--Header-border-radius);
  pointer-events: none;
  margin: 0;
  color: var(--icon-neutrals-disabled);
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu']:after {
  content: '\ea02';
  position: absolute;
  background: linear-gradient(
    to right,
    rgba(var(--color-bg-page-rgb), 0) 0%,
    rgba(var(--color-bg-page-rgb), 0.6) 30%,
    rgba(var(--color-bg-page-rgb), 0) 81%
  );
  background-clip: text;
  color: transparent;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: loader-animate;
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu'].loaded {
  cursor: pointer;
  pointer-events: auto;
  color: inherit;
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu'].loaded:after {
  display: none;
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu']:not(.loaded):hover {
  border: none;
}

.rm-Header-left[class*='Header-left_mobile'] button[class^='icon-menu'].loaded:hover {
  background-color: var(--Header-top-link-hover);
}

[class*='MobileFlyout-divider'],
[class*='MobileFlyout-logo'],
[class*='navItemMobile'] {
  display: none;
}

[class*='MobileFlyout-divider'] ~ .submenu,
[class*='MobileFlyout-divider'] ~ [class*='navItemMobile'] {
  display: flex;
}

/* COLLAPSIBLE SIDENAV */
.rm-Sidebar {
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
  --Sidebar-font-size: 14px;
  --Sidebar-line-height: calc(var(--Sidebar-font-size) * 1.5);
  --Sidebar-link-color: var(--colors-text-primary-selected) !important;
  --Sidebar-link-background: var(--colors-background-primary-subtle-selected) !important;
  --Sidebar-link-hover-background: var(--colors-background-neutrals-hover) !important;
}

.rm-Sidebar-section {
  margin: 0 !important;
}

.rm-Sidebar-heading {
  padding-left: calc(var(--Sidebar-indent) + 1px) !important;
  margin: calc(var(--miro-gap) / 2) 0 !important;
}

.rm-Guides .rm-Sidebar-section > .rm-Sidebar-list:not(:has(.active)) {
  display: none;
}

.rm-Sidebar-list {
  margin-bottom: calc(var(--miro-gap) / 2) !important;
}

.rm-Sidebar-list li {
  margin-top: calc(var(--miro-gap) / 2) !important;
}

.rm-Sidebar-heading,
.rm-Sidebar-link {
  cursor: pointer;
  line-height: var(--Sidebar-line-height);
  padding-top: calc((var(--miro-interactive-area) - var(--Sidebar-line-height)) / 2) !important;
  padding-bottom: calc((var(--miro-interactive-area) - var(--Sidebar-line-height)) / 2) !important;
  border-radius: var(--miro-border-radius) !important;
}

.rm-Sidebar-link.active {
  background: var(--Sidebar-link-background) !important;
  color: var(--Sidebar-link-color) !important;
}

.rm-Sidebar-link [class^='Sidebar-link-buttonWrapper'] {
  align-self: flex-start;
  margin-top: 4px;
}

.rm-Sidebar-heading:hover,
.rm-Sidebar-link:hover {
  background-color: var(--Sidebar-link-hover-background);
}

.rm-Sidebar-section .rm-Sidebar-heading:before {
  display: inline-block;
  font-family: 'ReadMe-Icons' !important;
  font-size: 14px;
  content: '\ea10';
  margin-left: -15px;
  pointer-events: none;
  transform-origin: 6px calc(var(--Sidebar-line-height) / 2 + 1px);
  transform: translateY(1px);
  transition: transform var(--transition-fast) var(--transition-timing),
    -webkit-transform var(--transition-fast) var(--transition-timing);
}

.rm-Guides .rm-Sidebar-section:not([class*='CollapsibleSideNav']):has(.active) .rm-Sidebar-heading:before {
  transform: rotate(90deg);
}

[class*='QuickNav-container'],
[class*='QuickNav-mobile-container'] {
  padding: calc(var(--miro-gap) * 1.5) 6px !important;
}

[class*='QuickNav-button'] {
  border-radius: var(--miro-border-radius);
  height: var(--miro-interactive-area);
  padding: 0 var(--miro-gap) 0 calc(var(--miro-gap) * 2);
  border: 1px solid var(--colors-background-neutrals-active);
  background-color: transparent;
}

[class*='QuickNav-button']:hover {
  border: 1px solid var(--colors-background-neutrals-active);
  background-color: var(--colors-background-neutrals-hover);
}

/* VERSION SELECTOR - preloader */
main nav.hub-sidebar {
  position: relative;
}

main nav.hub-sidebar:not(:has(.rm-VersionDropdown)):before,
main nav.hub-sidebar:not(:has(.rm-VersionDropdown)):after {
  z-index: 100;
  content: '';
  display: block;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--miro-interactive-area) / 2) 0;
  margin: 16px 5px 0;
  border-radius: var(--miro-border-radius);
  background: rgba(0, 0, 0, 0.1);
}

main nav.hub-sidebar:not(:has(.rm-VersionDropdown)):after {
  position: absolute;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-name: loader-animate;
  animation-timing-function: linear;
  background: linear-gradient(
    to right,
    rgba(var(--color-bg-page-rgb), 0) 0%,
    rgba(var(--color-bg-page-rgb), 0.6) 30%,
    rgba(var(--color-bg-page-rgb), 0) 81%
  );
}

/* Animations */
@keyframes loader-animate {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/*# sourceMappingURL=readme.css.map */