/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

body {
  margin: 0;
}
.Terminal {
  position: relative;
  contain: strict;
  width: 780px;
  height: 625px;
  background: black;
}

.Layers {
  width: 100%;
  height: 100%;
  position: relative;
}
.TerminalCanvasText,
.TerminalCanvasCursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.TerminalCanvasCursor {
  opacity: 0.5;
}

.TerminalTextArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

/*************/
/* __Theme.css */
/*************/
:root {
  /* TODO sizes is not theme */
  --EditorFontSize: 16px;
  --EditorLineHeight: 20px;
  --EditorFontFamily: 'Fira Code', monospace;
}
/*************/
/* _Global.css */
/*************/
@font-face {
  font-family: 'Fira Code';
  src: url(/language-basics-r/d6f2431/fonts/FiraCode-VariableFont.ttf) format('truetype');
}

/* TODO check if contain strict also makes sense for html and body */

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
  user-select: none;
}

#Workbench {
  width: 100%;
  height: 100%;
  contain: strict;
  font-size: 13px;
  line-height: 1.4;
}

#TitleBar,
#SideBar,
#Main,
#ActivityBar,
#Panel,
#StatusBar {
  /*
   * not sure why this works, but position fixed combined with backface
   * visibility hidden gives great rendering performance,
   * see also https://benfrain.com/improving-css-performance-fixed-position-elements/
   *
   *
   * typing benchmark (before):
   * 216ms scripting
   * 62ms rendering
   * 26ms painting
   * 100ms system
   *
   * typing benchmark (after):
   * 189ms scripting
   * 117ms rendering
   * 41ms painting
   * 122ms system
   */
  position: fixed;
  backface-visibility: hidden;
  will-change: transform;
}

.Hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/*
 * Using the will-change attribute creates a separate layer.
 * Updating that layer will be faster since only that layer needs style recalculation and repainting (instead of the whole page)
 * However this hack should be used sparingly since too many layers can have negative impact for performance
 */
.TransformHack {
  /* will-change: transform;
  contain: strict; */
}
/*************/
/* Widgets.css */
/*************/
#Widgets {
  contain: strict;
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  pointer-events: none;
}

/* TODO maybe hide widgets container if empty*/
#Widgets:empty {
  display: none;
}
/*************/
/* ViewletTitleBarMenuBar.css */
/*************/
#TitleBarMenuBar {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.TitleBarTopLevelEntry {
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  padding: 0 5px;
}

#TitleBarEntryActive,
.TitleBarTopLevelEntry:hover {
  background: var(--TitleBarItemHoverForeground, rgba(255, 255, 255, 0.1));
}

/* TODO maybe have extra focus outline border */
/*
:focus {
  border: 2px solid green;
} */
/*************/
/* ViewletTitleBarButtons.css */
/*************/
#TitleBarButtons {
  margin-left: auto;
  contain: content;
  app-region: no-drag;
}

.TitleBarButton {
  width: 46px;
  height: 100%;
  contain: strict;
  background: transparent;
  border: none;
}

.TitleBarButton:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

#TitleBarButtonClose:hover {
  background-color: rgba(232, 17, 35, 0.9);
}

[class^='MaskIcon'] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: currentColor;
  color: var(--TitleBarForeground, rgb(204, 204, 204));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  -webkit-mask-position: 50% 50%;
  pointer-events: none;
}

.MaskIconMinimize {
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/chrome-minimize.svg);
}
.MaskIconToggleMaximize {
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/chrome-maximize.svg);
}
.MaskIconClose {
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/chrome-close.svg);
}
/*************/
/* ViewletTitleBar.css */
/*************/
#TitleBar {
  /* TODO should not need z index */
  z-index: 1;
  display: flex;
  background: rgb(40, 46, 47);
  background: var(--TitleBarBackground);
  color: var(--TitleBarForeground, rgb(204, 204, 204));
  -webkit-app-region: drag;
  app-region: drag;
}
/*************/
/* ViewletTerminal.css */
/*************/

.TerminalCanvasText {
  width: 780px;
  height: 625px;
}

.TerminalCanvasCursor {
  width: 780px;
  height: 625px;
}
/*************/
/* ViewletStatusBar.css */
/*************/
#StatusBar {
  display: flex;
  justify-content: space-between;
}

#StatusBar {
  background: var(--StatusBarBackground);
  height: 23px; /* 22px content + 1px border top */
  border-top: 1px solid var(--StatusBarBorderTopColor);
  display: flex;
  color: var(--StatusBarForeground, rgb(98, 112, 106));
  display: flex;
  justify-content: space-between;
}

#StatusBarItemsLeft,
#StatusBarItemsRight {
  /* contain: content; */
  margin: 0;
  display: flex;
}

#StatusBarItemsLeft {
  padding-left: 7px;
}

#StatusBarItemsRight {
  padding-right: 7px;
}

.StatusBarItem {
  display: flex;
  line-height: 22px;
  height: 100%;
  outline: none;
  padding: 0 5px;
  margin: 0 3px;
  cursor: pointer;
  font-size: 12px;
  align-items: center;
  /* contain: content; */
}

.StatusBarItem:hover {
  background: rgba(255, 255, 255, 0.12);
}

.StatusBarItem:active {
  background: rgba(255, 255, 255, 0.18);
}

.StatusBarIcon {
  outline: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1em;
  mask-size: 1em;
  background: currentColor;

  /* TODO have common icon css for activity bar and status bar */
  width: 1em;
  height: 1em;
  display: block;
  margin-right: 4px;
}
/*************/
/* ViewletSourceControl.css */
/*************/
.SourceControl:focus {
  outline: 1px solid red;
  outline-offset: -1px;
}

.ViewSourceControlInput {
  /* margin: 20px; */
}

