nutrition-label-jquery-plugin/dist/css/nutritionLabel.css

To be able to create a FDA-style nutrition label with any nutrition data source

/*
 ***************************************************************************************************************************************************+
 * NUTRITIONIX.com                                                                                                                                  |
 *                                                                                                                                                  |
 * This plugin allows you to create a fully customizable nutrition label                                                                            |
 *                                                                                                                                                  |
 * @authors             Leo Joseph Gajitos <leejay22@gmail.com>, Rommel Malang <genesis23rd@gmail.com> and Yurko Fedoriv <yurko.fedoriv@gmail.com>  |
 * @copyright           Copyright (c) 2017 Nutritionix.                                                                                             |
 * @license             This Nutritionix jQuery Nutrition Label is dual licensed under the MIT and GPL licenses.                                    |
 * @link                http://www.nutritionix.com                                                                                                  |
 * @github              http://github.com/nutritionix/nutrition-label                                                                               |
 * @current version     11.0.13                                                                                                                     |
 * @stable version      11.0.4                                                                                                                      |
 * @supported browser   Firefox, Chrome, IE8+                                                                                                       |
 * @description         To be able to create a FDA-style nutrition label with any nutrition data source                                             |
 *                                                                                                                                                  |
 ***************************************************************************************************************************************************+
*/
@import url("https://fonts.googleapis.com/css?family=Archivo+Black");

/*******************************************************************************************************************
***********************************START OF THE LEGACY RELATED STYLES**********************************************
******************************************************************************************************************/
.nutritionLabel input.unitQuantityBox.ui-input-text {
	margin-top: 0;
	border-radius: 0;
	height: auto;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}

.nutritionLabel input.unitQuantityBox.ui-shadow-inset {
	box-shadow: none;
}


.nutritionLabel {
	font-size: 90%;
	margin-bottom: 1.1em;
	padding: .68em;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	border: 2px solid #000;
	line-height: normal;
}
.nutritionLabel .title {
	line-height: .83em;
	font-size: 2.7em;
	padding-bottom: 4px;
	font-family: 'Archivo Black';
	white-space: nowrap;
	letter-spacing: -2px;
}
.nutritionLabel .m {
	font-size: .9em;
}
.nutritionLabel .serving {
	font-size: 1.1em;
	line-height: 1.28em;
}
.nutritionLabel .name {
	font-size: 1.1em;
	line-height: 1.3em;
	/*padding-top: 5px; */
}

.nutritionLabel .name.inline {
	padding-top: .2em;
	padding-top: .25em \9;
}

.nutritionLabel .dvCalorieDiet,
.nutritionLabel #calcDisclaimer {
	font-size: .9em;
}
.nutritionLabel .line {
	border-top: 1px solid #333;
	padding: 1px 0
}
.nutritionLabel .line.last {
	border-bottom: 1px solid #333;
}
.nutritionLabel .line.indent {
	margin-left: 15px;
}
.nutritionLabel .dv {
	float: right;
}
.nutritionLabel .dv:before {
	content: '\0000a0';
}
.nutritionLabel .bar1 {
	height: 11px;
	line-height:0;
	font-size:1px;
	background: #333;
	margin-top: 3px;
}
.nutritionLabel .bar2 {
	height: 6px;
	line-height:0;
	font-size:1px;
	background: #333;
}

.nutritionLabel .dvCalorieDiet {
	color: #707070;
}
.nutritionLabel .calorieNote {
	padding: .60em 0 0 .70em;
}
.nutritionLabel .star {
	margin-left: -7px;
}
.nutritionLabel .tblCalorieDiet th {
	font-size: .7em;
	border-bottom: 1px solid #333;
	text-align: left;
	color: #707070;
}
.nutritionLabel .tblCalorieDiet {
	width: 100%;
}
.nutritionLabel .tblCalorieDiet td {
	padding: 0;
	line-height: normal;
	font-size: .7em;
	color: #707070;
}
.nutritionLabel .ar {
	text-align: right;
}
.nutritionLabel .fr {
	float: right;
}
.nutritionLabel .fl {
	float: left;
}

.nutritionLabel #calcDisclaimer {
	color: #707070;
}

