html{
	overflow: hidden;
	height: 100%;
	 max-width: 100%;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */	


	  user-select: none;
	  -moz-user-select: none;
	  -webkit-user-select: none;
	  -ms-user-select: none;	
}

img{
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


*::-webkit-scrollbar{
	display: none;
}
*{
	-ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body{
	background-color: #181818;
	/*background-color:  #6e2f2f;*/
	color: lightgrey;
	height: 100%;
	overflow: auto;
	font-family:'Quicksand', sans-serif;
	font-size: 16px;
	max-width: 100%;
    overflow-x: hidden;
    margin: 0px;
/*	-webkit-perspective: 500px;  Chrome, Safari, Opera 
	perspective: 500px;   */
	scroll-behavior: smooth; 
	padding-top: env(safe-area-inset-top);
}


/* Invert colors for the entire page when in inverted mode */
body.inverted-mode {
	background-color: rgb(244, 225, 192);
}

/* Revert the inversion for all images in inverted mode */
body.inverted-mode img {
    /* filter: invert(100%)!important; */
}

body.inverted-mode .glyph-container {

}

body.inverted-mode .recipe-card-ingredient-item-dot{
	
}

body.inverted-mode .flavor-map-slice{
	
}


body.inverted-mode .card-status-button-active{
	background-color: #8e7765;
}


body.inverted-mode .profile-option-selected{
	
}

body.inverted-mode .profile-option{
	
}

body.inverted-mode .delete-list-btn{
	
}

body.inverted-mode{
	
}

body.inverted-mode .calculator-container{
	background-color: color(srgb 0.3956 0.3514 0.3349);
}

body.inverted-mode .profile-banner{

	/* background-color: #b4b4b4; */
	background-color: #2a2a2a;
}

body.inverted-mode .recipe-card-view{
	background-color: rgb(101, 90, 85);
}

body.inverted-mode .profile-user-img{
	
	background-color: rgb(52, 52, 52);
}

body.inverted-mode .profile-user-img-xtra-border{

	border: 5px solid rgb(255, 233, 205);
}



body.inverted-mode .profile-bio{
	
	color: black;
}

body.inverted-mode .profile-stat-num{
	
	color: #5c2900;
}

body.inverted-mode .stat-title{
	color: black;
}

body.inverted-mode .profile-options-container{

	border-bottom: 1.5px solid black;
}

body.inverted-mode .profile-user-stats{
	
}

body.inverted-mode .profile-option{
	
}


body.inverted-mode h2{
	color: black;
}



.lander-title-container{
	width: 64%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
}

.lander-title-letter-spacing{
	letter-spacing: 4px;
}

.title-img-container{

}

.title-img{
	width: 80%;
	max-width: 300px;
	margin: auto;	
	filter: brightness(1.5);
}

.landing-socails-container{

}

.insta-img{
	width: 80%;
	max-width: 28px;
	margin: auto;
	margin-top: 60px;
}

.landing-email-img{
	padding-top: 2px;
	width: 36px;
	height: 33px;
	margin-left: 10px;
	margin-bottom: -2px;
	filter: brightness(.85) saturate(125%);
}

.lander-title{
	font-size: 2.5em;
	color: #907763;
}

.lander-subtitle{
	border-top: 1px solid #907762;
	width: 90%;
	margin: auto;
	border-bottom: 1px solid #907763;
	color: grey;
	font-size: .8em;
	padding-top: 4px;
	padding-bottom: 4px;
	letter-spacing: 0.75px;
	margin-bottom: 6px;
	margin-top: 2px;
}

.lander-subsubtitle{
	color: #907763;
	line-height: 29px;
	margin-top: 9px;
	font-family: Apple SD Gothic Neo;
	letter-spacing: 1px;
	font-size: 1.1em;
	font-weight: 100;
}

.press-release-see-features{
	color: #c5ab96;
}

.press-release-box{
	width: 80%!important;
	max-width: 750px!important;
	margin: auto;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
	padding-bottom: 100px;
	height:auto!important;
}

.press-release-header{
	letter-spacing: 4px;
	font-size: .75em;
}

.press-release-title{
	padding-top: 1vh!important;
}

.press-release-container{
	/* padding: 9px 4px;
	background-color: rgb(20, 20, 20);
	letter-spacing: 3px;
	border: 1px dashed;
	width: 61%;
	max-width: 207px;
	border-radius: 14px;
	border: 1px solid rgb(36, 36, 36);
	width: 75%;
	margin: auto;
	margin-top: 3vh; */
	padding: 9px 4px;
	background-color: rgb(20, 20, 20);
	letter-spacing: 3px;
	border: 1px dashed;
	width: 61%;
	/* max-width: 200px; */
	max-width: 221px;
	border-radius: 11px;
	border: 1px solid rgba(144, 119, 99, 0.58);
	width: 75%;
	margin: auto;
	margin-top: 3vh;	
}


.press-release-logo{
	width: 36%!important;
}

.press-release-subject-line{
	font-style: italic;
	font-size: 1.5em;
	font-family: optima;
	color: #c39f82;	
	margin-bottom: 25px;
}

.press-release-summary-line{
	color: #cccc;
}

.press-release-introduction{
	text-align: left;
	padding-top: 20px;
}

.press-release-screenshot-container{
	display: flex;
	margin-top: 28px;
	margin-bottom: 28px;	
}

.press-release-screenshot{
	width: 18%;
	margin: auto;
	border: 1px solid #464646;
	border-radius: 3px;
}

.press-release-description{
	text-align: left;
}


.press-release-pricing{
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.press-release-url{
	text-align: left;
}

.press-release-link{
	/* color: #ddaf8a; */
	color: #866f5e;
}



.press-release-other-contact{
	text-align: left;
}

.publication-appearance-title{
	color:  grey;
	font-style: italic;
}

.publication-appearance-container{
	margin-top:  20px;
}

.publication-appearance-link{
    color: #907763;
    font-style: italic;
}


/*.press-release-body{
	width: 100%;
	background-color: rgb(10, 10, 10);
}*/

/*@media screen and (min-width: 10000px) and (max-width: 10000px) and (orientation: landscape){
	html {
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
}*/


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

a{
	text-decoration: none;
}


input[type="text"] {
  font-size: inherit;
}


input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}



.brightness-1{
	filter: brightness(1.3)!important;
}

.brightness-2{
	filter: brightness(1.5)!important;
}

/*
.increment-navbar{
	background-color: grey;
	width: 100%;
	position: absolute;
	left: 0;
	height: 70px;
	top: 0;
}

.increment-count{
	background-color: #797979;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
}

.increment-warning{
	background-color: #ff4e4e;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
}

.increment-btn{
	background-color: grey;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;	
}

.increment-delete-btn{
	background-color: red;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;	
}*/




.title-page-main-symbol-img{
	width: 45%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
}

.download-symbol-img{
	width: 80%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	filter: brightness(1.25);	
}

.tipple-book{
	font-size: 2.1rem!important;
	letter-spacing: 4px!important;
}

.title-page-box{
	text-align: center;
	vertical-align: middle;
	height: 81vh;
	margin: auto;
	width: 70%;
	margin-top: 35%;
	display: flex;
	flex-direction: column;
}

.title-description{
	padding: auto;
	margin: auto;
	font-family: 'Montserrat', sans-serif;
	color: #6c6c6c;
	border-top: 1px solid #6c6c6c;
	border-bottom: 1px solid #6c6c6c;
	margin: 0;
	margin-left: auto;
	margin-right: auto;	
}



.coming-soon{
	color: #565656;
}

.main-container{
	position: relative;
	width: 460px;
	height: 87.4vh;
	max-height: 900px;
	text-align: center;
	margin: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	padding-top: 2rem;
	border-radius: 6px;
    border: 2px solid #907763;
}

@media only screen and (max-width: 460px){
	.main-container{
		width: 96%;
	}
}

.landing-container{
	/*width: 60%;*/
    margin: auto;
    /*min-width: 270px;*/
    /*for LOCAL*/
    /*-webkit-transform: translate3d(0, 0, 0);*/
    
}

@media only screen and (min-width: 435px){
	.landing-container{
		width: 100%;
	}
}

.contain-title-n-beta{
	position: relative;
    display: inline-grid;
}

.drink-builder-link{
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.beta-dev{
    right: -16px;
    top: -20px;	
	position: absolute;
	color:#6c6c6c;
	font-family: 'Quicksand', sans-serif;
	font-size: .75em;
	font-weight: 100;
	-ms-transform: rotate(26deg); /* IE 9 */
    -webkit-transform: rotate(26deg); /* Safari */
    transform: rotate(26deg);
}

.small-text{
	font-size: .5em;
}

.come-in{
	color: #907763;
	font-size: 1.25em;
    border: 1px solid #907763;
    border-radius: 40px;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9em;
    opacity: .4;
}

.come-in:hover {
	opacity: 1;
}

@media only screen and (max-width: 1300px){
	.come-in{
		width: 20%;
	}
}

@media only screen and (max-width: 1025px){
	.come-in{
		width: 25%;
	}
}




@media only screen and (max-width: 820px){
	.come-in{
		width: 30%;
	}
}

@media only screen and (max-width: 630px){
	.come-in{
		width: 40%;
	}
}



.come-in h4 {
	margin-top: .1em;
	margin-bottom: .1em;
}

.title-box {
	text-align: center;
	vertical-align: middle;
	height: 100vh;
}

.temp-imbibz2-landing-conatiner{
	text-align: center;
	vertical-align: middle;
	height: 100%;
	padding-bottom: 18vh;
	display: flex;
	vertical-align: middle;
	flex-direction: column;
	justify-content: space-around;	
}

.title {
	padding-top: 5vh;
	display: inline-block;
	vertical-align: middle;
}



/********* NAV BAR ************/


.navbar{
	overflow: hidden;
	background-color: #333!important;
	position: fixed;
	bottom: 0px;
	left: 0;
	right: 0;
	width: 100%;
	margin-bottom: 0 !important;
	border-top: 2px solid #464646;
	/* padding-bottom: 59px; */
	z-index: 9;
	height: 60px;
}

.hide-nav{
	bottom: -100px;
}

.controlbar-button-container{
	display:flex;
	justify-content: space-between;
	flex-flow: row;
	width: 58%;
	margin: auto;
}

.controlbar-button{
	border: none;
	display:block;
	border-radius: 4px;
	/*background-color: #252729;*/
	/*width: 15%;*/
	height: 29px;
	text-align: center;
	color: #656464;
	padding-top: 3px;
	cursor: pointer;
}

.deactivated-icons{
	/* filter: grayscale(100%) brightness(50%); */
	filter: grayscale(100%) brightness(16%);
}


/******* Nav Bar End **********/

/********* LIB TAB ************/


.collections-container{
	text-align: left;
	padding-top: 41px;
	/* margin-left: 5px; */
	height: 100%;
	position: relative;
	right: 0px;
	z-index: 9;
	background-color: inherit;
	transition: background-color 0.1s, filter 0.2s, border 0.1s, border-radius 0.1s, margin-left 0.1s, right 0.25s ease-in-out;
}

.remove-lists{
	background-color: black;
	position: relative;
	filter: brightness(50%);
	border-left: 1px solid rgb(69, 69, 69);
	right: 0;
	z-index: 9;
	transition: background-color 0.1s, filter 0.1s, border 0.1s, border-radius 0.1s, margin-left 0.1s, right 0.25s ease-in-out;
}

.move-list-container{
	right: -350px;
	transition: right 0.25s ease-in-out;
}


.add-list-libtab-form{
	position: absolute;
	top: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: auto;
	padding-left: 8px;
	padding-right: 4px;
	padding-top: 57px;
}

.new-list-form-on{
	display: block;
}

.new-list-form-off{
	display: none;
}

.add-list-header{
	text-align: center;
	color: grey;
	font-size: 1em;	
}

.lists-heading{
	text-align: center;
	color: grey;
	font-size: 1em;
}

.screen-on{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	display: block;
	/*background-color: rgba(52, 52, 52, 0.91);*/
	background-color: rgba(52, 52, 52, 0.73);
	z-index: 7;
}

.screen-off{
	display: none;
}

.add-all-staff-btn{
	background-color: rgb(14, 14, 14);
	color: #6f6964;
	width: 95%;
	margin: auto;
	height: 34px;
	margin-top: 20px;
	position: relative;
	border-radius: 17px;
	text-align: center;
	padding: 6px;
	border: 1px solid #7d6e62;
}

.add-all-staff-btn:active{
	background-color: rgb(50, 50, 50);
	color: #8a8a8a;
}

.list-container{
	display: flex;
	flex-direction: column;
	overflow: auto;
	position: relative;
	max-height: 87%;
	padding-bottom: 200px;
}

.list-number{
	opacity: .5;
	margin-left: 4px;
}

.lib-tab{
	width: 300px;
	position: fixed;
	background-color: rgb(25, 25, 25);
	right: 0px;
	float: right;
	top: 0px;
	z-index: 8;
	border-left: 1px solid rgb(144, 119, 99);
	height: 100%;
}

.lib-tab-closed{
	display: block;
	right: -305px;
	transition: right 100ms;
}

.lib-tab-open{
	display: block;
	right: 0px;
	transition: right 100ms;
}

.add-btn-not-active{
	filter: opacity(.5);
}

.add-btn-active{
}

.edit-del-list-btn {
	position: absolute;
	z-index: 30;
	top: 37px;
	right: 20px;
	margin: auto;
	width: 30px;
	height: 30px;
	opacity: 0.9;
	cursor: pointer;
	border: 2px solid rgb(68, 67, 67);
	border-radius: 24px;
	background-color: rgb(10, 10, 10);
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .edit-del-list-btn:active {
	background-color: rgb(32, 32, 32);
  }
  
  .list-dots-container {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	height: 100%;
	align-items: center;
	transform: rotate(90deg);
	padding-top: 2.5px;
	padding-bottom: 2px;
  }
  
  .list-dot {
	width: 4px;
	height: 4px;
	background-color: rgb(70, 70, 70);
	border-radius: 50%;
	margin: 1px 0;
  }

.list-separator{
	width: 86%;
	margin-left: 16px;
	margin-bottom: 6px;
	border-bottom: 1px dashed #907763;
}

.edit-or-delete-question{
	height: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	background-color: black;
	overflow: hidden;
	transition: height 0.25s ease-out, margin-top 0.25s ease-out, margin-bottom 0.25s ease-out;
}

.edit-or-del-option{
	text-align: center;
	margin: auto;
	background-color: rgb(28, 28, 28);
	color: #907763;
	border: 1px solid #656362;
	width: 80%;
	border-radius: 17px;
	margin-bottom: 6px;
	margin-top: 8px;
	height: 31px;
	vertical-align: middle;
	display: flex;
	flex-direction: column;
	align-items: true;
	justify-content: space-evenly;
}

.edit-or-del-option:active{
	background-color: rgb(68, 68, 68);
	color: #030303;
	border: 1px solid #968d89;
}

.open-list-edit-del-question-box{
	flex-direction: column;
	height: 128px;
	border-top: 1px solid #907763;
	border-bottom: 1px solid #907763;	
	margin-top: 10px;
	margin-bottom: 10px;	
}

.open-list-edit-del-question-box-delete{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 45px;
	border-top: 1px solid #907763;
	border-bottom: 1px solid #907763;	
	margin-top: 10px;
	margin-bottom: 10px;	
}

.delete-lists-title{
	text-align: center;
	color: darkred;
}

.delete-list-btn{
	width: 17px;
	height: 17px;
	border-radius: 10px;
	border: 1px solid #b50000;
	cursor: pointer;
	margin-right: 6px;	
}

.edit-lists-title{
	text-align: center;
	color: #907763;
}


@keyframes spin-delta {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Apply the animation to the image */
.edit-list-btn-img {
    animation: spin-delta 2s linear infinite;
	width: 94%;
	filter: brightness(3);
}

.edit-list-btn{
	margin-right: 6px;
	width: 17px;
	margin-top: 2px;
}

.new-list-container{
	position: absolute;
	bottom: 10%;
	padding-left: 23px;	
	width: 90%;
}

.add-new-list{
	cursor: pointer;
}

.new-list-form{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.new-list-input{
	margin-right: 5px;
	margin-bottom: 0px!important;
	margin-top: 33px;
	margin-bottom: 10px;
}

.list-status-container{
	display: flex;
	margin-top: 42px;
	width: 100%;
	justify-content: space-evenly;
}

.list-type-selector-container{
	display: flex;
	flex-direction: column;
	margin-bottom: 5px;
}

.disable-add-users-to-list{
	pointer-events: none; 
    opacity: 0.2;
}

.add-users-to-list-container{
	/* background-color: rgb(14, 14, 14); */
	background-color: rgba(14, 14, 14, 0);
	width: 95%;
	margin: auto;
	height: 370px;
	margin-top: 31px;
	position: relative;
	border-top-left-radius: 17px;
	border-top-right-radius: 17px;
	border-left: 1px solid rgb(38, 35, 35);
	border-right: 1px solid rgb(38, 35, 35);
}

.collapse-list-container {

    transition: height 1.5s ease-out;
}




.users-added-to-private-list-container{
	overflow: scroll;
	height: 250px;
	background-color: black;
	padding-top: 20px;
	margin-top: -20px;
	padding-bottom: 50px;
}

.add-collaborators-title{
	text-align: center;
	width: 100%;
	color: #907763;
	margin-bottom: 5px;
}

.search-bar-input-usernames-for-lists{
	margin: 0px!important;
}

.user-added-to-list{
	margin-top: 8px;
	margin-left: 9px;
	margin-right: 9px;
	padding: 5px;
	background-color: rgb(9, 9, 9);
	color: rgba(144, 119, 99, 0.59);
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	border: 1px solid rgba(144, 119, 99, 0.61);
}


.staff-list-permissions{
	position: absolute;
	bottom: 40px;
	font-size: .85em;
	width: 96%;
}


.list-permissions{
	position: absolute;
	bottom: 0px;
	font-size: .85em;
	width: 96%;
}

.generate-analystics-list-permissions{
	bottom: 76px;
	font-size: .85em;
	width: 95%;
	margin: auto;
	margin-top: 3px;
}

.list-permissions-contianer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	border: 1px solid rgb(46, 45, 45);
	color: rgb(129, 121, 121);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: rgb(8, 8, 8);
}

.remove-user-from-list{
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid rgb(65, 64, 64);
	border-radius: 50%;
	margin-top: 1px;
	margin-right: 2px;
}

.remove-user-from-list::before,
.remove-user-from-list::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  background-color: rgb(65, 64, 64);
  transform-origin: center;
}

.remove-user-from-list::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.remove-user-from-list::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.submit-new-list-btn{
	background-color: rgb(14, 14, 14);
	color: rgb(70, 70, 70);
	width: 50%;
	margin: auto;
	height: 34px;
	margin-top: 20px;
	position: relative;
	border-radius: 17px;
	text-align: center;
	padding: 6px;
	border: 1px solid rgb(70, 70, 70);
}


.submit-new-list-btn-valid{
	background-color: rgb(14, 14, 14);
	color: #907763;	
	border: 1px solid #907763;
}

.add-list-srv-msg{
	margin-top: 10px;
	color: #907763;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

.add-list-btn-container{
	display: flex;
}

.list-link{
	color: rgb(219, 219, 219);
	margin-bottom: 10px;
	display: flex;
}

.list-collab-icon{
	margin-top: 1.5px;
	border: 1px solid #907763;
	border-radius: 50%;
	height: 19px!important;
	width: 19px!important;
	margin-left: 4px!important;
	transform: scale(.9)!important;
	padding-bottom: 0px!important;
}

.list-link:hover{
	color: #907763;
	cursor: pointer;

}

.pub-lib-link{
	padding-left: 20px;
	padding-bottom: 2px;
	padding-top: 2px;
}

@keyframes pulsate {
	0% {
	  color: rgb(255, 243, 181);
	}
	50% {
	  color: #907763; /* Faded color for pulsating effect */
	}
	100% {
	  color: rgb(255, 243, 181);
	}
  }

  @keyframes pulsate-selected {
	0% {
	  color: rgb(255, 243, 181);
	}
	50% {
	  color: black; /* Faded color for pulsating effect */
	}
	100% {
	  color: rgb(255, 243, 181);
	}
  }  

.new-recipe-pulsate{
	font-style: italic;
	color: rgb(255, 243, 181);
	animation: pulsate 3s infinite; 
}
.new-recipe-pulsate-selected{
	font-style: italic;
	color: rgb(255, 243, 181);
	animation: pulsate-selected 3s infinite; 
}


.library-tab-list-active{
	color: #202020;
	background-color: #907763;
}

.library-tab-list-active:hover{
	color: #202020;
}


/********** Lib Tab End *******/


/********* Not Subscriber ************/

.non-subscriber-style{
	opacity: .5;
	font-style: italic;
	cursor: pointer;
}

/********* Not Subscriber End ************/

/********* RECIPE CARD ********/

.similarity-score{
	float: right;
	margin-right: 8px;
	font-size: .75em;
	color: #907763;	
}

.recipe-card-flavor-map-container{
	width: 73%;
	margin: auto;
	margin-top: 2%;
}

.drink-photo{
	width: 94%;
	margin: auto;
	height: auto;
	border-radius: 9px;
	/*border: 3px solid rgb(27, 27, 27);	*/
}

.drink-photo-container{
	height: auto;
	display: block;
	margin: auto;
	width: 94%;
	text-align: center;
	/* background-color: rgb(14, 14, 14); */
}

.qr-container{
	height: auto;
	display: block;
	margin: auto;
	width: 94%;
	text-align: center;	
}

.recipe-card{
	width: 100%;
	max-width: 460px;
	height: 92vh;
	max-height: 830px;
	margin: auto;
	margin-top: 5px;
	/*background-color: rgb(20, 20, 20);*/
	background-color: rgb(21, 21, 21);
	border: 1px solid #545454;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	/* transition: transform .5s;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;

	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	      -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;		 */

	 /*-webkit-backface-visibility: hidden;*/

	overflow: visible !important;  
	   
}

body.inverted-mode .recipe-card{
	background-color: rgb(101, 90, 85);
}




.perspective-container{
	/*perspective: 500px;*/
    perspective-origin: center;
/*	width: 74%;
    max-width: 430px;    */
    margin: auto;

}



.is-flipped{
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);	
	/*pointer-events: none;*/
}

	/**  #545454  ***/

.recipe-name{
	text-align: center;
	font-size: 1.5em;
	padding: 3px;
	color: rgb(121, 121, 121);
	padding-left: 20px;
	cursor: pointer;
}

body.inverted-mode .recipe-name{
	color: black;
}

.recipe-name-spacer{
	padding-top: 4px;
}

.name-edit-btn-img{
	width: 17px;
	margin-left: 2px;
	padding-bottom: 7px;
}

.recipe-name-input{
	background-color: rgb(32, 32, 32);
	font-size: 1em;
	/*width: 45%;*/
	font-family: inherit;
	border: 1px solid rgb(24, 24, 24);
	border-radius: 28px;
	text-align: center;
	color: #907763;
	padding-right: 29px;
	padding-left: 8px;
}


.recipe-name-form{
	margin: 0!important;
}

.ingredient-has-recipe{
	color: white!important;
	cursor: pointer;
	background-color: #323232;
	border-radius: 4px;
	padding-left: 2px;
	text-transform: capitalize;	
	display: flex;
	justify-content: space-between;
}

body.inverted-mode .ingredient-has-recipe{
	background-color: #1c1c1c;
}

.recipe-symbol-link-ingredient-list{
	display: flex;
	align-items: center;
	margin-right: 3px;
}

.brand-search-icon-img{
	max-width: 14px;
}

.recipe-symbol-link-ingredient-list-img{
	max-width: 14px;
}

.ingredient-has-recipe:active{
	color: grey!important;
}

.card-top{

}

@keyframes flashRed {
    0%, 100% { background-color: #907763; }
    50% { background-color: red; }
}

.flash-red-animation-ingredient-needs-color {
    animation: flashRed 1s infinite;
}


.card-body{
	display: flex;
	justify-content: space-evenly;
	height: 79%;

}

.private-on-imbiblia{
	filter: blur(20px);
	pointer-events: none!important;
}

.recipe-is-private-message{
	display: none;
}

.private-on-imbiblia-class-for-owner{
	border: 2px solid rgb(73, 35, 35)!important;
}

.private-recipe-title{
	color: rgb(189, 66, 66)!important;
}

body.inverted-mode .private-recipe-title{
	color: rgb(113, 15, 15)!important;
}




.recipe-is-private-message-on{
	position: absolute;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 100%;
	width: 100%;
	text-align: center;
	z-index: 1;
	color: rgba(144, 119, 99, 0.58);
	font-style: italic;
	pointer-events: none;
}


.private-on-internet-disclaimer{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	z-index: 4;
	width: 87%;
	margin: auto;
	color: #907763;
	font-size: 1.2em;
	box-shadow: 0 0 60px rgba(144, 119, 99, 0.76);
	cursor: pointer;
	border: 1px solid #907763;
	height: 81px;
	background-color: black;
	border-radius: 12px;
}

.card-body-left{
	width: 15%;
	text-align: center;
	font-size: .8em;

}

.card-body-center{
	/*background-color: rgb(17, 17, 17);*/
	background-color: rgba(19, 19, 19, 1);
	height: 112%;
	border-radius: 7px;
	/* border: 1px solid rgb(29, 29, 29); */
	width: 65%;
	position: relative;
	/*border: 1px solid grey;*/
}

body.inverted-mode .card-body-center{
	background-color: color(srgb 0.2157 0.2157 0.2157)
}

.card-body-right{
	width: 15%;
	text-align: center;
	font-size: .6em;
}

.card-bottom{
	position: absolute;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	bottom: 0;
	left: 0;
	right: 0;	
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;	
}


.recipe-card-selection-btn{
	border: .5px solid #545454;
	border-radius: 2px;
	background-color: rgb(34, 34, 34);
	padding: 2px;
	cursor: pointer;
}

.recipe-card-selection-btn:active{
	background-color: rgb(59, 59, 59);
}


.add-ingredient-btn{
	width: 60%;
	/* margin: auto; */
	padding: 5px;
/*	background-color: rgba(143, 143, 143, 0.21);
	color: rgb(148, 148, 148);
	border-radius: 40px;
	border: 1px solid rgb(70, 70, 70);*/
	font-size: .8em;
	text-align: center;
	cursor: pointer;
	margin: auto;
	margin-bottom: 11px;


	border: 1px solid 	#545454;
	border-radius: 6px;
	background-color: rgb(37, 37, 37);
	color: rgb(217, 217, 217);
	font-size: 1.1em;
}

.add-ingredient-btn:active{
	background-color: rgb(59, 59, 59);
}


/***   #907763   ***/

.rim-selected-container{
	height: 12%;
	background-color: #212121;
	border-radius: 54px;
	padding: 2px;
	margin-bottom: 52px;
}

.rim-display-container{
	height: 12%;
	/* border: 1px solid rgb(31, 30, 30);
	background-color: rgba(19, 19, 19, 1);
	border-radius: 54px; */
	padding: 2px;
	padding-top: 5px;
	margin-bottom: 52px;
}



.bracket-hat-card{
	width: 1px;
	height: 7px;
	background-color: rgba(57, 57, 57, 1);
	margin: auto;
	margin-top: 4px;
}

.bracket-body-card{
	width: 100%;
	height: 13px;
	border-top: 1px solid rgb(31, 30, 30);
	border-left: 1px solid rgb(31, 30, 30);
	border-right: 1px solid rgb(31, 30, 30);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	/* background-color: rgba(19, 19, 19, 1); */
}

@keyframes invitation-pulse {
	0% {
	  opactiy: 1;
	}
	50% {
	  opacity: .1;
	}

	100% {
	  opacity: 1;
	}
  }


.invitation-to-build{
	color: #907763;
	text-align: center;
	margin-top: 52%;
	font-size: 1.25em;
	transform: rotate(-18deg);	
	animation: invitation-pulse 4s infinite linear;
}

.invitation-arrow{
	color: #907763;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 32%;
	height: 25%;
	font-size: 1.25em;
	animation: invitation-pulse 4s infinite linear;
}


.bracket-body-neg-margin{
	margin-bottom: -11px
}

.bracket-body-card-reverse{
	width: 100%;
	height: 13px;
	border-bottom: 1px solid rgb(31, 30, 30);
	border-left: 1px solid rgb(31, 30, 30);
	border-right: 1px solid rgb(31, 30, 30);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	/* background-color: rgba(19, 19, 19, 1);	 */
}

.method-selection-btn{
	margin-top: 15%;
}

.methods-selected-container{
	/*padding-top: 5px;*/
	height: 74%;
	/*background-color: rgba(19, 19, 19, 1);*/
/*	border-left: 1px solid rgb(31, 30, 30);
	border-right: 1px solid rgb(31, 30, 30);*/
}

.recipe-card-method-name{
    -webkit-transform: rotate(90deg) translateY(25px) translateX(-23px); 
    -moz-transform: rotate(90deg) translateY(25px) translateX(-23px);    
    transform:rotate(90deg) translateY(25px) translateX(-23px);
    color: grey;
}

.recipe-card-method-display-img{
	text-align: right;
	margin-right: 2px;
}


.selected-method{
	width: 100%;
	font-size: .7em;
	/* background-color: black; */
	background-color: rgb(19, 19, 19);
	font-size: .7em;
	border: .5px solid darkgrey;
	margin-bottom: 8%;
	border: 1px solid rgb(33, 33, 33);
	padding: 2px;
	border-radius: 6px;	
}

body.inverted-mode .selected-method{
	background-color: rgb(55, 55, 55);
}

.glass-selected-container{
	position: relative;
	height: 15%;
	/* background-color: rgba(19, 19, 19, 1); */
	/* background-color: black;
	border: 1px solid rgb(31, 30, 30); */
	/* border-right: 1px solid rgb(31, 30, 30); */
	/* -webkit-backface-visibility: hidden;
	backface-visibility: hidden; */
}

.garnish-selected-container{
	display: flex;
	flex-direction: column;
	height: 74%;
	/* background-color: rgba(19, 19, 19, 1);	   */
/*	border-left: 1px solid rgb(31, 30, 30);
	border-right: 1px solid rgb(31, 30, 30);*/
}

.glyph-container{
	display: flex;
	/*height: 155px;*/
	/*min-height: 22%;*/
	width: calc(100vh * .18);
	height:  calc(100vh * .18);
	margin: auto;
	margin-top: 1%;
	position: relative;
}

.ingredient-glyph{
	width: calc(100vh * .155);
	max-width: 160px;
	margin: auto;
	height: calc(100vh * .155);
	max-height:  160px;
	border-radius: 100px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.ingredient-glyph-float{
	height: calc(100vh * .17);
	width: calc(100vh * .17);
	max-width: 175px;
	max-height: 175px;
	margin: auto;
	border-radius: 150px;
	/*position: absolute;*/
	/*top: -5px;*/
}

.float-title{
	text-align: center;
	color: rgb(139, 139, 139);
	text-transform: uppercase;
	letter-spacing: 4px;
	padding-left: 16px;
	padding-bottom: 3px;	
}


.dash-module{
	position: absolute;
	/* width: 37%; */
	left: 0;
	/* right: 0; */
	margin-left: auto;
	margin-left: auto;
	margin-top: 3px;
	margin-right: auto;
	z-index: 3;
	opacity: 1;
	display: flex;
	top: -6px;
}	


.dash-container{
	width: 100%;
	/* min-height: 27px; */
	/* background-color: rgba(125, 125, 125, 1); */
	/* margin-bottom: 4px; */
	color: rgba(85, 85, 85, 1);
	padding: 3px 0 0 3px;
	display: flex;
	flex-direction: column;
	position: unset;
	border-radius: 19px;
	/* border: 1px solid rgb(62, 62, 62); */
}


.dash-graphic-list{
	transform: rotate(45deg);
	/* width: 28px; */
	padding-left: 0px;
	/* margin-right: 3px; */
	background-color: rgba(125, 125, 125, 0.53);
	border-radius: 50px;
	text-align: center;
	width: 20px;
	height: 20px;
	margin-right: 0px;
}

.dash-graphic-module{
	/* width: 28px; */
	padding-left: 0px;
	/* margin-right: 3px; */
	margin-bottom: 3px;
	margin-right: 1px;
	background-color: rgba(125, 125, 125, 0.53);
	border-radius: 50px;
	text-align: center;
	width: 18px;
	height: 18px;
}

.dash-graphic{
	transform: rotate(45deg);
}

.dash-graphic-list-svg-container{
	top: 1px;
	position: relative;
}

.barspoon-graphic{
	text-align: center;
	z-index: 2;
}

.rinse-graphic{
	text-align: center;
	transform: rotate(180deg);
}

.drop-graphic{
	text-align: center;
	transform: rotate(0deg);
}

.rinse-glass-container{
	position: absolute;
	left: 0;
	right: 0;	
}


.mist-glass-container{
	position: absolute;
	left: -15px;
	right: 0;
	top: -28px;
	width: 120%;
	opacity: .6;
}

.smoke-glass-container{
	position: absolute;
	width: 120%;
	left: -8%;
	top: -66%;
  	pointer-events: none;	

}

.smoke-graphic-glass{

}

.smoke-liquid-container{
	position: absolute;
	z-index: 1;
	top: 18%;
	right: 16%;
	/* bottom: -15%; */
	width: 60%;
	/* right: 0%; */
	transform: rotate(8deg);
}

.card-ingredient-list{
	margin-top: 7px;
	height: 73%;
	/*overflow: scroll;*/
}

.card-ingredient-list-title{
	text-align: center;
	color: rgb(164, 164, 164);
	border-bottom: 1px solid #907763;
	padding-bottom: 2px;
	width: 95%;
	margin: auto;
	margin-bottom: 6px;
}

.ingredient-list-container{
	overflow: scroll;
	/*max-height: 73%;*/
	/*-webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);	
	mask-image: linear-gradient(to bottom, black 88%, transparent 100%);*/	

}

.recipe-card-ingredient-item{
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;  	


	width: 100%;
	justify-content: space-between;
	margin-bottom: 2px;
/*	font-size: .9em;
	font-size: .8em;*/
	font-size: .95em;
	padding-left: 2px;
	padding-right: 2px;	
/*	-webkit-transform: translate3d(0,0,0);
	  -moz-transform: translate3d(0,0,0);
	  -ms-transform: translate3d(0,0,0);
	  -o-transform: translate3d(0,0,0);
	  transform: translate3d(0,0,0);	*/
}


.ingredient-list-mist-graphic{

}

.display-card-mist-container{
	position: absolute;
	left: -16px;
	top: -19px;

}

.display-card-mist-container-batch-calc{
	left: -8px;
	top: -9px;
}

.float-disclaimer-in-card-batch-calc{
	text-align: center;
	font-size: .9em;
	color: rgb(172, 172, 172);
	padding-top: 12px;
	font-style: italic;
}

.weight-batch-disclaimer{
	color: red!important;
	font-size: .8em;
}

.disable-unit-toggle{
	filter: grayscale(100%);
	opacity: 0.5; /* Optional: Also make it semi-transparent */
	pointer-events: none;
	cursor: not-allowed;
}


.ingredient-mist-container{
	width: 10%;
}

.recipe-card-ingredient-quant-unit{
	display: flex;
	text-align: right;
	justify-content: space-evenly;	
}


.recipe-card-ingredient-item-detail{
	width: 45%;
	/*color: #b99c84;*/
	color: #d1a988;
}

.recipe-card-ingredient-item-quantity{
	width: 15%;
	text-align: left;
	margin-top: auto;
	margin-bottom: auto;
}

.ingredient-dot-container{
	max-width: 10%;
	vertical-align: middle;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.recipe-card-ingredient-item-dot{
	width: 18px;
	height: 18px;
	border-radius: 10px;
	margin: auto;
}

.solid-ingredient-list-img{
	width: 100%;
}


.batch-calc-img-size{
	width: 80%;
}

.recipe-card-ingredient-item-dot-inner-float{
	width: 14px;
	height: 14px;
	border-radius: 10px;
	background-color: #181818;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
}

.ingredient-list-separator{
	width: 100%;
	border-bottom: 1px dotted #907763;
	margin: auto;
	margin-top: 3%;
	margin-bottom: 3%;
}

.recipe-card-ingredient-item-unit{
	width: 70%;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
}

.recipe-card-ingredient-item-name{
	max-width: 45%;
	margin-top: auto;
	margin-bottom: auto;	
	display: flex;
	align-items: center;	
}


.ingredient-name-flex-sizing-for-img{	
	display: flex;
	text-align: left;
	padding-left: 2px;
}

.ingredient-name-flex-child{
	margin-top: auto;
	margin-bottom: auto;	
}


.recipe-card-ingredient-item-spacer{
	width: auto;
}

.delete-ingredient-btn-container{
	min-width: 10%;
	right: 0px;
	position: absolute;	
}

.delete-ingredient-btn{
	width: 17px;
	height: 17px;
	border-radius: 10px;
	margin: auto;
	border: 1px solid #b50000;
	cursor: pointer;
}


.delete-btn-line{
	width: 80%;
	height: 1px;
	background-color: #b50000;
	margin: auto;
	display: block;
	margin-top: 48%;
}

.ingredient-checker-btn{
	
	left: 15px;
	width: 25px;
	height: 25px;
	top: 10px;
	position: initial;
	transform: rotate(0deg);
	color: #907763;
	text-align: center;
	border: 1px solid #907763;
	border-radius: 19px;
	cursor: pointer;
	vertical-align: middle;
	margin: auto;
	padding-top: 2px;
	margin-bottom: 10px;
}




.recipe-card-bottom-button-container{
	display: flex;
	background-color: rgb(8, 8, 8);
	justify-content: space-between;
	height: auto;
	bottom: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top: 3px solid #907763;
}

body.inverted-mode .recipe-card-bottom-button-container{
	background-color: rgb(55, 55, 55);
}

.username-recipe-card-container{
	right: 0px;
	position: absolute;
	top: -30px;
	color: #907763;
	background-color: rgb(36, 36, 36);
	padding: 5px;
	border-top-left-radius: 25px;
	padding-left: 12px;
	padding-left: 20px;	
}

.username-recipe-card-container:active{
	color: black;
	background-color: #907763;
}

.business-recipe-card-container{
	left: 0px;
	position: absolute;
	top: -30px;
	color: #907763;
	background-color: rgb(36, 36, 36);
	padding: 5px;
	border-top-right-radius: 25px;
	padding-left: 12px;
	padding-right: 20px;		
}

.bottom-container-btn-container{
	text-align: center;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 2px;	
	width: 100%;
}

.bottom-container-left-most-btn{
	border-bottom-left-radius: 5px;
}

.bottom-container-right-most-btn{
	border-bottom-right-radius: 5px;	
}

.card-status-button-active{
	color: rgb(0, 0, 0);
	background-color: #907763;	
}

.card-status-button-image-active{
	filter: brightness(0%);
}

.defunct-bottom-container-btn{
	filter: brightness(44%);
}

.bottom-container-btn-label{
	font-size: .85em;
	/*color: rgb(161, 161, 161);*/
}



.recipe-card-bottom-button-container-web-view{
	/*justify-content: flex-end;*/
}

.web-view-download-imbiblia{
	font-family: 'Quicksand', sans-serif;
	font-size: 3em;
	line-height: 2em;;
}

.web-view-recipe-card-container{
	left: 0px;
	right: 0px;
	position: absolute;
	bottom: .5%;
	top: 9.5vh;
}


.download-for-batch-msg-container{
	display: flex;
	flex-direction: column;
	text-align: center;
	padding-top: 33%;
	height: 80%;
}

.download-for-batch-msg{
	color: #755f4e;	
}

.download-for-batch-msg-emphasis{
	font-size: 1.8em;
	color: #e2b693;
}

@keyframes blinker{
	50%{
		opacity: .2;
	}
}

.download-app-web-notice{
	position: absolute;
	color: white;
	background-color: black;
	z-index: 10000;
	height: 120px;
	width: 120px;
	display: flex;
	flex-direction: column;
	border-radius: 50%;
	text-align: center;
	justify-content: space-evenly;
	transform: rotate(25deg);
	bottom: 20%;
	right: 15%;
	box-shadow: 0 0 60px rgba(144, 119, 99, 0.76);
	cursor: pointer;
	border: 1px solid #907763;
	animation: blinker 1s linear infinite;
}

.download-app-web-notice:active{
	background-color: #ffffff;
}


.web-notice-title{
	color: #ffcda4!important;
}

.download-img-container{
	display: flex;
	flex-direction: column;	
	margin-top: 30px;
	text-align: center;
}

.publicity-links-container{
	margin-top: .5%;
}


.appstore-link{
	margin-bottom: 21px;
}

.appstore-link-img{
	display: inline-block;
	width: 221px;	
}

.imbiblia-branded-appstore-img{
	border: 1px solid #907763;
	border-radius: 18px;
	filter: brightness(1.3);
	background-color: black;
}

.recipe-card-bottom-btn{
	height: 20px;
	margin: 3px!important;
	cursor: pointer;
}




.recipe-card-garnish-img{
	text-align: left;
	margin-left: 2px;
	/*width: 80%;*/
}


.recipe-card-garnish-name{
	-webkit-transform: rotate(90deg) translateY(-28px) translateX(-32px);
	-moz-transform: rotate(90deg) translateY(-28px) translateX(-32px);
	transform: rotate(90deg) translateY(-28px) translateX(-32px);
	color: grey;
	height: 100%;
}

.garnish-img{
	max-width: 100%;
	/*width: 67%;
	*/
	width: 95%;
	/*opacity: .7;*/
}



/****** Build Face *****/

.build-card-face-headers{
	width: 100%;
	text-align: center;

}

.build-photo-prev{
	width: 100%;
	text-align: center;
	margin-top: 18%;
}

.build-page{
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.build-card{
	position: absolute;
	top: 20px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}


.build-photo-input{
	background-color: black;
	color: #907763;
	border: 1px solid #907763;
	padding: 10px;
	text-align: center;
	bottom: 110px;
	position: absolute;
	left: 0px;
	right: 0px;
	width: 30%;
	margin: auto;
	border-radius: 5px;

}

.empty-photo-cage{
	margin: auto; 
	border: 1px dashed #907763;
	border-radius: 10px; 
	width: 300px; 
	height: 450px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	pointer-events: none;
	-webkit-user-drag: none; 
	user-select: none; 
}

body.inverted-mode .empty-photo-cage{
	border-color: black;
}

.empty-photo-cage-solid{
	margin: auto; 
	border: 1px dashed #907763;
	border-radius: 10px; 
	width: 200px; 
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	margin-top: 12%;
}

.build-settings-section{
	margin-top: 40px;
}

.recipe-type-name{
	color: rgb(129, 121, 121);
}

.recipe-settings{
	font-size: .75em;
}

.warning-messages-settings{
	color: red;
}

.recipe-save-btn-container{
	display: flex;
	align-items: flex-start;
	justify-content: space-around;	
	margin-top: 100px;
	text-align: center;
}

.save-recipe-button{
	padding: 6px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 11px;
	cursor: pointer;
	width: 115px;
}

.save-recipe-button:active{
	background-color: black;
	color: #907763;
	border: 1px solid #907763;
}

.recipe-type-cannot-be-edited{
	text-align: center;
	color: #907763;
}

.abandon-edit{
	margin: auto;
	text-align: center;
	margin-top: 20%;
	background-color: rgb(164, 0, 0);
	width: 115px;
	padding: 5px;
	border-radius: 9px;
	color: rgb(199, 199, 199);
}

.abandon-draft{
	text-align: center;
	margin: auto;
	padding: 6px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 11px;
	cursor: pointer;
	width: auto;
	color: rgb(93, 93, 93);
	margin-top: 60px;
	background-color: black;
	width: 126px;
	border: 1px solid rgb(43, 43, 43);	
}


.abandon-draft:active{
	background-color: rgb(164, 0, 0);
	color: white;
}

.save-button-saved{
	background-color: black;
	color: #907763;
	border: .5px solid rgba(144, 119, 99, 0.78);
}

.save-button-unsaved{
	background-color: #907763;
	color: black;
	border: .5px solid grey;
}

.recipe-settings-title{
	color: #907763;
}

.recipe-settings-contianer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-top: 1px solid rgb(46, 45, 45);
	border-bottom: 1px solid rgb(46, 45, 45);
	color: rgb(129, 121, 121);
	background-color: rgb(8, 8, 8);
}

.submission-terms-header{
	text-align: center;
	font-size: 1.25em;
	color: #907763;
	margin-bottom: 20px;
}

.submission-terms-link{
	color: rgb(70, 70, 70);
	border: 1px solid rgb(55, 55, 55);
	text-align: center;
	max-width: 77px;
	margin: auto;
	border-radius: 4px;
}

.submission-section{
	position: absolute;
	bottom: 23%;
	left: 0px;
	right: 0px;
}

.recipe-submission-btn{
	position: absolute;
	bottom: 0;	
}

.close-submission-terms{
	
	top: 10px;
	right: 10px;
}

.build-submitted-section{
	position: absolute;
	bottom: 35%;
	left: 0px;
	right: 0px;
	color: darkgrey;
	font-style: italic;
	text-align: center;
}

/*******back face stuff*****/



.backface-build-body{
	display: flex;
	flex-direction: column;
}

.build-backface-body-container{
	width: 90%;
	margin: auto;
	margin-top: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.build-backface-body-container-sharing{
	width: 90%;
	margin: auto;
	margin-top: 9%;
	height: 85%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;	
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;	
}


.build-backface-sharing-element{
	text-align: center;
	padding-top: 4px;	
	
}

.recipe-link-textarea{
	/*visibility: hidden;*/
	position: absolute;
	margin-left: -9999px;
}


.sharing-img{
	max-width: 63px;
	border-radius: 50%;
	margin-bottom: 4px;
}

.sharing-img:hover{
	background-color: #26201c;
}

.sharing-img:active{
	background-color: #d9a67e;
}

.build-backface-body-element-scroll{
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  height:  95%;
  width: 100%;
  padding-bottom: 200px;
  overflow-y: scroll;	
  margin: 18px;

}

.build-backface-body-element-scroll::-webkit-scrollbar{
	width: 0px;
	display: none;
	height: 0px;
	-webkit-appearance: none;
}

.build-backface-body-element-title{
	text-align: center;
	color: #666666;
	font-family: monospace;
	margin-bottom: 5px;
}

body.inverted-mode .build-backface-body-element-title{
	color: black;
}

.build-backface-text-inputs{

}


.backface-psa{
	font-family: Avenir;
	margin-top: 10px;
	font-size: .8em;
}

.psa-highlight{
	font-style: italic;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #d4ab8b;
}



.backface-text-item{
	padding: 7px;
	margin: 2px;
	border: 1px dotted rgb(65, 65, 65);
	margin-bottom: 8px;
	border-radius: 2px;
	color: rgb(227, 227, 227);
	font-size: .8em;
}

.payment-button{
	text-align: center;
}

.rba-enter-password-container{
	width: 80%;
	margin: auto;
	margin-top: 40px;
	text-align: center;
}

.rba-error-alert-msg{
	color: red;
}


.backface-card-title-name{
	text-align: center;
	padding: 3px;
	color: #907763;
	font-size: 1.25em;
}



.recipe-type-choices-container{
	display: flex;
	justify-content: space-evenly;
	padding: 8px;
	border: 1px solid rgb(50, 50, 50);
	border-radius: 5px;
	background-color: rgb(42, 42, 42);
	padding-top: 12px;
	padding-bottom: 12px;
	font-family: Courier New;
}

.recipe-type-selector{
	width: 18px;
	height: 18px;
	border-radius: 10px;
	background-color: black;
	margin: auto;
	cursor: pointer;
	position: relative;
	border: 1px solid rgb(117, 117, 117);
}


.recipe-type-select-dot{
	display: none;
	width: 12px;
	height: 12px;
	border-radius: 10px;
	margin: auto;
	position: absolute;
	background-color: #907763;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.dot-active{
	display: block;
}

/********End of Backface Stuff*****/




/******** Recipe Card End *******/

/********** Ingredient Card ********/

.default-volume{
	color: #907763;
}

.update-vol-container{
	text-align: center;
	height: 40px;
	margin: auto;
	margin-top: 20px;
	width: 100%;
}

.update-volume-input{
	background-color: black;
	color: #907763;
	border: 1px solid grey;

}

.update-vol-button{
	width: 29%;
	text-align: center;
	margin: auto;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
	font-weight: 300;	
}

/********* Ingredient Card End *******/



/******* Single Recipe Display ***/


.recipe-card-cage-in-single-view{
	margin: auto;
}


.single-recipe-display{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(27, 27, 27);
	height: 100%;
	width: 100%;
	z-index:1000;
}

.single-recipe-display-off{
	display: none;
}

.single-recipe-display-on{
	display: block;
	-webkit-perspective: 500px;
	perspective: 500px;
}

/*** End of Single Recipe Display ***/


/******** About Page ******/


.about-page-container{
	color: rgb(140, 140, 140);
}

.link-back-to-lib-container{
	padding: 34px;
}

.link-back-to-lib{
	color: #907763;
}

.about-title{
	text-align: center;
	font-size: 1.5em;
	margin-top: 20px;
	color: #907763;	
}

.about-subtitle{
	text-align: center;
	color: rgb(135, 53, 53);
}

.imbiblia-title{
	color:#907763;
}

.builder-gif-container{
	width: 80%;
	margin: auto;
	margin-top: 23px;
}

.builder-gif-img{
	width: 100%;
}

.about-signature{
/*	display: flex;
	height: 129px;
	flex-direction: column;
	text-align: center;
	justify-content: space-between;
	margin-top: 58px;	
	margin-bottom: 30px;*/


	display: flex;
	height: 79px;
	flex-direction: column;
	text-align: center;
	justify-content: space-between;
	margin-top: 58px;
	margin-bottom: 30px;	
}


.signature-img-container{
	width: 100%;
	text-align: center;
	
}

.card-signature-padding{
	margin-top: 30px;
}

.signature-img{
	border: none;
	display: block;
	border-radius: 4px;
	/* background-color: #252729; */
	/* width: 15%; */
	height: 29px;
	width: 29px;
	text-align: center;
	color: #656464;
	margin: auto;
}

.library-header-img{
	height: 60px;
	width: 60px;
}

.about-body{
	width: 90%;
	max-width: 600px;
	margin: auto;
	margin-top: 10px;	
	margin-bottom: 100px;	
	text-align: justify;
}

.about-psa-highlight{
	font-style: italic;
	margin: auto;
	color: #d4ab8b;
	text-align: center;
	font-size: .8em;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 70%;
}

/******* End of About Page **/


/******* Library View Classes ***/


.imbiblia-about-link{
    margin: auto;
    text-align: center;
    margin-bottom: 23px;
    padding-top: 12;
    font-size: 3em;
    font-size: 2em;
    color: #907763;
    cursor: pointer;
    position: relative;
    pointer-events: visible;
    width: 80%;
}

.master-plan-tag{
	position: absolute;
	font-size: .3em;
	transform: rotate(37deg);
	margin-left: -5px;
	/* bottom: 0; */
	margin-bottom: -8px;
	color: rgb(167, 78, 78);	
}

.about-link-a-tag{
	color: rgb(138, 138, 138);
}

body.inverted-mode .about-link-a-tag{
	color: rgb(65, 65, 65);
}

.master-plan-btn{
	color: rgb(73, 73, 73);
	background-color: rgb(14, 14, 14);
	padding: 10px;
	font-weight: bolder;
	border-radius: 32px;
	border: 1px solid rgb(52, 52, 52);

}

.no-recipes-in-list-msg{
	width: 80%;
	margin: auto;
	text-align: center;
	margin-top: 20%;
}

.master-plan-btn-container{
	margin: auto;
	margin-top: 20px;
	text-align: center;
}

.read-more{
	width: 45%;
	margin: auto;
	margin-bottom: 50px;	
}

.master-plan-msg{
	color: rgb(99, 99, 99);
}


.library-display-container{
	margin-top:35px;
	margin-bottom: 42px;
	
	/*overflow: visible !important;*/
}


.essay-img-container{
	margin: auto;
	text-align: center;
}


.recipe-card-essay-container{
	padding-top: 0px!important;
	margin-top: 0px!important;
	padding-bottom: 0px!important;
}

.library-list-title{
	width: 100%;
	max-width: 430px;
	margin: auto;
	padding-left: 5px;
	padding-bottom: 5px;
	color: grey;
	font-size: 1.1em;
}

.header-bar-title{
	padding-bottom: 0px;
}

.library-list-title-span{
	color: #907763;
	font-style: italic;
}

.library-list-name-container{
	display: none;
	position: fixed;
	top: 0;
	text-align: center;
	background-color: #333;
	width: 100%;
	border-bottom: 1px solid #464646;
	padding-bottom: 2px;
	z-index: 5;
	margin-top: 0px;
    -webkit-transition: margin-top 0.1s;
    -moz-transition: margin-top 0.1s;
    -o-transition: margin-top 0.1s;
    transition: margin-top 0.1s;	
   	padding-top: env(safe-area-inset-top);
}

.hide-library-bar{
	margin-top: calc(-50px - env(safe-area-inset-top));
    -webkit-transition: margin-top 0.1s;
    -moz-transition: margin-top 0.1s;
    -o-transition: margin-top 0.1s;
    transition: margin-top 0.1s;	
}

.library-list-name{

}

.lib-tab-name{
	font-size: 1.3em;
	/* color: #c6bbb2; */
	color: #70655d;
	padding-left: 11px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-transform: capitalize;
}

body.inverted-mode .lib-tab-name{
	color: #bea28e;
}

.lib-tab-name-active{
	text-align: center;
	/*color: #907763;*/
	color: #d1a988;	
	font-size: 1.5em;
	padding-left: 0px;	
}

.lib-tab-name-with-similarity{
	/*color: #907763;*/
	color: #c6bbb2;	
	font-size: 1.5em;
	padding-left: 3px;
	padding-right: 3px;
	display: flex;
	justify-content: space-between;
}

.recent-lookup-banner{
	font-style: italic;
	color: rgb(70, 70, 70);
	text-align: center;
	margin: auto;
	border: 1px solid rgb(78, 78, 78);
	border-radius: 10px;
	height: 23px;
	background-color: #333;
	padding-bottom: env(safe-area-inset-top);
}


.library-tab-container{
	height: 45px;
	width: 74%;
	max-width: 430px;
	margin: auto;
	display: flex;
	margin-bottom: -10px;
}

.library-analytics-tabs-container{
	height: 38px;
	width: 33%;
	max-width: 430px;
	margin: auto;
	display: flex;
	min-width: 250px;
}

.list-analytics-container{
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	padding: 10px;
	padding: 20px;
	width: 96%;
	margin: auto;
	min-width: 314px;
	max-width: 700px;
	border-top: 3px solid rgb(50, 46, 46);
	border-top-left-radius: 28px;
	border-top-right-radius: 28px;
	background: linear-gradient(to bottom, black, transparent);
	margin-bottom: 200px;
}

.analytics-sub-title{
	color: darkgrey;
	text-align: center;
	font-size: .7em;
	width: 80%;
	margin: auto;
	height: 68px;
}

.list-analytics-title{

}

.list-info-stuff-container{

}

.analytics-toggle-container{
	margin: auto;
	display: flex;
	justify-content: center;
	margin-top: 4px;
}

.list-analytics-flavor-map-container{
	width: 88%;
	max-width: 400px;
	position: relative;
	height: 487px;
	margin: auto;
	margin-top: 18px;
}

.analysis-subtitle{
	text-align: center;
	margin: auto;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-around;
	font-size: .75em;	
}

.list-info-stuff-title{
	text-align: center;
}

.list-info-stuff-item{
	color: #907763;
	padding-left: 10%;
	margin-top: 10px;
}

.list-info-stuff-item-collaborator{
	color: #907763;
	padding-left: 15%;
	margin-top: 10px;	
}

.library-tab{
	width: 50%;
	background-color: rgb(46, 46, 46);
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding-top: 5px;
	color: grey;
	text-align: center;
	border: 1px solid rgb(70, 70, 70);
	cursor: pointer;
}

.analytics-tab-on{
	background-color: #907763;
	color: rgb(40, 40, 40);
	font-weight: 600;
	border: 1px solid #ac8e76;
}

.library-tab-active{
	background-color: #907763;
	color: rgb(40, 40, 40);
	font-weight: 100;
	border: 1px solid #ac8e76;
}


.search-tab-img{
	padding-top:  1.5px;
    width: 100%;
    height: 52%;
}

.search-tab-img{
	  filter: invert(.4);
}

.search-tab-img-active{
  filter: none;	
}

.library-loading-container{
	width: 100%;
	text-align: center;
	margin-top: 20vh;	
}


.add-to-lists-btn{
	margin: auto;
	width: 100px;
	height: 30px;
	background-color: #907763;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: black;
	border-radius: 50px;
	border: 2px solid rgb(85, 85, 85);
	position: absolute;
	bottom: 11%;
	left: 0;
	right: 0;	
}


/***** End of Library View Classes ****/



/******* Recipe Card View *****/



.recipe-card-view{
	position: relative;
	width: 100%;
	max-width: 430px;
	margin: auto;
	/* background-color: rgb(8, 8, 8); */
	/* background-color: rgb(19, 19, 19); */
	background-color: black;
	/* border-top: 2px solid #585858;
	border-left: 2px solid #585858;
	border-right: 2px solid #585858; */
	border-top: 2px solid #212121;
	border-left: 2px solid #212121;
	border-right: 2px solid #212121;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	height: 102px;
	margin-bottom: -52px;	
	/* transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	      -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;	 */

	-webkit-transition: height 275ms ease, width 275ms ease, transform .5ms, border-width 0.5s;
		-moz-transition: height 275ms ease, width 275ms ease, transform .5ms, border-width 0.5s;
			-o-transition: height 275ms ease, width 275ms ease, transform .5ms, border-width 0.5s;
			-ms-transition: height 275ms ease, width 275ms ease, transform .5ms, border-width 0.5s;
				 transition: height 275ms ease, width 275ms ease, transform .5ms, border-width 0.5s;

	overflow: visible !important;

	transform-origin: 100% 0;
}

.recipe-card-view.dogeared{
	clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 45px, 100% 100%, 0 100%);
	transform: translateZ(0);
}




.recipe-card-view.dogeared::before{
	content: "";
	position: absolute;
	top: -7px;
	right: 40px;
	width: 49px;
	height: 41px;
	/* background-color: rgb(51, 51, 51);
	border-left: 1px solid #545454;
	border-top: 1px solid #545454; */
	/* background-color: rgb(24, 24, 24);
	border-left: 1px solid #464646;
	border-top: 1px solid #464646; */

	background-color: rgb(18, 18, 18);
	border-left: 1px solid #333232;
	border-top: 1px solid #333232;
	border-top-left-radius: 7px;
	transform-origin: 100% 0;
	transform: rotate(-91deg);
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
	z-index: 2;
}


body.inverted-mode .recipe-card-view.dogeared::before{
	background-color: rgb(42, 42, 42);
}


.display-card-just-title{
	cursor: pointer;
}

.title-full-height{
	height: 100%;
}

.title-full-height:active{
	background-color: #907763;
}

.recipe-card-single-view{
	margin: auto!important;
	top: -10px;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	border-color: #907763!important;
	-webkit-box-shadow: 0 0 30px rgba(144, 119, 99, 0.76);
	box-shadow: 0 0 30px rgba(144, 119, 99, 0.76);
}

.recipe-card-front{
	height: 100%;
	pointer-events: visible;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
}

.recipe-card-back{
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
}

.recipe-card-view-back-face{
	transform: rotateY(180deg);
	position: absolute;
	margin: auto;
	margin-top: 0px !important;
	right: 0px;
	/*border: none !important;*/
	left: 0;
	width: 100% !important;
	background-color: black;
	height: 100%;
	border-radius: 7px;
	pointer-events: visible;
	border: 1px solid #545454;
}

.sharing-title{
	font-size: .7em;
	color: grey;
}

.removePointerEvents{
	pointer-events: none;
}

.backface-btn-container{
	justify-content: flex-end;
}


.alpha-ref-container{
	position: absolute;
	margin-top:-35px;

}

.recipe-card-view-body-side-column{
	display: flex;
	flex-direction: column;
	width: 17%;
}

.last-card{
	height: 90vh;
	max-height: 660px;
	border-bottom: 2px solid #585858;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;	
}

.last-card-container{
	margin: auto;
	text-align: center;
	margin-top: 9%;	
}


.expand-card{
	width: 100%;
	max-width: 460px;
	height: 93vh;
	max-height: 760px;
	margin: auto;
	margin-bottom: 70px;
	/* border: 1.5px solid #545454; */
	border: 1.5px solid #323232;
	border-radius: 8px;
	display: flex;
	flex-direction: column;	
	 -webkit-transition: height 175ms ease, width 175ms ease, transform .5s;
	    -moz-transition: height 175ms ease, width 175ms ease, transform .5s;
	      -o-transition: height 175ms ease, width 175ms ease, transform .5s;
	     -ms-transition: height 175ms ease, width 175ms ease, transform .5s;
	         transition: height 175ms ease, width 175ms ease, transform .5s;	


	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	      -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;	

	overflow: visible !important;         
}

.snap-to-top-spacer{
	position: sticky;
	
}

.snap-to-top-spacer-on{
	margin-bottom: env(safe-area-inset-top);
}

.snap-to-top-spacer-off{

	height:0px!important;
	visibility: hidden;
	margin-bottom: 0px;
}


.card-display-glass-container{
	height: auto;
	margin-bottom: 10px;
	padding-bottom: 5px;
	padding: 3px;
	border-radius: 5px;
}



.selected-method{
	width: 100%;
	font-size: .7em;
	/* background-color: black; */
	background-color: rgb(19, 19, 19);
	font-size: .7em;
	border: .5px solid darkgrey;
	margin-bottom: 8%;
	border: 1px solid rgb(33, 33, 33);
	padding: 2px;
	border-radius: 6px;	
}

body.inverted-mode .card-display-glass-container{
	border: 1px solid rgb(33, 33, 33);
	background-color: rgb(55, 55, 55);
}

.card-display-body{
	height: 96%;
}

.card-display-long-container{
	/*padding-top: 10px;
	padding-bottom: 10px;*/
	border-radius: 5px;
	height: auto;
}


.in-card-batch-calc-long-container{
	padding-top: 0px;
}

.card-display-body-center{
	height: 95%;
	width: 62%;
	padding-left: 8px!important;
	padding-right: 8px!important;
	font-size: .85em;
	background-color: black;
}

body.inverted-mode .card-display-body-center{
	background-color: color(srgb 0.2157 0.2157 0.2157);
}

.card-display-rim-container{
	/*margin-bottom: 5px;*/
}

.card-display-rim-display-container{
	background-color: rgb(20, 20, 20);
	border-radius: 100px;
}

body.inverted-mode .card-display-rim-display-container{
	background-color: rgb(55, 55, 55);
}

.card-display-rim-container{
	position: relative;
	height: auto;
	display: flex;
	/* margin-bottom: 5px; */
}

.card-display-half-rim-on{
	position: absolute;
	width: 50%;
	background-color: rgb(20, 20, 20);
	height: 100%;
	border-top-left-radius: 1000px;
	border-bottom-left-radius: 1000px;
}

body.inverted-mode .card-display-half-rim-on{
	background-color: rgb(55, 55, 55);
}

.card-display-rim-img{
	width:98%;
}


.lib-btm-btn{
	height: 34px;
	margin: 7px;
}


.display-card-method-display-img{

}

.display-card-side-column-img{
	width: 75%;

}

.display-card-recipe-area{
	height: 96%;
}


.display-card-name{
	height: 100%;
	margin-bottom: 4px;
	font-size: 10px;
	color: rgb(153, 153, 153)!important;
}

.read-more-tag-container{
	margin: auto;
	text-align: center;
	margin-bottom: 21px;
	width: 46%;	
}


.store-tag-container{
	padding: 9px 4px;
    background-color: rgb(20, 20, 20);
    letter-spacing: 3px;
    width: 61%;
    border-radius: 14px;
    border: 1px solid rgb(36, 36, 36);
    width: 75%;
    margin: auto;
    margin-top: 6vh;
    margin-bottom:  20px;
}

.store-tag-container:active{
	background-color: rgb(60 60 60);;
}


.read-card-top-spacer{
	margin-top: 50px;
}

.bottom-container-btn-label{
	text-align: center;
}

.recipe_card_info_link{
	margin-top: 20px;
	padding: 9px;
	padding-left: 10px;
	color: grey;
	border-radius: 4px;
	font-family: Apple Braille;
	background-color: rgb(32, 32, 32);	
}

a.recipe_card_info_link{
	color: grey;
}

#link-anchor-tag{
	color: grey;
}

a.read-more-card-tag{
	margin: auto;
	width: 45%;
	font-size: .85em;
	margin-top: 22px;
	text-align: center;
	cursor: pointer;
	color: grey;
}

a.store-tag{
	color: #d1a988;
}



/***** End Recipe Card View ***/



/**** Calculator *******/


.historical-batch-disabled{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 85%;
	margin: auto;
	padding-bottom: 10%;
	color: #907763;
	font-family: baskerville;
	line-height: 1.5em;	
}


.disabled-item{
	color: rgb(189, 60, 60);;
}

.essay-link{
	color: #da9156;
}

.essay-title-span{
	font-family: baskerville;
	color: #d1a988;
}


.batch-card{

}

.calculator-container{
	z-index: 1000;
	position: fixed;
	/*background-color: rgb(38, 38, 38);*/
	background-color: rgb(29, 29, 29);
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.batch-calculator-off{
	display: none;
}

.batch-calculator-on{
	display: block
}


.in-card-batch-calc-container{
	position: initial;
	/*height:98%;*/
	width: 100%;
	z-index: 0;
}

.escape-batch-calc-container{
	height: 32px;
	width: 32px;
	position: fixed;
	right: 10px;
	top: 10px;
}

.batch-calculator-title{
	text-align: center;
	padding: 10px;
	font-family: Baskerville;
	font-size: 1.2em;
	font-style: italic;
	color: #907763;
	letter-spacing: 1px;
}

.batch-calculator-body{

}

.in-card-batch-calculator-body{
	height: 100%;
}

.batch-calc-body-center{
	width: 70%;	 
	background-color: rgb(22, 22, 22);
	border: 1px solid #907763;	
	height: 95%;	
}


.batch-calculator-unit-toggle-container{
	position: absolute;
	top: 40%;
	right: 0;
	/*background-color: rgb(65, 65, 65);*/
	/*background-color: rgb(36, 36, 36);*/
	/*background-color: rgb(31, 31, 31);*/
	background-color: rgb(22, 22, 22);
	padding: 3px;
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	border-left: 1px solid rgb(115, 115, 115);
	border-top: 1px solid rgb(115, 115, 115);
	border-bottom: 1px solid rgb(115, 115, 115);
	height: 37%;
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
	flex-direction: column;
	justify-content: space-between;
	z-index: 2000;
}



.in-card-batch-calc-toggle-container{
right: -18px;
border: 1px solid #907763;
border-radius: 7px;
/* position: initial; */
padding-top: 5px;
padding-bottom: 5px;
top: 5px;
position: initial;
}



.batch-interface{
	height: 20%;
	display: flex;
	color: #e9bd9a;	
}

.ingredient-batch-calc-total-container{
	height: 10%!important;
}

.ingredient-batch-interface{
	height: 10%;
	margin-top: 8px;
}

.ingredient-batch-calc-interface-item{

}

.ingredient-batch-number-cage{
	height: 88%!important;
	width: 43%!important;
	font-size: 2.5em!important;
	border: 2.5px solid #907763!important;
}


.batch-calc-side-column{
	width: 9%;
}

.batch-q{
	text-align: center;
	font-style: italic;
	color: #d5b499;
	display: flex;
	margin: auto;
	vertical-align: middle;
	align-items: baseline;
}


.in-card-batch-q{

}

.batch-calc-recipe-name{
	padding-right: 5px;
	color: #c2a791;
}


.batch-calc-bottom{
/*	color: rgb(71, 67, 67);
	padding: 2px;
	padding-left: 5px;
	padding-bottom: 5px;
	font-size: .75em;
	position: relative;*/

	color: rgb(122, 118, 118);
padding: 2px;
padding-left: 5px;
padding-bottom: 5px;
font-size: .5em;
position: relative;
}

.batch-calc-interface-item{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;	
}

.batch-calc-interface-item-choice{
	display: flex;
}


.batch-calc-choice-name{
	margin: auto;
	width: 75%;
	font-size: 1.25em;	
}


.batch-number-cage{
	height: 71%;
	width: 78%;
	margin: auto;
	border: 3.5px solid #907763;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	text-align: center;
	color: #b3937a;
	border-radius: 5px;
	font-size: 3.5em;
	background-color: black;
	font-family: Geeza Pro;
	padding-top: 3%;
}

.batch-methods-container{
	margin-bottom: 4px;	
}


.batch-num-select-container{
	 -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  	mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
	overflow-y: scroll;
	padding-bottom: 50px;
	width: 15%;
	background-color: rgba(19, 19, 19, 1);
	border-radius: 7px;
	height: 99%;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */	
  border: 1px solid #604c3d;
}

.in-card-batch-calc-method-and-glass-container{
	margin-top: 6px;
	border: 1px solid #604c3d;
}

.batch-num-select-container::-webkit-scrollbar{
	display: none;
}

.batch-num-item-select{
	padding:4px;
	font-size: 2em;
	color: grey;
}

.batch-num-item-selected{
	background-color: #907763;
	color: black;
	padding:4px;
	font-size: 2em;	
}



.batch-calc-total-container{
	border-top: 2px solid #907763;
	padding-top: 14px;
	width: 100%;
	margin: auto;
	margin-top: 18px;
	position: absolute;
	bottom: 0;
	left: 0px;
	right: 0px;
	height: 16%;	
}

.batch-calc-total{
	width: 100%;
	text-align: center;
	margin-bottom: 7px;
}

.batch-calc-total-msg{
	position: absolute;
	bottom: 4px;
	font-size: .5em;
	color: rgb(93, 93, 93);
	width: 97%;
	/* margin: auto; */
	/* left: 0; */
	right: 0;
}

/***** end of Calculator ****/


/*******Library Settings Module ***/



/*.library-settings-container{
	position: fixed;
	display: flex;
	flex-flow: column;	background-color: rgb(20, 20, 20);
	width: 5%;
	/*height: auto;*/
/*	height: 100%;
	right: 0;
	top: 0px;
	font-family: avenir;
	border-left: 1px solid rgb(87, 87, 87);
	color: rgb(94, 94, 94);
	z-index: 2;
	/*bottom: 37px;*/
/*	padding-bottom: env(safe-area-inset-bottom);
	padding-top: env(safe-area-inset-top);*/
/*}*/

.library-settings-container{
	position: fixed;
	display: flex;
	flex-flow: column;
	background-color: rgb(20, 20, 20);
	width: 5%;
	/* height: auto; */
	/* height: 100%; */
	right: 0;
	top: 11vh;
	bottom: 61px;
	box-sizing: border-box;
	font-family: avenir;
	border-left: 1px solid rgb(87, 87, 87);
	color: rgb(94, 94, 94);
	z-index: 2;
	border-bottom: 1px solid rgb(87, 87,87);
	/* bottom: 37px; */
	margin-bottom: env(safe-area-inset-bottom);
	margin-top: env(safe-area-inset-top);
	/* border-top-left-radius: 15px; */
	/* border-bottom-left-radius: 15px; */
	padding-bottom: env(safe-area-inset-bottom);	
	transition: right 0.3s ease-in-out;
	z-index: 8;
}

.library-settings-container-slide-away{
	right: -5%;
	transition: right 0.3s ease-in-out;
}

.admin-full-size-alpha-zoom{
	top: 0vh!important;
}

.top-selector{
	margin-top:34px;
}

.preferred-unit-select-container{
	cursor: pointer;
}

.preferred-unit-selector{
	width: 18px;
	height: 18px;
	border-radius: 10px;
	background-color: black;
	margin: auto;
	cursor: pointer;
	position: relative;
	border: 1px solid rgb(117, 117, 117);	
}

.unit-selected{
	width: 12px;
	height: 12px;	
	border-radius: 10px;
	margin: auto;
	position: absolute;
	background-color: rgb(161, 161, 161);
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;	
}

.unit-selected-calc{
	background-color: #907763;
	width: 12px;
	height: 12px;	
	border-radius: 10px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;	
}


.preferred-unit-label{
	text-align: center;
	color: rgb(170, 170, 170);	
}

.calc-label{
	color: #e9bd9a;
}

.library-settings-item-lower{
	flex: 1;
}



.lib-preferred-unit-container{
	position: absolute;
	top: 0px;
	height: 11vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 12px;
	color: #907763;
	background-color: rgb(45, 44, 44);
	right: 0px;
	width: 5%;
	border-left: 1px solid rgb(87, 87, 87);
	transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	z-index: 6;
}

.unit-panel-open {
	width: 30%;
	transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	border-bottom: 1px solid rgb(87, 87, 87);
	z-index: 8;
	/* background-color: rgb(18, 18, 18); */
	background-color: black;
  }

  .unit-panel-screen-on{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	/* background-color: rgba(74, 74, 74, 0.59); */
	background-color: rgba(17, 17, 17, 0.84);
	z-index: 6;
  }


  .lib-preferred-unit-control-panel{
	position: absolute;
	top: 11vh;
	height: 89vh;
	background-color: rgb(45, 44, 44);
	right: 0;
	width: 5%;
	z-index: 7;
	transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	border-left: 1px solid rgb(87, 87, 87);
  }

  .unit-control-panel-open{
	width: 30%;
	background-color: black;
	transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;

  }
  
  .preferred-unit-options-container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 50%;
	padding-top: 63px;
  }

/*** ALPHA ZOOM ***/

.alpha-zoom-container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	font-family: system-ui;
	flex: 1;
}

.alpha-zoom-letter-container{
	text-align: center;
	border-top: 1px solid grey;
	cursor: pointer;
	 flex: 1;
	background-color: none;
	 -webkit-transition: background-color 575ms ease;
	    -moz-transition: background-color 575ms ease;
	      -o-transition: background-color 575ms ease;
	     -ms-transition: background-color 575ms ease;
	         transition: background-color 575ms ease;	
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	font-size: 1.9vh;	         	
}






.alpha-zoom-letter-container:active{
	background-color: #907763;
	color: black;
	 -webkit-transition: background-color 0ms ease;
	    -moz-transition: background-color 0ms ease;
	      -o-transition: background-color 0ms ease;
	     -ms-transition: background-color 0ms ease;
	         transition: background-color 0ms ease;		
}


.letter-group-active{
	/* background-color: rgb(66, 66, 66)!important; */
	background-color: rgb(45, 44, 44)!important;
	color: #907763;
}

.letter-group-active:active{
	/* background-color: rgb(66, 66, 66)!important; */
	background-color: #907763!important;
	color: black;
}

.deactivated-alpha-zoom-letter-container{
	color:  #202020;
	text-align: center;
	border-top: 1px solid #343434;
	cursor: pointer;
	 flex: 1;
	background-color: none;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	font-size: 1.9vh;	         	
}	




/*** end of ALPHA ZOOM ***/



/****** End of Library Settings Module ***/

/********* SELECTION TAB *********/


.selection-tab{
	position: fixed;
	border-right: 1px solid #908f7763;
	width: 86%;
	z-index: 1;
	background-color: #212121;
	color: #8a8686;
	max-height: 100%;
	min-height: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
}


.tab-on{
	left: 0;
	transition: left 100ms;
	position: fixed;

	border-right: 1px solid #908f7763;
	width: 86%;
	z-index: 8;
	background-color: #212121;
	color: #8a8686;
	max-height: 100%;
	min-height: 100%;
	height: 100%;
	top: 0;
	bottom: 0;	
	
}

.tab-off{
	/* left: -90%; */
	left: -120%;
	transition: left 100ms;
	position: fixed;

	border-right: 1px solid #908f7763;
	width: 86%;
	z-index: 1;
	background-color: #212121;
	color: #8a8686;
	max-height: 100%;
	min-height: 100%;
	height: 100%;
	top: 0;
	bottom: 0;	
	
}

.selection-tab-parent-container{
	display: flex;
	max-width: 500px;
	margin: auto;
	align-items: stretch;
}


/*@media only screen and (max-width: 700px){
	.selection-tab-parent-container{
		margin-left: ;
	}
}
*/

.tab-selection-selected-container{
	/*width: 100%;*/
	flex: 1;
	height: 90vh;
	/*border: 1px solid blue;*/
}

.tab-selection-container{
	/*width: 100%;*/
	flex: 3;
	height: 90vh;
	/* border: 1px solid white; */
	margin: auto;
	margin-top: 20px;
	border-radius: 5px;
}


.rim-selected-container{
	flex: 3;
}

.rim-selection-container{
	flex: 3;
}

.sub-tab-container{
	display: flex;
	width: 80%;
	margin: auto;
	justify-content: space-evenly;
	margin-top: 20px;
}

.methods-sub-tab{
	font-size: .8em;
	border-top: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	width: 50%;
	background-color: black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.methods-sub-tab-active{
	border-top: 1px solid #907763;
	border-left: 1px solid #907763;
	border-right: 1px solid #907763;
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	width: 50%;
	color: black;
	background-color: #907763;
}


.drag-image {
	position: absolute;
	top: -9999px;
	left: -9999px;
	opacity: 1;
  }


.selection-options-container{
	width: 80%;
	height: 80%;
	border: 1px solid grey;
	border-radius: 5px;
	background-color: #131313;
	overflow: auto;
	margin: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */	
}

.selection-options-container::-webkit-scrollbar{
	display: none;
}

.selection-options-methods-container{
	border-top: 3px solid #907763;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 5px; 
	border-bottom-right-radius: 5px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */	
}

.selection-options-methods-container::-webkit-scrollbar{
	display: none;
}

.bracket-hat{
	width: 1px;
	height: 15px;
	background-color: grey;
	margin: auto;
	margin-top: 9px;
}

.bracket-body{
	width: 112%;
	height: 20px;
	margin: auto;
	margin-left: -6%;
	margin-bottom: -10px;
	border-top: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.selection-tab-title{

}

.glass-grid-feildset{

}

.selected-rim-container{
	height: 20vh;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	margin-top: 23px;
}

.rim-and-prep-display{
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	height: 103%;
	position: relative;
	margin-top: 17px;
}

.selected-rim-image-in-tab{
	height: 100%;
	position: absolute;
	margin: auto;
	top: 0px;	
}

.recipe-card-rim-name{
	margin-top: 4px;
}

.rim-grid{
	display: grid;
	/*grid-gap: 5px;*/
	justify-content: center;
	/*grid-column-gap: 17px;*/
	padding-top: 14px;
	grid-template-columns: 50% 50%;
	overflow-x: hidden;
}


.rim-blinder-on{
	position: absolute;
	width: 17%;
	background-color: rgb(33, 33, 33);
	height: 19%;
}


.half-rim{

}



.half-rim-on{
	  width: 50%;
	  background-color: #212121;
	  /* height: 100%; */
	  -moz-transition: background-color 150ms;
	  -o-transition: background-color 150ms;
	  -webkit-transition: background-color 150ms;
	  transition: background-color 150ms;
	  left: 0px;
	  position: absolute;
	  bottom: 0px;
	  top: 0px;
	  z-index: 1;
}


.half-rim-off{
	background-color: rgba(33, 33, 33, 0);
	-moz-transition: background-color 150ms;
  	-o-transition: background-color 150ms;
  	-webkit-transition: background-color 150ms;
  	transition: background-color 150ms;
}

.imbiblia-img-container-build{
	display: flex;
}

.imbiblia-symbol-img-build{
	width: 100%;
}



.builder-selected-rim{
	position: relative;
}

.builder-selected-rim-prep{
	position: absolute;
	width: 50%;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.builder-half-rim-on{
	position: absolute;
	width: 50%;
	background-color: rgb(20, 20, 20);
	height: 100%;
	border-top-left-radius: 1000px;
	border-bottom-left-radius: 1000px;	
	-moz-transition: background-color 150ms;
  	-o-transition: background-color 150ms;
  	-webkit-transition: background-color 150ms;
  	transition: background-color 150ms;

}

body.inverted-mode .builder-half-rim-on{
	background-color: rgb(101, 90, 85)
}


.builder-half-rim-off{
	background-color: rgb(20, 20, 20, 0);
	-moz-transition: background-color 150ms;
  	-o-transition: background-color 150ms;
  	-webkit-transition: background-color 150ms;
  	transition: background-color 150ms;
}


.rim-toggle-btn{
	margin: auto;
	margin-top: 50%;
	width: 70%;
	border-radius: 3px;
	border: 1px solid #907763;
	font-size: 1.5em;
}


.rim-toggle{
	background-color: black;
	padding-top: 20px;
	padding-bottom: 20px;
	cursor: pointer;
}

.rim-btn-on{
	background-color: #907763;
	color: black;
}

.rim-btn-off{
	background-color: #131313;
	color: inherit;
}


.selected-rim-prep{
	position: absolute;
	width: 38%;
	margin: auto;
	margin-bottom: 13px;
	z-index: 2;
}




.glass-grid{
	display: grid;
	/*grid-gap: 5px;*/
	justify-content: center;
	/*grid-column-gap: 17px;*/
	padding-top: 14px;
	grid-template-columns: 33% 33% 33%;
	overflow-x: hidden;
}



.glass-item{
	width: 100%;
	max-width: 100%;
	cursor: pointer;
	touch-action: manipulation;
	text-align: center;
}

.glass-img{
	margin-top: 0px;
	width: 69%;
}

.selected-glass-in-selection-tab{
	padding-top: 20px;
}

.rim-img{
	width: 100%;
}

.rim-img-build-container{
	position: relative;
}

.glass-img-recipe-card{
	width: 100%;
}

.recipe-card-glass-name{
	color: rgb(153, 153, 153);
	font-size: 0.9em;
	margin-top: 14px;
}

.recipe-card-rim-name{
	color: rgb(153, 153, 153);
	font-size: 0.9em;
	margin-bottom: 5px;
}

.selection-tab-item{
	margin-left: 7px;
	text-align: center;
}




.close {
  position: absolute;
  right: 12px;
  top: 9px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  margin-top: 1px;
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #737373;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}


.library-legend-link{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100px;
	height: 22px;
	margin-top: 1px;
	font-size: .8em;
	color: #907763;
	background-color: rgb(36, 36, 36);
	border: 1px solid rgb(66, 66, 66);
	cursor: pointer;
}

.legend-2-container{
	text-align: center;
	background-color: rgb(38, 38, 38);
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	border-radius: 4px;
	padding-left: 14px;
	padding-right: 14px;
	color: #907763;
	border: 1px solid rgb(71, 71, 71);
	margin-top: 50px;	
	min-width: 86px;
}

.how-much-container{
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.how-much-essay-link-img{
	width: 83%;
}


.close-all-btn-container{
	width: 122px;
	font-size: .8em;
	display: flex;
	flex-direction: column;
	vertical-align: middle;
	height: 20px;
	justify-content: space-around;
	color: rgb(97, 97, 97);
	position: absolute;
	left:  0px;
	cursor: pointer;	
}

.close-all {
	position: absolute;
	left: 12px;
	top: 0px;
	width: 22px;
	height: 22px;
	opacity: 0.3;
	margin-top: 1px;
}

.close-all:hover {
  opacity: 1;
}

.close-all:before, .close-all:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 2px;
  background-color: #737373;
}

.close-all:before {
  transform: rotate(45deg);
}

.close-all:after {
  transform: rotate(-45deg);
}

.front-recipe-card-close{
	top: 0;
}

.selection-tab-button{
	width: 45%;
	margin: auto;
	padding: 4px;
	margin-top: 20px;
	background-color: #907763;
	color: black;
	border-radius: 40px;
	border: 1px solid rgb(70, 70, 70);
	font-size: 1.25em;
	cursor: pointer;
}



.recipe-card-garnish-btn{
	margin-top: 15%;
}

.recipe-card-rim-btn{
	margin-top: 0;
}



/********* Selection Tab END ******/


/******** INGREDIENT SELECTION MODULE *******/

.ingredient-search-bar-container{
	/*display: flex;*/
	display:  none;
	height: 36px;
	border-bottom: 1px solid #444444;
	background-color: rgb(22, 21, 21);
}

.search-bar-input{
	height: 26px;
	width: 99%;
	margin: auto;
	color: #6c6c6c;
	border-radius: 35px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;	
	margin: 4px;
}

input#search-ingredient {
	background-image: url("data:image/svg+xml;utf8,<svg height='90%' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='100%' xmlns:vectornator='http://vectornator.io' version='1.1' viewBox='0 0 200 200'><g id='Layer 1' vectornator:layerName='Layer 1'><path stroke='#000000' stroke-width='2.6' d='M-20.2148+102.979C-20.2148+102.952-20.193+102.93-20.166+102.93C-20.1391+102.93-20.1172+102.952-20.1172+102.979C-20.1172+103.005-20.1391+103.027-20.166+103.027C-20.193+103.027-20.2148+103.005-20.2148+102.979Z' fill='none' stroke-linecap='round' opacity='1' stroke-linejoin='round'/><path stroke='#383838' stroke-width='16.2796' d='M16.7539+90.2212C16.7539+50.3699+48.82+18.064+88.3755+18.064C127.931+18.064+159.997+50.3699+159.997+90.2212C159.997+130.073+127.931+162.378+88.3755+162.378C48.82+162.378+16.7539+130.073+16.7539+90.2212Z' fill='none' stroke-linecap='round' opacity='1' stroke-linejoin='round'/><path stroke='#383838' stroke-width='23.7349' d='M184.961+188.086L142.679+145.952' fill='none' stroke-linecap='round' opacity='1' stroke-linejoin='round'/></g></svg>");
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 5px 2px;
}

input#search-ingredient:focus{
	background-image: none;
}


.eye-icon {
  width: 17px;
  height: 17px;
  border: solid 1px #907763;
  border-radius:  75% 15%;
  position: relative;
  transform: rotate(45deg);
  cursor: pointer;
}
.eye-icon:before {
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border: solid 1px #907763;
  border-radius: 50%;
  left: 3.5px;
  top: 3.5px;
}

.progress-bar-eyecon{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: auto;
	pointer-events: auto;
	align-items: center;
	height: 100%;
	width: 50px;
}

.eye-con-container-on{
	display: flex;
}

.eye-con-container-off{
	display: none;
}

.ingredient-module-on{
	display: inline-flex;
	opacity: 1;
	-moz-transition: opacity 250ms;
  	-o-transition: opacity 250ms;
  	-webkit-transition: opacity 250ms;
  	transition: opacity 250ms;
}

.ingredient-module-off{
	display: none;
}

.ingredient-module-ghostMode{
	display: inline-flex;
	opacity: 0;
	-moz-transition: opacity 250ms;
  	-o-transition: opacity 250ms;
  	-webkit-transition: opacity 250ms;
  	transition: opacity 250ms;

}





.ingredient-picker-escape-bar{
	display: flex;
	position: fixed;
	width: 100%;
	background-color: #1b1b1b;
	height: 6%;
	min-height: 43px;
	z-index: 5;
	border-bottom: 1px solid #907763;
	top: 0;
	-moz-transition: top 175ms;
  	-o-transition: top 175ms;
  	-webkit-transition: top 175ms;
  	transition: top 175ms;
  	pointer-events: auto;

}

.escape-bar-off{
	top: -500px;
	-moz-transition: top 175ms;
  	-o-transition: top 175ms;
  	-webkit-transition: top 175ms;
  	transition: top 175ms;
}


.add-cross{
	position: absolute;
	bottom: 25px;
	right: 10px;
	margin: auto;
	width: 50px;
	height: 50px;
	opacity: .9;
	cursor: pointer;
	border: 2px solid #907763;
	border-radius: 24px;	
	background-color: rgb(10, 10, 10);
}


.add-cross:after{
	transform: rotate(90deg);
}

.add-cross:before{

}

.add-cross:before, .add-cross:after{
	position: absolute;
	content: '';
	height: 33px;
	margin-left: 15px;
	width: 2px;
	background-color: #907763;
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
}


.add-cross-lists{
	position: absolute;
	z-index: 30;
	bottom: 76px;
	right: 20px;
	margin: auto;
	width: 30px;
	height: 30px;
	opacity: .9;
	cursor: pointer;
	border: 2px solid rgb(68, 67, 67);
	border-radius: 24px;	
	background-color: rgb(10, 10, 10);
	transition: transform 0.3s ease-in-out;
}



.add-cross-lists:after{
	transform: rotate(90deg);
}

.add-cross-lists:before{

}

.add-cross-lists:before, .add-cross-lists:after{
	position: absolute;
	content: '';
	height: 20px;
	margin-left: 15px;
	width: 2px;
	background-color: rgb(70, 70, 70);
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
}


.add-cross-close{
	border: 2px solid #907763;
	transform: rotate(405deg);
}

.add-cross-close:before, .add-cross-close:after {
    background-color: #907763; 
}

.delete-symbol{
	position: absolute;
	bottom: 147px;
	right: 10px;
	margin: auto;
	width: 50px;
	height: 50px;
	opacity: .9;
	cursor: pointer;
	border: 2px solid #907763;
	border-radius: 24px;	
	background-color: rgb(10, 10, 10);
}


.delete-symbol:after{

}

.delete-symbol:before{

}

.delete-symbol:before, .delete-symbol:after{
	position: absolute;
	content: '';
	height: 33px;
	margin-left: 15px;
	width: 2px;
	background-color: #907763;
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transform: rotate(90deg);
}

.escape-x {
	margin: auto;
	width: 32px;
	height: 32px;
	opacity: .9;
	cursor: pointer;
	margin-bottom: 2%;
}

.escape-x:after{
	transform: rotate(-45deg);
}

.escape-x:before{
	transform: rotate(45deg);
}

.escape-x:before, .escape-x:after{
	position: absolute;
	content: '';
	height: 33px;
	margin-left: 15px;
	width: 2px;
	background-color: #907763;
}

.escape-x-selection-stage{
	top: 3px;
	right: 10px;
	position: absolute;
	-moz-transition: right 175ms;
  	-o-transition: right 175ms;
  	-webkit-transition: right 175ms;
  	transition: right 175ms;
}

.ingredient-back-btn{
	margin: auto;
	left: 15px;
	width: 19px;
	height: 19px;
	top: 10px;
	position: absolute;
	transform: rotate(-45deg);
	border-top: 2px solid #907763;
	border-left: 2px solid #907763;
	cursor: pointer;
}




.ingredient-back-btn-on{
	display: block;
}

.ingredient-back-btn-off{
	display: none;
}

.ingredient-picker-container{
	position: fixed;
	z-index: 3;
	min-width: 100%;
	
	justify-content: space-evenly;
	align-items: center;
	left: 0;
	right: 0;
	top: 0;
	/*bottom: 43px;*/

	height: 100%;

	background-color: rgb(69, 69, 69);
}



.ingredient-nav-header-spacer{
	height: 6%;
	min-height: 43px;	
	position: relative;
}

.ingredient-search-bar-container-2{
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: black;
	z-index: 3;
	border-bottom: 1px solid rgb(102, 102, 102);
	bottom: 0px;
	transition: bottom 0.2s ease-out;
}

.show-ingredient-search{
	bottom: -150%;
}

.search-ingredient-screen{
	height: 100%;
	/* background-color: rgba(0, 0, 0, 0.62); */
	background-color: rgba(52, 52, 52, 0.73);
	z-index: 2;
	position: absolute;
	left: 0;
	right: 0;	
}

.search-bar-ingredient-input-2{
	color: #907763!important;
	/* position: relative;
    display: flex;
    align-items: center; */
}

.search-imbiblia-bar-2{
	z-index: 3;
	text-align: center;
}

.returned-ingredients-query-container{

	
	position: relative;
}

.returned-ingredients-scrollable-list{
	background-color: rgb(15, 15, 15);
	width: 90%;
	margin: auto;
	margin-top: 6px;
	border-left: 1px solid #907763;
	border-right: 1px solid #907763;
	padding-left: 5px;
	padding-right: 5px;
	border-bottom: 1px solid #907763;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	max-height: 37vh;	
	overflow-y: scroll;
}

.ingredient-query-list-fade-out{
	width: 89%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	height: 20%;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
	pointer-events: none;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;	
}

.search-ingredient-item{
	color: #907763;
	text-align: left;

}

.ingredient-search-query-item-img{
	width: 21px;
}

.search-ingredient-item-type{
	text-align: right;
	padding-right: 10px;
}

.no-ingredient-contact-blub{
	margin: auto;
	width: 90%;
	margin-top: 10px;
	background-color: black;
	padding: 8px;
	border: 1px solid #907763;
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	height: 74px;
	text-align: center;
	justify-content: space-evenly;
}

.no-ingredient-contact-container-1{
	color: grey;
	padding-bottom: 7px;
}

.no-ingredient-contact-container-2{

}


.ingredient-request-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
  }
  
  .ingredient-request-modal {
	background: black;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	border: 1px solid #907763;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .ingredient-request-modal-header {
	padding: 15px 20px;
	border-bottom: 1px solid #907763;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .ingredient-request-modal-header h3 {
	margin: 0;
	color: #ac8260;
  }
  
  .ingredient-request-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
  }
  
  .ingredient-request-modal-content {
	padding: 20px;
  }
  
  .ingredient-request-modal-input {
	width: 100%;
	min-height: 100px;
	padding: 10px;
	border: 1px solid #907763;
	border-radius: 4px;
	resize: vertical;
	background-color: rgb(40, 40, 40);
	color: white;
  }
  
  .ingredient-request-modal-footer {
	padding: 15px 20px;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: flex-end;
  }
  
  .ingredient-request-modal-submit {
	background-color: #907763;
	color: black;
	border: none;
	padding: 8px 20px;
	border-radius: 4px;
	cursor: pointer;
  }

  .ingredient-request-modal-message{
	margin: 13px 22px 5px 22px;
	color: #8b8b8b;
  }
  
  .ingredient-request-modal-submit:disabled {
	background-color: #ccc;
	cursor: not-allowed;
  }

  .ingredient-request-modal-submit.success {
	background-color: #28a745;
	cursor: default;
  }
  
  .ingredient-request-modal-close:disabled,
  .ingredient-request-modal-input:disabled,
  .ingredient-request-modal-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
  }  

.initate-need-ingredient{
	margin: auto;
	background-color: #907763;
	width: 60px;
	border-radius: 2px;
	color: black;
	padding: 3px;	
}

.initate-need-ingredient:active{
	background-color: rgb(64, 63, 63);
}

.elastic-container{
	position: fixed;
	right: 0;
	left: 0;
	/* bottom: 145px; */
	bottom: 0px;
	top: 6%;

}




.type-tab{
	display: flex;
	flex-direction: column;
	height: 100%;
}


.tab-wrapper{
	min-width: 100%;
	width: 100%;
	margin: 0 auto;
	/* margin-top: 1px; */
	height: 100%;
	background-color: rgb(50, 50, 50);
}

.tabs-container{
	/*position: relative;*/
	/*margin: auto;*/
	width: 100%;
	/* margin-bottom: 2px; */
	display: flex;
	height: 100%;
	border-bottom: 8px solid #907763;
}


.tab-quantity-display-empty{
	background-color: rgb(54, 54, 54);
	width: 34%;
	height: 22px;
	padding-left: 5px;
	color: rgb(213, 213, 213);
	line-height: 20px;
	border-radius: 16px;
	border: 1px solid black;
	margin: auto;
	margin-top: 4%;
	margin-bottom: 3%;
}


.tab-quantity-display{
	width: 100%;
	min-height: 22px;
	text-align: center;
	padding-left: 5px;
	line-height: 20px;
	border-radius: 16px;
	margin: auto;
	margin-top: 4%;
	margin-bottom: 3%;
}


.tab-ingredient-display{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-bottom: 16%;	
}


@keyframes missingInfoShadow   {
  0%{box-shadow: 0px 0px 20px rgb(38, 38, 38);}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px rgb(38, 38, 38);}
}

@-webkit-keyframes missingInfoShadow   {
  0%{box-shadow: 0px 0px 20px rgb(38, 38, 38);}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px rgb(38, 38, 38);}
}

@keyframes missingInfoColor   {
	0%{color:  white;}
	50% {color: black;}
	100% {color:  white;}
  }

@-webkit-keyframes missingInfoColor   {
	0%{color:  white;}
	50% {color: black;}
	100% {color:  white;}
  }

@keyframes missingInfoBackground   {
	0%{background-color:  rgb(54, 54, 54);}
	50% {background-color: #907763;}
	100% {background-color:  rgb(54, 54, 54);}
  }
  

@-webkit-keyframes missingInfoBackground   {
	0%{background-color:  rgb(54, 54, 54);}
	50% {background-color: #907763;}
	100% {background-color:  rgb(54, 54, 54);}
  }
  
  

@keyframes missingInfoShadowGoBack   {
  0%{box-shadow: 0px 0px 20px #907763;}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px #907763;}
}

@-webkit-keyframes missingInfoShadowGoBack   {
  0%{box-shadow: 0px 0px 20px #907763;}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px #907763;}
}

.missing-info-flash{
  
  animation-name: missingInfoShadow, missingInfoBackground, missingInfoColor;
  animation-duration: 2s, 2s, 2s;
  animation-iteration-count: infinite, infinite, infinite;
}

.missing-info-flash-tab-not-selected{
  animation-name: missingInfoShadowGoBack;
  animation-duration: 1s;
  animation-iteration-count: infinite;	
}


.tab-tip-container{
	display: flex;
	background-color: #1b1b1b;
	width: 100%;
	height: 106px;
	position: fixed;
	bottom: 45px;
	justify-content: space-between;
	border-top: 6px solid #907762;
}


.search-ingredient-icon-container{
	color: #907763;
	position: absolute;
	right: 15px;
	top: -76px;
	background-color: black;
	border: 1.5px solid #907763;
	width: 59px;
	height: 59px;
	display: flex;
	justify-content: center;
	border-radius: 50%;
}

.search-ingredient-icon-container:active{
	background-color: rgb(36, 36, 36);
}

.search-ingredient-icon{
	width: 38px;
}



.tab-tip{
	border-top: none;
	width: 34%;
	text-align: center;
	letter-spacing: 5px;
	cursor: pointer;
	font-size: .8em;
	margin-top: 0;
	padding-top: 9px;
	padding-bottom: 12px;
	background-color: #1b1b1b;
	/*
	use this one for when the quant/ingredient/add btn are valid entries and ready to go
	background-color: rgb(17, 17, 17);
	*/
}

.missing-ingredient-component{
	height: 46px;
	margin: auto;
	width: 46px;
	/* text-align: center; */
	display: flex;
	flex-direction: column;
	/* vertical-align: middle; */
	justify-content: space-evenly;
	border: 1px dotted #907763;
	border-radius: 33px;
	margin-top: 5px;
}

.tab-question-mark-highlighted{
	border: 1px dotted black;
}

.tab-question-mark-not-highlighted{
	border: 1px dotted #907763;
}

.missing-ingredient-component-content{
	padding-left: 4px;	
}


.tab-tip-selected-on{
	background-color: #907763;
	color: black;
	font-weight: bolder;
	text-transform: uppercase;
	/*border-top: 2px solid rgba(80, 80, 80, 0.72);*/
	/*border-style: dashed solid solid solid;*/



}

.tab-tip-selected-off{
	background-color: #1b1b1b;
	color: grey;
	font-weight: lighter;
	text-transform: uppercase;
	border-right: 1px dashed #907763;

}

.tab-tip-selected-off:active{
	background-image: none;
	background-color: #1b1b1b;
	color: #907763;
}


.liquid-tab{

}

.quant-types-selection-container{
	position: relative;
	height: 100%;
	width: 100%;
	background-color: rgb(43, 43, 43);
	overflow: scroll;
	border-right: 1px solid #907763;
	border-bottom: 1px solid rgb(43, 43, 43);
	overflow-x: hidden;
}

.quant-choices-selection-container{
	height: 100%;
	width: 100%;
	background-color: rgb(43, 43, 43);
	overflow: scroll;
	border-left: 1px solid #907763;	
	overflow-x: hidden;

}

.column-container{
	position: relative;
	width: 50%;
}

.left-column-container{
	border-right: 1px solid #907763;
	border-left: 1px solid rgb(69, 69, 69);
}

.right-column-container{
	border-left: 1px solid #907763;
	border-right: 1px solid rgb(69, 69, 69);
}

.ingredient-module-column{
	position: relative;
	height: 100%;
	width: 100%;
	background-color: rgb(37, 37, 37);
	overflow: scroll;
	
	
	border-bottom: 1px solid rgb(43, 43, 43);
	overflow-x: hidden;
	padding-bottom: 200px;
}

body.inverted-mode .ingredient-module-column{
	background-color: rgb(244, 225, 192);
}


.selection-list-ingredient-name{
	display: table-cell;
	width: 100%;
	vertical-align: middle;
}


.search-list-dropdown-on{
	display: block;
	position: absolute;
	z-index: 999;
	max-height: auto;
	width: 100%;
	background-color: rgba(36, 36, 36, 0.86);
	-moz-transition: max-height 5s;
	-ms-transition: max-height 5s;
	-o-transition: max-height 5s;
	-webkit-transition: max-height 5s;
	transition: max-height 5s;	
	box-shadow: 0 13px 11px 0 rgb(24, 24, 24);	
}

.search-list-dropdown-off{
	display: block;
	max-height: 0%;
	position: absolute;
	z-index: 999;
	width: 100%;
	background-color: rgba(36, 36, 36, 0.86);	
	-moz-transition: max-height 0s;
	-ms-transition: max-height 0s;
	-o-transition: max-height 0s;
	-webkit-transition: max-height 0s;
	transition: max-height 0s;	
}


.search-list-exit-box-on{
	height: 100%;
	display: block;
	background-color: rgba(14, 14, 14, 0.63);
	width: 100%;
	position: absolute;
	z-index: 998;	
	cursor: pointer;
}


.search-list-exit-box-off{
	display: none;
}

.search-item{
	padding: 7px 0px 7px 15px;
	/* border-style: dotted solid double dashed; */
	border-bottom: 1px dashed rgb(51, 51, 51);	
	cursor: pointer;
}

.search-item:hover{
	background-color: rgb(54, 54, 54);
}

.parent-column-item{
	position: relative;
}

.parent-column-header{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	/* color: grey; */
	color: grey;
	background-image: linear-gradient(to right, #907763 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 5px .5px;
	background-repeat: repeat-x;
	background-color: rgb(29, 29, 29);
}


.ingredient-stack-back-link{
	width: 73%;
	margin: auto;
	margin-top: 3%;
	padding: 10px;
	background-color: rgb(46, 46, 46);
	border: 1px solid #907763;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
	position: relative;
}

.ingredient-stack-back-link-text{
	text-align: center;
	font-size: .9em;
}

.ingredient-stack-back-link:active {
	background-color: #1b1b1b;
}


.ingredient-stack-back-link-back-arrow{
	margin: auto;
	left: 8px;
	top: 12px;
	width: 14px;
	height: 14px;
	position: absolute;
	transform: rotate(-45deg);
	border-top: 1px solid rgba(144, 119, 99, 0.64);
	border-left: 1px solid rgba(144, 119, 99, 0.64);
	cursor: pointer;
}



.ingredient-stack-selected-item-in-parent-column{
	position: relative;
	background-color: #907763;
	font-size: 1.2em;
	letter-spacing: 3px;
	opacity: 1;
	padding-top: 12px;
	color: black;
	text-transform: lowercase;
	font-weight: 700;
	cursor: pointer;
	padding-bottom: 12px;
	position: relative;
	display: table;
	vertical-align: middle;
	width: 100%;
	margin-top: 3%;
	text-align: center;
}

.parent-item-spacer{
	width: 1px;
	border: .5px solid rgb(88, 88, 88);
	height: 2%;
	margin: auto;
	margin-top: 4px;
	border-radius: 5px;
}

.add-to-db-form-container{
	margin: auto;
	padding: 3px;
	padding-top: 45px;
	height: 80%;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.db-ingredient-input-form-item{
	flex: 1;
}

.db-admin-input-btn{
	cursor: pointer;
	width: 50%;
	margin: auto;
	border: 1px solid #907763;
	padding: 6px;
	border-radius: 3px;
	background-color: rgb(40, 40, 40);
}

.door-container{
	display: flex;
	position: relative;
	height: 100%;
	min-width: 100%;
	left: 0px;
	right: 0px;
	top: 0;
	bottom: 0;
	justify-content: space-evenly;
	pointer-events: none;
}

.door-container-closed{
	left: -100%;
	right: -100%;
	/* min-width: 1000px; */
}

.ingredient-portal-container{
	pointer-events: none;
	position: absolute;
	height: 100%;
	z-index: 6;
	min-width: 100%;
	justify-content: space-evenly;
	align-items: center;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.ingredient-portal-container-active{
	/*pointer-events: auto;*/
}


/* @-moz-keyframes close { 
	100% { -moz-transition min-width: 10000px; } 
	50% { -moz-transition min-width: 5000px; } 
	0% { -moz-transition min-width: 0px; } 
}
@-webkit-keyframes close { 
	100% { -moz-transition min-width: 10000px; } 
	50% { -moz-transition min-width: 5000px; } 
	0% { -moz-transition min-width: 0px; } 
}

@keyframes close  {
	100% { -webkit-transition: min-width: 10000px; } 
	50% { -moz-transition min-width: 5000px; } 
	0% { -moz-transition min-width: 0px; } 
}



@-moz-keyframes open { 
	100% { -moz-transition min-width: 0px; } 
	50% { -moz-transition min-width: 5000px; } 
	0% { -moz-transition min-width: 10000px; } 
}
@-webkit-keyframes open { 
	100% { min-width: 0px; } 
	50% {  min-width: 5000px; } 
	0% {  min-width: 10000px; } 
}

@keyframes open  {
	100% { -webkit-transition: min-width: 0px; } 
	50% { -moz-transition min-width: 5000px; } 
	0% { -moz-transition min-width: 10000px; } 
} */


@-webkit-keyframes close { 
    100% { min-width: 10000px; } 
    50% { min-width: 5000px; } 
    0% { min-width: 0px; } 
}

@keyframes close {
    100% { min-width: 10000px; } 
    50% { min-width: 5000px; } 
    0% { min-width: 0px; }
}

@-webkit-keyframes open { 
    100% { min-width: 0px; } 
    50% { min-width: 5000px; } 
    0% { min-width: 10000px; } 
}

@keyframes open {
    100% { min-width: 0px; } 
    50% { min-width: 5000px; } 
    0% { min-width: 10000px; }
}

.door-open{
	min-width: 20px;
	height: 1px;
	background-color: none;
	height: 100%;
	pointer-events: none;
    -webkit-animation:open 75ms linear;
 	-moz-animation:open 75ms linear;
	animation:open 75ms linear;  
	pointer-events: none;
}

.door-closed{
	min-width: 0px;
	-webkit-animation:close 75ms linear;
 	-moz-animation:close 75ms linear;
	animation:close 75ms linear;  
}

.ingredient-picker-door{
	height: 100%;
	min-width: 50%;
	max-width: 50%;
	color: #907763;
	display: flex;
	font-size: 2.1em;
	font-weight: 600;
	text-align: center;
	justify-content: space-evenly;
	align-items: center;
	background-color: #272727;
	pointer-events: auto;
}

body.inverted-mode .ingredient-picker-door{
	background-color: rgb(244, 225, 192);
}

.ingredient-picker-door:active{
	background-color: #191919;
}

.ingredient-picker-door-solid{
	border-right: 1px solid #907763;
}

.ingredient-picker-door-liquid{
	border-left: 1px solid #907763;
}


.ingredient-progress-bar{
	display: flex;
	justify-content: space-around;
	position: fixed;
	width: 100%;
	background-color: #1b1b1b;
	color: #9077631a;
	height: 43px;
	z-index: 6;
	bottom: 0;
	border-top: 1px solid #907763;
	-moz-transition: bottom 175ms;
  	-o-transition: bottom 175ms;
  	-webkit-transition: bottom 175ms;
  	transition: bottom 175ms;
	-moz-transition: height 175ms;
  	-o-transition: height 175ms;
  	-webkit-transition: height 175ms;
  	transition: height 175ms;	
}

.progress-bar-selection-process{
	bottom: -50px;	
	-moz-transition: bottom 175ms;
  	-o-transition: bottom 175ms;
  	-webkit-transition: bottom 175ms;
  	transition: bottom 175ms;
}


.progress-bar-off{
	bottom: -50px;	
	-moz-transition: bottom 175ms;
  	-o-transition: bottom 175ms;
  	-webkit-transition: bottom 175ms;
  	transition: bottom 175ms;
}


.progress-bar-selected-item{
	color: white;
	margin: auto;
	padding: 0px 10px 0px 10px;
}


.ingredient-progress-bar-inner-container{
	display: flex;
	width: auto;
	margin: auto;
}

.submit-btn-tab{
	display: flex;
}

.submit-ingredient-btn{
	margin: auto;
	padding: 6px 5% 10px 5%;
	width: 90%;
	height: 98%;
	border-radius: 5px;
	color: rgb(115, 115, 115);
	background-color: rgb(59, 58, 58);
	border: 1px dashed #595959;
	right: -200px;
	-moz-transition: right 175ms;
	-o-transition: right 175ms;
	-webkit-transition: right  175ms;
	transition: right  175ms;
	pointer-events: auto;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding-bottom: 7%;

}

@keyframes nextSessionShadow   {
  0%{box-shadow: 0px 0px 20px rgb(152, 152, 152);}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px rgb(152, 152, 152);}
}

@-webkit-keyframes nextSessionShadow   {
  0%{box-shadow: 0px 0px 20px rgb(152, 152, 152);}
  50% {box-shadow: none;}
  100% {box-shadow: 0px 0px 20px rgb(152, 152, 152);}
}

.submit-ingredient-btn-active{
	background-color: black;
	border: 1px solid #907763;
	color: rgb(90, 177, 199);	
    -webkit-box-shadow: 0 0 5px 2px rgb(90, 177, 199);
    -moz-box-shadow: 0 0 5px 2px rgb(90, 177, 199);
    box-shadow: 0 0 5px 2px rgb(90, 177, 199);

/*animation-name: nextSessionShadow;
animation-duration: 2s;
animation-iteration-count: infinite;*/
}

.submit-ingredient-btn-warning-message{
	border: 1px solid rgb(107, 0, 0);
	color: rgb(90, 177, 199);
	-webkit-box-shadow: 0 0 5px 2px red;
	-moz-box-shadow: 0 0 5px 2px red;
	box-shadow: 0 0 5px 2px red;
	background-color: black;
	color: rgb(255, 167, 167);	
}

.submit-ingredient-arrow{
	right: 10px;
	width: 14px;
	height: 14px;
	top: 14.5px;
	position: absolute;
	transform: rotate(135deg);
	border-top: 2px solid #907763;
	border-left: 2px solid #907763;
	cursor: pointer;
}

.submit-ingredient-arrow-shaft{
	display: block;
	height: 2px;
	width: 25px;
	margin-top: 20.5px;
	background-color: #907763;
	margin-left: 9px;
}



.door-opening{
/*	height: 1%;
	display: block;*/
	/* min-width: 100%; */
	-moz-transition: min-width 75ms;
  	-o-transition: min-width 75ms;
  	-webkit-transition: min-width 75ms;
  	transition: min-width 150ms;
  	pointer-events: none;
}

.door-opening-closed{
	min-width: 0px;
	-moz-transition: min-width 75ms;
  	-o-transition: min-width 75ms;
  	-webkit-transition: min-width 75ms;
  	transition: min-width 75ms;
  	pointer-events: none;

}



.selection-choice{
	font-size: .75em;
	opacity: 1;
	padding-left: 13px;
	padding-top: 12px;
	color: #907763;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	padding-bottom: 12px;
	position: relative;
	vertical-align: middle;
	width: 100%;
	height: 4vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.inverted-mode .selection-choice{
	color: black;
}

.ingredient-expansion-arrow{
	right: 15px;
	width: 19px;
	height: 19px;
	top: 14px;
	position: absolute;
	transform: rotate(135deg);
	border-top: 2px solid #2b2b2b;
	border-left: 2px solid #2b2b2b;
	cursor: pointer;
	display: none;
}

.ingredient-expansion-arrow-on{
	display: block;
}





.show-child-column-off{
	display: none;
}

.show-child-column-on{
	display: block;
	margin-bottom: 200px;
}

.selection-choice-cage{
	position: relative;
}


.expansion-arrow-cage{
	display: none;
	position: absolute;
	height: 90%;
	width: 38%;
	margin: auto;
	padding-left: 15px;

	font-size: .75em;
	color: rgb(138, 138, 138);
	right: 0;
	background-color: rgb(36, 36, 36);
	top: 0;
	bottom: 0;
	cursor: pointer;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	background-color: none;
	-webkit-transition: background-color 250ms;
	-moz-transition: background-color 250ms;
	-o-transition: background-color 250ms;
	transition: background-color 250ms;
}




.arrow-cage-on{
	display: flex;
	flex-direction: column;
	justify-content: space-around;

}

.arrow-cage-on:active {
	background-color: rgb(0, 0, 0);
	color: #907763;
}


   @keyframes arrow-cage-loading {
	0% {
	  background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
  }
  
  .arrow-cage-loading {
	background: linear-gradient(90deg, rgba(144, 118, 99, 0.5) 50%, rgba(144, 118, 99, 0) 50%);
	background-size: 200% 100%;
	animation: arrow-cage-loading 2s infinite;
	background-color: rgb(28, 28, 28);
	color: rgb(80, 80, 80);
  }




.selection-unit-selected{
	background-color: #907763;
	color: black;
}

@keyframes pulseBackground {
	0% {
	  background-color: rgb(107, 0, 0);
	}
	50% {
	  background-color: #ff7f7f;
	}
	100% {
	  background-color:rgb(107, 0, 0);
	}
  }
  
  @keyframes pulseColor {
	0% {
	  color: rgb(255, 199, 199);
	}
	50% {
	  color: rgb(255, 239, 239);
	}
	100% {
	  color: rgb(255, 199, 199);
	}
  }
  
  .selection-unit-selected-warning {
	animation: pulseBackground 2s infinite, pulseColor 2s infinite;
  }

  @keyframes flashGodModeColor {
	0% {
	  color: rgb(75, 75, 75);
	}
	50% {
	  color: #907763;
	}
	100% {
	  color: rgb(75, 75, 75);
	}
  }
  

.selection-unit-muted{
	color: rgb(75, 75, 75);
	font-style: italic;
}

.selection-unit-muted-god-mode {
	color: rgb(75, 75, 75);
	font-style: italic;
	animation: flashGodModeColor 2s infinite; 
  }


.selection-quant-num{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.unit-disclaimer{
	font-size: 1.2em;
	color: rgb(138, 138, 138);
	margin: auto;
	max-width: 300px;
	padding-top: 10px;
	font-style: italic;
	padding-left: 9px;
	padding-right: 8px;
	margin-top: 179px;
}

.quant-lead-num{
	font-size: 1.7em;
	padding-right: 26px;
}


.easter-dash{
	font-size: .5em;
}


.quant-solitary-num{
	font-size: 2em;

}

.float-go-back{
	padding-top: 73px;
}


.float-selection-parent{
	text-align: center;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 1em;
	background-color: #3e3e3e;

	opacity: 1;
	padding-top: 3%;
	color: #907763;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	padding-bottom: 12px;
	display: table;
	vertical-align: middle;	
	width: 100%;
}

.float-selection{
	text-transform: none;
	font-size: 1.5em;
	cursor: pointer;
}

.float-selection:active{
	color: #ecc5a5;
}


.float-quant-selecting{
	background-color: #3e3e3e;
	text-transform: uppercase;
	color: #7e7e7e;
	border-top: 1px solid #715d4d;
	border-bottom: 1px solid #715d4d;
}

.float-how-much{
	font-size: .7em;
	padding-top: 10px;
	padding-bottom: 10px;
}

.float-disclaimer{
	margin-top: 20px;
	font-size: .65em;
}

.float-quant-selected{
	border-top: .5px solid #907763;
	border-bottom: .5px solid #907763;
	background-color: #111111;
	color: black;
	color: #907763;
}


.choose-units-arrow-parent{
	margin: auto;
	position: relative;
	margin-top: 15px;
	width: 52%;
	max-width: 700px;
	margin-bottom: 11px;
}


.choose-units-arrow{
	width: 21px;
	left: 11px;
	height: 21px;
	top: -9.5px;
	position: absolute;
	transform: rotate(-45deg);
	border-top: 2px solid #907763;
	border-left: 2px solid #907763;
	cursor: pointer;
}

.choose-units-shaft{
	display: block;
	height: 2px;
	width: 100%;
	margin-top: 20.5px;
	background-color: #907763;
	margin-left: 9px;
}


.float-whoops-btn{
	width: 85%;
	margin: auto;
	text-align: center;
	font-size: .75em;
	padding: 10px;
	padding-bottom: 15px;
	border: 1px solid #907763;
	border-radius: 4px;
	cursor: pointer;
	background-color: #3e3e3e;
	bottom: 16px;
	right: auto;
	left: auto;
	left: 0;
	right: 0;
}

.smoke-selection-parent{
	padding-bottom: 0px;
}


.smoke-selection-on{
	background-color: #907763;
	color: black;
}

.smoke-target-selecting{
	background-color: black;
	color: #907763;
}

.smoke-selection-title{
	padding-bottom: 10px;
}



/****** Ingredient Selection Modeule END ****/


/******** GOD MODE **********/


.exit-db-input{
	width: 30px;
	height: 30px;
	position: absolute;
	right: 26px;
	top: 7px;
	cursor: pointer;
}

.escape-x-db-input{
	margin-left: -32px;
}

.db-ingredient-input-screen{
	position: absolute;
	display: none;
	z-index: 99;
	width: 94%;
	height: 98%;
	background-color: rgb(25, 25, 25);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 11px;
	text-align: center;
	border: 1px solid#404040;
}


.db-input-screen-on{
	display: block;
}



.show-list-off{
	display: none;
}

.show-list-on{
	display: block;
	position: absolute;
	background-color: rgb(28, 28, 28);
	height: 100%;
	width: 100%;
	top: 0;
	border: 1px solid #907763;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 9px;
}


.db-parent-list-scroll-container{
	background-color: black;
	width: 93%;
	margin: auto;
	margin-top: 11px;
	overflow: auto;
	height: 88%;
	border-radius: 5px;
}


.db-parent-list-item{
	padding: 5px;
	cursor: pointer;
}


.inner-db-parent-list-item-container{
	width: 100%;
	padding: 7px;
	padding-left: 36%;
	display: flex;
	justify-content: space-between;
	margin: auto;
	text-align: left;
	font-size: 1.5em;
}


.db-add-list-parent-selected{
	background-color: #907763;
}


.other-parent-preview-box{
	max-height: 40px;
	overflow: scroll;
	margin: auto;
}


.god-mode-change-btn{
	position: absolute;
	bottom: 80px;
	right: 10px;
	margin: auto;
	width: 50px;
	height: 61px;
	opacity: .9;
	cursor: pointer;
	vertical-align: middle;
}

.edit-ingredient-btn-god-mode{
	cursor: pointer;
	display: table-cell;
	vertical-align: middle;
}


.dbl-check-delete-screen-off{
	display: none;
}

.dbl-check-delete-screen-on{
	display: block;
	position: absolute;
	z-index: 999;
	width: 80%;
	height: 80%;
	background-color: red;
	color: white;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 11px;
	text-align: center;
	border: 1px solid#404040;
}




/******** GOD MODE END ********/










/****** Profile Page *******/


.stat-title{
	color: rgb(106, 106, 106);
}

.profile-stat-num{
	color: #907763;
	margin-right: 5px;
}

.profile-stat-container{
	display: flex;
}

.profile-library-container{
	padding-top: 20px;
}

.claim-account-msg-container{
	position: absolute;
	text-align: center;
	height: 100%;
	width: 100%;
	background-color: rgba(47, 47, 47, 0.56);
	z-index: 1;
}

.claim-account-msg{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 100px;
	width: 50%;
	background-color: rgb(255, 106, 106);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: black;
	padding: 8px;
}

.profile-content-container{
	margin-bottom: 200px;
}

.profile-banner{
	height: 160px;
	width: 100%;
	background-color: #3e3e3e;
	position: relative;
}

.profile-user-stats-container{
	position: relative;
}


.profile-user-img{
	height: 74px;
	width: 74px;
	padding: 2.5px;
	border: 3px solid #907763;
	border-radius: 50px;
	background-color: black;
}

.profile-user-img-xtra-border{
	height: 84px;
	width: 84px;
	border: 5px solid #181818;
	border-radius: 50px;
	top: -87px;
	left: 2%;
	position: absolute;
}


.profile-page{
	position: relative;
}

.profile-user-stats{
	display: flex;
	justify-content: space-between;
	margin-top: 44px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 20px;
	border-bottom: 2px solid #292727;
}

.profile-follow-btn{
	padding: 5px;
	border-radius: 20px;
	border: 1px solid black;
	cursor: pointer;
}

.profile-build-btn-container{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.profile-build-btn{
	border: 1px solid #907763;
	color: #907763;
	display: flex;
	background-color: black;
}

body.inverted-mode .profile-build-btn{
	background-color: color(srgb 0.2982 0.2492 0.2328);
	color: color(srgb 0.7538 0.6266 0.5196);
}

.profile-build-btn:active{
	color: #826650;
	background-color: rgb(50, 49, 49);
}

.profile-build-btn-img{
	margin-right: 4px;
	margin-left: 3px;
	height: 23px;
	margin-top: -1px;
}

.not-following{
	padding-left: 26px;
	padding-right: 26px;
	background-color: #907763;
	color: black;
}

.following{
	padding-left: 14px;
	padding-right: 14px;
	background-color: black;
	color: #907763;
	border: 1px solid #907763;
}


.profile-options-container {
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1.5px solid #907763;
	flex-wrap: wrap;
  }
  
  .profile-option {
	flex: 1;
	cursor: pointer;
	color: #907763;
	transition: color 0.3s;
	width: 100%;
	text-align: center;
	padding: 4px;	
	/* flex-basis: 33.33%; */
	border-left: .5px dotted #907763;
  }

  body.inverted-mode .profile-option{
	border-left: 1px solid rgb(76, 64, 59);
  }
  
  .profile-option-container {
	display: none;
  }
  
  .profile-option-selected {
	display: block;
	color: black;
	background-color: #907763;
  }

  body.inverted-mode .profile-option-selected{
	background-color: #e7c9a4;
  }

  .profile-resume-container{
	  display: flex;
	  justify-content: space-evenly;
	  padding: 10px;

	  padding: 20px;
	  width: 98%;
	  margin: auto;
	  min-width: 300px;
	  max-width: 700px;	  
  }

  .edit-resume-btn{
	width: 26px;
  }

  .resume-headers{
  width: 100%; text-align: center;
  color: #907763;
  border-bottom: 1px solid #907763;
  padding-bottom: 3px;
  margin-bottom: 25px;
  }

  .resume-input{
	width: 100%;
	/* color: #6c6c6c; */
	color: #907763;
	border-radius: 5px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	/* padding-left: 29px;
	padding-right: 29px; */
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	max-width: 700px;	
	min-width: 100px;
  }

  resume-input-invalid{
	color:red;
  }

  .resume-add-delete-img{
	  width: 27px;
	  cursor: pointer;
  }

  .resume-item{
	  display: flex;
	  justify-content: space-between;
	  padding-top: 10px;
	  align-items: center;
  }

  body.inverted-mode .resume-item{
	color: black;
  }

  .resume-item > div{
	  display: flex;
	  align-items: center;
  }

  .resume-work-item{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 8px;
  }

  .resume-item-date{
	display: inline-flex;
	align-items: center;
	margin-left: auto;
  }

  .resume-del{
	margin-left: 10px;
	filter: invert(19%) sepia(33%) saturate(7387%) hue-rotate(351deg) brightness(110%) contrast(138%);	
  }

  .resume-input-container{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	width: 90%;
	padding-left: 2%;
	padding-right: 6%;	
  }

.closed-container{
	display: flex;
	justify-content: space-between;	
	overflow: hidden;
	max-height: 0;
	transition: max-height 1.5s ease;	
}

.closed-container > .resume-add-btn-container{
	display: flex;
	align-items: center;
}

  .expand-container{
	max-height: 500px;	
	/* animation: resume-options-dropdown-anim 5s; */
  }

  @media screen and (max-width: 768px) {
	.resume-input {
	  font-size: 12px; /* Adjust font size for smaller screens */
	}
  }


  .user-workplace{
	color: rgb(195, 195, 195);
	margin-top: 5px;
	margin-bottom: 5px;
  }

  .profile-bio{
	color: rgb(161, 161, 161);
	margin-bottom: 5px;
  }

  .user-handle{
	color: #dfb99a;
  }

body.inverted-mode .user-handle {
	color: #812600;
}

/****** End Profile Page ****/


/****** User  Options ******/

.user-options-container{
	position: absolute;
	right: 17px;
	top: 40px;
	background-color: rgb(29, 29, 29);
	border-radius: 50%;
	z-index: 3;
	width: 5.5vw;
	max-width: 40px;
	min-width: 30px;
	height: 5.5vw;
	max-height: 40px;
	min-height: 30px;
	cursor: pointer;
}

.user-options-icon{
	width: 100%;
	filter: brightness(.8)
}

.user-options-icon:hover{
	filter: brightness(1);
}


@keyframes gear-spin {
	from {transform:rotate(0deg);}
  	to {transform:rotate(-360deg);}
	
}

.user-options-icon-active{
	animation: gear-spin 1s;
	z-index: 9;
}

.user-options-dropdown{
	display: none;
	position: absolute;
	right: 5vw;
	top: 5vw;
	background-color: black;
	border-radius: 20px;
	z-index: 2;
	width: 60vw;
	max-width: 400px;
	height: 0px;
	cursor: pointer;
	overflow: hidden;
	transition: all .5s ease;
	border: 1px solid #2a2828;
	z-index: 8;
}

@keyframes user-options-dropdown-anim {
	from {height: 0px;}
  	to {height: 300px;}
} 
	

.user-options-dropdown-visible{
	position: absolute;
	display: block;
	transition: all .5s ease;
	height: 300px;
	animation: user-options-dropdown-anim .5s;
}

.user-options-dropdown-item{
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	color: rgb(93, 93, 93);
	font-size: 1em;
	font-weight: bolder;
	cursor: pointer;
	transition: all .5s ease;
}

.log-out-dropdown-item{
	position: absolute;
	border-top: 1px solid #2a2828;
	text-align: center;
	width: 100%;
	bottom: 0px;
	padding-bottom: 5px;
	background-color: black;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.user-options-dropdown-item:active{
	background-color: #907763;
	color: black;
	transition: all 0s ease;
}

.login-link{
	margin: auto;
	color: grey;
	margin-top: 3vh;
	text-align: center;
}

.login-link a{
	color: grey;
}

.auth-redirect-link{
	margin: auto;
	color: grey;
	margin-top: 3%;
	text-align: center;
}

.auth-redirect-link a{
	color: rgb(77, 77, 77);
}

/***** End User Options *****/





.tipple-book {
	font-family: 'Quicksand', sans-serif;
	color: 	#907763;
	font-size: 7.5rem;
    text-transform: uppercase;
    margin: 0;
    font-weight: 100;
}

body.inverted-mode .tipple-book{
	color: #bda28f;
}



.no-button{
	display: none;
}

.email-sign-up{
	background: none;
	color: inherit;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border: 1px solid #907763;
	background-color: #1d1d1d;
	border-radius: 35px;
	height: 24px;
	width: 24px;
	margin-left: -31px;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-top: -3px;
	display: inline;
}

.arrow-shaft{
	display: block;
	height: 1px;
	width: 13px;
	background-color: #907763;
	margin-left: 3px;
}

.arrow-tip{
	display: block;
	width: 7px;
	height: 7px;
	position: absolute;
	border-top: 1px solid #907763;
	border-right: 1px solid #907763;
	transform: rotate(45deg);
	margin-top: -4px;
	margin-left: 9px;
}

@media only screen and (max-width: 435px){
	.come-in{
		width: 45%;
		font-size: 1em;
	}

	.tipple-book{
		font-size: 2.25rem;
	}

	
}




.description {
	width: 65%;
	padding: auto;
	margin: auto;
	font-family: 'Montserrat', sans-serif;
	color: #6c6c6c;
	border-top: 1px solid #6c6c6c;
	border-bottom: 1px solid #6c6c6c;
	font-size: 1em!important;
}

.email-capture-input{
	width: 75%;
	color: #6c6c6c;
	border-radius: 35px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;

}

.email-capture-input::placeholder{
	color: #595959;
}

.register-container{
	width: 90%;
	max-width: 432px;
	margin: auto;
}

.register-contact-me{
	width: 90%;
	color:grey;
	margin: auto;
	text-align: center;
}


.register-title{
	text-align: center;
	margin-top: 8%;
	color: #6c6c6c;
	font-size: 1.2em;
	margin-bottom: 8px;
}

.register-error{
	display: none;
}

.register-error-on{
	display: block;
	margin: auto;
	color: red;
}

.input-no-cursor{
	caret-color: transparent;
}


.register-inputs::-webkit-input-placeholder { text-align:left; }
	/* mozilla solution */
input:.regsiterinputs -moz-placeholder { text-align:left; }


.register-landing-container{
	overflow: scroll;
	margin-bottom: 200px;
	-ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.register-landing-container::-webkit-scrollbar{
	display: none;
}

.register-inputs{
	width: 100%;
	/* color: #6c6c6c; */
	color: #907763;
	border-radius: 5px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 20px;
	max-width: 700px;
}

.register-inputs:focus {
	border: 1px solid #907763;  
  }

.register-capture{
	margin: auto;
	text-align: center;
	max-width: 700px;
}

.register-select{
	position: relative;
	font-size: 1rem;
	margin-top: 5px;
	margin-bottom: 35px;
	max-width: 700px;
}


 select {
	 -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; 
}


.arrow-tip-select{
	display: inline;
	width: 7px;
	height: 7px;
	position: absolute;
	border-top: 1px solid #907763;
	border-right: 1px solid #907763;
	transform: rotate(135deg);
	margin-top: 16px;
	margin-left: -25px;
}

.account-type-select{
	text-align: center;
}

.account-select-label{
	font-size: .9rem;
	color: #6c6c6c;
	max-width: 700px;
	padding-bottom: 5px;
}

.register-label{
	font-size: .9rem;
	color: #6c6c6c;
	text-align: center;
	padding-bottom: 5px;
}

.terms-and-agreements-container{
	display: none;
}

.terms-and-agreements-container-on{
	top: 3vh;
	display: block;
	color: rgb(187, 187, 187);
	width: 90%;
	max-width: 554px;
	margin: auto;
	position: fixed;
	z-index: 100000;
	left: 0;
	right: 0;
	background-color: black;
	padding: 10px;
	border: 1px solid grey;
	text-align: justify;
	height: 80%;
	overflow: scroll;	
}

.in-terms-link{
	color: grey;
	text-decoration: none;
}


.inner-terms-container{
	position: relative;
	height: auto;
	overflow: scroll;
	text-align: justify;
	font-size: .6em;
}

.submission-terms-options-container{
	display: flex;
	justify-content: space-around;
}
.submission-option-item{
	width: 30%;
	padding: 3px;
	background-color: #907763;
	color: black;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .8em;	
}

.submission-option-item-exit{
	background-color: red;
	color: white;
}

.canon-recipe-blurb{
	width: 80%;
	margin: auto;
	text-align: center;
	color: #907763;
	font-style: italic;
	font-size: .8em;
	margin-top: 50%;
}

.password-good{
	/* border-color: green; */
	border-color: #907763;
}

.password-no-match{
	border-color: red;
}



	/* width: 5%;
	float: left; */


.terms-label{
	float: left;
	color: grey;
	display: flex;
}

.terms-link{
	color: #907763;
	padding-left: 5px;
	cursor: pointer;
}

.register-page-terms-selector{
	text-align: left;
	float: left;
	padding-right: 10px;
}



.register-btn{
	background: none;
	color: rgb(79, 79, 79);
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border: 1px solid #353535;
	background-color: #262626;
	border-radius: 7px;
	height: 39px;
	width: 154px;
	margin-left: -27;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-top: auto;
	display: inline-flex;
	flex-direction: column;
	padding-top: 5px 10px 5px 10px;
	justify-content: space-evenly;
	padding: 5px 10px 5px 10px;
}



.in-terms-agree-btn{
	margin: auto;
	left: 0;
	right: 0;
	background: none;
	color: #907763;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border: 1px solid #907763;
	background-color: #262626;
	border-radius: 2px;
	height: 51px;
	width: 82%;
	margin-left: -27;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-top: auto;
	display: inline;
	padding-bottom: 0px;
	text-align: center;
	display: flex;
	margin: auto;
	position: relative;
	flex-direction: column;
	justify-content: space-around;
	margin-bottom: 50px;
}


.register-inputs-filled{
	color: #907763;
	border: 1px solid #907763;
	background-color: #252525;
	padding: 0px 0px 0px 0px!important;
	display: block;
	flex-direction: none!important;
	margin: auto;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border-radius: 7px;
	height: 39px;
	width: 154px;
	margin-left: -27;
	vertical-align: middle;	
}

.register-btn-submitting{
	background: none;
	color: rgb(62, 62, 62);
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border: 1px solid #353535;
	background-color: #262626;
	border-radius: 2px;
	height: 39px;
	width: 132px;
	margin-left: -27;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-top: auto;
	display: inline-flex;
	flex-direction: column;
	padding-top: 5px 10px 5px 10px;
	justify-content: space-evenly;
	padding: 5px 10px 5px 10px;
}



.first-taste{
	margin-top: 20vh;
	color: #6c6c6c;
	font-size: 1.2em;
	margin-bottom: 8px;
}



.alert-message-container{
	display: none;
	position: fixed;
	text-align: center;
	height: 100vh;
	width: 100%;
	top:0;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(47, 47, 47, 0.56);
	z-index: 9;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px); /* For Safari */	
}


.alert-msg{
	/* display: block; */
	/* position: absolute; */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	/* height: 205px; */
	width: 90%;
	max-width: 350px;
	background-color: rgb(255, 106, 106);
	border-radius: 20px;
	flex-direction: column;
	justify-content: space-evenly;
	color: black;
	padding: 16px;
}

.alert-msg-on{
	display: flex;
}

.alert-msg-good{
	background-color: #907763;
	color: black;
}

.alert-msg-danger{
	background-color: rgb(255, 106, 106);
	color: white;
}

.alert-subscriber-only{
	color: white;
	animation: fadeInColor 0.5s ease-in-out;
	background-color: rgba(0, 0, 0, 0.66);
	padding: 18px;
	border: 1px solid #907763;	
}

.message-screen-spinner{
	background-color: rgba(255, 255, 255, 0);
}

@media only screen and (max-width: 395px){
	.come-in{
		width: 50%;
		font-size: .75em;
	}

	.tipple-book{
		font-size: 1.8rem;
	}

	.description {
		font-size: .7em;
	}



	
}


@media only screen and (max-width: 650px){
	.come-in{
		width: 50%;
		font-size: 1em;
	}

	.tipple-book{
		font-size: 3.8rem;
	}

	.description {
		font-size: .8em!important;
	}

	.first-taste{
		font-size: .85em;
	}

	
}


@media only screen and (max-width: 340px){

	.tipple-book{
		font-size: 1.5rem;
	}	

	.description {
		font-size: .5em;
	}

	
}


.pie-container {
	width: 90%;
	height: 90%;
	margin: auto;
	padding-top: 2%;
}

#canvas-holder{
	margin: auto;
}

.glyph-canvas{
	width: 55%;
	height: auto;
	text-align: center;
	margin: auto;
	padding-top: .5rem;
	padding-bottom: .75rem;
}

.fadeIn{
	display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:auto;
}

li.show {

	/*height: 2em;*/
}

.fadeIn li{
	flex: 0;
  transition: all 1s ease-out;
  opacity: 0;
  /*height: 2em;*/
}

.fadeIn li.show{
	opacity: 1;	
}

.ingredient-list-item{

}

#item-input-form {
    position: absolute;
    bottom: 89px;
    left: 52px;
}

.ingredient{
	display: inline-flex;
    width: 90%;
    align-items: center;
    margin: 0 auto;
    flex-direction: row;
    justify-content: center;
    margin-top: .3em;
}

.ingredient-num{
	width: 20%;
}

.ingredient-name{
	width: 18%;
}


.branded-ingredient{
	/*color: #ff7d7d;*/
	color: #ffae8a;
	cursor: pointer;
	background-color: #323232;
	border-radius: 4px;
	padding-left: 2px;
	text-transform: capitalize;
	display: flex;
	justify-content: space-between;	
}

.branded-ingredient:active{
	color: white;
}

.ingredient-has-info-card{
	background-color: #323232;
}

.brand-search-icon-container{
	display: flex;
	align-items: center;
	margin-right: 4px;
}

.brand-search-icon-img{

}

@media only screen and (max-width: 850px) {
	.glyph-canvas{
		width:40%;
	}
}

.ingredient-input{
	width: 45%;
	margin: auto;
}

.ingredient-section{
	text-align: center;
	padding-top: 2rem;
	margin: auto;
	width: 90%;
}

.ingredient-box{
	/*height: 3em;*/
	vertical-align: middle;
	border-radius: 6px;
	background-color: initial;
	border: .5px solid #333333;
}

@media only screen and (max-width: 420px){
	.ingredient-box{
		width: 44%;
	}

	#item-input-form{
		left: 10px;
	}
}

.drink-recipe-title{
	font-family: "EngraversGothicBold W08 Rg" 'Quicksand', sans-serif;
	color: 	#907763;
	size: 1.5rem;
	text-align: center;
}

.glyph-page-title{
	text-align: center;
	font-family: 'Quicksand', sans-serif;
}


/*******************ADD INGREDIENT BTN***************/


* {
  box-sizing: border-box;
}



.open-close-button {
  display: inline-block;
  width: .5em;
  height: .5em;
  border: 0.05em solid #671c1e;
  /*margin: 2em 45%;*/
  font-size: 3em;
  border-radius: 50%;
  position: relative;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  vertical-align: middle;
}
.open-close-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #671c1e;
  width: 80%;
  height: 6%;
  left: 10%;
  top: 47%;
}



.open-close-button:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #671c1e;
  width: 6%;
  height: 80%;
  left: 47%;
  top: 10%;
}

.open-close-button.delete-btn:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #671c1e;
  width: 6%;
  height: 80%;
  left: 47%;
  top: 10%;

}

.open-close-button.open {
  background-color: transparent;
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -webkit-transform: rotate(-270deg);
  transform: rotate(-270deg)
}

.open-button {

}/*
.open-close-button.open:after {
  background-color: #C9353B;
}*//*
.open-close-button.open:before {
  background-color: #C9353B;
}*/

.open-close-button.delete-btn{
  margin-left: 1.1em;
  background-color: transparent;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.glyphicon{
	padding-left: 2rem;
}

.hide{
	opacity: .5;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;	
}



/*****************END INGREDIENT BTN*******************/


/*****************ingredient-title-section*************/


.ingredient-title-section{
	text-align: center;
	margin: auto;
	padding-top: .1em;
    padding-left: 5px;
}

.title-form{
	display: inline-flex;
	justify-content: space-between;
}

.title-form .button{
	padding-left: 1rem;
}

.ingredient-form{
	display: inline-flex;
	
}

.ingredient-form .button {
	padding-left: 1rem;
}

.list-title{
	text-align: center;
	font-size: 2rem;
}

@media only screen and (max-width: 321px) {
	.list-title{
		font-size: 1.7rem;
	}

	.main-container{
		padding-top: .7rem;
	}

	.bottom-container{
		font-size: 0.6em;
	}

	.list-adder, .card-creator {
		border: .5px solid #907763;
	}
}

.ingredient-list{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	list-style-type: none;
	text-align: center;
}

.item-part-separator{

}

.gimmie-space-to-work{
	height: 15rem;
}

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

/**** Whoof *****/

@keyframes pulse-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

.whoof{
	position: absolute;
	top: 0;
	bottom: 0px;
	right: 0px;
	left: 0px;
	margin: auto;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 150px;
	height: 200px;
	background-color: #907763;
	rotate: -18deg;
	z-index: 3;
	color: black;
	border-radius: 50%;
	animation: pulse-animation .5s infinite;
}

.no-whoof{
	display: none;
}

/**** End WHoof ***/

/********* Radial Menu **********/



.radial-menu {
	display: none;
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 70%;
	height: 200px;
	border: 2px solid #66574a;
	border-radius: 100% 4% 4% 4%;
	background-color: rgba(32, 32, 32, 0.93);
	transform-origin: 100% 100%;
	transform: rotate(90deg);	
	z-index: 3;
  }

  
/* .radial-menu{
	position: absolute;
	display: none;
	bottom: 0;
	right: 0;
	width: 100%;
	padding-bottom: 100%;
	background-color: rgba(27, 27, 27, 0.9);
	clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;	
} */


@keyframes swing {
	0% {
	  transform: rotate(90deg);
	}
	100% {
	  transform: rotate(0deg);
	}
  }
  
  
  .radial-menu.open {
	display: flex;
	animation: swing 0.15s ease-in-out forwards; 
  }
  
  .menu-item {
	position: absolute;
	text-align: center;
	/* width: 50px;
	height: 50px; */
	background-color: black;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;	
	z-index: 1;
	transform-origin: 50% 50%;
	border: 1px solid #907763;
  }

  .menu-item img {
	display: block;
	width: 50%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
  }

  
  .menu-item span {
	display: block;
	color: #b6b6b6;
	font-size: .7em;
  }

  .menu-item:active {
	background-color: #907763;
	border: 1px solid black;
  }

  .menu-item:active span {
	color: black;
  }

  .menu-item:active img {
	filter: brightness(0%);
  }

  .is-dogeared-menu-item{
	  background-color: #907763;
  }

  .is-dogeared-menu-item img{
	  filter: brightness(0%);
  }

  .is-dogeared-menu-item span{
	  color: black;
  }
  


  /* .menu-item img:active,
  .menu-item img:focus {
	filter: brightness(0%);
  } */
  
  .menu-item.origin {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	/* border-radius: 100% 0 15% 0;
	 */
	 border-top-left-radius: 100%!important;
	 border-top-right-radius: 0px;
	 border-bottom-right-radius: 15%;
	 border-bottom-left-radius: 0px;
	 border-top: 1px solid #907763;
	 border-left: 1px solid #907763;
	 border-bottom: 0px solid #907763;
	 border-right: 0px solid #907763;
  }

  .menu-item.origin:active {
	background-color: #907763;
  }

  .menu-item.origin img:active {
	filter: brightness(0%);
  }


  .radial-origin-inside{
	position: absolute;
	display: inline-block;
	right: 12%;
	bottom: 12%;
	width: 47%;
  }

  .radial-origin-inside img{
	width: 100%;
  }
  
  .radial-close-img{
	transform: rotate(45deg);
  }

  .line {
	position: absolute;
	width: 4px;
	height: 80%;
	background-color: #000;
	bottom: 6px;
	right: 4px;
	transform-origin: bottom right;
  }




/******** End Radial Menu ********/



/******************Imbiblia Notes ***************/

.notes-link-container{
	text-align: center;
	margin-top: 50px;
	padding-top: 50px;
	padding-bottom: 150px;
	color: #cba78a;	
}


.essay-title{
	font-size: 1.75em;
}


.how-much-img{
	width: 70%;
	max-width: 500px;
}

.notes-centered-section{
	width: 58%;
	margin: auto;	
}

.notes-header{
	text-align: center;
	color: #907763;
	padding: 21px;
}


/******************END Imbiblia Notes ***************/


/**************** ANY PICKER MENUS ******************/



/* ----------------------------------------------------------------------------- 

  AnyPicker - Customizable Picker for Mobile OS
  Version 2.0.9
  Copyright (c)2017 Lajpat Shah
  Contributors : https://github.com/nehakadam/AnyPicker/contributors
  Repository : https://github.com/nehakadam/AnyPicker
  Homepage : https://nehakadam.github.io/AnyPicker

 ----------------------------------------------------------------------------- */

/* ------------------------- Basic Layout Start ---------------------------------- */

.doc-header
{
	color: #88A686 !important;
}

.doc-descr
{
	color: #000000;
	font-weight: 300;
}

.action-rows
{
	margin-top: 50px;
	margin-bottom: 50px;
}

.link-list-icon
{
	display: inline-block;
	width: 30px;
	height: 30px;
	color: #333333;
	float: left;
	font-size: 25px;
}

.link-list
{
	margin-bottom: 50px;
}

.link-list div
{
	padding: 8px 10px;
}

.link-list-header
{
	line-height: 25px;
	color: #333333;
	margin-left: 10px;
	text-decoration: none;
	cursor: pointer;
}

.link-list-header h3
{
	display: inline;
	font-weight: 200;
	font-size: 1.8em;
}

.link-list-header:hover, 
.link-list-header:hover .link-list-icon
{
	color: #000000;
}

.link-list-desc
{
	font-size: 1.2em;
	color: #7D7D7D;
	text-align: justify;

	margin-top: 5px;
	margin-left: 40px;
}

.banner-cont
{
	background: #C5EFF7;
	margin-top: 40px;
}

.banner
{
	padding-top: 30px;
	padding-bottom: 40px;
}

.banner-header
{
	color: #000000;
}

.banner-desc
{
	color: #000000;
	margin-bottom: 20px;
}

@media (max-width: 992px)
{
	.banner div:not(:last-child)
	{
		padding-bottom: 20px;
	}
}


body.noscroll
{
    overflow: hidden;
}

.ap-overlay
{
	display: none;
	z-index: 2000;
	min-width: 250px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
	perspective: 1000px;
}

.ap-layout-popup
{
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.5);
}

.ap-layout-fixed, 
.ap-layout-popover
{
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.5);
}
/*
.ap-layout-relative, .ap-layout-inline
{
	height: auto;
}
*/

.ap-layout-relative, .ap-layout-inline
{
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.ap-overlay *
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.ap-bg
{
	width: 100%;
	height: 100%;

	font-family: sans-serif;
	/*font-family: 'Helvetica Neue', Arial, sans-serif;*/
	font-size: 22px;
}

.ap-cont
{
	margin: 0 auto;
	background-image:linear-gradient(#181818, #3a3939, #181818) ;
}

.ap-theme-default:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
{
	border: 1px solid;
	border-radius: 5px;
	-webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  	-moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.ap-layout-popup .ap-cont
{
	position: relative;
	top: 50%;
	max-width: 500px;
	width: 45%;

	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media only screen and (max-width: 420px){
	.ap-layout-popup .ap-cont{
		width: 90%;
	}

	.glyph-canvas{
		width: 52%;
	}
}


.ap-layout-relative .ap-cont
{
	max-width: 500px;
	width: 97%;
	border: 1px solid #ECF0F1;
}

.ap-layout-inline .ap-cont
{
	border: 1px solid #ECF0F1;
}

.ap-layout-fixed .ap-cont
{
	width: 100%;
	position: fixed;
}

/* ------------------------- Basic Layout End ---------------------------------- */

/* ------------------------- View Sections Start ---------------------------------- */

.ap-header
{
	height: 50px;
	line-height: 50px;

	text-align: left;
	font-size: 0.9em;

	padding: 0 16px;
}

.ap-dir-rtl .ap-header
{
	text-align: right;
}

.ap-theme-default .ap-header
{
	height: 60px;
	line-height: 60px;
}

.ap-content
{
	max-width: 320px;
	margin: 0 auto;
}

.ap-content-top
{
	height: 50px;
	padding: 8px 16px;
	color:#555;
	text-align:center;
}

.ap-content-switch
{
	margin-top: 8px;
  	margin-bottom: 8px;

  	text-align: center;
}

.ap-content-switch-tab
{
	border: 1px solid #009688;
	padding: 5px 16px;

	cursor: pointer;
	font-size: 0.6em;
	color: #009688;
}

.ap-dir-ltr .ap-content-switch-date
{
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.ap-dir-rtl .ap-content-switch-date
{
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	margin-left: -1px;
}

.ap-dir-ltr .ap-content-switch-time
{
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	margin-left: -1px;
}

.ap-dir-rtl .ap-content-switch-time
{
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.ap-content-switch-selected
{
	background: #009688;
	color: #FFFFFF;
}

.ap-content-middle
{
	min-height: 120px;

	padding-top: 20px;
  	padding-bottom: 20px;
}

.ap-content-bottom
{
	height: 50px;
	padding: 8px 16px;
	color:#555;
	text-align:center;
}

.ap-theme-default .ap-content-top, 
.ap-theme-default .ap-content-bottom
{
	font-size: 0.7em;
}

.ap-footer
{
	display: table;
	table-layout: fixed;
	width: 100%;

	height: 50px;
	text-align: center;
}

.ap-theme-default .ap-footer
{
	padding: 0 16px;
}

.ap-theme-default .ap-footer-top
{
	line-height: 55px;
}

.ap-theme-default .ap-footer-bottom
{
	line-height: 45px;
}

 .ap-header__title
{
	color: #907763;
	font-size: 1.2em;
}

	/* ------------------------- Buttons Start ---------------------------------- */

.ap-theme-default .ap-button
{
	cursor: pointer;

	letter-spacing: 0;
  	text-align: center;
  	font-size: 0.8em;

  	padding: 8px 12px;
  	margin: 8px;

  	color: #907763;
  	background: rgba(255, 255, 255, 0);

  	text-transform: uppercase;
}

.ap-theme-default .ap-button-cont
{
	float: right;
}

.ap-theme-default.ap-dir-rtl .ap-button-cont
{
	float: left;
}

	/* ------------------------- Buttons End ---------------------------------- */

/* ------------------------- View Sections End ---------------------------------- */


/* ------------------------- Animations Start ---------------------------------- */

/* ------------------------------------------------------------------------------ */

.ap-show
{
	opacity: 0;

	animation: ap-anim-show ease 0.5s;
	animation-iteration-count: 1;

	-webkit-animation: ap-anim-show ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-show ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-show ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-show ease 0.5s;
	-ms-animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes ap-anim-show
{
	0% { opacity:0; }
	100% { opacity:1; }
}

@-moz-keyframes ap-anim-show
{
  	0% { opacity:0; }
	100% { opacity:1; }
}

@-webkit-keyframes ap-anim-show 
{
  	0% { opacity:0; }
	100% { opacity:1; }
}

@-o-keyframes ap-anim-show 
{
  	0% { opacity:0; }
	100% { opacity:1; }
}

/* ------------------------------------------------------------------------------ */

.ap-hide
{
	animation: ap-anim-hide ease 0.5s;
	animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;

	-webkit-animation: ap-anim-hide ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-hide ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-hide ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-hide ease 0.5s;
	-ms-animation-iteration-count: 1;
}

@keyframes ap-anim-hide
{
	0% { opacity:1; }
	100% { opacity:0; }
}

@-moz-keyframes ap-anim-hide
{
  	0% { opacity:1; }
	100% { opacity:0; }
}

@-webkit-keyframes ap-anim-hide 
{
  	0% { opacity:1; }
	100% { opacity:0; }
}

@-o-keyframes ap-anim-hide 
{
  	0% { opacity:1; }
	100% { opacity:0; }
}

/* ------------------------------------------------------------------------------ */

.ap-bottom-slide-up
{
	opacity: 0;

	animation: ap-anim-bottom-slide-up ease 0.5s;
	animation-iteration-count: 1;

	-webkit-animation: ap-anim-bottom-slide-up ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-bottom-slide-up ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-bottom-slide-up ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-bottom-slide-up ease 0.5s;
	-ms-animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes ap-anim-bottom-slide-up
{
	100% { opacity: 1; bottom: 0; }
}

@-moz-keyframes ap-anim-bottom-slide-up
{
  	100% { opacity: 1; bottom: 0; }
}

@-webkit-keyframes ap-anim-bottom-slide-up
{
  	100% { opacity: 1; bottom: 0; }
}

@-o-keyframes ap-anim-bottom-slide-up
{
  	100% { opacity: 1; bottom: 0; }
}

/* ------------------------------------------------------------------------------ */

.ap-bottom-slide-down
{
	opacity: 1;

	animation: ap-anim-bottom-slide-down ease 0.5s;
	animation-iteration-count: 1;

	-webkit-animation: ap-anim-bottom-slide-down ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-bottom-slide-down ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-bottom-slide-down ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-bottom-slide-down ease 0.5s;
	-ms-animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes ap-anim-bottom-slide-down
{
	100% { opacity: 0; bottom: -1000px; }
}

@-moz-keyframes ap-anim-bottom-slide-down
{
  	100% { opacity: 0; bottom: -1000px; }
}

@-webkit-keyframes ap-anim-bottom-slide-down
{
  	100% { opacity: 0; bottom: -1000px; }
}

@-o-keyframes ap-anim-bottom-slide-down
{
  	100% { opacity: 0; bottom: -1000px; }
}

/* ------------------------------------------------------------------------------ */

.ap-top-slide-down
{
	opacity: 0;

	animation: ap-anim-top-slide-down ease 0.5s;
	animation-iteration-count: 1;

	-webkit-animation: ap-anim-top-slide-down ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-top-slide-down ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-top-slide-down ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-top-slide-down ease 0.5s;
	-ms-animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes ap-anim-top-slide-down
{
	100% { opacity: 1; top: 0; }
}

@-moz-keyframes ap-anim-top-slide-down
{
  	100% { opacity: 1; top: 0; }
}

@-webkit-keyframes ap-anim-top-slide-down
{
  	100% { opacity: 1; top: 0; }
}

@-o-keyframes ap-anim-top-slide-down
{
  	100% { opacity: 1; top: 0; }
}

/* ------------------------------------------------------------------------------ */

.ap-top-slide-up
{
	opacity: 1;

	animation: ap-anim-top-slide-up ease 0.5s;
	animation-iteration-count: 1;

	-webkit-animation: ap-anim-top-slide-up ease 0.5s;
	-webkit-animation-iteration-count: 1;

	-moz-animation: ap-anim-top-slide-up ease 0.5s;
	-moz-animation-iteration-count: 1;

	-o-animation: ap-anim-top-slide-up ease 0.5s;
	-o-animation-iteration-count: 1;

	-ms-animation: ap-anim-top-slide-up ease 0.5s;
	-ms-animation-iteration-count: 1;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes ap-anim-top-slide-up
{
	100% { opacity: 0; top: -1000px; }
}

@-moz-keyframes ap-anim-top-slide-up
{
  	100% { opacity: 0; top: -1000px; }
}

@-webkit-keyframes ap-anim-top-slide-up
{
  	100% { opacity: 0; top: -1000px; }
}

@-o-keyframes ap-anim-top-slide-up
{
  	100% { opacity: 0; top: -1000px; }
}

/* ------------------------------------------------------------------------------ */

.ap-theme-default .ap-button-active
{
	animation: ap-anim-default-button-active ease 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;

	-webkit-animation: ap-anim-default-button-active ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;

	-moz-animation: ap-anim-default-button-active ease 0.5s;
	-moz-animation-iteration-count: 1;
	-moz-animation-fill-mode:forwards;

	-o-animation: ap-anim-default-button-active ease 0.5s;
	-o-animation-iteration-count: 1;
	-o-animation-fill-mode:forwards;

	-ms-animation: ap-anim-default-button-active ease 0.5s;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode:forwards;
}

@keyframes ap-anim-default-button-active
{
	100% { background: #E0F2F1; }
}

@-moz-keyframes ap-anim-default-button-active
{
  	100% { background: #E0F2F1; }
}

@-webkit-keyframes ap-anim-default-button-active 
{
  	100% { background: #E0F2F1; }
}

@-o-keyframes ap-anim-default-button-active 
{
  	100% { background: #E0F2F1; }
}

/* ------------------------------------------------------------------------------ */



/* ------------------------- Animations End ---------------------------------- */




/* ------------------------- Picker Component Start ---------------------------------- */

.ap-component-section
{
  	display: table;
  	table-layout: fixed;
  	width: 100%;

  	background: #FFFFFF00;
}

.ap-loading
{
	width: 100%;
	height: 100%;

	z-index: 2;
	background: #FFFFFF;
}

.ap-component-section, ap-component-section *
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-ms-touch-select: none;
	-ms-touch-action: none;
	touch-action: none;
}

.ap-component
{
	display: table-cell;
}

.ap-component-label
{
	text-align: center;
	font-size: 0.7em;
}

.ap-theme-default
{
	color: #907763;
}

.ap-component-plus, .ap-component-minus
{
	background: #FFFFFF;
	color: #BDBDBD;

	width: 100%;
	height: 40px;
	line-height: 40px;

	text-align: center;
	font-size: 15px;

	cursor: pointer;
}

.ap-component-cont
{
	position: relative;
	/*height: 200px;*/
	overflow: hidden;
}

.ap-component-data
{
	position: absolute;
	left: 0;
  	top: 0;
	width: 100%;

	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
	perspective: 1000px;
}

.ap-row
{
	height: 40px;
	line-height: 40px;

	text-align: center;

	overflow: hidden;
	text-overflow: clip;
	white-space:nowrap;

	cursor: pointer;

	color: #907763;
}

.ap-row-invalid
{
	color: #FFCDD2;
}

.ap-row-hidden
{
	opacity: 0;
}

.ap-component-selector
{
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

	width: 100%;
	height: 40px;

	border-top: 1px solid #907763;
	border-bottom: 1px solid #907763;
}

.ap-theme-default .ap-component-selector
{
	left: 10%;
	width: 80%;
}

.ap-component-gradient
{
	position: absolute;
	top: -1px;
	left: 0;

	width: 100%;
	height: 102%;

	cursor: pointer;

	/*
	http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2030\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2070\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%20100\%25\%29\%3B'
	*/

	background: rgba(255,255,255,0.8);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0.8)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(70%, rgba(255,255,255,0.8)), color-stop(100%, rgba(255,255,255,0.8)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

/* ------------------------- Picker Component End ---------------------------------- */





.ap-theme-ios.ap-layout-popup .ap-cont, 
.ap-theme-ios.ap-layout-popover .ap-cont
{
	max-width: 320px;
	width: 90%;
    border-radius: 10px;
    border: 1px solid #D7D7D7;
}

.ap-theme-ios.ap-layout-popup, 
.ap-theme-ios.ap-layout-fixed, 
.ap-theme-ios.ap-layout-popover
{
	background: rgba(0, 0, 0, 0.4);
}

.ap-theme-ios .ap-tooltip, 
.ap-theme-ios .ap-tooltip:after 
{
  	display: inline-block;
 	width: 0;
  	height: 0;

  	position: absolute;

  	border-width: 11px;
  	border-style: solid;
  	z-index: 6;
}

.ap-theme-ios .ap-tooltip:after 
{
  	content: " ";
  	border-width: 10px;
}

.ap-theme-ios .ap-tooltip-bottom
{
  	top: -22px;
  	left: 10px;
  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0);
}

.ap-dir-rtl.ap-theme-ios .ap-tooltip-bottom
{
	right: 10px;
}

.ap-theme-ios .ap-tooltip-bottom:after 
{
  	top: -8px;
  	left: -10px;
  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0);
}

.ap-theme-ios .ap-tooltip-top 
{
  	bottom: -21px;
  	left: 16px;
  	border-color: #D7D7D7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.ap-dir-rtl.ap-theme-ios .ap-tooltip-top
{
	right: 16px;
}

.ap-theme-ios .ap-tooltip-top:after
{
  	bottom: -8px;
  	left: -10px;
  	border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.ap-theme-ios .ap-tooltip-left
{
  	top: 50%;
  	left: -22px;
  	border-color: rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

  	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ap-theme-ios .ap-tooltip-left:after 
{
  	top: -10px;
  	left: -9px;
  	border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.ap-theme-ios .ap-tooltip-right
{
  	top: 50%;
  	right: -22px;	
  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7;

  	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ap-theme-ios .ap-tooltip-right:after 
{
  	top: -10px;
  	left: -11px;
  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
}

.ap-theme-ios .ap-bg
{
	font-size: 18px;
	font-family: sans-serif;
}

.ap-theme-ios .ap-header
{
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-bottom: 1px solid #D7D7D7;
}

.ap-theme-ios .ap-header__title
{
	color: #FF3B30;
	font-size: 1.2em;
}

.ap-theme-ios .ap-button
{
	display: inline-block;
	cursor: pointer;

	letter-spacing: 0;
  	text-align: center;
  	font-size: 1.0em;

  	height: 43px;
  	line-height: 47px;

  	background: rgba(255, 255, 255, 1);
}

.ap-theme-ios .ap-content-top, 
.ap-theme-ios .ap-content-bottom
{
	font-size: 0.9em;
}

.ap-theme-ios .ap-footer
{
	padding: 0 16px;
}

.ap-theme-ios .ap-footer-top .ap-button
{
	display: inline-block;
}

.ap-theme-ios .ap-button:last-child
{
	float: right;
	padding: 0 0 0 16px;

	color: #007AFF;
}

.ap-dir-rtl.ap-theme-ios .ap-button:last-child
{
	float: left;
	padding: 0 16px 0 0;
}

.ap-theme-ios .ap-button:not(:last-child)
{
	float: left;
	padding: 0 16px 0 0;

	color: #007AFF;
}

.ap-dir-rtl.ap-theme-ios .ap-button:not(:last-child)
{
	float: right;
	padding: 0 0 0 16px;
}

.ap-theme-ios .ap-component-gradient
{
	/*
	http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2040\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2060\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%20100\%25\%29\%3B'
	*/

	background: rgba(255,255,255,0.7);
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(40%, rgba(255,255,255,0.7)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(60%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0.7)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

.ap-theme-ios .ap-content-middle
{
	padding: 10px 25px;
}

.ap-theme-ios .ap-content-switch-tab
{
	border: 1px solid #007AFF;
	font-size: 0.7em;
	color: #007AFF;
}

.ap-dir-ltr.ap-theme-ios .ap-content-switch-date
{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.ap-dir-rtl.ap-theme-ios .ap-content-switch-date
{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-left: -1px;
}

.ap-dir-ltr.ap-theme-ios .ap-content-switch-time
{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-left: -1px;
}

.ap-dir-rtl.ap-theme-ios .ap-content-switch-time
{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.ap-theme-ios .ap-content-switch-selected
{
	background: #007AFF;
	color: #FFFFFF;
}

.ap-theme-ios .ap-component-plus, 
.ap-theme-ios .ap-component-minus
{
	color: #BDBDBD;
}

.ap-theme-ios .ap-component-label
{
	color: #007AFF;
}

.ap-theme-ios .ap-row
{
	color: #000000;
	font-size: 1.2em;
}

.ap-theme-ios .ap-row-disabled
{
	color: #9E9E9E;
}

.ap-theme-ios .ap-component-selector
{
	left: 0;
	width: 100%;

	border-top: 1px solid #D7D7D7;
	border-bottom: 1px solid #D7D7D7;
}




.ap-theme-android.ap-layout-popup, 
.ap-theme-android .ap-layout-fixed
{
	background: rgba(0, 0, 0, 0.6);
}

.ap-theme-android .ap-bg
{
	font-size: 16px;
	font-family: sans-serif;
}

.ap-theme-android.ap-layout-popup .ap-cont
{
	max-width: 300px;
}

.ap-theme-android:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
{
	-webkit-box-shadow: 0 3px 5px #111, 0 0 5px #111;
	-moz-box-shadow: 0 3px 5px #111, 0 0 5px #111;
	box-shadow: 0 3px 5px #111, 0 0 5px #111;
}

.ap-theme-android.ap-layout-popup .ap-cont
{
	width: 85%;
}

.ap-theme-android .ap-header
{
	text-align: left;
	height: 65px;
	line-height: 65px;
	border-bottom: 2px solid #33B5E5;
}

.ap-dir-rtl.ap-theme-android .ap-header
{
	text-align: right;
}

.ap-theme-android .ap-header__title
{
	color: #33B5E5;
	font-size: 1.45em;
}

.ap-theme-android .ap-footer
{
	height: 45px;
}

.ap-theme-android .ap-button
{
	display: table-cell;
	cursor: pointer;

	letter-spacing: 0;
  	text-align: center;
  	font-size: 0.9em;

  	height: 45px;
  	line-height: 45px;

	color: #000000;
  	background: rgba(255, 255, 255, 1);
  	border-top: 1px solid #DCDCDC;
}

.ap-theme-android .ap-footer-bottom .ap-button
{
	border-top: 1px solid #DCDCDC;
}

.ap-theme-android .ap-footer-top
{
	border-bottom: 1px solid #DCDCDC;
}

.ap-dir-ltr.ap-theme-android .ap-button:not(:last-child)
{
	border-right: 1px solid #DCDCDC;
}

.ap-dir-rtl.ap-theme-android .ap-button:not(:last-child)
{
	border-left: 1px solid #DCDCDC;
}

.ap-theme-android .ap-footer-top .ap-button
{
	display: table-cell;
	cursor: pointer;

	letter-spacing: 0;
  	text-align: center;
  	font-size: 0.8em;

  	height: 40px;
  	line-height: 40px;

  	padding: 0 16px;

  	color: #000000;
  	background: rgba(255, 255, 255, 1);
}

.ap-dir-ltr.ap-theme-android .ap-layout-fixed .ap-button:not(:last-child)
{
	border-right: none;
	float: left;
}

.ap-dir-rtl.ap-theme-android .ap-layout-fixed .ap-button:not(:last-child)
{
	border-left: none;
	float: right;
}

.ap-theme-android .ap-component-gradient
{
	/*
	http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.85\%29\%205\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.45\%29\%2024\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2025\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2043\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2051\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2071\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2075\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.45\%29\%2076\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.85\%29\%2095\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%20100\%25\%29\%3B'
	*/

	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(5%, rgba(255,255,255,0.85)), color-stop(24%, rgba(255,255,255,0.45)), color-stop(25%, rgba(255,255,255,0)), color-stop(43%, rgba(255,255,255,0)), color-stop(51%, rgba(255,255,255,0)), color-stop(71%, rgba(255,255,255,0)), color-stop(75%, rgba(255,255,255,0)), color-stop(76%, rgba(255,255,255,0.45)), color-stop(95%, rgba(255,255,255,0.85)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 5%, rgba(255,255,255,0.45) 24%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.45) 76%, rgba(255,255,255,0.85) 95%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

.ap-theme-android .ap-content-middle
{
	padding: 25px 32px;
}

.ap-theme-android .ap-content-switch-tab
{
	border: 1px solid #6BC8E9;
	font-size: 0.7em;
	color: #6BC8E9;
	text-transform: uppercase;
}

.ap-theme-android .ap-content-switch-selected
{
	background: #6BC8E9;
	color: #FFFFFF;
}

.ap-theme-android .ap-component-plus, 
.ap-theme-android .ap-component-minus
{
	color: #BDBDBD;
}

.ap-theme-android .ap-component-label
{
	color: #6BC8E9;
	font-size: 0.85em;
}

.ap-theme-android .ap-row
{
	color: #000000;
	font-size: 1.1em;
}

.ap-theme-android .ap-row-disabled
{
	color: #9E9E9E;
}

.ap-theme-android .ap-component-selector
{
	left: 10%;
	width: 80%;

	border-top: 2px solid #6BC8E9;
	border-bottom: 2px solid #6BC8E9;
}

/* ------------------------- Animations Start ---------------------------------- */

/* ------------------------------------------------------------------------------ */

.ap-theme-android .ap-button-active
{
	animation: ap-anim-android-button-active ease 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;

	-webkit-animation: ap-anim-android-button-active ease 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;

	-moz-animation: ap-anim-android-button-active ease 0.5s;
	-moz-animation-iteration-count: 1;
	-moz-animation-fill-mode:forwards;

	-o-animation: ap-anim-android-button-active ease 0.5s;
	-o-animation-iteration-count: 1;
	-o-animation-fill-mode:forwards;

	-ms-animation: ap-anim-android-button-active ease 0.5s;
	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode:forwards;
}

@keyframes ap-anim-android-button-active
{
	100% { background: #F5F5F5; }
}

@-moz-keyframes ap-anim-android-button-active
{
  	100% { background: #F5F5F5; }
}

@-webkit-keyframes ap-anim-android-button-active 
{
  	100% { background: #F5F5F5; }
}

@-o-keyframes ap-anim-android-button-active 
{
  	100% { background: #F5F5F5; }
}

/* ------------------------------------------------------------------------------ */

/* ------------------------- Animations End ---------------------------------- */




.ap-theme-windows.ap-layout-popup, 
.ap-theme-windows.ap-layout-popup *
{
	background: #181C18;
}

.ap-theme-windows.ap-layout-popup .ap-cont
{
	width: 100%;
	height: 100%;
	max-width: 100%;
}

.ap-theme-windows .ap-bg
{
	font-size: 18px;
	font-family: sans-serif;
}

.ap-theme-windows .ap-header
{
	position: absolute;
  	top: 0;
  	left: 0;

  	width: 100%;
	height: 60px;
	line-height: 75px;
	text-align: left;
	text-transform: uppercase;

	z-index: 2;
}

.ap-theme-windows .ap-header__title
{
	color: #FFFFFF;
	font-size: 1.0em;
}

.ap-theme-windows .ap-button
{
	display: inline-block;
	cursor: pointer;

	letter-spacing: 0;
  	text-align: center;
  	font-size: 1.0em;

  	height: 30px;
  	max-width: 50px;

  	margin-left: 4px;
	margin-right: 4px;

  	color: #FFFFFF;
}

.ap-theme-windows .ap-button-icon
{
	height: 32px;
  	font-size: 32px;

  	position: relative;
  	bottom: -8px;
}

.ap-theme-windows .ap-button-text
{
  	display: inline-block;
  	width: 100%;

	font-size: 0.5em;
	text-transform: lowercase;

	position: relative;
  	bottom: 0;
}

.ap-theme-windows .ap-content
{
	position: absolute;
  	top: 0;
  	left: 0;

  	height: 100%;
  	width: 100%;

  	z-index: 1;

  	max-width: none;
}

.ap-theme-windows .ap-content-top, 
.ap-theme-windows .ap-content-bottom
{
	font-size: 0.9em;
}

.ap-theme-windows .ap-content-top
{
	position: absolute;
  	top: 60px;
  	width: 100%;

  	z-index: 2;
  	height: auto;
  	padding: 4px 16px;
}

.ap-theme-windows .ap-content-bottom
{
	position: absolute;
  	bottom: 59px;
  	width: 100%;

  	z-index: 2;
  	height: auto;
  	padding: 2px 16px;
}

.ap-theme-windows .ap-footer
{
	position: absolute;
  	bottom: 0;
  	left: 0;

  	width: 100%;
  	height: 50px;
	padding: 0 16px;

	text-align: center;
	z-index: 2;
}

.ap-theme-windows .ap-component-gradient
{
	background: transparent;
}

.ap-theme-windows .ap-content-middle
{
	padding: 0 10px;
}

.ap-theme-windows .ap-content-switch
{
	display: inline-block;
  	height: 0;

	float: right;
	margin-right: 2px;
	margin-top: 0;
	margin-bottom: 0;
}

.ap-theme-windows .ap-content-switch-tab
{
	border: 1px solid #ADADAD;
	font-size: 0.7em;
	color: #ADADAD;
}

.ap-dir-ltr.ap-theme-windows .ap-content-switch-date
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ap-dir-rtl.ap-theme-windows .ap-content-switch-date
{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: -1px;
}

.ap-dir-ltr.ap-theme-windows .ap-content-switch-time
{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: -2px;
}

.ap-dir-rtl.ap-theme-windows .ap-content-switch-time
{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ap-theme-windows .ap-content-switch-selected
{
	background: #ADADAD !important;
	color: #181C18;
}

.ap-theme-windows .ap-component-plus, .ap-theme-ios .ap-component-minus
{
	color: #BDBDBD;
}

.ap-theme-windows .ap-component-label
{
	color: #007AFF;
}

.ap-theme-windows .ap-row
{
	color: #FFFFFF;
}

.ap-theme-windows .ap-row-content
{
	background: transparent;

	font-size: 1.8em;
	text-align: left;
	
	width: 100%;
	height: 80px;
	line-height: 80px;

	padding-left: 4px;

	position: absolute;
	bottom: 0;
	left: 0;
}

.ap-theme-windows .ap-row-label
{
	background: transparent;
	
	font-size: 0.7em;
	text-transform: lowercase;
	text-align: left;

	padding-left: 3px;

	width: 100%;
	height: 20px;
	line-height: 20px;

	position: absolute;
	bottom: 0;
	left: 0;
}

.ap-theme-windows .ap-row-bg
{
	position: relative;
	margin: 4px;
	border: 2px solid #181C18;
}

.ap-theme-windows .ap-row-selected .ap-row-bg
{
	background: #4B4D4A !important;	
	border: 2px solid #4B4D4A;
}

.ap-theme-windows .ap-row-selected .ap-row-content
{
	color: #FFFFFF !important;
}

.ap-theme-windows .ap-row-selected .ap-row-label
{
	color: #A7A8A7 !important;
}

.ap-theme-windows .ap-component:not(.ap-component-modifying) .ap-row-content
{
	color: transparent;
}

.ap-theme-windows .ap-component:not(.ap-component-modifying) .ap-row-label
{
	color: transparent;
}

.ap-theme-windows .ap-component.ap-component-modifying .ap-row-bg
{
	border: 2px solid #4B4D4A;
}

.ap-theme-windows .ap-component.ap-component-modifying .ap-row-content
{
	color: #ADADAD;
}

.ap-theme-windows .ap-component.ap-component-modifying .ap-row-label
{
	color: #5F5F5F;
}

.ap-theme-windows .ap-component.ap-component-modifying .ap-row-content
{
	color: #ADADAD;
}

.ap-theme-windows .ap-component.ap-component-modifying .ap-row-bg
{
	color: #000000;
}

.ap-theme-windows .ap-row-disabled
{
	color: #9E9E9E;
}

.ap-theme-windows .ap-component-selector
{
	left: 0;
	width: 100%;

	border-top: none;
	border-bottom: none;

	background: transparent;
}

@media only screen and (orientation : landscape)
{
	.ap-theme-windows .ap-header
	{
		height: 40px;
		line-height: 40px;
	}

	.ap-theme-windows .ap-content-top
	{
	  	top: 31px;
	}

	.ap-theme-windows .ap-content-bottom
	{
	  	bottom: 60px;
	}

	.ap-theme-windows .ap-row-content
	{
		font-size: 1.3em;

		height: 60px;
		line-height: 60px;
	}

	.ap-theme-windows .ap-row-label
	{
		font-size: 0.6em;
	}

	.ap-theme-windows .ap-button-icon
	{
		height: 24px;
	  	font-size: 24px;

	  	position: relative;
	  	bottom: -12px;
	}
}




@font-face {
	font-family: 'anypicker-font';
	src: url('fonts/anypicker-font.eot');
}
@font-face {
	font-family: 'anypicker-font';
	src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAvQAAAC8AAAAYGNtYXDmP+C4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5Zk9FXHgAAAGAAAAEFGhlYWQGjJupAAAFlAAAADZoaGVhB8IDzQAABcwAAAAkaG10eCYAAAAAAAXwAAAAMGxvY2EEPgMmAAAGIAAAABptYXhwABAAUQAABjwAAAAgbmFtZTvtFloAAAZcAAABznBvc3QAAwAAAAAILAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg4APmA//9//8AAAAAACDgAOYA//3//wAB/+MgBBoIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAADABAACwAADAAAlIQkBBAD8AAIAAgDAAgD+AAAAAQAAAHcEAAMJAAUAAAEnCQEHAQQAkf6R/pGRAgACd5L+kQFvkv4AAAEAAADABAACwAACAAATCQEAAgACAALA/gACAAABAAAAcgP6AwgAGwAACQEmIgcBDgEVFBYfAR4BMzI2NwkBFjI/ATY0JwP6/hUGEgb+FQMDAwOIAwcEBAgDAVUBVQYSBYgGBgEdAesGBv4VAwgEBAgCiAMDAwMBVf6rBgaIBhEGAAAAAAMAAP/ABAADwAAUACkAPwAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CIxMjNTQmKwEiBh0BFBY7ATI2PQE0JiMCAGq7i1BQi7tqaruLUFCLu2pYmnJDQ3KaWFiackNDcppYvZAUDhYOFBQOyA4UFA4DwFCLu2pqu4tQUIu7amq7i1D8WUNymlhYmnJDQ3KaWFiackMB1KYOFBQO3g4UFA4WDhQAAAAAAwAA/8AEAAPAABQAKQBLAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgIjEyYiDwEnJiIPAQYUHwEUMBUXFDIxFxYyPwE+AT8BNjQvAQIAaruLUFCLu2pqu4tQUIu7aliackNDcppYWJpyQ0NymlipChsKm1oKHAoQCgpxEAECChwKEAMEAagKChADwFCLu2pqu4tQUIu7amq7i1D8WUNymlhYmnJDQ3KaWFiackMCHQoKm1oKChAKHApwAQEPAQIKChECBwSoChwJEAADAAD/wAQAA8AAFAApAE4AAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAiMTJyYiDwEnJiIPAQYUHwEHBhQfARYyPwEXFjI/ATY0LwE3NjQnAgBqu4tQUIu7amq7i1BQi7tqWJpyQ0NymlhYmnJDQ3KaWKMQChwJZGQJHAoQCQlkZAkJEAocCWRkCRwKEAkJZGQJCQPAUIu7amq7i1BQi7tqaruLUPxZQ3KaWFiackNDcppYWJpyQwI6EAkJZGQJCRAKHAlkZAkcChAJCWRkCQkQChwJZGQJHAoAAAADAAD/wAQAA8AAFAApADoAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAiMTISIGHQEUFjMhMjY9ATQmIwIAaruLUFCLu2pqu4tQUIu7aliackNDcppYWJpyQ0Nymlin/rIOExMOAU4OExMOA8BQi7tqaruLUFCLu2pqu4tQ/FlDcppYWJpyQ0NymlhYmnJDAdQUDhYOFBQOFg4UAAEAAAABGZrL7g4nXw889QALBAAAAAAA0baeyQAAAADRtp7JAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAwEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAC4AQgBQAIQA3AFGAbgCCgAAAAEAAAAMAE8AAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQANAAAAAQAAAAAAAgAHAJYAAQAAAAAAAwANAEgAAQAAAAAABAANAKsAAQAAAAAABQALACcAAQAAAAAABgANAG8AAQAAAAAACgAaANIAAwABBAkAAQAaAA0AAwABBAkAAgAOAJ0AAwABBAkAAwAaAFUAAwABBAkABAAaALgAAwABBAkABQAWADIAAwABBAkABgAaAHwAAwABBAkACgA0AOxBbnlQaWNrZXJGb250AEEAbgB5AFAAaQBjAGsAZQByAEYAbwBuAHRWZXJzaW9uIDEuMQBWAGUAcgBzAGkAbwBuACAAMQAuADFBbnlQaWNrZXJGb250AEEAbgB5AFAAaQBjAGsAZQByAEYAbwBuAHRBbnlQaWNrZXJGb250AEEAbgB5AFAAaQBjAGsAZQByAEYAbwBuAHRSZWd1bGFyAFIAZQBnAHUAbABhAHJBbnlQaWNrZXJGb250AEEAbgB5AFAAaQBjAGsAZQByAEYAbwBuAHRGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype');
	font-weight: normal;
	font-style: normal;
}

[class^="ap-icon-"], [class*=" ap-icon-"] {
	font-family: 'anypicker-font';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ap-icon-now:before {
	content: "\e600";
}
.ap-icon-set:before {
	content: "\e601";
}
.ap-icon-cancel:before {
	content: "\e602";
}
.ap-icon-clear:before {
	content: "\e603";
}
.ap-icon-arrow-up-filled:before {
	content: "\e000";
}
.ap-icon-arrow-down:before {
	content: "\e001";
}
.ap-icon-arrow-down-filled:before {
	content: "\e002";
}
.ap-icon-arrow-up:before {
	content: "\e003";
}

.bottom-container{
	width: 100%;
	position: absolute;
	bottom: 5px;
	text-align: center;
}

.list-adder, .card-creator {

	bottom: 5px;
    width: 47%;
    border-radius: 30px;
    border: 2px solid #907763;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: .5em;
    padding: .15em;
    padding-bottom: .3em;
}



.list-adder a {
	text-align: center;
	margin: auto;
	color: grey;
	text-decoration: none;
	cursor: pointer;


}

.card-creator a {
	text-align: center;
	margin: auto;
	color: grey;
	text-decoration: none;
	cursor: pointer;

}

@media only screen and (max-width: 321px) {
	#item-input-form{
		bottom: 52px;
	}

	.list-adder, .card-creator {
		border: .5px solid #907763;
	}
}



/************************** END OF ANYPICKER MENUS *********************/


.title-small{
	font-size: 1rem;
}







/****** MEDIA QUERIES *************/

@media only screen and (max-width: 460px) {
	.library-display-container{
		margin-right: 4.4%;
	}

	.recipe-card-view{
		width: 85%;
	}

	.expand-card{
		width:97%;
	}
}


@media only screen and (max-width: 530px) {
	.library-display-container{
		margin-right: 5%;
	}


}



/******* Iphone 8 ***********/

@media only screen 
    and (max-width : 375px) 
    and (max-height : 667px)  { 
    	.recipe-card-ingredient-item{
    		font-size: .75em;
    	}

    	.ingredient-glyph{
/*    		width: 120px;
    		height: 120px;*/
    	}

    	.ingredient-glyph-float{
/*    		height: 130px;
    		width: 130px;*/
    		/*top: -2.5px;*/
    	}

    	.batch-calc-choice-name{
    		font-size: 1em;
    	}

    	.dash-graphic-module{
    		width: 15px;
    		height: 15px;
    	}

    	.dash-graphic{
			width: 16px;
			height: 17px;    		
    	}

    	.description{
    		font-size: .8em!important;
    	}


}


/******* end of Iphone 8 *****/

/******* Iphone 8 plus *****/

@media only screen and (width: 414px) and (height: 736px){
	.landing-container{
		width: 100%;
	}

	.recipe-card{
		width: 385px;
	}

	.description{
		font-size: .8em!important;
	}

   	.recipe-card-ingredient-item{
    		font-size: .85em;
    	}

    .ingredient-glyph{
/*    		width: 115px;
    		height: 115px;*/
    	}

    .ingredient-glyph-float{
/*    		height: 125px;
    		width: 125px;
    		top: 0px;
    		position: relative;*/
    	}

    .batch-calc-choice-name{
    		font-size: 1em;
    	}

    .dash-graphic-module{
    		width: 15px;
    		height: 15px;
    	}

    .dash-graphic{
			width: 16px;
			height: 17px;    		
    	}



	.controlbar-button-container{
		width: 95%;
	}

	.recipe-name{
		text-align: center;
		font-size: 1.5em;
		/* padding: 11px; */
		color: rgb(121, 121, 121);
		/* padding-left: 20px; */
		cursor: pointer;
		height: 62px;
		padding-top: 7px;
	}

	.tab-selection-container{
		flex-grow: 9;
	}

	.rim-selection-container{
		flex-grow: 4;
	}

	.rim-selected-container{
		flex: 4;
	}

	.half-rim-on{
		height: 35%;
	}

	.rim_prep_label{
		display: none;
	}

	.name-input-btn{
		margin-left: -34px;
	}
/*
	.card-body{
		height: 75%;
	}
*/

	.selected-rim-prep{
		top: 20%;
		width: 58%;
	}


}


/******* Iphone 8 plus END *****/






/* hide scroll bars */
.no-scrollbars{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */	
}

.no-scrollbars::-webkit-scrollbar{
	display: none;
}



/********iphone 7**********/

@media only screen 
  and (width: 375px) 
  and (height: 647px) {
	.recipe-card{
		height: 79vh;
	}  	

	.methods-selected-container{
		height: 61%;
	}

	.garnish-selected-container{
		height: 61%;
	}

	.ingredient-glyph{
/*		width: 94px;
		height: 94px;*/
	}

	.ingredient-glyph-float{
/*		width: 100px;
		height: 100px;*/
	}

	.add-ingredient-btn{
		font-size: .9em;
	}

	.method-selection-btn{
		font-size: .8em;
	}

	.recipe-card-rim-btn{
		font-size: .8em;
	}

	.float-title{
		font-size: .75em;
	}

	.selected-rim-prep{
		top: 37%;
	}

	.recipe-card-selection-btn{
		font-size: .8em;
	}

	.submit-ingredient-arrow{
		right: 11px;
		width: 11px;
		height: 11px;
		top: 13.5px;		
	}

	.submit-ingredient-arrow-shaft{
		width: 18px;
		margin-top: 18px;
	}

	.submit-ingredient-btn-active{
		right: -12px;
	}

	.controlbar-button-container{
		width: 88%;
	}

	.email-sign-up{
		background: none;
		color: inherit;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;
		border: 1px solid #907763;
		background-color: #1d1d1d;
		border-radius: 35px;
		height: 29px;
		width: 29px;
		margin-left: -36px;
		vertical-align: middle;
		margin-bottom: 3px;
		margin-top: 1px;
	}

	.arrow-shaft{
		margin-left: 6px;
	}

	.arrow-tip{
		margin-left: 12px;		
	}

	.card-top{
		height: 45px;
	}

	.recipe-name {
		font-size: 1.2em;
	}

	.card-ingredient-list{
		font-size: .8em;
	}

	.progress-bar-selection-process{
		font-size: .7em;
	}

	.submit-ingredient-btn{
		height: 40px;
		width: 40px;
		bottom: 9px;
	}

	.glyph-container{
/*		height: 100px;
		width: 100px;*/
	}

	.alpha-zoom-letter-container{
		font-size: .7em;
	}


  }


/******* end of iphone 7 ***/
/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (min-device-width: 390px) 
    and (max-device-height: 844px) 
    and (orientation : portrait) 
    and (-webkit-device-pixel-ratio: 3) { 
	.recipe-card{
		height: 78vh;
	}

	.ingredient-elastic-container{
		bottom: 135px;
	}

}



/******iphone 8 *****/


@media only screen 
    and (min-width: 375px) 
    and (max-height: 667px)
    and (orientation : portrait) 
    and (-webkit-device-pixel-ratio: 2){ 
	.alpha-zoom-letter-container{
		font-size: .7em;
	}

	.batch-calc-body-center{
		height: 94%;
	}
}



/****** end of iphone 8 *****/


/******iphone 8 Plus  *****/


@media only screen 
    and (min-width: 414px) 
    and (max-height: 736px)
    and (orientation : portrait) 
    and (-webkit-device-pixel-ratio: 3){ 
	.alpha-zoom-letter-container{
		font-size: .7em;
	}

	.in-card-batch-calculator-body{
		height: 95%;
	}
}



/****** end of iphone 8 plus *****/


/******iphone 11 pro  *****/


@media only screen 
    and (min-width: 375px) 
    and (max-height: 812px)
    and (orientation : portrait) 
    and (-webkit-device-pixel-ratio: 3){ 
    .expand-card{
		height: 88vh;    	
    }

	.in-card-batch-calculator-body{
		height: 95%;
	}
}



/****** end of iphone 11 Pro *****/

/****** iphone 12 mini *******/

 @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
 	.library-settings-container{
 		bottom: 1%;
 	}
 }

/****** End of iphone 12 mini *******/




/***** iphone 12 mini *******/


/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

/**** end of iphone 12 mini ****/



/***** iphone 12 max ****/

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }


/**** end of iphone 12 max ****/


/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  	.expand-card{
  		/*height: 50vh;*/
  	}
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}


/**********iPhoneSE************/

@media only screen and (width: 320px) and (orientation: portrait) {
	.ingredient-glyph{
/*		width: 100px;
		height: 100px;*/
	}

	.ingredient-glyph-float{
/*		height: 112px;
		width: 112px;
		position: relative;
		top: -3.5px;*/
	}

	.description{
		font-size: .8em!important;
	}

	.alpha-zoom-letter-container{
		font-size: .5em;
		padding-top: 2px;		
	}

	.preferred-unit-selector{
		width: 13px;
		height: 13px;
	}

	.unit-selected{
		width: 9px;
		height: 9px;
	}

	.dash-graphic-module{
		width: 13px;
		height: 13px;
	}

	.dash-graphic{
		width: 26px;
		height: 2px;		
	}

	.float-tite{
		font-size: .8em;
	}

	.recipe-card-ingredient-item-dot{
		width: 15px;
		height: 15px;		
	}

	.dash-graphic-list{
		height: 15px;
		width: 15px;
	}

	.batch-number-cage{
		font-size: 2.5em;
	}

	.batch-calc-choice-name{
		font-size: 1em;
	}

	.dash-graphic-list-svg-container{
		top: -1px;
	}

	.lib-tab-name{
		font-size: 1.1em;
	}

	.library-tab{
		font-size: .8em;
	}

	.lib-tab-name-active{
		font-size: 1.2em;
	}

	.display-card-name{
		font-size: 1em;
	}

	.backface-text-item{
		font-size: .8em;
	}

	.recipe-card-ingredient-item{
		font-size: .6em;
	}

	.card-ingredient-list-title{
		font-size: .7em;
	}

	.batch-calc-body-center{
		height: 99%;
	}

	.bottom-container-btn-label{
		font-size: .6em;
	}

	.lib-btm-btn{
		height: 26px;
	}
}



/**********End of iPhoneSE************/



/**********iPhone 14 Max************/

@media only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) { }

/**********End of iPhone 14 Max ************/

/****FONT SIZE for NON TABLETS IE SMALL PHONES *****/

@media screen and (max-height: 660px){
	.recipe-card-ingredient-item{

		font-size: 2vh;

	}	

}




.search-card{
    height: auto;
    border-bottom: 2px solid #585858;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;	
}

.search-card-proto{
	height: 53vh;
	min-height: 450px;
}

/******* Imbiblia Spinner **********/

/******* AI spinner *********/


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#loader {
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 45vw;
	max-width: 200px;
	height: calc(45vw);
	max-height: 200px;
	/* margin: 0px 0 0 -75px; */
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #907763;
	-webkit-animation: spin 9.5s linear infinite;
	animation: spin 9.5s linear infinite;
}

#loader2 {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 4.7s linear infinite;
    animation: spin 4.7s linear infinite;
}

#loader3 {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}


#loader4 {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 2.9s linear infinite;
    animation: spin 2.9s linear infinite;
}



#loader5 {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 24.2s linear infinite;
    animation: spin 24.2s linear infinite;
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}




.spinner-spacer{
	height:  250px;
}

.spinner-center{
    position: absolute;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width:  37%;
    margin:  auto;
}


.search-card-container{
	margin: auto;
	text-align: center;
	margin-top: 3%;	
	height:  auto;
	margin-bottom: 52px;
}

.imbiblia-spinner-container{
/*	margin-top:  42%;
	position: relative;
	z-index:  -2;
	margin-bottom:  30%;*/

	margin-top: 39%;
	position: absolute;
	z-index: -2;
	margin-bottom: 10%;
	left: 0;
	right: 0;
	top: 20px;
	height: 50%;
	bottom: 0;

}

.imbiblia-spinner-component-container{
	margin: auto;
	margin-top: 14%;
	position: relative;
	z-index: -2;
	margin-bottom: 10%;
	left: 0;
	right: 0;
	top: 20px;
	height: 225px;
	width: 225px;
	bottom: 0;
}

.spinner-symbol-img{
    width: 64%;
    margin: auto;
}


/**build Spinner**/

#loader-build {
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 95%;
	max-width: 200px;
	height: 95%;
	max-height: 200px;
	/* margin: 0px 0 0 -75px; */
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #907763;
	-webkit-animation: spin 9.5s linear infinite;
	animation: spin 9.5s linear infinite;
}

#loader2-build {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 4.7s linear infinite;
    animation: spin 4.7s linear infinite;
}

#loader3-build {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}


#loader4-build {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 2.9s linear infinite;
    animation: spin 2.9s linear infinite;
}



#loader5-build {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 24.2s linear infinite;
    animation: spin 24.2s linear infinite;
}

.simple-spinner-container{
	position: relative;
	margin-top: 40%;
}


#simple-loader-build {
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 15vw;
	max-width: 75px;
	height: calc(15vw);
	max-height: 75px;
	/* margin: 0px 0 0 -75px; */
	border-radius: 50%;
	border: .5px solid transparent;
	border-top-color: #907763;
	-webkit-animation: spin 9.5s linear infinite;
	animation: spin 9.5s linear infinite;
}

#simple-loader2-build {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    border: .5px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 4.7s linear infinite;
    animation: spin 4.7s linear infinite;
}

#simple-loader3-build {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    border: .5px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}


#simple-loader4-build {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    border: .5px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 2.9s linear infinite;
    animation: spin 2.9s linear infinite;
}



#simple-loader5-build {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: .5px solid transparent;
    border-top-color: #907763;
    -webkit-animation: spin 24.2s linear infinite;
    animation: spin 24.2s linear infinite;
}


.imbiblia-spinner-container-build{
	/*	margin-top:  42%;
		position: relative;
		z-index:  -2;
		margin-bottom:  30%;*/
	
		/* margin-top: 39%; */
		position: absolute;
		z-index: 0;
		margin-bottom: 10%;
		left: 0;
		right: 0;
		top: 1.5%;
		width: 100%;
		height: 100%;
		bottom: 0;
		border: 2.5px solid #907763;
		border-radius: 50%;
	
	}
	
	.spinner-symbol-img-build{
		width: 52%;
		margin: auto;
	}

	.spinner-center-build{
		text-align: center;
		height: 100%;
		display: flex;
	}
	

/*** end of build spinner**/


.search-title{
	text-align: center;
    padding-top: 15px;
    color: #907763;
    font-weight: bold;
    font-size: 1.25em;
    letter-spacing:  1px;
}

.search-bar-container{
	color: #6c6c6c;
	border-radius: 35px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;	
	width: 90%;
	margin:  auto;
	border-radius:  30px;
	padding: 7px;
	border: 1px solid grey;
	font-size:  16px;
}

.proto-search-list{
	/*position: absolute;*/
    width: 90%!important;
    height:  80%;
    max-height: 300px;
    margin: auto;
    padding-top: 20px;
    padding-bottom:  100px;
    margin-top: -15px;
    width: 65%;
    left: 0;
    right: 0;
    overflow: scroll;
    background-color: #000000e3;
    z-index: -1;
    color: #b3b3b3;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #1a1a1a;    
	-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);    
}


.prelim-search-item-container{
    border-bottom: 1px dashed #282828;;
    padding-top: 4px;
    padding-bottom: 5px;
    display: flex;
}

.prelim-search-item-container:hover{
	background-color:  #907763;
	color:  black;
	cursor: pointer;
}


.search-item-selection-title{
	opacity: .5;
	min-width:  27%;
	text-align: left;
	font-size: .8em;
	padding-left:  3px;
}

.search-item-selection-item{
	text-align: left;
	padding-left:  3px;
	min-width:  67%;
}

.search-params-container{
	padding-top:  20px;
	padding-bottom: 20px;
}

.search-param-container{
	width: 100%;
	max-width: 430px;
	margin: auto;
	display: flex;
	text-align: center;
	justify-content: space-between;
	padding: 5px;
	border: 1px dotted #907763;
	color: #907763;
	border-radius: 3px;
	padding-right: 14px;
	margin-bottom: 15px;
	margin-top: 15px; 
}

@media only screen and (max-width: 460px){
	.search-param-container {
		width: 85%;
	}
}

.delete-search-param-x{
	position: relative;
	width: 22px;
	height: 22px;
	opacity: 0.3;
}


.delete-search-param-x:hover{
	opacity: 1;
}

.delete-search-param-x:before, .delete-search-param-x:after{
	position: absolute;
	left: 15px;
	content: ' ';
	height: 22px;
	width: 2px;
	background-color: #737373;
}

.delete-search-param-x:before {
  transform: rotate(45deg);
}

.delete-search-param-x:after {
  transform: rotate(-45deg);
}

.refine-search-title{
    font-size: 1.2em;
    font-style: italic;	
    /*color:  #343434;*/
    color:  #4a3d32;
    padding-top: 0px;
}


.search-imbiblia-bar{
	position: relative;
	z-index:  3;
}


/**** LEGEND ****/


.legend-title{
	text-align: center;
	font-size: 2em;
	color: #907763;
	text-transform: uppercase;
	padding-bottom:  10px;	
}

.legend-blurb{
	width: 60%;
	max-width:  700px;
	margin: auto;
	font-size: .8em;
	color: rgb(195, 195, 195);	
	text-align: justify;
	margin-bottom: 20px;
}

.legend-subtitle{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #907763;
	width: 90%;
	margin: auto;
	margin-bottom: 10px;	
}

.legend-item{
	margin: auto;
	padding-bottom: 22px;
	margin-bottom: 10px;
	border-bottom: 1px solid #907763;
	width: 90%;
	padding-top: 5px;	
}

.legend-item-top-container{
	display: flex;
	width: 82%;
	margin: auto;
	justify-content: space-between;
}

.legend-img-container{
	max-width: 40%;
}

.legend-img{
	width:  100%;
}

.legend-name{
	color: darkgrey;
	font-size: 1.25em;
	vertical-align: middle;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.legend-item-bottom-container{
	margin: auto;
	margin-top: 20px;
	width: 90%;
	color: darkgrey;	
}

.legend-example-container{
	margin: auto;
	margin-top: 10px;	
	width: 50%;
	text-align: center;
}

.google-search-legend-link{
	color: #907763;
	padding: 6px;
	padding-left: 16px;
	padding-right: 16px;
	background-color: rgb(15, 15, 15);
	border-radius: 9px;
	border: 1px solid rgb(56, 56, 56);	
}

.google-search-legend-link:active{
	color: rgb(15, 15, 15);
	padding: 6px;
	padding-left: 16px;
	padding-right: 16px;
	background-color: #907763;
	border-radius: 9px;
	border: 1px solid rgb(56, 56, 56);	
}


.admin-btn{
	position: absolute;
	bottom: 98px;
	/* top: 0; */
	left: 0px;
	right: 0px;
	/* width: 52%; */
	color: rgb(56, 56, 56);
	margin: auto;
	width: auto;
	background-color: rgb(25, 24, 24);
	border-color: rgb(41, 41, 41);
	width: 86px;
}

/**** LEGEND end ****/


/***** V1 Submit Drink ***/


.submission-msg-backdrop{
	position: absolute;
	margin:  auto;
	width: 100%;
	height:  100%;
	top:  0;
	left:  0;
	right:  0;
	bottom:  0;
	background-color: rgba(0, 0, 0, 0.56);
}

.submission-close{
	opacity: 1;
}

.submission-close:before, .submission-close:after{
	background-color: rgb(252, 0, 24);
	opacity: 1;
}

.submission-msg-board{
	position: absolute;
	width: 90%;
	height: 90vh;
	margin: auto;
	background-color: rgb(101, 23, 23);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10px;
}


.submission-master-plan-link{
	color:  #907763;
}

.submit-drink-v-1-container{
	width:  90%;
}


.submit-v1-inputs::-webkit-input-placeholder { 
	text-align:left; 
	color:  #907763;
}
	/* mozilla solution */
input:.submit-v1-inputs -moz-placeholder { 
	text-align:left; 
	color:  #907763;
}



.submit-v1-inputs{
	width: 100%;
	color: lightgrey;
	border-radius: 5px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 30px;
	max-width: 700px;
}


.submit-text-area::-webkit-input-placeholder { 
	text-align:left; 
	/*font-size: 1.4em;*/
	color:  #907763;
}
	/* mozilla solution */
textarea:.submit-text-area -moz-placeholder { 
	text-align:left; 
	/*font-size: 1.4em;*/
	color:  #907763;
}

textarea{
	font-size: 1em;
}

.submit-text-area{
	width: 100%;
	color: lightgrey;
	border-radius: 5px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 30px;
	max-width: 700px;
}

.submit-v1-btn{
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	border: 1px solid #907763;
	background-color: #1d1d1d;
	border-radius: 2px;
	height: 24px;
	width: 82px;
	margin-left: -27;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-top: auto;
	display: inline;
	padding-bottom: 23px;
	color: rgb(163, 163, 163);	
}

.submit-v1-btn:active{
	background-color: #907763;
	color:  black;
	border-color: black;
}

.msg-board-msg{
	color:  black;
	padding: 8%;
	width: 80%;
	margin: auto;
	text-align: justify;
	padding-top: 4%;
	background-color: rgb(198, 198, 198);
	margin-top: 30px;
	padding-bottom: 2%;
	height: 90%;
	border-radius: 10px;
	position: relative;
}

.celebrate-submission-v1{
	background-color: #907763;
	color:  black;
}

.celebration-options-container{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
}

.celebration-ok{
	margin: auto;
	width: 70%;
	padding: 19px;
	background-color: beige;
	color: #d7b193;
	border: 1px solid grey;
	border-radius: 12px;
	text-align: center;
	background-color: black;

}

.celebration-ok:active{
	background-color: white;
}

/***** V1 Submit Drink ***/

/******** Ingredient Card ********/
.metrics-container{
	margin: auto;
	margin-bottom: 10px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	width: 80%;
}

.generate-metrics-conatiner{
	margin: auto;
	margin-bottom: 10px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 80%;
}

.add-ingredient-metric-title{
	color: #907763;
}

.add-ingredient-metric{
	color: white;
}

.master-ingredient-card-name-input-conatiner{
	width: 100%;
	text-align: center;
}

.master-ingredient-card-name-submit-btn{
	padding: 2px;
	border-radius: 5px;
	box-sizing: ;
	border: 1px solid #907763;
	width: 50%;
	margin: auto;
	margin-top: 20px;	
}

.ingredient-card-main-container{
	position: relative;
}

.ingredient-card-bottom-button-container{
	position: absolute;
	display: flex;
	background-color: rgb(8, 8, 8);
	justify-content: space-between;
	height: auto;
	bottom: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top: 3px solid #907763;	
	width: 100%;
}

body.inverted-mode .ingredient-card-bottom-button-container{
	background-color: rgb(55, 55, 55);
}

.ingredient-card-view{
	position: relative;
	height: 100%;
}

.units-column-container{
	display: flex;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .75em;
}

.lineage-column-container{
	display: flex;
	justify-content: space-evenly;
	padding-left: 10px;
	padding-right: 10px;
	font-size: .75em;	
}

.lineage-column{
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.lineage-del-btn{
	width: 14%;
}

.lineage-item-container{
	display: flex;
	justify-content: space-between;
	font-size: 1.5em;
	padding: 2px;
	padding-left: 9px;
	border: 1px solid rgb(68, 68, 68);
	border-radius: 18px;
	margin-bottom: 3px;
}

.lineage-header{
	text-align: center;
}

.lineage-footer{
	position: absolute;
	bottom: 86px;
	width: 100%;
	display: flex;
	justify-content: space-evenly;	
}

.lineage-add-button{
	border: .5px solid #545454;
	border-radius: 2px;
	background-color: rgb(34, 34, 34);
	padding: 2px;
	cursor: pointer;	
}


/********* End of Ingredient Card *********/



/******** FLAVOR MAP ********/

.flavor-map-ingredient-card-container{
	width: 80%;
	/* padding-bottom: 80%; */
	margin: auto;
	position: relative;
}

.flavor-map-title{
	text-align: center;
	color: #907763;
}


.dev-playground{
width:  80vw;
height: 80vw;
margin: auto;
margin-top: 10%;
}



 @media only screen and (max-width : 1024px) {
    .dev-playground {
			width:  66vw;
			height: 66vw;
			max-width: 440px;
			max-height: 440px;
    }
}

.flavor-map-legend{
	position: relative;
	width:  100%;
	/* height: 100%; */
	padding-bottom: 100%;
	background-color: rgb(17, 17, 17);
	border-radius: 50%;	
}

.flavor-map-legend-case{
	position: absolute;
	/* height: 111%; */
	width: 111%;
	padding-bottom: 110%;
	top: -5.5%;
	/* bottom: -10px; */
	left: -5.5%;
	/* right: -10px; */
	border: 1px solid #907763;
	border-radius: 50%;
}

body.inverted-mode .flavor-map-legend-case{
	border: 2px solid black;
	background-color: rgb(142, 119, 101);
}

.flavor-map-legend-border{
	width: 110%;
	/* border-top: 1px double #907763; */
	/* transform: rotateZ(-255deg); */
	position: absolute;
	left: -5%;
	bottom: 0px;
	top: 0%;
	right: 0%;
	margin: auto;	
	display: flex;
	flex-direction: column;
	align-itms: revert-layer;
	justify-content: space-evenly;	
}

.flavor-map-legend-border-line{
	background-color: #907763;
	height: 1px;
	width: 50%;
}

body.inverted-mode .flavor-map-legend-border-line{
	background-color: black;
}

.flavor-map-legend-item{
	/*transform-origin: top left;  */
	height: 109%;
	position: absolute;
	top:  0px;
	bottom:  0px;
	left: 0px;
	right:  0px;
	margin: auto;
	text-transform: uppercase;
	color:  #907763;
	/*color: rgba(144, 119, 99, 0.65);*/
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: .8em;
}

body.inverted-mode .flavor-map-legend-item{
	color: black;
	font-weight: bold;
}

@media only screen and (max-width: 500px) {
    .flavor-map-legend-item{
		font-size: .7em;
	}
}

/* For devices with screen width less than or equal to 400px */
@media only screen and (max-width: 400px) {
    .flavor-map-legend-item{
		font-size: .5em;
	}
}

/* For devices with screen width less than or equal to 300px */
@media only screen and (max-width: 300px) {
	.flavor-map-legend-item{
		font-size: .3em;
	}
}

.flavor-map-legend-character{
	height: 101%;
	position: absolute;
	top:  0px;
	bottom:  0px;
	left: 0px;
	right:  0px;
	margin: auto;
}

.flip-text{

}

.flavor-map-border-lines{

}

.flavor-map-border-box{
	height: .5px;
	width: 100%;
	/*border-top: 1px double #907763;*/
	/*transform: rotateZ(-255deg);*/
	position: absolute;
	left: 0px;
	bottom: 0px;
	top: 0px;
	right: 0px;
	margin: auto;	
}


.flavor-map-border-box-line{
	background-image: linear-gradient(to right, #907763 5%, rgba(255,255,255,0) 5%);
	background-position: bottom;
	background-size: 20px 20px;
	background-repeat: repeat-x;
	height: .5px;
	width: 50%;	
}


.flavor-map-container{
	text-align: center;
	margin: auto;
	width:  100%;
	max-width: 1000px;
	/* margin-top: 10%; */
	/* height: 100%; */
	/* padding-bottom: 100%; */
	max-height: 1000px;
	background-color: rgb(94, 94, 94);
	position: relative;
	 border-radius: 50%;
	background-color: rgb(20, 20, 20);
	border: 1px solid #907763;	
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */	 
}


.flavor-slider{
	width:  50%;
	position: absolute;
	top: 50%;
	bottom:  50%;
	right:  0px;
	left:  0px;
	transform-origin: left;
	
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */	
}


input[type=range] {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
} 


/*
input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: transparent;
}


input[type=range] .flavor-slider {
    -webkit-appearance: none;
    background: transparent;
}

input[type=range]::-moz-range-track {
    background: transparent;
}

input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: transparent;
}*/

/***here***/



.rando-div{
  border: 1px solid #000000;
  height: 100px;
  background-color: grey;
  width: 100px;   
  border-radius: 3px;
  margin-top:  100px; 
  margin-left:  100px;
  cursor: pointer;
  
  transform-origin: top left;  	
}


input[type=range]::-webkit-slider-thumb{
  box-shadow: none;
  height: 15vw;
  width: 15vw; 
  border-radius: 3px;
  background-color: transparent;
  /* background-color: rgba(144, 118, 99, 0.1); */
  cursor: pointer;
  -webkit-appearance: none;
  /* transform:  translateY(50%) rotateZ(-31deg) skewX(45deg) skewY(22.5deg) translateX(5%); */
  transform-origin: top left;  
  clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 100%);	
} 


input[type=range].flavor-slider::-webkit-slider-thumb{
	width: 12px!important;
	height: 12px!important;
	transform:  scale(var(--thumb-scale, 1)) translateY(var(--thumb-translateY, 0%)) rotateZ(-31deg) skewX(45deg) skewY(22.5deg) translateX(var(--thumb-translateX, -5%));
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;  
  clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 0% 100%);	
}

/***to here: those are crucial for***/

/*input[type=range]::-moz-range-thumb {}

input[type=range]::-ms-thumb {}*/



/*.flavor-slider-0{
	transform:  translate(100%, 100%) rotate(-72deg);
	transform-origin: left;
}


.flavor-slider-1{
	transform:  translate(100%, 100%) rotate(-36deg);
	transform-origin: left;	
}

.flavor-slider-2{
	transform:  translate(100%, 100%) rotate(0deg);
	transform-origin: left;		
}

.flavor-slider-3{
	transform:  translate(100%, 100%) rotate(36deg);
	transform-origin: left;			
}

.flavor-slider-4{
	transform:  translate(100%, 100%) rotate(72deg);
	transform-origin: left;		
}

.flavor-slider-5{
	transform:  translate(100%, 100%) rotate(108deg);
	transform-origin: left;		
}

.flavor-slider-6{
	transform:  translate(100%, 100%) rotate(144deg);
	transform-origin: left;		
}

.flavor-slider-7{
	transform:  translate(100%, 100%) rotate(180deg);
	transform-origin: left;			
}

.flavor-slider-8{
	transform:  translate(100%, 100%) rotate(216deg);
	transform-origin: left;			
}

.flavor-slider-9{
	transform:  translate(100%, 100%) rotate(252deg);
	transform-origin: left;			
}*/


.flavor-map-slice{
	border-radius: 50%;
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
}

.flavor-map-color-1 {
	
}

.flavor-map-color-2 {
	
}

.flavor-map-color-3 {
	
}

.flavor-map-color-4 {
	
}

.flavor-map-color-5 {
	
}

.flavor-map-color-6 {
	
}

.flavor-map-color-7 {
	
}

.flavor-map-color-8 {
	
}

.flavor-map-color-bitter{
	mask-image: radial-gradient(circle, white 0% 5%, transparent 90%);
}

.flavor-map-color-umami{
	mask-image: radial-gradient(circle, white 0% 1%, transparent 75%);
}

/*.flavor-map-color-savory{
	mask-image: radial-gradient(circle, white 0% 5%, transparent 100%);
}*/

.flavor-map-color-smoke{
	mask-image: radial-gradient(circle, grey 0% 1%, transparent 75%);
	
}


.update-flavor-button{
	width: 29%;
	text-align: center;
	margin: auto;
	margin-top: 82px;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
	font-weight: 300;	
}


.flavor-map-update-button-active{
	background-color: #907763;
	color: black;
	font-weight: 600;
	cursor: pointer;	
}

.flavor-map-update-button-active:active {
	background-color: white; 
}

.flavor-map-error{
	position: absolute;
	margin-top: 20px;
	/* bottom: 20px; */
	width: 100%;
	text-align: center;
	color: red;
	font-size: 12px;
}

/***** FLAVOR MAP END ********/



/***** 2.0 SEARCH ********/

.search-2-main-container{

}

.search-by-taste-results-container{
	padding-top: 72vh;
}

.search-by-text-results-container{

}

.search-by-taste-shrink-box-cover{
	margin: auto;
	width: 100%;
	/* position: fixed; */
	position: absolute;
	transform-origin: 0 0;
	/* margin-top: 63px; */
	z-index: 8;
	background-color: rgba(0, 0, 0, 0);
	padding-bottom: 0px;
	margin-bottom: 0px;
	box-sizing: border-box;	
}

.search-by-taste-shrink-box{
	margin: auto;
	width: 100%;
	/* position: fixed; */
	position: absolute;
	transform-origin: 0 0;
	/* margin-top: 63px; */
	z-index: 4;
	background-color: black;
	border-bottom-right-radius: 40%;
	padding-bottom: 0px;
	margin-bottom: 0px;
	box-sizing: border-box;
	max-height: 500px;
}

.search-by-taste-small-ref-container{
	pointer-events: none;
	margin-top: 0px;
	position: fixed;
	margin-top: 11px;
	left: 0px;
	right: 0px;
	z-index: 7;
	display: flex;
	align-items: center;
	margin-left: 0px;	
}

.search-by-taste-header{
	justify-content: center;
	font-style: italic;
	text-align: center;
	width: 56%;
	color: darkgrey;
	margin: auto;
}

@media (max-width: 400px) {
	.search-by-taste-header{
		font-size: .75em;
	}
}


.search-by-taste-btn{
	width: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	height: 25px;
	margin: auto;
	margin-top: 25%;
	margin-bottom: 11%;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
}

.search-by-taste-button-active{
	background-color: #907763;
	color: black;
	font-weight: 600;
	cursor: pointer;	
}

.search-2-header{
	text-align: center;
	width: 100%;
	/* position: absolute; */
	/* background-color: color(srgb 0.0941 0.0941 0.0941); */
	z-index: 5;
	height: 63px;
	top: 0px;
	padding-top: 30px;
}

.search-flavor-map-container{
	width: 80%;
	max-width: 385px;
	/* margin: auto; */
	/* margin-left: 0%;
	margin-right: 0%; */
	display: inline-block;
	vertical-align: middle;	
	pointer-events: visible;
}

.search-aide-container{
	position: absolute;
	left: 0px;
	right: 0px;
	display: flex;
	justify-content: space-around;
	top: -10%;
	color: #907763;
	width: 100%;
	font-size: 2em;
}

body.inverted-mode .search-aide-container{
	color: black;
}

.search-aide-flavor{
	width: 50%;
	text-align: right;
	/* padding-right: 5px; */
	margin-right: 5px;
}

.search-aide-score{
	width: 50%;
	text-align: left;
	/* padding-left: 5px; */
	margin-left: 5px;
}

.search-2-tabs{
	width: 100%;
	display: flex;
	height: 36px;
	border-bottom: 6px solid #907763;
	z-index: 6;
	/* position: absolute; */
	/* top: 28px; */
	/* padding-top: 26px; */
}

.search-2-tab{
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	border: 1px solid grey;
	border-bottom: none;
	border-radius: 25px 25px 0px 0px;
	background-color: black;
	color: grey;
	font-weight: 300;
	cursor: pointer;
}

.search-2-tab-active{
	background-color: #907763;
	color: black;
	font-weight: 600;
}



.search_2_img{
	height: auto;
	width: 22px;
	margin: auto;
	text-align: center;
}


.search-flavor-map-container{
	/* margin-top:11%;
	this is handled dynamically on the div */
}


/****** 2.0 SEARCH END ******/



/*** Holiday Stuff ***/

.holiday-symbol{
	height: 2vh;
	margin-bottom: -1px;
	padding-right: 4px;
}


/************* Similar Recipes *************/

.similar-ingredient-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
	gap: 12px;
	margin: 12px;
	position: relative;
}

.similar-ingredients-blurb{
	margin: auto;
	font-size: 0.85em;
	width: 95%;
	margin-bottom: 11px;
	margin-top: 9px;
	color: #907763;
}

.similar-ingredient-container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	border: 1px solid rgba(144, 119, 99, 0.39);
	border-radius: 12px;
	padding: 2px;
	background-color: rgb(23, 23, 23);
}


.similar-ingredient-container:active{
	background-color: rgb(47, 47, 47);
}

.similar-ingredient-map{
	font-size: .1em;
	flex-grow: 1;
	width: 70%;
	margin: auto;
	margin-top: 12%;
	margin-bottom: 8%;
}

.similar-ingredient-name{
	color: grey;
	height: 20px; /* Set a fixed height */
	line-height: 20px; /* Centers text vertically */
	text-align: center;
	font-size: .75em;
}

.similar-ingredient-score{
	text-align: center;
	color: grey;
}


.similar-recipes-container{
	font-size: .7em;
	width: 100%;
	border-top: 1px solid grey;
	background-color: black;
	color: #907763;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 66px;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	height: 68px;
	transition: height 0.5s;
}



.similar-recipes-container-open{
	height: 233px;
	transition: height 0.2s, border-radius 0.3s; 
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding-top: 11px;	
}

.similar-recipes-header{
	/* border-bottom: 1px dashed #907763; */
	padding-bottom: 10px;
	font-size: 1.5em!important;
	margin-left: 10px;
}


.similar-recipes-maps-container{
	display: flex;
	justify-content: space-between;
}

.similar-recipe-map-name{
	height: 15px;
	text-align: center;
}

.similar-flavor-map{
	margin-top: 28px;
	font-size: 0em;
}

.similar-recipe-map{
	width: 20%;
	margin-left: 10px;
	margin-right: 10px;
}

.recommended-similarity-score{
	text-align: center;
	width: 100%;
	margin-top: 10px;
}

@keyframes fadeInColor {
    0% {
        color: transparent;
    }
    100% {
        color: white;
    }
}

.recommendations-subscribe-message{
	position: absolute;
	text-align: center;
	width: 80%;
	margin: auto;
	z-index: 2;
	left: 0px;
	right: 0px;
	margin-top: 47px;
	color: white;
	animation: fadeInColor 0.5s ease-in-out;
	background-color: rgba(0, 0, 0, 0.66);
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #907763;	
}


.blur-recommendations{
	filter: blur(2px);
	display: flex;
	width: 100%;
	justify-content: space-between;
}


.info-card-substitutes-subscriber-mask{
	background: rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: absolute;
	bottom: 0;
	top: 0;
	z-index: 1;
	border-radius: 10px;
	display: flex;
}

.info-card-mask-blurb{
	margin: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: red;
	background-color: rgb(10, 10, 10);
	width: 64%;
	padding: 17px;
	border: 1px solid #907763;
	border-radius: 15px;
}

/************* Similar Recipes End *************/


/************* Search By Text *************/


.search-text-container{
	text-align: center;
	padding-top: 115px;

}

.search-bar-container-2{
	margin: auto;
	position: relative;
}

.search-bar-input-2{
	pointer-events: visible;
	width: 100%;
	max-width: 430px;
	
	height: 37px;
	/* width: 99%; */
	margin: auto;
	color: #6c6c6c;
	border-radius: 35px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #474747;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 4px;	
}

.search-bar-input-3{
	pointer-events: visible;
	width: 100%;
	max-width: 430px;
	
	height: 37px;
	/* width: 99%; */
	margin: auto;
	color: #6c6c6c;
	border-radius: 35px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #474747;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 4px;	
}

@media only screen and (max-width: 460px){
	/* .search-bar-input-2 {
		width: 85%;
	}

	.ingredient-search-input-spinner-wrapper{
		width: 85%!important;
	} */

}


.search-item-2{
	padding: 7px 0px 7px 15px;
	/* border-style: dotted solid double dashed; */
	border-bottom: 1px dashed rgb(51, 51, 51);	

	/* border-bottom: 1px dashed #907763; */
	display: flex;
	justify-content: space-between;
	cursor: pointer;
}

.search-item-2:hover{
	background-color: rgb(54, 54, 54);
}

.search-item-title{
	color: darkgrey;
}

.search-item-content{
	color: #907763;
	padding-right: 10px;
	text-align: right;
}

.search-list-2-off{
	height: 0%;
	max-height: 0px;	
	transition: height 0.5s;
}


.search-list-2-on{
	position: absolute;
	width: 99%!important;
	max-width: 433px;
	max-height: 87%;
	max-height: 72vh!important;
	margin: auto;
	padding-top: 34px;
	/* padding-bottom: 100px; */
	margin-top: -23px;
	width: 65%;
	left: 0;
	right: 0;
	overflow: scroll;
	background-color: #000000e3;
	z-index: 1;
	color: #b3b3b3;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border: 1px solid #1a1a1a;
	transition: height 0.5s;
	pointer-events: visible;
}

.search-list-3-off{
	height: 0%;
	max-height: 0px;	
	transition: height 0.5s;
}


.search-list-3-on{
	position: absolute;
	width: 99%!important;
	max-width: 433px;
	max-height: 87%;
	max-height: 72vh!important;
	margin: auto;
	padding-top: 34px;
	/* padding-bottom: 100px; */
	margin-top: -23px;
	width: 65%;
	left: 0;
	right: 0;
	overflow: scroll;
	background-color: #000000e3;
	z-index: 1;
	color: #b3b3b3;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border: 1px solid #1a1a1a;
	transition: height 0.5s;
	pointer-events: visible;
}

@media only screen and (max-width: 460px){
	.search-list-2-on{
		width: 85%!important;
	}
}

/************* Search By Text End *************/


/************* 2.0 Ingredient Card Display *********/



.ingredient-photo-prev{
	width: 100%;
	text-align: center;
	margin-top: 5%;	
}


.ingredient-method-garnish-creation-box{
	margin: auto;
	text-align: center;
	margin-top: 19px;
	width: 50%;
	/* background-color: rgb(15, 15, 15); */
	padding: 5px;
	border-radius: 5px;
	color: #907763;
	display: flex;
	justify-content: space-between;	
}

.create-method-garnish-from-ingredient-btn{
	padding: 5px;
	background-color: rgb(18, 18, 18);
	border: 1px solid #907763;
	border-radius: 4px;
}

.create-method-garnish-from-ingredient-btn:active{
	background-color: #907763;
	color: black;
}




.v2-recipe-card-container{
	
	position: relative;
	max-width: 460px;	
	margin: auto;
	box-sizing: border-box;
}

.open-ingredient-recipe-card {
	animation: slideIn 130ms ease-out;
	opacity: 1;
	display: block;
	position: absolute;
	top: 0;
	border: 2px solid #907763;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 1);
	border-radius: 9px;
	box-sizing: border-box;
  }

  body.inverted-mode .open-ingredient-recipe-card{
	background-color: rgba(101, 90, 85, 1);
  }
  
.closed-ingredient-recipe-card {
	opacity: 0;
	display: none;
}
  
@keyframes slideIn {
	0% {
	  transform: translateX(-500px);
	}
	100% {
	  transform: translateX(0);
	}
}

.ingredient-recipe-card-dynamic-container{

}

.imbiblia-spinner-ingredient-card-container{
	margin: auto;
	margin-top: 39%;
	position: absolute;
	z-index: 0;
	margin-bottom: 10%;
	left: 0;
	right: 0;
	top: 1.5%;
	width: 150px;
	height: 150px;
	bottom: 0;
	border: 2.5px solid #907763;
	border-radius: 50%;	
}



/***** mini spinner ********/

.loading-ingredient-spinner-container{
	margin: auto;
	text-align: center;
	color: #907763;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ingredient-input-spinner-container{
	position: absolute;
    right: 5px; /* Adjust based on desired right padding */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}


.ingredient-search-input-spinner-wrapper{
	position: relative;
	width: 90%;
	max-width: 430px;
	margin: auto;	
}


.mini-imbiblia-spinner-component-container{
	width: 20px;
	height: 20px;
	position: relative;
}

#mini-spinner-1{
    position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 8px;
	height: 8px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: #907763;
	border-left-color: #907763;
    -webkit-animation: spin 1.7s linear infinite;
    animation: spin 1.7s linear infinite;
}

#mini-spinner-2{

    position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 12px;
	height: 12px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: #907763;
	border-right-color: #907763;
    -webkit-animation: spin 0.5s linear infinite;
    animation: spin 0.5s linear infinite;
}

#mini-spinner-3{
    position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 20px;
	height: 20px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: #907763;
	border-left-color: #907763;
    -webkit-animation: spin 2.7s linear infinite;
    animation: spin 2.7s linear infinite;
}

/***** end of mini spinner *****/

/********* END 2.0 Ingredient Card Display *********/


/************* 2.0 add Ingredient Card *********/

.add-ingredient-input-container{
	margin: auto;
	width: 80%;
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: center;
}

.submit-ingredient-name-btn{
	width: 29%;
	text-align: center;
	margin: auto;
	margin-top: 82px;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
	font-weight: 300;	
}

.submit-admin-item-name-btn{
	width: 29%;
	text-align: center;
	margin: auto;
	margin-top: 20px;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
	font-weight: 300;		
}

.waiting-on-server-response{
	background-color: red;
	color: black;
}

.add-ingredient-server-msg{
	margin-top: 40px;
}

.ingredient-status-container{
	width: 80%;
	margin: auto;
	margin-top: 10px;
}

.status-item{
	color: White;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-bottom: 15px;
	margin-top: 15px;
}

.admin-item-switch-container{
	text-align: center;
	display: flex;
	justify-content: space-evenly;
	margin-top: 5px;
}

.new-ingredient-name{
	color: #907763;
	font-size: 1.2em;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}

.generate-ingredient-part-button{
	width: 60%;
	/* margin: auto; */
	padding: 5px;
	font-size: .8em;
	text-align: center;
	cursor: pointer;
	margin: auto;
	margin-bottom: 11px;
	border: 1px solid 	#907763;
	border-radius: 6px;
	background-color: rgb(17, 17, 17);
	color: #907763;
	font-size: 1.1em;	
	position: absolute;
	bottom: 100px;
	left: 0;
	right: 0;
}

.generate-flavor-map-conatiner{
	width: 85%;
	margin: auto;
}

.generate-ingredient-part-textarea{
	margin: auto;
	margin-top: 20px;
	width: 100%;
	height: 450px;
	background-color: black;
	color: #907763;
	border: 1px solid #907763;
	border-radius: 6px;
	padding: 5px;
	font-size: 1.1em;
}

.color-dot-container-card-nav{
	height: 38px;
	margin: 3px!important;
	text-align: center;
	display: flex;
	justify-content: space-around;	
}

.ingredient-color-circle{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	top: -5px;
	left: 10px;
}

.ingredient-color-circle-bottom-nav{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1.5px solid black;
}

.ingredient-card-header-image-container{
	width: 25px;
	height: 25px;
	position: absolute;
	top: -5px;
	left: 10px;
}

.solid-ingredient-card-header-img{
	width: 100%;
}



.color-picker-admin-container{
	width: 80%;
	margin: auto;
	text-align: center;
	margin-top: 30%;
}

.color-picker-admin{
	width: 100%;
	height: 100px;
	margin: auto;
}

.delete-ingredient-confirmation-screen{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
	background-color: black;
	z-index: 1;
	width: 60%;
	border: 1px solid #907763;
	margin: auto;
	height: 50%;
	padding: 10px;
	text-align: center;
}

.message-screen-btn{
	width: 29%;
	text-align: center;
	margin: auto;
	margin-top: 82px;
	border: 1px solid grey;
	border-radius: 50px;
	background-color: black;
	color: grey;
	font-weight: 300;
}

.message-screen-option-container{
	display: flex;
	justify-content: space-around;
}

.delete-ingredient-button{
	width: 60%;
	/* margin: auto; */
	padding: 5px;
	font-size: .8em;
	text-align: center;
	cursor: pointer;
	margin: auto;
	margin-bottom: 11px;
	border: 1px solid 	#545454;
	border-radius: 6px;
	background-color: rgb(37, 37, 37);
	color: rgb(217, 217, 217);
	font-size: 1.1em;	
	position: absolute;
	bottom: 140px;
	left: 0;
	right: 0;
}

.delete-item-button{
	width: 60%;
	/* margin: auto; */
	padding: 5px;
	font-size: .8em;
	text-align: center;
	cursor: pointer;
	margin: auto;
	margin-bottom: 11px;
	border: 1px solid 	#545454;
	border-radius: 6px;
	background-color: rgb(37, 37, 37);
	color: rgb(217, 217, 217);
	font-size: 1.1em;	
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
}

/************* 2.0 add Ingredient Card End *********/

/************** 2.0 Imbiblia switch *************/


#imbiblia-switch{
	height: 0;
	width: 0;
	visibility: hidden;
}

.imbiblia-switch-label {
	cursor: pointer;
	text-indent: -9999px;
	width: 50px;
	height: 27px;
	background: #907763;
	display: block;
	border-radius: 25px;
	position: relative;
	border: 1px solid #907763;
}

.imbiblia-switch-label:after {
	content: '';
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 20px;
	height: 20px;
	/* background: rgb(41, 41, 41); */
	background: black;
	border-radius: 20px;
	transition: 0.3s;
}

#imbiblia-switch:checked + .imbiblia-switch-label {
	background: black;
}

#imbiblia-switch:checked + .imbiblia-switch-label:after {
	left: calc(100% - 2.5px);
	transform: translateX(-100%);
    background: #907763;
}

.imbiblia-switch-label:active:after {
	width: 25px;
}

input[type="checkbox"][data-id] {
	height: 0;
	width: 0;
	visibility: hidden;
  }
  
  [data-label-for] {
	cursor: pointer;
	text-indent: -9999px;
	width: 50px;
	height: 27px;
	background: #907763;
	display: block;
	border-radius: 25px;
	position: relative;
	border: 1px solid #907763;
  }
  
  [data-label-for]:after {
	content: '';
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 20px;
	height: 20px;
	background: black;
	border-radius: 20px;
	transition: 0.3s;
  }
  
  input[type="checkbox"]:checked + [data-label-for] {
	background: black;
  }
  
  input[type="checkbox"]:checked + [data-label-for]:after {
	left: calc(100% - 2.5px);
	transform: translateX(-100%);
	background: #907763;
  }
  
  [data-label-for]:active:after {
	width: 25px;
  }
  

/************** 2.0 Imbiblia switch End *************/


/************** User Requests ************/

.user-requests-list-container{
	text-align: center;
}

.bar-log-container{
	text-align: center;
	max-width: 450px;
	margin: auto;
	margin-bottom: 300px;
	margin-top: 221px;
}

.bar-log-disclaimer{
	width: 77%;
	margin: auto;
	font-size: .5em;
	color: rgb(103, 103, 103);
	margin-bottom: 10px;
}

/* Define your keyframes for expanding and collapsing */
@keyframes expand {
	from {
	  height: 7%;
	}
	to {
	  height: 75%;
	}
  }
  
  @keyframes collapse {
	from {
	  height: 75%;
	}
	to {
	  height: 7%;
	}
  }
  
  .bar-log-request-section {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: 44px;
	height: 7%;
	background-color: black;
	width: 100%;
	color: rgb(103, 103, 103);
	/* Set a default transition time for smooth animation */
	transition: height 0.5s ease;
	z-index:6;
  }
  
  .bar-log-request-section-collapsed {
	height: 7%;
	animation: collapse 0.5s ease forwards;
  }
  
  .bar-log-request-section-expanded {
	height: 75%;
	animation: expand 0.5s ease forwards;
  }
  

  .bar-log-request-tab-container{
	  display: flex;
	  justify-content: space-around;
	  margin-top: 10px;
	  border-bottom: 3px solid #907763;	  
  }

  .bar-log-request-section-header{
	width: 100%;
	border-top: 1px solid #907763;
	padding-top: 10px;
  }

  .bar-log-request-tab{
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border: .5px solid rgb(84, 84, 84);
	border-bottom: 1px solid #907763;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	color: rgb(98, 97, 97);
	font-size: .6em;
	background-color: rgb(20, 20, 20);
  }


  .active-request-tab{
	color: black;
	background-color: #907763;
	border: 1px solid #907763;
	border-bottom: 1px solid #907763;

  }

  .bar-log-request-section-body-title{
	  font-size: .8em;
	  margin: auto;
	  margin-top: 10px;
	  margin-bottom: 10px;
	  width: 90%
  }



  .bar-log-request-section-body-input{
		margin: auto;
		margin-top: 20px;
		width: 90%;
		max-width: 450px;
		height: 300px;
		background-color: black;
		color: #907763;
		border: 1px solid #907763;
		border-radius: 6px;
		padding: 5px;
		font-size: 1.1em;	
  }


  .submit-request-button{
	  margin: auto;
	  margin-top: 20px;
	  margin-bottom: 20px;
	  width: 90%;
	  max-width: 150px;
	  background-color: black;
	  color: darkgray;
	  border: 1px solid #907763;
	  border-radius: 6px;
	  padding: 5px;
	  font-size: 1.1em;
  }


  .request-message-container{
	width: 98%;
	max-width: 450px;
	margin: auto;
	padding: 5px;
	margin-top: 10px;
	color: black;
	/* background-color: rgb(42, 42, 42); */
	background-color: rgb(10, 10, 10);
	border: 1px solid black;
	border-radius: 7px;
	border: .5px solid #584a3e;
	margin-top: 35px;
  }

  .request-message-header{
	display: flex;
	justify-content: space-between;
	font-size: .7em;
	margin-bottom: 5px;
	color: rgb(51, 51, 51);
  }

  .request-subheader{
	display: flex;
	justify-content: space-between;
	font-size: .9em;
	margin-bottom: 5px;
  }

  .request-message-body{
	width: 98%;
	margin: auto;
	margin-bottom: 15px;
	text-align: left;
	color: rgb(163, 163, 163);
	background-color: rgb(20, 20, 20);
	padding: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 5px;
  }



.ingredient-request-color{
	color: #907763;
}

.feature-request-color{
	color: rgba(144, 119, 99, 0.34);
}

.garnish-request-color{
	color: #907763;
}
  

.method-request-color{
	color: #907763;
}


.bug-report-color{
	color: rgb(161, 0, 0);
}

.status-requested{
	color: rgb(50, 49, 49);
}


@keyframes inProgress {
	0% {
	  color: #907763;
	}
	33% {
	  color: grey;
	}
	66% {
	  color: black;
	}
	100% {
	  color: #907763;
	}
  }

.status-in-progress{
	animation: inProgress 3s infinite;
}

.status-completed{
	color: rgb(17, 161, 0);
}


.message-admin-label{
	color: grey;
}

.message-request-admin-container{
	padding: 5px;
	display: flex;
	justify-content: space-between;
}

.request-message-choices-container{
	height: 100%;

}

.message-active-section{
	flex: 1;
}

.message-status-section{
	flex: 4;
	font-size: .75em;
}


.message-active-title{
	text-align: left;
}

.request-screen{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.26);
	z-index:5;
}

.admin-requests-tab-container{
	display: flex;
	justify-content: space-evenly;
	border-bottom: 3px solid #907763;
}

.bar-log-header{
	text-align: center;
	position: absolute;
	background-color: rgb(15, 15, 15);
	z-index: 4;
	top: 0;
	height: 154px;
	width: 100%;
	border-bottom: 4px solid #907763;
}

.bar-log-requests-tab-container{
	display: flex;
	justify-content: space-evenly;
	border-bottom: 3px solid #907763;
}

.admin-response-input{
	border-radius: 5px;;
	height: 150px;
	background-color: black;
	border: 1px solid rgb(46, 46, 46);
	width: 100%;
	margin-top: 21px;
	color: #907763;
}

.admin-compose-response-container{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.admin-response-to-request-submit{
	margin: auto;
	width: 50%;
	border-radius: 10px;
	color: black;
	background-color: #907763;
	padding: 5px;
	margin-top: 40px;
	margin-bottom: 10px;
}

.admin-response-to-request-submited{
	margin: auto;
	width: 50%;
	border-radius: 10px;
	color: #907763;
	background-color: black;
	padding: 5px;
	margin-top: 40px;
	margin-bottom: 10px;
}

.bar-log-admin-response-container{
	position: relative;
}


.bar-log-admin-response{
	margin: auto;
	background-color: rgb(50, 50, 50);
	/* color: #0e0e0e; */
	color: #907763;
	padding: 10px;
	width: 80%;
	border-radius: 20px;
	transform: translateX(-35px);
	margin-top: 10px;
	position: relative;
	z-index: 1;
	font-size: .8em;
}

.left-side-swoop{
	position: absolute;
	bottom: -25px;
	left: 30px;
	transform: scaleX(-1) scaleY(-1) rotate(31deg);
	z-index: -1;
}

.request-voting-container{
	width: 100%;
	text-align: right;
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	padding: 10px;
}

.request-votes{
	color: #907763;
	font-size: .8em;
	margin-right: 5px;
	margin-left: 5px;;
}


.up-vote{
	transform: rotate(180deg);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.message-request-delete-container{
	margin: auto;
	margin-top: 20px;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: space-around;
}

.message-request-delete{
	border-radius: 10px;
	color: black;
	background-color: #3e3e3e;
	padding: 3px;
	padding-left: 13px;
	padding-right: 13px;
	margin-top: 40px;
	margin-bottom: 10px;
}
  
/************** End User Requests ************/


/************ Ingredient Info Card *************/

.ingredient-info-card{
	height: 100%;
	overflow: auto;
}

.ingredient-info-card-header-title{
	text-align: center;
	color: #907763;
	font-size: 1.5em;
	padding-top: 5px;
}

.ingredient-info-card-description{
	text-align: left;
	color: #907763;
	font-size: 1em;
	padding: 36px;
	white-space: pre-line;
	overflow: scroll;
	height: 575px;	
	padding-bottom: 200px;
}

.ingredient-info-card-description::after {
	content: "";
	position: absolute;
	bottom: 9%;
	left: 0;
	right: 0;
	height: 200px; /* You can adjust the height to control the extent of the fade */
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	pointer-events: none;
  }

/********** End Ingredient Info Card ***********/


/************* Recipe Settings **************/

.recipe-settings-container{
	width: 100%;
}


.share-with-employer-container{
	margin-top: 50px;
}

.share-with-employer{
	width: 60%;
	/* margin: auto; */
	padding: 5px;
	font-size: .8em;
	text-align: center;
	cursor: pointer;
	margin: auto;
	margin-bottom: 11px;
	border: 1px solid 	#907763;
	border-radius: 6px;
	background-color: rgb(17, 17, 17);
	color: #907763;
	font-size: 1.1em;
	margin-top: 5px;
	margin-bottom: 5px;
}

.shared-with-employer{
	text-align: center;
	font-style: italic;
	color: #907763;
}


/********** END Recipe Settings **************/


/*********** Account Settings *************/

.account-settings-container{
	width: 90%;
	margin: auto;
}

.account-settings-title{
	text-align: center;
	color: #907763;
	font-size: 1.5em;
	padding-top: 5px;
}


.delete-account-btn{
	border-radius: 10px;
	color: black;
	background-color: #3e3e3e;
	padding: 3px;
	padding-left: 13px;
	padding-right: 13px;
	max-width: 300px;
	margin: auto;
	margin-top: 5%;
	text-align: center;
}

.delete-account-btn:active{
	background-color: #907763;
	color: black;
}

.delete-account-modal-container{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: 400px;
	max-height: 500px;
	background-color: rgba(0,0,0,.5);
	z-index: 100;
	display: none;
	justify-content: center;
	align-items: center;
	margin: auto;
	border-radius: 10px;
	border: .5px solid rgba(144, 119, 99, 0.56);
	color: grey;
}

.delete-account-modal-body-input{
	margin: auto;
	width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}

.delete-account-modal-title{
	text-align: center;
	color: #907763;
	font-size: 1.5em;
	padding-top: 5px;
}

.delete-account-modal-visible{
	display: flex;
	flex-direction: column;
	justify-content: space-around;	
	padding: 20px;
}

.delete-account-permanently-button{
	border-radius: 10px;
	color: black;
	background-color: #3e3e3e;
	padding: 3px;
	padding-left: 13px;
	padding-right: 13px;
	max-width: 300px;
	margin: auto;
	margin-top: 5%;
	text-align: center;
}

.delete-account-permanently-button:active{
	background-color: #907763;
	color: black;
}

.delete-input{
	background-color: rgb(34, 34, 34);
	border-radius: 4px;
	box-shadow: none;
	border: 1px solid rgb(51, 51, 51);
	width: 100%;
	padding: 5px;
	text-align: left;
	color: #907763;
}

.user-bio-container {
	margin-top: 25px;
	margin-bottom: 25px;
	border-top: 1px dashed#907763;
	padding-top: 15px;
	padding-bottom: 15px;
  }
  
  .user-bio-title {
	text-align: center;
	color: #907763;
  }
  
  .user-bio-content {
	/* Styles for the user bio content */
  }

  .profile-info-container{
	max-width: 50%;
  }
  
.dm-btn-container{
	height: 47px;
	width: 47px;
	margin: auto;
	margin-top: 20px;
	text-align: center;
	background-color: black;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	border-radius: 50%;
	border: 1px solid #907763;
	position: relative;
}

body.inverted-mode .dm-btn-container{
	background-color: color(srgb 0.2982 0.2492 0.2328);
}

.dm-btn-container:active{
	background-color: #907763;
	color: black;
}

.dm-btn-container:active img{
	filter: brightness(0);
}

.dm-btn-img{
	width: 39px;
	height: auto;
}

  .user-bio-input {
	background-color: black;
	color: #907763;
	padding: 6px;
	border: 1px solid rgb(83, 83, 83);
	border-radius: 5px;
	width: 90%;
	margin: auto;
	display: flex;
	margin-top: 10px;
  }
  
  .user-bio-save-btn {
	/* Styles for the user bio save button */
	margin: auto;
	width: 70px;
	text-align: center;
	margin-top: 20px;
	background-color: #907763;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgb(77, 74, 74);
	color: black;	
  }
  
  .user-bio-text {
	/* Styles for the user bio text */
	margin-top: 10px;
	color: grey;

  }
  
  .user-bio-edit-btn {
	/* Styles for the user bio edit button */
	margin: auto;
	width: 70px;
	text-align: center;
	margin-top: 20px;
	background-color: grey;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgb(77, 74, 74);
	color: rgb(48, 48, 48);	
  }

  .profile-bio{

  }
  
  .place-of-work-container {
	margin-top: 25px;
	margin-bottom: 25px;
	border-top: 1px dashed#907763;
	padding-top: 15px;
	padding-bottom: 15px;		
  }
  
  .place-of-work-title {
	text-align: center;
	color: #907763;
  }
  
  .place-of-work-content {
	margin: 20px;
	text-align: center;
  }
  
  .place-of-work-input {
	background-color: black;
	color: #907763;
	padding: 6px;
	border: 1px solid rgb(83, 83, 83);
	border-radius: 5px;
	width: 90%;
  }
  
  .place-of-work-save-btn {
	margin: auto;
	width: 70px;
	text-align: center;
	margin-top: 20px;
	background-color: #907763;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgb(77, 74, 74);
	color: black;		
  }
  
  .place-of-work-text {
	color: grey;
  }
  
  .place-of-work-edit-btn {
	margin: auto;
	width: 70px;
	text-align: center;
	margin-top: 20px;
	background-color: grey;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgb(77, 74, 74);
	color: rgb(48, 48, 48);		
  }
  
  .place-of-work-visibility-toggle {

  }
  
  .place-of-work-visibility-label {
	text-align: center;
	margin-top: 20px;
	color: #907763;
  }

  .toggle-switch-container-account-settings{
	margin: auto;
	margin-top: 20px;
	text-align: center;
	display: flex;
	justify-content: space-around;
  }


  .profile-links-title{
	margin-top: 10%;
	margin-bottom: 5%;
  }

  .share-profile-element{
	margin-top: 5%;
	margin-bottom: 5%;
  }

  .profile-qr-code{
	background-color: black;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 300px;
	margin: auto;
	height: 310px;
	z-index: 11;
	border-radius: 10px;
  }

  .qr-profile-title{
	text-align: center;
	color: #907763;
	padding-top: 9px;
  }

/*********** END Account Settings *************/


/********** Terms of Service Page *************/

.terms-of-service-page{
	width: 80%;
	margin: auto;
	margin-top: 10%;
	color: grey;
	margin-bottom: 400px;	
}

.terms-of-service-header{
	text-align: center;
	color: #907763;
	font-size: 1em;
	padding-top: 5px;
}


.terms-imbiblia-title{
	text-align: center;
	color: #907763;
	font-size: 1.5em;
	padding-top: 5px;
}

.terms-of-service-title{
	text-align: center;
	color: rgb(135, 53, 53);
	font-size: 1.5em;
	padding-top: 5px;
}

/*********** END of Terms of Service Page *****/



/************ EDIT Recipe stuff *************/

.edit-recipe-question-screen{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: #907763;
}

.edit-recipe-question-screen-header{
	margin-bottom: 20px;
}

.edit-recipe-question-screen-body{
	margin-bottom: 40px;
}

.edit-recipe-question-screen-choices-container{
	display: flex;
	justify-content: space-around;
}

.edit-recipe-choice{
	padding: 6px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: rgb(42, 42, 42);
	border-radius: 20px;
	border: 1px solid #474645;
	width: 35%;
	color: #907763;
}

.edit-recipe-choice:active{
	background-color: #907763;
	color: black;
}


/************ END EDIT Recipe stuff *************/


/************** Profile Tag *****************/

.profile-tag-pic{
	width: 70px;
	height: 70px;
	border: 2.5px solid #907763;
	border-radius: 50%;
	margin: 10px;
}


.profile-tag-container{
	display: flex;
	justify-content: space-evenly;
	margin: auto;
	width: 95%;
	max-width: 400px;
	border: 1px solid #907763;
	border-radius: 5px;
	margin-bottom: 10px;
}

.profile-tag-container:active{
	background-color: #907763;
	color: black;
}

.profile-tag-username{

}

.profile-tag-user-info{
	width: 60%
}

.follow-container{
	margin-top: 50px;
}

.follow-title{
	text-align: center;
	margin: 13px;
	color: #907763;
}

.profile-tag-user-info{
	padding-top: 4px;
}

.profile-tag-recipes{
	margin-bottom: 3px;
	color: #907763;
}

.profile-tag-username{
	margin-bottom: 3px;
	color: #907763;
}

.profile-tag-place-of-work{
	margin-bottom: 3px;
	/* color: #907763; */
	color: rgb(166, 162, 162);
}

.profile-tag-recipe-number{
	color: rgb(166, 162, 162);
}

.profile-tag-sub-type{
	color: rgb(63, 176, 63);
}

.profile-tag-sub-date{
	color: rgb(179, 107, 179);
	margin-bottom: 6px;
	margin-top: 3px;
}

/************** END profile Tag ***********/



/*********** Direct Messaging *************/


.direct-messaging {
	display: flex;
	height: 100%;
	flex-direction: column;
	margin-bottom: 200px;
}

.create-conversation{
	padding-bottom: 20px;
	text-align: center;
}

.back-to-conversations{
	width: 8%;
	border-bottom-right-radius: 48%;
	position: absolute;
	top: 40px;
	left: 0px;
	right: 0px;
	background-color: black;
	height: 43px;
}

  .dm-notification-badge{
	background-color: red;
	color: white;
	position: absolute;
	right: -8px;
	top: -4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: .8em;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 1px;
  }


  .navbar-notification-badge{
	background-color: red;
	color: white;
	position: absolute;
	right: -2px;
	top: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	font-size: .5em;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 1px;
  }
  
  .conversation-list {
	width: 100%;
	background-color: #343434;
	padding: 10px;
	margin: auto;
	margin-top: 0px;
	max-width: 1000px;
  }

  .chat-search-list{
	max-width: 429px;
	border-bottom: 1px solid rgba(148, 121, 100, 0.74);
	border-left: 1px solid rgba(148, 121, 100, 0.74);
	border-right: 1px solid rgba(148, 121, 100, 0.74);
	background-color: rgb(22, 22, 22);
	width: 98.5%;	
  }
  
  .conversation-item {
	padding: 10px;
	cursor: pointer;
	background-color: black;
	border-bottom: 1px dashed #907763;
	color: #907763;
	display: flex;
	justify-content: space-between;	
  }

  .unread-conversation{
	background-color: #0a1941;
  }

  .conversation-item:active{
	background-color: darkgrey;
	color: black;
  }
  
  .conversation-item.selected {
	background-color: #000000;
	color: #907763;
  }

  .convo-snippet{
	color: rgba(128, 128, 128, 0.6);
	font-size: .8em;
	padding-left: 12px;
  }

  .conversation-title{
	color: #907763;
	width: 80%;
	height: auto;
  }

  .delete-convo-btn{
	color: red;
  }
  
  .conversation-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 40px;
  }
  
  .message-list {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
	padding-bottom: 144px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;	
  }

  .back-btn-top-bar{
	height: 40px;
	width: 100%;
	background-color: black;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
  }

  .dm-message-send-btn{
	position: relative;
	width: 30px;
	border: 1.5px solid #907763;
	height: 30px;
	border-radius: 50%;
  }

  .send-messge-icon{
		margin: auto;
		left: -4px;
		right: 0px;
		top: 0px;
		bottom: 0px;
		width: 12px;
		height: 12px;
		position: absolute;
		transform: rotate(135deg);
		border-top: 2px solid #907763;
		border-left: 2px solid #907763;
		cursor: pointer;
  }

  .dm-message-send-btn:active{

	background-color: #907763;
	border: 1.5px solid darkgrey;
  }

  .message-textarea-input{
	padding: 5px;
	background-color: black;
	color: #907763;
	border: 1px solid #907763;
	border-radius: 49px;
	height: 33px;
	font-size: 16px;	
  }
  
  .message {
	margin-bottom: 10px;
  }
  

  
  .message.received {
	text-align: left;

  }
  
  .message-content {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 25px;
	background-color: #7d7d7d;
	color: black;
  }

  .message.sent {
	text-align: right;
  }

  .received-content{
	background-color: #907763;
	color: black;
	border: 1px solid black;

  }

  .sent-content{
	background-color: black;
	color: #907763;
	border: 1px solid rgb(62, 62, 62);	
	text-align: left;
  }
  
  .message-input {
	display: flex;
	padding: 10px;
	padding-bottom: 70px;
	border-top: 1px solid #907763;
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-color: black;
  }
  
  .message-input input {
	flex: 1;
	margin-right: 10px;
  }
  
  .no-conversation-selected {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
  }


/*********** End of Direct Messaging ******/



/********** Palate Buidler *************/


.palate-title{
	text-align: center;
	color: #907763;
	font-size: 1.5em;
	padding-top: 5px;
	display: flex;
	width: 80%;
	justify-content: space-between;
	margin: auto;
	height: 1.75em;
}

body.inverted-mode .palate-title{
	color: black;
}

.palate-tab-continater{
	width: 80%;
	max-width: 400px;
	position: relative;
	height: 1000px;
}

.palate-toggle-container{
	margin: auto;
	display: flex;
	justify-content: center;
	margin-top: 4px;
	position: absolute;
	right: 10%;
}

.palate-title-words{
	text-align: center;
	margin: auto;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-around;
}

body.inverted-mode .palate-title-words{
	color: black;
}

.palate-description{
	font-size: .8em;
	text-align: center;
	color: #907763;
	text-align: left;
	width: 95%;
	margin: auto;
}

body.inverted-mode .palate-title-words{
	color: black;
}

.palate-type-title{
	text-align: center;
	color: #907763;
	font-size: 1.25em;
	margin-bottom: 13px;
}

body.inverted-mode .palate-type-title{
	color: black;
}
/* 
.palate-description-container{
	margin-top: 3px;
	color: #907763;
} */

/********** End of Palate Builder *****/



/********** Register Bar Accounts ****/


.features-page{
	
}

.features-copyright{
	position: relative;
	bottom: 0;
	margin: auto;
	text-align: center;
	color: gray;
	font-size: .85em;
	margin-bottom: 20px;
	padding-top: 150px;	
}

.biz-account-features-link{
	color: rgb(92, 92, 92);
	width: 100%;
	text-align: center;
	margin-bottom: 1px;
}

.biz-account-features-link a {
	color: rgb(92, 92, 92);
}

.screenshot-image-container{
	width: 10%;
	margin: 10px;
	border-radius: 10px;
	border: 1px solid rgb(41, 40, 40);
	flex: 0 0 auto;
}

.screen-shots-container{
	width: 80%;
	margin: auto;
	margin-top: 20px;

	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;	
}

.feature-list-container{
	width: 68%;
	margin: auto;
	margin-top: 40px;
	color: #907763;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 700px;
}

.features-brand-bucket{
	display: flex;
	margin: auto;
	width: 345px;
	margin-top: 28px;
}

.feature-brand-bucket-name{
	font-size: 4em;
}

.features-img{
	width: 80px;
}

.feature-item{
	color: #907763;
	margin-bottom: 14px;
	position: relative;
	padding-left: 20px;
}

.feature-item::before {
	/* content: "•"; 
	position: absolute;
	left: -15px; 
	top: 50%;
	transform: translateY(-50%);
	color: darkgray; 
	font-size: 24px;  */
}

.features-subtitle{
	width: 100%;
	text-align: center;
	font-size: 1.75em;
	color: grey;
	margin-top: 40px;
}

.biz-features-header{
	margin-top: 0px;
	color: grey!important;
}

.register-biz-account-btn{
	background-color: rgb(71, 71, 71);
	padding: 16px;
	padding-left: 13px;
	padding-right: 13px;
	color: #cf9e77;
	border-radius: 8px;
	font-size: 1em;
	border: .5px solid rgb(105, 98, 98);
}

.register-a-biz-account-btn-2{
	background-color: black;
	color: #907763;
}

.redirect-a-tag{
	text-decoration: none !important;
    color: inherit !important;
}



.stripe-card-element{
	background-color: rgb(92, 92, 92);
	height: 1em;
	padding: 5px;
	/* line-height: 1.9em; */
	/* font-size: 1.9em; */
	margin-bottom: 20px;
	height: 2.5em;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	/* color: #907763; */
	justify-content: space-evenly;
}

.rba-redirect{
	margin: auto;
}

.request-a-demo-btn{
	margin-top: 30px;
	color: grey;
	background-color: black;
}



.payment-details-header{
	color: #907763;
	/* font-size: 2em; */
	text-align: center;
	margin-bottom: 35px;	
}

.payment-page-container{
	width: 86%;
	margin:auto;
	margin-top: 100px;

}

.rba-redirect-link-container{
	text-align: center;
	margin-top: 35px;
	height: 34px;
}

.payment-form-container{
	width: 80%;
	margin: auto;
	margin-top: 40px;
	max-width: 500px;
}

.rba-container {
	max-width: 600px;
	margin: 50px auto;
	padding: 20px;
	margin-top: 11px;
  }
  
  .rba-header {
	color: #907763;
	font-size: 2em;
	text-align: center;
	margin-bottom: 2px;
  }
  
  .rba-input-group {
	margin-bottom: 15px;
  }
  
  .rba-label {
	display: block;
	margin-bottom: 5px;
	color: #ccc;
  }
  
  .rba-input, .rba-select {
	width: 100%;
	padding: 10px;
	border: 1px solid #555;
	border-radius: 4px;
	background-color: #444;
	color: #fff;
  }
  
  .rba-total-price {
	margin: 20px 0;
	font-size: 1.2em;
	color: #907763;
  }
  
  .rba-button {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 4px;
	background-color: #907763;
	color: #090909;
	font-size: 1em;
	cursor: pointer;
  }
  
  .rba-button:hover {
	background-color: #755a4e;
  }

  .rba-error{
	border: 1px solid red;
  }

  .rba-currency-notice{
	position: relative;
	bottom: 0;
	margin: auto;
	text-align: center;
	color: gray;
	font-size: .85em;
	margin-bottom: 20px;
  }

  .rba-spinner-container{
	display: inline-flex;
  }



  .set-up-fee-info {
	position: absolute;
	top: -3px;
	right: 18px;
	border: 1px solid #907763;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #907763;
	cursor: pointer;
  }
  

  .set-up-fee-info-modal-header{
	font-size: 1.25em;
	color: #907763;
  }
  /******* End of Register Bar Accounts ***/


/******** Staff Manager ************/

.staff-manager-container{
	width: 80%;
	max-width: 400px;
	margin: auto;
}

.staff-member-list-item{
	border: 1px solid #907763;
	border-radius: 3px;
	padding: 12px;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.staff-item-info{

}

.remove-staff{
	position: relative;
	width: 30px;
	height: 30px;
	opacity: .9;
	cursor: pointer;
	border: 2px solid rgb(68, 67, 67);
	border-radius: 24px;
	background-color: rgb(10, 10, 10);
	border: 2px solid #907763;
	transform: rotate(405deg);
}




.remove-staff:before, .remove-staff:after{
	position: absolute;
	content: '';
	height: 22px;
	margin-left: 15px;
	width: 2px;
	background-color: #907763;
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
}

.remove-staff:after {
	transform: rotate(90deg);
}

.add-staff-button{
	background-color: rgb(14, 14, 14);
	color: #907763;
	width: 50%;
	margin: auto;
	height: 34px;
	margin-top: 20px;
	position: relative;
	border-radius: 17px;
	text-align: center;
	padding: 6px;
	border: 1px solid rgba(144, 119, 99, 0.62);
}

.add-staff-button.disabled{
	background-color: #333;
	color: #666;
	cursor: not-allowed;
	opacity: 0.5;
	border: 1px solid #555;
}

.staff-input{
	width: 100%;
	/* color: #6c6c6c; */
	color: #907763;
	border-radius: 5px;
	background-color: rgb(34, 34, 34);
	border-style: solid;
	border: none;
	border-width: 1px;
	border: 1px solid #383838;
	padding-left: 29px;
	padding-right: 29px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 20px;
	max-width: 700px;
	height: 2em;
	font-size: 1em;
}

.staff-title{
	color: #907763;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	margin-top: 10px;
}


.num-of-staff-accounts{
	color: grey;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;

}

.num-of-staff-subtitle{
	color: darkgrey;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: .75em;
}

.satellite-bar-item {
    border: 1px solid #907763;
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/********* end of staff manager ***/

/******** Tools ******************/

.tools-btn-img{

}

.tools-container{
	margin-top: 50px;
}

.tools-header{
	text-align: center;
	width: 100%;
	font-size: 1.5em;
	color: grey;
	font-family: 'Quicksand', sans-serif;
	margin-bottom: 20px;
}

.tool-link{
	width: 45%;
	min-width: 260px;
	margin: auto;
	border: 1px solid #907763;
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	border-radius: 5px;
	padding: 10px;
	color: rgb(176, 176, 176);
	background-color: rgb(15, 15, 15);
}

.disabled-tool{
	background-color: rgb(29, 29, 29);
	color: rgb(73, 73, 73);
	border: 1px solid rgb(77, 75, 75);
}



/***brix calc****/

.brix-calc-container{
	width: 90%;
	margin: auto;
	margin-top: 90px;
}

.brix-instructions{
	color: #907763;
}

.bix-error{
	color: red;
}

.brix-input-group{
	text-align: center;
	display: flex;
	flex-direction: column;
}

.brix-input{
	/* background-color: rgb(71, 71, 71); */
	background-color: rgb(112, 112, 112);
	border-radius: 4px;
	border: 1px solid rgb(71, 71, 71);
	width: 129px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 28px;
}

.brix-calculate-btn{
	margin: auto;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
	margin-top: 20px;
	background-color: rgb(19, 19, 19);
	box-shadow: none;
	border: 1px solid #907763;
	border-radius: 3px;
	color: #907763;
	padding: 7px;
	width: 92px;
}

.brix-label{
	color: rgb(163, 163, 163);
}

/** end of brix calc**/


/** temp converter **/

.temp-converter-container{
	/* margin-top: 50px; */
	margin-top: 90px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.temp-converter-header{
	text-align: center;
	width: 100%;
	font-size: 1.5em;
	color: grey;
	font-family: 'Quicksand', sans-serif;
	margin-bottom: 20px;
}

.temp-converter-switch-container{
	margin: auto;
	margin-bottom: 10px;
}

.temperature-display{
	color: #907763;
	margin-bottom: 30vh;
	margin-top: 20px;
}

.lower-temperature-display{
	color: #907763;
	margin-bottom: 20px;
	margin-top: 30vh;	
}

.temp-number{
	color: gray;
	font-size: 1.5em;
}

/** end temp converter **/

/** slider **/


.timer-slider::-webkit-scrollbar {
	display: none;
  }
  /*
  .timer-slider{
	display: flex;
	overflow-x: scroll;
	width: 60%;
	  margin: auto;
	padding-right: 300px;
	padding-left: 300px;
	margin-left: -300px;
	
  
	height: 100px;
	scroll-snap-type: mandatory; 
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
	
  }
  */
  
  /*.clearfix:before,
  .clearfix:after{
	content: ".";
	display: block;
	height: 0;
	overflow:hidden;
  }
  
  .clearfix:after{
	clear:both;
  }*/
  /*.clearfix { zoom: 1; }*/
  
  .timer-segment{
	height: 4px;
	width: .5px;
	margin: auto;
	background-color: #907763;
	  scroll-snap-align: center;
	/*border-left: 2px solid grey;*/
	/*margin: auto;*/
	flex-shrink: 0;
	 -webkit-transition: height 10ms ease;
	  -moz-transition: height 10ms ease;
		-o-transition: height 10ms ease;
	   -ms-transition: height 10ms ease;
		   transition: height 10ms ease;
  
	  -webkit-transform: translate3d(0, 0, 0);
	  -moz-transform: translate3d(0, 0, 0);
	  -ms-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);           
  }
  

  .first-seg {
	margin-left: 0px;
  }
  
  .last-seg {
	margin-right: 0px;
  }
  
  .seg-none {
	height: 8px;
  }
  
  .seg-primary {
	height: 250px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: height 0ms ease;
	-moz-transition: height 0ms ease;
	-o-transition: height 0ms ease;
	-ms-transition: height 0ms ease;
	transition: height 0ms ease;
  }
  
  .seg-1 {
	height: 180px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-2 {
	height: 130px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-3 {
	height: 100px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-4 {
	height: 80px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-5 {
	height: 50px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-6 {
	height: 25px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-7 {
	height: 20px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-8 {
	height: 17px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-9 {
	height: 15px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .seg-10 {
	height: 12px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }
  
  .xxxx{
	background-color: red;
  }
  
  .timer-ticker{
  background-color: rgba(0, 0, 255, 0.0);
  height: 108px;
  width: 11px;
  margin: auto;
  position: absolute;
  margin-left: 50%;
  margin-right: 50%;
  }
  
  .timer-segment > div {
	scroll-snap-align: center;
  }
  
  
  .left-padding-timer-slider{
  /* padding-left: 300px;*/
  }
  
  .right-padding-timer-slider{
	padding-right: 300px;
  }
  
  .timer-design-block-left{
	height: 45px;
	width: 50%;
	background-color: #f6f6f6;
	position: absolute;
	border-bottom-right-radius: 55px;
	border: 1px solid grey;
  }
  
  .timer-design-block-right{
	height: 45px;
	width: 50%;
	right: 0;
	background-color: #f6f6f6;
	position: absolute;
	border-bottom-left-radius: 55px;
	border: 1px solid grey;
  }
  
  .slider-segment-container{
	display: flex;
	width: 80%;
	max-width: 500px;
	position: absolute;
	height: 27vh;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto;   
  }
  
  

  input::-webkit-slider-thumb{
	-webkit-appearance:  none!important;
  }
  
  
  input[type="range"]{
	-webkit-appearance:  none!important;
  }
  
  ::-webkit-slider-thumb{
   -webkit-appearance:  none!important; 
  }
  
  input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb:active{
	-webkit-appearance: none !important;
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
	background-color: rgba(196, 191, 191, 0.0);
  /*  background-color: red;
	border-color:  green;
	background:  red!important;*/
  }
  
  input[type="range"].timer-slider {
	-webkit-appearance: none!important; /* Hides the slider so that custom slider can be made */
	width: 80%; /* Specific width is required for Firefox. */
	max-width: 500px;
	height: 20vh;
	position: absolute;
	background: rgba(196, 191, 191, 0.0)!important; /* Otherwise white in Chrome */
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto;   
  }
  
  .timer-slider::-webkit-slider-thumb{
	-webkit-appearance: none;
	-webkit-border: 1px solid rgba(183, 193, 172, .0)!important; 
	-webkit-background-color: rgba(183, 193, 172, .0)!important;  
	-webkit-box-shadow: none!important;    
  }
  
  input[type=range].timer-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	-webkit-border: 1px solid rgba(183, 193, 172, .0)!important; 
	-webkit-background-color: rgba(183, 193, 172, .0)!important;  
	-webkit-box-shadow: none!important;  
  }
  
  input[type=range].timer-slider:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  
  input[type=range].timer-slider::-ms-track {
	width: 100%;
	cursor: pointer;
  
	/* Hides the slider so custom styles can be added */
	background: transparent; 
	border-color: transparent;
	color: transparent;
  }
  
  
  
  input[type=range].timer-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
  /*  border: 1px solid darkgrey;
	height: 200px;
	width: 3px;
  */
	-webkit-border: 1px solid rgba(183, 193, 172, .0); 
	-webkit-background-color: rgba(183, 193, 172, .0);  
	-webkit-box-shadow: none;
	background-color: rgba(183, 193, 172, .0);;
  /*  margin-top: 150px;
	padding-bottom:  159px;  */
	height:  .5vh;
	width: .5%;
	transform:  scale(80, 80) translateX(-50%);
	margin-top: -50%;
  
	border-radius: 3px;
	/*background: darkgrey;*/
	cursor: pointer;
	/* margin-top: 0px; You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }
  
  
  input[type=range].timer-slider::-moz-range-thumb {
	-webkit-appearance: none;
	/*border: 1px solid darkgrey;
	border: 1px solid rgba(183, 193, 172, .0);   */
	border: 1px solid rgba(183, 193, 172, .0);   
  /*  margin-top: 150px;
	padding-bottom:  159px;  */
	height:  .5vh;
	width: .5%;
	transform:  scale(80, 80);
	border-radius: 3px;
	/*background: darkgrey;*/
	cursor: pointer;
  }
  
  /* All the same stuff for IE */
  input[type=range].timer-slider::-ms-thumb {
	-webkit-appearance: none;
  /*  border: 1px solid darkgrey;*/
	border: 1px solid rgba(183, 193, 172, .0);   
  /*  margin-top: 150px;
	padding-bottom:  159px;  */
	height:  .5vh;
	width: .5%;
	transform:  scale(80, 80);
	border-radius: 3px;
	cursor: pointer;
  }
	

/** end of slider **/

/*** How Much Essay ***/

.how-much-container{
	margin: auto;
	margin-top: 30px;
	width: 90%;
	max-width: 600px;
	position: relative;
}

.how-much-title-image{
	width: 40%;
	max-width: 400px;
	min-width: 300px;
}

.how-much-superscript{
	color: #907763;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	animation: pulsate 3s infinite;
}

.how-much-essay-container{
	width: 90%;
	max-width: 600px;
	text-align: justify;
	color: rgb(143, 142, 142);
	font-family: Hoefler Text;
	line-height: 1.4em;
	letter-spacing: .5px;
	margin-bottom: 200px;
}

.how-much-footnote {
	overflow: hidden;
	width: 80%;
	margin: auto;
	text-align: justify;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.9em;
	color: #907762;
	transition: height 500ms ease;
	display: none;
  }

  .footnote-click-text{
	color: #907763;
  }

.how-much-imbiblia{
	color: #907763;
	font-style: italic;
}

.how-much-splitter-container{
	width: 100%;
	text-align: center;
}

.how-much-splitter-image{
	width: 40%;
	max-width: 350px;
	min-width: 250px;
	margin: auto;
	text-align: center;
}

.smaller-splitter-img{
	width: 60%;
}

.how-much-recipe{
	margin-left: 20%;
}

.how-much-excerpt{
	width: 60%;
	margin: auto;
}

.evidence-img{
	width: 100%;
}

.how-much-postscript{
	width: 100%;
	text-align: center;
	font-style: italic;
}

/** End How Much Essay ***/


/** Conversion Table **/


.conversion-table-container{
	color: #907763;
	width: 80%;
	margin: auto;
	margin-top: 90px;
	margin-bottom: 200px;
}

.conversion-table-unit{

}

.conversion-table-unit-header{
	color: grey;
}

/** end of Conversion Table **/

/** Conversion Calculator **/

.conversion-calculator-container{
	color: #907763;
	width: 80%;
	margin: auto;
	margin-top: 90px;
	margin-bottom: 200px;	
}

.convert-calc-value{
	font-size: 1.5em;;
	margin-bottom:30px;
	text-align: center;
}

.convert-calc-value-input{
	font-size: 1.25em;
	margin-bottom: 30px;
	text-align: center;
	max-width: 250px;
	background-color: rgb(57, 57, 57);
	border-radius: 3px;
	border: 1px solid rgb(92, 92, 92);
	color: #b0947e;
	margin-top: 6px;
}


input.convert-calc-value-input[type="number"] {
	-moz-appearance: textfield; /* Firefox */
}

input.convert-calc-value-input[type="number"]::-webkit-outer-spin-button,
input.convert-calc-value-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
	margin: 0; /* Remove margin to keep the layout consistent */
}

.convert-calc-from{
	text-align: center;
	font-size: 1.5em;
}

.convert-calc-from-select{
	font-size: 1.5em;
	width: 71%;
	max-width: 265px;
	padding: 5px;
	color: #b0947e;
	background-color: rgb(57, 57, 57);
	border-radius: 3px;
	border: 1px solid rgb(92, 92, 92);	
}


.convert-calc-to{
	text-align: center;
	font-size: 1.5em;
	margin-top: 40px;
}

.convert-calc-to-select{
	font-size: 1.5em;
	width: 71%;
	max-width: 265px;
	padding: 5px;
	color: #b0947e;
	background-color: rgb(57, 57, 57);
	border-radius: 3px;
	border: 1px solid rgb(92, 92, 92);	
}

.conversion-result{
	text-align: center;
	font-size: 1.75em;
	margin-top: 40px;
}

.final-convert-result{
	color: #d6baa4;
}

.back-to-tools-btn{
	position: absolute;
	top: 50px;
	left: 20px;
	color: rgb(88, 88, 88);
}

/** end Convert Calc **/

/******** end of Tools ***********/


/****** Brand Account *****/

.brand-account-blurb{
	width: 80%;
	max-width: 420px;
	text-align: justify;
	margin: auto;
	color: #907763;
}


/***** End Brand Account ***/

/****** Recent Ingredients List ******/

.recent-ingredients-container {
    width: 90%;
    max-width: 600px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 200px;
}

.recent-ingredients-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #907763;
}

.recent-ingredients-title {
    color: #907763;
    font-size: 2em;
    margin-bottom: 10px;
    font-family: 'Quicksand', sans-serif;
}

body.inverted-mode .recent-ingredients-title {
    color: black;
}

.recent-ingredients-subtitle {
    color: rgb(140, 140, 140);
    font-size: 1em;
    font-style: italic;
}

body.inverted-mode .recent-ingredients-subtitle {
    color: rgb(80, 80, 80);
}

.recent-ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recent-ingredient-item {
    display: flex;
    align-items: center;
    background-color: rgb(25, 25, 25);
    border: 1px solid #545454;
    border-radius: 8px;
    padding: 15px;
    transition: background-color 0.2s ease;
}

body.inverted-mode .recent-ingredient-item {
    background-color: rgb(101, 90, 85);
    border-color: rgb(76, 64, 59);
}

.recent-ingredient-item:hover {
    background-color: rgb(35, 35, 35);
    cursor: pointer;
}

body.inverted-mode .recent-ingredient-item:hover {
    background-color: rgb(111, 100, 95);
}

.recent-ingredient-rank {
    font-size: 1.2em;
    color: #907763;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
    margin-right: 15px;
}

body.inverted-mode .recent-ingredient-rank {
    color: black;
}

.recent-ingredient-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 15px;
}

.recent-ingredient-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #907763;
}

.recent-ingredient-color-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #907763;
    flex-shrink: 0;
}

body.inverted-mode .recent-ingredient-color-dot {
    border-color: black;
}

.recent-ingredient-details {
    flex: 1;
}

.recent-ingredient-name {
    color: #d1a988;
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: capitalize;
}

body.inverted-mode .recent-ingredient-name {
    color: #5c2900;
}

.recent-ingredient-name.branded-ingredient {
    color: #ffae8a;
}

body.inverted-mode .recent-ingredient-name.branded-ingredient {
    color: #b8560a;
}

.recent-ingredient-meta {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: rgb(140, 140, 140);
    margin-bottom: 8px;
}

body.inverted-mode .recent-ingredient-meta {
    color: rgb(80, 80, 80);
}

.recent-ingredient-date {
    color: #907763;
    font-weight: 500;
}

body.inverted-mode .recent-ingredient-date {
    color: black;
}

.recent-ingredient-lineage {
    color: rgb(120, 120, 120);
}

.recent-ingredient-business {
    color: #c39f82;
    font-style: italic;
}

.recent-ingredient-description {
    color: rgb(180, 180, 180);
    font-size: 0.9em;
    line-height: 1.3;
    margin-top: 5px;
}

body.inverted-mode .recent-ingredient-description {
    color: rgb(60, 60, 60);
}

.recent-ingredient-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

.recent-ingredient-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-badge {
    background-color: #907763;
    color: black;
}

.parent-badge {
    background-color: rgb(70, 130, 180);
    color: white;
}

.alcohol-badge {
    background-color: rgb(220, 20, 60);
    color: white;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin-top: 100px;
}

.error-container {
    text-align: center;
    padding: 40px;
}

.error-message {
    color: rgb(255, 106, 106);
    font-size: 1.1em;
    margin-bottom: 20px;
}

.retry-button {
    background-color: #907763;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.retry-button:hover {
    background-color: #755a4e;
}

/* Mobile responsiveness */
@media only screen and (max-width: 460px) {
    .recent-ingredients-container {
        width: 95%;
    }
    
    .recent-ingredient-item {
        padding: 12px;
    }
    
    .recent-ingredient-rank {
        font-size: 1em;
        min-width: 25px;
        margin-right: 10px;
    }
    
    .recent-ingredient-image,
    .recent-ingredient-color-dot {
        width: 35px;
        height: 35px;
    }
    
    .recent-ingredient-name {
        font-size: 1em;
    }
    
    .recent-ingredient-meta {
        font-size: 0.8em;
        flex-wrap: wrap;
    }
    
    .recent-ingredient-badges {
        align-items: center;
    }
    
    .recent-ingredient-badge {
        font-size: 0.6em;
        padding: 2px 6px;
    }
}

 /***** End Recent Ingredients List *****/

/****** Recent Ingredients Ingredient Card Fix ******/

/* Override the default full-screen ingredient card styles */
.recent-ingredients-container ~ .ingredient-recipe-card-dynamic-container .open-ingredient-recipe-card,
body .open-ingredient-recipe-card.open-ingredient-recipe-card {
	position: absolute !important;
	width: 100% !important;
	max-width: 460px !important;
	height: 93vh !important;
	max-height: 760px !important;
	margin: auto !important;
	margin-bottom: 70px !important;
	left: 0 !important;
	right: 0 !important;
	top: 20px !important;
	bottom: auto !important;
	border: 1.5px solid #323232 !important;
	border-radius: 8px !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: visible !important;
	z-index: 15 !important;
}

/***** End Recent Ingredients Ingredient Card Fix *****/

/*****POST ALL NEW CSS ABOVE THIS ******/
/*****POST ALL NEW CSS ABOVE THIS ******/
/*****POST ALL NEW CSS ABOVE THIS ******/

/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/
/*********** MEDIA QUERIES **************/


/********* iphone SE 3rd Gen *******/

@media only screen
	and (device-width: 375px)
	and (device-height: 667px)
	and (orientation: portrait)
	and (-webkit-device-pixel-ratio: 2) { 


		.build-card{
			top:0px;
		}

		.expand-card{
			height: 87vh;
		}

		.navbar{
			height: 49px;
		}

		.lib-btm-btn{
			height: 29px;
		}

		.bottom-container-btn-label{
			font-size: .65em;
		}

		.lib-tab-name-active{
			font-size: 1.25em;
		}

		.library-list-name-container{
			display: none!important;
		}

		.similar-recipes-container{
			height: 48px;
		}

		.similar-recipes-container-open{
			height: 176px;
		}

		.recipe-card-flavor-map-container{
			width: 68%;
		}

		.library-settings-container{
			bottom: 47px;
		}

		.menu-item span{
			font-size: .5em;
		}

		.in-card-batch-cal-toggle-container{
			height: 47%;
		}

		.search-flavor-map-container{
			margin-top: 45px!important;
		}

		.elastic-container{
			/* bottom: 131px; */
			bottom: 0px;
		}

		.recipe-card-ingredient-item-name{
			padding-left: 2px;
		}

		.tab-tip-container{
			height: 80px;
			font-size: .7em;
		}

		.selection-choice{
			font-size: .5em;
		}

		.arrow-cage-on{
			font-size: .55em;
		}

		.invitation-to-build{
			margin-top: 37%;
		}

		.invitation-arrow{
			margin-top: 18%;
		}

		.search-by-taste-shrink-box{
			top: 11px;
		}

		.search-by-taste-small-ref-container{
			margin-top: 8px;
		}

		.list-container{
			font-size: .65em;
		}

		.pub-lib-link{
			padding-bottom: 1px;
			padding-top: 1px;
		}

		.list-link{
			margin-bottom: 6px;
		}


		.search-2-header{
			height: 17px;
			padding-top: 0px;
		}

		.search_2_img{
			display: none;
		}


		.search-by-taste-btn{
			margin-top: 20%;
			font-size: .75em;
		}

		.search-by-taste-results-container{
			padding-top: 66vh;
		}

		.register-title{
			margin-top: 5%;
			
		}

		.register-container{
			font-size: .7em;
		}



	}


/***** END of iphone SE 3rd Gen *****/


/********iphone 11 **************/

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 414px) 
  and (min-device-height: 896px) 
  and (max-device-height: 896px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

	.ingredient-picker-escape-bar{
		height: 10%;
		padding-top: 10%;
	}

	.ingredient-back-btn{
		top: 55px;
	}

	.escape-x-selection-stage{
		top: 48px;
	}

	.elastic-container{
		top: 10%;
	}

	.show-ingredient-search {
		bottom: -169%;
	}	

	.recipe-card{
		height: 88vh;
		margin-top: 20px;		
	}
	
}

/******** end of iphone 11 **************/


/******* iphone 12 & pro ******/

/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { 
    	.recipe-card-view{    		
    		width: 80%;
    	}

    	.recipe-card-single-view{
			top: 0%;
			height: 100%;
			width: 99%;    		
    	}

		.batch-number-cage{
			font-size: 3em;
		}


    	.controlbar-button-container{
    		width: 73%;
    	}

    	.controlbar-button{
    		height: 55px;
    		padding-bottom: 24px;
    	}


    	.expand-card{
    		width: 99%;
    		height: 87vh!important;
    	}

    	.tab-tip-container{
    		font-size: .8em;
    	}


    	.ingredient-picker-escape-bar{
    		height: 5%;
    		min-height: 75px;
    	}

		.ingredient-back-btn{
			top: auto;
			bottom: 14px;
		}

		.progress-bar-eyecon{bottom: -13px;
			position: absolute;
			margin: auto;
			left: 0px;
			right: 0px;	
		}

		.escape-x-selection-stage{
			bottom: 0px;
			top: auto;
		}

		.submit-btn-tab{
			/* padding-top: 6px; */
		}

		.submit-ingredient-btn{
			height: 75%;
			margin-top: 2px;
		}

		.tabs-container{
			margin-top: 25px;
		}

		.elastic-container{
			/* bottom: 169px; */
			/* bottom: 145px; */
			bottom: 0px;
		}

		.build-photo-prev{
			margin-top: 3%;
		}

    	.batch-card{

    	}

		.build-photo-input{
			margin-bottom: -8px;			
		}

    	.in-card-batch-calc-container{
    		height: 94%;

    	}

    	.card-body-left{
    		font-size: .7em;
    	}

    	.card-display-body-center{
    		width: 65%;
    	}

    	.glyph-container{
			min-height: 20%;    		
    	}

    	.ingredient-glyph{
/*    		width: 130px;
    		height: 130px;*/
    	}

    	.ingredient-glyph-float{
/*			height: 145px;
			width: 145px;    		*/
    	}

		.navbar{
			/* bottom: -213px; */
		}

		.search-2-tabs {
			top: 38px;
		}

		.search-2-header{
			/* top: -30px; */
			/* height: 102px; */
		}

		.search-by-taste-shrink-box{
			/* margin-top: 39px; */
			/* margin-top: -56px; */
		}

		.search-by-taste-small-ref-container{
			/* margin-top: -44.5px; */
		}

		.ingredient-info-card-description{
			height: 562px;
		}

		.search-by-taste-results-container{
			padding-top: 68vh;
		}

		.build-card{
			top: 64px;
			height: 82vh;
		}	

		.tab-selection-selected-container{
			height: 91vh;
			padding-top: 6%;
		}

		.sub-tab-container{
			width: 88%;
		}

		.selection-tab-item{
			margin: auto;
			margin-left: 7px;
		}

		.tab-selection-container{
			margin-top: 76px;
		}

		.selection-options-container{
			width: 88%;
			height: 75%;
			font-size: .5em;
		}

		.build-tab-close{
			right: 16px;
			top: 40px;
		}

		.register-landing-container{
			margin-top: 20px;
			margin-bottom: 0px;
		}

		.invitation-arrow{
			margin-top: 27%;
			height: 25%;
		}

		.admin-bottom-btn-label{
			font-size: .6em;
		}		

}



/****** end of iphone 12 & pro ***/ 


/*********** iphone 15  *******/

@media only screen 
	and (device-width: 393px) 
	and (device-height: 852px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: portrait) { 
		.library-display-container{
			margin-top: 63px;
		}

		.recipe-card-view{    		
    		width: 80%;
    	}

    	.recipe-card-single-view{
			top: 0%;
			height: 100%;
			width: 99%;    		
    	}

		.batch-number-cage{
			font-size: 3em;
		}


    	.controlbar-button-container{
    		width: 73%;
    	}

    	.controlbar-button{
    		height: 55px;
    		padding-bottom: 24px;
    	}

    	.expand-card{
    		width: 99%;
    		height: 87vh!important;
    	}

    	.tab-tip-container{
    		font-size: .8em;
    	}

    	.ingredient-picker-escape-bar{
    		height: 5%;
    		min-height: 75px;
    	}

		.ingredient-back-btn{
			top: auto;
			bottom: 14px;
		}

		.progress-bar-eyecon{bottom: -13px;
			position: absolute;
			margin: auto;
			left: 0px;
			right: 0px;	
		}

		.escape-x-selection-stage{
			bottom: 0px;
			top: auto;
		}

		.submit-btn-tab{
			/* padding-top: 6px; */
		}

		.submit-ingredient-btn{
			height: 75%;
			margin-top: 2px;
		}

		.tabs-container{
			margin-top: 25px;
		}

		.elastic-container{
			/* bottom: 169px; */
			bottom: 0px;
		}

		.build-photo-prev{
			margin-top: 3%;
		}

    	.batch-card{

    	}

		.build-photo-input{
			margin-bottom: -8px;			
		}

    	.in-card-batch-calc-container{
    		height: 94%;

    	}

    	.card-body-left{
    		font-size: .7em;
    	}

    	.card-display-body-center{
    		width: 65%;
    	}

    	.glyph-container{
			min-height: 20%;    		
    	}

    	.ingredient-glyph{
/*    		width: 130px;
    		height: 130px;*/
    	}

    	.ingredient-glyph-float{
/*			height: 145px;
			width: 145px;    		*/
    	}

		.navbar{
			/* bottom: -213px; */
		}

		.search-2-tabs {
			top: 38px;
		}

		.search-2-header{
			/* top: -30px; */
			/* height: 102px; */
		}

		.search-by-taste-shrink-box{
			/* margin-top: 39px; */
			/* margin-top: -56px; */
		}

		.search-by-taste-small-ref-container{
			/* margin-top: -44.5px; */
		}

		.ingredient-info-card-description{
			height: 562px;
		}

		.search-by-taste-results-container{
			padding-top: 68vh;
		}

		.build-card{
			top: 64px;
			height: 82vh;
		}	


		.tab-on{
			padding-top: 50px;
		}

		.selection-tab-item{
			margin-left: 14px;
		}

		.selection-options-container{
			width: 87%;
		}

		.selection-choice{
			font-size: .6em;
		}

		.expansion-arrow-cage{
			font-size: .5em;
		}

		.sub-tab-container{
			width: 87%;
		}

		.glass-item{
			font-size: .7em;
		}

		.close{
			top: 42px;
		}

		.ingredient-picker-escape-bar{
			height: 10%;
		}

    	.ingredient-picker-escape-bar{
    		height: 9%;
    		min-height: 88px;
    	}

		.ingredient-back-btn{
			top: auto;
			bottom: 14px;
		}

		.progress-bar-eyecon{
			bottom: -13px;
			position: absolute;
			margin: auto;
			left: 0px;
			right: 0px;	
			height:80%
		}

		.escape-x-selection-stage{
			bottom: 0px;
			top: auto;
		}	
		
		.tabs-container{
			margin-top: 39px;
		}

		.type-tab{
			height: 105%;
		}

		.tab-tip-container{
			border-top: 6px solid #907763;
		}

		.tab-tip{
			font-size: .7em;
		}

		.submit-ingredient-btn{
			height: 84%;
			margin-top: 0px;
			font-size: .6em;
		}

		.selection-options-methods-container{
			height: 73%;
		}

		.library-list-name-container{
			display: none!important;
		}

		.register-landing-container{
			margin-top: 20px;
			margin-bottom: 0px;
		}

		.invitation-arrow{
			margin-top: 27%;
			height: 25%;
		}	

		.bar-log-header{
			padding-top: 19px;
			height: 195px;
		}

		.admin-bottom-btn-label{
			font-size: .6em;
		}

	}

/*********** end of iphone 15 *******/



/*********** iphone 15 Pro Max *******/
@media only screen 
  and (min-device-width: 430px) 
  and (max-device-width: 430px) 
  and (min-device-height: 932px) 
  and (max-device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
		.register-title{
			margin-top: 15%;
		}

		.library-display-container{
			margin-top: 63px;
		}

		.bar-log-header{
			padding-top: 28px;
			border-bottom: none;
			height: 170px;
		}

		.search-2-header{
			padding-top: 49px;
		}

		.search_2_img{
			width: 17px;
		}

		.build-card{
			top: 49px;
			height: 87vh;
		}

		.tab-on{
			padding-top: 50px;
		}

		.selection-tab-item{
			margin-left: 14px;
		}

		.selection-options-container{
			width: 87%;
		}

		.sub-tab-container{
			width: 87%;
		}

		.glass-item{
			font-size: .7em;
		}

		.close{
			top: 42px;
		}

		.ingredient-picker-escape-bar{
			height: 10%;
		}

    	.ingredient-picker-escape-bar{
    		height: 9%;
    		min-height: 75px;
    	}

		.ingredient-back-btn{
			top: auto;
			bottom: 14px;
		}

		.progress-bar-eyecon{
			bottom: -13px;
			position: absolute;
			margin: auto;
			left: 0px;
			right: 0px;	
			height:80%
		}

		.escape-x-selection-stage{
			bottom: 0px;
			top: auto;
		}	
		
		.tabs-container{
			margin-top: 29px;
		}

		.tab-tip-container{
			border-top: 6px solid #907763;
		}

		.tab-tip{
			font-size: .7em;
		}

		.submit-ingredient-btn{
			height: 84%;
			margin-top: 0px;
			font-size: .6em;
		}

		.library-list-name-container{
			display: none!important;
		}

		.selection-list-ingredient-name{
			font-size: .9em;
		}

		.admin-bottom-btn-label{
			font-size: .6em;
		}

		.ingredient-nav-header-spacer{
			/* height: 8%;
			margin-top: 10%;			 */
		}
		
		.ingredient-picker-escape-bar{
			height: 10%;
			padding-top: 10%;
		}

		.ingredient-back-btn{
			top: 55px;
		}

		.escape-x-selection-stage{
			top: 48px;
		}

		.elastic-container{
			top: 10%;
		}

		.show-ingredient-search {
			bottom: -169%;
		}		
	}

/*********** end of iphone 15 Pro Max *******/

/*********** actu8al iphone pro max? ******/

@media only screen 
  and (min-device-width: 428px) 
  and (max-device-width: 428px) 
  and (min-device-height: 926px) 
  and (max-device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
		.register-title{
			margin-top: 15%;
		}

		.library-display-container{
			margin-top: 63px;
		}

		.bar-log-header{
			padding-top: 28px;
			border-bottom: none;
			height: 170px;
		}

		.search-2-header{
			padding-top: 49px;
		}

		.search_2_img{
			width: 17px;
		}

		.build-card{
			top: 49px;
			height: 87vh;
		}

		.tab-on{
			padding-top: 50px;
		}

		.selection-tab-item{
			margin-left: 14px;
		}

		.selection-options-container{
			width: 87%;
		}

		.sub-tab-container{
			width: 87%;
		}

		.glass-item{
			font-size: .7em;
		}

		.close{
			top: 42px;
		}

		.ingredient-picker-escape-bar{
			height: 10%;
		}

    	.ingredient-picker-escape-bar{
    		height: 9%;
    		min-height: 75px;
    	}

		.ingredient-back-btn{
			top: auto;
			bottom: 14px;
		}

		.progress-bar-eyecon{
			bottom: -13px;
			position: absolute;
			margin: auto;
			left: 0px;
			right: 0px;	
			height:80%
		}

		.escape-x-selection-stage{
			bottom: 0px;
			top: auto;
		}	
		
		.tabs-container{
			/* margin-top: 29px; */
		}

		.tab-tip-container{
			border-top: 6px solid #907763;
		}

		.tab-tip{
			font-size: .7em;
		}

		.submit-ingredient-btn{
			height: 84%;
			margin-top: 0px;
			font-size: .6em;
		}

		.library-list-name-container{
			display: none!important;
		}

		.selection-list-ingredient-name{
			font-size: .9em;
		}

		.admin-bottom-btn-label{
			font-size: .6em;
		}

		.ingredient-nav-header-spacer{
			/* height: 8%;
			margin-top: 10%;			 */
		}
		
		.ingredient-picker-escape-bar{
			height: 10%;
			padding-top: 10%;
		}

		.ingredient-back-btn{
			top: 55px;
		}

		.escape-x-selection-stage{
			top: 48px;
		}

		.elastic-container{
			top: 10%;
		}

		.show-ingredient-search {
			bottom: -169%;
		}		
	}

/********** end of actual iphone pro max*****/

/********* Ipad Pro 12.9 Inch 3rd Gen ********/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    /* Styles go here */
	.build-card{
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
		margin-top: auto;
	}

	.ingredient-back-btn{
		top: auto;
		bottom: 23px;		
	}

	.escape-x-selection-stage{
		top: auto;
		bottom: 0px;
	}	

	.tab-tip-container{
		bottom: 57px;		
	}

	.search-by-taste-results-container{
		padding-top: 52vh;
	}	

	.invitation-arrow{
		margin-top: 19%;
	}

	.search-by-taste-small-ref-container{
		max-height: 782.2px!important;
	}

	.admin-bottom-btn-label{
		font-size: .6em;
	}	

	.show-ingredient-search{
		bottom: -99%;
	}

	.search-ingredient-imbiblia-bar-2{
		margin-top: 14px;
	}

	.returned-ingredients-scrollable-list{
		margin-top: 23px;
	}

	.glyph-container{
		width: calc(100vh * .11);
		height: calc(100vh * .11);
	}

	.ingredient-glyph{
		height: calc(100vh * .1);
		width: calc(100vh * .1);
	}

	.ingredient-glyph-float{
		height: calc(100vh * .11);
		width: calc(100vh * .11);		
	}

}

/**** Older Gen *****/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

	.build-card{
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
		margin-top: auto;
	}	

	.ingredient-back-btn{
		top: auto;
		bottom: 23px;		
	}	

	.escape-x-selection-stage{
		top: auto;
		bottom: 0px;
	}

	.elastic-container{
		/* bottom: 157px;		 */
		bottom: 0px;
	}

	.tab-tip-container{
		bottom: 57px;		
	}

	.search-by-taste-results-container{
		padding-top: 52vh;
	}

	.invitation-arrow{
		margin-top: 19%;
	}

	.search-by-taste-small-ref-container{
		max-height: 782.2px!important;
	}
	
	.admin-bottom-btn-label{
		font-size: .6em;
	}	
}

/********* Ipad Pro 12.9 Inch 3rd Gen ********/

/********* Ipad mini 6th gen ********/

@media only screen 
  and (min-device-width: 744px) 
  and (max-device-width: 1133px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    /* Styles */
	.build-card{
		top: 112px;
	}	

	.ingredient-back-btn{
		top: 27px;
	}

	.escape-x-selection-stage{
		top: 20px;
	}

	.submit-ingredient-btn{
		height: 81%;
		margin-top: 0px;
	}
}

/********* END Ipad mini 6th gen ********/


/********** Ipad 10th gen *************/

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1080px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .search-by-taste-results-container{
		padding-top: 60vh;
	}
}

/********** END of Ipad 10th gen *************/



/********* Biz features for "mobile" *********/

@media screen and (max-width: 750px) {
	.screenshot-image-container {
		width: 30%;
		margin: 10px;
		border-radius: 10px;
		border: 1px solid rgb(41, 40, 40);
		flex: 0 0 auto;
	}	

	.feature-list-container {
		width: 80%;
		margin: auto;
		margin-top: 40px;
		color: #907763;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		max-width: 700px;
	}

	.feature-item{
		padding-left: 6px;
		font-size: 12px;
		text-align: center;
	}
	
	.rba-header {
		font-size: 1.5em;
	}


}

@media screen and (max-width: 350px){
	.register-biz-account-btn{
		background-color: rgb(71, 71, 71);
		padding: 16px;
		padding-left: 13px;
		padding-right: 13px;
		color: #cf9e77;
		border-radius: 8px;
		font-size: .7em;
	}	
}

/***** End of Biz features for "mobile" ******/



/********** END OF MEDIA QUERIES ************/
/********** END OF MEDIA QUERIES ************/
/********** END OF MEDIA QUERIES ************/
/********** END OF MEDIA QUERIES ************/
/********** END OF MEDIA QUERIES ************/


/******* DO NOT ADD ANY CSS BELOW THIS *******/
/******* DO NOT ADD ANY CSS BELOW THIS *******/
/******* DO NOT ADD ANY CSS BELOW THIS *******/
/******* DO NOT ADD ANY CSS BELOW THIS *******/
/******* DO NOT ADD ANY CSS BELOW THIS *******/