:root {
	--bg-white:hsl(0, 0%, 100%);
	--bg-offwhite:hsl(0, 0%, 98%);
	--app-dark-blue: #053758;
	--app-med-blue: #085486;
	--app-blue-light: #adcce0;
	--app-background1: var(--app-med-blue);
	--app-text1: var(--app-med-blue);
	--app-yellow: #f5c75d;
	--app-text2: var(--app-yellow);
	--app-link-text: hsl(229, 53%, 53%);

	--app-gray: #e0e0e0;
	--app-gray-light4: #a2a2a2;
	--app-gray-light6: #e2e2e2;
	--app-gray-light8: #f2f2f2;
	--bg-gray: var(--app-gray);

	/* Customize bulma*/
	--bulma-body-background-color: var(--bg-white);
	--bulma-scheme-main: var(--bg-offwhite);
	--bulma-link-text: var(--app-link-text);
	var(--bulma-table-cell-border-color);

	/*
	In rems from merge - Bulma uses ems not sure what ripple effects are from rems
	--bulma-body-font-size: 1.0em;
	--bulma-body-font-size: 1.0rem;
	--bulma-body-line-height: 1.0;
	*/
}

.menu {
	font-size: var(--bulma-size-normal);

	/* Customize bulma */
	--bulma-menu-item-background-l: 95%;
	--bulma-menu-label-spacing: 0;
	--bulma-menu-list-link-padding: 0.25em 0.75em;
	--bulma-menu-item-hover-background-l-delta: 5%;
	/* For the selected side menu item */
	--bulma-menu-item-selected-h: 204deg;
	--bulma-menu-item-selected-s: 89%;
	--bulma-menu-item-selected-background-l: 28%;

	--bulma-menu-nested-list-margin: 0.5em 0em 0.5em 0.75em;
	--bulma-menu-nested-list-padding-left: 0em;
	/*  This is --app-blue-light
	--bulma-menu-item-selected-h: 204deg;
	--bulma-menu-item-selected-s: 45%;
	--bulma-menu-item-selected-background-l: 78%;
*/
}
.section {
	--bulma-section-padding: 3rem 1.5rem 0;
	--bulma-section-padding-desktop: 3rem 1.5rem 0;
}
.table {
	--bulma-table-cell-padding: 0.25em 0.4em;
}

.box {
	--bulma-box-padding: 1rem;
}

.title {
	--bulma-title-weight: var(--bulma-weight-bold);
	letter-spacing: 0.075rem;
}

.menu-label {
	--bulma-menu-label-font-size: var(--bulma-small-font-size);
	font-size: var(--bulma-menu-label-font-size);
	font-weight: bold;
	letter-spacing: 0.03rem;
}

.menu-label:not(:first-child) {
	margin-top: 0.5em;
}

menu-list a, .menu-list button { /*  .menu-list .menu-item  */
	line-height: var(--bulma-menu-list-line-height);
}
.menu-list a:hover, .menu-list button:hover, .menu-list .menu-item:hover {
	transition-duration: 0ms;
}

	/* Filters modify the color of the svg icons */
.filter-dark-gray {
	filter: invert(22%) sepia(0%) saturate(560%) hue-rotate(215deg) brightness(107%) contrast(81%);
}

