@import url(//fonts.googleapis.com/css?family=Montserrat:400,500,600,400italic);
/*
 * BASE STRUCTURE
 */
 :root {
/*  
first: #40b238, hsl(116.1,52.1%,45.9%), rgba(64,178,56,1); green
second: #2a67da, hsl(219.2,70.4%,51%), rgba(42,103,218,1); blue
third: #563E8E, hsl(258,39.2%,40%), rgba(86,62,142,1); purple
fourth: #e12727, hsl(0,75.6%,51.8%), rgba(225,39,39,1);  red
*/

--first: hsl(116.1,52.1%,45.9%);
--firstdark: hsl(116.1,52.1%,35.9%);
--first70: rgba(64,178,56,.7);
--first30: rgba(64,178,56,.3);
--second: hsl(219.2,70.4%,51%);
--seconddark: hsl(219.2,70.4%,41%);
--second70: rgba(42,103,218,.7);
--third: hsl(258,39.2%,40%);
--thirddark: hsl(258,39.2%,20%);
--third70: rgba(86,62,142,.7);
--fourth: hsl(0,75.6%,51.8%);
--fourthdark: hsl(0,75.6%,41.8%);
--fourth70: rgba(225,39,39,.7);

--body-color: #222;
--body-bkg: #fff;
--border-color: #ddd;
--muted-color: #777;
--link-color: var(--third);
--link-bkg: transparent;
--link-hv-color: var(--seconddark);
--link-color-lite: #fff;

--primary-btn-color: #fff;
--primary-btn-bkg: var(--first); 
--primary-btn-bdr: var(--first);
--primary-btn-hv-color: #fff;
--primary-btn-hv-bkg: var(--firstdark);
--primary-btn-hv-bdr: var(--firstdark);
--primary-btn-bkg70: var(--first70);

--secondary-btn-color: #fff;
--secondary-btn-bkg: var(--third); 
--secondary-btn-bdr: var(--third);
--secondary-btn-hv-color: #fff;
--secondary-btn-hv-bkg: var(--thirddark);
--secondary-btn-hv-bdr: var(--thirddark);
--secondary-btn-bkg70: var(--third70);

--hilight-btn-color: #fff;
--hilight-btn-bkg: var(--third); 
--hilight-btn-bdr: var(--third);
--hilight-btn-hv-color: #fff;
--hilight-btn-hv-bkg: var(--thirddark);
--hilight-btn-hv-bdr: var(--thirddark);
--hilight-btn-bkg70: var(--third70);

--nav-bkg: var(--thirddark);
--nav-ul-bkg: var(--first);
--nav-ul-color: #fff;
--nav-ul-hv-color:  var(--firstdark);
--nav-ul-open-color: #fff;
--nav-ul-open-bkg: var(--firstdark);
--nav-ul-open-menu-bkg: var(--firstdark);
--nav-drop-hilite-color: #fff;
--nav-drop-head-color: #fff;
--nav-drop-color: #fff;
--nav-drop-hv-color: var(--second);
--nav-drop-hv-bkg: transparent;

--topbar-color: #fff;
--topbar-bkg: var(--firstdark);

--sectionhead-bdr: var(--second);
--section-dark-bkg: var(--first);
--section-dark-bkg-start: var(--fourth70);
--section-dark-bkg-end: var(--fourth70);
--section-med-bkg: #f9f9f9;
--section-med-bkg-start: #f9f9f9;
--section-med-bkg-end: #f9f9f9;
--section-lite-bkg: #fff;
--section-lite-bkg-start: #fff;
--section-lite-bkg-end: #fff;
--underline-bdr: var(--fourth);
--underline-lite-bdr: #eee;

--tab-color: #ddd;
--tab-bdr: #ddd;
--tab-bkg: transparent;
--tab-active-color: var(--second);
--tab-active-bdr: #ddd;
--tab-active-bkg: #ddd;

--panel-border: #ddd;

--footer-bkg: #232323;

}

/* main layout */
html, body {
	height: 100%;
}
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
}
.content {
	flex: 1;
}
footer {
	width: 100%;
	margin-top: 15px;
	padding-top: 15px;
	padding-bottom: 65px;
	border-top: 1px solid var(--border-color);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: 'Montserrat', sans-serif;	
  font-weight: 600;
  color: var(--third);
}
.page-title {
	margin: 15px 0 0;
	text-align: center;
}
.app-name {
	color: var(--third);
}
a {
	color: var(--link-color);
}
a:hover {
	color: var(--link-hover-color);
}