.ViewSourceControlInput[aria-busy] {
  background: lightblue;
}
/*************/
/* ViewletSimpleBrowser.css */
/*************/
.SimpleBrowserHeader {
  height: 30px;
  width: 100%;
  contain: strict;
  display: flex;
}

.SimpleBrowserHeader .InputBox {
  color: white;
}

.SimpleBrowserIframe {
  width: 100%;
  height: 100%;
  contain: strict;
}
/*************/
/* ViewletSideBar.css */
/*************/
#SideBar {
  background: var(--SideBarBackground, rgb(30, 35, 36));
  color: var(--SideBarForeground, white);
  display: flex;
  flex-direction: column;
  position: absolute;
}

#SideBarTitleArea {
  contain: strict;
  padding: 0 8px;
  line-height: 35px;
  display: grid;
  height: 35px;
  grid-template-columns: auto 1fr;
}

#SideBarTitleAreaTitle {
  font-size: 11px;
  cursor: default;
  font-weight: 400;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  padding-left: 12px;
}

/* TODO */
#SideBarTitleAreaButtons {
  display: none;
}

#SideBarContent {
  contain: strict;
  /* padding: 10px; */
  /* height: 100%; */
  flex: 1;
}
/*************/
/* ViewletSearch.css */
/*************/
.SearchHeader {
  display: grid;
  padding: 5px 12px 6px 16px;
}

.ViewletSearchMessage {
  color: rgba(156, 162, 160, 0.65);
  padding-bottom: 8px;
}

.SearchResults {
  overflow-y: auto;
  height: 100%;
}
/*************/
/* ViewletRunAndDebug.css */
/*************/
.RunAndDebug {
}
/*************/
/* ViewletReferences.css */
/*************/
.Locations {
  display: flex;
  flex-direction: column;
}

.LocationsMessage {
  padding: 4px 12px 4px 18px;
  user-select: text;
  color: rgb(188, 190, 190);
}

.LocationList {
  height: 100%;
  flex: 1;
  outline: none;
  contain: strict;
}

/* TODO figure out if this css is too slow */
.LocationsList:focus .TreeItem.Focused {
  color: white;
}
/*************/
/* ViewletQuickPick.css */
/*************/
/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */

/* TODO recalculate style is really slow in chrome for unknown reasons */
#QuickPick {
  position: absolute;
  width: 600px;
  top: 50px;
  left: 50%;
  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
  padding: 0 1px 6px;
  background: var(--QuickPickBackground);
  color: var(--ListForeground);
  box-sizing: border-box;
  /* TODO is this useful? */
  contain: content;
  /* TODO is this useful? */
  /* transform: translate3d(0, 0, 0); */
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  pointer-events: all;
  /* inset: 0; */
  /* will-change: transform; */
  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
}

#QuickPickHeader {
  /* width: 100%; */
  display: flex;
  /* margin: 6px 6px 0; */
  padding: 6px 6px 0;
  /* contain: strict; */
  height: 30px;
  contain: strict;
  /* margin-bottom: -2px; */
}

#QuickPickItems {
  outline: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  contain: strict;
}

.ScrollWrapper {
  width: 100%;
  height: 220px;
  /* TODO check if this makes a difference */
  /* will-change: transform; needed for effective scrolling */
  /* contain: strict; */
  position: relative;
  z-index: -1;
}

.Row {
}

.QuickPickItem {
  display: flex;
  white-space: nowrap;
  align-items: center;
  width: 100%;
  height: 22px;
  font-size: 13px;
  margin: 0;
  padding: 0 6px;
  contain: strict;
  gap: 4px;
}


.QuickPickItem:hover {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

#QuickPickItemActive {
  color: var(--ListActiveSelectionForeground);
  background: var(--ListActiveSelectionBackground);
}


.QuickPickItemDescription {
  font-size: 0.8rem;
  opacity: 0.7;
  pointer-events: none;
}

#QuickPickCount {
  /* Screen Reader Only */
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* TODO don't do nesting */
.QuickPickItem .highlight {
  color: darkgoldenrod;
}

/* TODO different way to check if it is file, className may be faster  */
.QuickPickItem[data-language-id]::before {
  content: ' ';
  contain: strict;
  width: 22px;
  height: 22px;
  background-size: 16px;
  background-position: 0;
  background-repeat: no-repeat;
  padding-right: 6px;
  width: 16px;
  height: 22px;
  line-height: inherit !important;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  flex-shrink: 0;
  background-size: cover;
  background-size: 16px;
  background-position: 0;
}

.QuickPickItem [class^='Icon'] {
  contain: strict;
  pointer-events: none;
  background-size: 16px;
  background-position: 0;
  background-repeat: no-repeat;
  width: 16px;
  height: 22px;
  flex-shrink: 0;
}

/* TODO remove icon from dom when it is not needed */
.Iconundefined {
  display: none;
}
/*************/
/* ViewletProblems.css */
/*************/
.Problems {
  color: white;
}
/*************/
/* ViewletPanel.css */
/*************/
#Panel {
  display: grid;
  grid-template-rows: 35px 1fr;
  border-top: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--PanelBackground);
}

.Panel {
  background: var(--PanelBackground);
}

#PanelHeader {
  contain: strict;
}

#PanelTabs {
  display: flex;
  gap: 1rem;
  height: 100%;
}

.PanelTab {
  cursor: pointer;
  font-size: 11px;
  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
  text-transform: uppercase;
  height: 100%;
  line-height: 35px;
  /* color: rgba(231, 231, 231, 0.6); */
  color: var(--PanelTabForeground);
}

.PanelTab[aria-selected] {
  /* color: rgb(231, 231, 231); */
  color: var(--PanelTabActiveForeground);
  border-bottom-color: rgb(231, 231, 231);
}

.PanelTab:hover {
  color: var(--PanelTabHoverForeground);
}

#PanelContent {
  contain: strict;
}
/*************/
/* ViewletOutput.css */
/*************/
.Output:focus {
  outline: 1px solid red;
  outline-offset: -1px;
}

