body {
	margin: 0;
	font-size:16px;
	height: 100%;
	width: 100%;
	/* min-width:320px; */
	padding:0;
	 box-sizing: border-box;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */	
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	font-family: paragraph_font;
	text-transform: lowercase;
	letter-spacing: 1.5px;
	justify-content: space-around;
	position: fixed;
	overflow: hidden;
	background-color: #f3f3f3;
	color: white;
}

@font-face {
	font-family: paragraph_font;
	src: url(paragraph_font/regular.ttf);
}

#serves_select {
	padding: 0px;
	border: none;
	font-size: 32px;
	background: none;
}

#serves_container {
	display: flex;
    align-items: center;
}

select {
	padding: 16px;
	border-radius: 5px;
	border: 2px solid #034f84;
	outline: 0px;
	height: 51.5px;
}

.nh_page {
	top: 8px;
	position: absolute;
	font-size: 24px;
	left: 8px;
	background: #c94c4c;
	padding: 2px;
	border-radius: 5px;
	cursor: pointer;
}

.more_div {
	position: absolute;
	width: 200px;
	height: 100%;
	background: #c94c4c;
	z-index: 5;
	right: 0px;
	/* justify-content: center; */
	display: none;
	flex-direction: column;
	align-items: center;
	animation: more_div_animate 0.5s;
	animation-fill-mode: forwards;
}

@keyframes more_div_animate {
	0% {bottom: -300px; opacity: 0;}
	100% {bottom: 0px; opacity: 1;}
}

.more_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	z-index: 4;
	display: none;
}

.more_content {
	font-size: 24px;
    margin: 20px;
	cursor: pointer;
	text-align: center;
}

.group_header {
	left: 0px;
	margin: 8px;
	width: calc(100% - 16px);
}

.recipe_p {
	color: black;
	font-size: 16px;
	display: -webkit-box;
	width: calc(100% - 8px);
	left: 4px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.recipe_box {
	background: #92a8d1;
	margin: 8px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 5px;
	max-width: calc(50% - 36px);
	width: 100%;
	height: 144px;
	justify-content: space-around;
	opacity: 90%;
	cursor: pointer;
	position: relative;
	transition: box-shadow 0.5s;
}

@media (max-width: 367px) {
	.recipe_box {
		flex-direction: row;
		max-width: 100%;
		height: 110px;
	}
}

@media (min-width: 500px) {
	.recipe_box {
		max-width: calc(33.333333% - 36px);
	}
}

@media (min-width: 920px) {
	.recipe_box {
		max-width: calc(25% - 36px);
	}
}

@media (min-width: 1150px) {
	.recipe_box {
		max-width: 280px;
	}
}
.pending_tick {
	position: absolute;
	left: 12px;
	top: 12px;
	background: green;
	border-radius: 5px;
}

.pending_x {
	position: absolute;
	right: 12px;
	top: 12px;
	background: red;
	border-radius: 5px;
}

.recipe_box:hover {
	box-shadow: inset 0px 0px 4px 4px #c94c4c;
}

.pending_container {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 16px);
	margin: 8px;
	justify-content: space-around;
	top: 40px;
	position: absolute;
}

.pending_p {
	position: absolute;
	bottom: 18px;
}

.pending_image {
	width: 100%;
	border-radius: 5px;
}

.pending_image_overlay {
	width: 110px;
	height: 110px;
	background: black;
	opacity: 30%;
	position: absolute;
	border-radius: 5px;
}

.recipe_info_box {
	border: 2px solid white;
	padding: 4px;
	border-radius: 5px;
	background:  #6f8cc3;
	font-size: 18px;
}

@media (max-width: 646px) and (min-width: 544px) {
	.recipe_info_box {
		font-size: 14px;
	}
}

@media (max-width: 543px) and (min-width: 500px) {
	.recipe_info_box {
		font-size: 12px;
	}
}

@media (max-width: 499px) and (min-width: 437px) {
	.recipe_info_box {
		font-size: 18px;
	}
}

@media (max-width: 436px) {
	.recipe_info_box {
		font-size: 14px;
	}
}

@media (max-width: 367px) {
	.recipe_info_box {
		display: none;
	}
	.leaving_soon {
		display: none;
	}
}

.button_h2 {
	display: flex;
	flex-direction: row;
	width: calc(100% - 16px);
	height: calc(100% - 156px);
	position: absolute;
	overflow-y: scroll;
	margin-bottom: 16px;
	top: 62px;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-content: flex-start;
	left: 8px;
}

