/**
 * Fonts
 */
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
       url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/**
 * Bootstrap Pure
 */
.pure-g [class*="pure-u"] {
    font-family:'Roboto', sans-serif;
}
.pure-g > div {
    box-sizing: border-box;
}
.l-box {
    padding: .5em;
}
.pure-form select {
    height: 2em;
}
.pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="text"], .pure-form select, .pure-form textarea {
    padding: .4em .5em;
}
.pure-button-hover, .pure-button:focus, .pure-button:hover {
    background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.4))
}

textarea, input, select {
    color:#333;
}
code {
    /*color:#a96cff; /*purple*/
    color:#6caba9; /*light blue*/
    /* color: #c7254e; /*red*/
	font-size: 1em;
	font-family: "Courier New",Menlo,Monaco,Consolas,monospace;
	/* padding: 1px 4px; */
	/* color: #525252; /*gray*/
	/* margin-bottom: 10px; */
	display: inline-block;
	max-width: 100%;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
    /* background-color: #181818; /*#f9f2f4; white*/
	/* border-radius: 4px; */
}

/* BUTTONS */
.inline-button {
    padding: .2em .3em;
}
.inline-button:hover,.inline-button:focus {
	background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}

.pure-button:hover,.inline-button:hover {
    text-decoration: none !important;
}

.pure-button,.inline-button {
    color:rgba(0,0,0,.8) !important;
    border-radius:2px;
}

.button-primary,
.button-success,
.button-error,
.button-warning,
.button-secondary,
.button-admin {
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-clear {
    
}
.button-primary {
    background-color:#0078E7;
}
.button-success {
    background: rgb(28, 184, 65); /* green */
}
.button-error {
    background: rgb(202, 60, 60); /* maroon */
}
.button-warning {
    background: rgb(223, 117, 20); /* orange */
}
.button-secondary {
    background: rgb(66, 184, 221); /* light blue */
}
.button-admin {
    background-color:#8000E7; /* purple */
}


.button-xsmall {
    font-size: 70%;
    padding: .2em .7em;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}

/* TEXT */
.text-primary {
    color:#0078E7;
}
.text-success {
    color:rgb(28, 184, 65); /* green */
}
.text-error {
    color:rgb(202, 60, 60); /* maroon */
}
.text-warning {
    color:rgb(223, 117, 20); /* orange */
}
.text-secondary {
    color:rgb(66, 184, 221); /* light blue */
}
.text-admin {
    color:#8000E7; /* purple */
}

/* Golden */
.golden {
    color:#c49a6c;
}
.orange {
    color:#FFCE5C;/*#EAC263;*/
}

/**
 * basic styles
 */
a:link, #content a:visited {
    color:#238e56;/*#AA4141;*/
}
#content a:link {
    text-decoration:none;
}
#content a:hover {
    color:#50FFA5;
    text-decoration:underline;
}
#content a:visited {
    /* text-decoration:underline; */
}

.highlight-link {
    color:#c5c060 !important;
}

.text-explanation {
    color:silver;
    font-style: italic;
    font-size:95%;
    padding-left:1em;
}
.text-minor-heading {
    text-transform:uppercase;
    font-size:80%;
}
.manage-left {
    padding-left:1.5em;
}
.user-tree ul {
	margin-left: 0.2em;
}
.user-tree li {
	margin: 0;
	padding: 0 1.1em;
	position: relative;
}
.user-tree, .user-tree ul {
	margin: 0 0 0 0.2em;
	padding: 0;
	list-style: none;
	position: relative;
}
.user-tree::before, .user-tree ul::before {
	border-left: 1px solid #444;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	width: 0;
}
.user-tree li::before {
	border-top: 1px solid #444;
	content: "";
	display: block;
	height: 0;
	left: 0;
	margin-top: -2px;
	position: absolute;
	top: 0.8em;
	width: 8px;
}
.user-tree li:last-child::before {
	background-color: #1B1E1E;
	border-left: 0;
	bottom: 0;
	height: auto;
}


/**
 * Layout Building Blocks
 */
 
body,html {
    background-color:#1B1E1E;
    height:100%;
    font-family: 'Roboto', sans-serif;
}

#grid {
    min-height:100%;
    height: auto !important;
    margin: 0 auto -2em;
}

#header {
    /* text-align:center; */
}

#content {
    color:#ccc;
}

#footer {
    text-align:center;
}

#footer, #push {
    height:2em;
}


.warning-banner {
    padding:1em;
    background-color:#222d2d;
    border:1px solid #141b1b;
    border-radius:.2em;
    text-align:center;
}