.ViewletOutput {
  white-space: pre;
  overflow-y: scroll;
  color: white;
}

.OutputContent:empty::before {
  content: '(empty file)';
  opacity: 0.3;
}
/*************/
/* ViewletLayout.css */
/*************/
.SashHorizontal,
.SashVertical {
  position: fixed;
  contain: strict;
  z-index: 1;
}

.SashHorizontal {
  height: 4px;
  cursor: row-resize;
}

.SashVertical {
  width: 4px;
  cursor: col-resize;
}
/*************/
/* ViewletKeyBindings.css */
/*************/
:root {
  --KeyBindingsEditorColor: #e1e2de;
}

.KeyBindings {
  color: var(--KeyBindingsEditorColor);
}

.KeyBindingsHeader {
  height: 50px;
  contain: strict;
  display: grid;
  place-items: center;
  padding: 0 15px;
}

.Key {
  background-color: rgba(128, 128, 128, 0.17);
  border-color: rgba(51, 51, 51, 0.6) rgba(51, 51, 51, 0.6)
    rgba(68, 68, 68, 0.6);
  box-shadow: rgb(0 0 0 / 36%) 0px -1px 0px inset;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  vertical-align: middle;
  font-size: 11px;
  padding: 3px 5px;
  margin: 0 2px;
  contain: content;
}

.KeyBinding {
  color: rgb(204, 204, 204);
  display: flex;
  align-items: center;
  line-height: 10px;
}

.KeyBindingsTable {
  width: 100%;
  table-layout: fixed;
  padding: 0 15px;
  contain: content;
}

.KeyBindingsTableBody {
  white-space: pre;
  overflow-y: auto;
  user-select: text;
  contain: content;
}

.KeyBindingsTableRowEven,
.KeyBindingsTableRowOdd {
  height: 24px;
  contain: strict;
}

.KeyBindingsTableRowOdd {
  background: rgba(156, 162, 160, 0.04);
}

.KeyBindingsTableRowSelected {
  background: #515f59;
}

.KeyBindingsTableCell {
  overflow: hidden;
  text-overflow: ellipsis;
  contain: content;
}
/*************/
/* ViewletExtensions.css */
/*************/
/* progress bar based on the vscode progress bar https://github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/progressbar/progressbar.css */

.Extensions {
  padding-top: 5px;
  display: flex;
  flex-direction: column;
}

.Extensions[aria-busy='true']::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  animation: progress 4s linear infinite;
  width: 2%;
  height: 2px;
  background: rgb(14, 112, 192);
}

/* TODO extract progress since it is used also elsewhere -> no copy paste code */
@keyframes progress {
  from {
    transform: translateX(0%) scaleX(1);
  }
  50% {
    transform: translateX(2500%) scaleX(3);
  }
  to {
    transform: translateX(4900%) scaleX(1);
  }
}

/* TODO use html element as placeholder so that it can be trimmed and has other size as input text */

.ExtensionHeader {
  display: grid;
  padding: 5px 12px 6px 16px;
}

.ExtensionInput {
  background-color: rgb(36, 41, 42);
  color: rgb(225, 225, 225);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(55, 65, 63);
  padding: 2px 4px;
  width: 100%;
  font-size: 80%;
  line-height: 100%;
  height: 26px;
}

/* clears the 'X' from Chrome */
.ExtensionInput::-webkit-search-decoration,
.ExtensionInput::-webkit-search-cancel-button,
.ExtensionInput::-webkit-search-results-button,
.ExtensionInput::-webkit-search-results-decoration {
  display: none;
}

.ViewletExtensionMessage {
  color: rgb(188, 190, 190);
  font-size: 13px;
  padding: 5px 9px 5px 16px;
}

.ExtensionListWrapper {
  flex: 1;
  contain: strict;
  position: relative;
}

.ExtensionList {
  flex: 1;
  contain: strict;
  position: relative;

  /* TODO investigate whether or not it makes sense to create another layer here */
  /* transform: translate3d(0px, 0px, 0px);
  will-change: top; */
}

