.colspan-null { display: table-cell; width: auto; } .colspan-data { display: table-cell; width: auto; } @media screen and (max-width: 600px) { .responsiveTable.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .responsiveTable .table thead th, .responsiveTable .table td, .responsiveTable .table th { white-space: nowrap; } .responsiveTable .table tbody tr { margin-bottom: 2rem; border-radius: .5rem; padding: 5px; } .responsiveTable .table thead, .responsiveTable .table tbody, .responsiveTable .table th, .responsiveTable .table td, .responsiveTable .table tr { display: block; } .responsiveTable .table thead tr { position: absolute; top: -9999px; left: -9999px; } .responsiveTable .table td:last-child { border: 0; } .responsiveTable .table td { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; text-wrap: wrap; gap: 10px; } .responsiveTable .table tr { border: 1px solid var(--border-color); } .responsiveTable .table td { border: none; border-bottom: 1px solid var(--border-color); position: relative; padding-left: 50%; } .responsiveTable .table td:before { position: absolute; top: 12px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-label); font-weight: bold; } .responsiveTable .table td div { display: flex; align-items: center; flex-wrap: wrap; text-wrap: wrap; } .responsiveTable .table td a { text-wrap: wrap; } .viewItems { font-size: 1.2rem !important; } td.text-center { text-align: inherit !important; } .colspan-null { display: none; padding-left: 0 !important; } .colspan-data { display: block; width: 100%; box-sizing: border-box; padding-left: 0 !important; } .colspan-data .bottomPrice { display: flex; flex-direction: column; width: 100%; } .colspan-data .bottomPrice p, .colspan-data .bottomPrice h4 { width: 100%; } td.actionTd .btn-group { gap: 10px; } .sm-pl-0 { padding-left: 0 !important; } .sm-mt-10 { margin-top: 10px !important; } .responsiveTable .table td.action { display: flex; align-items: center; justify-content: space-around !important; flex-wrap: wrap; gap: 10px; } .p-sm-0 { padding: 0; } .sm-column-reverse { flex-direction: column-reverse; } .sm-mb-15{ margin-bottom: 15px !important; } } .pt-5 { padding-top: 10px !important; } .table tr td .viewItems { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .text-wrap-wrap { text-wrap: wrap; }