@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,700;1,400;1,700&display=swap');

ul, ol {
    margin-bottom:18px;
    padding-left:1.5em;
} /*copied from application.css*/

.vertical-label {
	line-height:150%;
}

.mini-input {
	border:.5px solid #576974 !important;
	padding:1.5px !important;
}

.integer_input {
	width:50px !important;
}


.public-listing {
	display: grid;
  grid-template-columns: auto auto;
}

.public-listing div {
	margin-left: 10px;
	margin-bottom:30px;
}


a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0px 3px 0px 5px;
}

#helpButton::after, .home_button::after,#contactUs::after,.thumbnail::after,.stat-link a::after, .new-footer a::after, .arrow-action-btn::after {
  content: '';
}

a.arrow-action-btn::after {
  content: ' \2192'; /* Unicode right arrow */
  font-size: 120%;
  margin-left: 8px;
  vertical-align: middle;
}

a[target="_blank"].arrow-action-btn::after {
  content: ' \2192'; /* Always show arrow, not icon */
  margin-left: 8px;
  vertical-align: middle;
}

@media screen and (max-width: 800px) {
	.public-listing {
  grid-template-columns: auto;
};
}

.center-tab ul {
	display: none;
}

.link-list {
	columns: 2;
}

.link-list li {
	list-style-type: none !important;
	margin-left: 10px !important;
}



@media screen and (max-width: 800px) {
.link-list {
	columns: 1;
};	
}

.div-grid {
	display:grid;
	grid-template-columns: fit-content(400px) fit-content(400px) fit-content(400px) fit-content(400px);
  grid-gap: 5px;
  box-sizing: border-box;
  padding: 10px;
	
}

@media screen and (max-width:1400px) {
	.div-grid {
		grid-template-columns: fit-content(400px) fit-content(400px) fit-content(400px);
	}
}

@media screen and (max-width:1000px) {
	.div-grid {
		grid-template-columns: fit-content(400px) fit-content(400px);
	}
}

@media screen and (max-width:800px) {
	.div-grid {
		grid-template-columns: fit-content(400px) ;
	}
}


/*.big-div-list div:nth-child(odd) { 
background-color: #ebf4fb;}*/

.big-div-list input[type="checkbox" i] {
	margin-right: 10px !important;
}

.big-div-list div tr {
	background-color: inherit !important;
}

.big-div-list tr div { margin: 0px}

.embedded-table {
  margin:-4px;
}

.hidden {
	display: none;
}
/* context menu on top of page */
.center-tab {
	margin:0;
	padding: 5px 5px 5px 0px;
	/*justify-content: center;
	display: flex;*/
	overflow: visible;
	text-align: center;
}

.center-tab-submenu {
	padding: 5px 5px 5px 0px;
	margin:0;
	justify-content: center;
	vertical-align:center;
	position: absolute;
	display:none;
}

.right-tab ul li {
	list-style:none;
	display:inline-block;
}

/*can be used to establish width despite center-div's justify center */
.full_width {
	width:350px !important;
}
/* override input-box borders */
.no_borders tr td {
	border:none !important;
}
 /*completely override center-div's justify center */
.unjustified {
	 display:block !important;
 }

.responsive-center-div {
  margin: 10px auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 10px;
}

/* Default: 3-column layout */
.responsive-center-div > .column {
  flex: 0 1 32%;
  box-sizing: border-box;
  border: 0.05px solid #bde0f1;
  border-radius: 5px;
  background-color: #fbfcef;
  font-size: 13px;
  line-height: normal;
}

/* Two-column override (applies even on large screens) */
.responsive-center-div.two-column > .column {
  flex: 0 1 48%;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .responsive-center-div > .column,
  .responsive-center-div.two-column > .column {
    flex: 0 1 48%;
  }
}

@media (max-width: 600px) {
  .responsive-center-div > .column,
  .responsive-center-div.two-column > .column {
    flex: 0 1 100%;
  }
}




