$tab-accent-color: $brand-color;

.code {
  position: relative;
}

.code a {
  position: absolute;
  top: 12px;
  right: 10px;
  color: $tab-accent-color !important;
}

.edit-action {
  right: 77px !important;
}

.code a:hover {
  color: black !important;
}


.code-nav-tabs {
  margin-left: 0px;
  font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.code-nav-tabs a{
  color: $tab-accent-color;
}

.code-nav-tabs + .tab-content {
  border: 1px solid $tab-accent-color 
}


.login-code-button {
  color: #00aeff;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.login-code-button:hover {
  color: #00aeff;
  text-decoration: underline;
}

.code pre {
  margin-top: 0;
  margin-bottom: 0;
}

// css for the cloud or local collapsing tabs


.cloud-or-local-tab-content {
  position: relative;
  margin-bottom: 20px;
}

.cloud-or-local-nav{
  position: absolute;
  top: 50px;
  left: -20px;
  z-index: 1;
  border: 0px;
}

.cloud-or-local-nav a{
  color: $brand-color;
}

.cloud-or-local-nav a.active{
  background-color: $brand-color !important;
}

.code-nav-tabs + .tab-content {
  background-color:  #ececec;;
}

// .code pre {
//   padding: 3.5em;
// }

.code > div:first-child {
  padding-top: 3.5em;
}
// end of css for the cloud or local collapsing tabs

pre {
    background: #ececec !important;
}

.code-response pre {
  border: 1px solid $tab-accent-color 
}

.code > p {
  margin-top: 70px;
}