#footer {
	position: absolute;
	width: calc(100% - 32px);
	left: 16px;
	border-radius: 5em;
	height: 60px;
	bottom: 16px;
	z-index: 5;
	background: #c94c4c;
	display: flex;
	justify-content: space-evenly;
	overflow: clip;
}

.sign_in {
	width: 300px;
	height: 100px;
	background: #92a8d1;
	position: absolute;
	top: 50px;
	align-items: center;
	display: flex;
	border-radius: 5px;
	justify-content: center;
	left: calc(50% - 150px);
}

.footer_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100px;
	cursor: pointer;
}

.search {
	position: absolute;
	left: 170px;
	padding: 8px;
	margin: 8px;
	width: calc(100% - 188px);
	border-radius: 5em;
}

@media (max-width:488px) {
	.search {
		width:calc(100% - 16px);
		top: 40px;
		left: 0px;
	}
}

hr {
	background: #034f84;
	height: 3px;
	border: none;
	
}

h1 {
	text-align: left;
	margin: 4px;
	color: #034f84;
	position: absolute;
	left: 40px;
	width: calc(100% - 96px);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.header_flex_div {
	display: flex;
	justify-content: center;
	margin: 20px;
}

.form_recipes {
	background: yellow;
    width: 150px;
    height: 150px;
    display: flex;
	flex-direction: column;
    align-items: center;
    margin: 8px;
	border-radius: 10px;
}

.image_overlay {
	background: black;
	opacity: 50%;
	width: 150px;
	height: 100px;
	position: absolute;
	border-radius: 10px;
}

.button_pending {
	border-radius: 5px;
	color: white;
	width: 60px;
	display: flex;
	justify-content: center;
}

.extras-container {
	display: flex;
	flex-direction: column;
	background: yellow;
	margin: 8px;
	color: black;
	height: 84px;
	border-radius: 5px;
}

.save {
	background: #c94c4c;
	color: white;
	width: 150px;
	text-align: center;
	border-radius: 5px;
	padding: 8px;
	font-size: 20px;
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.scroll_div {
	overflow: scroll;
	position: absolute;
	margin: 8px;
	height: calc(100% - 220px);
	width: calc(100% - 16px);
	border-radius: 5px;
}

input {
	border: 2px solid #034f84;
	margin: 4px;
	border-radius: 5px;
	padding: 16px;
	outline: 0px;
	width: 285px;
}

input:focus {
	border: 2px solid #c94c4c;
}

.username_class:focus{
	background-image: url('https://recipes.noahhirt.co.uk/account/person_focus.svg?v=2');
}

.email_class:focus{
	background-image: url('https://recipes.noahhirt.co.uk/account/email_focus.svg?v=2');
}

.password_class:focus{
	background-image: url('https://recipes.noahhirt.co.uk/account/password_focus.svg?v=2'), url('https://recipes.noahhirt.co.uk/account/visibility_focus.svg?v=2');
}

.password_class_off:focus{
	background-image: url('https://recipes.noahhirt.co.uk/account/password_focus.svg?v=2'), url('https://recipes.noahhirt.co.uk/account/visibility_off_focus.svg?v=2');
}

label {
	font-size: 20px;
	width: fit-content;
	font-weight: normal;
	display: flex;
    justify-content: left;
}

.input_forms {
	display: flex;
	flex-direction: row;
	align-items: center;
}
@media (max-width:385px){
	.chevrons {
		display: none;
	}
}

#create_form {
	position: absolute;
	top: 50px;
	width: calc(100% - 16px);
	margin: 8px;
	color: white;
}

.side_list {
	height: fit-content;
	max-width: 200px;
	width: 0px;
	background: red;
	font-size: 10px;
	color: white;
	text-align: center;
	z-index: 1;
	position:absolute;
	border-radius: 5px;
	top: 45px;
	transition: width 0.5s;
}

.side_list_index {
	right: 8px;
}

.side_list_other {
	left: 8px;
}
.menu_icon {
	position: relative;
}

.menu_overlay {
	position: fixed;
	z-index: 5;
	top: 0px;
	align-items: center;
	justify-items: center;
	display: none;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.5;
}

.menu_div {
	margin: 10px;
	opacity: 0;
	display: flex;
	cursor: pointer;
}

p {
	font-size: 18px;
	width: fit-content;
	margin: 4px;
	position: relative;
}

li {
	font-size: 18px;
}

.return_p {
	text-align: center;
	color: blue;
}

.menu_button {
	color: white;
	width: fit-content;
	height: fit-content;
	border-radius: 5px;
	padding: 2px;
	z-index:3;
	position:absolute;
	left: 4px;
	cursor: pointer;
}

.menu_button_design {
	color: white;
	width: fit-content;
	height: fit-content;
	background: green;
	border-radius: 5px;
	padding: 2px;
	z-index: 3;
	position: absolute;
	right: 4px;
	top: 4px;
}

.menu_button_index {
	background: none;
	z-index: 1;
	display:none;
	color: red;
    
}

.img_overlay {
	background: linear-gradient(315deg, red, red, transparent);
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0px;
	border-radius: 16px;
}

.number {
	width: 75px;
}
.unit {
	width: 100px;
}
.ingredient {
	width: 100px;
}

.form_container {
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 130px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	color: black;
	top: 62px;
}

.add_input {
	position: relative;
	left: -157px;
	top: -40px;
	cursor: pointer;
	color: #c94c4c;
}

.remove_input {
	position: relative;
	left: -130px;
	top: -64px;
	cursor: pointer;
	color: #c94c4c;
}

#imagefilelabel {
	width: 284px;
	display: flex;
	align-items: center;
}

