.bar-icon,
.line-icon,
.list-icon { background-size: cover; width: 23px; height: 16px; background-repeat: no-repeat; background-position: center;}
.bar-icon  { background-image: url('../../../themes/kianl/images/bar-icon.png') }
.line-icon { background-image: url('../../../themes/kianl/images/line-icon.png') }
.list-icon { background-image: url('../../../themes/kianl/images/list-icon.png') }

.menu { width: 100%; height: 21px; background-color: #F6F6F6; border: 1px solid #9E9E9E; display: flex; flex-direction: row; flex-wrap: nowrap; max-width:100%;  flex-grow: 1;flex-shrink: 1;flex-basis: 0%; }
.menu .menu-content { flex: 1; display: flex; flex-direction: row; padding: 0px 3px; font-size: 11px; color: grey; align-items: center;flex-wrap: wrap;}
.menu .menu-content span { flex:1}
.menu .menu-content .options {flex: 1; display: flex; flex-direction: row; flex-grow: 0;flex-shrink: 0; flex-basis: auto;}
.menu .menu-content .options:last-child { flex: unset; }
.menu .menu-content .options .title,
.menu .menu-content .options .divider { color: #BC0000;}
.menu .menu-content .options .divider { margin: 0px 5px 0px 8px;}
.menu .menu-content .options .label-text { color: #414141;font-weight: normal; flex-grow: 0;flex-shrink: 0; flex-basis: auto;  }
.menu .mid-space { width: 2.5%; }

.options .checkbox-label {display: inline-flex; position: relative; cursor: pointer; font-size: 11px; font-weight: initial; margin-bottom: -8px !important; width: 100%; margin: 0px; margin-bottom: 0px;height: 15px; padding: 0px 2px 0px 22px;}
.options .checkbox-label:hover .control-indicator { background: #ccc; }
.options .control--radio .control-indicator { position: absolute; top: 1px; left: 6px; height: 13px; width: 13px; border: 1px solid #cbc2c2; }
.options .control--radio .control-indicator::after {height: 7px; width: 7px; }
.options .checked .control-indicator { background-color: white; border: 1px solid #e52d27;}
.options .checked .control-indicator::after { left: 2px;  top: 2px; background-color: #e52d27; display: block;}

.graphs-container { margin-top: 23px; display: flex; }
.graphs-container .menu-content { flex: 1; background-color: #F6F6F6; display: flex; flex-direction: column; align-items: center; border: 1px solid #9E9E9E; min-height: 231px;}
.graphs-container .menu-content span { text-transform: uppercase; color: #414141; border-bottom: 1px solid #9E9E9E; width: 100%; text-align: center; height: 29px; line-height: 29px;}
.graphs-container .mid-space { width: 2.5%;}
.graphs-container .graphs-wrapper { flex: 1; }
.graphs-container .bonus-title {width: 95px; padding-left: 5px; background-color: #87CC50; color: #004bff; font-size: 12px;}

.list-data { width: 100%; table-layout: fixed;  border-collapse: collapse; font-size: 10px; text-transform: uppercase; }
.list-data th,
.list-data td { padding: 2px; text-align: center;  }
.list-data td,
.list-data th { width: 130px; text-align: center; padding: 2px !important;}
.list-data th:first-child,
.list-data td:first-child { width: 85px;}
.list-data thead { background-color: #ddd; color: #414141;}
.list-data thead tr { display: block; position: relative; font-size: 9px;}
.list-data tbody { display: block; overflow: auto; width: 100%; max-height: 220px; }
.list-data tbody tr:nth-child(even) { background-color: #ddd; }

.list-data .quality { max-height: 183px; }
.list-data .quality  tr th:first-child { width: 400px; }
.list-data .quality  tr td:first-child { min-width: 149px; text-align: left; }

.list-data .graph8 tr th,
.list-data .graph8 tr td { width: 64px !important;}

.list-data .graph8 tr th:first-child,
.list-data .graph8 tr td:first-child { width: 149px !important;}

.list-data .graph10 { max-height: 172px; }
.list-data .graph10 tr th { width: 84px; }
.list-data .graph10 tr th > div { font-size: 8px; }
.list-data .graph10 tr>td {max-width: 43px !important; }
.list-data .graph10 tr th:first-child,
.list-data .graph10 tr td:first-child { min-width: 125px !important; width: 125px !important;}
.list-data .graph10 tr>td:nth-child(2n) { width: 43px; padding-left: 8px !important;}
.list-data .graph10 tr>td:nth-child(2n+3) { width: 43px; padding-right: 10px !important;}

.list-data .graph26 tr > th,
.list-data .graph26 tr > td  { width: 27px; }
.list-data .graph26 tr > td:first-child,
.list-data .graph26 tr > th:first-child { width: 149px; }

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .menu .menu-content span { flex:unset; width: 200px; max-width: 200px;}
}