/* Mobile layout shared by login.php, logout.php, and anmelden.php. */
@media screen and (max-width: 767px) {
    html,
    body.auth-page {
        min-width: 0;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
        background: #fff;
        color: #222;
        font-family: Arial, "Microsoft JhengHei", sans-serif;
        font-size: 16px;
    }

    body.auth-page .wrapper,
    body.auth-page div#mid,
    body.auth-page div#content,
    body.auth-page div#footer {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }

    body.auth-page div#dynamic_header {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0 !important;
        height: 100px;
        background-color: #dce7d4;
        background-image: url("../gpack/travian_dqno1/images/artwork1-ltr.jpg?v=20261002-h100") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: auto 100px !important;
    }

    body.auth-page div#header {
        display: none;
    }

    body.auth-page div#mid {
        float: none;
        margin: 0;
    }

    body.auth-page div#side_navi {
        position: static;
        display: block;
        float: none;
        box-sizing: border-box;
        width: 100%;
        height: 48px !important;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #cfd5cb;
        background: #f1f3ef;
    }

    body.auth-page div#side_navi a#logo {
        display: none;
    }

    body.auth-page div#side_navi p {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0;
    }

    body.auth-page div#side_navi p a {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: auto;
        height: 48px;
        padding: 0 8px;
        border-right: 1px solid #d4d8d1;
        color: #397800;
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        text-decoration: none;
        background: transparent;
    }

    body.auth-page div#content {
        position: static;
        float: none;
        min-height: 0;
        margin: 0;
        padding: 18px 14px 28px;
        overflow: visible;
        background: #fff;
    }

    body.auth-page div#content > h1 {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 16px;
        padding: 4px 0;
        border: 0;
        background: #fff;
        color: #222;
        font-size: 27px;
        line-height: 0;
        text-align: center;
    }

    body.auth-page div#content > h1 img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    body.auth-login div#content > h1::after,
    body.auth-register div#content > h1::after { content: none; }

    body.auth-page div#content h5 {
        display: none;
    }

    body.auth-page div#content p {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 16px;
        font-size: 16px;
        line-height: 25px;
    }

    body.auth-page div#side_info.outgame {
        display: none;
    }

    body.auth-login table#login_form {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 18px 0;
        padding: 12px;
        border: 1px solid #d8ddd4;
        background: #f7f8f5;
    }

    body.auth-login table#login_form tbody,
    body.auth-login table#login_form tr,
    body.auth-login table#login_form th,
    body.auth-login table#login_form td {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        border: 0;
        background: transparent;
    }

    body.auth-login table#login_form tr {
        margin-bottom: 12px;
    }

    body.auth-login table#login_form tr:last-child {
        margin-bottom: 0;
    }

    body.auth-login table#login_form th {
        padding: 0 0 5px;
        font-size: 16px;
        line-height: 22px;
        text-align: left;
    }

    body.auth-login table#login_form td {
        padding: 0;
    }

    body.auth-login table#login_form input.text {
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding: 7px 10px;
        border: 1px solid #8ebd50;
        background: #fff;
        font-size: 18px;
        line-height: 28px;
    }

    body.auth-login p.btn {
        text-align: center;
    }

    body.auth-login #btn_login,
    body.auth-page button.trav_buttons {
        min-width: 150px;
        min-height: 44px;
        padding: 8px 22px;
        border: 1px solid #568d20;
        border-radius: 3px;
        background: #4f852a;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
    }

    body.auth-logout div#content.logout img.roman {
        display: block;
        float: none;
        margin: 12px auto 18px;
    }

    body.auth-logout div#content.logout p {
        padding: 12px;
        border-left: 4px solid #71a900;
        background: #f7f8f5;
    }

    body.auth-register div#content.signup {
        padding-left: 8px;
        padding-right: 8px;
    }

    body.auth-register div#content.signup > h1 {
        display: block;
    }

    body.auth-register #regwiz {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    body.auth-register #regwiz .rw-hdr {
        height: auto;
        min-height: 52px;
        padding: 10px 14px;
        border-left: 4px solid #71a900;
        border-bottom: 1px solid #d8ddd4;
        background: #f1f3ef;
    }

    body.auth-register #regwiz .rw-hdr::before,
    body.auth-register #regwiz .rw-hdr::after,
    body.auth-register #regwiz .rw-bot {
        display: none;
    }

    body.auth-register #regwiz .rw-hdr span {
        color: #222;
        font: 700 26px/32px Arial, "Microsoft JhengHei", sans-serif;
        text-shadow: none;
    }

    body.auth-register #regwiz .rw-body {
        padding: 14px 10px 18px;
        border: 1px solid #d8ddd4;
        border-top: 0;
        background: #fff;
    }

    body.auth-register #regwiz .rw-panel {
        height: 225px;
        padding: 12px;
        background: #f3f6f0;
        border-color: #cbd4c5;
    }

    body.auth-register #regwiz .rw-name {
        font-family: Arial, "Microsoft JhengHei", sans-serif;
        letter-spacing: 0;
    }

    body.auth-register #regwiz .rw-btn {
        width: 100%;
        max-width: 300px;
        height: 48px;
        background: #4f852a;
        border: 1px solid #568d20;
        border-radius: 3px;
        font: 700 17px/46px Arial, "Microsoft JhengHei", sans-serif;
        text-shadow: none;
    }

    body.auth-page .footer-stopper,
    body.auth-page div#footer div#cfoot {
        display: none;
    }

    body.auth-page div#footer {
        position: static;
        height: auto;
        min-height: 0;
        margin: 0;
        border-top: 1px solid #d8ddd4;
        background: #f1f3ef !important;
    }

    body.auth-page div#footer div#mfoot,
    body.auth-page div#footer .footer-menu,
    body.auth-page div#footer .footer-menu > div {
        position: static;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: #f1f3ef !important;
        background-image: none !important;
    }

    body.auth-page div#footer .footer-menu br {
        display: none;
    }

    body.auth-page div#footer div.copyright {
        padding: 3px 10px;
        color: #666;
        font-size: 11px;
        line-height: 17px;
        text-align: center;
    }

    body.auth-page div#stime {
        position: static;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-width: 0;
        padding: 8px 12px 12px;
        background: #f1f3ef;
        color: #555;
        font-size: 12px;
        line-height: 19px;
        text-align: center;
    }

    body.auth-page div#stime div#ltime,
    body.auth-page div#stime div#ltimeWrap {
        position: static;
        width: 100% !important;
        min-width: 0 !important;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
    }
}

@media screen and (max-width: 359px) {
    body.auth-register #regwiz .rw-panel {
        height: 240px;
    }

    body.auth-register #regwiz .rw-lines li {
        padding-left: 24px;
        font-size: 11px;
    }
}