GUI CSS: Deployed view styles for layouts (CMK-1171)

[check_mk.git] / web / htdocs / themes / facelift / scss / _views.scss

/*
+------------------------------------------------------------------+
|             ____ _               _        __  __ _  __           |
|            / ___| |__   ___  ___| | __   |  \/  | |/ /           |
|           | |   | '_ \ / _ \/ __| |/ /   | |\/| | ' /            |
|           | |___| | | |  __/ (__|   <    | |  | | . \            |
|            \____|_| |_|\___|\___|_|\_\___|_|  |_|_|\_\           |
|                                                                  |
| Copyright Mathias Kettner 2012             mk@mathias-kettner.de |
+------------------------------------------------------------------+

This file is part of Check_MK.
The official homepage is at http://mathias-kettner.de/check_mk.

check_mk is free software;  you can redistribute it and/or modify it
under the  terms of the  GNU General Public License  as published by
the Free Software Foundation in version 2.  check_mk is  distributed
in the hope that it will be useful, but WITHOUT ANY WARRANTY;  with-
out even the implied warranty of  MERCHANTABILITY  or  FITNESS FOR A
PARTICULAR PURPOSE. See the  GNU General Public License for more de-
ails.  You should have  received  a copy of the  GNU  General Public
License along with GNU Make; see the file  COPYING.  If  not,  write
to the Free Software Foundation, Inc., 51 Franklin St,  Fifth Floor,
Boston, MA 02110-1301 USA.
*/

/*-------------------------------------------------------------------------.
|  _____     _            ___      ___        _   _                        |
| |_   _|_ _| |__  ___   ( _ )    / _ \ _ __ | |_(_) ___  _ __  ___        |
|   | |/ _` | '_ \/ __|  / _ \/\ | | | | '_ \| __| |/ _ \| '_ \/ __|       |
|   | | (_| | |_) \__ \ | (_>  < | |_| | |_) | |_| | (_) | | | \__ \       |
|   |_|\__,_|_.__/|___/  \___/\/  \___/| .__/ \__|_|\___/|_| |_|___/       |
|                                      |_|                                 |
+--------------------------------------------------------------------------+
| The navi table contains the tab navigation above the content tables      |
| containing the buttons "filter", "commands", "display" and so on.        |
'-------------------------------------------------------------------------*/

table.filterform {
    border-collapse: collapse;
    padding: 0px;
    border-style: none;
}
table.filterform td {
    padding: 0px;
}

div.floatfilter {
    margin: 0px 4px 3px 0px;
    width: 310px;
    height: 53px;
    float: left;
    border-width: 1px;
    border-style: solid;
    border-color: #acc #22404d #22414d #8ab;
    box-shadow: 0.5px 0.5px 1px #444;
    background-color: rgba(160, 181, 190, 0.6);
    border-radius: 5px;
    color: black;
}

.filterform > tbody > tr > td div.floatfilter {
  height: auto;
  width: 372px;
  position: relative;
  margin-right: 16px;
  margin-bottom: 16px;
  background: $theme-color-white;
  border: 1px solid $theme-color-table-border;
  box-shadow: none;
}

body.main.screenshotmode div.floatfilter {
    background-color: #5893af;
}

div.floatfilter.double {
    height: 110px;
    display: table-cell;
}

.filterform > tbody > tr > td div.floatfilter.single {
    height: 114px;
}

.filterform > tbody > tr > td div.floatfilter.double {
    height: 246px;
}

div.floatfilter input[type=text] {
    width: 294px;
}

div.floatfilter input[type=text].neg {
    width: 229px;
}

div.floatfilter .legend {
    color: white;
    margin-bottom: 1px;
    width: 300px;
    height: 17px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 3px 5px 0px 5px;
    border-radius: 5px 5px 0px 0px;
}

.filterform > tbody > tr > td div.floatfilter .legend {
    padding: 12px;
    box-sizing: border-box;
    height: auto;
    color: $theme-color-table-text;
    text-transform: uppercase;
    width: 100%;
}

div.floatfilter .content {
    width: 311px;
    height: 30px;
    margin-top: 0px;
    margin-left: 0px;
    display: table-cell;
    padding-left: 4px;
    text-align: left;
    padding-top: 5px;
}

