@import url('fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&display=swap’);@import url('fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

$primary-color: #8600E8; $dark-color: #142233; $gray-200: #F1F5F9; $gray-400: #DFE5EC; $text-color-primary: $dark-color; $text-color-regular: #3E546B; $link-color: #8905EA; $link-color-hover: #6109A1; $header-bg: f4f7fd; $code-bg: f4f7fd; $font-family-primary: 'Poppins', sans-serif; $font-family-regular: 'Source Sans Pro', sans-serif;

@mixin shadow($alpha) {

-webkit-box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha);
-moz-box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha);
box-shadow: 0px 0px 10px -2px rgba(20,34,51,$alpha);

}

body {

color: $text-color-regular;
margin: 0;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #F9FBFD;
font-family: $font-family-regular;

}

a {

color: $link-color;
text-decoration: none;
&:hover {
  color: $link-color-hover;
}

}

a.ad-btn-nav-home {

font-family: $font-family-primary;
margin-top: 5px;
margin-bottom: 25px;
padding: 15px;
display: block;
border: 1px solid $gray-400;
border-radius: 5px;
line-height: 13px;
font-size: 14px;
font-weight: 400;
color: $text-color-primary;
letter-spacing: 0.4px;
.symbol {
  font-size: 12px;
  margin-right: 3px;
}
&:hover {
  background: rgba(200,200,255, 0.08);
}
&.active {
  background: $primary-color;
  color: #fff;
}

}

.ad-btn-default {

@include shadow(0.05);
font-family: $font-family-primary;
background: transparent;
border: 1px solid $link-color;
border-radius: 5px;
padding: 5px 10px;
&:hover {
  border-color: $link-color-hover;
  color: $link-color-hover;
}

}

.ad-btn-primary {

@include shadow(0.2);
font-family: $font-family-primary;
background: $link-color;
border: 1px solid $link-color;
border-radius: 5px;
color: #fff;
padding: 5px 10px;
&:hover {
  background: $link-color-hover;
  color: #fff;
}

}

.btn-lg {

font-size: 20px;
font-weight: 600;
font-family: $font-family-primary;
padding: 10px 15px;

}

.primary-color {

color: $primary-color;

}

h1 {

font-family: $font-family-primary;
font-size: 42px;
text-transform: uppercase;
font-weight: 800;
i.fas, .symbol {
  font-size: 20px;
  margin-right: 7px;
}

}

h2 {

margin-top: 60px;
margin-bottom: 15px;
font-size: 32px;
font-family: $font-family-primary;
border-bottom: 1px solid $gray-400;
i.fas, .symbol {
  font-size: 16px;
  margin-right: 5px;
}

}

h3 {

margin-top: 40px;
margin-bottom: 10px;
font-size: 20px;
font-family: $font-family-primary;
i.fas, .symbol {
  font-size: 14px;
  margin-right: 5px;
}

}

h4 {

margin-top: 30px;
margin-bottom: 5px;
font-family: $font-family-primary;
font-weight: 600;
i.fas, .symbol {
  font-size: 14px;
  margin-right: 5px;
}

}

p + ul {

margin-top: 5px;
margin-bottom: 20px;

}

p {

margin-top: 15px;
margin-bottom: 5px;

}

hr {

height: 1px;
background-color: $gray-400;
border: none;

}