.center-div{
  margin:10px auto;
  padding: 10px;
  border: .05px solid #9bc2ef;
  /*box-shadow: 1px 1px #bde0f1, -1px -1px #bde0f1;*/
  line-height:normal;
  font-size: 13px;
  display: flex;
  justify-content: center;
 	border-radius: 5px;
  background-color: #fbfcef;
}

.full .center-div {
	width:95%;
}

.center-div container{
	width:100%;
}

.last-div {
	border:none !important;
	box-shadow: none !important;
}

.center-div h5, .responsive-center-div h5  {
	color: #006699 !important;
}

.center-div ol li,
.responsive-center-div ol li,
.center-div ul li ul li,
.responsive-center-div ul li ul li,
.full_size_print ol li,
.full_size_print ul li ul li {
	margin-left:5%;
	list-style-type:lower-alpha;
}

.center-div ol li ol li,
.responsive-center-div ol li ol li,
.full_size_print ol li ol li {
	
	list-style-type:numeric;
}

.center-div ul li,
.responsive-center-div ul li,
.center-div ol li ul li,
.responsive-center-div ol li ul li,
.full_size_print ul li,
.full_size_print ol li ul li {
	margin-left: 5%;
	list-style-type: disc;
}

.center-div ul li ul li,  .responsive-center-div ul li ul li, .full_size_print ul li ul li {
	
	list-style-type:circle;
}


.center-div-label {
	border:1px white;
	margin:10px auto;
  padding: 10px;
}

.center-div-heading {
	margin-left: 25%;
    font-weight: bold;
}

.center-div table th, .responsive-center-div table th {
	font-weight: bold;
}

.nextButton, .backButton {
position: relative;
display: block;
width: 150px;
height: 50px;
border-radius:  5px;
background: #eee;
border: 1px #eee solid;
font-size: 22px;
font-family:inherit;
color: goldenrod;
font-weight:600;
line-height: 50px;
text-align: center;
text-decoration: none;
}

.nextButton {
	float:right;
	margin-right: 30px
}

.backButton {
	float:left;
	margin-left: 30px
}

.nextButton:before,
.nextButton:after
 {
  content: '';
  position: absolute;
  right: -15px;
  width: 32px;
  height: 15px;
  border-radius: 5px;
  background: #eee;
}
.nextButton:before
 {
  top: 9px;
  -webkit-transform: rotate(65deg);
  -ms-transform: rotate(65deg);
  transform: rotate(65deg);
}
.nextButton:after
 {
  bottom: 9px;
  -webkit-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  transform: rotate(-65deg);
}


.backButton:before,
.backButton:after
 {
  content: '';
  position: absolute;
  left: -15px;
  width: 32px;
  height: 15px;
  border-radius: 5px;
  background: #eee;
}

.backButton:after
 {
  top: 9px;
  -webkit-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  transform: rotate(-65deg);
}

.backButton:before
 {
  bottom: 9px;
  -webkit-transform: rotate(65deg);
  -ms-transform: rotate(65deg);
  transform: rotate(65deg);
}

.nextButton:hover, .backButton:hover {
	color: #111;
}
/* create normal text in full width window*/
.full_size_print, .full_size_print p, .full_size_print li {
	font-size: 15px;
}

.full_size_print h4, .full_size_print h5 {
	font-size: 16px;
}

.full_size_print {
	margin:0 20px;
}

.center-div .mini-droplist {
    border: none;
}

@media only screen and (min-width: 1000px) {
    .center-div, .center-div-label  {zoom:120%;}
    }	

