/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.datatable-wrapper .datatable-header {
  display: -ms-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
.datatable-wrapper h2 {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  margin: 30px 0 10px;
}
.datatable-wrapper .action-bar {
  margin: 10px 0;
}
.datatable-wrapper .action-bar .btn-info {
  overflow: hidden;
  background: transparent;
  border: 1px rgba(255, 255, 255, 0.3) solid;
}
.datatable-wrapper .filter {
  display: inline-block;
  position: relative;
  text-align: right;
  width: 100%;
  margin-bottom: 10px;
}
.datatable-wrapper .filter input {
  padding-right: 30px;
  min-width: 250px;
}
.datatable-wrapper .filter button {
  position: absolute;
  right: 1px;
  top: -1px;
  cursor: default;
  opacity: 0.5;
  background: transparent;
  width: 25px;
  height: 25px;
}
.datatable-wrapper .filter button:before {
  color: #666;
}
.datatable-wrapper .filter.column {
  float: none;
  width: auto;
  text-align: left;
  margin-bottom: 0;
}
.datatable-wrapper .filter.column input {
  min-width: inherit;
}
.datatable-wrapper .datatable-pagination-bottom,
.datatable-wrapper .datatable-pagination-top {
  overflow-x: hidden;
}

.datatable-container {
  overflow-y: auto;
}
.datatable-container .empty {
  text-align: center;
  margin: 2rem 0;
}

table.datatable.matrix th {
  vertical-align: top;
  padding: 2px 2px;
}
table.datatable.matrix tr.selected {
  background: rgb(164, 187, 197);
}
table.datatable.hoverable tr:hover {
  background: rgb(228, 236, 239);
  cursor: pointer;
}
table.datatable th {
  cursor: not-allowed;
}
table.datatable th .sortable, table.datatable th .sorted {
  cursor: pointer;
  position: relative;
  padding-right: 20px;
}
table.datatable th .sortable:after, table.datatable th .sorted:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "tao" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 5px;
  color: #a4a9b1;
}
table.datatable th .sortable:hover:after, table.datatable th .sortable:active:after, table.datatable th .sortable:focus:after, table.datatable th .sorted:hover:after, table.datatable th .sorted:active:after, table.datatable th .sorted:focus:after {
  color: #3e7da7;
}
table.datatable th .sortable:after {
  content: "\e630";
  top: 3px;
}
table.datatable th .sorted.sorted_asc:after {
  content: "\e611";
}
table.datatable th .sorted.sorted_desc:after {
  content: "\e610";
}
table.datatable th .comment {
  color: #737373;
}
table.datatable tr.selected {
  background: rgb(164, 187, 197);
}
table.datatable tr.highlight {
  background-color: #f7efde !important;
}
table.datatable th.checkboxes,
table.datatable td.checkboxes {
  width: 20px;
  text-align: center;
  box-sizing: content-box;
  padding: 4px;
}
table.datatable th.checkboxes > input[type=checkbox],
table.datatable td.checkboxes > input[type=checkbox] {
  margin: 0;
}
table.datatable th.actions,
table.datatable td.actions {
  text-align: center;
}
table.datatable th button,
table.datatable td button {
  text-transform: capitalize;
}
table.datatable th [class^=icon-],
table.datatable th [class*=" icon-"],
table.datatable td [class^=icon-],
table.datatable td [class*=" icon-"] {
  width: 14px;
  display: inline-block;
  text-align: center;
}
/*# sourceMappingURL=datatable.css.map */