.react-root-element {
  --product-color: #ac0f71;
  --product-color-light: #c3428f;
}

.app-nav {
  z-index: 2;
}

.gc-tree-item>a>div[ent]::before {
  content: "Upd";
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 10px;
  background: rgb(247, 167, 17);
  font-size: 10px;
  color: white;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1em;
  height: 19px;
  line-height: 19px;
}

.gc-tree-item>a>div[beta]::before {
  content: "Beta";
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 10px;
  background: rgb(0, 194, 214);
  font-size: 10px;
  color: white;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1em;
  height: 19px;
  line-height: 19px;
}

.gc-tree-item>a>div[new]::before {
  content: "New";
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 10px;
  background: rgb(33, 115, 70);
  font-size: 10px;
  color: white;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1em;
  height: 19px;
  line-height: 19px;
}

.gc-tree-item>a>div[prev]::before {
  content: "Prev";
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 10px;
  background: #6A4C9C;
  font-size: 10px;
  color: white;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1em;
  height: 19px;
  line-height: 19px;
}

html,
body {
  background: #fff;
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.4em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  color: #202030;
  font-size: 1.25rem;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

p {
  line-height: 1.75em;
  margin-bottom: 0.75rem;
}

li {
  margin-left: 15px;
}

p {
  line-height: 1.75em;
  margin-bottom: 0.75rem;
  color: #202030;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

strong {
  line-height: 1.75em;
  margin-bottom: 0.75rem;
  color: #0d0d0e;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

pre {
  line-height: 1.75em;
  margin-bottom: 0.75rem;
  color: #0d0d0e;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.table-th-new {
  color: red;
}

.description-title h1 {
  border-left: 4px solid var(--product-color);
}

.gc-playground_description {
  font-size: 14px;
  line-height: 1.75em;
}

.gc-playground_description P {
  font-size: 14px;
  line-height: 1.75em;
}

.content-text li {
  font-size: 14px;
  line-height: 1.75em;
}

.gc-playground_open-in-new-tab_link {
  margin: 0;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.gc-tab-scroll-container {
  display: flex;
  align-items: center;
}

.app-sample-btn {
  display: none;
  width: 0px;
  margin-right: 0px;
}

.app-sample-btn a {
  padding: 0px;
  border: 0px;
  width: 0px;
}

.btn-code_edit-in-code-mine {
  color: var(--product-color);
  border-color: var(--product-color);
}

body[data-theme="GrapecityCNTemplate"] .app-main-container .app-sider-container .app-sider .tree_selector ul .gc-tree-item a {
  width: 100%;
  display: flex;
  padding-left: unset;
}

.app-menu-text_item a {
  text-transform: none;
}