@media only screen and (max-width: 800px) {

		.center-tab-submenu {
			padding-top: 2em
		}

    .center-div, .center-div-label  
    {zoom:90%;}

			#edit-formula td {
			  display:block
			}

			.backButton, .nextButton {
				font-size:inherit;
				height:1em;
				width:2em;
				background:none;
			}

				.backButton:before, .nextButton:before,
				.backButton:after, .nextButton:after{
					background:none;
				}

				.backButton:before {
					content: ''
				}

			

				.nextButton:before
			 {
			  top: 0;
			  -webkit-transform: rotate(0);
			  -ms-transform: rotate(0);
			  transform: rotate(0);
			}
			.nextButton:after
			 {content: " »";
			  right:-1.5em;
				 bottom: 0.1em;
			  -webkit-transform: rotate(0);
			  -ms-transform: rotate(0);
			  transform: rotate(0);
			}
				.backButton:after
			 {
			  top: 0;
			  -webkit-transform: rotate(0);
			  -ms-transform: rotate(0);
			  transform: rotate(0);
			}
			.backButton:before
			 {content: "«";
			  left:-1.5em;
				 bottom: 0.1em;
			  -webkit-transform: rotate(0);
			  -ms-transform: rotate(0);
			  transform: rotate(0);
			}
}

    
.basic-info-table td:nth-child(1) {
  width: 80px;
}



.basic-info-table td {
    padding-bottom: 5px;
}

.basic-info-table textarea, .input-box-table textarea {
  height: 50px;
  width:90%;
}

@media screen and (max-width: 600px) {
	.basic-info-table td:nth-child(1) {
  width: 20vw;
}
}

.radio-button-table td:nth-child(1) {
  width:80%;
}

.checklist td {
  padding: 5px 0;
}
.checklist td:nth-child(even){
  border-bottom: 2px solid #8080808a;
  border-collapse:none;
}

.checklist td:nth-child(odd){
  text-align:center;}

 .checklist tr:last-of-type td {border-bottom: none}

.completed-form a {
	color: grey !important;
}

.completed-form a:before {
	content: url(/images/tick.png)
}

.incomplete-form a:before {
	content: url(/images/document-text-image.png)
}

.checklist-link a:before {
	content: url(/images/inspection-report.png)
}

.total-row td {
  font-size: 120%;font-weight: bold;padding-top:5px;
}


@media only screen and (max-width:800px){
		.responsive-table td {
			width:95vw;
			display:block;
			margin-top: 2vh;
		}

		.flex td {
		  display:block
		}
		/*allows for embedded tables to stay intact*/
		.flex td table td{
		  display:inline-table
		}

		.flex td table td:first-child {
				width:75px;
			}

		#universal_retail_ingredient th {
			display: none;
		}

		#universal_retail_ingredient tr td {
			display: block;
		}


		#universal_retail_ingredient a {
				font-weight: bold;
				font-size:120%;
			}

		.brand:before {
			content:'Brand: ';
			font-weight: bold;
		}

		.code:before {
			content:'Code: ';
			font-weight: bold;
		}

		.producer:before {
			content:'Producer: ';
			font-weight: bold;
		}

		.certifier:before {
			content:'Certifier: ';
			font-weight: bold;
		}

		.status:before {
			content:'Status: ';
			font-weight: bold;
		}

		.check-all {
		  display: block !important;
		}

		.check-all:after {
		  content:" Check All";
		  font-weight:normal;
		}
}

.rejected-item {
	background-color:#ff6666 !important;
}

.pending-item, .pending-item a {
	color: #ccc
}

.input-box, .input-box td, .datepicker/*, input, textarea, select */{
	border: 0.5px solid #9bc2ef !important;
	border-radius: 5px;
	padding: 5px;
	vertical-align:top;
	outline: none !important;
	background: #ffffff !important;
}

.center-div div.input-box, .responsive-center-div div.input-box {
	margin:10px !important;
	font-size:80% !important;
}

@media only screen and (max-width: 750px) {
	.center-div div.input-box, .responsive-center-div div.input-box {
		font-size:100% !important;
	}
}
/* Responsive widths for input-box table cells */
.input-box-table tr td.input-box:only-child {
  width: 100%;
}
.input-box-table tr td.input-box:nth-child(1):nth-last-child(2),
.input-box-table tr td.input-box:nth-child(2):nth-last-child(1) {
  width: 48%;
}
.input-box-table tr td.input-box:nth-child(1):nth-last-child(3),
.input-box-table tr td.input-box:nth-child(2):nth-last-child(2),
.input-box-table tr td.input-box:nth-child(3):nth-last-child(1) {
  width: 32%;
}