.filter-med-gray {
	filter: invert(51%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(91%) contrast(81%);
}

.filter-search-icon {
	filter: brightness(0) saturate(100%) invert(74%) sepia(0%) saturate(384%) hue-rotate(94deg) brightness(90%) contrast(93%);
}

.filter-crimson {
	filter: invert(18%) sepia(54%) saturate(4600%) hue-rotate(334deg) brightness(96%) contrast(105%);
	/*  filter: invert(19%) sepia(97%) saturate(5142%) hue-rotate(340deg) brightness(88%) contrast(96%);
	filter: invert(14%) sepia(95%) saturate(5572%) hue-rotate(342deg) brightness(90%) contrast(91%);
*/
}

/*
body {
	font-family: Roboto, SourceSans, Helvetica, Arial, sans-serif;
	font-weight: 400;
}
*/

body {
	min-height: 100vh; /*calc(100vh - 50px); */  	   /*-100px*/
}

.banner1 {
	background-color: var(--app-background1);
	color: var(--app-text2);
	margin:0 auto;/*10px auto 0; */
	height:80px;
	display:none;
	justify-content:center;
	align-items: center;
}
.banner1A {
	background-color: var(--app-background1);
	color: var(--app-text2);
	margin:0 auto;/*10px auto 0; */
	height:80px;
	display:flex;
	justify-content:space-between;
	align-items: center;
}
@media only screen and (min-width: 769px) {
	.banner1 {
		display:flex;
	}
	.banner1A {
		display:none;
	}
}

/* for spacing within banner - TEST that taking this out doesn't break anything */
/*
.banner_left_placeholder {
	width:45px;
	height:45px;
	margin-left:15px;
}
*/

/* not logged in */
.banner3 {
	background-color: #085486;
	color: #f5c75d;
	margin:0 auto 12px;/*20px auto 12px; */
	height:140px;
	border-top:5px solid #053758;
	border-bottom:5px solid #053758;
	display:none;
	justify-content:flex-start;
	align-items:center;
}
.banner3A {
	background-color: #085486;
	color: #f5c75d;
	margin: 0 auto 12px;/*20px auto 12px; */
	height:120px;/*140px; */
	border-top:5px solid #053758;
	border-bottom:5px solid #053758;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
@media only screen and (min-width: 865px) {
/*@media only screen and (min-width: 769px) {*/
	.banner3 {
		display:flex;
	}
	.banner3A {
		display:none;
	}
}
.banner_title {
	font-size: 32px;
	font-weight: 600;
}
.banner_title_small {
	display:block;
	margin:auto;    /*this centers it vertically */
	font-size: 28px;
	font-weight:600;
	padding-left:10px;
}
.banner_title h1 {
	font-size: 32px;
	font-weight: 600;
	color:var(--app-text2);
}
.banner_title_small h1 {
	font-size: 26px;
	font-weight: 600;
	color:var(--app-text2);
}
@media only screen and (min-width: 480px) {
	.banner_title_small h1 {
		font-size: 28px;
	}
}
.banner_title_wlogo {
	padding-left: 15px;
}
.banner_title_wlogo h1 {
	font-size: 32px;
	font-weight: 600;
	padding:15px 0;
	line-height:1.2em;
	color:var(--app-text2);
}
.banner_logo_sm {
	height:62px;
	width:62px;
	min-width: 62px;
	margin-right:5px;
	margin-top:6px;
}
	/*not logged in*/
.banner3_logo {
	height:115px;
	width:115px;
	margin:8px 25px 0;
	min-width: 115px;
}
.banner3A_logo {
	height:90px;
	width:90px;
	min-width:90px;
	margin-left:20px;
}

	/**** Navigation ****/

	/*is this used??????????*/
.navigation {
	font-weight: 300;
	/*
	color:rgba(13,13,13,1);
	position:sticky;
	z-index:10;
	*/
	top:0;
}
.nav_container, .nav_container_default {
	display:flex;
	align-items:center;
	height:60px;
	flex-direction:row;
	justify-content:start;
	width: 100%;
}
.nav_container_default {
	justify-content:end;
	padding-right: 10px;
}
.leftnav   {
	display:flex;
	align-items:center;
	height:60px;
	flex-direction:row;
	justify-content:start;
	width: 100%;
}
.rightnav   {
	display:flex;
	align-items:center;
	height:60px;
	flex-direction:row;
	justify-content:flex-end;
	width: 100%;
}
.navitem a, .dropdown_item a {
	color:hsl(0, 0%, 29%);
}

/*
.navitem:hover {
	background-color:var(--bg-offwhite);
}
*/

/* This is used in the default layout before login */
.default-navbar-top {
 /*   padding-left: 5%;*/
	width:60%;
	height: 140px;
	color: white;
	display: flex;
	justify-content: flex-start;
	text-transform: uppercase;
	align-items: center;
}

/*LOGIN*/
.banner_login {
	padding: 0.25rem 0.5rem;
	margin-bottom:0;
	background-color:#eff8ff;
}
/* This is used in the auth layout */

.auth-navbar-top {
	display: none;
}

@media only screen and (max-width: 768px) { /* 768px 1050px 1050 is where we need change with lims menus */
	.navbar {
		min-height:0;
	}
}

@media only screen and (min-width: 769px) {
	.auth-navbar-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* max-width: 112rem; */
		/*
		padding-left: 30px;
		padding-right: 10px;
		*/
		padding-left: 10%;  /* 10% */
		padding-right:10%;  /* 10% */
		margin: 0 auto;/*0 auto 2rem; */
		width: 100%;
		background-color: var(--app-gray); /* #e0e0e0 */
		/*background-color: #f0f0f0; */
	}
}

	/*top level menu */
.navitem  {
	margin-right:10px;
}
.chevron {
	margin-bottom:-4px;
}

	/*these items have submenus */
.nav_dropdown, .subnav_dropdown {
	position: relative;
	display:none;
	margin: 0 10px 0 0;
}
.subnav_dropdown {
	margin: 0;
	width:200px;
}

@media only screen and (min-width: 769px) {
	.nav_dropdown, .subnav_dropdown {
		position: relative;
		display:inline-block;
	}
}

.nav_dropdown:hover .nav_dropdown_content {
	display: block;
}

.subnav_dropdown:hover .subnav_dropdown_content {
	display: block;
}

	/* Dropdown Content  */
.nav_dropdown_content {
	display: none;
	position: absolute;
	background-color: #e0e0e0;
	width: 200px;/* 300px; *//* 195px; */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:5px;
	z-index: 1;
	margin-top:-3px;
	padding: 12px 0;  /*16px; */
}
.dropdown_item {
	padding: 0 15px;
	/* padding: 5px 15px 2px; */ /* From merge */
}
.dropdown_item:hover {
	background-color:var(--bg-offwhite);/*white; */
}

.subnav_dropdown_content {
	display: none;
	position: absolute;
	background-color: #e0e0e0;
	width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:5px;
	z-index: 1;
	margin-top:-37px; /*-5px; */
	margin-left:178px;
	padding: 12px 0;   /*16px */
}

	/* For the user name in the nav */
.dropdown_user {
	padding: 0 15px 2px;
	font-weight: 500;
}

.sidenav-submenu-label {
    /* padding: var(--bulma-menu-list-link-padding); */
    display: flex !important;
    justify-content: space-between;
}

.sidenav-submenu-label:hover {
    --submenu-item-background-l-delta: var(--bulma-menu-item-hover-background-l-delta);
    background-color: hsl(var(--bulma-menu-item-h), var(--bulma-menu-item-s), calc(var(--bulma-menu-item-background-l) + var(--submenu-item-background-l-delta)));
}

	/**** MAIN *****/
	/*this keeps some space on the side of small screens */
@media screen and (max-width: 1023px) {
	.container {
		/*margin-right:1%;
		margin-left:1%;
		*/
	}
}

#content_container {
	margin-top: 0 !important;
	padding-top:20px;
}
@media screen and (min-width: 769px) {
	#content_container {
		margin-top: .5rem !important;
		padding-top:0;
	}
}

