/*!
 * Memoro
 * Copyright 2018 EPFL VLSC
 * Licensed under MIT (see LICENSE)
 */
/*!  */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
    visibility: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#top-container {
    margin-top: 1%;
}

#fg-top-container {
    margin-top: 1%;
}

#title {
    align-items: center;
    display: flex;
    margin-bottom: 0;

}
#tooltip {
    position: absolute;
    text-align: center;
    padding: 2px;
    width:auto;
    font: 12px sans-serif;
    color: #0c0d0e;
    background: #cfcfcf;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
}
#trace {
    font: 12px monospace;
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap:break-word;
    margin-top:0!important;
}

.stack-agg-graph {
    stroke: #171717;
}

.stack-agg-overlay {
    stroke: #171717;
}


#global-info {
    height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap:break-word;
    font-size: smaller;
    margin-top:0!important;
}

#global-info-fg {
    height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap:break-word;
    margin-top:0!important;
}

#inferences {
    height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap:break-word;
    margin-top:0!important;
}

#trace hr {
    border: none;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: 1px solid #1c1e22;
}

body {
    overflow-y: hidden;
    background: #ffffff;
}

#chunks {
    height: 28vh;
    overflow-y: scroll;
    overflow-x: hidden;
/*    padding-left: 100px;*/
/*    background-color: #353a41;*/
    background-color: #ececec;
    background-clip:content-box;
}

#fg-btn {
    position: fixed;
    width: 30%;
}
#flamegraph-panel {
    height: 70vh;
}

#traces {
    height: 28vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

#stack-sort-btn {

}
#chunk-axis {
    height: 7vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 20px;
}

#aggregate-graph {
    height: 17vh;
}

#fg-aggregate-graph {
    height: 17vh;
}

.aggregate-background {
    fill: #ffffff;
    /*fille: #353a41*/
}

.indicator-circle {
    stroke: black;
}

#chunks-container {
    overflow: hidden;
}

svg.selected {

}

.chunk_text {
    font-size: 7px;
    fill: #eeeeee
}

.selected-marker {
    fill: darkgrey;
}

.line {
    stroke: black;
}

.firstlastbars {
/*    stroke: #65DC4C;*/
    stroke: #000000;
    visibility: visible;
}

.legend-text {
   fill: #000000;
}

.focus-line {
    stroke: darkgrey;
}

.focus-text {
    fill: #000000;
    stroke: #000000;
}


.background1 {
/*    fill: #353a41;*/
    fill: #f3f3f3;
}

.background2 {
    fill: #e6e6e6;
/*    fill: #4c4c4c;*/
}

.svg_spacing {
    display:block;
    padding:0px;
    margin:0px;
    border:0px;
}
.svg_spacing_data {
    display:block;
    padding:0px;
    margin:1px;
    border:1px;
}
.svg_spacing_trace {
    display:block;
    padding:0px;
    margin:2px;
    border:2px;
}

.chart text {
    fill: orange;
    font: 10px sans-serif;
    text-anchor: end;
}
.axis path,
.axis line {
    fill: none;
    stroke: #69737C;
    shape-rendering: crispEdges;
}
.chart line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
/*    fill: #eeeeee;
    color: #eeeeee;*/
    fill: #272727;
    color: #272727;
}

rect.selection {
    stroke          : gray;
    stroke-dasharray: 4px;
    stroke-opacity  : 0.5;
    fill            : darkgrey;
    opacity: 0.5;
}

.area {
    fill: lightsteelblue;
    stroke-width: 0;
    opacity:0.3;
}

svg *::selection {
    background : transparent;
}

svg *::-moz-selection {
    background:transparent;
}

svg *::-webkit-selection {
    background:transparent;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
    -webkit-border-radius: 6px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #9a9b9c;
/*    background: #0c0d0e;*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.spinny-load,
.spinny-load:before,
.spinny-load:after {
    background: #ffffff;
/*    visibility: hidden;*/
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.spinny-load {
    color: #ffffff;
    text-indent: -9999em;
    margin: 5px auto;
    position: relative;
    font-size: 5px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.spinny-load:before,
.spinny-load:after {
    position: absolute;
    top: 0;
    content: '';
}
.spinny-load:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinny-load:after {
    left: 1.5em;
}
@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}