/* ====================================================

CSS RESET RULES

========================================================*/


/*====================================================


CSS variables


====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* font-optical-sizing: auto; */
  
:root{
  --border-color:#eeeeee;
  --background-general:#ffffff;
  --get-background:#278664;
  --get-color:#ffffff;
  --post-background:blue;
  --post-color:#ffffff;
  --color:#000;
  --color-aside:#747a82;
  --scroll-color:#cdcdcd;
  --color-selection:white;
  --background-selection:#278664;
  --key-num:rgb(201, 44, 44);
  --green-primary:#278664;
  --green-primary-fade:rgba(39, 134, 100,0.1);
  --block-code:#f6f8fa;
  --button-background:#4e594a;
  --button-background-hover:#278664;
  --green-secondary:#79a471;
  --color-blue-primary: #278664;
  --code-color:rgb(107, 107, 107);
  --color-string:#2f9c0a;
  --color-buttons-general:#FFFFFF;

  --margin-bottom-h:40px;
  --margin-top-h:65px;
  --font-weight-headings:600;
  --font-family-general:"Inter", sans-serif;
  --font-size-h1:86px;
  --font-size-h2:62px;
  --font-size-h3:46px;
  --font-size-h4:36px;
  --font-size-h5:22px;
  --font-size-h6:20px;
  --font-size-p:16px    
}
.dark-theme{
  
  --border-color:#444950;
  --background-general:#1b1b1d;
  --block-code:#282a36;
  --get-background:#278664;
  --get-color:#ffffff;
  --post-background:blue;
  --post-color:#ffffff;
  --color:#fff;
  --color-aside:#dadde1;
  --scroll-color:#737374;
  --color-selection:white;
  --background-selection:#278664;
  --key-num:#e32569;
  --green-primary:#278664;
  --green-primary-fade:rgba(39, 134, 100,0.1);
  --color-string:#9ad12c;
  --button-background:#4e594a;
  --button-background-hover:#278664;
  --green-secondary:#79a471;
  --color-blue-primary: #278664;
  
  --color-buttons-general:#FFFFFF;
}

  @media (max-width:1024px) {
    :root{
      --font-size-h1:66px;
      --font-size-h2:44px;
      --font-size-h3:36px;
      --font-size-h4:24px;
      --font-size-h5:21px;
      --font-size-h6:19px;
      --font-size-p:15px
    }
    
  }
  @media (max-width:767px) {
    :root {
      --font-size-h1:46px;
      --font-size-h2:36px;
      --font-size-h3:28px;
      --font-size-h4:22px;
      --font-size-h5:20px;
      --font-size-h6:18px;
      --font-size-p:14px;
    }
    
  }
  @media (max-width:450px) {
    :root {
      --font-size-h1:36px;
      --font-size-h2:32px;
      --font-size-h3:28px;
      --font-size-h4:24px;
      --font-size-h5:20px;
      --font-size-h6:16px;
      --font-size-p:14px;
    }
    
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, header ol, header ul, header li,
footer ol, footer ul, footer li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--font-size-p);
	font: inherit;
	vertical-align: baseline;
  box-sizing: border-box;
}
*,*::before,*::after{
  box-sizing: border-box;
  margin: 0;
	padding: 0;
}
/*------------------------------------------------
## Typography
------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-headings);
	color:var(--color);
    font-weight: var(--font-weight-headings);
    margin-bottom:var(--margin-bottom-h);
    padding-top:var(--margin-top-h);
    max-width:100%;
    
}
.overflow{
  max-width:100%;
  overflow:auto;
}
ul{
  max-width:100%;
  overflow:auto; 
}

h1 {
	font-size: var(--font-size-h1);
	line-height: calc( var(--font-size-h1) + 4px );
}

h2 {
	font-size: var(--font-size-h2);
	line-height: calc( var(--font-size-h2) + 4px );
}

h3 {
	font-size: var(--font-size-h3);
	line-height: calc( var(--font-size-h3) + 4px );
}

h4 {
	font-size: var(--font-size-h4);
	line-height: calc( var(--font-size-h4) + 4px );
}

h5 {
	font-size: var(--font-size-h5);
	line-height: calc( var(--font-size-h5) + 4px );
}

h6 {
	font-size: var(--font-size-h6);
	line-height: calc( var(--font-size-h6) + 4px );
}

p {
	font-size: var(--font-size-p);
	line-height: calc(var(--font-size-p) + 8px ); 
}


/*

SELECTION BACKGROUND 

*/
::-moz-selection { /* Code for Firefox */
  color: var(--color-selection);
  background: var(--background-selection);
}

