/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
  --cst-head-bg-1: #b0bec5;
  --cst-head-bg-2: #cfd8dc;
  --cst-head-bg-txt: #000000;
  --cst-left-bg-1: #eceff1;
  --cst-left-bg-2: #cfd8dc;
  --cst-left-txt: #000000;
  --cst-main-bg-1: #ffffff;
  --cst-main-bg-2: #eceff1;
  --cst-main-clr: #000000;
  --cst-title-bg: #0074e8;
  --cst-table-head-bg: #cfd8dc;
  --cst-table-head-clr: #000000;
  --cst-table-border-clr: #bfc0c1;
  --cst-hr-border-clr: #cfd8dc;
  --cst-tr-even-bg: #eaeaea;
  --cst-tr-even-txt: #000000;
  --cst-code-block-bg: #cfd8dc;
  --cst-code-block-txt: #000000;
  --cst-token-operator: #0074e8;
  --cst-token-number: #0d47a1;
  --cst-token-punctuation: #af3bfb;
  --cst-token-console: #ff6f00;
  --cst-token-string: #33691e;
  --cst-token-doctype: #8f12e2;
  --cst-token-tag: #d60d2f;
  --cst-token-attr-name: #da8d00;
  --cst-token-variable: #4d5158;
  --cst-blockquote-txt: #6a737d;
  --cst-blockquote-bc: #dadde1;
  --cst-h1-font-size: 38px;
  --cst-h2-font-size: 28px;
  --cst-h3-font-size: 22px;
}

html[data-theme='dark'] {
  --cst-head-bg-1: #263238;
  --cst-head-bg-2: #37474f;
  --cst-head-bg-txt: #ffffff;
  --cst-left-bg-1: #455a64;
  --cst-left-bg-2: #37474f;
  --cst-left-txt: #ffffff;
  --cst-main-bg-1: #546e7a;
  --cst-main-bg-2: #455a64;
  --cst-main-clr: #ffffff;
  --cst-title-bg: #ffd54f;
  --cst-table-head-bg: #37474f;
  --cst-table-head-clr: #ffffff;
  --cst-tr-even-bg: #678492;
  --cst-tr-even-txt: #000000;
  --cst-code-block-bg: #37474f;
  --cst-code-block-txt: #ffffff;
  --cst-token-operator: rgb(137, 221, 255);
  --cst-table-border-clr: #bfc0c1;
  --cst-hr-border-clr: #404040;
  --cst-token-number: #ffa000;
  --cst-token-punctuation: #c792ea;
  --cst-token-console: #ffcb6b;
  --cst-token-string: #c3e88d;
  --cst-token-doctype: #c792ea;
  --cst-token-tag: #ff5572;
  --cst-token-attr-name: #ffcb6b;
  --cst-token-variable: #bfc7d5;
  --cst-blockquote-txt: #b7c1cc;
  --cst-blockquote-bc: #8d97a5;
}

::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888888 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555555 !important;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.navbar {
  background: linear-gradient(90deg, var(--cst-head-bg-1), var(--cst-head-bg-2));
  color: var(--cst-head-bg-txt);
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
}

[class^="docSidebarContainer"] {
  border-right: none !important;
}

[class^="sidebar"] {
  background: linear-gradient(var(--cst-left-bg-1) 50%, var(--cst-left-bg-2));
  color: var(--cst-left-txt);
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
}

[class^="codeBlockLines"] {
  background-color: var(--cst-code-block-bg) !important;
  color: var(--cst-code-block-txt) !important;
}

[class^="codeBlockLines"] div {
  color: var(--cst-code-block-txt) !important;
}

[class^="codeBlockLines"] .token.operator, [class^="codeBlockLines"] .token.constant{
  color: var(--cst-token-operator) !important;
}

[class^="codeBlockLines"] .token.punctuation{
  color: var(--cst-token-punctuation) !important;
}

