/*
 * Адаптивная вёрстка. Десктоп (>= 1200px) не меняется:
 *  - до 1200px контейнеры резиновые (3 колонки сохраняются);
 *  - до 992px колонки складываются (контент первым, затем левая колонка с логином и правая),
 *    меню прячется под гамбургер, шапка и верхняя панель компактные;
 *  - до 768px шапка ещё меньше.
 */

@media (max-width: 1199px) {
    .container,
    .page.container,
    .top-menu.container {
        width: auto;
    }

    .header {
        width: auto;
    }

    .header .container {
        width: 100%;
    }
}

@media (max-width: 991px) {
    /* верхняя панель: cookies, соцсети и языки — по центру, переносятся */
    .top-settings-menu {
        height: auto;
    }

    .top-settings-menu .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .cookies-notice {
        height: auto;
        padding: 6px 0;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 12px;
    }

    .settings-menu {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .settings-menu > li {
        float: none;
    }

    .settings-menu > li > a {
        padding: 10px 8px;
    }

    .social-icon,
    .settings-menu li,
    .settings-menu li a {
        height: 40px !important;
    }

    .social-icon img {
        height: 28px;
    }

    .settings-menu .lang-icon a {
        display: flex;
        align-items: center;
    }

    /* шапка */
    .header {
        height: auto;
        padding-bottom: 20px;
    }

    .header .container,
    .renaissance .header .container {
        padding-top: 30px;
        margin-left: 0;
    }

    .logo-container,
    .logo {
        width: auto;
        max-width: 100%;
    }

    .logo img {
        height: auto;
        max-width: 100%;
        max-height: 150px;
    }

    .server-status {
        margin-left: 0;
        font-size: 15px;
        line-height: 21px;
    }

    /* меню под гамбургером (в Bootstrap 3 по умолчанию только до 768px) */
    .navbar-top-menu .navbar-header {
        float: none;
    }

    .navbar-top-menu .navbar-brand {
        display: block;
        color: #fff;
        text-transform: uppercase;
        font-size: 16px;
    }

    .navbar-top-menu .navbar-toggle {
        display: block;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .navbar-top-menu .navbar-toggle:hover,
    .navbar-top-menu .navbar-toggle:focus {
        background-color: #565076;
    }

    .navbar-top-menu .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .navbar-top-menu .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-top-menu .navbar-collapse.collapse.in {
        display: block !important;
    }

    .top-menu .navbar-collapse {
        line-height: normal;
        text-align: left;
        border-top: 1px solid #565076;
    }

    .top-menu .main-menu {
        display: block;
        float: none !important;
        margin: 7px -15px;
    }

    .navbar-top-menu .navbar-nav > li {
        float: none;
    }

    .navbar-top-menu .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-top-menu .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    .navbar-top-menu .navbar-nav .open .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px;
        line-height: 20px;
        color: rgba(255, 255, 255, 0.6);
    }

    .navbar-top-menu .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-top-menu .navbar-nav .open .dropdown-menu > li > a.current {
        color: #fff;
    }

    .menu-item-underline {
        display: none;
    }

    /* колонки: контент первым */
    .page > .row {
        display: flex;
        flex-direction: column;
    }

    .page > .row > .left_column,
    .page > .row > .right_column,
    .page > .row > .content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .page > .row > .content {
        order: 1;
    }

    .page > .row > .left_column {
        order: 2;
    }

    .page > .row > .right_column {
        order: 3;
    }

    /* широкие таблицы и сетки вещей прокручиваются внутри блока, а не всей страницей */
    .page-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-content img {
        max-width: 100%;
        height: auto;
    }

    .account-zen {
        width: auto;
        max-width: 450px;
    }

    .item-with-monsters-drop {
        flex-wrap: wrap;
    }

    .hof-caption {
        font-size: 24px;
    }

    .reset_tasks td:nth-child(2) {
        min-width: 0;
    }

    #alerts_container {
        left: 10px;
        right: 10px;
        width: auto;
    }
}

@media (max-width: 767px) {
    body {
        background-size: 1100px auto;
    }

    .header .container,
    .renaissance .header .container {
        padding-top: 20px;
    }

    .logo img {
        max-height: 100px;
    }

    body .page-h1 {
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    .navbar-top-menu .navbar-brand {
        display: none;
    }
}