#clipGraphContainer.hidden {
	/* display: none; */
	/* height: 0px; */
	overflow: hidden;
}

#clipGraphContainer {
	overflow: hidden;
	width: 100%;
		    margin-bottom: 1em;

}
#clipActivityTooltip  > .bottomRow{
	 display: flex; 
 	flex-direction:column;
	/* justify-content: space-between; */
	gap: 0.1em;

}
#clipActivityTooltip  .title {
	font-size: 1rem;
	font-weight: bold;
	
}
#clipActivityTooltip  {
	background-color: rgba(155,155,155,0.5);
	background-color: RGBA(0, 0, 0, 0.5);
	/* background-color: RGBA(80,80,80,0.6); */
	padding:0.5em;
	display: flex;
	font-size: 0.8rem;
	flex-direction:column;
	gap: 0.35em;
	border-radius: 2px;
}
#hotOrNot {
width: 1.25em;
}
#clipGraphContainer.hidden #clipActivityGraph{
	 /* display: none;  */
	/* height: 0px; */
}
#contThisShit  {
margin: 0 auto;
    padding: 1em 0;
    display: flex;
    justify-content: center;
    padding: 0;
    /* font-size: 1.25em; */
    margin-bottom: 0.75em;
	margin: 1em 0 0;
}
#contThisShit  button{
	font-size: 2em;
	
    font-size: 1.1em;

}
#chart     {
	width: 100%;
    height: 200px;   
	background-color: #466178;
    color: white;
	/* margin-bottom: -0.35em; */
	padding-top:0.25em;
    height: 130px;
height: 110px;
height: 80px;
height: 90px;
height: 100px;
    /* padding-top: 0.25em; */
	    background-color: #345b7b ;
    background-color: #254c6c ;

/* margin: 0 0.25em; */


}
/* .bb-area-vc, .bb-area-vci { */
	/* opacity: 1.0 !important; */
/* } */
.bb-line {
    stroke-width: 1.5px;
	
}
/* .bb-axis-y  > .tick { */
	/* display: none; */
/* } */
.bb-tooltip-container {
    max-height: none !important;
}

.bb-tooltip {
    /* box-shadow: none; */
    /* width: 100%; */
		background-color: red !important;
		color: black;

}
.bb-axis line, .bb-axis .domain {
  stroke: white;
}

.bb-tooltip tr {
    /* border-left: none !important; */
    /* border-right: none !important; */
}

.bb-tooltip td.name {
    /* border-left: none !important; */
}

.bb-tooltip tr:first-child {
    /* display: none; */
}
.bb-tooltip th { 
	/* background-color: red; */
	background-color: #30475a;
	stroke-width: 2px;

}

.bb-xgrid-line.LAST_VISIT line{
	stroke: blue;
}
.bb-xgrid-line.LAST_VIEWED line{
	stroke: green;
}
.bb-xgrid-line.REQUESTED_TIME line{
	stroke: red;
}
.bb-tooltip-container .bb-chart-line {
    /* opacity: 1 !important; */
	/* background-color: red; */
}
#chart .tick {
	fill: white;
}
.bb-chart-arc text {
    fill: white;
}
.c3 .bb-axis path, .c3 .bb-axis line {
	stroke: white;
}
#keybindBox  > h4{
	font-size: 1.35em;
	
}
.keybindList > ol >  li {
	/* margin-bottom:0.5em; */
	font-weight:bold;
	font-size: 1em;
}
.keybindList {
	padding:0;
	margin:0 0 0 1em ;
	margin-top: 0.5em;
}
.keybindList ol > ul > li {
	padding: 0.25em 1em;
}
.keybindList li,
.keybindList ol,
.keybindList ul
{
	list-style:none;
}
.keybindList ol {
	padding: 0;
    margin-top: 0.25em;
}
.keybindList ul {
	margin:0;
	padding:0 1em 0 0;
	padding:0 ;

}
#midCtrls  .invBu {
	display: flex;
        min-width: 0.875em;
		    min-width: 0.9em;
		    min-width: 1.0em;
		    /* min-width: 1.25em; */
			    /* min-width: 3em; */
}

#toggleGraphBu, #showDupesButton{
	display:flex; 
	justify-content: center;
}

.requestedTime .jumpToDate {
    /* margin-left: 0.35em; */
}
.clip.dupe {
	/* border: 1px solid red; */
}
#midCtrls {
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em; 
}
#midCtrls  .requestedTime  .date,
#midCtrls  .requestedTime .time{
		margin-right:0.25em;
		margin-right: 0.35em;

}
#midCtrls  .requestedTime .time{

    min-width: 5em;
}
#midCtrls {
	/* grid-area: midCtrls; */
	flex-shrink: 1;
    flex-grow: 0;
	flex-wrap:wrap;
	
}
#clipLeftCtrls {
	/* grid-area: clipLeftCtrls; */
	flex-shrink: 0;
    flex-grow: 1;
	display: flex;
}
#clipRightCtrls {
    /* grid-area: clipRightCtrls; */
    align-content: right;
    display: flex;
    justify-content: flex-end;
		flex-shrink: 0;
    flex-grow: 1;
}
#clipActivityCtrls {
	align-items: flex-start;
}
#midCtrls  .requestedTime  .date {
	margin:0 0.25em;
}
 #midCtrls  .requestedTime {
    font-weight: bold;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
     gap: 0.5em; 
    align-items: center;
    background-color: #30475a;
    padding: 0.25em;
    border-radius: 2px;
	padding: 0.25em 0.5em;


}
#midCtrls  .requestedTime >div {
	display:flex;
	    align-items: center;

}
#clipActivityCtrls .requestedTime .invBu {

    font-size: 1em;
}
#midCtrls  .requestedTime .invBu {
	display:flex;
}
.bb-xgrid-line.REQUESTED_TIME line {
    /* stroke-width: 3px; */
}
#leftButtons {
	grid-area: leftButtons;
}#rightButtons {
	grid-area: rightButtons;
}