.ExtensionListItem {
  text-decoration: none;
  padding: 0 1rem;
  display: flex;
  gap: 14px;
  height: 62px;
  align-items: center;
  contain: strict;
  /* TODO use color from color theme */
  color: rgb(188, 190, 190);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.ExtensionListItem:hover {
  background: rgba(64, 92, 80, 0.2);
}

#ExtensionActive {
  /* background: rgba(64, 92, 80, 0.2); */
  background: var(--ExtensionListItemActive, #515f59);
  color: white;
}

.ExtensionListItem[data-state='disabled'] {
  color: #606363;
}

.ExtensionListItem[data-state='disabled'] .ExtensionIcon {
  opacity: 0.5;
}

.ExtensionDetail {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
}

.ExtensionIcon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.ExtensionName {
  text-overflow: ellipsis;
  white-space: nowrap;
  /* color: rgb(188, 190, 190); */
  font-weight: 700;
  font-size: 13px;
  padding-right: 11px;
}

.ExtensionDescription {
  height: 18px;
  font-size: 13px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 11px;
}

.ExtensionFooter {
  display: flex;
  justify-content: space-between;
}

.ExtensionAuthorName {
  /* TODO compute automatically like vscode (opacity 0.9) */
  /* const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme));
  collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`);
  const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme));
  collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`); */
  /* color: #909593; */
  font-size: 90%;
  font-weight: 600;
}

.ExtensionActionInstall {
  background: #2f6260;
  color: white;
  border: none;
  cursor: inherit;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  /* padding: 4px; */
  /* contain: strict; */
}

.ExtensionActionInstall:hover {
  background: #387674;
}

.ExtensionActionManage {
  all: unset;
  width: 16px;
  height: 16px;
  contain: strict;
  background: #c5c5c5;
  -webkit-mask: url(/language-basics-r/d6f2431/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
  mask: url(/language-basics-r/d6f2431/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
}

.NegativeMargin {
  contain: strict;
}
/*************/
/* ViewletExtensionDetail.css */
/*************/
.ExtensionDetail {
  color: white;
  user-select: text;
  overflow-y: auto;
}

.ExtensionDetailMain {
  width: 80%;
  margin: 0 auto;
  contain: content;
  display: flex;
  flex-direction: column;
}

.ExtensionDetail::-webkit-scrollbar {
  width: 10px;
}

.ExtensionDetail::-webkit-scrollbar-track {
  background: transparent;
}

.ExtensionDetail::-webkit-scrollbar-thumb {
  background: var(--EditorScrollBarBackground);
}

.ExtensionDetail::-webkit-scrollbar-thumb:hover {
}

.ExtensionDetailHeader {
  height: 180px;
  width: 100%;
  contain: strict;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  flex-shrink: 0;
  padding: 20px 0;
}

.ExtensionDetailHeaderDetails {
  overflow: hidden;
}

.ExtensionDetailName {
  font-size: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}

.ExtensionDetailDescription {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 10px;
}

.ExtensionDetailIcon {
  width: 150px;
  height: 150px;
  contain: strict;
}
/*************/
/* ViewletExplorer.css */
/*************/
.ListItems {
  user-select: none;
}

.ListItems.DropTarget {
  background: darkblue;
}

.TreeItem {
  cursor: pointer;
  color: var(--TreeItemForeground, rgb(188, 190, 190));
  padding-left: 11px;
  display: flex;
  gap: 4px;
  height: 22px;
  line-height: 22px;
  contain: strict;
  width: 100%;
  display: flex;
}

/* .TreeItem:focus {
  background: rgba(59, 71, 66, 0.5);
} */

#TreeItemActive {
  background: rgba(59, 71, 66, 0.5);
}

.TreeItem [class^='Icon'] {
  content: ' ';
  contain: strict;
  pointer-events: none;
  background-size: 16px;
  background-position: 0;
  background-repeat: no-repeat;
  width: 16px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
}

.TreeItem:hover {
  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
}

/* .TreeItem.Hover {
  background: rgba(64, 92, 80, 0.2);
} */

.TreeItem[aria-level='1'] {
  padding-left: 1rem;
}

.TreeItem[aria-level='2'] {
  padding-left: 2rem;
}

.TreeItem[aria-level='3'] {
  padding-left: 3rem;
}

.TreeItem[aria-level='4'] {
  padding-left: 4rem;
}

.TreeItem[aria-level='5'] {
  padding-left: 5rem;
}

.TreeItem[aria-level='6'] {
  padding-left: 6rem;
}

.TreeItem[aria-level='7'] {
  padding-left: 7rem;
}

.TreeItem[aria-level='8'] {
  padding-left: 8rem;
}

.TreeItem[aria-level='9'] {
  padding-left: 9rem;
}

.TreeItem[aria-level='10'] {
  padding-left: 10rem;
}

.TreeItem[aria-level='11'] {
  padding-left: 11rem;
}

.TreeItem[aria-level='12'] {
  padding-left: 12rem;
}

.TreeItem[aria-level='13'] {
  padding-left: 13rem;
}

.TreeItem[aria-level='14'] {
  padding-left: 14rem;
}

.TreeItem[aria-level='14'] {
  padding-left: 14rem;
}

.TreeItem[aria-level='15'] {
  padding-left: 15rem;
}

.TreeItem[aria-level='16'] {
  padding-left: 16rem;
}

.TreeItem[aria-level='17'] {
  padding-left: 17rem;
}

.TreeItem[aria-level='18'] {
  padding-left: 18rem;
}

.TreeItem[aria-level='19'] {
  padding-left: 19rem;
}

/* TODO support arbitrary depth */

.TreeItem[aria-level='20'] {
  padding-left: 20rem;
}

.DropTarget {
  background: rgba(0, 0, 90, 0.5);
}
/*************/
/* ViewletEditorImage.css */
/*************/
.EditorImage {
  cursor: grab;
  touch-action: none;
}

.ViewletImage {
  /* width: 100%; */
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

.ImageWrapper {
  width: 100%;
  height: 100%;
  contain: strict;
  transform-origin: top left;
}

.Dragging {
  cursor: grabbing;
}
/*************/
/* ViewletEditorFindWidget.css */
/*************/
.EditorFindWidget {
  background: var(--ActivityBarBackground);
  z-index: 1;
  color: wheat;
  display: flex;
  align-items: center;
  padding: 0 4px;
  position: absolute;
}

.EditorFindWidgetMatchCount {
  width: 70px;
  white-space: nowrap;
  flex-shrink: 0;
  contain: strict;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 3px;
}

.EditorFindWidgetButton {
  width: 25px;
  height: 25px;
  contain: strict;
  flex-shrink: 0;
}

.EditorFindWidgetButton:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.EditorFindWidgetButton:focus-visible {
  outline: 1px solid green;
  outline-offset: -1px;
}
/*************/
/* ViewletEditorCompletion.css */
/*************/
#Completions {
  background: var(--CompletionListBackground, #282e2f);
  color: var(--CompletionListForeground, white);
  user-select: none;
  font-size: 15px;
  pointer-events: all;
  border: 1px solid;
  border-color: var(--CompletionListBorder, #95a29d);
  font-family: var(--EditorFontFamily);
}

.EditorCompletionItem {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  contain: strict;
  gap: 5px;
}

.EditorCompletionItem:hover {
  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
}

[class^='ColoredMaskIcon'] {
  width: 20px;
  height: 20px;
  contain: strict;
  display: block;
  background: currentColor;
  color: var(--TitleBarForeground, rgb(204, 204, 204));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px;
  -webkit-mask-position: 50% 50%;
  pointer-events: none;
}

.EditorCompletionItem.Focused,
#CompletionListItemActive {
  background: var(--CompletionListItemActiveBackground, #405c50);
  color: var(--CompletionListItemActiveForeground);
}

/* TODO maybe put this all into editor */

/* Rename Widget */
.RenameWidget {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}

/* Error Widget */
.EditorWidgetError {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  background: rgb(37, 35, 35);
  pointer-events: auto;
}

/* Alert  */
.AriaAlert {
  position: absolute;
  left: -999em;
  top: 0;
}

.monaco-aria-container {
  width: 0;
  height: 0;
}
/*************/
/* ViewletDebugConsole.css */
/*************/
.DebugConsole {
  color: white;
}
/*************/
/* ViewletActivityBar.css */
/*************/
#ActivityBar {
  background: var(--ActivityBarBackground);
  color: var(--ActivityBarForeground);
}

#ActivityBar {
  /* display: grid; */
  /* align-content: space-between; */
  display: flex;
  flex-direction: column;
}

/* #ActivityBar:focus-within {
  border: 1px solid rgba(62, 100, 170, 0.575);
} */

/* #ActivityBarItemsTop,
#ActivityBarItemsBottom {
  contain: content;
  display: grid;
  grid-auto-rows: 48px;
} */

.ActivityBarItem {
  position: relative;
  outline: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px;
  mask-size: 24px;
  /* background: var(--ActivityBarBackground); */
  position: relative;
  width: 48px;
  height: 48px;
  contain: strict;
  /* margin-top: 100px; */
  flex-shrink: 0;
}

.ActivityBarItem[title='Settings'] {
  margin-top: auto;
}

.ActivityBarItem:hover {
  /* background: #878f8c; */
}

.ActivityBarItem[aria-selected='true'],
.ActivityBarItem:hover {
  color: var(--ActivityBarActiveForeground);
}

.ActivityBarItem[aria-selected='true'] {
  background: var(--ActivityBarActiveBackground);
}

.ActivityBarItem:focus-visible {
  /* background: var(--ActivityBarActiveBackground); */
  color: var(--ActivityBarActiveForeground);
}

.ActivityBarItemIcon {
  position: absolute;
  inset: 0;
  background: currentColor;
  /* filter: 1; */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px;
  mask-size: 24px;
}

/* .ActivityBarItem:focus .ActivityBarItemIcon,
.ActivityBarItem:hover .ActivityBarItemIcon,
.ActivityBarItem[aria-selected] .ActivityBarItemIcon {
  filter: none;
} */

.ActivityBarItemBadge {
  background: var(--BadgeBackground);
  border-radius: 100%;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: var(--BadgeForeground);
  font-size: 9px;
  font-weight: 600;
}
/*************/
/* Viewlet.css */
/*************/
.Viewlet {
  contain: strict;
  flex: 1;
}

.ViewletError {
  color: lightgray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  width: 100%;
  text-align: center;
}
/*************/
/* Notification.css */
/*************/
/* #Notifications {
  width: 100%;
  height: 100%;
} */

.Notification {
  color: white;
  background: red;
  z-index: 999;
  background: black;
  pointer-events: all;
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 250px;
  height: 75px;
  padding: 10px 5px;
  background: rgb(40, 46, 47);
  box-shadow: rgb(0 0 0 / 36%) 0px 0px 8px 2px;
}

.NotificationMessage {
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  user-select: text;
  margin: 0;
  padding: 0;
}

.NotificationOption {
  color: rgb(255, 255, 255);
  background-color: rgb(47, 98, 96);
  width: fit-content;
  width: -moz-fit-content;
  padding: 5px 10px;
  display: inline-block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
/*************/
/* MonacoList.css */
/*************/
.MonacoList {
}

.ListItem {
}

.ListItems {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  contain: strict;
}
/*************/
/* Mobile.css */
/*************/
body {
  /* Disables pull-to-refresh since it interferes with scrolling */
  overscroll-behavior: contain;

  /* Disable tap highlight on chrome android */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 600px) {
  #QuickPick {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  #QuickPick {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
  }
}
/*************/
/* Menu.css */
/*************/
/* TODO very much copy paste from ContextMenu.css */

.Menu {
  top: 0;
  left: 0;
  position: absolute;
  background: var(--MenuBackground, rgb(60, 60, 60));
  color: var(--MenuForeground, white);
  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
  user-select: none;
  min-width: 150px;
  /* width: 150px; */
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  z-index: 1;
  outline: none;
  pointer-events: auto;
}

.MenuItem {
  /* border: thin solid transparent; */
  /* TODO using px and rem -> decide */
  height: 28px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  outline: none;
  display: flex;
  contain: content;
}

.MenuItem.Focused {
  background: var(--MenuItemHoverBackground, #687f7b33);
  color: var(--MenuItemHoverForeground, inherit);
  outline: none;
}

.MenuItem[aria-checked='true']::before {
  content: '';
  position: absolute;
  top: calc((1.8rem - 0.75rem) / 2);
  left: calc((1.8rem - 0.75rem) / 2);
  width: 0.75rem;
  height: 0.75rem;
  background: orchid;
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/check.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.75rem;
  mask-size: 0.75rem;
  background: currentColor;
}

.MenuItem[aria-haspopup='true']::after {
  width: 16px;
  height: 16px;
  content: '';
  display: block;
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/chevron-right.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  background: currentColor;
  margin-left: auto;
  margin-right: -20px;
}

.MenuItem[disabled] {
  opacity: 0.4;
}

.MenuItemSeparator {
  list-style: none;
  height: 16px;
  position: relative;
}

.MenuItemSeparator::after {
  position: absolute;
  content: '';
  display: block;
  width: calc(100% - 1.6rem);
  height: 1px;
  background: rgb(136, 136, 136);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*************/
/* Markdown.css */
/*************/
/* based on https://github.com/sindresorhus/github-markdown-css/blob/ec90c8c72e77ca5f0a6b048514a11525808d00bd/github-markdown-light.css (License MIT) */

:root {
  --MarkdownHeadingUnderlineColor: rgba(255, 255, 255, 0.18);
  --MarkdownColor: #e1e2de;
}

.Markdown {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: var(--MarkdownColor);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  contain: content;
}

.Markdown details,
.Markdown figcaption,
.Markdown figure {
  display: block;
}

.Markdown summary {
  display: list-item;
}

.Markdown [hidden] {
  display: none !important;
}

.Markdown a {
  background-color: transparent;
  color: #0969da;
  text-decoration: none;
}

.Markdown a:active,
.Markdown a:hover {
  outline-width: 0;
}

.Markdown abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

.Markdown b,
.Markdown strong {
  font-weight: 600;
}

.Markdown dfn {
  font-style: italic;
}

.Markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--MarkdownHeadingUnderlineColor);
}

.Markdown mark {
  background-color: #fff8c5;
  color: #24292f;
}

.Markdown small {
  font-size: 90%;
}

.Markdown sub,
.Markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.Markdown sub {
  bottom: -0.25em;
}

.Markdown sup {
  top: -0.5em;
}

.Markdown img {
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: #ffffff;
}

.Markdown code,
.Markdown kbd,
.Markdown pre,
.Markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

.Markdown figure {
  margin: 1em 40px;
}

.Markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid hsla(210, 18%, 87%, 1);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #d0d7de;
  border: 0;
}

.Markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.Markdown [type='button'],
.Markdown [type='reset'],
.Markdown [type='submit'] {
  -webkit-appearance: button;
}

.Markdown [type='button']::-moz-focus-inner,
.Markdown [type='reset']::-moz-focus-inner,
.Markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.Markdown [type='button']:-moz-focusring,
.Markdown [type='reset']:-moz-focusring,
.Markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.Markdown [type='checkbox'],
.Markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

.Markdown [type='number']::-webkit-inner-spin-button,
.Markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}

.Markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

.Markdown [type='search']::-webkit-search-cancel-button,
.Markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

.Markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

.Markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

.Markdown a:hover {
  text-decoration: underline;
}

.Markdown hr::before {
  display: table;
  content: '';
}

.Markdown hr::after {
  display: table;
  clear: both;
  content: '';
}

.Markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}

.Markdown td,
.Markdown th {
  padding: 0;
}

.Markdown details summary {
  cursor: pointer;
}

.Markdown details:not([open]) > *:not(summary) {
  display: none !important;
}

.Markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  line-height: 10px;
  color: #24292f;
  vertical-align: middle;
  background-color: #f6f8fa;
  border: solid 1px rgba(175, 184, 193, 0.2);
  border-bottom-color: rgba(175, 184, 193, 0.2);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
}

.Markdown h1,
.Markdown h2,
.Markdown h3,
.Markdown h4,
.Markdown h5,
.Markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.Markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--MarkdownHeadingUnderlineColor);
}

.Markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}

.Markdown h4 {
  font-weight: 600;
  font-size: 1em;
}

.Markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}

.Markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: #57606a;
}

.Markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}

.Markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: #57606a;
  border-left: 0.25em solid #d0d7de;
}

.Markdown ul,
.Markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

