aredn/files/app/resource/css/mobile.css

#m-all
{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background-color: var(--body-bg-color);
}
#m-title
{
    display: flex;
    height: 80px;
    background-color: var(--nav-bg-color);
}
#m-title #icon-logo
{
    position: relative;
    top: 10px;
}
#m-main
{
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
}
#m-nav
{
    display: flex;
    height: 80px;
    min-height: 80px;
    background-color: var(--nav-bg-color);
}

#m-main #main-container
{
    flex-direction: column;
}
#m-main #location .location-image
{
    width: 100%;
}
#m-main #location .location-image iframe
{
    width: 95%;
}
#m-main #local-and-neighbor-devices .stats
{
    min-width: 0px;
    flex: 1;
}
#m-main #local-and-neighbor-devices .h
{
    flex: 1;
}
#m-main #dhcp .t
{
   font-size: 12px;
}
#m-main #dhcp .ts
{
   font-size: 10px;
}

#m-nav > div
{
    flex: 1;
}
#m-nav .icon,
#m-nav #login-icon .icon,
#m-nav #logout-icon .icon
{
    height: 80px;
    min-height: 80px;
    width: 42px;
    min-width: 42px;
    margin: 0 auto;
    filter: var(--nav-icon-filter);
    background-position: center center;
    background-repeat: no-repeat;
}
#m-nav .icon.true
{
    filter: var(--nav-icon-filter-select);
}
#m-nav #login-icon,
#m-nav #logout-icon
{
    width: 100px;
}
#m-nav #login-icon .menu,
#m-nav #logout-icon .menu
{
    top: auto;
    bottom: 60px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#m-all #login
{
    min-width: 50%;
    padding: 50px 10px;
}
#m-all #login input
{
    width: 100px;
    font-size: inherit;
}

body.mobile #ctrl-modal[open]
{
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 0;
}
body.mobile #ctrl-modal > .dialog
{
    width: 100%;
    min-width: 100%;
    overflow-x: hidden;
}
body.mobile #ctrl-modal .dialog > div:nth-child(2)
{
    padding: 0 10px 0 0;
}

body.mobile #ctrl-modal .ctrl-modal-footer button
{
    height: 34px;
    font-size: 24px;
}

body.mobile #firmware-update-inner
{
    margin: 0;
    padding: 0;
}
body.mobile #download-firmware,
body.mobile #upload-firmware,
body.mobile #sideload-firmware,
body.mobile #download-package,
body.mobile #upload-package,
body.mobile #remove-package
{
    width: 160px
}
body.mobile #ctrl-modal #firmware-refresh button.icon.refresh,
body.mobile #ctrl-modal #package-refresh button.icon.refresh
{
    left: -3px;
}

body.mobile #ctrl-modal #dhcp-reservations input,
body.mobile #ctrl-modal #dhcp-reservations select,
body.mobile #ctrl-modal .dhcp-options input,
body.mobile #ctrl-modal .dhcp-options select,
body.mobile #ctrl-modal .dhcp-tags input,
body.mobile #ctrl-modal .dhcp-tags select
{
    font-size: 10px;
}
body.mobile #ctrl-modal .reservation input[type=text]:first-child,
body.mobile #ctrl-modal .reservation-label div:first-child div:first-child,
body.mobile #ctrl-modal .reservation select:nth-child(2),
body.mobile #ctrl-modal .reservation-label div:first-child div:nth-child(2),
body.mobile #ctrl-modal .reservation input:nth-child(3),
body.mobile #ctrl-modal .reservation-label div:first-child div:nth-child(3),
body.mobile #ctrl-modal .dhcp-options .adr > div > :nth-child(2),
body.mobile #ctrl-modal .dhcp-tags .adr > div > :nth-child(2),
body.mobile #ctrl-modal .dhcp-options .adr > div > :nth-child(3),
body.mobile #ctrl-modal .dhcp-tags .adr > div > :nth-child(3)
{
    width: 90px;
}

body.mobile #ctrl-modal #local-services .service input[type=text],
body.mobile #ctrl-modal #local-services .service select,
body.mobile #ctrl-modal #local-services .service .cols:last-child input[type=text],
body.mobile #ctrl-modal #local-services .service .cols:last-child select
{
    font-size: 10px;
}
body.mobile #ctrl-modal #local-services .service .cols:last-child select
{
    width: 120px;
}
body.mobile #ctrl-modal #port-forwards select[name=port_src],
body.mobile #ctrl-modal #port-forwards select[name=port_dst],
body.mobile #ctrl-modal .port-forwards-label div:nth-child(1)
{
    width: 90px;
    min-width: 90px;
}
body.mobile #ctrl-modal #port-forwards input[name=port_sports],
body.mobile #ctrl-modal #port-forwards input[name=port_dport],
body.mobile #ctrl-modal .port-forwards-label div:nth-child(2)
{
    width: 70px;
    min-width: 70px;
}

body.mobile #ctrl-modal .xlink-label div:first-child div:first-child,
body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(6),
body.mobile #ctrl-modal .xlink input:first-child,
body.mobile #ctrl-modal .xlink select:first-child,
body.mobile #ctrl-modal .xlink select[name=port]
{
    width: 45px;
    flex-grow: 1;
}
body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(2),
body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(3),
body.mobile #ctrl-modal .xlink input:nth-child(2),
body.mobile #ctrl-modal .xlink input:nth-child(3)
{
    width: 70px;
    flex-grow: 1;
}

body.mobile #meshpage
{
    padding: 5px 5px;
}
body.mobile #meshpage .block
{
    padding: 30px 0 10px 0;
}
body.mobile #meshpage .node
{
    width: 100%;
    padding: 2px 10px;
}
body.mobile #meshfilter input
{
    width: 200px;
}
body.mobile .meshpage-help
{
    padding: 20px 20px 0 20px;
}