@media screen and (max-width: 992px) {
    .with-sidebar .brand-name {
        display: block;
    }
    .page-wrapper.toggled .sidebar-wrapper {
        left: -300px !important;
    }
    .page-wrapper.toggled #show-sidebar {
        left: -3px !important;
    }
    .page-wrapper .sidebar-wrapper {
        left: 0 !important;
    }
    .page-wrapper #show-sidebar {
        left: -40px !important;
    }
    .page-wrapper.toggled .page-content {
        padding-left: 0;
    }
    .header nav {
        padding: 5px 25px;
        display: block;
        text-align: right;
    }
    .navbar .navbar-toggler {
        padding: 0 4px 4px;
    }
    .header nav .navbar-collapse li.nav-item > a {
        padding: 7px 0;
        border-bottom: 1px solid #f4f4f4;
    }
    .navbar-light .navbar-toggler-icon {
        width: 18px;
        height: 18px;
    }
    #show-sidebar {
        width: 23px;
        padding: 0;
        top: 7px;
    }
    #show-sidebar i {
        font-size: 10px;
    }
    .new-index-header button,
    .search-wrapper {
        display: none;
    }
    .bootstrap-head {
        border-bottom: 1px solid #7e5ab5;
    }
    .bootstrap-head-min {
        border-bottom: 1px solid #e9dbff;
    }
    .bootstrap-head .navbar .navbar-toggler {
        background: #916fc5;
        height: 22px;
        width: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        float: right;
    }
    .bootstrap-head .navbar .navbar-toggler span {
        font-size: 13px;
        padding: 0;
    }
    .bootstrap-head .navbar ul,
    .bootstrap-nav {
        width: 100%;
    }
    .header.bootstrap-head nav .navbar-collapse li.nav-item > a {
        padding: 7px 0;
        border-bottom: 1px solid #e9dbff;
    }
    .semantic-doc-head .header {
        border-bottom: 1px solid #777;
    }
    .semantic-doc-head .header .navbar .navbar-toggler {
        width: 22px;
        height: 22px;
        background: #e4e4e4;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: right;
        padding: 0;
        border-radius: 2px;
    }
    .semantic-col-min,
    .semantic-col-min ul {
        width: 100%;
    }
    .page-wrapper.toggled .sidebar-wrapper.relative-sidenav {
        left: 0 !important;
    }
    .org-theme.bootstrap-color .upper-head {
        padding: 10px 25px 45px !important;
    }
    .banner-input {
        padding: 100px 0;
    }
    .box-wrapper,
    .box-wrapper-2 {
        margin: 20px 0 0;
    }
    .login-right-inner h1 {
        font-size: 30px;
    }
    .login-content-inner-wrapper {
        padding: 0 50px;
    }
}
@media screen and (max-width: 768px) {
    body {
        font-size: 12px;
    }
    .page-wrapper.toggled .sidebar-wrapper.relative-sidenav,
    .right-nav {
        display: none;
    }
    .banner-input {
        padding: 50px 15px;
    }
    .page-wrapper .page-content div.main-content {
        padding: 20px 19px;
    }
    .content-section {
        padding: 0;
        width: 100%;
    }
    pre {
        width: 100%;
    }
    .main-articles ul li {
        width: calc(100% / 2);
    }
    .upper-head h2 {
        margin: 0 0 15px;
    }
    .upper-head {
        padding: 20px;
    }
    .upper-head p {
        width: 100%;
    }
    .article-inner-wrapper .col-md-2 {
        text-align: left;
    }
    .article-inner-wrapper i {
        margin-bottom: 23px;
        display: block;
    }
    .article-content-sec .section {
        padding: 30px 0;
    }
    .introduction {
        padding: 50px 0;
    }
    footer {
        padding: 12px 0;
    }
    footer ul li a {
        font-size: 0.9em;
    }
    .login-left-wrapper {
        width: 100%;
    }
    .login-content-inner-wrapper {
        text-align: center;
    }
    button.login-btn {
        margin: 20px auto 0;
    }
    .login-with ul {
        text-align: center;
    }
    .login-with ul li {
        float: none;
    }
    ul.app-screens li {
        width: calc(100% / 2);
    }
}
@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 300px;
    }
}
@media only screen and (max-width: 500px) {
    .chat-logs {
        height: 40vh;
    }
    ul.app-screens li {
        width: calc(100%);
    }
}