/* Phone layout for Login.aspx only. A window wider than 760px never matches. */

@media screen and (max-width: 760px) {
    html, body {
        overflow-x: hidden;
    }

    #MainForm {
        height: auto !important;
    }

    table[style*="height: 100%"] {
        height: auto !important;
    }

    table[style*="80vh"] {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        width: 100% !important;
        padding: 56px 16px 28px;
        box-sizing: border-box;
    }

    table[style*="80vh"] > tbody,
    table[style*="80vh"] > tbody > tr,
    table[style*="80vh"] > tr,
    table[style*="80vh"] > tbody > tr > td,
    table[style*="80vh"] > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    #ASPxImageLogo,
    #ASPxImageLogo img {
        width: 168px !important;
        max-width: 62vw;
        height: auto !important;
    }

    #RoundPanelLogin,
    #RoundPanelChangePassword {
        width: 100% !important;
        max-width: 440px;
        margin: 8px auto 0;
        box-sizing: border-box;
    }

    #RoundPanelLogin table,
    #RoundPanelChangePassword table {
        width: 100% !important;
    }

    #RoundPanelLogin td,
    #RoundPanelChangePassword td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
        white-space: normal !important;
    }

    #RoundPanelLogin td.style2 {
        padding: 8px 0 2px;
    }

    [id$="txtUsername"],
    [id$="txtPassword"],
    [id$="txtOldPassword"],
    [id$="txtNewPassword"],
    [id$="txtConfirmPassword"],
    [id$="ASPxLabel13"] {
        width: 100% !important;
    }

    #RoundPanelLogin input,
    #RoundPanelChangePassword input,
    .dxpcLite input {
        font-size: 16px !important;
    }

    #RoundPanelLogin td[style*="nowrap"] {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    #RoundPanelLogin td[style*="nowrap"] > div:first-child {
        flex: 1 1 auto;
        display: block !important;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    #RoundPanelLogin td[style*="nowrap"] > div:last-child {
        flex: none;
        display: block !important;
        width: auto !important;
        margin: 0 !important;
    }

    #RoundPanelChangePassword div[style*="display: flex"],
    #RoundPanelChangePassword div[style*="display:flex"] {
        width: 100% !important;
    }

    #RoundPanelChangePassword div[style*="display: flex"] > table,
    #RoundPanelChangePassword div[style*="display:flex"] > table {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    [id$="imgTogglePassword"],
    [id$="imgToggleOldPassword"],
    [id$="imgToggleNewPassword"],
    [id$="imgToggleConfirmPassword"] {
        width: 44px !important;
        height: 44px !important;
    }

    [id$="btnLogin"],
    [id$="ButtonChangePassword"],
    [id$="ButtonCancelChangePassword"],
    [id$="ASPxButton1"],
    [id$="ButtonResetUsername"] {
        min-height: 44px;
    }

    #RoundPanelChangePassword table[style*="width: 30%"] {
        width: 100% !important;
    }

    div[style*="position: fixed"][style*="right"] {
        top: 8px !important;
        right: 8px !important;
    }

    #ASPxImage1Information,
    #ASPxImage1Information img {
        width: 40px !important;
        height: 40px !important;
    }

    [class*="dxpcLite"] {
        display: block !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        left: 10px !important;
        box-sizing: border-box;
        overflow-x: auto;
    }

    [class*="dxpcLite"] .dxpc-content {
        overflow: auto;
        max-height: calc(100vh - 96px);
    }

    [class*="dxpcLite"] table[style*="width: 30%"],
    [class*="dxpcLite"] table[style*="width: 40%"],
    [class*="dxpcLite"] table[style*="width:30%"],
    [class*="dxpcLite"] table[style*="width:40%"] {
        width: 100% !important;
    }

    [id$="PopupAdditionalInformation"] .dxpc-content > table > tbody > tr > td > table > tbody > tr,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tbody > tr > td > table > tr,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tr > td > table > tbody > tr,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tr > td > table > tr {
        display: block;
    }

    [id$="PopupAdditionalInformation"] .dxpc-content > table > tbody > tr > td > table > tbody > tr > td,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tbody > tr > td > table > tr > td,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tr > td > table > tbody > tr > td,
    [id$="PopupAdditionalInformation"] .dxpc-content > table > tr > td > table > tr > td,
    [id$="PopupAdditionalInformation"] table[style*="width: 30%"] > tbody > tr > td,
    [id$="PopupAdditionalInformation"] table[style*="width: 30%"] > tr > td,
    [id$="PopupAdditionalInformation"] table[style*="width:30%"] > tbody > tr > td,
    [id$="PopupAdditionalInformation"] table[style*="width:30%"] > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
    }

    [id$="PopupAdditionalInformation"] [id$="ComboBranch"],
    [id$="PopupAdditionalInformation"] [id$="ButtonProceed"],
    [id$="PopupAdditionalInformation"] [id$="ButtonCancel"] {
        width: 100% !important;
        max-width: 100%;
        min-height: 44px;
    }

    [id$="PopupAdditionalInformation"] [id$="ButtonProceed"],
    [id$="PopupAdditionalInformation"] [id$="ButtonCancel"] {
        margin-top: 8px;
    }

    [id$="PopupAdditionalInformation"] [id$="ComboBranch"] input {
        font-size: 16px !important;
        min-height: 40px;
    }

    [id*="ComboBranch_DDD"] {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        height: auto !important;
        max-height: 50vh !important;
        box-sizing: border-box;
    }

    [id*="ComboBranch_DDD"] .dxeListBoxItem {
        font-size: 16px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #ASPxImageSlider1,
    #ASPxImageSlider1 .dxis-imageArea,
    .dxisControl {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #ASPxImageSlider1 img,
    .dxcaControl,
    .dxcaControl img,
    .dxca-imageDiv {
        max-width: 100% !important;
        height: auto !important;
    }
}