.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;
}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   -webkit-text-fill-color: var(--color) !important;
   color: var(--color) !important;
   border: 1px solid var(--border-color) !important;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   -webkit-text-fill-color: var(--color) !important;
   border: 1px solid var(--border-color) !important;
}