.Markdown ol ol,
.Markdown ul ol {
  list-style-type: lower-roman;
}

.Markdown ul ul ol,
.Markdown ul ol ol,
.Markdown ol ul ol,
.Markdown ol ol ol {
  list-style-type: lower-alpha;
}

.Markdown dd {
  margin-left: 0;
}

.Markdown tt,
.Markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-size: 12px;
}

.Markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}

.Markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.Markdown ::placeholder {
  color: #6e7781;
  opacity: 1;
}

.Markdown input::-webkit-outer-spin-button,
.Markdown input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.Markdown [data-catalyst] {
  display: block;
}

.Markdown > *:first-child {
  margin-top: 0 !important;
}

.Markdown > *:last-child {
  margin-bottom: 0 !important;
}

.Markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.Markdown .absent {
  color: #cf222e;
}

.Markdown .anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}

.Markdown .anchor:focus {
  outline: none;
}

.Markdown p,
.Markdown blockquote,
.Markdown ul,
.Markdown ol,
.Markdown dl,
.Markdown table,
.Markdown pre,
.Markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}

.Markdown blockquote > :first-child {
  margin-top: 0;
}

.Markdown blockquote > :last-child {
  margin-bottom: 0;
}

.Markdown sup > a::before {
  content: '[';
}

.Markdown sup > a::after {
  content: ']';
}

.Markdown h1 .octicon-link,
.Markdown h2 .octicon-link,
.Markdown h3 .octicon-link,
.Markdown h4 .octicon-link,
.Markdown h5 .octicon-link,
.Markdown h6 .octicon-link {
  color: #24292f;
  vertical-align: middle;
  visibility: hidden;
}

.Markdown h1:hover .anchor,
.Markdown h2:hover .anchor,
.Markdown h3:hover .anchor,
.Markdown h4:hover .anchor,
.Markdown h5:hover .anchor,
.Markdown h6:hover .anchor {
  text-decoration: none;
}

.Markdown h1:hover .anchor .octicon-link,
.Markdown h2:hover .anchor .octicon-link,
.Markdown h3:hover .anchor .octicon-link,
.Markdown h4:hover .anchor .octicon-link,
.Markdown h5:hover .anchor .octicon-link,
.Markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}

.Markdown h1 tt,
.Markdown h1 code,
.Markdown h2 tt,
.Markdown h2 code,
.Markdown h3 tt,
.Markdown h3 code,
.Markdown h4 tt,
.Markdown h4 code,
.Markdown h5 tt,
.Markdown h5 code,
.Markdown h6 tt,
.Markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}