.notApplicable{
	color: gray;
	font-weight: bold;
	font-size: 1.2em;
	cursor: default;
	margin-top: .2em;
}
.naTooltip{
	position: absolute;
	display: none;
	border: 1px solid black;
	padding: 2px;
	text-align: center;
	height: 18px;
	width: 120px;
	background-color: #ffc;
	z-index: 10000;
}
.nutritionLabel .spaceAbove {
	 height: 10px;
}
.nutritionLabel .spaceBelow {
	 height: 10px;
}
.nutritionLabel .setter {
	width: 12px;
	padding: 3px 0 0 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
}
.nutritionLabel .setter a {
	display: block;
	width: 9px;
	height: 7px;
	font-size: 1px;
	line-height: 0em;
}

.nutritionLabel a.unitQuantityUp {
	padding-bottom: 1px;
	background: transparent url("images/up.png") left top no-repeat;
	z-index: 9999;
}

.nutritionLabel a.unitQuantityDown {
	padding-top: 1px;
	background: transparent url("images/down.png") left bottom no-repeat;
	z-index: 9999;
}

.nutritionLabel input.unitQuantityBox {
	width:25px;
	height: 20px;
	padding:2px;
	font-size: .9em !important;
	margin-left: 15px;
	margin-bottom: 0;
	line-height: 15px;
}
.nutritionLabel input.unitQuantityBox.arrowsAreHidden {
	margin-left: 0;
}
.nutritionLabel .rel {
	position: relative;
}

.nutritionLabel .servingSizeField {
	float: left;
	margin-top: .2em;
	margin-bottom: 0;
	margin-right: .4em;
}
.nutritionLabel .servingUnit {
	float: left;
	padding: 0;
	margin-top: .3em;
	margin-bottom: .2em;
}
.nutritionLabel .servingWeightGrams {
	padding: 0 0 0 .3em;
	margin-top: .3em;
	margin-bottom: .2em;
}
.nutritionLabel .servingSizeText {
	padding-right: .3em;
	margin-top: .3em;
}
.nutritionLabel .servingUnitQuantity {
	margin-top: .3em;
	padding-right: .3em;
}
.cf:before,
.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.cf:after {
	clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
	*zoom: 1;
}

.nutritionLabel .servingSizeText {
	display: inline-block;
}

.ingredientListDiv.scroll, .ingredientListDivHiddenDailyValues.scroll {
	overflow-y: scroll !important;
}

#calcDisclaimer.scroll {
	overflow-y: scroll !important;
}

#calcDisclaimer {
	line-height: normal;
}
.nutritionLabel .ingredientListDiv {
	padding-top: 10px;
}

.nutritionLabel .addedPadding {
	padding: 1px 0;
}
/*******************************************************************************************************************
*************************************END OF THE LEGACY RELATED STYLES**********************************************
******************************************************************************************************************/


/*******************************************************************************************************************
***********************************START OF THE 2018 LABEL RELATED STYLES******************************************
******************************************************************************************************************/
.nf {
	border: 1px solid #000;
	padding: 6px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
}

.nf-line {
	border-top: 1px solid #000;
	padding-top: 1px;
	padding-bottom: 1px;
	font-size: .94em;
}

.nf-title,
.nf-servingUnitQuantity,
.nf-highlight,
.nf-serving,
.nf-amount-per-serving,
.nf-calories {
	font-family: 'Archivo Black', sans-serif;
}

.nf-title {
	font-size: 2.15em;
	line-height: 1.15em;
	margin-top: -6px;
}

.nf-per-container {
	font-size: 1.15em;
	line-height: normal;
}

.nf-serving {
	font-size: 1.2em;
	line-height: normal;
}

.nf-amount-per-serving {
	font-size: .94em;
}

.nf-calories {
	font-size: 2em;
	line-height: 1em;
}

.nf-percent-dv {
	font-size: .84em;
}

.nf-indent2 {
	margin-left: 28px;
}

.nf-indent {
	padding-left: 16px;
}

.nf-vitamin-column {
	font-size: .94em;
	padding: 1px 0;
	border-bottom: 1px solid #000;
}

.nf-vitamin-column-last {
	border-bottom: 0;
}

