.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl{
  display: none !important;
}

html{
  font-size: 16px;
}

@media  screen and (max-width: 1920px){
  html{
    font-size: 16px;
  }
}

@media  screen and (max-width: 1680px){
  html{
    font-size: 15px;
  }
}

@media  screen and (max-width: 1440px){
  html{
    font-size: 14px;
  }
}

@media  screen and (max-width: 1366px){
  html{
    font-size: 13px;
  }
}

@media  screen and (max-width: 1280px){
  html{
    font-size: 13px;
  }
  .hide-xl{
    display: none !important;
  }
  .show-xl{
    display: block !important;
  }
}

@media(max-width: 1024px){
  html{
    font-size: 12px;
  }
  .hide-lg{
    display: none !important;
  }
  .show-lg{
    display: block !important;
  }
}

@media(max-width: 960px){
  html{
    font-size: 12px;
  }
  .hide-lg{
    display: none !important;
  }
  .show-lg{
    display: block !important;
  }
}

@media(max-width: 840px){
  html{
    font-size: 12px;
  }
  .hide-md{
    display: none !important;
  }
  .show-md{
    display: block !important;
  }
}

@media(max-width: 767px){
  .card-table.table-responsive{
    border: none;
  }
  .card-table table{
    background: none !important;
  }
  .card-table table thead{
    display: none;
  }
  .card-table table,
  .card-table table tbody,
  .card-table table tr,
  .card-table table td{
    display: block;
  }
  .card-table table tr{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #ffffff;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  .card-table table tbody tr td{
    position: relative;
    white-space: normal;
    word-break: break-all;
    border-top: none !important;
    text-align: right !important;
    padding: 0.5rem 1rem 0.5rem 40% !important;
  }
  .card-table table tbody td:before{
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    max-width: 39%;
    font-weight: 500;
    overflow: hidden;
    text-align: left;
    position: absolute;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    word-break: break-all;
    content: attr(data-label);
    text-overflow: ellipsis;
  }
  .card-table table tbody td .read-more{
    overflow: hidden;
  }
  .card-table table tbody td .option-pill{
    margin-right: 0;
    margin-left: 1rem;
  }
}

@media(max-width: 600px){
  html{
    font-size: 12px;
  }
  .hide-sm{
    display: none !important;
  }
  .show-sm{
    display: block !important;
  }
}

@media(max-width: 480px){
  html{
    font-size: 12px;
  }
  .hide-xs{
    display: none !important;
  }
  .show-xs{
    display: block !important;
  }
  .modal.open{
    z-index: 100;
  }
  .modal .modal-content{
    width: 100% !important;
    max-width: calc(100% - 5rem) !important;
  }
  .modal.center .modal-content{
    margin-left: 7rem !important;
    margin-right: 2rem !important;
  }
}