@media (hover: none) and (pointer: coarse) {
    .main {
        position: relative;
        height: calc(100vh - 86px);
    }

    .main > nav {
        position: absolute ;
        background-color: var(--fill-color);
        z-index: 100;
        border-right: 1px solid var(--neutral-layer-4);
        transform: translateX(-100%);
        will-change: transform 0.4s;
        transition: transform 0.4s;
    }

    .footer {
        margin-top: 0px !important;
    }

    .footer .link1 {
        display: none;
    }

    .header  {
        max-width: 100vw;
    }

    .header .anti-header {
        display: none;
    }

    .header .mark-badge {
        display: none;
    }

    .main.open > nav {
        transform: translateX(0);
    }

    .ant-table-content {
        overflow-x: auto;
    }

    .fluent-dialog-main {
        --dialog-width: 100vw !important;
        --dialog-height:  100vh!important;
        --dialog-padding: 0 !important;
    }

    .fluent-dialog-main .fluent-dialog-body {
        margin-right: -24px !important;
        margin-bottom: -24px !important;
        width: calc(100% + 24px) !important;
        padding-right: 24px !important;
        padding-bottom: 24px !important;
    }

    .fluent-data-grid {
        overflow-x: auto;
    }

    .empty-content-row, .empty-content-cell {
        max-width: 100vw;
        position: sticky;
        left: 0;
    }

    .ant-empty {
        max-width: 100vw;
        position: sticky;
        left: 0;
    }
    .fluent-dialog-body .ant-empty {
        max-width: calc(100vw - 48px);
    }

    .fluent-dialog-body  .empty-content-row, .fluent-dialog-body  .empty-content-cell {
        max-width: calc(100vw - 48px);
    }

    .ant-drawer-content-wrapper {
        max-width: 100vw !important;
    }

    .body-content {
        padding: 24px 0;
    }

    fluent-card .stack-horizontal {
        flex-wrap: wrap;
    }

    .paginator {
        flex-wrap: wrap;
    }

    .paginator .summary {
        display: none;
    }

    .ant-select-multiple {
        min-width: 300px !important;
        max-width: calc(100vw - 48px) !important;
        width: 100% !important;
    }

    fluent-tab-panel fluent-tabs.vertical {
        padding: 0 !important;
        margin: 0 -24px !important;
        width: calc(100% + 48px) !important;
        grid-template-columns: minmax(120px, auto) !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
    }

    fluent-tab-panel fluent-tabs.vertical fluent-tab, fluent-tab-panel fluent-tabs.vertical fluent-tab-panel {
        scroll-snap-align: start;
    }

    .row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .row .col-2 {
        min-width: 16.6%;
    }

    .row .col-2 > .btn-mark2{
        width: 100% !important;
    }
    .row > div {
        max-width: 100% !important;
        width: 100%;
        margin: 0 !important;
    }

    .row > input {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .row > input + .btn-mark2 {
        width: 58px !important;
    }

    fluent-card {
        min-width: 100% !important;
    }

    #customProperty-panel .stack-vertical .stack-horizontal fluent-button svg[slot="start"] {
        margin-right: -20px;
        margin-left: -4px;
    }

    .ant-tree .ant-tree-list .ant-tree-list-holder-inner {
        overflow: auto;
    }

    .ant-collapse-content-box > div {
        max-width: 100% !important;
    }

    #externalLinks-panel > div {
        max-width: 100%;
    }

    #avatar-panel .stack-vertical {
        max-width: 100%;
    }
    #avatar-panel .stack-vertical .fluent-persona {
        margin: 0 !important;
    }

    #avatar-panel .stack-vertical .fluent-persona .fluent-presence-badge > div {
        width: 100% !important;
    }

    #avatar-panel .stack-vertical .fluent-inputfile-container {
        max-width: 100%;
    }

    .ant-page-header-heading-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .ant-descriptions-row {
        display: flex;
        flex-direction: column;
    }

    .ant-descriptions-row .ant-descriptions-item .ant-descriptions-item-container .ant-descriptions-item-label {
        min-width: 90px;
    }
    .fluent-data-grid {
        grid-template-columns: minmax(100px, 1fr) !important;
    }

    .fluent-data-grid .column-header {
        min-width: 100px;
        width: auto;
    }

    .fluent-data-grid .fluent-data-grid-row td {
        white-space: normal;
        word-wrap: break-word;

    }

    .row > input + .btn-mark2 {
        width: auto !important;
    }

     .stack-horizontal {
        flex-wrap: wrap;
    }
    .fluent-input-label, .fluent-timepicker {
        width: 100%;
    }
    .ant-tabs-content-holder 	iframe {
        max-height: calc(100vh - 196px + 40px) !important;
        height: calc(100vh - 196px + 40px) !important;
        width: calc(100% + 20px) !important;
        margin: -16px -10px -24px !important;
    }

    .fluent-dialog-header {
        flex-wrap: nowrap !important;
    }

    .ant-drawer-wrapper-body .ant-drawer-body .ant-page-header.ant-page-header-compact {
        padding: 0 !important;
    }

    .body-content .content .ant-page-header.ant-page-header-compact:last-child .ant-page-header-content .ant-row .ant-col.ant-col-8, .body-content .content .ant-page-header.ant-page-header-compact:last-child .ant-page-header-content .ant-row .ant-col.ant-col-16 {
        padding: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .ant-row .ant-col {
        padding: 0 !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 50%;
    }
    .ant-statistic {
        width: 100%;
    }

    .dark header.header.siteheader {
        filter: drop-shadow(0px -20px 20px #02A4FF);
    }

    header.header.siteheader .header-gutters > div > img {
        max-width: 30px;
        object-position: left bottom;
        object-fit: cover;
        z-index: 1;
        filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2)) drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2)) brightness(1.2);
    }

    .header .mark-badge {
        display: flex !important;
        min-width: 20px;
        min-height: 20px;

        position: absolute;
        left: -1.5rem;
        top: -0.5rem;
        border-radius: 0 !important;
        height: 48px !important;
        max-height: 48px !important;
        width: calc(32px + 1.5rem) !important;
        pointer-events: none;
    }

    .header .mark-badge span {
        margin-top: auto;
        font-size: 11px;
        line-height: 11px;
        padding: 0;
        filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.9));
    }
}