.nf-footnote, .nf-footnoteHiddenDailyValues {
	padding-top: 4px;
	margin-left: 5px;
	font-size: .85em;
	line-height: 1em;
}

.nf-footnote:before {
	content: "*";
	float: left;
	margin-left: -5px;
}

.nf-footnoteHiddenDailyValues:before {
	float: left;
	margin-left: -5px;
}

.nf-text-right {
	text-align: right;
}

.nf-pr {
	float: right;
}

.nf-bar1 {
	height: 5px;
}

.nf-bar2 {
	height: 10px;
}

.nf-bar1,
.nf-bar2 {
	background-color: #000;
	clear: both;
}

.clear:before,
.clear:after {
	content: " ";
	display: table;
}

.clear:after {
	clear: both;
}
.nf-ingredientListDiv {
	padding-top: 8px;
}

.nf-ingredientListDiv.scroll, .nf-ingredientListDivHiddenDailyValues.scroll {
	overflow-y: scroll !important;
}

#nf-calcDisclaimer.scroll {
	overflow-y: scroll !important;
}

.nf-tblCalorieDiet {
	margin-top: 5px;
	width: 100%;
}

.nf-tblCalorieDiet tr th,
.nf-tblCalorieDiet tr td {
	font-size: .80em;
}

.nf-customFooter,
.nf-homeLinkPrint {
	font-size: .80em;
}

.nf-arrow-up,
.nf-arrow-down {
	width: 0;
	height: 0;
	border-style: solid;
}

.nf-arrows {
	float: left;
	padding: 4px 5px 0 0;
}

.nf-arrow-up {
	margin-bottom: 3px;
	border-width: 0 5px 6px 5px;
	border-color: transparent transparent #333333 transparent;
}

.nf-arrow-down {
	margin-bottom: -2px;
	border-width: 6px 5px 0 5px;
	border-color: #333333 transparent transparent transparent;
}

.nf-unitQuantityBox,
.nf-modifier-field {
	width: 26px;
	text-align: center;
	line-height: normal;
	border: 1px solid #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	float: left;
	padding: 0;
	margin-top: 3px;
}

.nf-item-name {
	margin-left: 50px;
	line-height: 1.25em;
	padding-top: 4px;
	padding-bottom: 3px;
}

.nf .nf-item-name.inline {
	padding-top: .2em;
	padding-top: .25em \9;
}

.nf input.nf-unitQuantityBox.arrowsAreHidden {
	margin-left: 0;
}

div.nf-unitQuantityUp:hover, div.nf-unitQuantityDown:hover{
	cursor: pointer;
}

.customFooter, .nf-customFooter{
	padding-top: 10px;
}
.nf-servingUnitQuantity {
	display: inline-block;
}

.nf-item-name.nf-fixed-serving {
	margin-left: 35px;
}

.nf-item-name.no-indent {
	margin-left: 0;
}
.nf-arrowsAreHidden + input + .nf-item-name {
	margin-left: 35px;
}

div, span{
	outline: 0;
}

.nf .nf-spaceAbove {
	 height: 10px;
}
.nf .nf-spaceBelow {
	 height: 10px;
}

/*
Added October 15, 2021
*/
.nf-text-strong {
	font-family: 'Archivo Black', sans-serif;
	font-size: 1.2em;
	line-height: 1.3;
}

/*
Added January 31, 2022
*/

.nf-item-name.block {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.2em;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
}

.nf-serving-unit-name {
    margin-left: 50px;
    line-height: 1.25em;
    padding-top: 4px;
    padding-bottom: 3px;
}

.nf-serving-unit.no-indent {
    margin-left: 0;
}
/*******************************************************************************************************************
*************************************END OF THE 2018 LABEL RELATED STYLES******************************************
******************************************************************************************************************/


/*******************************************************************************************************************
*************************************START OF THE UK LABEL RELATED STYLES******************************************
******************************************************************************************************************/
.uk_nf {
	border: 1px solid #000;
	padding: 6px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	text-align: left;
}

.uk_nf table {
	width: 100%;
	border-collapse: collapse;
	border-top: 4px solid #000;
}

.uk_nf.uk .uk_nf-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.15em;
	line-height: 1.15em;
	margin-top: -6px;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 6px;
}

