sensu/uchiwa-web

@import "variables";

@media only screen and (max-width: 900px) {
  /* Hide trivial columns */
  .panel-body table td.trivial,
    .panel-body table th.trivial {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .navbar {
    display: none;
  }

  /* Hide non-mobile & trivial columns */
  #responsive-table table td.hide-mobile,
    #responsive-table table th.hide-mobile,
  #responsive-table table td.trivial,
    #responsive-table table th.trivial {
    display: none;
  }

  #responsive-table.panel-body {
    padding: 0;
  }

  /* Force table to not be like tables anymore */
    #responsive-table table,
    #responsive-table thead,
    #responsive-table tbody,
    #responsive-table th,
    #responsive-table td,
    #responsive-table tr {
        display: block;
    }

  #responsive-table table {
        margin-bottom: 0;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #responsive-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #responsive-table tr {
    border-bottom: 1px solid #ccc;
    padding: 5px 0 5px 0;
  }

    #responsive-table td {
        /* Behave  like a "row" */
        position: relative;
        padding: 0 0 0 25%;
        text-align:left;
    }

    #responsive-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    #responsive-table td:before {
    content: attr(data-title);
  }
}

.table {
  margin-bottom: 10px;
}

.table td i {
  font-size: 15px;
  padding-left: 3px;
}

.table td.main {
  font-weight: 700;
}

.table td.normal {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.table th.column-xs {
  width: 1%;
}

.table th.column-sm {
  width: 3%;
}

.table th.column-md {
  width: 6%;
}

.table th.column-lg {
  width: 10%;
}

.table th.column-xl {
  width: 12%;
}

.table th.column-xxl {
  width: 20%;
}

.table th.column-xxxl {
  width: 30%;
}

.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
  border-top: 0px;
}

.table > thead tr th, .table > thead > tr > th {
  padding-top: 15px !important;
  padding-top: 15px !important;
  border: none;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
  background-color: $table-tr-background-color !important;
}