body {
    color: #777;
    background: #fff4ed ;
    width: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}
h1,h2,h3,h4,h5 {
    color: #333;
}
.topSpace {margin-top: 20px;}
mark {color: #ffffff; font-weight: 700; font-size: 12px}

a:hover{
    text-decoration: none;
}
.doc-content a:hover {text-decoration: underline; color: #d02d5c;}
.collapsing{transition: height 0s!important; transition: ease-in-out 0.5s!important;}
p {line-height: 30px;}
h3, h5 {margin-bottom: 15px;}
ul li {line-height: 26px;}
h6 {font-weight: 600;}
ul {margin-bottom: 30px;}
h3 {margin-top: 30px; font-weight: 700;}
.doc_dropdown ul li:first-child {padding-top: 20px}
.doc_dropdown ul li:last-child {padding-bottom: 20px}
#header.doc_header {
    border-radius: 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    margin: 0;
    background-color: #d02d5c;
    border: none;

}
#header.doc_header h1 {
    margin-bottom: 0;
}
#header.doc_header h1 a{
    margin-top: 0;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    height: auto;
    padding: 20px 30px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: .5px;
}
.doc-sidebar {
    position: fixed;
    padding: 0;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
.doc-container {
    width: 100%;
    float: left;
    background: #fff;
    margin-top: 70px;
}
.doc_sidebar_inner {
    background-color: #763a60;
    height: 93vh;
    overflow-y: auto;
}
.doc-nav {
    padding: 20px 0;
}
.doc-nav li >a {
    color: #ffffff;
    transition: .5s ease-in-out;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    border-bottom: 1px solid #ffffff0d;
    padding: 15px;
    letter-spacing: 1px;
    margin-bottom: 1px;
}
.doc-nav li:last-child a {border-bottom: none}
.doc-nav >li {
    position: relative;
    width: 100%;
}
.doc-nav >li a:hover ,
.doc-nav >li >a:focus ,
.doc-nav >li.active> a{
    background: #ffffff!important; /* Old browsers */
    color: #763a60;
    margin-bottom: 1px;
}
.doc-nav >li ul li a:focus {background-color: transparent!important; color: yellow; outline: none;}
.doc-nav >li.active >.content_heading {border-left: 1px solid #763a6047;}
.doc-nav > li > ul {padding: 0 20px 0 55px;}
.doc-nav > li > ul li {
    list-style-type: none;
}
.doc-nav > li > ul li a {
    display: block;
    position: relative;
    border: none;
    font-size: 12px;
    line-height: 18px;
    padding: 5px;
}
.doc-nav > li > a {
    position: relative;
    padding: 20px 30px 20px 45px;
    display: block
}
.doc-nav  li  .list_style:after{
    position: absolute;
    content: "";
    border: 2px solid  #ffffff ;
    width: 10px;
    height: 10px;
    background: transparent;
    left: 20px;
    border-radius: 100%;
    top: 22px;
}

.doc-nav li .list_style:focus:after ,
.doc-nav li .list_style:hover:after ,
.doc-nav li.active .list_style:after
{
    border: 2px solid  #763a60 ;
}
.doc-nav > li > ul {background-color: #d02d5ca6;}
.doc-nav > li > ul li a:hover {
    color: yellow;
    text-decoration: underline;
    background-color: transparent!important;
}
.doc-nav > li > ul li:last-child a{
    border-bottom: none;
}
.doc-nav > li.doc_dropdown >a.collapsed ,
.doc-nav > li.doc_dropdown a{
    position: relative;
}
.content_heading {position: absolute!important; top: 0; right: 0; border-bottom: none!important; transition: 0s!important; padding: 28px 25px 27px!important; background-color: transparent!important;}
.doc-nav > li.doc_dropdown > .content_heading.collapsed::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid #d02d5c;
    border-bottom: 5px solid transparent;
    right: 16px;
    top: 23px;
}
.doc-nav > li.doc_dropdown >.content_heading::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #d02d5c;
    right: 20px;
    top: 26px;
}

.doc-content {
    background: #f2f5f9 ;
}

.doc-content  {
    padding: 30px 45px;
}
.page-header {
    padding-top: 0;
    margin-top: 0;
}
#btn_bar {
    float: right;
    width: 7%;
    cursor: pointer;
    display: none;
}
.bar {
    display: block;
    height: 3px;
    width: 30px;
    background-color: #fff;
    margin: 5px auto;
}

img {
       margin: 30px 0;
    max-width: 70%;
}
.page-header {
    border-bottom: 1px solid #d02d5c ;
    color: #d02d5c ;
    line-height: 60px;
    font-size: 40px;
}

strong ,a {
    color: #d02d5c ;
}
.docs-section {
    padding-top: 20px;
    width: 100%;
    float: left;
}
h4 {
    margin-top: 30px;

}
code {
    display: inline-block;
}
@media screen and (max-width: 1440px){
    .doc-nav > li > a {padding: 20px 30px 20px 50px;}
    .doc-nav li .list_style:after {left: 25px;}
}
@media screen and (max-width: 1024px){
    .doc-nav > li > ul {padding: 0 20px 0 50px;}
}
@media screen and (max-width: 991px){
    .btn_toggle {background: url(../images/svg/mobile_toogle_button.svg)no-repeat; height: 28px;}
    .btn_toggle_cancel {background: url(../images/svg/navbar_cancel.svg)no-repeat; height: 14px; right: -7px; position: relative;}
    .page-header {line-height: 40px; font-size: 34px;}
    p {line-height: 26px;}
    h3 {font-size: 24px; line-height: 30px;}
    .doc-nav > li > ul {padding: 0 20px 0 46px;}
    #btn_bar {
        display: block;
        margin-top: 0px;
    }
    .doc-sidebar {
        z-index: 9;
        left: -300px;
        width: 300px;
        transition: .5s ease-in-out;
    }
    .doc-sidebar.sidebar {
        left: 0;
    }
    .doc-content {padding: 10px 25px 10px 30px}
    
}
@media screen and (max-width: 767px) {
    .navbar-header {float: left;}
    .doc_sidebar_inner {width: 90%;}
    .doc_dropdown ul li:first-child {padding-top: 10px}
    .doc_dropdown ul li:last-child {padding-bottom: 10px}
    .doc_dropdown ul li ul {padding-left: 20px;}
}
@media screen and (max-width: 425px) {

    #header.doc_header h1 a {
        padding-left: 0;
        padding-right: 0;
    }
    #header {padding: 0 3%;}
    .docs-section {padding-top: 40px;}
    h3 {margin-top: 20px;}
    #header.doc_header h1 a {font-size: 24px; line-height: 24px;}
    .bar {width: 24px; height: 2px}
    .doc-container {margin-top: 62px}
    .table td {padding: 20px 5px;}
    .doc-content {padding: 0 20px}
    #header.doc_header {padding: 0 20px!important}
    .content_inner h1 {font-size: 30px; line-height: 40px}
    .content_inner p, .content_inner ul li {font-size: 14px; line-height: 24px}
    .content_inner h3 {font-size: 20px; line-height: 26px}
    .content_inner h5 {font-size: 16px; line-height: 24px}
    .content_inner h6 {font-size: 14px; line-height: 20px}
}