@media screen and (min-width: 1024px) {
	#content_container {
		margin-top: 2.5rem !important;
	}
}
/* homepage */
.homepage_background_box {
	padding: 30px 1.25rem;
	width:320px;
	margin:-15px auto 0;
	background-color:var(--app-gray);
}
.homepage_title {
	font-size:1.25em;
	width:100%;
	margin:-10px auto 0;
	padding-bottom:10px;
}
.homepage_text1 {
	font-size:1em;
	width:100%;
	margin:auto;
	padding-bottom:10px;
}
.homepage_text2 {
	width:100%;
	background-color:var(--app-gray);margin:auto;
}

@media screen and (min-width: 400px) {
	.homepage_background_box {
		padding: 30px 1.25rem;
		width:380px;
		margin:-15px auto 0;
		background-color:var(--app-gray);
	}
}
@media screen and (min-width: 768px) {
	.homepage_background_box {
		padding: 30px 5rem;
		width:720px;
		margin:30px auto 0;
		background-color:var(--app-gray);
	}
	.homepage_title {
		font-size:1.5em;
		width:100%;
		margin:auto;
		padding-bottom:10px;
	}
	.homepage_text1 {
		font-size:1.25em;
		width:100%;
		margin:auto;
		padding-bottom:10px;
	}
	.homepage_text2 {
		width:100%;
		background-color:var(--app-gray);margin:auto;
	}
}
@media screen and (min-width: 1024px) {
	.homepage_background_box {
		padding: 30px 5rem;
		width:920px;
		margin:-20px auto 0;
		background-color:var(--app-gray);
	}
	.homepage_title {
		font-size:1.5em;
		width:85%;
		margin:auto;
		padding-bottom:10px;
	}
	.homepage_text1 {
		font-size:1.25em;
		width:85%;
		margin:auto;
		padding-bottom:10px;
	}
	.homepage_text2 {
/*  	padding:0px 100px;*/
		width:85%;
		background-color:var(--app-gray);margin:auto;
	}
}
/*LOGIN UPDATE */
.pw_update {
	list-style-type:disc;
}

.permit_container_top,.permit_container_main {
	padding-left:1rem;
	padding-right:1rem;
}
.permit_time_container {
		display:block;
	}
@media only screen and (min-width: 400px) {
	.permit_time_container {
		display:flex;
	}
}
@media only screen and (min-width: 768px) {
	.permit_container_top,.permit_container_main {
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
}
.gray_back {
	background-color: var(--bg-offwhite);
}
.permit_field_cols {
	width:50%;
	padding-right:0.75rem;
}

/****** SIDEBAR *********/
#base_container {
	display:block;
	position:relative;
 /*   padding-top:20px;*/
}

.page_content {
	padding-bottom:20px;
}

/*
@media only screen and (min-width: 768px) {
	#base_container {
		padding-top:0;
	}
}
*/

@media print {
	/* Hide the page action menu and buttons when printing. */
	#pageAction_menu,
	#menu_open_btn  > img,
	.pageAction_banner_icon > img,
	.pageAction_icon {
		display: none;
	}
}

.pageAction_container {
	width:250px;
	background-color:var(--app-gray-light8);  /*matches table header color */
	display:flex;
	flex-direction:column;
	padding:44px 10px 20px 30px;
	z-index:1;
	position:absolute;
	min-height:500px;
}
.menu_container {
	width:250px;
	background-color:var(--app-gray-light8);
	display:none;
	flex-direction:column;
	padding:10px 10px 20px 10px;
	z-index:1;
	position:absolute;
	min-height:500px;
	right:0;
	top:0;
}
@media only screen and (min-width: 1024px) {
	.pageAction_container {
		position:relative;
		padding:45px 10px 20px 30px;
	}
	#base_container {
		display:flex;
	}
}
/*default menu in banner */
.menu_padding {
	padding: 0.25em 0.75em;
}
.banner_menu a{
	color:white;
}
#sidenav_search_item {
	padding: 8px 0;
}
	/* appears above list when nav is gone, not used for icon in banner */
.pageAction_icon {
	width: 45px;
	min-width:45px;
	height:45px;
	padding:8px 0 2px 10px;   /*change top padding to move it up*/
	position: relative;
 /*top: -64px; */
	left:5px;
	display:none;
}
.pageAction_banner_icon {
	width: 45px;
	min-width:45px;
	height:45px;
	padding:6px 0 2px 10px;
}
.menu_icon {
	width: 35px;
	min-width:35px;
	height:35px;
	padding:5px; /*10px 0 2px 10px; */
	position: static;/* absolute; */
	display:block;
	margin-right:15px;
}
	/* the X in the left side box */
