body {
	overflow-x: hidden;
}
.container {
	padding: 10px 20px;
}
header {
	display: flex;
}
header #content {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}
header #content h1 {margin: 0}
.red-hat-display, p, li, [data-table='td'], button  {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

}
p, li {
	line-height: 1.4;
	margin-bottom: 8px;
}

.yeseva-one-regular, 
h1, h2, h3, #searchingMessage {
  font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
.accordion-indicator {
    font-size: 12px;
    padding: 0 0 3px 0;
}
.infoSection,
#gardenMap {
	background: #c9efa1;
    padding: 10px;
    position: sticky;
}
#guide,
#searchBar,
#habitCodes,
#sortByBar {
	padding: 10px;
}
#clickToShowGuide,
#clickToShowSearch,
#clickToShowHabit,
#clicktoShowSort {cursor: pointer}
#showGuide,
#showSearch,
#showHabit,
#showSort {display: none; height: 0;}

#showGuide.guideView,
#showSearch.guideView,
#showHabit.guideView,
#showSort.guideView {
	display: block;
	height: auto;
}
#showGuide {
    margin-right: 20px;
}
/*old background color #dce5a5;*/
#searchBar table {background:#c9efa1 }
.search-input td {
    padding: 0;
    border: 0;
    width: auto;
    margin: 2px auto;
	height: 100%;
	border-radius: 4px;
}
.search-input input::placeholder {
	color: rgba(0,0,0,.8);
	font-weight: 300;
	font-style: italic;
}
.search-input input:focus::placeholder {
/*  color: transparent;*/
  color: rgba(0,0,0,.2);
}
.search-input input {
	width: 98%; 
	height: 45px; 
	margin:auto;
	padding-block: 0;
	color:black;
	font-weight: 700;
	border: solid white 2px;
}
input#searchInputColumnFive {
    text-transform: uppercase;
}
 input#searchInputColumnFive:-ms-input-placeholder {
    text-transform: none;
}
 input#searchInputColumnFive::placeholder {
    text-transform: none;
}
.plant-list-content {
	display:flex;
	flex-flow:column nowrap;
}

#plantList  {
	background: #c9efa1;
 	height: 400px;
	margin: auto;
	width: 100%;
	
	overflow-x: scroll;
	overflow-y: scroll;
}

table { 
	border-collapse: collapse; 
	width: 100%;
	margin:auto;
	font-size: 1.2rem;
}
#plantList #Tableau {
	background: white;
	width: 100%;
}
#Tableau #resp-table-body {
	  display: table-row-group;
/*	  display:table;*/
}


.b-grid__row {
  display: table-row;
}

.b-grid__column-cell {
  display: table-cell;
  border:2px solid transparent;
  padding:5px;
  background:#fff padding-box;
  vertical-align:middle;
}
.b-grid__column-cell > * {
  margin:0;
}
#plantList .tbody {
	max-width:100%;
	white-space:nowrap;
	height: auto;
	display: table-row;
}
/*#plantList #Tableau .header {
	border-collapse: separate;
	display: table-row;
}*/
#plantList #Tableau .plant-header { 
	position: sticky; 
	top: 0px; 
	background: white;
    padding: 10px 0;
    height: 58px;	 
    z-index: 5; /* to top 2 the first column  on scroll */
    box-shadow: 1px 1px 4px #7f817c;
/*	display: table-cell;*/
	text-align: center;
}

#plantList #Tableau .th:nth-of-type(5),
#plantList #Tableau .th:nth-of-type(6) { 
/*	padding: 10px; */
}	
#paginated-list {
	display: table; 
}
#paginated-list .plant-header,
#paginated-list .plant {
    display: flex;
    justify-content: space-between;
    display: table-row;
}

#plantList .plant-header .th:first-of-type,
#plantList [data-table='tr'] [data-table='td']:first-of-type {
    background: whitesmoke;
    font-style: italic;
    position: sticky;
    left: 0px;
    z-index: 2;
}
#plantList .plant-header .th:first-of-type { z-index: 6 !important; }

buttons {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
#filter,
#reset,
#resetSort {
	align-self: center;
	height: 44px;
	line-height: 44px;
	background: tomato;
	border: 1px solid tomato;
	color:white;
	margin: 1rem 0;
	text-transform: uppercase;
}
#resetSort {
	background: #d68d80;
	align-self: flex-start;
}
#reset:hover,
#resetSort:hover {
	filter: brightness(125%);
	background: tomato;
}
#filter { 
	background: darkturquoise;
	border: 1px solid darkturquoise;
}
#filter:hover{ background: turquoise; }

