/* Small responsive overrides for the legacy Ace layout. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.main-content,
.main-content-inner,
.page-content {
    max-width: 100%;
}

.main-content table,
.main-content .grid-view,
.main-content .table {
    max-width: 100%;
}

.main-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-content table thead,
.main-content table tbody,
.main-content table tfoot,
.main-content table tr {
    width: 100%;
}

.main-content img,
.main-content iframe {
    max-width: 100%;
}

.main-content .table-responsive,
.main-content .grid-view,
.main-content .kv-grid-container,
.codex-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.codex-table-scroll table {
    min-width: max-content;
}

.main-content .chosen-container,
.main-content .select2-container {
    max-width: 100%;
}

.dashicons {
    min-height: 1px;
}

@media (max-width: 767px) {
    .navbar {
        min-height: 45px;
    }

    .navbar .navbar-container {
        padding-left: 0;
        padding-right: 0;
    }

    .navbar .navbar-brand {
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar .navbar-buttons {
        float: right !important;
    }

    .navbar .ace-nav > li > a {
        min-width: 42px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .navbar .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        top: 100% !important;
        max-width: calc(100vw - 16px);
    }

    .navbar .dropdown-navbar {
        width: calc(100vw - 16px) !important;
        max-width: 320px;
    }

    .sidebar.responsive {
        max-width: calc(100vw - 20px);
    }

    .main-content {
        min-width: 0;
    }

    .main-content-inner {
        padding-left: 8px;
        padding-right: 8px;
    }

    .page-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .page-header h1 {
        font-size: 22px;
        line-height: 1.3;
    }

    .page-header h1 small {
        display: block;
        margin-top: 4px;
        font-size: 13px;
    }

    .page-header h1 p {
        float: none !important;
        display: block;
        margin: 8px 0 0;
    }

    .page-header select,
    .page-header .form-control {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .form-control,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"] {
        max-width: 100%;
    }

    .main-content input,
    .main-content select,
    .main-content textarea,
    .main-content .form-control,
    .main-content .chzn-select,
    .main-content .chosen-container,
    .main-content .select2-container,
    .main-content .select2-choice {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .main-content select,
    .main-content textarea,
    .main-content input[type="text"],
    .main-content input[type="number"],
    .main-content input[type="email"],
    .main-content input[type="password"],
    .main-content input[type="date"],
    .main-content input[type="search"],
    .main-content input[type="tel"] {
        min-height: 32px;
    }

    .main-content .col-xs-1,
    .main-content .col-xs-2,
    .main-content .col-xs-3,
    .main-content .col-xs-4,
    .main-content .col-xs-5,
    .main-content .col-xs-6,
    .main-content .col-xs-7,
    .main-content .col-xs-8,
    .main-content .col-xs-9,
    .main-content .col-xs-10,
    .main-content .col-xs-11,
    .main-content .search-form .col-xs-1,
    .main-content .search-form .col-xs-2,
    .main-content .search-form .col-xs-3,
    .main-content .search-form .col-xs-4,
    .main-content .search-form .col-xs-5,
    .main-content .search-form .col-xs-6,
    .main-content .search-form .col-xs-7,
    .main-content .search-form .col-xs-8,
    .main-content .search-form .col-xs-9,
    .main-content .search-form .col-xs-10,
    .main-content .search-form .col-xs-11,
    .main-content .widget-box .col-xs-1,
    .main-content .widget-box .col-xs-2,
    .main-content .widget-box .col-xs-3,
    .main-content .widget-box .col-xs-4,
    .main-content .widget-box .col-xs-5,
    .main-content .widget-box .col-xs-6,
    .main-content .widget-box .col-xs-7,
    .main-content .widget-box .col-xs-8,
    .main-content .widget-box .col-xs-9,
    .main-content .widget-box .col-xs-10,
    .main-content .widget-box .col-xs-11 {
        float: none !important;
        width: 100% !important;
        min-height: 1px;
    }

    .main-content .control-label,
    .main-content label,
    .main-content .help-block {
        max-width: 100%;
        white-space: normal;
    }

    .main-content .btn,
    .main-content button,
    .main-content input[type="submit"],
    .main-content input[type="button"] {
        max-width: 100%;
        white-space: normal;
        margin-bottom: 6px;
    }

    .main-content .btn-group,
    .main-content .button-group,
    .main-content .form-group,
    .main-content .summary,
    .main-content .pagination {
        max-width: 100%;
    }

    .main-content .btn-group > .btn {
        margin-bottom: 0;
    }

    .main-content .pull-left,
    .main-content .pull-right {
        float: none !important;
    }

    .main-content .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        margin: 12px auto !important;
    }

    .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .main-content .modal-body {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-content [style*="width:400px"],
    .main-content [style*="width: 400px"],
    .main-content [style*="width:500px"],
    .main-content [style*="width: 500px"],
    .main-content [style*="width:600px"],
    .main-content [style*="width: 600px"],
    .main-content [style*="width:700px"],
    .main-content [style*="width: 700px"],
    .main-content [style*="width:800px"],
    .main-content [style*="width: 800px"],
    .main-content [style*="width:900px"],
    .main-content [style*="width: 900px"],
    .main-content [style*="width:1000px"],
    .main-content [style*="width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .widget-box,
    .widget-body,
    .widget-main,
    .fuelux,
    .wizard,
    .step-content,
    .step-pane {
        max-width: 100%;
        overflow-x: hidden;
    }

    .widget-box {
        border-left: 0;
        border-right: 0;
    }

    .widget-main {
        padding-left: 8px;
        padding-right: 8px;
    }

    .fuelux .wizard .steps-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fuelux .wizard .steps {
        min-width: 620px;
    }

    .fuelux .wizard .steps li .title {
        white-space: nowrap;
    }

    .step-pane > .col-md-12,
    .step-pane > .col-md-4,
    .step-pane > .col-xs-12,
    .step-pane .col-md-12 > .col-md-4,
    .step-pane .col-md-12 > .col-md-3,
    .step-pane .col-md-12 > .col-xs-8,
    .step-pane .col-md-12 > .col-xs-4,
    .step-pane .col-md-12 > .col-xs-3,
    .step-pane .col-md-12 > .col-xs-2,
    .step-pane .col-xs-12 > .col-xs-8,
    .step-pane .col-xs-12 > .col-xs-4,
    .step-pane .col-xs-12 > .col-xs-3,
    .step-pane .col-xs-12 > .col-xs-2,
    .memberplot-index [class*="col-"],
    .memberplot-form [class*="col-"] {
        float: none !important;
        width: 100% !important;
        min-height: 1px;
    }

    .step-pane label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        float: none !important;
        margin: 4px 12px 8px 0;
        white-space: normal;
    }

    .step-pane input[type="radio"],
    .step-pane input[type="checkbox"] {
        margin: 0;
        float: none !important;
    }

    .reg-left-text {
        float: none !important;
        display: block;
        width: 100% !important;
        margin: 8px 0 4px;
        line-height: 1.35;
    }

    .reg-login-text-field,
    .step-pane select,
    .step-pane textarea,
    .step-pane input[type="text"],
    .step-pane input[type="number"],
    .step-pane input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 34px;
        box-sizing: border-box;
    }

    .step-pane input[readonly][style*="width:60px"],
    .step-pane input[readonly][style*="width: 60px"] {
        width: calc(33.33% - 6px) !important;
        display: inline-block;
    }

    .step-pane #plotno,
    .step-pane #tempms {
        width: calc(66.66% - 6px) !important;
        display: inline-block;
    }

    .step-pane #image {
        margin-left: 0 !important;
        text-align: center;
    }

    .step-pane .btn,
    .step-pane button,
    .step-pane input[type="submit"] {
        max-width: 100%;
        white-space: normal;
    }

    .dashicons,
    .dashicons + .col-xs-7,
    .main-content .col-xs-5,
    .main-content .col-xs-7 {
        float: none;
        width: 100%;
    }

    .main-icons {
        float: left;
        width: calc(50% - 14px) !important;
        min-width: 130px;
        height: 112px;
        margin: 7px !important;
    }

    .main-icons img {
        max-height: 54px;
        width: auto !important;
    }

    .main-icons h6 {
        white-space: normal;
        line-height: 1.25;
    }

    .btn-app {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .btn-app .bigger-170 {
        display: block;
        font-size: 24px;
        line-height: 1.2;
        word-break: break-word;
    }

    #chartdiv,
    #chartdiv1,
    #chartdiv2,
    #chartdivsale,
    #chartdivvendor,
    #chartdivcust {
        width: 100% !important;
        min-height: 260px;
        height: 300px;
    }
}

@media (max-width: 420px) {
    .main-icons {
        width: 100% !important;
        min-width: 0;
    }
}