/*! Custom fonts */

.navbar-brand {
	font-weight: 700
}

/*! Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
	color: #45526e;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 2rem;
}


/*! Small text */

.small {
	color: #9e9e9e;
	font-size: 0.7rem;
}

/*! Muted secondary color */

.muted {
	color: #c7cbd4;
}


/*! Form labels */

.form-label {
	font-size: 0.8rem;
	color: #9e9e9e;
	font-weight: 400;
	margin-bottom: 0.1rem;
}

.ingredient-form-label {
	font-size: 0.8rem;
	color: #9e9e9e;
	font-weight: 300;
	margin-bottom: 0.1rem;
	
}




/*!
Sticky bar with totals for formula create/edit pages. By default it sticks to top, so we calculate the offset and then add negative margin to compensate its absence in the original space.
*/

.totals-bar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(100vh - 4.5rem);
    z-index: 100;
	margin-top: -4.25rem;
	padding: 0.25rem 2.25rem 0.75rem 2.25rem;
	opacity: 75%;
}

.compare-bar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(6vh);
    z-index: 100;
	padding: 1rem 2.25rem 1rem 2.25rem;
	opacity: 75%;
}

/*!
CSS for visual representation of teaspoons
*/

.teaspoon_one {
	width: 24px;
	height: 24px;
	margin-left: 5px;
	border-radius: 50%;
}
.teaspoon_two {
    box-shadow: -5px 0 0 0 #fff,
              -15px 0 0 0 #aaa;
	margin-left: 20px;
}
.teaspoon_three {
    box-shadow: -5px 0 0 0 #fff,
              -15px 0 0 0 #aaa,
              -20px 0 0 0 #fff,
              -30px 0 0 0 #aaa;
	margin-left: 35px;
}

/*!
Image preview
 */

.formula-edit-image {
	width: 200px;
}

.formula-old-image {
	opacity: 0.25;
}

/*!
Edit button
 */
 
.button-edit {
	float: right;
	color: #c7cbd4;
	padding:0;
	margin-left: -1.5rem;
	position: relative;
}

/*!
Fix the position of right navbar menu
 */

.dropdown-menu-right {
	right: 0;
    left: auto !important;
}


/*!
Adjust tables
 */

table th {
    font-size: 1rem;
    font-weight: 700;
}

table td {
    font-size: 1rem;
    font-weight: 400;
}

.tr-separator {
	background-color:#FCFDFE;
}

.td-separator {
	padding-top: 1rem !important;
}

.table-sm > :not(caption) > * > * {
	padding: 0.25rem 1rem;
}

/*!
Disable collapsing animation
 */

.collapsing {
    -webkit-transition: none;
    transition: none;
}

/*!
Correct text color on buttons
 */

.btn-primary {
	
    color: #fff;
}

.btn-primary {
	
    color: #fff;
}

/*!
Add scroll to dropdown menu and limit its height
 */
 
.dropdown-scrollable {
    height: auto;
    max-height: 400px;
    overflow-y: auto;
}


/* Hide arrows in the number input fields */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/*!
Card Badge
 */
 
.card-badge {
	
	position: absolute;
    right:10px;
    top:10px;
}

/*!
Align numbers in input fields
 */

input[type=number] {
  text-align:right;
}


/*!
Mobile-specific changes
*/

@media (max-width: 600px) {
	
	/*!
	Increase font size
	*/
 
	html {
		font-size: 110%;
	}

	.card-body {
		height: 100%;
		padding-left: 0;
		display: table-cell;
		vertical-align: middle;
		
	}
	
	.navbar-collapse {
		padding-top: 1rem;		
	}
	
	.navbar-button {
		width: 100%;
	}
}