.page-content {
    padding-top: 100px;
    padding-bottom: 60px;
}

#sticky-menu {
    position: sticky;
    top: 56px;
}

#sticky-menu ul {
    list-style: none;
    padding-left: 0;
}

ul#menu-list {
    position: sticky;
    top: 0;
    bottom: 0;
    height: 80vh;
    padding-right: 10px;
    margin-right: -10px;
    padding-bottom: 15px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#explore-docs {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-top: 25px;
}

#doc-container li {
    color: #7a7a7a;
}

#doc-container .docs-tutorials img {
    max-height: 100px;
}

#doc-container #blog.docs-tutorials {
    padding-top: 0;
    padding-bottom: 0;
}

#doc-container h1 {
    font-size: 40px;
}

#doc-container h2 {
    font-size: 30px;
    margin-top: 40px;
}

#doc-container h2#section-title {
    font-size: 50px;
    text-align: initial;
}

#doc-container table {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 14px;
}

#doc-container table tr {
    border-bottom: 1px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-color: #dddddd;
}

#doc-container table td,
#doc-container table th {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 12px;
    padding-left: 12px;
}

#doc-container blockquote {
    background-color: #f9f9f9;
    margin-left: 30px;
    margin-top: 30px;
}

#doc-container code {
    word-wrap: break-word;
    overflow-x: auto;
}

#doc-container div.section > h1:first-child {
    margin-bottom: 35px;
}

#doc-container .section h1,
#doc-container .section h2,
#doc-container .section h4,
#doc-container .section h5,
#doc-container .after-section-helper ~ h1,
#doc-container .after-section-helper ~ h2,
#doc-container .after-section-helper ~ h4,
#doc-container .after-section-helper ~ h5 {
    border-top: 60px solid transparent;
    margin-top: -60px;
}

#doc-container .section h3,
#doc-container .after-section-helper ~  h3 {
    border-top: 100px solid transparent;
    margin-top: -60px;
}

#doc-container .section .tutorials-doc-home h1,
#doc-container .section .tutorials-doc-home h2,
#doc-container .section .tutorials-doc-home h4 {
    border-top: 0 !important;
    margin-top: 0 !important;
}

#doc-container .section h1,
#doc-container .section h2,
#doc-container .after-section-helper ~ h1,
#doc-container .after-section-helper ~ h2 {
    padding-top: 40px;
}

#doc-container .section h4,
#doc-container .after-section-helper ~ h4 {
    padding-top: 25px;
}

#doc-container pre {
    background: transparent;
}

#doc-container pre code {
    padding: 9.5px !important;
    border-radius: 4px !important;
}

#doc-container table {
    display: block;
    width: 100%;
    overflow: auto;
}

#doc-container .deploy-img {
    border: 3px solid #dddddd;
    border-radius: 4px;
}

#doc-container .deploy-fields-table {
    text-align: start;
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#doc-container .deploy-fields-table th {
    text-transform: uppercase;
}

#doc-container .deploy-fields-table td.first-col {
    font-weight: bold;
}

#doc-container span.field-comment {
    font-size: 12px;
    color: #7a7a7a;
}

#doc-container table.artifact-table tr td {
    padding-left: 0;
}

#doc-container table.artifact-table tr th {
    padding-left: 0;
}

#doc-container table.color-table tr td:nth-child(1) {
    padding-left: 0;
}

#doc-container table.color-table-gray tr td:nth-child(1) {
    padding-left: 0;
}

#doc-container table.color-table tr th:nth-child(2) {
    background-color: rgba(255, 204, 0, 0.15);
}

#doc-container table.color-table tr th:nth-child(3) {
    background-color: rgba(0, 136, 170, 0.15);
}

#doc-container table.color-table tr th:nth-child(4) {
    background-color: rgba(6, 211, 98, 0.15);
}

#doc-container table.color-table tr td:nth-child(2) {
    background-color: rgba(255, 204, 0, 0.05);
}

#doc-container table.color-table tr td:nth-child(3) {
    background-color: rgba(0, 136, 170, 0.05);
}

#doc-container table.color-table tr td:nth-child(4) {
    background-color: rgba(6, 211, 98, 0.05);
}

#doc-container table.color-table-gray tr:first-child {
    border-top: 1px solid #dddddd;
}

#doc-container table.color-table-gray tr th:nth-child(2) {
    background-color: rgba(135, 135, 135, 0.15);
}

#doc-container table.color-table-gray tr td:nth-child(2) {
    background-color: rgba(135, 135, 135, 0.05);
}

#doc-container #deploy-arch-row {
    display: flex;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 2em;
}

#doc-container #deploy-arch-desc ol {
    padding-left: 18px;
}

#doc-container #deploy-arch-desc ol li {
    padding-bottom: 25px;
}

#doc-container #deploy-arch-desc ol li:last-child {
    padding-bottom: 0;
}

#doc-container .html-scripts {
    margin-left: 25%;
    display: inline-flex;
}