/* navigation */
.navbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 1030;
	color: var(--nav-ul-color);
	background-color: var(--nav-bkg) !important;
}
.nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: .6em;
	line-height: 2;
}
@media (min-width: 992px) { For lg and up
	.navbar {
        top: 0;
	}
	.content {
        padding-top: 65px; /* Space for the fixed navbar */
	}
}
@media (max-width: 991px) { /* For md and below */
	.navbar {
		top: auto;
        bottom: 0;
	}
	.content {
        padding-bottom: 65px; /* Space for the fixed navbar */
	}
}

/* buttons */
.btn-primary,
.btn-secondary,
.btn-hilight,
.section-dark a.btn.btn-default {
	align-items: center;
	text-align: center;
	justify-content: center;
	box-sizing: border-box;
	display: inline-flex;
	max-width: 600px;
	min-width: 150px;
	margin: 5px;
	padding: .5vw 2vw;
	border-radius: 6px;
	line-height: 1.5;
	color: var(--primary-btn-color);
	background-color: var(--primary-btn-bkg);
	border: 0px solid var(--primary-btn-bdr);
	text-decoration: none;
	font-size: 1em;
}
.btn-primary:hover,
.btn-primary:active:hover,
.section-dark a.btn.btn-default:hover {
	color: var(--primary-btn-hv-color);
	background-color: var(--primary-btn-hv-bkg);
	border-color: var(--primary-btn-hv-bdr);
	border: none;
	text-decoration: none;
}
.btn-secondary,
.sh-modal-dialog-footer .sh-button.sh-button-primary {
	background-color: var(--secondary-btn-bkg) !important;
	color: var(--secondary-btn-color) !important;
	border-color: var(--secondary-btn-bdr) !important;
}
.btn-secondary:hover,
.btn-secondary:active:hover,
.sh-modal-dialog-footer .sh-button.sh-button-primary:hover,
.sh-modal-dialog-footer .sh-button.sh-button-primary:active:hover {
	background-color: var(--secondary-btn-hv-bkg);
	color: var(--secondary-btn-hv-color);
	border-color: var(--secondary-btn-hv-bdr);
}
.btn-hilight {
	background-color: var(--hilight-btn-bkg);
	color: var(--hilight-btn-color);
	border-color: var(--hilight-btn-bdr);
}
.btn-hilight:hover,
.btn-hilight:active:hover  {
	background-color: var(--hilight-btn-hv-bkg);
	color: var(--hilight-btn-hv-color);
	border-color: var(--hilight-btn-hv-bdr);
	border: none;
}
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-hilight.btn-sm {
	min-width: 50px;
	padding: 6px 9px;
	margin: 1px;
	font-size: .85em;
}
.btn-primary.btn-xs,
.btn-secondary.btn-xs,
.btn-hilight.btn-xs {
	min-width: 40px;
	padding: 3px 5px;
	margin: 1px;
	font-size: .75em;
}
.btn-transparent,
.biobutton {
	border: 1px solid var(--primary-btn-bdr);
  	color: var(--primary-btn-color);
	background-color: transparent;
}
.btn-transparent:hover,
.biobutton:hover {
	color: var(--primary-btn-hv-color);
	background-color: var(--primary-btn-hv-bkg);
	border-color: var(--primary-btn-hv-bdr);
}

