html, body {
  height: 100%;
}

body {
  direction: rtl;
  font-family: Vazirmatn, sans-serif;
  background-color: #101010;
  color: #cccccc;
}

h4 {
  font-weight: bold;
}

h5 {
  color: #4db6ac;
}

.code-row {
  background-color: #2d2d2d;
}

ol li {
  padding-bottom: 10px;
}

.collection-item {
  color: #303f9f;
}

ul.bulleted {
  padding-right: 30px;
}
ul.bulleted-2 {
    padding-right: 30px;
}
ul.bulleted > li {
  list-style-type: initial;
}

ul.bulleted-2 > li {
  list-style-type: circle;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

#slide-out {
  background-color: #212121;
}

#toc {
  border: 0px;
  background-color: #212121;
}

#toc a {
  border: 0px;
}

#toc .collection-header {
  background-color: #212121;
  border-color: dimgray;
  color: #4db6ac;
}

#toc .active {
  font-weight: bold;
}

.grey-note {
  color: grey;
  font-style: italic;
}

#toc a.section-item {
  margin-right: 2em;
  font-size: small;
  border-right-style: solid;
  border-right-color: dimgray;
  border-right-width: 1px;
  background-color: #212121;
  color: #e0e0e0;
}

#toc a.last-item {
  margin-top: 3em;
  background-color: #212121;
  color: #616161;
}

#toc .chapter-item {
  background-color: #212121;
  color: #9e9e9e;
}

#toc .chapter-item.active {
  background-color: #212121;
  color: #ffffff;
}

/* scroll bar */

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 5px grey;  */
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #404040; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #383838; 
}

.switch label {
  color: #e0e0e0;
}

.switch label input[type=checkbox]+.lever {
  background-color: #101010;
}

.switch label input[type=checkbox]+.lever:after {
  background-color: #616161;
}

.sidenav-trigger {
  background-color: #424242;
}

.nav-wrapper {
  background-color: #212121;
}

nav ul a {
  color: #aaaaaa;
}

nav .brand-logo {
  font-weight: bold;
  margin-right: 10px;
  color: #aaaaaa;
}

@media screen and (max-width: 600px) {
  nav .brand-logo {
     font-size: large;
  }
}

#shortcutsTable td {
  text-align: right;
}

.modal {
  background-color: #212121;
}

.intro-start {
  background-color: #424242;
}

.pseudo-keyword {
  color: #cc99cd;
}
.pseudo-function {
  color: #f08d49;
}
.pseudo-code {
  color: #888888;
  font-style: italic;
}
.pseudo-var {
  font-weight: bold;
}
.pseudo-line-no {
  color: #666666;
}

.slide-frame {
  aspect-ratio: 480 / 389;
}