#doc-container .html-scripts code {
    background-color: #f9f2f4;
}

#doc-container .html-scripts code span {
    color: #c7254e !important;
}

#doc-container pre.rest-api-code {
    margin-bottom: 0;
}

#doc-container .rest-api-section ~ h5 {
    margin-top: -50px;
    border-top: 75px solid transparent;
}

#doc-container .rest-api-section ~ h3 + h5 {
    margin-top: -40px;
    border-top: 65px solid transparent;
}

#doc-container .rest-api-section ~ h6 {
    margin-top: -50px;
    border-top: 60px solid transparent;
    margin-left: 10px;
    color: #444444;
}

#doc-container .rest-api-section ~ blockquote {
    margin-top: 15px;
}

#doc-container .rest-api-section ~ table {
    margin-top: 0;
    margin-bottom: 20px;
    display: inline-table;
}

#doc-container .rest-api-section ~ pre > code {
    white-space: pre;
}

#doc-container .rest-api-section.rest-api-pro-section ~ blockquote {
    margin-top: 0;
    margin-bottom: 10px;
}

#doc-container .index-list > ul > li {
    margin-top: 7px;
}

.img-acknowledgments {
    max-width: 50%;
    height: auto;
    display: inline-block;
    padding: 0;
}

#doc-container blockquote li {
    font-size: 14px;
}

ul#menu-list > li > ul.top-ul {
	padding-left: 8px;
    padding-right: 8px;
    padding-top: 0;
    border-radius: 2px;
}

ul#menu-list li.subnav_drop {
    padding-top: 3px;
    padding-bottom: 3px;
}

ul#menu-list > li > ul.top-ul ul.subnav > li.subnav_drop.current {
    background-color: #eeeeee;
}

ul#menu-list > li > ul.top-ul.current {
    background-color: #f7f7f7;
}

ul.subnav > li.current {
    background-color: #e9e9e9;
    padding: 8px;
    border-radius: 2px;
}

ul.subnav > li.current {
    background-color: #0088aa1f;
    margin-left: -25px;
    padding-left: 25px;
}

#sticky-menu ul li.toctree-l1 a {
    display: block;
    width: 100%;
    text-align: left;
}

#sticky-menu ul.subnav {
    padding-left: 25px;
    margin-top: 10px;
}

#sticky-menu ul li div,
#sticky-menu ul li.toctree-l1 {
    cursor: pointer;
}

#sticky-menu li span,
#sticky-menu li a {
    color: #777;
    cursor: pointer;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#sticky-menu ul li div:hover span,
#sticky-menu ul li.toctree-l1:hover a {
    color: #0088aa;
    font-weight: bold;
}

#sticky-menu li a.current {
    color: #0088aa;
}

#sticky-menu ul#menu-list > li > ul > li {
    padding-bottom: 5px;
    padding-top: 5px;
}

#sticky-menu .toctree-l1 {
    padding-top: 3px;
    padding-bottom: 3px;
}

#sticky-menu ul#menu-list > li > ul > li > a {
    font-weight: bold;
}

span.arrow-up {
    color: #bfbfbf !important;
}

span.arrow-down {
    color: #bfbfbf !important;
}

@media all and (min-width: 992px) {
    #doc-container img.login-form-img {
        max-width: 300px;
    }
    
    #doc-container img.join-form-img {
        max-width: 500px;   
    }

    #doc-container img.openvidu-pro-img {
        max-width: 500px;   
    }
}

@media screen and (max-width: 991px) {
    ul#menu-list {
        position: inherit;
        top: inherit;
        bottom: inherit;
        height: inherit;
        margin-right: unset;
        padding-right: unset;
    }
    #sticky-menu {
        position: relative !important;
        top: 0 !important;
    }
    #sticky-menu a, #sticky-menu li.subnav_drop > div {
        margin-top: 6px;
        margin-bottom: 6px;
    }
    #doc-container h2#section-title {
        font-size: 40px;
    }
    #doc-container h1 {
        font-size: 30px;
    }
    #doc-container h4 code {
        word-wrap: break-word;
    }
    .img-acknowledgments {
        max-width: 100%;
        height: auto;
        display: inline-block;
    }
    blockquote {
        margin-left: 12px !important;
        padding: 10px 20px 10px 10px !important;
    }
    blockquote ul {
        padding-left: 30px !important;
    }
}

@media all and (max-width: 767px) {
    #doc-container {
        margin-top: -25px;
    }
    #doc-container #deploy-arch-row {
        display: inherit;
        align-items: inherit; 
    }
    #doc-container #deploy-arch-desc {
        margin: 30px 20px 10px 20px;
    }
    #doc-container #deploy-arch-desc ol li {
        font-size: 15px;
    }
    #doc-container #deploy-arch-desc blockquote {
        margin-left: 0;
    }
    #doc-container .html-scripts {
        margin-left: inherit;
        display: inherit;
    }
}