@media print {
    .table1, .table1__body {
     overflow: visible;
     height: auto !important;
     width: auto !important;
    }
   }

   
   .table1 {
       width: 0 82vw;
       height: 100%;
       background-color: #cd7939;
       backdrop-filter: blur(7px);
       box-shadow: 0 .4rem .8rem #0005;
       border-radius: .8rem;
       overflow: hidden;
   }
   
   .table1__header {
       width: 100%;
       height: 30%;
       /* background-color: #fff4; */
       background: transparent;
       padding: .8rem 1rem;
   
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   
   .table1__header h1{
       font-size: 2.5rem;
       color: #fff;
       font-weight: 600;
   }
   
   .table1__header .input-group {
       width: 30%;
       height: 30%;
       background-color: #fff6;
       /* background-color: #006b21; */
       padding: 0 .8rem;
       border-radius: 2rem;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: .2s;
   }
   
   .table1__header .input-group:hover {
       width: 30.5%;
       background-color: #fff;
       box-shadow: 0 .1rem .4rem #0002;
   }
   
   .table1__header .input-group img {
       width: 1.2rem;
       padding: -2rem 0;
       /* height: 1.2rem; */
   }
   
   .table1__header .input-group input {
       width: 100%;
       color: #000;
       padding: .6rem 0;
       background-color: transparent;
       border: none;
       outline: none;
   }
   
   .table1__body {
       width: 95%;
       max-height: calc(89% - 1.6rem);
       background-color: #fffb;
   
       margin: .8rem auto;
       border-radius: .6rem;
   
       overflow: auto;
       overflow: overlay;
   }
   
   
   .table1__body::-webkit-scrollbar{
       width: 0.5rem;
       height: 0.5rem;
   }
   
   .table1__body::-webkit-scrollbar-thumb{
       border-radius: .5rem;
       background-color: #0004;
       visibility: hidden;
   }
   
   .table1__body:hover::-webkit-scrollbar-thumb{ 
       visibility: visible;
   }
   
   
   table {
       width: 100%;
   }
   
   td img {
       width: 36px;
       height: 36px;
       margin-right: .5rem;
       border-radius: 50%;
   
       vertical-align: middle;
   }
   
   table, th, td {
       border-collapse: collapse;
       padding: 1rem;
       text-align: left;
   }
   
   thead th {
       position: sticky;
       top: 0;
       left: 0;
       background-color: #43904a;
       color: #000;
       cursor: pointer;
       text-transform: capitalize;
   }
   
   tbody tr:nth-child(even) {
       background-color: #0000000b;
   }
   
   tbody tr {
       --delay: .1s;
       transition: .5s ease-in-out var(--delay), background-color 0s;
       color: #000;
   }
   
   
   tbody tr p{
       color: #000;
   }
   
   tbody tr.hide {
       opacity: 0;
       transform: translateX(100%);
   }
   
   tbody tr:hover {
       background-color: #fff6 !important;
   }
   
   tbody tr td,
   tbody tr td p,
   tbody tr td img {
       transition: .2s ease-in-out;
   }
   
   tbody tr.hide td,
   tbody tr.hide td p {
       padding: 0;
       font: 0 / 0 sans-serif;
       transition: .2s ease-in-out .5s;
   }
   
   tbody tr.hide td img {
       width: 0;
       height: 0;
       transition: .2s ease-in-out .5s;
   }
   
   .status {
       width: 100%;
       padding: .4rem 0;
       border-radius: 2rem;
       text-align: center;
   }
   
   .status.delivered {
       background-color: #86e49d;
       color: #006b21;
   }
   
   .status.cancelled {
       background-color: #d893a3;
       color: #b30021;
   }
   
   .status.pending {
       background-color: #ebc474;
   }
   
   .status.shipped {
       background-color: #6fcaea;
   }
   
   
   @media (max-width: 1000px) {
       td:not(:first-of-type) {
           min-width: 12.1rem;
       }
   }
   
   thead th span.icon-arrow {
       display: inline-block;
       /* width: 1.3rem; */
       /* height: 1.3rem; */
       border-radius: 50%;
       border: 1.4px solid transparent;
       
       text-align: center;
       font-size: 1rem;
       
       margin-left: .5rem;
       transition: .2s ease-in-out;
   }
   
   thead th:hover span.icon-arrow{
       border: 1.4px solid #ffffff;
   }
   
   thead th:hover {
       color: #ffffff;
   }
   
   thead th.active span.icon-arrow{
       background-color: #ffffff;
       color: #fff;
   }
   
   thead th.asc span.icon-arrow{
       transform: rotate(180deg);
   }
   
   thead th.active,tbody td.active {
       color: #ffffff;
   }
   
   .export__file {
       position: relative;
   }
   
   .export__file p{
       color: #fff;
   }
   
   .export__file .export__file-btn {
       display: inline-block;
       width: 2rem;
       height: 2rem;
       background: #fff6 url(../../assets/img/icon/export.png) center / 80% no-repeat;
       border-radius: 50%;
       transition: .2s ease-in-out;
   }
   
   .export__file .export__file-btn:hover { 
       background-color: #fff;
       transform: scale(1.15);
       cursor: pointer;
   }
   
   .export__file input {
       display: none;
   }
   
   .export__file .export__file-options {
       position: absolute;
       right: 0;
       
       width: 12rem;
       border-radius: .5rem;
       overflow: hidden;
       text-align: center;
   
       opacity: 0;
       transform: scale(.8);
       transform-origin: top right;
       
       box-shadow: 0 .2rem .5rem #0004;
       
       transition: .2s;
   }
   
   .export__file input:checked + .export__file-options {
       opacity: 1;
       transform: scale(1);
       z-index: 100;
   }
   
   .export__file .export__file-options label{
       display: block;
       width: 100%;
       padding: .6rem 0;
       background-color: #f2f2f2;
       
       display: flex;
       justify-content: space-around;
       align-items: center;
   
       transition: .2s ease-in-out;
   }
   
   .export__file .export__file-options label:first-of-type{
       padding: 1rem 0;
       background-color: #86e49d !important;
   }
   
   .export__file .export__file-options label:hover{
       transform: scale(1.05);
       background-color: #fff;
       cursor: pointer;
   }
   
   .export__file .export__file-options img{
       width: 2rem;
       height: auto;
   }
   
   
   .notice{
       color: #074911;
       background-color: #fff;
       margin: 10px auto;
       margin-top: -1%;
       width: 25%;
       text-align: center;
       border-radius: 5px;
   }