.Markdown ul.no-list,
.Markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}

.Markdown ol[type='1'] {
  list-style-type: decimal;
}

.Markdown ol[type='a'] {
  list-style-type: lower-alpha;
}

.Markdown ol[type='i'] {
  list-style-type: lower-roman;
}

.Markdown div > ol:not([type]) {
  list-style-type: decimal;
}

.Markdown ul ul,
.Markdown ul ol,
.Markdown ol ol,
.Markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.Markdown li > p {
  margin-top: 16px;
}

.Markdown li + li {
  margin-top: 0.25em;
}

.Markdown dl {
  padding: 0;
}

.Markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

.Markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.Markdown table th {
  font-weight: 600;
}

.Markdown table th,
.Markdown table td {
  padding: 6px 13px;
  border: 1px solid #d0d7de;
}

.Markdown table tr {
  background-color: #ffffff;
  border-top: 1px solid hsla(210, 18%, 87%, 1);
}

.Markdown table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

.Markdown table img {
  background-color: transparent;
}

.Markdown img[align='right'] {
  padding-left: 20px;
}

.Markdown img[align='left'] {
  padding-right: 20px;
}

.Markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}

.Markdown span.frame {
  display: block;
  overflow: hidden;
}

.Markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #d0d7de;
}

.Markdown span.frame span img {
  display: block;
  float: left;
}

.Markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: #24292f;
}

.Markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

.Markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

.Markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

.Markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

.Markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

.Markdown span.align-right span img {
  margin: 0;
  text-align: right;
}

.Markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

.Markdown span.float-left span {
  margin: 13px 0 0;
}

.Markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

.Markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

.Markdown code,
.Markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(175, 184, 193, 0.2);
  border-radius: 6px;
}

.Markdown code br,
.Markdown tt br {
  display: none;
}

.Markdown del code {
  text-decoration: inherit;
}

.Markdown pre code {
  font-size: 100%;
}

.Markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.Markdown .highlight {
  margin-bottom: 16px;
}

.Markdown pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border-radius: 6px;
}

.Markdown pre code,
.Markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
/*************/
/* Main.css */
/*************/
#Main {
  background: var(--MainBackground);
  display: flex;
  flex-direction: column;
  position: absolute;
}

#MainContent {
  contain: strict;
  flex: 1;
  display: flex;
}

.EditorText {
  color: white;
  white-space: pre;
}

.EditorImage {
  max-width: 100%;
}

.Clock {
  color: white;
}
/*************/
/* Label.css */
/*************/
.Label {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
/*************/
/* InputBox.css */
/*************/
.InputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground);
  border: 1px solid rgb(55, 65, 63);
  padding: 4px;
  color: var(--InputBoxForeground);
  font-size: 13px;
  contain: strict;
}

/* hide small "x" on chromium  */
.InputBox::-webkit-search-decoration,
.InputBox::-webkit-search-cancel-button,
.InputBox::-webkit-search-results-button,
.InputBox::-webkit-search-results-decoration {
  display: none;
}
/*************/
/* ImagePreview.css */
/*************/
.ImagePreview {
  pointer-events: all;
  position: fixed;
  top: 0;
  left: 0;
  width: 170px;
  margin: 0;
  background: white;
  display: flex;
  flex-direction: column;
  padding: 3px;
}

.ImagePreview::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  display: block;
  border-left: 11px solid white;
  position: absolute;
  right: 0;
  top: 22px;
  right: -11px;
}

.ImagePreviewImage {
  min-height: 40px;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(
      45deg,
      #ccc 25%,
      transparent 25%,
      transparent 75%,
      #ccc 75%,
      #ccc
    ),
    linear-gradient(
      45deg,
      #ccc 25%,
      transparent 25%,
      transparent 75%,
      #ccc 75%,
      #ccc
    );
}

.ImagePreviewCaption {
  height: 20px;
  color: gray;
  text-align: center;
  font-size: 10px;
  line-height: 20px;
}
/*************/
/* Highlight.css */
/*************/
@keyframes highlight {
  0% {
    outline-color: #3d5252;
  }
  100% {
    outline-color: transparent;
  }
}