.filterform > tbody > tr > td div.floatfilter .content {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 12px;
}

div.floatfilter.double .content {
    height: 82px;
}

div.floatfilter .content > select {
    width: 300px;
}

.filterform > tbody > tr > td div.floatfilter .content select {
    box-sizing: border-box;
}

div.floatfilter .content > select.neg,
div.floatfilter .content > select#opthost_group,
div.floatfilter .content > select#optservice_contact_group,
div.floatfilter .content > select#opthost_contact_group,
div.floatfilter .content > select#optservice_group {
    width: 237px;
}

.filterform > tbody > tr > td div.floatfilter .content table {
    border-spacing: 8px 4px;
}

div.floatfilter .content .multigroup table {
    margin-top: -6px;
}

div.floatfilter .content .multigroup select {
    width: 148px;
    height: 66px;
}

div.floatfilter .content .multigroup select.large {
    width: 228px;
}

div.floatfilter .content .multigroup select.small {
    width: 68px;
}

div.floatfilter .content .filtertime select {
    width: 136px;
}

.filterform > tbody > tr > td div.floatfilter .content .checkbox {
    display: block;
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}

.filterform > tbody > tr > td div.floatfilter .content input,
.filterform > tbody > tr > td div.floatfilter .content select,
.filterform > tbody > tr > td div.floatfilter .content textarea,
.filterform > tbody > tr > td div.floatfilter .content #mk_side_search_field,
.filterform > tbody > tr > td div.floatfilter .content select {
    margin-bottom: 8px;
}

.filterform > tbody > tr > td div.floatfilter .content input[type^=radio],
.filterform > tbody > tr > td div.floatfilter .content select[type^=radio],
.filterform > tbody > tr > td div.floatfilter .content textarea[type^=radio],
.filterform > tbody > tr > td div.floatfilter .content [type^=radio]#mk_side_search_field,
.filterform > tbody > tr > td div.floatfilter .content select[type^=radio] {
    width: auto;
    margin-bottom: 0px;
}

div.floatfilter.service_custom_variable input, div.floatfilter.host_custom_variable input,
div.floatfilter.service_custom_variable select, div.floatfilter.host_custom_variable select {
    display: inline-block;
    width: 45%;
}

div.floatfilter.service_custom_variable select, div.floatfilter.host_custom_variable select {
    margin-right: 10px;
}

.filterform > tbody > tr > td div.floatfilter .content .valuespec_tuple {
    width: 100%;
    border-spacing: 2px 2px;
}

/* Improving styling of floatfilters that are contained in a ListOf() */
table.valuespec_listof.filter {
    width: 300px;
    border-spacing: 0px;
}

select.vlof_filter {
    width: 312px;
}

table.valuespec_listof td.vlof_content.filter {
    width: 1px;
    border-style: none;
}

table.valuespec_listof td.vlof_buttons.filter {
    width: 1px;
    border-style: none;
    vertical-align: top;
}

table.valuespec_listof td.vlof_buttons.filter img {
    position: relative;
    top: 2px;
    left: -28px;
    width: 16px;
    height: 16px;
}

table.nform table.valuespec_listof {
    border-spacing: 0px;
}

table.nform table.valuespec_listof > tbody > tr {
    vertical-align: middle;
}

table.nform table.valuespec_listof .vlof_content {
    border-bottom: 1px solid $theme-color-table-border;
    padding: 8px 0px;
    vertical-align: top;
}

table.nform table.valuespec_listof .vlof_content .valuespec_tuple {
    border-spacing: 8px;
}

table.nform table.valuespec_listof .vlof_content .content nobr {
    display: inline-block;
    margin-top: 8px;
}

table.nform table.valuespec_listof .vlof_buttons {
    vertical-align: middle;
    border-bottom: 1px solid $theme-color-table-border;
    padding-bottom: 32px;
    padding-top: 8px;
}

table.nform table.valuespec_listof.filter .vlof_content.filter .floatfilter {
    height: auto;
    box-shadow: none;
    border: 1px solid $theme-color-table-border;
    background-color: $theme-color-white;
    width: 400px;
}

