/** mobile styles used for iOS and Android */
.userAgentMobile #topBar,
.userAgentMobile #menuContainer,
.userAgentMobile #workspaceContainer {
    position: fixed;
    width: 100%;
}
.userAgentMobile #topBar {
    padding: 15px;
    height: 60px;
}
.userAgentMobile #topLogo {
    margin-bottom: 10px;
}
.userAgentMobile #actionsArea:before {
    width: 100%;
}
.userAgentMobile #workspaceContainer {
    width: 100%;
    height: calc(100vh - 5px);
}
.userAgentMobile #headerWrapper {
    height: 90px;
    padding-left: 20px;
}
.userAgentMobile #actionsArea {
    padding: 0 10px;
    margin: 5px 5px 0 5px;
}
.userAgentMobile #workspaceArea {
    padding: 5px;
    margin: 0 5px 5px;
}
.userAgentMobile .gridForm > div {
    display: flex;
    margin-bottom: 10px;
}
.userAgentMobile .mainForm > .formContents {
    margin-bottom: 0;
}

.userAgentMobile .formCell input.input,
.userAgentMobile .formCell select,
.userAgentMobile .formCell textarea {
    -webkit-appearance: none;
}

.userAgentMobile .dgrid-header .columnFilter {
    visibility: visible;
    top: 0;
    right: 5px;
    width: 25px;
    height: 25px;
    padding: 5px 0 0 5px;
}
.userAgentMobile .dgrid-header .dgrid-cell {
    position: relative;
}

.userAgentMobile .dgrid-header.fixedAtTop {
    top: 0 !important;
}

@media screen and (max-width:980px) {

    #userData .fullName,
    #userData .login {
        max-width: calc(40vw - 60px);
        overflow: hidden;
    }

    .gridForm {
        display: block;
    }

    .rowColumns1,
    .rowColumns2,
    .rowColumns3,
    .rowColumns4,
    .rowColumns5,
    .rowColumns6,
    .rowColumns7,
    .rowColumns8,
    .rowColumns9,
    .rowColumns10,
    .dashboardItem {
        width: 96%;
    }

    #workspaceArea {
        padding: 15px;
    }
    .form {
        padding: 20px 0 40px 40px;
    }
    .mainForm > .formContents {
        margin-bottom: 0;
    }
    .formCell .mdInstanceBPD .form {
        padding-left: 0;
    }
    .formCell .radiocheck.radiocheckAcross td {
        display: inline-block;
        word-break: break-all;
    }

    .userAgentMobile .listView .dgrid-cell {
        float: left !important;
        width: 33% !important;
    }

    .dgrid-content .dgrid-cell.dataTypeInteger,
    .dgrid-content .dgrid-cell.dataTypeFloat {
        text-align: left;
    }

    .listViewSearch .dijitTextBox {
        width: 150px;
    }

}

@media screen and (max-width:480px) {

    #topLogo,
    .recordStatus,
    .listViewSearch,
    .formCell div.searchLookupElements .lookupView,
    .formCell div.searchLookupElements .lookupEdit {
        display: none !important;
    }
    #appCrumbs .crumbItem {
        margin-right: 5px;
    }
    #appCrumbs .crumbItem:after {
        margin-left: 5px;
    }
    #toolbarContainer {
        float: left;
    }
    #workSpace > div:not(:empty),
    #toolbarContainer .mainToolbar {
        padding: 10px 0;
    }
    .extraToolbar.detail {
        right: 0;
        bottom: 24px;
    }
    .userAgentMobile .listView .dgrid-cell {
        width: 100% !important;
    }
    .form {
        padding: 0;
    }
    .formCell {
        padding: 10px 0;
        width: calc(100% + 50px); /** offset the right margin we normally render */
    }
    .subformListView .subformButtons {
        margin-top: 0;
    }
    .formCell .lookupView {
        position: absolute;
    }
    .tundra .dijitComboBox .dijitButtonNode {
        width: 32px;
    }
    .tundra .dijitButton,
    .tundra .dijitDropDownButton {
        margin: 0.2em 0.4em;
    }
    .tundra .dijitButtonContents {
        padding: 3px 7px;
    }
    .formCell .iconButton {
        width: 32px;
        left: -64px;
    }
    .formCell div.searchLookupElements .lookupFolder {
        right: 82px;
    }
    .formCell .iconButton.timeNow {
        left: -33px;
    }
    .formCell .radiocheck.radiocheckAcross td {
        display: inline-block;
        word-break: break-all;
    }
    .tundra .dijitCalendarContainer table {
        margin: 0 auto;
    }
    .tundra .dijitCalendarArrow {
        top: 20px;
    }
    .dgrid-cell {
        padding: 10px 5px 10px 10px;
    }
    .tundra .dijitDialogPaneContent {
        min-width: 360px;
    }
    .table > tbody > tr:not(.th):not(.mdInstanceBPD) > td,
    .panelTable > tbody > tr > td,
    .table tr.th > td,
    .panelTable tr.th > td,
    .table tr > th,
    .panelTable tr > th {
        padding: 10px;
    }
    .lookupDialog {
        top: 3vh !important;
    }
    .selectedItemsContainer table,
    .treetable {
        min-width: 300px;
    }
    .lookupActions .clear img {
        width: 200px !important;
    }
    .treetable td.treeContent img {
        margin-left: -20px;
    }
    .errorPanel .errorPanelContent,
    .errorPanel .errorPanelHeader {
        padding: 10px 20px;
    }
    .errorPanel .validationContainer {
        width: 100%;
        margin: 10px 0;
    }
    .errorPanel .showHideValidations a {
        padding: 11px;
    }
    .errorPanel .validationField {
        margin: 5px 0;
    }
}

/** CSS for Login and Logout screens on mobile */
@media only screen
and (min-width: 200px)
and (min-device-width: 300px)
and (max-device-width: 480px) {
    .body, .left {
        background-position-y: 10px;
        background-size: 50%;
    }
    .loginScreen {
        zoom: 2.5;
    }
}