.responsive-table {
   width: 100%;
   margin-bottom: 1.5em;
   border-spacing: 0;
 }

 @media (min-width: 48em) {
   .responsive-table {
     font-size: 0.9em;
   }
 }

 @media (min-width: 62em) {
   .responsive-table {
     font-size: 1em;
   }
 }

 .responsive-table thead {
   position: absolute;
   clip: rect(1px 1px 1px 1px);
   /* IE6, IE7 */
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
 }

 @media (min-width: 48em) {
   .responsive-table thead {
     position: relative;
     clip: auto;
     height: auto;
     width: auto;
     overflow: auto;
   }
 }

 .responsive-table thead th {
   background-color: #017ac9;
   border: 1px solid #017ac9;
   font-weight: normal;
   text-align: center;
   color: white;
 }

 .responsive-table thead th:first-of-type {
   text-align: left;
 }

 .responsive-table tbody,
 .responsive-table tr,
 .responsive-table th,
 .responsive-table td {
   display: block;
   padding: 0;
   text-align: left;
   white-space: normal;
 }

 @media (min-width: 48em) {
   .responsive-table tr {
     display: table-row;
   }
 }

 .responsive-table th,
 .responsive-table td {
   padding: 0.5em;
   vertical-align: middle;
 }

 @media (min-width: 30em) {

   .responsive-table th,
   .responsive-table td {
     padding: 0.75em 0.5em;
   }
 }

 @media (min-width: 48em) {

   .responsive-table th,
   .responsive-table td {
     display: table-cell;
     padding: 0.5em;
   }
 }

 @media (min-width: 62em) {

   .responsive-table th,
   .responsive-table td {
     padding: 0.75em 0.5em;
   }
 }

 @media (min-width: 75em) {

   .responsive-table th,
   .responsive-table td {
     padding: 0.75em;
   }
 }

 .responsive-table caption {
   margin-bottom: 1em;
   font-size: 1em;
   font-weight: bold;
   text-align: center;
 }

 @media (min-width: 48em) {
   .responsive-table caption {
     font-size: 1.5em;
   }
 }

 .responsive-table tfoot {
   font-size: 0.8em;
   font-style: italic;
 }

 @media (min-width: 62em) {
   .responsive-table tfoot {
     font-size: 0.9em;
   }
 }

 @media (min-width: 48em) {
   .responsive-table tbody {
     display: table-row-group;
     border-top: 1px solid #ccc;
   }
 }

 .responsive-table tbody tr {
   margin-bottom: 1em;
 }

 @media (min-width: 48em) {
   .responsive-table tbody tr {
     display: table-row;
     border-width: 1px;
   }
 }

 .responsive-table tbody tr:last-of-type {
   margin-bottom: 0;
 }

 @media (min-width: 48em) {
   .responsive-table tbody tr:nth-of-type(even) {
     background-color: rgba(0, 0, 0, 0.12);
   }
 }

 .responsive-table tbody th[scope=row] {
   background-color: #017ac9;
   color: white;
 }

 @media (min-width: 30em) {
   .responsive-table tbody th[scope=row] {
     border-left: 1px solid #7a7a7a;
     border-bottom: 1px solid #7a7a7a;
   }
 }

 @media (min-width: 48em) {
   .responsive-table tbody th[scope=row] {
     background-color: transparent;
     color: #000001;
     text-align: left;
   }
 }

 .responsive-table tbody td {
   text-align: right;
 }

 @media (min-width: 48em) {
   .responsive-table tbody td {
     border-left: 1px solid #7a7a7a;
     border-bottom: 1px solid #7a7a7a;
     text-align: center;
   }
 }

 @media (min-width: 48em) {
   .responsive-table tbody td:last-of-type {
     border-right: 1px solid #7a7a7a;
   }
 }

 .responsive-table tbody td[data-type=currency] {
   text-align: right;
 }

 .responsive-table tbody td[data-title]:before {
   content: attr(data-title);
   float: left;
   font-size: 0.8em;
   color: rgba(0, 0, 0, 0.54);
 }

 @media (min-width: 30em) {
   .responsive-table tbody td[data-title]:before {
     font-size: 0.9em;
   }
 }

 @media (min-width: 48em) {
   .responsive-table tbody td[data-title]:before {
     content: none;
   }
 }


 @media only screen and (min-width : 1024px) and (max-width : 1199px) {
   .responsive-table {
     width: 100%;
   }
 }


 @media only screen and (min-width : 768px) and (max-width : 1023px) {
   .responsive-table {
     width: 100%;
   }

   .tab-bar {
     padding: 1rem 0;
   }
 }

 @media only screen and (min-width : 150px) and (max-width : 767px) {


   .responsive-table {
     width: 100%;
   }

   .responsive-table tbody td[data-title]:before {
     font-size: 17px;
     color: #333;
   }

 }