table.nform table.valuespec_listof.filter .vlof_content.filter .floatfilter .legend {
    font-size: $theme-font-size-global;
    text-transform: uppercase;
    letter-spacing: $theme-letter-spacing-table;
    color: $theme-color-table-text;
    padding: 16px 0px 0px 16px;
}

table.nform table.valuespec_listof.filter .vlof_content.filter .floatfilter .content {
    padding: 16px;
    width: 100%;
}

table.nform table.valuespec_listof.filter .vlof_content.filter .floatfilter .content table {
    border-spacing: 8px 4px;
}

table.nform table.valuespec_listof.filter .vlof_buttons.filter img {
    top: 8px;
    left: -40px;
}

table.filtertime td {
    vertical-align: middle;
}

div.optiondial, div.optiondial.num_columns, div.optiondial.refresh {
  background: $theme-color-white;
  height: 32px;
  width: 73px;
  box-shadow: none;
  border: 1px solid $theme-color-table-border;
  border-radius: $theme-border-radius;
  margin-right: 12px;
  margin-bottom: 12px;
  top: 0;
}

div.optiondial {
    cursor: pointer;
    position: relative;
    margin-top: 0;
    margin-left: 0;
    float: left;
    overflow: hidden;
    box-shadow: 0px 0px 3px #123;
    text-shadow: 0px 0.5px 0.5px #fff;
    color: #222;
}

div.optiondial.num_columns {
    margin-right: 0px;
    border-right: 0px;
    border-radius: $theme-border-radius 0px 0px 4px;
    width: 74px;
}

div.optiondial.refresh {
    margin-left: -6px;
    border-radius: 0px 4px 4px 0px;
}

div.optiondial div, div.optiondial.num_columns div, div.optiondial.refresh div {
    line-height: 34px;
    padding: 0px;
}

div.optiondial div {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    text-align: center;
}

div.view_form {
    margin-bottom: 10px;
}

/*-------------------------------------------------------------------------.
|                _                            _                            |
|               | |    __ _ _   _  ___  _   _| |_ ___                      |
|               | |   / _` | | | |/ _ \| | | | __/ __|                     |
|               | |__| (_| | |_| | (_) | |_| | |_\__ \                     |
|               |_____\__,_|\__, |\___/ \__,_|\__|___/                     |
|                           |___/                                          |
+--------------------------------------------------------------------------+
| Styles used by layouts of the views (plugins/views/layouts.py)           |
'-------------------------------------------------------------------------*/


/* TODO: Reproduce this html element */
td.fillup {
    background-color: #eee;
}

tr.groupheader td {
  padding: 0px;
  color: $theme-color-text;
  background: transparent;
}

td.groupheader {
    margin: 0;
}

tr.groupheader td.groupheader .groupheader tbody tr td {
    padding: 12px 0px 4px;
    color: $theme-color-text;
    font-weight: $theme-font-weight-global;
    letter-spacing: $theme-letter-spacing-table;
    display: inline-block;
    font-size: $theme-font-table-header;
    vertical-align: baseline;
}

tr.groupheader td.groupheader .groupheader tbody tr td a,
tr.groupheader td.groupheader .groupheader tbody tr td body.main .popup_menu span,
body.main .popup_menu tr.groupheader td.groupheader .groupheader tbody tr td span {
    color: $theme-color-text;
    font-weight: $theme-font-weight-global;
    letter-spacing: $theme-letter-spacing-table;
    display: inline-block;
    font-size: $theme-font-table-header;
}

tr.groupheader td.groupheader .groupheader tbody tr td.state {
    padding: 0px 8px;
    width: auto;
    box-shadow: none;
    font-size: 14px;
    text-transform: uppercase;
}

tr.groupheader td.groupheader .groupheader tbody tr td.state a,
tr.groupheader td.groupheader .groupheader tbody tr td.state body.main .popup_menu span,
body.main .popup_menu tr.groupheader td.groupheader .groupheader tbody tr td.state span {
    font-size: 14px;
    text-transform: uppercase;
}