.th button {
	color: #2b8aa4;
	font-size: 1rem;
	cursor: pointer;
	text-transform: uppercase;
	height: 47.5px;	 
	border: 1px solid #ccc;
	border-radius: 8px;
	width: max-content;
}
.th button:hover {
	background: gray;
	color: white;
}
#plantList  [data-table='tr'] [data-table='td']:first-of-type(odd),
#Tableau [data-table='tr']:nth-child(odd) {
  background-color: #fff;
}
#plantList  [data-table='tr'] [data-table='td']:first-of-type(even),
#Tableau [data-table='tr']:nth-child(even) {
  background-color: #f2f2f2;
}
#plantList  [data-table='tr'].yellow [data-table='td']:first-of-type,
#Tableau [data-table='tr']:nth-child(odd).yellow, 
#Tableau [data-table='tr']:nth-child(even).yellow,
.highlight { 
	background: yellow !important;
	background: #FFFF00 !important;
	background: #FAFA33 !important;
}
.plant-header .th,
[data-table='td'] {
    border: 1px solid black;
    cursor: pointer;
    height: 40px;
    width: 100%;
    padding: 8px 20px;
    white-space: nowrap;
    display: table-cell;
/*    vertical-align: middle;*/
    align-content: center;
}
.plant-header .th {
	 height: 50px;
}
#Tableau [data-table='td']:last-of-type { 
	white-space: nowrap; 
}
.accnNumb {text-decoration: none;}
underline {text-decoration: underline;}
.pagination-container {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
/*  position: absolute;*/
  bottom: 0;
  padding: 1rem 0;
  justify-content: center;
}
#pagination-numbers {
	padding: 20px 0 0;
}
.pagination-number,
.pagination-button{
  font-size: 1.1rem;
  background-color: transparent;
  border:none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .2rem;
}
.pagination-number.active:active,
.pagination-number.active:focus,
.pagination-button.active:focus,
.pagination-number.active:target {
	background: #0085b6;
	transform: brightness(125%);
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
}

.pagination-number.active {
  color: #fff;
  background: #0085b6;
}


::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    width: 7px;
    height: 37px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

::-webkit-scrollbar-thumb:horizontal{
    background: #000;
    border-radius: 10px;
}
#gardenMap {
	position:relative;
	margin-top: 3rem;
}
.container-gardenMapImage {
	min-height:800px;
	height: 100%;
	max-width: 100%;
	width: 100%;
	overflow-x: auto;
	position: relative;
	margin: 2rem 0;
}
/*#bedNumberMaps { 
	background: url("vandusen_autocad_map_2022voriginal.svg");
	background-size: 99.5%;
	height: 1080px;
	background-repeat: no-repeat;
	overflow: scroll;
    width: 2000px;
    position: relative;
}*/

#gardenMap img {
	position:absolute;
}

/*.container-gardenMapImage img.main {
  touch-action: pan-x pan-y;
}*/
.container-gardenMapImage img.main {
	margin: 0px;
	transition: transform 0.25s ease;
/*	cursor: zoom-in;*/
}

#notOnMap {
    background: #9cbdbe;
    padding: 20px;
    border: #256264 2px solid;
    width: 79%;
    display: flex;
    position: absolute;
    z-index: 170;
    flex-flow: column;
/*    margin: auto;*/
    align-items: center;
    justify-content: center;
    left: auto;
    right: 40px;
}

#notOnMap,
/*#infoSectionContent,*/
#paginated-list .plant.hidden,
.hidden,
input[type=checkbox] {
	display: none;
}
.close {
    align-self: flex-end;
    font-family: sans-serif;
    font-weight: 900;
}
input[type=checkbox] ~ label > div {
	transform: scale(1.5);
/*	cursor: zoom-in;*/
    transform-origin: top left;
}
/*input[type=checkbox]:checked ~ label > div {
	transform: scale(3);
	cursor: zoom-out;
    transform-origin: top left;
}*/
[data-bedNumber]{
	visibility:hidden;
}
[data-bedNumber].showBed {
	 visibility:visible;
}


#numberOfPlantsFoundInSearchMessage {text-align: center; padding: 10px 0; font-weight: 700;}
#numberOfPlantsFoundInSearch {border: 1px solid black; padding: 7px; font-style: normal; border-radius: 50%;}
#searchingMessage {
    display: none;
    justify-content: flex-start;
    align-content: flex-start;
    flex-flow: column nowrap;
    width: auto;

    z-index: 2 !important;
    padding: 3rem;
    background: coral;
    font-size: 2rem;
    text-align: center;
    margin: 0;
    position: absolute;
    left:0;
    right:0;
}
#searchingMessage h3 {margin:0;}
#searchingMessage.isVisible {display: flex; transition:2s;} 
.nothingFound {
    padding: 20px;
    width: 67%;
    margin: auto;
    text-align: center;
    line-height: 1.4;
    white-space: normal;
}
.plant.displayNone {display:none;}
/* HTML: <div class="loader"></div> */
/*.loader {*/
/*  width: 100%;
  font-weight: bold;
  font-family: "Yeseva One", serif;
  font-size: 24px;
  padding: 18px 0;
  text-align: center;
}*/