@media only screen and (max-width: 550px) {
	.input-box-inner-table tr td {display:revert}
	.input-box {display:block;border-collapse: inherit; width: 100% !important;}

  .input-box:nth-child(2) {
    margin-top:10px
  }
}


/*moved here for DRY, added exception for input-box-inner-table*/
.odd, .list tr:not(.input-box-inner-table tr):nth-child(odd), .div-list tr:nth-child(odd) {
	background-color: #fbfcef;
}
.even, .list tr:not(.input-box-inner-table tr):nth-child(even), .div-list tr:nth-child(even) {
  background-color: #fff;
}

/* override based on explicit class */
tr.odd {
  background-color: #fbfcef !important;
}

tr.even {
  background-color: #fff !important;
}


/*a little too radical for now*//*
[type="checkbox"] {
    border-radius: 3.5px;
    padding: 6px;
    background-color: white;
    vertical-align: text-top;
    -webkit-appearance: none;
}
[type=checkbox]:checked {
    -webkit-appearance: auto
}
[type=checkbox]:checked::before {
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}
/* Disabled */
/*[type=checkbox]:disabled {
    background-color: #CCD3D8;
    opacity: 0.84;
    cursor: not-allowed;
}*/

.datepicker {
	vertical-align:baseline
}

.input-box .datepicker, .input-box td .datepicker, .input-box input {
	border:none !important;
}

.input-box input, .input-box select, .input-box textarea {
	padding:2px 0;
	border:none;
	width:95%;
	background: inherit;
	font-weight:inherit;
	color:inherit;
}

.input-box input[type=radio] {
	width: 100% !important;
}

.input-box label, .input-box-label, .center-div label, .responsive-center-div label .center-div a, .responsive-center-div a {
	color:#376ca9;
	font-weight:600
}

.input-box label:hover,
.input-box-label:hover,
.center-div label:hover,
.responsive-center-div label:hover {
	color: #bdd9f9;
	transition-duration: .5s;
}


.input-box input[type="radio"] {
	width:5%;
}

td.radio-button {
	padding-right:20px
}

.input-box li {
	padding-top:5px;
}


/*.input-box-table td:nth-child(1) {
  width:50%; - causing more problems than solutions
}*/

.input-box-table td:not(.input-box) {font-size:105%;line-height:1.5;}

.input-box-table  {
  border-collapse: separate;
  border-spacing: 5px 15px;
  width:90%;
  margin:auto;
}


.input-box input, .input-box select, .input-box textarea,
.frame input {
	outline: none;
}

.input-box-table td table {
	width:100% !important;
}

.input-box-inner-table td {
	border:none !important;
}

.input-box-inner-table td {
	border:none !important;
}


.checkbox {
	width:20px !important;
}

 /* modernize attachment frame */
.frame div:nth-child(odd) {
	background-color: #fbfcef;
}

.frame div:nth-child(even) {
	background-color: #fff;
}

.frame input{
	border:none;
	background-color:inherit;
}

.frame div {
	padding: 10px 0;
}

h5 {
  color:#888a89;
  font-size:120%;
}

.omitted {
	display: none;
text-decoration:line-through;
color:lightgrey;
}

.unsubmitted {
  opacity:50%;
  background-color:#a09d98 !important;
}

input.initials {
	width:40px !important;
	outline:none !important;
	border-top:none !important;
	border-right:none !important;
	border-left:none !important;
	background:#d2dee9;
}

.stat {border:none;
	 max-height:150px !important;
	   width:130px !important;
	   word-break: break-all;}

/*.single-stat {height: 60px;
			 padding: 10px 0;}*/

.stat-link {
	line-height: normal;
	font-size:120%;
}

