/* CSS Variables */
:root {
  --primary-color: #853891;
  --primary-light-color: #d8c0db;
  --primary-color2: #717cff;
  --primary-dark: #342bb7;
  --green-color: #1b5205;
  --green-light-color: #dbe4d9;
  --secondary-color: #b04ac0;
  --dark-color: #002240;
  --light-color: rgb(240, 240, 240);
  --shadow: 10px 10px 15px rgba(104, 104, 104, 0.8);
  --light-shadow: 5px 5px 7px rgba(104, 104, 104, 0.2);
  --success-color: #5cb85c;
  --error-color: #d9534f;
}

/* Nav */
.guideNav ul {
  padding: 0;
}
.guideNav li {
  margin: 5px;
  text-decoration: none;
}
.guideNav a:hover {
  background-color: var(--light-color);
}
.guideNav a {
  color: black;
  padding: 10px;
  text-decoration: none;
}
.guideNav a:hover {
  color: black;
  box-shadow: var(--light-shadow);
}
.activeLink {
  color: #495057;
  background-color: #fff !important;
  border-color: #dee2e6 #dee2e6 #fff;
  /* font-weight: 600; */
  box-shadow: var(--light-shadow);
  /* background-color: rgb(201, 201, 201); */
}

/* Instruction Section Image*/
.instructionImg {
}
.instructionImg img {
  width: 750px;
  box-shadow: var(--shadow);
}
@media screen and (max-width: 1650px) {
  .instructionImg img {
    width: 100%;
  }
}
/* Instruction Section */
.instructionSection {
}
.instructionSection h4 {
  text-align: center;
}
.instructionSection ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 45px;
}
.instructionSection ol li {
  padding: 5px;
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
.instructionSection ol li::before {
  content: counter(my-awesome-counter);
  color: var(--secondary-color);
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  /* transform: rotate(-10deg); */
  background: black;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}
.instructionSection a,
.instructionSection a:visited {
  color: black;
}

/* Section Example  */
.sectionExample {
  width: 100%;
}
.sectionExample .row {
}
.sectionExample img {
}

.imgCont img,
.ilkResim {
  width: 100% auto;
  box-shadow: var(--shadow);
}
@media screen and (max-width: 992px) {
  .imgCont img {
    width: 100%;
  }
}

.flex-inline {
  display: flex;
}
.flex-inline h4 {
  padding: 15px 0px 20px 10px;
}
.headerIcon {
  background-color: var(--primary-light-color);
  border-radius: 50%;
  padding: 15px;
  width: 50px;
  height: 50px;
  font-size: 1.3rem;
  text-align: center;
  color: var(--primary-color);
}
.headerIcon2 {
  background-color: var(--green-light-color);
  border-radius: 50%;
  padding: 15px;
  width: 50px;
  height: 50px;
  font-size: 1.3rem;
  text-align: center;
  color: var(--green-color);
}

/* Text Underline */
.underline {
  height: 0.25rem;
  width: 5rem;
  background: var(--secondary-color);
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.alignTop {
  margin-top: -100px;
}
@media screen and (max-width: 484px) {
  .alignTop {
    margin-top: 0px;
  }
}
.flex {
  display: flex !important;
  column-gap: 1px;
  padding-left: 50px;
  margin-bottom: 10px;
  height: 100%;
}
.flex abbr,
abbr {
  font-size: 2rem;
}
abbr[title] {
  border-bottom: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.countResponse {
  background-color: var(--primary-color);
  border-radius: 50%;
  width: 50px;
  text-align: center;
  margin-right: 10px;
}
.arrowRight {
}
.responseItem {
  margin-left: auto;
}
.highlight {
  border: 1px solid red;
  border-radius: 10px;
}
pre {
  padding-top: 50px !important;
  color: white !important;
  font-size: 1.1rem;
}

pre { padding: 5px; margin: 5px; }
.value{font-weight: 300;}
/* .value .keyValue{font-weight: 300; border:1px solid orange; border-radius: 10px;} */
.string { color: #3900ff; }
.number { color: #3900ff; }
.boolean { color: #3900ff; }
.null { color: #3900ff; }
.key { color: #ad0366; }
  

.response {
  color: black;
}
.responseItem {
  padding-left: 50px;
  font-weight: 600;
}
.arrow {
  margin: 0 auto;
  position: relative;
  left: 20px;
}
#responseDiv {
  margin-top: 50px;
}
pre {
  color: black !important;
}
.codeBlock {
  background-color: #ececec;
  box-shadow: var(--shadow);
}
.img-enlargeable {
  transition: transform .2s; /* Animation */
}

.img-enlargeable:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}