.close_icon {
	width: 45px;
	min-width:45px;
	height:45px;
	padding:10px 0 2px 10px;
	position: absolute;
	right:20px;
	top:0;
	display:none; /*block; */
}

.close_filter_icon {
	width: 45px;
	min-width:45px;
	height:45px;
	padding:10px 0 2px 10px;
	position: absolute;
	right: 14px;
	top: -8px;
	display: block;
}

@media only screen and (min-width: 769px) {
	.close_filter_icon {
		right: 25px;
		top: 0;
	}
}

/*for default nav relaced by icon at 864 - logged in icon appears at 769 with banner code  */
@media only screen and (min-width: 865px) {
	.menu_icon {
		display:none;
	}
}

@media only screen and (min-width: 769px) {
 /* 	.menu_icon {
		display:none;
	}
*/
	.pageAction_icon {
		position:relative;
	/*	top:0; */
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1023px){
	.close_icon {
		display:block;
	}
}

.icon_color {
	filter: invert(92%) sepia(1%) saturate(16%) hue-rotate(336deg) brightness(96%) contrast(96%);
/*  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(101%);*/
}
@media only screen and (min-width: 769px) {
/*@media only screen and (min-width: 865px) {*/

	.icon_color {
		filter: invert(51%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(91%) contrast(81%);
	}
}
.overlay {
	height:100%;
	width:0;
	position:absolute;
	top:100;
	left:0;
	background-color:rgba(0,0,0, 0.6); /* Black w/opacity */;
	z-index:1;
}

 /*side padding*/
.list_container {
	padding:0 2px;
}
@media only screen and (min-width: 400px) {
	.list_container {
		padding:0 8px;
	}
}
@media only screen and (min-width: 768px) {
	.list_container {
		padding:0 20px;
		margin-left:0;
	}
}
.submit_container,
.flash_container,
.home_container {
	padding:0 20px;
}

.flash_container ul {
	list-style: disc;
	padding-left: 10px;
}

	/****** PAGINATION  *********/
.def_paginator {
 /*  padding: 0 2px; */
}
.pagination_container {
	display:flex;
	justify-content:center;
 /*   font-size:12px; */
}
@media only screen and (min-width: 400px) {
	.pagination_container {
 /* 	font-size:14px; */
	}
}
@media only screen and (min-width: 768px) {
	.pagination_container {
 /* 	 font-size: var(--bulma-size-normal); */
	}
}

.paginator_limit, .paginator_limit form, .paginator_limit div  {
	display:block;
	font-weight:400;
	font-style: normal;
}
@media only screen and (min-width: 768px) {
	.paginator_limit, .paginator_limit form, .paginator_limit div  {
		display:inline;
		font-weight:400;
		font-style: normal;
	}
}
.paginator_label {
	display:inline;
	padding-right: 5px;
	padding-left: 25px;
	line-height:2.5em;
}
.paginator_limit_input select {
	display:inline;
	margin-bottom: 5px;
	/*
	font-size: 90%;
	height:1.5em;
	padding-top:0;
	padding-bottom:1px;
	*/
}

.pagination-link {
 /*   min-width: 20px;
	padding:10px; */
	display:none;
}
.ellipsis {
	display:none;
}
@media only screen and (min-width: 400px) {
	.pagination-link {
	 /*   min-width: var(--bulma-pagination-min-width);
		padding-left:var(--bulma-pagination-item-padding-left);
		padding-right:var(--bulma-pagination-item-padding-right);
		*/
		display:block;
	}
	.ellipsis {
		display:inline;
	}
}

.pagination-next, .pagination-previous {
	flex-grow:0;
	flex-shrink:0;
	width:60px;
}
.pagination-previous {
	margin-left:30%;
}
.pagination-next {
	margin-right:30%;
}
@media only screen and (min-width: 400px) {
	.pagination-previous {
		 margin-left:0;
	}
	.pagination-next {
		 margin-right:0;
	}
}
.pagination_summary {
	padding: 0 25px;
}
@media only screen and (min-width: 400px) {
	.pagination_summary {
		padding: 0;
	}
}


	/****** TABLES ******/
.table_title {
	background-color: var(--app-background1);/*#085486; */
	color: var(--app-text2); /*yellow*/
	padding: 1px 0 1px 6px;
	font-size: 1.2em;
	font-weight: bold;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	line-height: 1.5;
}

	/* what color are header links vs nonlinks? */
.table_heading_row {
	background-color: var(--bg-gray) !important;
	color: var(--app-text1) !important;
}
.table_heading_row th {
	/* font-size:14px; */ /* Merge change - without this the size used is body font size 1em */
	color: var(--app-text1) !important;
}

.table_heading_row a {
	color: var(--app-text1) !important;
}
.table_heading_row a:hover {
	color: var(--app-dark-blue) !important;
}
	/* divs that contain tables */
.table_div {
	background-color: hsl(0, 0%, 98%);
}
	/* cell width used in permitInspections/view for divs w/tables inside*/
.tdw {
	width: 300px;
}

table.widget_table {
	margin-bottom: 1px !important;
}

@media (max-width:1275px) {
	#sample_schedule_table,
	#inspection_schedule_table {
		th:nth-child(3),
		td:nth-child(3),
		th:nth-child(4),
		td:nth-child(4) {
			display: none;
		}
	}
}

@media (max-width:900px) {
	#sample_schedule_table,
	#inspection_schedule_table {
		th:nth-child(7),
		td:nth-child(7),
		th:nth-child(9),
		td:nth-child(9) {
			display: none;
		}
	}

	#clients-table {
		th:nth-child(4),
		td:nth-child(4),
		th:nth-child(5),
		td:nth-child(5) {
			display: none;
		}
	}

	#sample_audits_pending_table {
		th:nth-child(3),
		td:nth-child(3) {
			display: none;
		}
	}
}

