metro4/build/css/third-party/datatables.css

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

/*
 * Metro 4 Components Library v4.2.38  (https://metroui.org.ua)
 * Copyright 2019 Sergey Pimenov
 * Licensed under MIT
 */
.sorting,
.sorting_asc,
.sorting_desc {
  position: relative;
  cursor: pointer;
}
.sorting:after,
.sorting_asc:after,
.sorting_desc:after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  left: 100%;
  margin-left: -1.25rem;
  top: 50%;
  margin-top: -0.5rem;
  font-size: 1rem;
  line-height: 1;
  color: #1d1d1d;
}
.sorting_asc {
  background-color: #ebebeb;
}
.sorting_asc:after {
  content: "\2191";
}
.sorting_desc {
  background-color: #ebebeb;
}
.sorting_desc:after {
  content: "\2193";
}
.dataTables_length label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.dataTables_length label select {
  margin: 0 10px;
  width: 100px;
}
.dataTables_filter label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.dataTables_filter label input {
  width: 200px;
  margin-left: 10px;
}
.dataTables_paginate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none inside;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.dataTables_paginate .previous,
.dataTables_paginate .next,
.dataTables_paginate span a {
  cursor: pointer;
  display: block;
  position: relative;
  padding: 0.5rem 0.75rem;
  line-height: 1;
  font-size: 1rem;
  text-decoration: none;
  background-color: #ffffff;
  color: #1d1d1d;
  border: 1px solid #dfdfdf;
  margin: 0.25rem;
}
.dataTables_paginate .previous:hover,
.dataTables_paginate .next:hover,
.dataTables_paginate span a:hover {
  background-color: rgba(29, 29, 29, 0.1);
}
.dataTables_paginate span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
.dataTables_paginate .current {
  background-color: #e4e4e4;
}
.dataTables_wrapper {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: center;
      align-content: center;
}
.dataTables_length,
.dataTables_filter {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.dataTables_paginate,
.dataTables_info,
.dataTable {
  width: 100%;
}
.dataTables_info {
  line-height: 42px;
  text-align: center;
}
@media all and (min-width: 576px) {
  .dataTables_filter label {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .dataTables_length label {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media all and (min-width: 992px) {
  .dataTables_paginate,
  .dataTables_info {
    width: auto;
  }
  .dataTables_info {
    text-align: left;
  }
  .dataTables_paginate {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}