/**
 * Content styling
 */
    /* profile/avatar */
    #logged-profile {
        height:2em;
    }
    #logged-avatar {
        height:2em;
        border-radius:2px;
        vertical-align:middle;
    }
    /* profiles everywhere */
    .profile-images {
        background-size:100% auto;
        background-repeat:no-repeat;
        background-position:top center;
        margin-bottom:20px;
    }
    .profile-avatar {
        margin-left:20px;
        margin-top:20px;
        min-width:150px;
        max-width:200px;
        width:17%;
        min-height:150px;
        max-height:200px;
        height:17%;
    }
    /* client area */
    .dev-client {
        margin:.5em 0;
    }
    /* oauth */
    .auth-client {
        margin-top:1em;
    }
    .auth-client-detail {
        background-color: rgb(27, 30, 30);
        border-radius: 3px;
        padding: 2px 1em;
        box-shadow: 0 0 2px #181818;
    }
    /* client display */
    dt {
        color:#666;
    }
    .client-link, .client-link:visited {
        color:#897A7A !important;
    }
    h4.client-header {
        margin-bottom:0;
        margin-top:0;
    }
    .client-short-desc {
        margin-left:1em;
        font-style:italic;
        font-size:90%;
        color:#ccc;
        max-width:80%;
    }
    .client-desc-header {
        font-size:120%;
        color:#7a7a7a !important;
        font-family:Bookman Old Style,Optima,Sabon,Futura Condensed,Garamond,sans-serif;
        margin-bottom:0;
    }
    .client-details {
        margin-right:1em;
        background-color:#1e2323;
        padding:0 .5em;
        border:1px solid #1b1e1e;
        border-radius:4px;
    }
    .client-details-header {
        text-transform:uppercase;
        font-family:Bookman Old Style,Optima,Sabon,Futura Condensed,Garamond,sans-serif;
        font-weight:bold;
        color:#7e7e7e;
    }
    .client-desc-body {
        margin:1em 2em 2em 2em;
    }
    .client-logo {
        float:left;
        margin-right:1em;
        margin-bottom:1em;
        border-radius:3px;
    }
    .client-image {
        overflow:hidden;
        min-height:150px;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
    .lightbox-zoom {
        display:inline !important;
    }
    /* app listings */
    .client-listing {
        margin-bottom:1em;
        clear:left;
        min-height: 100px;
    }
    /* frontpage */
    #phone-mock {
        width:100%;
        max-height:480px;
        max-width:242px;
        margin-right:1em;
    }
    #phone-mock-container {
        text-align:right;
    }
    #frontpage-explanation {
        padding-top:3em;
    }


@media screen and (max-width:35.5em) {
    .profile-images { background-size: auto 140px; }
    .profile-avatar { width:150px; height:150px; }
    #phone-mock {
        max-width:101px;
        margin-right:0;
    }
    #phone-mock-container {
        text-align:center;
        padding-top:3em;
        float:left;
    }
    #frontpage-explanation {
        padding-top:0;
        margin-left:130px;
    }
    #frontpage-explanation .pure-button {
        white-space:pre-line;
    }
}


/**
 * Nav styling
 */
#hd {
    margin-left:3%;
}
 
#header a, #header a:visited {
    color:#21FFEC;
    text-shadow: 1px 1px 0 #222;
    text-decoration:none;
}
#header a:hover {
    color:#4FFFA4;
    
}
#header .active-link {
    text-shadow:2px 2px 0 #0D332E; /*4FFFA4*/
    /* border-bottom:1px solid #333; */
}
#menu {
    float:right;
    margin-top:35px;
    margin-right:1%;
}

#footer a, #footer a:visited {
    font-size:80%;
    color:#bbb;
}
#footer a:hover {
    color:#eee;
}
#footer .nav li {
	font-size:.8em;
}




ul {
   list-style-type:none;
   padding:0;
}
.nav {
    font-size:1.2em;
    margin:0;
    color:#008c99;
    display:inline;
}
.nav li {
    display:inline;
    margin:.3em;
    /* display:none; */
}
.nav li a {
    padding:.4em;
    text-decoration:none;
    white-space:nowrap;
}


/**
 * Account nav
 */
#account-nav a:hover {
    text-decoration:none !important;
}
#account-nav a:hover .fa {
    color:#0199AB;
}
#account-nav a {
    padding:.1em;
    display:block;
}



/**
 * Documentation
 */

#docs,.backplate {
    border-radius:.2em;
    background-color:#1c2020;
    padding:.5em;
    box-shadow:0 0 2px #181818;
}

h2 {
    margin-top:2em;
    text-shadow: 0 0 2px #000;
}
 
#doc-menu ul {
    margin-left:1em;
}

#doc-menu .active {
    color:#b2ffce !important;
}

