/*
 * HD Web mobile adapter
 * A reversible layer for phone/tablet operation. Remove this file and the
 * matching script/link tags from index.html to roll it back.
 */

@media (max-width: 900px) {
  html,
  body,
  #app {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.hd-mobile #menu {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.hd-mobile #menu .ivu-layout-header {
    height: 64px !important;
    line-height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile #menu .ivu-menu-primary {
    position: relative !important;
    min-width: 100vw !important;
    width: 100vw !important;
    height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: 76px !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile #menu .ivu-menu-primary > li,
  body.hd-mobile #menu .ivu-menu-primary .ivu-menu-item,
  body.hd-mobile #menu .ivu-menu-primary .ivu-menu-submenu {
    display: inline-block !important;
    float: none !important;
    vertical-align: top !important;
  }

  body.hd-mobile #menu .menu-content {
    position: relative !important;
    min-width: 100vw !important;
    width: 100vw !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body.hd-mobile #menu .layout-logo {
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    top: 0 !important;
    height: 64px !important;
    width: 76px !important;
    min-width: 76px !important;
    padding-right: 10px !important;
  }

  body.hd-mobile #menu .layout-logo img {
    width: 42px !important;
    height: 42px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    object-fit: contain !important;
  }

  body.hd-mobile #menu .layout-logo span {
    display: none !important;
  }

  body.hd-mobile #menu .layout-nav {
    position: absolute !important;
    top: 0 !important;
    left: 76px !important;
    right: 0 !important;
    height: 64px !important;
    margin-left: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile #menu .ivu-menu-item,
  body.hd-mobile #menu .ivu-menu-submenu {
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: 64px !important;
    line-height: 64px !important;
    white-space: nowrap !important;
  }

  body.hd-mobile #menu .ivu-menu-submenu {
    position: static !important;
  }

  body.hd-mobile #menu .ivu-menu-submenu .ivu-select-dropdown,
  body.hd-mobile #menu .ivu-menu-submenu .ivu-dropdown,
  body.hd-mobile #menu .ivu-menu-submenu .ivu-menu-drop-list {
    display: none !important;
  }

  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-select-dropdown,
  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-dropdown,
  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-menu-drop-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 100000 !important;
    top: var(--hd-mobile-menu-top, 64px) !important;
    left: var(--hd-mobile-menu-left, 8px) !important;
    right: auto !important;
    width: var(--hd-mobile-menu-width, 220px) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-select-dropdown li,
  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-dropdown li,
  body.hd-mobile #menu .ivu-menu-submenu.hd-mobile-submenu-open .ivu-menu-drop-list li {
    display: block !important;
    float: none !important;
    height: 44px !important;
    line-height: 44px !important;
    white-space: nowrap !important;
  }

  body.hd-mobile #menu .user,
  body.hd-mobile #menu .login-name {
    display: none !important;
  }

  body.hd-mobile .hd-content,
  body.hd-mobile .content,
  body.hd-mobile .cont-content,
  body.hd-mobile .container,
  body.hd-mobile .homeBigPage {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.hd-mobile .hd-content {
    display: block !important;
    padding: 12px !important;
  }

  body.hd-mobile .hd-left {
    position: fixed !important;
    z-index: 3000 !important;
    top: 64px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 330px) !important;
    height: calc(100vh - 64px) !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.2s ease !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile.hd-left-open .hd-left {
    transform: translateX(0) !important;
  }

  body.hd-mobile .hd-right,
  body.hd-mobile .ahd-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.hd-mobile .hd-left-backdrop {
    display: none;
    position: fixed;
    z-index: 2999;
    inset: 64px 0 0 min(86vw, 330px);
    background: rgba(15, 23, 42, 0.32);
  }

  body.hd-mobile.hd-left-open .hd-left-backdrop {
    display: block;
  }

  body.hd-mobile .hd-mobile-drawer-button {
    position: fixed;
    z-index: 2998;
    left: 12px;
    bottom: 14px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    padding: 0 16px;
    color: #fff;
    background: #2d8cf0;
    box-shadow: 0 8px 20px rgba(45, 140, 240, 0.32);
    font-size: 14px;
    line-height: 44px;
  }

  body.hd-mobile:not(.hd-has-left-pane) .hd-mobile-drawer-button {
    display: none;
  }

  body.hd-mobile .hd-orientation-notice {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 99999;
    display: block;
    width: max-content;
    max-width: calc(100vw - 32px);
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity .18s ease, transform .18s ease;
  }

  body.hd-mobile.hd-show-orientation-notice .hd-orientation-notice {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  body.hd-mobile .hd-orientation-notice__panel {
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(31, 41, 55, .92);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .22);
  }

  body.hd-mobile .hd-orientation-notice strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
  }

  body.hd-mobile .hd-tool,
  body.hd-mobile .search,
  body.hd-mobile .search-panel,
  body.hd-mobile .tool-left,
  body.hd-mobile .btn-group,
  body.hd-mobile .operation,
  body.hd-mobile .el-tabs__header,
  body.hd-mobile .ivu-tabs-bar {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile .hd-tool,
  body.hd-mobile .tool-left,
  body.hd-mobile .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.hd-mobile button,
  body.hd-mobile .el-button,
  body.hd-mobile .ivu-btn {
    min-height: 36px;
  }

  body.hd-mobile .el-input,
  body.hd-mobile .ivu-input-wrapper,
  body.hd-mobile .ivu-select,
  body.hd-mobile .search-input {
    max-width: 100% !important;
  }

  body.hd-mobile .ivu-table-wrapper,
  body.hd-mobile .el-table,
  body.hd-mobile .table-cont,
  body.hd-mobile .borderTable {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile .ivu-table,
  body.hd-mobile .el-table__body-wrapper,
  body.hd-mobile .el-table__header-wrapper {
    min-width: 760px !important;
  }

  body.hd-mobile .ivu-table-fixed,
  body.hd-mobile .ivu-table-fixed-right,
  body.hd-mobile .el-table__fixed,
  body.hd-mobile .el-table__fixed-right {
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.08) !important;
  }

  body.hd-mobile .ivu-page,
  body.hd-mobile .el-pagination,
  body.hd-mobile .page {
    max-width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile .el-dialog,
  body.hd-mobile .ivu-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.hd-mobile .el-dialog {
    max-height: calc(100vh - 20px) !important;
  }

  body.hd-mobile .el-dialog__body,
  body.hd-mobile .ivu-modal-body {
    max-height: calc(100vh - 150px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.hd-mobile .material-grid,
  body.hd-mobile .materia-list,
  body.hd-mobile .all-programs-grid,
  body.hd-mobile .program-list {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.hd-mobile .material-grid .item,
  body.hd-mobile .materia-list .item {
    max-width: calc(50vw - 28px) !important;
  }

  body.hd-mobile .device-popup {
    position: fixed !important;
    z-index: 2500 !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    max-height: 52vh !important;
    overflow: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.24) !important;
  }

  body.hd-mobile #map,
  body.hd-mobile .map-content,
  body.hd-mobile .ces {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage {
    height: calc(100vh - 64px) !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage .cardContent {
    display: block !important;
    padding: 0 !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage .cardContent > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-left,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-right,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-l-left,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-r-right,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-center-left,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-center-right,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-bottom-left,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .card-bottom-right {
    width: 100% !important;
    min-height: 150px !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage .title {
    margin: 0 0 10px 0 !important;
    height: auto !important;
    min-height: 44px !important;
  }

  body.hd-mobile.hd-route-rich-homepage .homeBigPage .materialStatistics,
  body.hd-mobile.hd-route-rich-homepage .homeBigPage .materialStatistics1 {
    width: 100% !important;
  }

  body.hd-mobile.hd-route-account-login {
    overflow: hidden;
    background: #f5f7fb;
  }

  body.hd-mobile.hd-route-account-login #app {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.hd-mobile.hd-route-account-login .container {
    background-image: none !important;
    background: #f5f7fb !important;
  }

  body.hd-mobile.hd-route-account-login img[src*="/bannerFile/"],
  body.hd-mobile.hd-route-account-login .ivu-carousel,
  body.hd-mobile.hd-route-account-login .el-carousel,
  body.hd-mobile.hd-route-account-login .swiper-container {
    display: none !important;
  }

  body.hd-mobile.hd-route-account-login .main {
    position: fixed !important;
    top: 14px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: min(100vw - 24px, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    margin: 14px auto !important;
    padding: 28px 20px 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 42px rgba(15, 23, 42, .14);
  }

  body.hd-mobile.hd-route-account-login .loginImg {
    width: 82px !important;
    height: 82px !important;
    margin-bottom: 18px !important;
  }

  body.hd-mobile.hd-route-account-login .loginFrom,
  body.hd-mobile.hd-route-account-login .main .foo {
    width: 100% !important;
  }

  body.hd-mobile.hd-route-account-login .el-form-item {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  body.hd-mobile.hd-route-account-login .el-input,
  body.hd-mobile.hd-route-account-login .el-input__inner,
  body.hd-mobile.hd-route-account-login .btnMostLarge {
    width: 100% !important;
  }

  body.hd-mobile.hd-route-account-login .el-input__inner {
    height: 64px !important;
    padding-right: 156px !important;
  }

  body.hd-mobile.hd-route-account-login .btnMostLarge {
    height: 52px !important;
    margin-top: 10px !important;
  }

  body.hd-mobile.hd-route-account-login .el-input__suffix,
  body.hd-mobile.hd-route-account-login .el-input__suffix-inner {
    right: 8px !important;
    max-width: 144px !important;
  }

  body.hd-mobile.hd-route-account-login .el-input__suffix img {
    width: 136px !important;
    height: 48px !important;
    max-width: none !important;
    object-fit: fill;
  }
}