.uk_nf.uk .uk_nf-ingredient-statement,
.uk_nf.uk .uk_nf-disclaimer {
	padding-top: 8px;
}

.uk_nf-indent {
	padding-left: 16px;
}
.uk_nf table tr th,
.uk_nf table tbody tr td {
	border-bottom: 1px solid #000;
	padding-top: 4px;
	padding-bottom: 4px;
}

.uk_nf table tfoot tr td {
	padding-top: 4px;
	font-size: 90%;
	line-height: normal;
}

.uk_nf-arrows {
	float: left;
	padding: 4px 5px 0 0;
}
.uk_nf-arrow-up, .uk_nf-arrow-down {
		width: 0;
		height: 0;
		border-style: solid;
}
.uk_nf-arrow-up {
	margin-bottom: 3px;
	border-width: 0 5px 6px 5px;
	border-color: transparent transparent #333 transparent;
}
.uk_nf-arrow-down {
		margin-bottom: -2px;
		border-width: 6px 5px 0 5px;
		border-color: #333 transparent transparent transparent;
}

.referenceIntake {
	padding-top: 5px;
}

.uk_nf-customFooter {
	padding-top: 10px;
}

.uk_nf .uk_nf-spaceAbove {
	 height: 10px;
}
.uk_nf .uk_nf-spaceBelow {
	 height: 10px;
}

.uk_nf-ingredientListDiv.scroll {
	overflow-y: scroll !important;
}

#uk_nf-calcDisclaimer.scroll {
	overflow-y: scroll !important;
}

.uk_nf-servingUnit {
	display: inline-block;
}
.uk_nf table tr th {
	white-space: nowrap;
	padding-right: 15px;
}
.uk_nf table tr th:nth-child(3) {
	white-space: normal;
}

.uk_nf-item-name {
	font-size: 18px;
	padding-bottom: 7px;
	line-height: 18px;
}

.uk_nf input.unitQuantityBox.ui-input-text {
	margin-top: 0;
	border-radius: 0;
	height: auto;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}

.uk_nf input.unitQuantityBox.ui-shadow-inset {
	box-shadow: none;
}

.uk_nf .setter a {
	display: block;
	width: 9px;
	height: 7px;
	font-size: 1px;
	line-height: 0em;
}

.uk_nf a.uk_nf-unitQuantityUp {
	width: 50px;
	height: 50px;

	padding-bottom: 1px;
	background: transparent url("images/up.png") left top no-repeat;
	z-index: 9999;
}

.uk_nf a.uk_nf-unitQuantityDown {
	padding-top: 1px;
	background: transparent url("images/down.png") left bottom no-repeat;
	z-index: 9999;
}

.uk_nf input.uk_nf-modifier-field {
	text-align: center;
	width: 25px;
	height: 20px;
	padding: 2px;
	font-size: .9em !important;
	margin-bottom: 0;
	line-height: 15px;
}
.uk_nf input.uk_nf-modifier-field.arrowsAreHidden {
	margin-left: 0;
}

.uk_nf .setter {
	width: 12px;
	padding: 3px 0 0 0;
	position: static;
	float: left;
}
.uk_nf .setter a {
	display: block;
	width: 9px;
	height: 7px;
	font-size: 1px;
	line-height: 0em;
}

/*******************************************************************************************************************
**************************************END OF THE UK LABEL RELATED STYLES*******************************************
******************************************************************************************************************/

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

.nutritionLabel div::-webkit-scrollbar,
.nf div::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}
.nutritionLabel div::-webkit-scrollbar-thumb,
.nf div::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: #c1c1c1;
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3);
}

.nutritionLabel div::-webkit-scrollbar-thumb:hover,
.nf div::-webkit-scrollbar-thumb:hover {
	background-color: #888;
}

.nutritionLabel div::-webkit-scrollbar-track,
.nf div::-webkit-scrollbar-track {
	background: #e9e9e9;
	border: 0 none #fff;
	border-radius: 4px;
}

/* Added Feb 16, 2022 */
.nf-arrowsAreHidden + #nf-nixLabelBeforeQuantity + .nf-serving-unit-name {
	margin-left: 33px;
}

.nf-serving-unit-name.no-indent {
	margin-left: 0;
}