.group_select {
	border-radius: 5px;
	cursor: pointer;
	width: 285px;
	margin: 8px
}

.input_divs {
	display: flex;
	align-items: center;
}

.recipe_div {
    width: calc(100% - 48px);
	max-width:460px;
    margin: 24px;
    background: yellow;
    height: 100px;
    border-radius: 8px;
    display: flex;
	cursor: pointer;
}

.recipe_div:active {
	opacity: 50%;
}

.recipe_div_img {
    width: 118px;
    margin: 6px;
    border-radius: 8px;
}

.recipe_div_name {
    color: red;
    font-size: 24px;
    /* height: fit-content; */
    display: flex;
    margin: 16px;
    width: 100%;
    align-items: center;
}

#title {
	display: flex;
	color: white;
	font-size: 28px;
	align-items: center;
	border: 2px solid white;
	border-radius: 5px;
}

option {
	background: #c94c4c;
	color: white;
	font-size: 20px;
}

option:hover {
	background: #92a8d1;
}

.popup {
	width: 200px;
	height: 150px;
	position: absolute;
	left: calc(50% - 108px);
	top: 48px;
	border-radius: 5px;
	background: #c94c4c;
	z-index: 2;
	display: none;
	padding: 4px;
	align-items: center;
	justify-content: center;
}

.popup_overlay {
	width: 100%;
	height: 100%;
	background: black;
	opacity: 30%;
	position: absolute;
	display: none;
}

.hr {
	background: white;
	height: 2px;
	margin: 0px;
}

#select_box {
	color: white;
	background: yellow;
	font-size: 28px;
	position: absolute;
	top: 74px;
	border: 2px solid white;
	border-radius: 5px;
}

#select_title {
	margin: 4px;
	background: white;
	color: yellow;
	border-radius: 5px;
	display: flex;
	align-items: center;
}

#go {
	font-size: 28px;
	color: white;
	background: yellow;
	border-radius: 5px;
	margin: 4px;
	padding: 4px;
}

.select_course {
	border-radius: 5px;
	height: fit-content;
	font-size: 28px;
	background: none;
	color: white;
	border: 1px solid white
}

.profile_circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
	position: absolute;
	left: calc(50% - 50px);
}

.profile_input {
	margin-left: 8px;
	display: flex;
	align-items: center;
}

.steps_div {
	top: 108px;
    margin: 8px;
    position: relative;
	color: white;
}	color: black;

.select {
	background: none;
	border: none;
}

.click_div {
	width: calc(100% - 16px);
	background: red;
	z-index: 1;
	left: 8px;
	opacity: 0;
    display: flex;
	flex-direction: column;
    height: fit-content;
    top: 50px;
    position: absolute;
    justify-content: center;
    align-items: center;
	border-radius: 5px;
	transition: opacity 0.25s;
}

#click_table {
	position: relative;
	z-index: 5;
}

#click_overlay {
	width: 100%;
	height: 100%;
	top: 0px;
	position: fixed;
	background: black;
	opacity: 0.5;
}

