/* Shared responsive safeguards for public, client and admin pages. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    box-sizing: border-box;
    max-width: 100%;
}

.ts-responsive-table-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.ts-client-folder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ts-client-folder-actions a {
    text-decoration: none;
}

@media (min-width: 761px) {
    .ts-responsive-table-shell {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 760px) {
    body {
        min-width: 0 !important;
    }

    main,
    section,
    article,
    .container,
    .page,
    .admin-main,
    .panel-main,
    .content,
    .card {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    .ts-responsive-table-shell {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.ts-mobile-cards,
    table.ts-mobile-cards tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    table.ts-mobile-cards {
        border: 0 !important;
        border-collapse: separate !important;
        background: transparent !important;
    }

    table.ts-mobile-cards thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table.ts-mobile-cards tbody tr {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        padding: 7px 13px !important;
        overflow: hidden !important;
        border: 1px solid #303136 !important;
        border-radius: 14px !important;
        background: #101113 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .18) !important;
    }

    table.ts-mobile-cards tbody td {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: minmax(105px, 40%) minmax(0, 60%) !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        color: #e7e7e9 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    table.ts-mobile-cards tbody td:last-child {
        border-bottom: 0 !important;
    }

    table.ts-mobile-cards tbody td::before {
        content: attr(data-label);
        min-width: 0;
        color: #929299;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: .22px;
        text-align: left;
        text-transform: uppercase;
        white-space: normal;
    }

    table.ts-mobile-cards tbody td[data-label=""],
    table.ts-mobile-cards tbody td.ts-empty-cell {
        display: flex !important;
        justify-content: center !important;
        min-height: 54px !important;
        text-align: center !important;
    }

    table.ts-mobile-cards tbody td[data-label=""]::before,
    table.ts-mobile-cards tbody td.ts-empty-cell::before {
        display: none !important;
    }

    table.ts-mobile-cards tbody td > * {
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: end;
    }

    table.ts-mobile-cards tbody td button,
    table.ts-mobile-cards tbody td .button,
    table.ts-mobile-cards tbody td .btn,
    table.ts-mobile-cards tbody td a[role="button"] {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .modal,
    .modal-card,
    .modal-content,
    [role="dialog"] {
        box-sizing: border-box !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
    }

    .actions,
    .form-actions,
    .button-row,
    .botones {
        max-width: 100%;
        flex-wrap: wrap !important;
    }

    .ts-client-folder-actions {
        width: 100%;
        justify-content: stretch;
    }

    .ts-client-folder-actions > * {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
}

@media (max-width: 430px) {
    table.ts-mobile-cards tbody td {
        grid-template-columns: minmax(92px, 43%) minmax(0, 57%) !important;
        gap: 8px !important;
    }
}