.plotter .channellist {
    position: absolute;
    top: -1px;
    left: -151px;
    width: 149px;
    height: 100%;
    /*box-sizing: border-box;*/
    background: white;
    border: 1px solid #4c535c;
    z-index: 1;
    font: 12px Arial,sans-serif;
    color: black;
    display: none;
}

.plotter .pane_wrapper.list_open .channellist {
    display: block;
}

.plotter.dark .channellist {
    background: #444;
    color: white;
    border-color: #b3b8c0;
}

.plotter .pane_wrapper.list_open {
    padding-left: 150px;
}

.plotter_controls .show_list {
    background-image: url("../img/consumption/chevron_right.png");
}

.list_open .plotter_controls .show_list {
    background-image: url("../img/consumption/chevron_left.png");
}

.plotter .channellist .header {
    padding: 12px 10px;
    background: #f0f1f2;
    border-bottom: 1px solid #4c535c;
}

.plotter.dark .channellist .header {
    background: #444;
    border-color: #b3b8c0;
}

.plotter .channellist .header input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 3px 5px;
    border: 1px solid #b3b8c0;
    border-top-color: #5d646d;
}

.plotter.dark .channellist .header input {
    background: #444;
    color: white;
    border-color: #b3b8c0;
}

.plotter .channellist .table_wrapper {
    overflow: auto;
}

.plotter .channellist table {
    width: 100%;
    line-height: 22px;
    border-collapse: collapse;
}

.plotter .channellist td {
    padding: 0 4px;
}

.plotter .channellist td:first-child {
    width: 20px;
}

.plotter .channellist thead td {
    background: rgb(251,252,252);
    background: -moz-linear-gradient(top, rgba(251,252,252,1) 0%, rgba(213,216,220,1) 100%);
    background: -webkit-linear-gradient(top, rgba(251,252,252,1) 0%,rgba(213,216,220,1) 100%);
    background: linear-gradient(to bottom, rgba(251,252,252,1) 0%,rgba(213,216,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfcfc', endColorstr='#d5d8dc',GradientType=0 );

    border-bottom: 1px solid #4c535c;
}

.plotter.dark .channellist thead td {
    background: #444;
    border-color: #b3b8c0;
}

.plotter .channellist tbody tr:hover td.name {
    background: #ddd;
}

.plotter.dark .channellist tbody tr:hover td.name {
    background: orange;
    color: black;
}

.plotter .channellist thead span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    width: 21px;
}

.plotter .channellist thead .name:after {
    content: "\25B2";
    position: absolute;
    right: 5px;
    color: #9199a4;
}

.plotter .channellist thead .name.down:after {
    content: "\25BC";
}

.plotter .channellist .highlight {
    background-color: yellow;
}

.plotter.dark .channellist .highlight {
    color: black;
}

.plotter .channellist thead td + td{
    border-left: 1px solid #9199a4;
}

.plotter .channellist td input {
    vertical-align: middle;
}

/* disable auto-zoom on iphone input field focus */
@media screen and (-webkit-min-device-pixel-ratio:0) {

	select:focus,
	textarea:focus,
	input:focus,
    option:focus {
		font-size: 16px !important;
	}
}