/*
Name: Ar
Description: Classic extended. 
Version: 1.1
Author: Andrea Dell'Orco
URL: http://www.adostudio.it/
*/

.crayon-theme-ar {
  border-width: 1px !important;
  border-color: #692912 !important;
  border-style: solid !important;
  text-shadow: none !important;
  background: #fdfdfd !important;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.crayon-theme-ar-inline {
  border-width: 1px !important;
  border-color: #692912 !important;
  border-style: solid !important;
  background: #ffffff !important;
}

@supports selector(li::marker) {
  .crayon-theme-ar .crayon-table {
    /* padding-left: 1.5rem !important; */
  }

  .crayon-theme-ar.crayon-syntax .crayon-ol {
    margin-left: 1.1rem;
  }

  .crayon-theme-ar ol li {
    counter-increment: counter;
    padding-left: 1.5rem;
  }

  .crayon-theme-ar li::marker {
    color: #ffffff !important;
    content: counter(counter);
    text-align: center;
  }

  .crayon-syntax pre {
    margin-left: 0.2rem;
  }

  .crayon-theme-ar .crayon-table .crayon-nums,
  .crayon-theme-ar li::before {
    background: #692912 !important;
    color: #ffffff !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
    border-right-color: #692912 !important;
    display: inline-block;
    content: "";
    position: absolute;
    width: 1.5rem;
    left: -1.2rem;
    top: 0;
    bottom: 0;
    z-index: -2;
  }
}

.crayon-theme-ar li {
  position: relative;
}

.crayon-theme-ar .crayon-code::selection {
  background: #bbeeda !important;
  color: #269b6c !important;
}

.crayon-theme-ar .crayon-code *::selection {
  background: #bbeeda !important;
  color: #269b6c !important;
}

.crayon-theme-ar *::selection {
  background: transparent !important;
}

.crayon-theme-ar .crayon-striped-line::after {
  content: "";
  background: #f9f0ea !important;
  position:absolute;
  left: 0.4rem;
  height: 1.4rem;
  width: calc(100% - 0.4rem);
  z-index: -1;
}

.crayon-theme-ar .crayon-striped-num,
.crayon-theme-ar .crayon-striped-line::before {
  color: #fff !important;
  background: #391407 !important;
}

.crayon-theme-ar .crayon-marked-line {
  background: #c7f1ed !important;
  border-width: 1px !important;
  border-color: #9ae7df !important;
}

.crayon-theme-ar .crayon-marked-num {
  color: #82dfc4 !important;
  background: #692912 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #202020 !important;
}

.crayon-theme-ar .crayon-marked-line.crayon-striped-line {
  background: #b7eee9 !important;
}

.crayon-theme-ar .crayon-marked-num.crayon-striped-num {
  background: #391407 !important;
  color: #82dfc4 !important;
}

.crayon-theme-ar .crayon-marked-line.crayon-top {
  border-top-style: solid !important;
}

.crayon-theme-ar .crayon-marked-num.crayon-top {
  border-top-style: solid !important;
}

.crayon-theme-ar .crayon-marked-line.crayon-bottom {
  border-bottom-style: solid !important;
}

.crayon-theme-ar .crayon-marked-num.crayon-bottom {
  border-bottom-style: solid !important;
}

.crayon-theme-ar .crayon-info {
  background: #6ebca5 !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #43977e !important;
  color: #ffffff !important;
}

.crayon-theme-ar .crayon-toolbar {
  background: #ffefea !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #000 !important;
}

.crayon-theme-ar .crayon-toolbar>div {
  float: left !important;
}

.crayon-theme-ar .crayon-toolbar .crayon-tools {
  float: right !important;
}

.crayon-theme-ar .crayon-title {
  color: #391407 !important;
}

.crayon-theme-ar .crayon-language {
  color: #391407 !important;
}

.crayon-theme-ar .crayon-button {
  background-color: transparent !important;
}

.crayon-theme-ar .crayon-button:hover {
  background-color: #e3c2b7 !important;
  color: #666;
}

.crayon-theme-ar .crayon-button.crayon-pressed:hover {
  background-color: #e3c2b7 !important;
  color: #666;
}

.crayon-theme-ar .crayon-button.crayon-pressed {
  background-color: #391407 !important;
  color: #fff;
}

.crayon-theme-ar .crayon-button.crayon-pressed:active {
  background-color: #e3c2b7 !important;
  color: #fff;
}

.crayon-theme-ar .crayon-button:active {
  color: #fff;
  background-color: #6ebca5 !important;
}

.crayon-theme-ar .crayon-pre .crayon-p {
  color: #b85c00 !important;
}

.crayon-theme-ar .crayon-pre .crayon-s {
  color: #008000 !important;
}

.crayon-theme-ar .crayon-pre .crayon-k {
  color: #800080 !important;
}

.crayon-theme-ar .crayon-pre .crayon-st {
  color: #800080 !important;
}

.crayon-theme-ar .crayon-pre .crayon-r {
  color: #800080 !important;
}

.crayon-theme-ar .crayon-pre .crayon-t {
  color: #800080 !important;
}

.crayon-theme-ar .crayon-pre .crayon-m {
  color: #800080 !important;
}

.crayon-theme-ar .crayon-pre .crayon-ta {
  color: #ff0000 !important;
}

.crayon-theme-ar .crayon-pre .crayon-i {
  color: #000 !important;
}

.crayon-theme-ar .crayon-pre .crayon-v {
  color: #002d7a !important;
}

.crayon-theme-ar .crayon-pre .crayon-e {
  color: #004ed0 !important;
}

.crayon-theme-ar .crayon-pre .crayon-cn {
  color: #ce0000 !important;
}

.crayon-theme-ar .crayon-pre .crayon-o {
  color: #004c9a !important;
}

.crayon-theme-ar .crayon-pre .crayon-h {
  color: #004c9a !important;
}

.crayon-theme-ar .crayon-pre .crayon-sy {
  color: #333 !important;
}

.crayon-theme-ar .crayon-pre .crayon-n {
  color: #666 !important;
  font-style: italic !important;
}

.crayon-theme-ar .crayon-pre .crayon-f {
  color: #999 !important;
}

.crayon-theme-ar .crayon-table {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* overflow: hidden !important; */
}

.crayon-theme-ar .crayon-pre .crayon-c {
  color: #000000 !important;
}

.crayon-theme-ar .crayon-pre {
  color: #000000 !important;
}

/* ///// Dark */


.dark-mode .crayon-theme-ar .crayon-toolbar {
  background-color: #e9e7e6 !important;
}

.dark-mode .crayon-theme-ar .crayon-line {
  background-color: rgba(61, 42, 26, 0.2) !important;
}

.dark-mode .crayon-theme-ar .crayon-striped-line {
  background-color: rgba(61, 42, 26, 0.1) !important;
}

.dark-mode .crayon-theme-ar .crayon-button:hover {
  background-color: #3ed5c3 !important;
}