tr.groupheader td.groupheader .groupheader tbody tr td.state.hstate1 a,
tr.groupheader td.groupheader .groupheader tbody tr td.state.hstate1 body.main .popup_menu span,
body.main .popup_menu tr.groupheader td.groupheader .groupheader tbody tr td.state.hstate1 span {
    color: $theme-color-lightgrey;
}

tr.groupheader a,
tr.groupheader body.main .popup_menu span,
body.main .popup_menu tr.groupheader span {
  color: $theme-color-text;
}

table.data.oddeven > tbody > tr.groupheader {
    background-color: transparent;
}

table.data tr.data > td.gap,
table.data tr > td.last_col,
table.data tr > th.last_col {
    border-right: 0;
}

td.gap, table.data .checkbox_hover.gap {
    /* TODO: Check whether these background styles are needed */
    background-image: url("images/contentframe_background.jpg");
    background-attachment: fixed;
    background-repeat: repeat;
    width: 5px;
}

/* boxed layout */
table.boxlayout {
    border-spacing: 0px;
}
table.boxlayout td.boxcolumn {
    padding-right: 20px;
}

/* tiled layout */
table.tiled td {
    border-style: none;
}

.tile {
    width: 180px;
    border: 1px solid #000;
    float: left;
    border-radius: 0px;
    margin-right: 6px;
    margin-bottom: 6px;
    box-shadow: 1px 1px 3px #000;
    background-color: #ccc;
}

table.data.tiled td.tiles div.tile {
    border: 1px solid $theme-color-table-border;
    border-radius: $theme-border-radius;
    box-shadow: none;
    background: $theme-color-white;
    width: 240px;
    padding: 4px;
}

.tile img.icon {
    width: 16px;
    height: 16px;
}

.tile table {
    height: 70px;
    width: 100%;
}

.tile td {
    border-style: none;
    font-size: 7pt;
}

table.data.tiled td.tiles {
  padding: 0;
}

table.data.tiled td.tiles div.tile table {
  border-spacing: 4px 8px;
}

table.data.tiled td.tiles div.tile table td {
    padding: 8px;
}

table.data.tiled td.tiles div.tile table td.states {
  border-radius: $theme-border-radius;
}

table.data.tiled td.tiles div.tile .cont {
  box-sizing: border-box;
}

.tile.sstate0, .tile.hhstate0 {
    border-color: #0f0;
}

.tile.sstate1 {
    border-color: #ff0;
    background-color: #ff0;
}

.tile.sstate2, .tile.hhstate1 {
    border-color: #f00;
    background-color: #f88;
}

.tile.sstate3, .tile.hhstate2 {
    border-color: #f80;
    background-color: #fc8;
}

.tile td.tl, .tile td.bl {
    text-align: left;
}

.tile td.tr, .tile td.br {
    text-align: right;
}

.tile td.center {
    vertical-align: middle;
}

.tile td.center, .tile td.cont {
    text-align: center;
}

.tile td.bl, .tile td.br {
    vertical-align: bottom;
}

.tile td.bl, .tile td.br, .tile td.tl, .tile td.tr {
    height: 20px;
}

/*
 LAYOUT: dataset
 The dataset layout is used to display detailed information
 about a single host/service on a page. e.g. the "host details"
 page uses thislayout
*/
table.data.single {
    margin-top: 5px;
    border-spacing: 1px;
    padding: 0;
    border-collapse: collapse;
    empty-cells: show;
}

table.data.single tr.data > td {
    padding-bottom: 4px;
    padding: 4px 5px 2px 5px;
    text-align: left;
    height: 16px;
    line-height: 14px;
    vertical-align: top;
}

table.data.single tr.data td.left {
    width: 10%;
    white-space: nowrap;
    vertical-align: top;
    padding-right: 20px;
}

table.data.single > tbody > tr > td,
table.data.single > tbody tr.odd0 > td,
table.data.single > tbody tr.even0 > td {
    padding: 8px 16px;
    background-color: $theme-color-white;
    border-radius: 0px;
}

table.data.single > tbody > tr > td.left,
table.data.single > tbody tr.odd0 > td.left,
table.data.single > tbody tr.even0 > td.left {
    font-weight: $theme-font-weight-bold;
    background-color: $theme-color-white;
    border-right: 1px solid $theme-color-table-border;
    transition: .15s ease-in-out;
}

