* {
	box-sizing: border-box;
}
.container {
	width: 800px;
	display: flex;
	background-color: #383838;
	border: 2px solid grey;
	color: white;
	font-family: sans-serif;
	padding: 20px;
	padding-right: 80px;
	padding-bottom: 80px;
	position: relative;
}
.needsSuperContainer, .moodSuperContainer {
	display: flex;
	flex-direction: column;
}
.needsSuperContainer {
	margin-right: 40px;
	width: 250px;
}
.moodSuperContainer {
	width: 350px;
}
.smallBarContainer {
	width: 75%;
}
.bar {
	display: flex;
	flex-direction: row;
	margin: 5px 5px 2.5em;
}
.containerTitle {
	padding-left: 2.5em;
}
.downArrow {
	border-right: 10px solid orange;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin: 3px 0;
}
.upArrow {
	border-left: 10px solid #3f9;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin: 3px 0;
}
.indicator {
	position: absolute;
	width: 0px;
	border-top: 2px solid transparent;
	border-bottom: 8px solid white;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	margin-left: -6px; //-8px from this width, +3px from border, -1px from position
}
.outerBarPlus{
	flex-grow: 1;
	margin: 0 4px;
	position: relative;
}
.outerBar {
	border: 3px solid black;
	background-color: black;
}
.innerBar {
	background-color: #6ef;
	height: 20px;
	width: 0%;
}
.pip {
	position:absolute;
	height: 8px;
	width: 2px;
	bottom: 3px;
	background-color: black;
}
.pip.inverse {
	background-color: grey;
}
.smallBarContainer .containerTitle {
	font-size: 12px;
}
.smallBarContainer .downArrow, .smallBarContainer .upArrow {
	margin-top:0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.smallBarContainer .outerBar {
	border: none;
}
.smallBarContainer .innerBar {
	height: 12px;
}
.smallBarContainer .indicator {
	border-bottom: 4px solid white;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	margin-left: -2px; //-4px from this width, +3px from border, -1px from position
}
.smallbarContainer .pip {
	bottom: 3px;
	height: 6px;
}

.hidden {
	visibility: hidden;
}


.thought {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5em;
}
.positive {
	color: limegreen;
}
.negative {
	color: #f99;
}

.form {
	display: flex;
	flex-direction: row;
}
.barInput{
	margin-bottom: 0.5em;
	margin-right: 2em;
}
.barInput button {
	width: 150px;
}
.thoughtInputRow {
	margin-bottom: 1em;
}
#addNewThought, #addCustomThought, #removeThought {
	height: 30px;
	width: 200px;
}
#newThoughtList, #removeThoughtList {
	width: 400px;
	height: 30px;
}
#customThoughtText {
	width: 300px;
	height: 30px;
}
#customThoughtValue {
	width: 100px;
	height: 30px;
}

.xButton {
	position: absolute;
	top:0;
	right:0.25em;
}