@media (max-width:768px) {
	#contract_schedule_table,
	#clients-table {
		th:nth-child(6),
		td:nth-child(6),
		th:nth-child(7),
		td:nth-child(7) {
			display: none;
		}
	}

	#sample_schedule_table,
	#inspection_schedule_table {
		th:nth-child(5),
		td:nth-child(5) {
			display: none;
		}
	}

	#sample_audits_pending_table {
		th:nth-child(2),
		td:nth-child(2) {
			display: none;
		}
	}
}

@media (max-width:576px) {
	#contract_schedule_table,
	#clients-table {
		th:nth-child(3),
		td:nth-child(3) {
			display: none;
		}
	}

	#contract_schedule_table,
	#permit-search-results-table {
		.client_schedule_table,
		th:nth-child(4),
		td:nth-child(4) {
			display: none;
		}
	}

	#contract_schedule_table {
		th:nth-child(8),
		td:nth-child(8) {
			display: none;
		}
	}

	#inspection_schedule_table,
	#sample_schedule_table {
		th:nth-child(2),
		td:nth-child(2),
		th:nth-child(8),
		td:nth-child(8),
		th:nth-child(10),
		td:nth-child(10) {
			display: none;
		}
	}

	table.widget_table {
		th:nth-child(3),
		td:nth-child(3),
		th:nth-child(4),
		td:nth-child(4) {
			display: none;
		}
	}
}

@media (max-width:900px) {

	.history-table {
		th:nth-child(3),
		td:nth-child(3),
		th:nth-child(6),
		td:nth-child(6) {
			display: none;
		}
	}
}

@media (max-width:768px) {
	.history-table {
	 /*   th:nth-child(3),
		td:nth-child(3),
	 */
		th:nth-child(4),
		td:nth-child(4) {
			display: none;
		}
	}
}

@media (max-width:576px) {
	.history-table {
		th:nth-child(2),
		td:nth-child(2) {
			display: none;
		}
	}
}


	/***** panels ****/
	/* form width, box padding */
.small_form_width {
	padding: 0.5em 0 0;
	width: 310px;
}
@media only screen and (min-width: 400px) {
	.small_form_width {
		padding: 0.5em 0 0;
		width: 340px;
	}
}
@media only screen and (min-width: 768px) {
	.small_form_width {
		width:700px;
		padding: var(--bulma-box-padding);
	}
}

.med_form_width {
	padding: 0.5em 0 0;
	width: 310px;
}
@media only screen and (min-width: 400px) {
	.med_form_width {
		padding: 0.5em 0 0;
		width: 340px;
	}
}
@media only screen and (min-width: 768px) {
	.med_form_width {
		width:700px;
		padding: var(--bulma-box-padding);
	}
}
@media only screen and (min-width: 1280px) {
	.med_form_width {
		width:1000px;
		padding: var(--bulma-box-padding);
	}
}

	/*replaces panel_title */
.box_title {
	font-weight:bold;
	color: var(--app-med-blue); /*#085486 #f5c75d; */
	padding: 0 1em 0.5em 0.5em;

	/* Pre-merge */
	/* letter-spacing: .1rem; */
	/* font-size: 22px; */ /*24px; */   /*this gets overwritten on search page by bulma setting - maybe replace w/bulma*/

	/* Post-merge change */
	letter-spacing: 0.03rem;
	font-size: 1.25em;
}

@media only screen and (min-width: 768px) {
	.box_title {
		padding: 0 0.5em;/*1em; */   /*0.5em 1em*/
	}
}
.subtitle {
		margin-bottom:1px !important;   	  /*15px*/
		line-height:var(--bulma-body-line-height) !important;
}
@media only screen and (min-width: 768px) {
	.subtitle {
		margin-bottom:11px !important;  	   /*15px*/
		line-height:var(--bulma-body-line-height) !important;
	}
}
.panel_title {
	font-weight:bold;
	background-color:  var(--app-gray-light8);  /*#f2f2f2*/
	/*  background-color: #adcce0; *//* #085486; */
	color: var(--app-med-blue); /*#085486 #f5c75d; */
	letter-spacing: .1rem;
	padding: 0.5em 1em;
	font-size:24px;       /*this gets overwritten on search page by bulma setting - maybe replace w/bulma*/
	margin-bottom:.75rem; /*this is getting overwritten */
}

.panel_title2 {
	background-color:  var(--app-gray-light8);
	color: var(--app-med-blue);
	/* letter-spacing: .1rem; /* /* pre merge*/
	letter-spacing: 0.03rem; /* post merge change */
	/* padding: 0.4em 0.0em 0.2em 0.7em;  */
	/*    padding: 0.5em; */
	/*    font-size:1.5em; */
	/*    margin-bottom:.5rem; */
}

	/*different padding for fields for small and large screens*/
