:root { --primary-color: #f46150; --dark-color: #000000; --secondary-color: #808080; --white-color: #ffffff; --body-fonts: 'Jost', sans-serif }
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');
html, body { height: 100% }
body { font-family: var(--body-fonts); color: var(--secondary-color); font-size: 16px; line-height: 30px }
h1, h2, h3, h4, h5, h6 { color: var(--dark-color); font-weight: 600 }
a { color: var(--primary-color); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out }
a:hover { text-decoration: underline; color: var(--primary-color) }
a:focus { text-decoration: none }
code { background: #222; color: #fff; font-size: 14px; font-weight: bold; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; padding: 2px 8px; padding-top: 4px; display: inline-block }
b, strong { font-weight: 600; color: var(--dark-color) }
main { background: var(--primary-color); color: var(--white-color); display: inline-block; width: 100%; padding: 45px 0 }
.navbar-brand { margin-bottom: 15px; margin-right: 0 }
.pt-docs-side-bar { background: var(--white-color); padding: 30px; height: 100%; display: inline-block; width: 100%; -webkit-transition: top linear 50ms; -moz-transition: top linear 50ms; -o-transition: top linear 50ms; transition: top linear 50ms; -webkit-box-shadow: 15px 0px 30px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 15px 0px 30px 0px rgba(0, 0, 0, 0.1); box-shadow: 15px 0px 30px 0px rgba(0, 0, 0, 0.1) }
.pt-docs-side-bar.fixed { position: fixed; left: 0; top: 0; width: 16.666667%; -webkit-transition: top linear 50ms; -moz-transition: top linear 50ms; -o-transition: top linear 50ms; transition: top linear 50ms }
.pt-docs-nav { margin: 0; padding: 0 }
.pt-docs-nav li { list-style: none; position: relative }
.pt-docs-nav li strong { font-size: 20px; text-transform: capitalize; margin: 10px 0 5px; color: var(--dark-color); display: inline-block; width: 100% }
.pt-docs-nav li a { font-size: 16px; padding: 10px 10px 10px 0; line-height: 1; color: var(--dark-color); display: block; text-decoration: none; border-right: 2px solid transparent }
.pt-docs-nav li ul { padding-left: 15px }
.pt-docs-content { padding: 30px; background: #f5f5f5 }
.pt-docs-block { padding: 30px; display: inline-block; width: 100%; background: #ffffff; margin-bottom: 45px }
@media only screen and (min-width:960px) {
	.pt-docs-nav.fixed { position: fixed; top: 49px; width: 220px }
	.pt-docs-nav a:hover { background: var(--white-color); color: var(--primary-color) }
	.pt-docs-nav li>a.active { background: var(--white-color); color: var(--primary-color) }
	.pt-docs-nav .separator { height: 20px }
}
.pt-support { position: fixed; width: 16.666667%; background: var(--primary-color); padding: 15px; text-align: center; left: 0; bottom: 0; right: 0 }
.pt-support h5 { color: var(--white-color); margin-bottom: 0 }
.pt-support a { color: var(--white-color) }
.pt-docs-nav  li.active i { transform: rotate(90deg) }
.pt-docs-nav  i { font-size: 14px; padding-top: 4px; position: absolute; right: 5px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out }
#my-scrollbar { height: 86% }
@media(max-width:1599px) {
	.pt-docs-side-bar { padding: 30px 15px }
	#my-scrollbar { height: 83% }
}
@media(max-width:1399px) {
	.navbar-brand img { height: 30px }
}
@media(max-width:1099px) {
	.pt-support, .pt-docs-side-bar.fixed { width: 25% }
}
@media (max-width:1023px) {
	.pt-docs-side-bar { padding: 30px }
	.pt-support, .pt-docs-side-bar.fixed { width: 100%; position: relative; display: inline-block }
	.pt-support { margin-top: 30px }
	#my-scrollbar { height: 100% }
}