#docs .leftpad {
    padding-left:2.5em;
}
h1,h2,h3,h4 {
    font-family: 'Roboto Slab', serif;
}
#docs h1,#docs h2,#docs h3,#docs h4,#docs h5 { /* github-ize */
    border-bottom-color: rgb(35, 43, 54);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-sizing: border-box;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 600;
    margin-bottom: 16px;
    overflow-wrap: break-word;
    padding-bottom: 0.3em;
    line-height: 1.25;
}
#docs h1 {
    font-size: 1.8em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-wrap: break-word;
}
#docs h2 {
    font-size: 1.2em;
    margin-top: 24px;
}
#docs h3 {
    font-size: 1em;
    color:#fff;
    text-shadow: 0 0 2px #000;
}
#docs h4 {
    font-size: 0.875em;
}
#docs .example-code {
    background-color:#181818;
    color:#fff;
    margin-bottom:0;
    padding:.5em;
}
#docs .example-code + pre {
    margin-top:0;
}
#docs ul {
    padding-left:45px;
    list-style-type:square;
}
.hhighlight .method {
    color:#fff !important;
    border:1px solid #a1a1a1;
}

#docs table {
	border: 1px solid #2B3030;
	max-width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}

#docs th {
    background-color: #171919;
}
#docs table td, #docs table th {
	border-right: 1px solid #2B3030;
}
#docs table th, #docs table td {
	padding: 8px;
	line-height: 22px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #2B3030;
    background-color:#1B1E1E;
    /* color:#000; */
}
#docs table th {
    font-weight: bold;
}
#docs table tbody > tr:nth-child(2n+1) > td, #docs table tbody > tr:nth-child(2n+1) > th {
	background-color: #171919;
}
/*#docs .paraph a {
    visibility:hidden;
}
#docs h2.paraph:hover a,#docs h3.paraph:hover a {
    visibility:visible;
}*/


.object {
    font-size:10pt;
    white-space:pre;
    overflow:auto;
}

.method,.endpoint-meta {
    color: #fff;
	padding: 1px 2px;
    border-radius: 3px;
    border:1px solid #1c2020;
	font-weight: bold;
	line-height: 14px;
	vertical-align: baseline;
	white-space: nowrap;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    font-family:Helvetica,Arial,sans-serif;
}
.endpoint-meta {
    float:right;
    font-size: 12px;
    padding:2px 3px;
    background:white;
    color:#000;
}
.endpoint {
    cursor:pointer;
}
.method-get {
    background-color:#16489F;
}
.method-post {
    background-color:#185718;
}
.method-put {
    background-color:#918422;
}
.method-patch {
    background-color:#545454;
}
.method-delete {
    background-color:#9e2626;
}

.call-param {
    color:orange;
}

.button-api-call {
    padding: .3em .5em;
}

#docs .note {
    font-style:italic;
    /* margin-left:30px;
    padding:4px;
    border-radius:3px;
    border:1px solid #2B3030;
    background-color:#171919; */
}

#submenu-toggle,#submenu-toggle-button {
    display:none;
}

@media (max-width: 580px) {
    #docs .leftpad {
        padding-left:1em;
    }
    #doc-menu {
        height:0;
        overflow:hidden;
    }
    #submenu-toggle-button {
        display:inline;
        cursor:pointer;
    }
    #submenu-toggle:checked + #doc-menu {
        height:100%;
        overflow:auto;
    }
    .nav li {
        margin:0 auto;
    }
    .nav li a {
        padding:0;
    }
    .hidden-when-small {
        display:none !important;
    }
    #menu a {
        font-size:1em;
        margin-right:1em;
        padding:.5em;
    }
}


/* Feedback */
#feedback-box {
    position:fixed;
    top:10%;
    left:10%;
    right:10%;
    margin:0 auto;
    z-index:999999999;
    opacity:.95;
    border-radius:5px;
    box-shadow:0 0 2px #111;
    background-color: #10191a;
    max-width:800px;
}
.feedback-item {
	background-color: #10191a;
    border-radius:5px;
	color: #ffbd86;
    width:auto;
}
.feedback {
    padding:.7em;
}
.feedback a {
    color:#fffbfb;
}
.feedback-error {
    color: #fff;
    background-color:#420000;
}
.feedback-warning {
    background-color:#241b13;
}
.feedback-close {
    /* text-align:right; */
    float:right;
}
.hidden {
    display:none;
}


/**
 * Updates page
 */
.news-item {
    color:#aaa;
}
.news-item h4 {
    color:#fff;
}
.news-item ul {
   list-style:inside;
   padding-left:1em;
   padding-top:.2em;
   padding-bottom:.2em;
}


/**
 * Invites page
 */
.invite-note {
    display:inline !important;
	background-color:#273333;
    color:#edffff;
	width:100%;
    box-shadow:none !important;
    padding:.1em !important;
    border:0 !important;
}


/**
 * Security page
 */
.security-client-detail {
    cursor:pointer;
    color:#238e56;
}


/* highlight.js */

/*

Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #abb2bf;
  background: #282c34;
}

.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}