[class^="codeBlockLines"] .token.number{
  color: var(--cst-token-number) !important;
}

[class^="codeBlockLines"] .token.method {
  color: var(--cst-token-operator) !important;
}

[class^="codeBlockLines"] .token.function {
  color: var(--cst-token-operator) !important;
}

[class^="codeBlockLines"] .token.property-access {
  color: var(--cst-token-operator) !important;
}

[class^="codeBlockLines"] .token.console.class-name {
  color: var(--cst-token-console) !important;
}

[class^="codeBlockLines"] .token.string {
  color: var(--cst-token-string) !important;
}

[class^="codeBlockLines"] .token.doctype, [class^="codeBlockLines"] .token.style.language-css.selector,[class^="codeBlockLines"] .token.selector ,[class^="codeBlockLines"] .token.selector.pseudo-class, [class^="codeBlockLines"] .token.selector.pseudo-element,[class^="codeBlockLines"] .token.selector.attribute.value, [class^="codeBlockLines"] .token.selector.attribute {
  color: var(--cst-token-doctype) !important;
}

[class^="codeBlockLines"] .token.tag {
  color: var(--cst-token-tag) !important;
}

[class^="codeBlockLines"] .token.tag.attr-name {
  color: var(--cst-token-attr-name) !important;
}

[class^="codeBlockLines"] .token.variable {
  color: var(--cst-token-variable) !important;
}


main {
  background: linear-gradient(90deg, var(--cst-main-bg-1),var(--cst-main-bg-2));
  color: var(--cst-main-clr);
}

blockquote {
  color: var(--cst-blockquote-txt);
  border-left: 6px solid var(--cst-blockquote-bc);
}  

h1 {
  font-size: var(--cst-h1-font-size) !important;
}

h2 {
  font-size: var(--cst-h2-font-size) !important;
}

h3 {
  font-size: var(--cst-h3-font-size) !important;
}

.menu .menu__link{
  color: var(--cst-left-txt);
}

.menu .menu__link.menu__link--active {
  color: var(--cst-title-bg);
}

.contents .contents__link:hover,
.contents .contents__link:hover code,
.contents .contents__link.contents__link--active,
.contents .contents__link.contents__link--active code {
  color: var(--cst-title-bg);
}

a,
a:hover {
  color: var(--cst-title-bg);
}

.pagination-nav .pagination-nav__link:hover {
  border-color: var(--cst-title-bg);
}

hr {
  border-color: var(--cst-hr-border-clr);
}

.footer {
  background: linear-gradient(90deg, var(--cst-head-bg-1), var(--cst-head-bg-2));
  color: var(--cst-head-bg-txt) !important;
  border-top: 1px solid var(--ifm-contents-border-color);
  z-index: 16;
}

table td, table th, .cst-table th {
  border-color: var(--cst-table-border-clr) !important;
}

table th {
  background-color: var(--cst-table-head-bg);
  color: var(--cst-table-head-clr);
}

table tr:nth-child(2n) {
  background: var(--cst-tr-even-bg) !important;
  color: var(--cst-tr-even-txt) !important;
}

.cst-table {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cst-table table {
  width: 100%;
  max-width: 730px;
  max-height: 250px;
}

.cst-table thead th {
  position: sticky;
  top: -1px;
  z-index: 1;
  /*for code blocks issue*/
}

.cst-table th:nth-child(1) {
  min-width: 110px;
}

.cst-table th:nth-child(2) {
  min-width: 80px;
}

.cst-table th:nth-child(3) {
  min-width: 200px;
}

.cst-table th:nth-child(4),
th:nth-child(5) {
  min-width: 120px;
}

.cst-table th:nth-child(6) {
  min-width: 130px;
}

.red-bg{
  background-color: red;
  color:white;
}

.green-bg{
  background-color: darkgreen;
  color:white;
}

.yellow-bg{
  background-color: yellow;
  color:black;
}