.container {

max-width: 1200px;
margin-left: auto;
margin-right: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

.ad-page__two-columns-layout {

display: flex;
min-height: calc(100% - 80px);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.ad-page__sidebar {
  width: 300px;
  min-width: 300px;
  border-right: 1px solid $gray-400;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ad-page__content {
  width: 100%;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

}

.ad-page__navbar {

@include shadow(0.1);
border-bottom: 1px solid $gray-400;
position: fixed;
top: 0;
width: 100%;
background: #fff;
.nav-brand {
  color: $text-color-primary;
  font-family: $font-family-primary;
  font-weight: bold;
}
.ad-page__navbar-content {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

}

.ad-site-nav {

}

button.ad-collapsible, .ad-collapsible {

font-family: $font-family-primary;
background: transparent;
border-width: 0;
box-shadow: none;
width: 100%;
padding-top: 12px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
text-align: left;
border-bottom: 1px solid $gray-400;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: $text-color-regular;
margin-bottom: 5px;
&:after {
  content: '\25BE';
  font-size: 13px;
  float: right;
  margin-left: 5px;
}
&.active:after {
  content: "\2212";
}
&:focus {
  outline: none;
  background: rgba(0,0,0,0.01);
}

}

.ad-collapsible-content {

box-sizing: border-box;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin: 5px 0;
list-style: none;
padding: 0;
font-weight: 400;
font-size: 14px;
line-height: 14px;
li {
  a {
    width: 100%;
    padding: 5px 10px;
    display: block;
    box-sizing: border-box;
  }
  a:hover {
    background: rgba(200,200,255, 0.08);
  }
  &.active a {
    color: #fff;
    font-weight: 600;
    background: $primary-color;
    border-radius: 3px;
  }
}

}

.ad-page__footer {

background: $dark-color;
padding: 30px 15px;
color: #fff;
.links-list {
  list-style: none;
  padding-left: none;
  li {
    padding: 2px 5px;
    a {
      color: $text-color-regular;
      font-size: 14px;
      i {
        margin-right: 3px;
        font-size: 11px;
      }
      &:hover {
        color: $link-color;
      }
    }
  }
}
.ad-page__footer-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ad-page__subfooter-content {
  border-top: 1px solid $text-color-regular;
  font-size: 11px;
  text-align: center;
  padding: 5px;
  color: $text-color-regular;
}

}

.ad-doc__header {

border-bottom: 1px solid #f3f3f3;
background: $header-bg;
padding: 30px;
h1 {
  margin-top: 0;
  margin-bottom: 30px;
}
.ad-doc__table-of-contents {
  ul.section-nav {
    padding-left: 5px;
    list-style: none;
    margin: 0;
    ul {
      padding-left: 25px;
      list-style: none;
    }
  }
}

}

.ad-doc__content {

padding: 15px;
max-width: 800px;
img {
  max-width: 100%;
}
table {
  border: 1px solid $gray-400;
  box-sizing: border-box;
  border-spacing: 0;
  font-size: 14px;
  td, th {
    border-right: 1px solid $gray-400;
    border-bottom: 1px solid $gray-400;
    padding: 3px;
    &:last-child {
      border-right-width: 0px;
    }
  }
  th {
    font-size: 14px;
  }
  tr:last-child td {
    border-bottom-width: 0px;
  }
}

}

.ad-project-overview {

.ad-project-overview__header {
  padding: 30px;
  background: $header-bg;
  h1 {
    margin-bottom: 5px;
  }
  .ad-project-overview__version {
    opacity: 0.3;
    font-size: 12px;
  }
  .ad-project-overview__site-description {
    color: $text-color-regular;
    opacity: 0.5;
  }
}

}

.ad-page-section {

padding-top: 15px;
padding-bottom: 15px;

}

.ad-system_components {

display: flex;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
.ad-system_component {
  min-width: 120px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid $gray-200;
  padding: 5px;
  .name {
    font-family: $font-family-primary;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
  }
  ul {
    list-style: none;
    padding-left: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 12px;
  }
}

}

.ad-useful-links {

display: flex;
flex-wrap: wrap;
.ad-useful-links__col {
  flex: 1;
  border-right: 1px solid $gray-400;
  &:last-child {
    border-width: 0;
  }
  &.w-200 {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  ul {
    list-style: none;
    margin: 3px 0;
    padding-left: 0;
    li {
      padding: 2px 5px;
      a {
        font-size: 16px;
        i {
          min-width: 16px;
          text-align: center;
          margin-right: 3px;
          font-size: 11px;
        }
      }
    }
  }
}

}

.ad-project-overview__next-button {

padding-top: 40px;
padding-bottom: 40px;
text-align: center;

}

.tag {

padding: 2px 4px;
background: $primary-color;
color: #fff;
font-size: 12px;
border-radius: 3px;
font-weight: 500;
font-family: $font-family-primary;
text-transform: uppercase;
&.tag--planning {
  background: #06A789;
}
&.tag--todo {
  background: #0392CC;
}
&.tag--inprogress {
  background: #F6D102;
}
&.tag--done {
  background: #09D660;
}
&.tag--pause {
  background: #ABC9B8;
}
&.tag--low {
  background: #8AADB4;
}
&.tag--medium {
  background: #F2BE04;
}
&.tag--high {
  background: #F20455;
}
&.tag--epic {
  background: #0392CC;
}
&.tag--user-story {
  background: #ABC9B8;
}

}

.ad-nav-link {

display: flex;
flex-direction: column;
.title {
}
.doc-meta-nav {
  padding-top: 5px;
  padding-bottom: 3px;
  opacity: 0.2;
  & > span {
    margin-right: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .tag {
    letter-spacing: 0.5px;
    font-size: 9px;
    padding: 1px 2px;
  }
  .version {
    font-size: 11px;
    font-weight: 500;
  }
}
&:hover {
  .doc-meta-nav {
    opacity: 1;
  }
}

}

.ad-site-nav {

li.active {
  .ad-nav-link {
    .doc-meta-nav {
      opacity: 1;
    }
  }
}

}

.feature-meta {

display: flex;
& > div {
  padding: 10px;
  min-width: 20%;
  border-right: 1px solid $gray-200;
  display: flex;
  flex-direction: column;
  &:last-child {
    border-width: 0;
  }
  label {
    font-size: 12px;
    margin-bottom: 2px;
    font-weight: 500;
    font-family: $font-family-primary;
    color: $gray-400;
  }
}

}

.requirements-list {

padding-top: 40px;
padding-bottom: 40px;
.requirements-list__item {
  border-bottom: 1px solid $gray-200;
  padding-top: 20px;
  padding-bottom: 20px;
  h4 {
    margin-top: 0px;
  }
  .requirements-list__id {
    font-size: 10px;
    color: $primary-color;
  }
  ul.links {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 14px;
  }
}

}

code.highlighter-rouge {

background: $code-bg;
padding: 1px 3px;
border-radius: 2px;
color: #e00bbc;

}

pre.highlight {

padding: 10px;
background: $code-bg;
border: 1px solid $gray-400;
border-radius: 3px;
overflow-x: auto;
.k {
  color: #e00bbc;
  font-weight: bold;
}
.nf {
  color: #6902f1;
  font-weight: bold;
}
.s2 {
  color: #189c41;
}

}

.highlighter-rouge.language-scss {

.c1 {
  color: #aaa;
}
.nv {
  color: #e00bbc;
  font-weight: bold;
}
.nt {
  color: #0b11d8;
  font-weight: bold;
}
.nc {
  color: #cea513;
  font-weight: bold;
}

}

.highlighter-rouge.language-ruby {

.n { color: blue; }
.ss { color: #34bad8; }
.s1 { color: #189c41; }
.c1 { color: #aaa; }

}

.highlighter-rouge.language-bash {

.nv { color: blue; }
.nb { color: #189c41; }
.nt { color: #34bad8; }
.c { color: #aaa; }

}

.highlighter-rouge.language-javascript {

.nv { color: #cea513; }
.nx { color: blue; }
.nt { color: #34bad8; }
.c1 { color: #aaa; }
.kd { color: #cea513; font-weight: bold; }

}