.button {
	position: absolute;
	width: 128px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: red;
	border-radius: 5px;
	padding: 10px;
	color: white;
	text-align: center;
	margin: 10px;
}

.reg_title {
	text-align:center;
	width: 100%;
	font-size: 25px;
}

.sign_in_title {
	font-size:30px;
	left:0px;
	color: white;
	background: red;
	width: 100%;
	padding: 2px;
	text-align: left;
	margin: 0px;
}

.undo {
	width: 32px;
	height: 32px;
	z-index: 3;
	position: absolute;
	right: 8px;
	top: 8px;
	font-size: 32;
	color: #c94c4c;
}

.home_img {
	width: 32px;
	position: absolute;
	left: 6px;
	top: 12px;
}
#course_pic {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;	
}

.sign_in_button {
	right: 4px;
	top: 6px;
	position: absolute;
	z-index: 3;
}

.user_id_column {
	display: table-cell;
}

@media (max-width:320px){
	.user_id_column {
		display: none;
	}
}

a {
	left: 0px;
	color: white;
	font-size: 2vh;
	text-decoration: none;
}

.form_div {
	color: white;
	display: inline-flex;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}

.form_p {
	font-size: 15px;
    left: 0px;
}

.container {
	background: #92a8d1;
	color: white;
	display: flex;
}

.submit {
	background: #c94c4c;
}

.submit:hover {
	background: rgb(177, 53, 53);
}

.form_labels {
	width: 70px;
	margin-left: 8px;
	left: 0px;
	font-size: 15px;
	display: flex;
	align-items: center;
}

.range_name {
	position: absolute;
	left: 150px;
	border-radius:5px;
	width: 150px;
	margin: 4px;
	color: gray;
}

#course_design {
	width: 100%;
	height: calc(100% - 40px);
	position: absolute;
	left: 0px;
	bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.play {
	text-decoration: none;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 74px);
	margin: 0px;
	font-size: 30px;
}

.play_button {
	width: 250px;
	height: 140px;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px;
	border-radius: 16px;
	cursor: pointer;
}

.play_button:active {
	opacity: 50%;
}

.play_img {
	width: 250px;
    height: 140px;
    border-radius: 16px;
	position: absolute;
}
.play_text {
	position: absolute;
    font-size: 36px;
    color: white;
}
.play_overlay {
	background: black;
    width: 250px;
    height: 140px;
    border-radius: 16px;
    opacity: 30%;
}

.info_container {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.user_information {
	width: 100px;
    height: 100px;
    background: red;
    border-radius: 16px;
	color: white;
	text-align:center;
	margin: 4px;
	padding: 8px;
}

tr.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 2px;
}

.info_p {
	font-size: 40px;
	width: 100px;
	left: 0px;
}

.h2_objects {
	margin-left: 10px;
	background: red;
	padding: 5px;
	border-radius: 5px;
	min-width: 60px;
	cursor: pointer;
}

#nh_div {
	width: 100%;
	height: 200px;
	top: calc(50% - 25px);
	color: white;
	position: absolute;
	display: flex;
	opacity: 0;
	left: 0%;
	animation: nh_div_animate 3s;
	animation-delay: 8s;
	animation-fill-mode: forwards;
}

@keyframes nh_div_animate {
	0% {left: 0%; opacity: 0;}
	100% {left: 50%; opacity: 1;}
}



.form_style {
	display: flex;
	align-items: center;
	position: absolute;
	left: 50px;
	width: calc(100% - 50px);
	top: 7px;
}

.scroll_down {
	position: absolute;
	text-align: left;
	height: calc(100% - 90px);
	overflow-y: scroll;
	width: 100%;
	top: 50px;
	color: black;
	font-family: paragraph_font;
}

.top_div {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: calc(100% - 32px);
	position: relative;
	background: lightgrey;
	padding: 16px;
}

.recipe_info_div {
	display: flex;
	flex-direction: column;
	width: 75%;
}

.info_boxes {
	display: flex;
	font-family: birthstone;
	text-transform: capitalize;
	font-size: 32px;
	justify-content: space-evenly;
}

.info_box {
	border: 2px solid;
	padding: 8px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	width: 180px;
	justify-content: center;
}

.recipe_img {
	position: relative;
}

.main_div {
	display: flex;
	margin: 8px;
}

.method {
	margin-left:16px;
}

