graph.css

.content-container { max-width:1150px; }

/* ------------------------------------------ */
/* REMOVE ONCE GROUP VIEW SIDEBAR REMOVED */
#wrapper {
  padding:0px;
  margin:0px;
  padding-left: 250px;
}

#sidebar-wrapper {
  margin-top:-10px;
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #eee;
  position: fixed;
  overflow-y: auto;
  z-index: 1000;
  height: 100%;
}

#page-content-wrapper {
  width: 100%;
  padding-left:0px;
}

#sub_nav li{
    transition: all .2s ease-out;
    height: 0;
    border-bottom-width: 0;
    overflow: hidden;
}
/* show all menu items when 'in' class added */
#sub_nav.in li,
#sub_nav li.active{
    height: 3.125rem;
    border-bottom-width: 1px;
}
/* ------------------------------------------ */

/* sidebar #mygraphs */
#my_graphs{
    width: 13rem;
    overflow: hidden;
    position: relative;
    /* margin-bottom: 3rem; */
}

#my_graphs h4 a {
  color: var(--l2-title);
  display: block;
}

#my_graphs h4 a:hover {
  text-decoration: underline;
}

#my_graphs h5 {
  color:var(--l2-title);
}

#my_graphs input{
    width:12rem;
}
#my_graphs select{
    width:13rem;
}
/* end of sidebar #mygraphs */

.feed-options {
    background-color:#eee;
    overflow-x: scroll;
}
table#feeds thead tr th .caret{
    border-top-color: black!important;
    vertical-align: middle;
    margin-right: 10px;
}
table#feeds tbody tr th {
    font-weight: normal
}
.feed-options-header {
    height:40px;
    background-color:#ccc;
    font-weight:bold;
    color:#fff;
    position: relative;
}
.feed-options-header .caret {
    /* margin: 1.2em 0 0 .7em; */
    margin: .5em .6em .5em .3em;
    transition: transform 300ms ease-in-out;
    transform: rotate(0deg);
}
.feed-options-header .caret.open {
    transform: rotate(-90deg);
}
.feed-options-title:link,
.feed-options-title:focus {
    padding:10px;
    color: white;
    display: block;
    text-decoration: none;
    outline: 0;
}
.feed-options-title:hover {
    color: currentColor;
    opacity: .8;
}
.feed-options-title:active{
    opacity: 1!important;
}
.feed-options-show-options,
.feed-options-show-stats{
    margin: 5px;
    position: absolute;
    right: 0;
    z-index: 2;
}

.feed-options #tables {
    overflow-x: scroll;
}

#vis-mode-toggle, #vis-mode-user, #vis-mode-groups{
    margin:15px 0;
}

#group-table{
    width:100%;
    font-size:12px;
}

#group-table .user-name{
    font-size:12px;
    padding:4px;
    padding-left:8px;
    font-weight:bold;
    background-color:#aaa;
    cursor:pointer
}


#group-table .user-feed td{
    max-width:150px;
    overflow-x: hidden
}

.feed-name, .feed-select{
    display:inline-block
}

.feed-tag{
    background-color:#ddd;
}

.feed{
    background-color:#f3f3f3;
    padding:5px 0 0 5px;
    margin:2px
}

.feed-tag{
    padding:5px 0 1px 5px;
    margin:0 0 2px 3px;
    cursor: pointer
}

.feed-tag-checkbox{
    margin:5px;
}

.feed-name{
    width:70%;
    overflow-x:hidden
}

.feed-select, .feed-select input, .feed-tag-checkbox-left, .feed-tag-checkbox-right{
    float:right;
}

.feed-select, .feed-select input{
    margin:2px;
    padding:0;
}
input.feed-tag-checkbox-left, input.feed-tag-checkbox-right{
    margin:0 5px;
}
#tooltip {
    z-index: 1001;
}
/* Multi Axes label colours */
#legend [data-legend-series] a{color: inherit}

#legend {
    width: 100%;
    float: right;
    position: relative;
    z-index: 2;
    font-size: 13px;
}
#legend .grid-container {
    margin: 1.3em 3em 0 3.2em;
    position: relative;
}
#legend .col {
    position: absolute;
    top: 0
}
#legend .right{
    right: .8em;
}
#legend .left{
    left: 0;
}
#legend .legendColorBox {
    display: inline-block;
    margin-right: .3em;
}
#legend .legendColorBox > div > div{
    width: .3em!important;
    border-width: .4em!important;
}
#legend .faded {
    opacity: .4;
}
#legend [data-legend-series] a{
    outline: none;
}

#error #remove_missing.btn {
    margin-top: -5px;
    float: right;
}

table#feeds.table thead th{
    border-top: 2px solid var(--bg-l2);
    font-weight: normal !important;
    color: var(--l2-title);
    cursor: pointer;
    transition: all .3s ease-in;
    padding-left: 0;
}
table#feeds.table thead th:hover{
    color: var(--l2-text);
    text-decoration: underline;
}
table#feeds.table input[type="checkbox"] { margin: 0; }
table#feeds.table tbody tr > *{
    border-color: var(--bg-l2);
}
table#feeds.table tbody tr th{
    cursor: pointer;
    transition: all .3s ease-in;
    font-weight: normal;
}
table#feeds.table tbody tr th:hover{
    text-decoration: underline;
}
table#feeds.table tbody tr th.feed-title span{
    max-width:9em;
}

table#feeds.table .caret {
    border-top-color: currentColor !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: .4em;
}

#graph-wrapper{
    transition: all .3s ease-out;
}
#graph-wrapper.empty{
    opacity: .3;
    transform: scale(.99);
}
#download-buttons form{
    margin: 0;
    padding: 0;
}
#download-buttons form button {
    width: 100%;
    text-align: left;
}
.csvoptions{
    width: auto;
}

#showcontrols {
  float:right; 
  margin-right:22px
}
#yaxis-left { width:110px; }
#yaxis-right { width:110px; }
.yaxis-minmax-label { width:30px; }
.yaxis-minmax { width:50px !important; }
#timezone { width:280px; }
#info {padding-top:20px; display:none}
.table {margin-bottom:0px !important; }

@media(max-width: 610px) {
    #legend .col {
        position: relative; left: 0;
    }
    
    #showcontrols {
        float:none;
        margin:5px 0px 0px 0px;
    }
    
    .alert { margin-bottom:5px; }
    h3 {line-height:20px; }
    
    #yaxis-left { width:80px; }
    #yaxis-right { width:80px; }
    .yaxis-minmax-label { width:20px; }
    .yaxis-minmax { width:35px !important; }
    #timezone { width:214px; }
    #info {padding-top:5px;}
    .input-append {
        margin-bottom:5px !important;
    }
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

#feed-controls td {
padding:5px;
}