.FOL-toolbar {
	background-color: transparent !important;
	float:left;
	display: flex;
	flex-direction: row;
	padding: 4px;
	font-size: .8rem;
	max-height:1000px; /* large max-height larger than the container to facilitate the CSS transition */
	transition: max-height 0.4s ease-in;
	align-items: center;
	justify-content: center;

	/* VV Why do this??? VV */

	/* justify-content:  flex-start; */

	/* justify-content: flex-start; /*start at the top */
	max-width: fit-content;
}

#vocab-tabbed-container {
	flex-direction: column;
	margin-left: 15px;
	margin-right: 15px;
}

.colBtns {
	width: 120px;

	/* display: inline-block; */
	text-align: center;
	margin-top: 20px;
}

.checkBtns {
	border-radius: 5px;
	margin: 3px;
}

.marginRight {
	margin-right: 20px;
}

.marginLeft {
	margin-left: auto;
}

.displayflex {
	margin-bottom: 20px;
	display: flex;
}

.hidden-FOL-toolbar {
	max-height: 0;
	transition: max-height 0.4s ease-out;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.hidden-proof-toolbar {
	max-height: 0;
	transition: max-height 0.4s ease-out;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* columns */
.FOL-toolbar-pred-col {
	display: flex;
	flex-flow: column;
	flex-basis: 0;
	flex-grow: 1;
	padding: 2px 1px;
	max-width: 7.3em;
	min-width: 7.3em;
}

.FOL-toolbar-logic-col {
	display: flex;
	flex:none;
	width:max-content;
	flex-flow: column;
	flex-basis: 0;
	justify-content: space-evenly;
	padding: 0;

}

/** Compartments **/
.FOL-toolbar-logic-flex {
	display: flex;
	flex-flow: row;
	padding: 1px 1px 1px 15px;
	flex: none;
	flex-grow:0;
	width: min-content;
	/*align-self: flex-end;*/
}

.FOL-toolbar-pred-container {
	flex-direction: column;
	padding-left: 15px;
	padding-right: 15px;
}

.FOL-toolbar-pred-flex {
	display: flex;
	flex-flow: row wrap;
	flex: 1;
	flex-grow: 2;
	flex-basis:0;
	padding-bottom: 1px;
	align-self: flex-end;
	justify-content: center;
	min-height: calc(5.5em + 37pt);  /* to make sure all palettes have the same height */

	/* min-width: 290px;  /*and width -- hack */
}

.FOL-toolbar-button {
	padding: 3px 5px;
	margin: 1px;
	border: 1px solid;
	border-radius: 5px;
	background-color: #555;
	color: white;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	max-width: 7.3em;
}

.FOL-toolbar-button-hidden {
	display: none;
}

.FOL-toolbar-button:hover {
	background-color: #4CB18C;
}

/* action buttons in nav */
.navbar-extra-btns img {
	height: 2em;
	width: auto;
}

.navbar-extra-btns {
	width: auto !important;
	height: 2.5rem !important;
}

.toolbar-div {
	align-items: center;
	width: fit-content;
	display: flex;
}

.collapse-btn {
	font-size: 1rem;
	padding-left: 0.25em;
	padding-right: 0.25em;
	margin-right: auto;
	border-style: none;
	border-radius: 1em;
}

.collapse-btn[aria-expanded=true] .fa-caret-right {
	display: none;
}

.collapse-btn[aria-expanded=false] .fa-caret-down {
	display: none;
}

@media (max-width: 1790px) {
	/* 	.navbar-extra-btns {
		width: 60px !important;
	} */
	.marginLeft {
		width: 80px;
	}

	.FOL-toolbar-pred-col {
		width: 7.3em;
		font-size: .8rem;
		max-width: none;
		min-width: revert;
	}

	.FOL-toolbar-button {
		font-size: .8rem;
	}

}

@media (max-width: 1330px) {
	.FOL-toolbar-logic-flex {
		padding: 0 !important;
	}

	.FOL-toolbar-pred-flex {
		padding: 0 !important;
	}
}

/* Style for action buttons in Fitch and Boole */

/* AddStep Toolbar styles */
.addstep-toolbar {
	padding: 5px;
}

.addstep-button {
	/* padding: 3px 5px; */
	padding: 4px 8.25px;
	border: 1px solid;
	font-size: 1rem;
	border-radius: 5px;
	background-color: #4CB18C;
	color: white;
	justify-content: center;
	align-items: center;
	text-align: center;

	/* cursor: pointer; */
	margin: 3px;
	width: 7.5rem;
	height: 4rem;
;
}

.addstep-button:hover {
	background-color: #414141;
}

.addstep-buttons {
	display: flex;
	flex-flow: column;
}

.enabled {
	border: 0.2rem blue solid;
	background-color: var(--OPlightgray);
}