::selection {
  color: var(--color-selection);
  background: var(--background-selection);
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body,main,header {
	line-height: 1;
    width:100%;
  background:var(--background-general);
    
 
}
main{
    max-width: 100vw !important;
    width:100%;
}

header ol, header ul,footer ol, footer ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/*------------------------------------------------
## Layout
------------------------------------------------*/


html {
	font-size: var(--font-size-p);
	box-sizing: border-box;
	scroll-behavior: smooth;
  width:100%;
  line-height: 1.5;
	background: var(--background-general); 
}


small {
	font-size: calc(var(--font-size-p) - 4px);
	line-height: var(--font-size-p);
}


em {
	font-style: italic;
	font-variation-settings: 'wght' 200;
}


/*------------------------------------------------
## Layout
------------------------------------------------*/
*,
*:before,
*:after {
	position: relative;
	box-sizing: inherit;
  box-sizing: border-box;
}

body {
	font-size: var(--font-size-p);
	font-family: var(--font-family-general);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	color: var(--color);
	width:100%;
 
}


html{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	width:100%;
  
}

/*------------------------------------------------
## Links
------------------------------------------------*/
a {
	color: unset;
    text-decoration: none;

}








header{
    display:flex;
    justify-content:space-between;
    padding:0px 30px;
    height:60px;
    border-bottom:1.5px solid var(--border-color);
    background: var(--background-general);
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1000;
}

header .logo{
    width:250px;
    border-right:1.5px solid var(--border-color);
    display:flex;
    align-items:center;
    margin-top:10px;
    margin-bottom:10px;
}
header .logo img{
    width:100px;
}
header nav{
    display:flex;
    align-items: center;
    height:100%;
}
header nav ul{
    display:flex;
    align-items: center;
    height:100%;
}
header nav ul .main-link{
    height:100%;
    margin-right:30px;

}
header nav ul .main-link a{
    height:100%;
    display:flex;
    align-items: center;

}
.main-link i{
  font-size:14px;
  margin-left:10px;
}
.main-link a:hover{
  color:var(--green-primary);

}
.dark-right{
  padding:10px;
  background: var(--border-color);
  border-radius: 50%;
  cursor: pointer;
}
.dark-right i{
  font-size:20px;
}


main{
display:flex;
}
main aside{
    padding-top:100px;
    padding-left:30px;
    padding-right:20px;
    width:280px;
    height:100vh;
    overflow-y: auto;
    border-right:1.5px solid var(--border-color);
    position:sticky;
    top:0;
    scrollbar-color: var(--scroll-color) var(--border-color);
    scrollbar-width: thin;

}
main .aside-phone{
  display:none;
}
.open-nav{
  display:none;
}
@media screen and (max-width:1200px) {
  .content-holder-main {
    flex-basis:100% !important;
  }
  header .logo{
    width:auto;
    border-right:none;
  }
  .open-nav{
    font-size:30px;
    margin-right:10px;
    display:flex;
    align-items:center;
  }
  main aside.aside-pc{
    display:none;
  }
  main .aside-phone.active{
    display:flex;
    position:fixed;
    top:0;
    z-index: 1001;
    left:0;
    bottom:0;
  }
  main .aside-phone aside{
    padding-top:30px;
    background: var(--background-general);
  }
  .logo img{
    max-width:150px;
  }
}
@media screen and (max-width:1008px){
  header nav ul{
  display:none;
}
}
main aside ul{
    list-style: none;

}
main aside ul li{
    margin-top:10px;

}
main aside ul li a{
  color:var(--color-aside);
  padding:5px 10px;
  border-radius:40px 0px 0px 40px;

}
main aside ul li a:hover{
  color:var(--green-primary);
  background-color: var(--green-primary-fade);


}
main aside ul li.aside-main{
    margin-bottom:20px;

}
main aside ul li.aside-main ul{
    margin-left:5px;
    margin-top: 20px;

}
.aside-heading{
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-weight:600;
    position:relative;
}
.aside-heading-click{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.aside-heading i{
    font-size:12px;
}
main aside ul li.aside-main ul li a{
    display:flex;
    align-items: center;
}
.get{
    font-size:10px;
    margin-right:10px;
    background:var(--get-background);
    padding:5px 10px;
    border-radius:20px;
    color:var(--get-color);
    text-transform:uppercase;
    line-height:11px;
}
.post{
    text-transform:uppercase;
    font-size:10px;
    line-height:11px;
    margin-right:10px;
    background:var(--post-background);
    padding:5px 10px;
    border-radius:20px;
    color:var(--post-color);
}

.before-block-quote{
  border-left: 5px solid var(--green-primary);
  background:var(--green-primary-fade);
  display:flex;
  padding:20px;
  border-radius:0px 5px 5px 0px;
  margin-bottom:20px;

}
.before-block-quote i{
  font-size:25px;
  margin-right:10px;
  color:var(--green-primary);

}

.key-num{
  color:var(--key-num);
}











.content-holder-main{
  flex-basis:calc(100% - 280px) ;
  padding-top: 100px;
}
.content-holder{
  padding-top: 30px;
    padding-left:3%;
    display:flex;
    width:100%;
       
}
.content-holder h3{
    font-weight:600;
    margin-bottom:30px;
}
.border-bottom{
    padding-bottom:30px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
    
}
.content-holder .left{
    flex-basis:calc(100% - 300px);
    width: calc(100% - 300px);
    padding-bottom: 50px;
}
.content-holder .right{
  flex-basis:300px;

}
.code-block{
  background:var(--block-code);
  display:flex;
  flex-direction: column;
  margin-bottom:20px;
  margin-top:10px;
  
}
.status{
  background:var(--block-code);
  padding:5px 10px;
  border-radius:5px;
}
.code-block code {
  padding:10px 20px;
  
}
.code-block code{
  box-sizing: border-box;
}
pre{
  color: var(--code-color) !important;
  margin:0;
  padding:0;
}
.code-block p{
  display:flex;
  margin-bottom: 5px;
  margin-top:2px;
  background:var(--border-color) ;
  border-radius: 5px;
  padding:5px 10px;
}
  
.code-block a{
  display:flex;
  border-radius: 50%;
  padding: 10px;
  
}
.code-block a:hover{
  display:flex;
  background:var(--border-color) ;
  border-radius: 50%;
  padding: 10px;
  
}
.heading-code-block{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;

}
.heading-code-block{
  padding-left: 20px;
  padding-right: 20px;
}
.get-inner{
  color:var(--green-primary);
}
.code-block.flex code{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-between;
}
.code-block{
  overflow: auto;
}
code .heading-code-block{
  margin:0px;
  padding:0px;
}
.string{
  color:var(--color-string);
}
main ul{
  margin-left:5%;
  margin-top:30px;
}
main ul li{
 
  margin-bottom:20px;
}
.list-code{
  background: var(--block-code);
  padding:2px 10px;
  border-radius: 5px;
  
}
.code-block span{
  line-height: calc(var(--font-size-p) + 8px);
}
main ul li{
  line-height: calc(var(--font-size-p) + 8px);
}
span.bold{
  font-weight:600;
}
.bi-check-lg{
  color:var(--color-string);
}
.copy-pressed{
  position:relative;
}
.copy-pressed .clickable{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
}


.aside-heading{
  position:relative;
}
.aside-heading .aside-heading-click{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  cursor:pointer;

}
.aside-main.hide ul{
  display:none;
}
.inner-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}
.inner-nav .left-inner-nav{
  display:flex;
  align-items:center;
}
.inner-nav .left-inner-nav .link{
  position:relative;
  margin-right:20px;
  cursor:pointer;
}
.inner-nav .left-inner-nav .link.active::after{
  position:absolute;
  content:'';
  display:flex;
  bottom:-7px;
  width:100%;
  left:0;
  height:3px;
  background:var(--green-primary);
}
.inner-nav-body-header .code-block{
  display:none;

}
.inner-nav-body-header.active .code-block{
  display:flex;
  flex-direction:column;

}
.inner-nav-body-header.active .headers.table{
  display:none;

}
.inner-nav-body-head .headers.table{
  display:flex;
  flex-direction:column;
}
.headers table{
  margin-top:30px;
}
.header-holder{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:30px;
  max-width:100%;
  overflow:auto;
}
.header-left{
  flex-basis: 50%;
  padding-right:20px;
  margin-top:10px;
}
.header-right{
  flex-basis: 50%;
  margin-top:10px;
}
.side-nav-container{
  border-left:2px solid var(--border-color);
  padding:10px 0px;
  margin-top:20px;
  position:sticky;
  top:100px;
  margin-left:30px;
  margin-bottom: 40px;
  display:flex;
  flex-direction:column;

}
.side-nav-container a{
  margin-top:10px;
  padding:10px 10px;
  margin-right:20px;
  border-radius:0px 3px 3px 0px;
}
.side-nav-container a.active{
  position:relative;
  display:inline;
  color:var(--green-primary);
  background:var(--green-primary-fade);
}
.side-nav-container a.active::after{
  position: absolute;
  content:'';
  left:-2px;
  top:0;
  height:100%;
  z-index:1;
  width:2px;
  background:var(--green-primary);

}
.side-nav-container a.inner-highlight-none{
  padding-left:30px;
}
.side-nav-container a.inner-highlight-none.active{
  position:relative;
  color:var(--color);
  background:none;
}
.side-nav-container a.inner-highlight-none.active::after{
  position: absolute;
  content:'';
  left:-2px;
  top:0;
  height:100%;
  z-index:1;
  width:2px;
  background:none;

}
@media screen and (max-width:1008px){
  .aside-phone{
  display:flex;
  width:100%;
  }
  .click-close-aside{
    width:calc(100% - 280px);
    height:100vh;
    background: rgba(0, 0, 0,0.1);
  }
  .logo-other-links{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .close-nav i{
    font-size:45px;
  }
  .right{
    display:none;
  }
  .content-holder-main {
    flex-basis: 100%;
    width:100%;
    padding:70px 5%;
  }
  .content-holder .left {
    flex-basis: 100%;
    width: 100%;
    padding-bottom: 50px;
  }
  .heading-code-block{
    position:sticky;
    top:0;
    left:0;
    right:0;
  }
}
.heading-code-block{
  position:sticky;
  top:0;
  left:0;
  right:0;
}













.back-to-top{
  box-sizing:border-box;
  position:fixed;
  height: 50px;
  width:50px;
  min-height:50px;
  min-width:50px;
  max-height:50px;
  max-width:50px;
  bottom:-140px;
  right:30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-shadow:0px 0px 10px rgba(0,0,0,0.2);
  border-radius:50%;
  cursor:pointer;
  z-index:3;
  transition:all 0.6s;
  -webkit-transition:all 0.6s;
  -moz-transition:all 0.6s;
  -o-transition:all 0.6s;
}
.back-to-top #progress-value{
  box-sizing:border-box;
  border-radius:50%;
  height:45px;
  width:45px;
  min-height:45px;
  min-width:45px;
  max-height:45px;
  max-width:45px;
  background:var(--background-general);
  display:flex;
  justify-content:center;
  align-items:center;
  transition:all 0.5s;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -o-transition:all 0.5s;
}
.back-to-top #progress-value i{
  -webkit-text-stroke: 1.5px;
}
.back-to-top:hover{
  animation: shake 0.4s;
  -webkit-animation:shake 0.4s ;
  -moz-animation:shake 0.4s ; 
  -o-animation:shake 0.4s ;
}
.back-to-top:hover #progress-value{
  
  background: var(--green-primary);
  display:flex;
  justify-content:center;
  align-items:center;
  
}
.back-to-top #progress-value:hover i{
  color:var(--background-general);
  -webkit-text-stroke: 1.5px;
}