/* login layout */
body.login,
body.reset {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	text-align: center;
	background: linear-gradient(130deg, var(--third), var(--thirddark));
}
.login-container,
.reset-container,
.profile-container {
	background-color: var(--body-bkg);
	min-height: 20vh;
	width: 320px;
	border-radius: 8px;
	padding: clamp(10px, 1vw, 20px);
}
.login-container form,
.reset-container form,
.profile-container form {
	text-align: center;
}
.login-container form .form-group,
.reset-container form .form-group,
.profile-container form .form-group {
	text-align: left;
}
.text-sm-it {
	font-size: .8em;
	font-style: italic;
}
.btn-login {
	margin-top: 45px;
}
/* create account layout */
body.create-account {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	text-align: center;
	background: linear-gradient(130deg, var(--third), var(--thirddark));
}
.create-container {
	background-color: var(--body-bkg);
	min-height: 20vh;
	width: 320px;
	border-radius: 8px;
	padding: clamp(10px, 1vw, 20px);
}
.create-container form {
	text-align: center;
}
.create-container form .form-group {
	text-align: left;
}
.btn-create {
	margin-top: 45px;
}
/* profile layout */
.profile-container {
	display: flex;
	justify-content: center;
	background-color: var(--body-bkg);
	width: 100%;
	border-radius: 8px;
	padding: clamp(10px, 1vw, 20px);
}
.profile-container form {
	text-align: center;
	border: 1px solid var(--thirddark);
	border-radius: 8px;
	padding: clamp(10px, 1vw, 20px);
}
.profile-container form .form-group {
	text-align: left;
}

/* forms */
input {
	border: none;
	border-bottom: 1px solid var(--border-color);
	border-radius: 0;
	padding: 5px;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
input:focus {
	outline: none;
	border-bottom-color: var(--thirddark);
	box-shadow: none;
}
#showPasswordButton {
	border: none;
	background: none;
	position: absolute;
	right: 0;
}
.input-group {
	margin-bottom: 10px;
}
label {
	min-width: 24px;
}
.other-option-text {
	text-align: center;
	margin: 30px 0 0;
	font-size: .9em;
}

/* allergen list page - home page */
.allergen-list {
	padding: 0;
	margin: 15px 0 0;
	list-style: none;
}
.allergen-list li {
	display: flex;
	align-items: center;
}
.allergen-list li.allergen-list-header .name-cas {
	display: flex;
	flex-grow: 1;
	align-items: center;
	padding: 5px 0 5px 5px;
	border-bottom: 1px solid var(--border-color);
	font-weight: 600;
	font-size: 1.2em;
	color: var(--third70);
}
.allergen-list li.allergen-list-header .name-cas span:nth-child(2) {
	margin-left: 15px;
}
.allergen-list li a.view-link {
	display: flex;
	flex-grow: 1;
	align-items: center;
	padding: 15px 5px;
	border-bottom: 1px solid var(--border-color);
	text-decoration: none;
}
.allergen-list li a.view-link:hover {
	background-color: var(--section-med-bkg);
}
.print-link {
	margin-left: 15px;
}
.disabled {
	opacity: .75;
 	cursor: default;
 	color: var(--muted-color);
}
.disabled:hover {
	color: var(--muted-color);
}
.allergen-list li a.disabled:first-of-type:hover {
	background-color: transparent;
}
.allergen-list li a i {
	margin-left: auto;
}
.allergen-name {
	font-weight: 600;
	margin-left: 15px;
	width: 90%
}
.allergen-cas {
	text-align: left;
	white-space: nowrap;
}
.back-link {
	display: inline-block;
	margin-bottom: 15px;
}
@media (max-width: 991px) {
	.allergen-list li a:first-of-type {
		display: block;
	}
	.allergen-cas {
		display: block;
	}
	.allergen-name {
		margin-left: 0;
		width: 100%;
	}
	.allergen-list li.allergen-list-header .name-cas span:nth-child(2) {
		display: none;
	}
}
/* view allergen detail page */
.detail-links {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-color);
	margin: 15px 0;
}
/* find allergen page */
.alphaLinks {
 	list-style: none;
 	display: flex;
 	flex-wrap: wrap;
 	margin: 0;
 	padding: 0;
 }
 .alphaLinks > li {
 	display: inline-block;
 }
 .alphaLinks > li > a {
 	margin-left: -1px;
 	border: 1px solid var(--border-color);
 	text-decoration: none;
 	padding: 3px 7px;
 	line-height: 2;
 }
 .alphaLinks > li > a.active {
 	background-color: #eee;
 }
 .alphaLinks > li > a.disabled {
 	color: #ddd;
 }
.col2 {
 	columns: 2;
    column-gap: 10px;
}
.col3 {
 	columns: 3;
    column-gap: 10px;
}