table.data.single tr.data td.invtree table {
    box-shadow: none;
    border: 1px solid $theme-color-table-border;
    margin: 8px 0px 12px;
}

table.data.single tr.data td.invtree table th {
    background-color: whitesmoke;
    border: 1px solid $theme-color-table-border;
    padding: 2px 4px;
    color: $theme-color-text;
}

table.data.single tr.data td.invtree table td {
    background-color: $theme-color-table-background;
    border: 1px solid $theme-color-table-border;
    padding: 2px 4px;
}

table.data.single td.gap {
    background-color: transparent;
    border-left-style: none;
    border-right-style: none;
}

/* #TODO: Check whether this style is redundant
 * see styles for table.data.single tr.data > td
 */
table.data.single td.age,
table.data.single td.number,
table.data.single td.count {
    text-align: left;
}

table.data.single td.perfometer div.glass {
    width: 100%;
}

table.data.matrix {
    width: auto;
    margin-bottom: 10px;
}

table.data.matrix tbody > tr.data > td {
  padding: 8px;
  border: 1px solid $theme-color-table-border;
  border-left: 0px solid;
}

table.data.matrix tr.even0 td.left {
    background-color: #bbb;
}

table.data.matrix tr.odd0 td.left {
    background-color: #ccc;
}

table.data.matrix tbody > tr.data > td.left {
    font-weight: $theme-font-weight-bold;
    background-color: $theme-color-white;
    border-right: 1px solid $theme-color-table-border;
    transition: .15s ease-in-out;
    border-left: 1px solid $theme-color-table-border;
}

table.data.matrix tbody tr.even0 td.matrixhead,
table.data.matrix tbody tr.odd0 td.matrixhead {
  color: $theme-color-text;
  font-weight: $theme-font-weight-bold;
}

table.data.matrix tr.even0 td.matrixhead {
    background-color: #888;
}

table.data.matrix tr.odd0 td.matrixhead {
    background-color: #999;
}

/* TODO: Reproduce this html element
 * .perfometer seems to always be one table level lower than tr.data, so not a direct child
 */
table.data.matrix tbody > tr.data > td.perfometer {
    width: 180px;
}

table.data.matrix tbody > tr.data > td.cell td.perfometer div.title {
    padding: 0;
}

table.data.matrix tbody > tr.data > td.cell td.perfometer div.content {
    padding: 0;
}

table.data.matrix tbody > tr.data:hover td.left {
  background-color: $theme-color-table-background;
}

table.data.matrix tbody > tr.data:first-child {
  background: transparent;
}

table.data.matrix tbody > tr.data:first-child td {
    background: transparent;
    border: none;
}

table.data.matrix tbody > tr.data:first-child td.matrixhead {
    font-size: $theme-font-size-global;
    text-transform: uppercase;
    letter-spacing: $theme-letter-spacing-table;
}

table.data.matrix td.cell {
    padding: 0px;
}

table.data.matrix td.cell table {
    width: 100%;
    padding: 0px;
}

/* TODO: Reproduce this html element */
table.data.matrix table.cell > tbody > tr > td {
    padding: 0px;
    border: 1px solid red;
}

/* TODO: Reproduce this html element */
table.data.matrix tr.matrixhead td.left a,
table.data.matrix tr.matrixhead td.left {
    color: white;
}

.even0 .minority {
    background-color: #cff;
}
.odd0 .minority {
    background-color: #dff;
}

table.data.matrix tr.even0 td.left.minority {
    background-color: #bdd;
}
table.data.matrix tr.odd0 td.left.minority {
    background-color: #cee;
}