.form_column, .show_pass_column {
	padding: 0 2rem 0 3rem;
}
.form_column_plus {
	padding: 0.2rem 2rem 0.2rem 3rem;
	/* .1rem */
}
.permit_form_column {
	padding: .75rem .75rem 0 .75rem;
}
.company_form_column {
	padding: .5rem; /*temporary*/
}

@media only screen and (min-width: 769px) {
	.form_column, .form_column_plus, .permit_form_column {
		/* padding: 0.75rem; */
		padding: 0.5em;
	}

    .show_pass_column {
        padding: 0.2rem 2rem 0 0;
    }

}
@media only screen and (min-width: 769px) {
	.company_form_column {
		padding: .5rem; /*temporary*/
	}
}
/*permit summary - for phone try no bottom padding on left one, no top on right FOR <768*/
.permit_columns_left {
	padding-right:0.75rem; /*bulma default */
	padding-bottom:0;
}
.permit_columns_right {
	padding-left:0.75rem; /*bulma default */
	padding-top:0;
}

@media only screen and (min-width: 769px) {
	.permit_columns_left {
		padding-right:0;
		padding-bottom:0.75rem;
	}
	.permit_columns_right {
		padding-left:0;
		padding-top:0.75rem;
	}
}
.field_mvertical {
		margin-bottom:20px !important;
	}
@media only screen and (min-width: 769px) {
	.field_mvertical {
		margin-bottom: calc(1.5rem - 1rem) !important;      /*calc(1.5rem - 0.75rem)*/
	}
}
.field_mvertical2 {
		margin-bottom:20px !important;
	}
@media only screen and (min-width: 769px) {
	.field_mvertical2 {
		margin-bottom: 0 !important;
	}
}
.field_mvertical3 {
		margin-bottom:0px !important;
	}
@media only screen and (min-width: 769px) {
	.field_mvertical3 {
		margin-bottom: calc(1.5rem - 1rem) !important;      /*calc(1.5rem - 0.75rem)*/
	}
}
.field-label {
	margin-right:0;
	margin-bottom: 0.35rem;
}
@media only screen and (min-width: 769px) {
	.field-label {
	   margin-bottom: 0;  /* was more */
	}
}

.sample_parameter_row {
	border-bottom: 2px solid var(--app-gray-light8);/*var(--bulma-table-cell-border-color); */
	background-color: var(--bulma-scheme-main);
}
.sample_parameter_label {
	width: 30%;
}
.sample_parameter_item {
	padding-bottom: .25rem;
}
@media only screen and (min-width: 769px) {
	.sample_parameter_item {
		padding-bottom: .5rem;
	}
}
#no_label_submit_col {
	padding: 0 0.75rem 0.75rem;
}
@media only screen and (min-width: 769px) {
	#no_label_submit_col {
	padding: 0.75rem;
	}
}
	/* The message is inside a div with class panel_title */
#select-checklist-msg {
	letter-spacing: normal;
}

.button1, .filter_button, .widget_view_all_button {
	background-color: var(--app-gray-light6); /*#e2e2e2*/
	border: 1px solid var(--app-gray-light4);/*var(--app-background1); #adcce0; #a2a2a2*/
	color: var(--app-background1);
	margin:0 0 10px 10px;
	font-weight:500;
	letter-spacing: .04rem;
}
.button1:hover {
	background-color: var(--app-background1);
	color: var(--app-gray-light8); /*#f2f2f2*/
}
.button_spacing {
	margin:0 0 10px 20px;
}

.filter_button {
	margin:0;
}

.widget_view_all_button {
	padding: 2px 14px;
	font-size: 90%;
	margin:0;
}

.owner_tab_button_spacing {
	margin: 0 20px; /*0 20px 0 -10px; */
}

.owner_tab_row {
	vertical-align: middle;
	width: 0;
	max-width: fit-content;
}

.form_panel_color {
	background-color: var(--app-gray-light8); /*#f2f2f2*/
	border: 1px solid var(--app-blue-light); /*#adcce0*/
}

#submit-button {
	/*  width:20% !important;
	min-width: 160px; */
}

.permit_view_container {
	border:1px solid var(--app-blue-light);
	margin-bottom:10px;
	/*  padding-left:5px;   */
	padding: 0 5px;
}

.permit_view_container span {
	float: right;
	width: 55%;
}
@media only screen and (min-width: 400px) {
	.permit_view_container span {
		float: right;
		width: 45%;
	}
}
.table img.is-vcentered {
	vertical-align: middle;
}

.permit_site_title {
	font-weight: bold;
	font-size:1.1em; /* pre merge 1.25em */
	line-height:1.5em;
}

.checklist_technology_title {
	background-color:  var(--app-gray-light8);
	color: var(--app-med-blue);
	font-weight: bold;

	/*  letter-spacing: .1rem;   */
	/*    padding: 0.5em; */
	/*    margin-bottom:.5rem; */
	/*    border: 2px solid #adcce0; */
}

h3.checklist_technology_title {
	font-size: 20px;
}

h4.checklist_technology_title {
	font-size: 18px;
	border-bottom: 1px solid var(--app-blue-light);
}

	/* check list view */

.checklist-view-checkbox {
	display: inline-block;
	width:16px;
	height:16px;
	border: 1px solid hsl(0, 0%, 29%);
	vertical-align:text-top;
}

.checklist-view-checkbox-empty, .checklist-view-checkbox-checked,
.checklist-view-radio-off, .checklist-view-radio-on {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
	vertical-align:text-top;
	margin-right: .15rem;
}