.Highlight {
  outline: 1px solid;
  outline-offset: -1px;
  animation: highlight 1s;
  /* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
  animation-timing-function: ease-in;
}
/*************/
/* Focus.css */
/*************/
/* TODO hide outline on click */

/* [tabindex='0']:focus-visible,
[tabindex='0']:focus,
[tabindex='-1']:focus-visible {
  outline: var(--FocusOutline);
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
} */

* {
  outline: none;
}

.InputBox:focus {
  border-color: var(--FocusOutline);
}

.FocusOutline {
  outline: var(--FocusOutline);
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}
/*************/
/* EditorTabs.css */
/*************/
.MainTabs {
  height: 35px;
  background: rgb(40, 46, 47);
  display: flex;
  contain: strict;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(
    --TabsBackground
  ); /* TODO variable name should match class name */
  /* TODO investigate perf */
  /* contain: children; */
}

.MainTab {
  border-right: 1px solid rgb(34, 34, 34);
  background: var(--TabBackground);
  color: var(--TabForeground);
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  /* contain: content; */
}

.MainTab[aria-selected='true'] {
  border-right: 1px solid rgb(34, 34, 34);
  background: var(--TabActiveBackground);
  color: var(--TabActiveForeground);
}

/* should be kept in sync with explorer */
.MainTab::before {
  content: ' ';
  width: 16px;
  height: 16px;
  display: inline-block;
  padding-right: 4px;
  background-repeat: no-repeat;
  line-height: inherit;
  margin-top: -3px; /* TODO why this? */
}

.MainTab::before {
  content: ' ';
  contain: strict;
  width: 22px;
  height: 22px;
  background-size: 16px;
  background-position: 0;
  background-repeat: no-repeat;
  padding-right: 6px;
  width: 16px;
  height: 22px;
  line-height: inherit !important;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  flex-shrink: 0;
  background-size: cover;
  background-size: 16px;
  background-position: 0;
}

.ManiTabLabel {
  pointer-events: none;
  contain: content;
}

.EditorTabCloseButton {
  contain: strict;
  border: none;
  padding: 0;
  width: 23px;
  height: 23px;
  position: relative;
  background: transparent;
  border-radius: 4px;
  display: flex;
  margin-left: 4px;
}

.EditorTabCloseButton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--TabActiveForeground);
  -webkit-mask-image: url(/language-basics-r/d6f2431/icons/icon-close.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

.EditorTabCloseButton:hover {
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.1s;
}

.EditorTabStatus {
  width: 22px;
  height: 15px;
}

/* TODO investigate whether classNames vs data-attribute makes a difference here (performance-wise) */
.EditorTabStatus[data-status='1'] /* default */ {
  display: none;
}

.EditorTabStatus[data-status='2'] /* modified */ {
  background: white;
  -webkit-mask: url(/packages/renderer-process/assets/icons/circle-filled.svg)
    100% 50% / 15px no-repeat;
}
/*************/
/* EditorHover.css */
/*************/
#EditorHover {
  top: 0;
  left: 0;
  position: absolute;
  background: lightblue;
}
/*************/
/* Editor.css */
/*************/
/* TODO this should not be global */
.Editor {
  width: 100%;
  height: 100%;
  background: var(--MainBackground);
  color: white;
  outline: none;
  border: none;
  font-family: var(--EditorFontFamily);
  position: relative;
  white-space: pre;
  font-size: var(--EditorFontSize);
  letter-spacing: var(--EditorLetterSpacing);
  tab-size: 2;
  font-display: block;
  cursor: text;
}

.EditorLayers {
  contain: strict;
  /* contain: content; */
  width: 100%;
  height: 100%;
}

.EditorRows {
  white-space: pre;
  width: 100%;
  height: 100%;
  contain: strict;
}

.EditorRow {
  display: block;
  height: var(--EditorLineHeight);
  line-height: var(--EditorLineHeight);
  /* contain: strict; */
}

.Editors {
  flex: 1;
}

.EditorCursor {
  width: 2px;
  height: var(--EditorLineHeight);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--EditorCursorBackground, red);
  pointer-events: none;
  contain: strict;
  /* border-color: #a8df5a; */
}

.EditorDiagnostic {
  position: absolute;
  top: 0;
  left: 0;
  contain: strict;
  pointer-events: none;
}

.EditorDiagnostic {
  /* background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2F…%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left; */

  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23b64e4e'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
}

.ScrollBarDiagnostics {
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 14px;
}

.ScrollBarDiagnostic {
  height: 5px;
  background: red;
  width: 100%;
  position: absolute;
}

.EditorInput {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 0;
  border: 0;
  font-size: 1px; /* needs to be at least one pixel because otherwise chrome will not emit input events */
  top: -9999px;
  left: -9999px;
  /* contain: strict; */
  /* visibility: hidden; */
}

/* interesting: could do transform via css -> only set data-row, data-column on editor cursor */
/* .EditorCursor::after {
  position: absolute;
  content: attr(data-row-index);
} */

/* great css solution -> only nesting is bad -> can be avoided?
.Editor:not(:focus-within) .EditorCursor {
  display: none;
} */

.EditorSelection {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--EditorSelectionBackground);
}

.Token {
  contain: content;
}

.ScrollBar,
.ScrollBarSmall {
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  bottom: 0;
  contain: strict;
  cursor: default;
}

.ScrollBarSmall {
  width: 10px;
}

.ScrollBarThumb {
  width: 100%;
  /* height: 40px; */
  position: absolute;
  contain: strict;
  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
}

.LayerCursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ::highlight(cursor) {
  background-color: #31e0e0;
  color: blue;
} */

.Token.EditorGoToDefinitionLink {
  color: #4e94ce !important;
  text-decoration: underline;
  cursor: pointer;
}

.EditorOverlayMessage {
  padding: 1px 4px;
  background-color: #063b49;
  border: 1px solid #007acc;
  color: white;
  pointer-events: all;
  user-select: text;
}
/*************/
/* Dialog.css */
/*************/
#Dialog {
  pointer-events: all;
  user-select: text;
  padding: 0;
  width: 90%;
  height: 65%;
  display: flex;
  flex-direction: column;
}

#Dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

#DialogTitle {
  background: #ecf0f1;
  color: #484b4c;
  padding: 1rem;
  margin: 0;
}

#DialogBody {
  padding: 1rem;
  contain: strict;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#DialogBodyErrorMessage {
  margin: 0;
}

#DialogBodyErrorCodeFrame {
  white-space: pre;
}

#DialogBodyErrorStack {
  white-space: pre-wrap;
  max-width: 100%;
  overflow-x: auto;
}
/*************/
/* ContextMenu.css */
/*************/
:root {
  --ContextMenuBackground: rgb(60, 60, 60);
}

#ContextMenu {
  top: 0;
  left: 0;
  position: absolute;
  background: var(--ContextMenuBackground);
  color: var(--ContextMenuForeground, white);
  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
  user-select: none;
  min-width: 150px;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  z-index: 1;
  outline: none;
  pointer-events: all;
  contain: strict;
}

#MenuBackDrop {
  position: fixed;
  cursor: initial;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}
/*************/
/* BackDrop.css */
/*************/
#BackDrop {
  position: fixed;
  cursor: initial;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}
/*************/
/* Animation.css */
/*************/
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.AnimationSpin {
  animation: spin 2s linear infinite;
}