* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-y: hidden;
  background:#2A2D32 !important;
}

html::-webkit-scrollbar{
    background:#2A2D32;
    width:12px;
}
html::-webkit-scrollbar-thumb{
    background:#7289DA;
}

a {
  color: aliceblue ;
  text-decoration: none;
}



@media only screen and (max-width: 600px) {
  .container {
    flex: column wrap;
    justify-content: space-around;
  }
  .container__sidebar-nav {
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: stretch;
    padding: 0;
  }

  .container__nav-link {
    padding: 0;
  }
  .container__sidebar-nav:hover .container__nav-link-name {
    visibility: hidden;
    opacity: 0;
  }
}

.wrap-whole {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 100vh;
}

.vertical-nav-bar {
  display: flex;
  flex: 0 0 300px;
  flex-flow: column nowrap;

  z-index: 30;
  background: #2E3136;
  padding: 1rem 0 0 0;
  justify-content: flex-start;
  margin-top: 80px;
  border-right: 1px solid #636363;
}

.menu-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.main-nav-link {
  transition: opacity 0.2s, visibility 0.2s;


  display: flex;
  position: relative;
}
.main-nav-link a {
  font: 600 12px "Karla", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04rem;
  color: #636363;
  margin-left: 50px;
  padding: 5px;
  margin-top: 0;
}

.main-nav-link .active {
  color: white;
  padding-left:10px;
  transition:0.1s;
  position:relative;
}
.main-nav-link .active:after{
  position:absolute;
  content:"";
  transition:0.2s;
  height:0px;
  width:0px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:6px solid white;
  border-radius:50%;
  margin-top:3px;
  left:0;
}

.title-section-api {
  color: white;
  margin-left: 30px;
  font: 300 20px "Karla", sans-serif;
  margin-top: 20px;

}

.sectiondivider {
  border-top: 1px solid #636363;
  margin-top: 10px;
}

.main-nav-link a:hover {
  color: white;
  transition:0.05s;
}




.container__main {
  flex: 1 1 600px;
  background-color: #2A2D32;
  margin-top: 80px;
  position:absolute;
  left:300px;
  width:calc(100% - 300px);
  padding-bottom:200px;
}

.container__header {
  color: white;
  font: 500 40px "Karla", sans-serif;
  margin: 50px 30px 10px 50px;
}

.container__content {
  margin: 10px 30px 10px 50px;
  color: #76787a;
  font: 200 18px "Karla", sans-serif;
  width: 850px;
}


.container__content a {
  color: #7289DA;
  transition:0.05s;
}

.container__content a:hover {
  color: white;
}

.container__main {
  opacity: 0;
  left: 500px;
  pointer-events:none;
}
.front_page_spa {
  transition:0.6s;
  opacity:1;
  left:300px;
  pointer-events:all;
}

.libraries {
    display: block;
    list-style-type: disc;
    margin: 10px 30px 10px 50px;
}

.libraries li {
  margin-bottom: 10px;
  font-size: 22px;
}
.container__content code {
  background:rgba(0,0,0,.4);
  color:rgba(255,255,255,0.7);
  border-radius:4px;
  padding:2px 4px;
}

.container__content pre {
  background:rgba(0,0,0,.4);
  color:rgba(255,255,255,0.7);
  border-radius:4px;
  padding:8px 16px;
  margin-top: 5px;
}

.container__content .subtitleapi {
  color: white;
  font: 200 22px "Karla", sans-serif;
  margin-top: 19px;
}

.container__content .subsubtitleapi {
  color: #cecece;
  font: 200 20px "Karla", sans-serif;
  margin-top: 19px;
}

.container__content ._green{
  color:#72D95D;
}
.container__content ._orange{
  color:#C68C32;
}
.container__content code .lowfade{
  color:rgba(255,255,255,0.4);
}

.container__content table{
  margin-top:10px;
  width:100%;
}
.container__content .trHeader th {
  background:#4F545C;
  border-radius:4px 4px 0px 0px;
  padding:4px 10px;
  color:white;
  font-size:0.9em;
}
.container__content td {
  padding:4px 16px;
  color:white;
  border:3px solid #222428;
  font-size:0.8em;
  color:rgba(255,255,255,0.5);
  cursor:default;
}
.container__content tr:nth-child(even){
  background:#222428;
}
.container__content tr:hover{
  outline:1px solid #72CB44;
  transition:0.05s;
}
.container__content .trHeader:hover,
.container__content .trSubHeader:hover{
  outline:none;
}
.container__content .trSubHeader td{
  color:white;
  font-weight:600;
}

.container__content .highlightedThing{
  margin-right:6px;
  display:inline;
  font-size:1.5em;
}
.container__content .highlightGuide{
  display:inline-block;
  transform:translateY(-2px);
}
nav {
  border-bottom:1px solid #636363;
}
.no-select{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bot_card{
  float:left;
  background:rgba(255,255,255,0.02);
  box-shadow:0px 0px 6px 0px rgba(0,0,0,0.2);
  margin:0px 10px 10px 0px;
  width:200px;
  height:220px;
  cursor:pointer;
  text-align:center;
  border-radius:4px;
  overflow:hidden;
  transition:0.2s;
}
.bot_card .bot_icon_container{
  width:120px;
  height:120px;
  margin:30px auto;
}
.bot_name{
  color:white;
  font-size:1.2em;
  line-height:10px;
  height:40px;
  line-height:40px;
  width:100%;
  background:rgba(255,255,255,0.03);
}
.bot_card:hover{
  background:rgba(255,255,255,0.04);
  transition:0.05s;
  box-shadow:0px 0px 6px 0px rgba(0,0,0,0.4);
}

.api_key_viewer {
  pointer-events:none;
  opacity:0;
  transition:0.5s;
}

.webhook_viewer{
  pointer-events:none;
  opacity:0;
  transition:0.5s;
}
.botname{
  color:rgba(255,255,255,0.6);
}
.api_token_regen, .api_webhook_tester{
  z-index:10000000;
  pointer-events:all;
}
body, html {
  overflow-y:auto;
}
.container__content pre{
  width:unset;
  display:inline-block;
  min-width:100%;
}

/*
  fixes some bug when you zoom in (also enhances the nav bar for API a bit)
*/
.vertical-nav-bar {
    display:flex;
    align-content:center;
    align-items:center;
    max-width:100%;
    overflow:hidden;
    flex-wrap:nowrap;
}
.sectiondivider{
    width:100%;
}
.menu-container {
    display:flex;
    align-content:center;
    align-items:center;
    width:100%;
    max-height:100%;
    overflow:hidden;
    flex-wrap:nowrap;
}
.title-section-api {
    margin-top:0;
    padding:20px 0 0 0;
    line-height:30px;
}

.main-nav-link .active::after{
    margin-top:7px;
}
.main-nav-link a div{
    line-height:26px;
}
.main-nav-link a {
    padding:0;
}
.main-nav-link {
    width:100%;
}