.checklist-view-checkbox-empty {
	background-image: url('/img/checkbox-outline-empty.svg');
}

.checklist-view-checkbox-checked {
	background-image: url('/img/checkbox-outline.svg');
}

.checklist-view-radio-off {
	background-image: url('/img/radio-button-off.svg');
}

.checklist-view-radio-on {
	background-image: url('/img/radio-button-on.svg');
}

.checklist-view-checkbox-label {
	margin-right: .85rem;
}

/*
.checkbox-view-label {
	padding: 0 20px 0 4px;
}
*/

.checklist-view-label {
	line-height:2em;
	font-weight: bold;
}

	/* check list form */
.checklist-form-label {
	font-weight: bold;
	margin-top: .5rem;
}

.checklist-form-label-normal {
	font-size: 1.15rem;
}

.checklist-form-label-lg {
	font-size: 1.25rem;
}

.checklist-form-label-border {
	border-bottom: 1px solid #444;
}

.checklist-form-radio {
	margin: 0 3px 0 8px;
}
	/*COME BACK TO THIS? */
	/*table.checklist-table td {
	padding:0.25em 0.2em;
}
@media only screen and (min-width: 400px)  {
	table.checklist-table td{
		padding:0.25em 0.4em;
	}
}
*/
	/*stacks checkboxes on small phones */
.checkbox_stack {
	display:block;
}
.radio_stack {
	display:block;
}
@media only screen and (min-width: 400px)  {
	.checkbox_stack {
		display:flex;
	}
	.radio_stack {
		display:flex;
	}
}

/*
.checklist-table {
	border-spacing: 0 4px;
	border-collapse: separate;
}
*/

table.checklist-table td:first-child {
	width: 30%;
}

	/*  to adjust other columns
table checklist-table td:nth-child(2) {
	width: 75%;
}
*/

/*
table.checklist-subtable {
	border-collapse: collapse;
	border-spacing: 0;
	border: 2px solid var(--bulma-table-cell-border-color);
	margin-bottom: calc(1.5rem - 0.75rem);
	margin-top: calc(1.5rem - 0.75rem);
}

table.checklist-subtable td {
	font-size: .9em;
	border-width: var(--bulma-table-cell-border-width) !important;
}

table.checklist-subtable tbody tr:last-child td {
	border-width: 0 !important;
}
table.checklist-subtable td:first-child {
	width: 35%;
}

table.checklist-subtable .category-column-header {
	display: none;
}
*/