/*.loader hr {
  border: none;
  color: #333;  /* old IE */
  /*background-color: #333;  /* Modern Browsers */
 /*-webkit-animation:  l2 2s linear infinite;
  -webkit-animation-fill-mode:  l2 2s linear infinite;
  animation: l2 2s linear infinite;
}*/

/*.loader:before {
  content:"Loading Plant List ..."
}*/

/*@keyframes l2 {
 0% {
    width: 0px; 
    height: 4px;
  }
  100% {
    width: 100%; 
    height: 8px;
  }
}*/
/*.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
   content: "🌻🌲 Getting Plants🪻🌳"
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 348px;
  height: 348px;
  border-radius: 50%;
  border: 4px solid #FFF;
  position: absolute;
  left: auto;
  right: auto;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader:before {
 
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}*/
@keyframes eyeMove {
    0%, 10% {     background-position: 0px 0px}
    13%, 40% {     background-position: -15px 0px}
    43%, 70% {     background-position: 15px 0px}
    73%, 90% {     background-position: 0px 15px}
    93%, 100% {     background-position: 0px 0px}
  }
  @keyframes blinkingeyes {
    0%, 10%, 12%, 20%, 22%, 40%, 42%, 60%, 62%, 70%, 72%, 90%, 92%, 98%, 100% { height: 48px}
    11%, 21%,41%, 61%, 71%, 91%, 99% { height: 18px}
  }
.loading {
    position: relative;
    width: 108px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: auto;
    padding: 40px 0 0;
  }
  .loading::after, 
  .loading::before  {
    content: '';
    display: block;
    margin: auto;
    width: 48px;
    height: 48px;
    border: 1px solid black;
    background-color: #FFF;
    background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove;
    animation-duration: 8s;
     animation-delay: -2s;
     animation-iteration-count: infinite;

  }

[data-bedNumber].showBed {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.findMap {
    text-align: center;
    font-size: .8rem;
    display: block;
    line-height: 1.4;
    font-style: italic;
    z-index: 7;
    border: rgb(239, 239, 239) 1px solid;
    padding: 8px;
    background: #7FF217!important;
/*	background: #c9efa1!important;*/
}
@media only screen and (max-width: 1024px) {
	.search-input tr {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.search-input td {
		width: 50%;
		margin: 2px 0;
	}
	.search-input input {
/*		width:100%;*/
		height: 55px; 
	}
	#plantList  {
		overflow-x: hidden;
		overflow-y: hidden;
	}
	.scroll-vertical {
		max-width:100%;
		height: 400px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		position: static;
	}
	.scroll-horizontal {
		max-width:100%;
		white-space:nowrap;
		height: 400px;

		-webkit-overflow-scrolling: touch;
	}
}
@media only screen and (max-width: 700px) {
	body,html {
		overflow-x:hidden;
	}
	.container {
		padding: 10px 0px;
	}
	header {flex-flow: column}
	h1 {font-size: 1.6rem;}
	#showGuide {
	    margin-right: 10px;
	}
	table { 
		font-size: 1rem;
	}
	
	#plantList #Tableau .th { 
		position: sticky; 
	}
	.search-input tr {
		flex-flow: column;
		padding: 10px 0;
	}
	#plantList #Tableau .th { 
		top: 0px; 
	}
	.th button {font-weight: 700}
	[data-table='td'], td {
			padding:8px;
		 	white-space:normal;
	}
	.search-input td { 
			width: 100%;
	}
	.pagination-number.active {
	    font-weight: 700;
	}
   input[type=checkbox] ~ label > div {
   	transform: scale(5);
   	cursor: zoom-in;
    transform-origin: top left;
   }
   /*input[type=checkbox]:checked ~ label > div {
   	transform: scale(10);
   	cursor: zoom-out;
    transform-origin: top left;
   }*/
   ::-webkit-scrollbar,
   ::-webkit-scrollbar:horizontal {
	    width: 10px;
	    height: 7px;
	}
	::-webkit-scrollbar-thumb,
	::-webkit-scrollbar-thumb:horizontal {
	    width: 10px;
	    height: 37px;
	}
}
@media only screen and (max-width: 525px) {
	.container-gardenMapImage {
	    min-height: 1070px;
	}
	.plant-header .th:nth-of-type(5),
	.plant .habit {display: none;}
}