.collapseButtons {
	display: flex;
    align-items: center;
    justify-content: space-around;
	gap: 1em;
	    min-width: 3em;
}
#leftButtons > * {
	/* margin-left: 0.5em; */
	/* margin-right: 0.5em; */
}

#clipLeftCtrls, #clipRightCtrls ,
.dirControls {
		min-height: 1.15em;
	min-width: 1.1em;

}
#clipLeftCtrls svg, #clipRightCtrls svg

{
	min-height: 1em;
	min-width: 1.1em;
}
#clipActivityCtrls {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	    min-height: 3.5em;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	/* margin: 0.5em 0.25em; */

	    /* height: 3em; */
		
    /* display: grid; */
	 /* grid-template-columns:	auto auto; */ 

	/* grid-template-rows: 2; */
    /* grid-template-areas: "clipLeftCtrls clipRightCtrls" */
						/* "midCtrls midCtrls"; */
						    /* margin: .75em 0; */

}
#midStack {
	    margin-bottom: 0.75em;
}

#clipActivityCtrls .invBu {
	font-size: 1.5em;
}
#clipActivityCtrls #timeDropdown {
	font-size: 1em;
}
#clipActivityCtrls .dirControls {
	font-size: 3em;
	font-size: 2em;
    background: #30475a;
    padding: 0.25em;
    /* margin: 0.25em 0; */

}
#clipRightCtrls {   
 min-width: 1.1em;
	    min-height: 1.1em; 
}
 #clipActivityCtrls .dirControls  svg {
	        min-width: 0.875em;
    /* min-width: 0.9em; */
	    min-width: 1.1em; 
}


#midCtrls .requestedTime {
	grid-area: time;
}
#toggleGraphBu {
	grid-area: toggleGraph;

}
#showDupesButton {
	grid-area: showDupes;

}
#graphControls.noPan .invBu {
	pointer-events: none;
	color: grey;
}
#optionsMenuRoot .optionsMenu {
	padding-top: 0;
	    margin-top: 1.5em;

}
.collapseButtons .invBu.disabled  {
	pointer-events: none;
	color: grey;
}
.midStack .invBu.disabled ,
.graphControls.invBu.disabled 
{
		pointer-events: none;

    color: grey;
}
#clipWraper  .middle  .redditLink { 
    width: 1.9em;
    width: 1.825em;

}
#clipWraper .topBar > .middle {
     display: flex;
}

.pageInitial #clipGraphContainer {
	 display: none; 
}

#graphRangeCtrls{
	    display: flex;
    align-items: center;
    gap: 0.25em;
}
#graphRangeCtrls > * {
	     user-select: none;
}
.centerWrapper {
	display: flex;
	justify-content: center;
}
#graphControls {
	margin-top:0.5em;
    display: flex;
	gap: 0.5em;
    /* gap: 1em; */
    /* justify-content: space-around; */
    align-items: center;
	    margin-top: 1em;
}

#graphRangeCtrls {
	    display: flex;
    gap: 0.25em;
    align-items: center;
}

#aboutThisShit .topBar .hope {
	font-size:1.2em;
	color: grey;
}
#aboutThisShit {
    max-width: 800px;
    margin: 1em auto;
    padding: 1em;
    background-color: #30475a;
	    margin: 0em auto 1em;


}
#aboutThisShit h4,
#aboutThisShit h5 {

border-bottom: 1px solid #4e6d88;
    padding-bottom: 0.25em;
    margin: 0;
    margin-left: 0.25em;
	margin-top: 0.25em;
}
#aboutThisShit p {
	    margin: 1em 1.5em;
    line-height: 1.9em;
	    margin: 0.75em 1.5em;
		    line-height: 1.6em;
}
#aboutThisShit p b {
    font-size: 1.1em;
}
#aboutThisShit > .topBar  > div {
	min-width: 2em;
}
#aboutThisShit > .topBar  .closeButton {
	justify-content: flex-end;
    align-items: flex-start;
    display: flex;
}
#aboutThisShit > .topBar {
	margin: 0 0 1em 0;
}
#aboutThisShit > .topBar  h1{
	margin:0;
	font-size: 1.75em;
}
#aboutThisShit > .topBar  .fa-times{
	font-size: 2em;
}
#showDupesButton > .invBu {
	width: 1em;
}
#aboutThisShit > .topBar {
	display: flex;
	justify-content: space-between;
	/* font-size: 2em; */
 
}
#aboutThisShit .ramblings {
	line-height: 1.8em;
	line-height: 1.4em;
	    margin: 1em;
}