table.checklist-subtable {

	border-collapse: collapse;
	border-spacing: 0;
	border: 2px solid var(--bulma-table-cell-border-color);
	margin-bottom: calc(1.5rem - 0.75rem);
	margin-top: calc(1.5rem - 0.75rem);


	td {
		font-size: .9em;
	/*      border-bottom-width: var(--bulma-table-cell-border-width) !important;   */
		border-width: var(--bulma-table-cell-border-width) !important;   /* --bulma-table-cell-border-width: 0 0 1*/
	}

	tbody tr:last-child td {
		border-width: 0 !important;
	}

	td:first-child {
		width: 35%;  /*20%; */
	}

	.category-column-header {
		display: none;
	}
}

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

	/* Force table to not be like tables anymore */
	table.checklist-subtable {
		margin-bottom: calc(1.5rem - 0.25rem);
		margin-top: calc(1.5rem - 0.25rem);

		thead, tbody, th, td, tr {
			display: block;
		}

		.category-column-header {
			display: block;
			background-color: var(--bg-gray);

		}
		.category-column-header td {
			display: block;
			background-color: var(--bg-gray);
			color: var(--app-text1) !important;
			font-weight: bold;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr {
			/*  border: 1px solid #ccc; */
			border-color: var(--bulma-table-cell-border-color);
			border-style: var(--bulma-table-cell-border-style);
			border-width: var(--bulma-table-cell-border-width);
		}

		/*
		td:first-child {
			border: none;
			position: relative;
			padding-left: 5%;
			text-align: center;
		}
		*/

		/* Behave like a "row" */
		td:nth-of-type(n+2) {
			border: none;
			position: relative;
			padding-left: 50%;
			/* padding-left: 12px; */
			text-align: left;
		}

		td:first-child {
			/* font-weight: bold; */
			font-size: 101%;
			width: 100%;
		}

		td:nth-of-type(n+2):before {
			content: attr(data-title);
			font-weight: bold;
			color: var(--app-text1);
			text-align: left;
			/* Top/left values mimic padding */
			position: absolute;
			top: 6px;
			left: 12px;

			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		td, th {
			padding-left: 6px;
			border-width: 0 !important;
		}
	}
}

	/* set up for Components */
table.convertible_table, table.convertible_table_users {

	border-collapse: collapse;
	border-spacing: 0;
	border: 2px solid var(--bulma-table-cell-border-color);
	margin-bottom: calc(1.5rem - 0.75rem);
	margin-top: calc(1.5rem - 0.75rem);


	td {
		font-size: .9em;
	/*      border-bottom-width: var(--bulma-table-cell-border-width) !important;   */
		border-width: var(--bulma-table-cell-border-width) !important;   /* --bulma-table-cell-border-width: 0 0 1*/
	}

	tbody tr:last-child td {
		border-width: 0 !important;
	}

	td:first-child {
	  /*  width: 35%;  */
	}
	/*td:first-child {
		  width:45%;
	}
	 */
	.category-column-header {
		display: none;
	}
}
@media only screen and (max-width: 767px)  {

	/* Force table to not be like tables anymore */
	table.convertible_table, table.convertible_table_users {
		margin-bottom: calc(1.5rem - 0.25rem);
		margin-top: calc(1.5rem - 0.25rem);

		thead, tbody, th, td, tr {
			display: block;
		}

		.category-column-header {
			display: block;
			background-color: var(--bg-gray);

		}
		.category-column-header td {
			display: block;
			background-color: var(--bg-gray);
			color: var(--app-text1) !important;
			font-weight: bold;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr {
			/*  border: 1px solid #ccc; */
			border-color: var(--bulma-table-cell-border-color);
			border-style: var(--bulma-table-cell-border-style);
			border-width: var(--bulma-table-cell-border-width);
		}

		/*
		td:first-child {
			border: none;
			position: relative;
			padding-left: 5%;
			text-align: center;
		}
		*/

		/* Behave like a "row" */
		td:nth-of-type(n+1) {
			border: none;
			position: relative;
			padding-left: 50%;
			/* padding-left: 12px; */
			text-align: left;
		}

		td:first-child {
			/* font-weight: bold; */
			/* font-size: 101%; */
			/* width: 100%; */
		}
		/*td:first-child owner_tab_row{
			width: 50%;
		}
		*/
		td:nth-of-type(n+1):before {
			content: attr(data-title);
			font-weight: bold;
			color: var(--app-text1);
			text-align: left;
			/* Top/left values mimic padding */
			position: absolute;
			top: 6px;
			left: 12px;

			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		td, th {
			padding-left: 6px;
			border-width: 0 !important;
			min-height:36px;
		}
	}
}

/*company profile users table*/
table.convertible_table_users {
    margin-top: 0; /*calc(1.5rem - 0.25rem);*/
	td:nth-of-type(n+1) {
		padding-left: 11px;
	}

}
.users_content {
	padding-top:24px;
}
@media only screen and (min-width: 768px)  {
	.users_content {
		padding-top:0;
	}
}

@media only screen and (min-width: 1280px)  {
	table.convertible_table_users {
		margin-top: 1rem;
	}
}

.company_detail_container {
	padding-bottom:0.5rem;
}
@media only screen and (min-width: 768px)  {
	.company_detail_container {
		padding-bottom: 0;
	}
}

/* Owners table */
table.owners_table {
	td:first-child {
		width:35%;
	}
}
@media only screen and (max-width: 767px)  {
	table.owners_table {
		td {
			width:100%;
		}
		td:first-child {
			width:90%;
		}
		td:last-child {
			border:10px solid red;
			padding-left:0;
		}
		td.hidden_row{
			padding-left:15px;
		}
	}
}


.historic-checklist-label {
	width: 50% !important;
}

	/* These are used for setting form input width with the tooltips */
.is-flex-basis-90 {
	flex-basis: 90%;
}

	/* The basis is width of the tooltip + width of padding */
.tooltip-flex-basis {
	flex-basis: 30px;
}

.view-table-width {
	width: 300px;
}

.is-required {
	color: crimson;
}

/*
The psudo class also highlights the text in the input.
*:required {
	color: crimson;
}
*/

.permit_history_select {
	display:block;
}
.permit_history_time {
	display:block;
	white-space:nowrap;
	/* margin-left:0; */
}
@media only screen and (min-width: 768px) {
	.permit_history_select {
		display:flex;
	}
	permit_history_time {
	/* margin-left:1.5rem; */
	}
}

.service_details {
	border:1px solid rgb(192, 192, 192);
}

@media (min-width:576px) {
	.ws_no_wrap {
		white-space: nowrap;
	}
}

.post_header {
	margin: 0 0 1.25em 0;
	line-height: 1;
}

.post_header h1 {
	font-size: 1.5em;
	font-weight: var(--bulma-weight-bold);
}
.post_content p {
	margin: 0 0 0.65em; /*10.5px;*/
}

.post_content h1, .post_content h2, .post_content h3 {
	margin-top: 1.3em;     /* 21px */
	margin-bottom: 0.65em; /*10.5px;*/
	font-weight: var(--bulma-weight-normal);
	line-height: 1.1;
	color: inherit;
}

.post_content h2 {
	font-size: 1.25em;
}

.post_content h3 {
	font-size: 1.1em;
}

.mt-0625em {
	margin-top: 0.625em; /* 10px */
}

.permit_sample_view_legend {
    font-size: 0.95rem;
    padding-left: 0.4em;
}

/* Override of arrows that show the column sort. Cake defines
   these and for small screen switches them to left/right. */
@media screen and (max-width: 640px) {
	.asc:after {
		content: " \2193";
	}
	.desc:after {
		content: " \2191";
	}
}

/*FOOTER */
.footer {
	font-size: 0.8em;
	padding: 1.75rem 1.5rem;
	/* background-color: var(--app-background1);
	color:var(--bg-offwhite); */
	background-color: var(--app-gray);
	/* color:var(--bg-offwhite); */

	/* position:absolute; */
	bottom:0;
	width:100%;
	margin-top: 0;
	/* margin-bottom:-10px; */
	/* height:50px; */
}