.stat-link tr td {
	font-size:100%;
	line-height:normal;
	vertical-align:top;
	padding-right:5px
}

.stat-link img {
	height:25px;
	margin:0px -5px -5px 0px
}

.stat-link a {
color:#006699;
	text-decoration:none;
}


.zero {
	opacity:30%;
}


.holds-the-iframe {
  background:url(/images/ajax-loader.gif) center center no-repeat;
  width: 140px !important;
  border:.5px solid #bdd9f9;
	overflow-x:hidden;
	border-radius:5px;
	box-shadow:2px 2px #bdd9f9;
}

.holds-the-iframe:hover {
	border:#376ca9;
}

.fancy-table td, .fancy-table th {
  border: 1px solid #ddd !important;
  padding: 8px !important;
}

.fancy-table tr:nth-child(even) {
  background-color: #eee;
}

.simple-table {
	margin:auto;
}

.simple-table td, .simple-table th {
	padding:15px 10px;
}

.simple-table td {
	text-align:right;
}

.simple-table th {
	text-align:center;
}

.simple-table tr td:nth-child(1) {
	text-align:left
}

.simple-table-total-row td {
	border-top: 1px solid;
	font-weight: 600;
}

/*funky new styling - dimensions are in application & mobile - colors are here*/
input.new-push-button, a.new-push-button {
	background-color:#cb0033 !important;
	 border:#cb0033 !important
}

input.new-push-button:hover, a.new-push-button:hover {
	background-color:#cb003340 !important;
	border: #cb003340 !important;
	color:black !important;
}

input[type="submit"], .push_button, a .push_button {
  background-color: #920025 !important;
  border: 1px solid !important;
  border-color: #920025 !important;
  color: white !important;
}

.thumbnail {
	margin:2px;
}

.thumbnail:hover {
	transform: scale(10);
}

.kiosk-list {
	list-style: none;
}

.kiosk-list ul li {
	margin: 20px 0;
}

.kiosk-list ul li:hover {
	background-color: beige;
}

#main-pane.dark-mode {
  filter: invert(100%);
  background: white;
}

table.banded-in-context {
    width: 100%;
    border-collapse: collapse;
  }

  table.banded-in-context th {
  	font-weight: bold;}

  table.banded-in-context tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.04); /* or rgba(255,255,255,0.04) for dark themes */
  }

  table.banded-in-context th,
  table.banded-in-context td {
    padding: 6px 8px;
    border: 1px solid #ccc;
    text-align: left;
  }

  #main-pane.dark-mode table.banded-in-context {
  width: 100%;
  border-collapse: collapse;
  /*color: #e0e0e0;*/
	}

	#main-pane.dark-mode table.banded-in-context tr:nth-child(even) {
	  background-color: rgba(255, 255, 255, 0.05); /* subtle light overlay for banding */
	}

	#main-pane.dark-mode table.banded-in-context th,
	#main-pane.dark-mode table.banded-in-context td {
	  padding: 6px 8px;
	  border: 1px solid #555;
	  background-color: transparent; /* allow surrounding dark background to show */
	}

.arrow-action-btn {
  display: inline-block;
  padding: 6px 18px 6px 12px;
  margin: 0 0 0 0;
  background: #e6f0fa;
  color: #006699 !important;
  border: 1px solid #bde0f1;
  border-radius: 5px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  text-align: right;
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.arrow-action-btn:hover {
  background: #cce3f6;
  color: #003355 !important;
}
.arrow-action-btn:after {
  content: ' \2192'; /* Unicode right arrow */
  font-size: 120%;
  margin-left: 8px;
  vertical-align: middle;
}

.arrow-action-btn.disabled {
  pointer-events: none;
  background: #e6f0fa;
  color: #b0b0b0 !important;
  border-color: #e0e0e0;
  cursor: not-allowed;
}
.arrow-action-btn.disabled:hover {
  background: #e6f0fa;
  color: #b0b0b0 !important;
}