.dygraph-label.dygraph-title { color: white; }
 .dygraph-label.dygraph-xlabel { color: white; }
.dygraph-label.dygraph-ylabel { color: white; }
.dygraph-label.dygraph-y2label { color: white; }

.dygraph-axis-label.dygraph-axis-label-x { color: white; }
.dygraph-axis-label.dygraph-axis-label-y { color: white; }
.dygraph-axis-label.dygraph-axis-label-y.dygraph-axis-label-y2 { color: white; }

/* smaller bottom gap */
#clipGraphContainer {
	margin-bottom: 0.5em;
	margin-bottom: 0.75em;
	margin-bottom: 1em;
	    border-radius: 5px;
}
.container {
   margin: 1em;
}
	
/*darken up, make things stand out differently */
#chart {
	background-color: #12334e;
	    background-color: #203241;
}
#clipActivityCtrls .dirControls {
	background: #1a364e;
}

#midCtrls  .requestedTime {
	background-color: #1a364e;
	background-color: #203241;
	background-color: #233544;
}

/*lets fuxs with graph a bit */ 
#chart {
/* border-radius: 10px; */
}

#clipGraphContainer  {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 50%);
    box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 35%);
}

#clipActivityCtrls .dirControls {
	    border-radius: 2px;

}
/*lets not use the full width all the time just because we can, crazy I know */
#activityHeader {
	    max-widtH: 1200px;
    margin: 0 auto;
}
.activityPeriod {
max-width: 1500px;
    gap: 0 auto;
    margin: 1em auto;
    margin: 0.75em auto 0;
}
.clipsContainer {
	/* justify-content: flex-start; */
}
.clipsContainer::after {
  /* content: ""; */
  /* flex: auto; */
}

.clipsContainer {
	/* row-gap: 0.75em; */
}

#midStack {
    margin-bottom: 0.5em;
    margin-bottom: 0;
}
#clipActivityCtrls {
	min-height: unset;
}
#clipActivityCtrls .dirControls {
	font-size: 1.5em;
}

#aboutThisShit {
    margin: 1em auto 1em;
}
/* shrink in clips for smaller views*/ 
.activityPeriod {
	max-width: 1530px;
	padding: 0 15px;
	    margin: 1em auto 0;
}

#clipGraphContainer  {
	margin-bottom: 0.75em;
	margin-bottom: 0;
	    margin-top: 0.75em;
}


#graphControls {
	margin: 10em;
	    margin: 0.75em 0 0;
		    margin: 1em 0 0;
}
.container {
    margin: 0.75em 1em;
	    margin: 1.5em;
	    margin: 2em;
			    margin: 1.25em 2em;


}
.activityPeriod {
 	    margin: 1em auto 0;

}
/* BACK TO BORDERS FOR SHIT? */
.activityPeriod {
    padding: 15px 15px;
    border: 1px solid #30475a85;
	background-color:red;
	background-color:#30475a30;
	    border-radius: 3px;
	    border-radius: 2px;
}
.clip {
	border-radius:2px;
}
#aboutThisShit h4 {
    font-size: 1.5em;
}
#aboutThisShit h5 {
    font-size: 1.35em;
}

#keybindBox {
    margin-bottom: 0.5em;
	margin-bottom: 0.75em;
}
/*dumb button 3d retro crap lul */
/* #clipActivityCtrls .dirControls { */
    /* border: 1px solid rgb(0 0 0 / 18%);  */
    /* background-color: #0573cd30; */
	/* box-shadow: 1px 2px 0px 1px rgb(0 0 0 / 18%); */
/* } */
/* #clipActivityCtrls .dirControls:hover { */
	/* box-shadow: 1px 2px 0px 1px rgb(255 193 17 / 31%); */
	/* box-shadow: 1px 1px 0px 1px rgb(255 193 17 / 31%); */
	    /* box-shadow: 1px 1px 0px 1px rgb(255 165 0 / 70%); */
/* } */
.closeButton .invBu {
	font-size: 1.5em;
    display: flex;
    align-items: center;
    gap: 0.25em;
}


#clipsActivityLink	 {
	display: block !important;
}
#clipsSearchLink	 {
	display: none !important;
}
@media (max-width:700px){
	#midCtrls {
    display: grid;
	 grid-template-columns:	auto auto;

	id-template-rows: 2;
    grid-template-areas: "time time"
						"leftButtons rightButtons";
}

#clipActivityCtrls{
	
    align-items: flex-start;
}
}
 @media (max-width:500px) {
	 .collapseButtons {
	gap: unset;
}


#midCtrls .requestedTime {
    flex-direction: column;
}


#clipActivityCtrls {
	align-items: flex-start;
}
 }
 
 @media (max-width: 850px) {
.container {
    margin: 2px 10px 0px 10px;
	    margin: 1em 10px 0 10px;
}
 }