:root {
	--rich_black: #001021;
	--dark_forest: #034748;
	--ocean_blue: #0058ab;
	--star_command_blue: #1481ba;
	--cyan_process: #11b5e4;
	--cerulean_blue: #0caadc;
}

body {
	font-family: 'Open Sans Condensed', sans-serif;
	background-color: var(--cerulean_blue);
}

.navbar {
	margin: 0;
	padding: 0;
	font-weight: bold;
}

.navbar-default {
	background-color: var(--dark_forest);
	border-color: var(--star_command_blue);
	color: var(--cerulean_blue);
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
	text-decoration: none;
	background-color: var(--cerulean_blue);
	color: var(--dark_forest);
}

.navbar-default .navbar-nav>li>a {
	color: var(--cerulean_blue);
}

.navbar-default>a {
	color: var(--cerulean_blue);
}

.navbar .dropdown .dropdown-menu {
	font-family: 'Open Sans Condensed', sans-serif;
	white-space: normal;
	font-weight: bold;
	font-size: 0.9em;
	background-color: var(--star_command_blue);
	color: var(--rich_black);
}

.navbar .dropdown .dropdown-menu>li>a:hover,
.navbar .dropdown .dropdown-menu>li>a:focus {
	background-color: var(--dark_forest);
	color: var(--cerulean_blue);
}

.sidebar_div {
	height: 100%;
	width: 380px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--star_command_blue);
	color: var(--rich_black);
	overflow-x: hidden;
	padding: 8px 4px 8px 4px;
	margin-bottom: 6px;
}

.content_div {
	margin-left: 380px;
}

.accordion {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	background-color: var(--star_command_blue);
	color: var(--rich_black);
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
}

.active,
.accordion:hover {
	background-color: var(--cyan_process);
}

.accordion:after {
	content: '\02795';
	float: right;
	font-size: 0.9em;
	margin-left: 5px;
}

.active:after {
	content: "\2796";
}

.panel {
	background-color: var(--star_command_blue);
	padding: 0 18px;
	display: none;
	overflow: hidden;
}

.panel .accordion {
	background-color: var(--ocean_blue);
	color: var(--cyan_process);
}

.panel .accordion:hover {
	background-color: var(--cyan_process);
	color: var(--ocean_blue);
}

.recipe_link {
	padding: 6px 0 6px 12px;
	background-color: var(--dark_forest);
	color: var(--cerulean_blue);
	cursor: pointer;
	font-size: 0.85em;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	overflow: hidden;
}

.recipe_link:hover {
	background-color: var(--rich_black);
}

.recipe_display_div {
	background-color: var(--dark_forest);
	color: var(--cyan_process);
	border: 1px var(--ocean_blue) solid;
	border-radius: 5px;
	margin: 8px;
}

.recipe_image {
	margin: 4px;
	width: 45%;
	float: left;
	border: 2px var(--rich_black) solid;
}

.recipe_description {
	margin: 4px;
	width: 45%;
	float: right;
	border: 2px var(--rich_black) solid;
}

.recipe_title {
	clear: both;
	margin: 8px;
	font-size: 1.5em;
	font-weight: bold;
}

.recipe_ingredients {
	margin: 8px;
	padding: 0 16px 0 16px;
}

.recipe_instructions {
	margin: 20px 8px 8px 8px;
}

.recipe_servings {
	margin: 20px 12px 12px 12px;
	font-style: italic;
}

@media (max-width: 760px) {
	.sidebar_div {
		position: relative;
		height: auto;
		display: block;
		width: 100%;
		background-color: var(--dark_grey);
		color: var(--sky_blue);
		overflow-x: hidden;
		padding: 8px 4px 8px 4px;
	}

	.sidebar_div div {
		margin-left: auto;
		margin-right: auto;
		width: 300px;
	}

	.content_div {
		margin-left: 0;
	}
}

@media print {
	.sidebar_div {
		display: none;
	}

	.navbar {
		display: none;
	}

	.content_div {
		top: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}
}








.combo_input>ul {
	list-style-type: none;
	padding: 0;
	margin: 0 20px 0 20px;
}

.combo_input>ul>li>a:hover:not(.header) {
	background-color: #aaa;
}

.combo_input>ul>li>a {
	border: 1px solid black;
	margin-top: -1px;
	background-color: #f6f6f6;
	font-size: 0.8em;
	padding: 4px;
	text-decoration: none;
	color: black;
	display: block;
}

.modal-dialog {
	margin: 2.5vh auto;
}

.modal-content {
	max-height: 95vh;
	overflow-y: auto;
	overflow-x: auto;
}

.close {
	color: #FFFFFF;
	opacity: 1;
}

.close:hover {
	color: #DEDEDE;
	opacity: 1;
}

.edit {
	float: left;
	border: 1px solid black;
	padding: 6px 12px 4px 12px;
	margin: 2px;
}

.edit:hover {
	cursor: pointer;
	background-color: #cccccc;
	color: #787878;
	opacity: 1;
}

.delete {
	float: right;
	border: 1px solid black;
	padding: 6px 12px 4px 12px;
	margin: 2px;
}

.delete:hover {
	cursor: pointer;
	background-color: #cccccc;
	color: #787878;
	opacity: 1;
}

.trashcan_img {
	margin-top: 0px;
	height: 24px;
}

.trashcan_img:hover {
	cursor: pointer;
}