///*-------------------------------------------------------------------------.
//|              _____    _ _ _           _                                  |
//|             | ____|__| (_) |_  __   _(_) _____      __                   |
//|             |  _| / _` | | __| \ \ / / |/ _ \ \ /\ / /                   |
//|             | |__| (_| | | |_   \ V /| |  __/\ V  V /                    |
//|             |_____\__,_|_|\__|   \_/ |_|\___| \_/\_/                     |
//|                                                                          |
//+--------------------------------------------------------------------------+
//| Styles used while editing a view in the view editor                      |
//'-------------------------------------------------------------------------*/
//
//div.clear {
//    clear: left;
//}
//
//input#try{
//    float:left;
//}
//
//
///*-------------------------------------------------------------------------.
//|       _     _     _            __         _                              |
//|      | |   (_)___| |_    ___  / _| __   _(_) _____      _____            |
//|      | |   | / __| __|  / _ \| |_  \ \ / / |/ _ \ \ /\ / / __|           |
//|      | |___| \__ \ |_  | (_) |  _|  \ V /| |  __/\ V  V /\__ \           |
//|      |_____|_|___/\__|  \___/|_|     \_/ |_|\___| \_/\_/ |___/           |
//|                                                                          |
//+--------------------------------------------------------------------------+
//| The table with the list of all views                                     |
//'-------------------------------------------------------------------------*/
//
//table.views {
//    border-collapse: collapse;
//    empty-cells: show;
//    margin-bottom: 1ex;
//}
//
//table.views td, table.views th{
//    border: 1px solid #444;
//    padding: 2px 1ex;
//}
//
//table.views td {
//    height: 25px;
//    padding-top: 3px;
//    color: #fff;
//}
//
//table.views th {
//    background-color: #709aa5;
//    color: #fff;
//}
//
//table.views td.legend {
//    background-color: #8eaeb8;
//    color: #fff;
//}
//
//table.views td.content {
//    background-color: #9ebec8;
//    color: #fff;
//}
//
//table.views td.edit {
//    background-color: #6ab;
//    text-align: center;
//}
//
//table.views td.buttons {
//    padding: 3px;
//    vertical-align: middle;
//    background-color: #8EAEB8;
//}
//
///* Availability */
//table.data.availability {
//    width: 100%;
//}
//
//table.data.availability td.number {
//    width: 60px;
//}
//
//table.data.availability td.unused {
//    color: #888;
//    text-shadow: 1px 1px 0.5px #fff;
//}
//
//table.data.availability tr.summary {
//    background-color: #bbb;
//}
//table.data.availability tr.summary td {
//    border-top: 1px solid black;
//    font-weight: bold;
//    border-bottom-style: none;
//    padding-bottom: 1px;
//    padding-top: 1px;
//}
//
//
//table.data td.flapping, table.timeline td.flapping, div.avlegend.timeline div.state.flapping {
//    background-color: #f0f;
//}
//table.data td.downtime, table.timeline td.downtime, div.avlegend.timeline div.state.downtime {
//    background-color: #0af;
//}
//table.data td.hostdown, table.timeline td.hostdown, div.avlegend.timeline div.state.hostdown {
//    background-color: #048;
//    color: white;
//}
//table.data td.unmonitored, table.timeline td.unmonitored, div.avlegend.timeline div.state.unmonitored  {
//    background-color: #cacaca;
//    color: #888;
//}
//table.timeline td.ooservice, div.avlegend.timeline div.state.ooservice {
//    background-color: #cacaca;
//    background-image: url("images/ooservice.png");
//    background-repeat: repeat;
//}
//table.data.availability tr.odd0 td.number {
//    background-image: url("images/white_30percent.png");
//    background-repeat: repeat;
//}
//
//table.data.availability td.number.stats {
//    background-image: url("images/white_30percent.png");
//}
//
//table.data.availability tr.odd0 td.number.stats {
//    background-image: url("images/white_50percent.png");
//}
//
//
//div.floatfilter.rangespec table.valuespec_tuple {
//    width: 100%;
//}
//
//div.floatfilter.rangespec table.valuespec_tuple span.title {
//    position: relative;
//    top: 7px;
//}
//
//div#avoptions_on {
//    margin-right: 3px;
//}
//
//table.data tr.data > td.timeline {
//    width: 500px;
//    padding: 0px;
//}
//
//table.timeline {
//    height: 30px;
//    border-spacing: 0px;
//    border-collapse: collapse;
//}
//
//table.timeline.low {
//    height: 5px;
//    margin-top: -18px;
//    border-spacing: 0px;
//    border-collapse: collapse;
//}
//
//table.timeline.standalone {
//    box-shadow: 0px 0px 1px #ccf;
//    margin-bottom: 20px;
//    width: 800px;
//}
//
//table.timeline.inline {
//    border-style: none;
//    width: 500px;
//}
//table.timeline.inline {
//    border-style: none;
//    width: 500px;
//    box-shadow: 0px 0px 1px #555 inset;
//}
//
//table.timeline td {
//    padding: 0px;
//    border-style: none;
//}
//
//table.timeline td.hilite {
//    padding: 0px;
//    border-style: none;
//    background-color: #0091b6;
//    filter: brightness(80%);
//}
//
//table.timeline td.chaos {
//    background-color: #8844ff;
//}
//
//table.timeline.standalone td {
//    border: 1px solid #444;
//}
//
//div.timelinerange {
//    position: relative;
//}
//
///* We render the small vertical lines in a way that only
//   the left border is visible but the thing is thick 5 pixels.
//   That makes hovering over it more easy. */
//div.timelinerange div.timelinechoord {
//    position: absolute;
//    top: 0px;
//    width: 5px;
//    height: 30px;
//    border-style: none none none solid;
//    border-width: 0px 0px 0px 1px;
//    border-color: #666;
//}
//
//table.timelineevents {
//    width: 800px;
//}
//table.data.oddeven.timelineevents > tbody > tr.hilite {
//    background-color: #6ab;
//    color: white;
//}
//div.timelinerange {
//    width: 800px;
//    float: none;
//}
//div.timelinerange.inline {
//    width: 500px;
//}
//div.timelinerange div {
//    width: 300px;
//    float: left;
//}
//div.timelinerange div.until {
//    text-align: right;
//    float: right;
//}
//
//table.data.timewarp {
//    width: 800px;
//    margin-bottom: 20px;
//}
//
//div.avlegend {
//    background-color: rgba(255, 255, 255, 0.2);
//    padding: 5px 15px;
//    border-radius: 5px;
//    margin-top: 10px;
//    text-align: right;
//}
//div.avlegend h3 {
//    margin-top: 0px;
//    font-size: 13px;
//    color: black;
//}
//div.avlegend div {
//    display: inline-block;
//    width: 50px;
//    white-space: nowrap;
//    margin-right: 5px;
//}
//div.avlegend div.state {
//    text-align: center;
//    padding: 2px 0px;
//    font-size: 12px;
//}
//div.avlegend div:last-child {
//    margin-right: 0px;
//}
//div.avlegend.levels div.level {
//    margin-right: 15px;
//    color: black;
//}
//
//div.avlegend.timeline div.state {
//    width: 75px;
//}
//div.avlegend.timeline div.state.ooservice {
//    color: black;
//}
//
//
///*--Inventory--------------------------------------------------------------.
//|            ___                      _                                    |
//|           |_ _|_ ____   _____ _ __ | |_ ___  _ __ _   _                  |
//|            | || '_ \ \ / / _ \ '_ \| __/ _ \| '__| | | |                 |
//|            | || | | \ V /  __/ | | | || (_) | |  | |_| |                 |
//|           |___|_| |_|\_/ \___|_| |_|\__\___/|_|   \__, |                 |
//|                                                   |___/                  |
//+--------------------------------------------------------------------------+
//| Styles for displaying HW/SW-Inventory data                               |
//'-------------------------------------------------------------------------*/
//
//td.invtree {
//    width: 100%;
//}
//
//td.invtree b.treeangle.title {
//    color: black;
//    font-weight: normal;
//}
//
//td.invtree ul.treeangle {
//    margin: 0px;
//    margin-bottom: 3px;
//}
//
//td.sla_spec table,
//td.invtree table,
//td.agent_config table {
//   border-collapse: collapse;
//   border: 0.5px solid black;
//   box-shadow: 0.5px 0.5px 1px #ccc;
//   margin-top: 3px;
//}
//
//td.invtree table td,
//td.invtree table th,
//table.data.single tr.data td.invtree table td,
//table.data.single tr.data td.invtree table th
//{
//    border: 1px solid #888;
//    padding: 1px 5px;
//    height: 14px;
//}
//
///* Make td class of invtree more specific, when shown in single dataset mode */
///* td.data.single td.invtree td.number { */
//table.data.single td.invtree td.number {
//    text-align: right;
//}
//
//
//td.invtree table th {
//    text-align: left;
//}
//
//td.invtree table td {
//    background-color: #fff;
//}
//
//td.invtree span.invold, span.invold table.data {
//    color: #ff0000;
//}
//
//td.invtree span.invnew, span.invnew table.data {
//    color: #00bf00;
//}
//
///* Positioning of the link from an inventory dicttable to the matching multisite table */
//div.invtablelink {
//    position: absolute;
//    top: -17px;
//    right: 1px;
//}
//
//
//td.if_state.if_state_up {
//    background-color: #00c020;
//    box-shadow: 0px 0px 3px #ccffcc inset;
//}
//
//td.if_state.if_state_down {
//    background-color: #bc5b4e;
//    box-shadow: 0px 0px 2px #000 inset;
//}
//
//td.if_state.if_state_other {
//    background-color: #c020c0;
//    box-shadow: 0px 0px 2px #000 inset;
//}
//
//td.if_state {
//    color: white;
//    box-shadow: 0.5px 0.5px 2px #000 inset;
//    text-align: center;
//    font-weight: bold;
//    width: 50px;
//}
//
//td.if_state.if_available {
//    color: black;
//    background-color: #80ff40;
//}
//
//td.if_state.if_not_available {
//    color: black;
//    background-color: #cccccc;
//}
//
//
//
//
//
//
//table.data.headerleft.sla th {
//    width: 130px;
//    text-align: left;
//    padding: 4px 5px;
//}
//
//table.data.headerleft.sla a {
//    color: white;
//    text-decoration: underline;
//}
//
//table.data.headerleft.sla th.sla_state {
//    width: 30px;
//}
//
//table.data.headerleft.sla th.sla_date,
//table.data.headerleft.sla td.sla_date{
//    width: 120px;
//    padding-right: 4px;
//}
//
//table.data.headerleft.sla th.sla_duration{
//    text-align: left;
//}
//
//table.data.headerleft.sla td.sla_duration{
//    text-align: right;
//    padding-right: 4px;
//}
//
//table.data.headerleft.sla td.sla_output{
//    width: 70%;
//    padding-left: 4px;
//}
//
//table.data.headerleft.sla td {
//    padding: 0px;
//}
//
//table.data.headerleft.sla {
//    margin-bottom: 20px;
//}
//
//table.timeline.standalone.sla td {
//    border: 0px solid #444;
//    padding: 0px;
//}
//
//table.timeline.standalone.sla  {
//    margin-bottom: 5px;
//}
//
//table.timeline.standalone.sla.period  {
//    margin-bottom: 5px;
//    height: 10px;
//}
//
//table.timeline td.state0.even{
//    background-color: #0b3;
//}
//
//table.timeline td.state0.odd{
//    background-color: #092;
//}
//
//table.timeline td.state2.even{
//    background-color: #f00;
//}
//
//table.timeline td.state2.odd{
//    background-color: #900;
//}
//
//div.sla_details{
//    background-color: #73a1b4;
//}
//
//td.sla > div.foldable > b{
//    color: black;
//}
//
//h2.sla {
//    margin-bottom: 3px;
//}
//
//h3.sla {
//    margin-top: 3px;
//}
//
//table.data tr.sla_horizontal_line > td.sla_horizontal_line {
//    height: 1px;
//}
//
//table.data tr.sla_horizontal_line > td.sla_horizontal_line.black {
//    height: 1px;
//    border-bottom: 1px solid black;
//}
//
//
//table.timeline.sla td.sla_hilite,
//table.data.oddeven > tbody > tr.sla_hilite {
//    padding: 0px;
//    border-style: none;
//    filter: brightness(70%);
//}
//
//table.timeline.sla td.sla_hilite.sla_error_hilite,
//table.data.oddeven > tbody > tr.sla_hilite.sla_error_hilite {
//    padding: 0px;
//    border-style: none;
//    filter: brightness(50%);
//}
//
//div.timelinerange.sla {
//    width: auto;
//    float: none;
//}
//
//
//div#avoptions td.dictleft {
//    width: 99%;
//}
//
//div#avoptions td.dictright {
//    padding-right: 4px;
//}