.ingredients {
	max-width: 250px;
}

h2 {
	font-size: 28px;
    margin: 8px;
	color: #034f84;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.title_p {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 24px;
}

.title_div {
	width: calc(100% - 16px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 8px;
}

.img {
	margin: 8px;
	border-radius: 8px;
	/* max-width: 100%; */
	/* max-height: 170px; */
}

.img_container {
	width: calc(100% - 16px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px;
}

@media (max-width:600px) {
	.recipe_info_div {
		width: 100%;
	}
	.info_box {
		font-size: 24px;
		width: 130px;
		padding: 4px;
	}
	#serves_select {
		font-size: 24px;
	}
	.title_p {
		font-size: 18px;
	}
}

@media (min-width:800px) {
	.top_div {
		flex-direction: row;
	}
	.img_container {
		width: 50%;
	}
}

.close_enlarge_img {
	z-index: 6;
	position: absolute;
	background: #c94c4c;
	padding: 4px;
	border-radius: 5px;
	cursor: pointer;
}

@media (max-width: 500px) {
	.main_div {
		display: block;
	}
	.method {
		margin-left: 0px;
	}
	.ingredients {
		max-width: 100%;
	}
	.img_container {
		width: calc(50% - 16px);
	}
}

h3 {
	font-size: 24px;
	font-family: birthstone;
	text-transform:capitalize;
	font-size: 34px;
	margin-bottom: 0px;
	color: #034f84;
}

.opacity_div {
	background: black;
	opacity: 50%;
	width: 100%;
	height: 100%;
	position: absolute;
}

.please_fill {
	margin: 8px;
	position: relative;
	color: black;
}

.register_div {
	display: flex;
	align-items: center;
	color: white;
}

#imagewrapper{
		/* position:absolute; */
		/* top:124px; */
		width: 256px;
		height: 144px;
		border: 1px solid #888;
		background-color: white;
		margin:8px;
}

.set_img {
	width: 24px;
}

.table {
	background: #c94c4c;
	color: white;
	margin: 8px;
	width: calc(100% - 16px);
	border-radius: 5px;
	text-align: center;
	position: absolute;
	top: 50px;
}

.user_column {
	display: table-cell;
}

@media (max-width: 647px) {
	.user_column {
		display: none;
	}
}

.recipe_id_column {
	display: table-cell;
}

@media (max-width: 551px) {
	.recipe_id_column {
		display: none;
	}
}

.image_column {
	display: table-cell;
	text-align: center;
}

@media (max-width: 455px) {
	.image_column {
		display: none;
	}
}

.nh_original_column {
	display: table-cell;
}

@media (max-width: 359px) {
	.nh_original_column {
		display: none;
	}
}

.settings_id_column {
	display: table-cell;
}

@media (max-width: 509px) {
	.settings_id_column {
		display: none;
	}
}

.settings_app_column {
	display: table-cell;
}

@media (max-width: 413px) {
	.settings_app_column {
		display: none;
	}
}


table {
	width:calc(100% - 16px);
	left: 8px;
	border-collapse:collapse;
	position: absolute;
	border-radius: 5px;
	overflow: clip;
}

tr {
	background: #92a8d1;
	height: 50px;
}

td, th {
	text-align: left;
	padding: 8px;
	min-width: 80px;
}

tr:nth-child(even) {
	background: none;
	color: black;
	border:0px;
}

.table_img {
	max-width: 32px;
    max-height: 32px;
	border-radius: 5px;
}

.table_div {
	width: 100%;
	top: 50px;
	position: absolute;
	height: calc(100% - 108px);
	overflow-y: scroll;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: white;
}

input:checked + .slider:before {
	background-color: green;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.description {
	position: absolute;
	top: 70px;
	left: calc(50% - 116px);
	padding: 8px;
	background: #92a8d1;
	width: 200px;
	border-radius: 5px;
	z-index: 2;
	display: none;
}

.description_overlay {
	width: 100%;
	height: 100%;
	background: black;
	position: absolute;
	top: 0px;
	opacity: 50%;
	display: none;
}

.favourite {
	z-index: 3;
	font-size: 32px;
	cursor: pointer;
	color: #c94c4c;
}

.symbol_filled {
	font-variation-settings: 'FILL' 1;	
}

.create_account_p  { 
	text-decoration-color: #c94c4c;
}

.create_account_p:hover {
	text-decoration-color: rgb(177, 53, 53);
}