@font-face {
    font-family: 			'Font Awesome 6 Free';
    src: 					url(https://use.fontawesome.com/releases/v6.1.2/css/all.css);
    font-weight: 			900;
    font-style: 			normal;
}

@font-face {
    font-family: 			'Roboto';
    src: 					url(https://fonts.googleapis.com/css?family=Roboto);
    font-weight: 			200;
    font-style: 			normal;
}

@font-face {
    font-family: 			'Open Sans';
    src: 					url(https://fonts.googleapis.com/css?family=Open+Sans);
    font-weight: 			200;
    font-style: 			normal;
}

@font-face {
	font-family: 			'Tangerine';
    src: 					url(https://fonts.googleapis.com/css2?family=Tangerine&display=swap);
    font-weight: 			400;
    font-style: 			normal;
}

body  {
	background:  			#ffffff;
}

#bodyTable {
    width:					100%;
	font-family: 			Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
	font-size:				16px;
	line-height:   			24px;
	color:					#333333;
}

#contentBodytable {
    width:					100%;
}

#bodyTable a, #bodyTable a:visited {
	color:					#333333;
  	text-decoration:		underline;
}

#bodyTable a:hover {
  	text-decoration:		underline;
}

#bodyTable h1  {
	font-family:			'Open Sans', sans-serif;
	font-size:  			32px;
	line-height:  			38px;
	font-weight:  			normal;
	color:					#333333;
	margin:					5px 0 20px 0;
}

#bodyTable h2  {
	font-family:			'Open Sans', sans-serif;
	font-size:  			24px;
	line-height:  			28px;
	font-weight:  			normal;
	margin:					5px 0 10px 0;
}

#bodyTable h3  {
	font-size:  			20px;
	color:					#3f5c22;
	line-height:  			25px;
	font-weight:  			bold;
	margin:					5px 0 5px 0;	
}

#bodyTable h4 {
	font-size:  			18px;
	line-height:  			22px;
	font-weight:   			normal;
	text-transform:			uppercase;
	margin:					5px 0 5px 0;
}

#bodyTable h5  {
	font-size:  			18px;
	color:  				#ff6e64;
	line-height:  			25px;
	font-weight:  			bold;
	margin:					5px 0 5px 0;	
}

#bodyTable h6  {
	font-size:  			16px;
	line-height:  			21px;
	margin:					5px 0 5px 0;	
}

span.cart:before, a.cart:before, .removeButton:before,
#resources span.app\.tbl\.telephone:before, #resources a.email-company:before, #resources span.app\.tbl\.website:before,
#business-hours ul.days-open li:before {
    font-family: 			'Font Awesome 6 Free', sans-serif;
    font-weight: 			900;
}

/* LAYOUT - STARTS */
.container {
	max-width:				1400px;
	padding-top:        	20px;
	padding-bottom:     	52px;
}

div[class*="col-"] {
	margin-bottom:			15px;
}

#col-left, #col-right {
	margin-bottom:			25px;
}

#col-right {
	font-size:				15px;
	line-height:			22px;
}

#col-right {
	text-align:				center;
}

#col-right img {
	margin:					5px 0 5px 0;
}
/* ******* */

#plant-lists img {
	width: 					100%;
    object-fit: 			cover;
}

.responsive {
	max-width: 				100%;
	height: 				auto;
}

ul, ol {
	padding:				5px 0 5px 22px;
	margin:					5px 0 5px 5px;
}

ul {
	list-style-type:  		square;
}

li {
	margin-bottom:  		8px;
	padding-left:			8px;
}

#page-links a {
	text-decoration: 	none;
}

#page-links a:hover {
	text-decoration: 	underline;
}

#page-links ul {
	padding-left:		0;
	margin:				5px 0 5px 0;
}

#page-links ul li {
	display: 			inline-block;
	padding-left:		0;
}

#page-links li:after {
    content:			"|";
	margin:				0 10px 0 15px;
}

#page-links li:last-child::after {
    content:			"";
}

.shade {
	text-shadow: 			1px 1px 0px #fff, 4px 4px 0px rgba(0,0,0,0.15);
}

hr  {
	background-color:  		#3f5c22;
	height:  				1px;
	margin:					1em 0;
	border:  				0;
}

#store-notice {
	font-size:				18px;
	font-weight: 			400;
	text-align:				center;
}

#store-notice .the-message {
	background: 			#ff6e64;
	color:					#ffffff;
	padding-top:			5px;
	padding-bottom:			5px;
}

#bodyTable #store-notice a {
	color:					#ffffff;
}

#store-notice p {
  margin-top: 				8px;
  margin-bottom: 			8px;
}

.notice, #bodyTable .notice a {
	color:					#ff0000;
	font-weight:			bold;
}

#bodyTable input[type="submit"], #bodyTable input#app\.crt\.continue, #bodyTable .button, #bodyTable a.button {
	font-size: 				1em;
	font-weight:    		normal;
	background:				#44225c;
	color:					#ffffff;
	line-height:     		1.4em;
	text-transform:			uppercase;
	border-radius:   		2px;
	display:				inline-block;
	border:					1px solid #cccccc;
	padding: 		        10px 18px 10px 18px;
	margin:					5px 0 5px 0;
	text-shadow:			none;
	box-shadow:				none;
}

#bodyTable input[type="submit"]:hover, #bodyTable input#app\.crt\.continue:hover, #bodyTable .button:hover, #bodyTable a.button:hover {
	text-decoration:		none;
	color:					#ffffff;
	border:					1px solid #cccccc;
}

#bodyTable a.button /*, #bodyTable a.button:visited */ {
	text-decoration:		none;
	color:					#ffffff;
}

#app\.crt\.app_frm_next-span {
    margin-left: 			0;
}

/* FORMS DEFAULT SETTINGS */
.app\.frm\.input, textarea, select {
	border-radius:			2px;
}

input, textarea, select {
    box-shadow: 			inset 0px 8px 8px -9px #ccc, inset 0px -9px 8px -10px #ccc;
    outline: 				none;
    border: 				1px solid #cccccc;
}

.app\.frm\.captcha {
	margin:					15px 0 5px 0;
	font-size:				14px;
}

input.app\.frm\.input, textarea, select {
	padding:				9px 6px 9px 6px;
}

input[type="image"]{
    box-shadow: 			inset 0px 0px 0px 0px #fff, inset 0px 0px 0px 0px #fff;
    outline: 				none;
    border: 				0px solid #ffffff;
}

div.app\.frm\.disabled {
	margin-bottom:			12px;
}

form.app\.frm\.receipt div.app\.frm\.step_text, .app\.frm\.step_text {
	color:					#ff0000;
	font-size:				15.5px;
	font-weight:			bold;
	margin-bottom:			15px;
}

.clear {
	clear: 					both;
}

.nowrap {
    white-space: 			pre;
}


/* COLLAPSABLE CONTENT */
.collapsible {
	margin:					4px 0 8px 0;
}

.collapsible a:before, .collapsible a.collapsed:before {
	font-family: 			'Font Awesome 6 Free', sans-serif;
    font-weight:            900;
	font-size:				18px;
}

.collapsible a:before {
    content:                "\f068";
    padding-right:          5px;
}

.collapsible a.collapsed:before {
    content:                "\f067";
}

.collapsible > a,
.collapsible > a:hover, 
.collapsible > a:active, 
.collapsible > a:focus  {
    text-decoration:        none;
}

.collapsible a, .collapsible a:active, .collapsible a:focus {
    outline: 				none; 
}		


/* BACK TO TOP / SCROLL TO TOP */
a#back-to-top {
    position: 				fixed;
    bottom: 				25px;
    right: 					10px;
    z-index: 				9999;
    cursor: 				pointer;
    text-decoration: 		none;
    transition: 			opacity 0.2s ease-out;
}

a#back-to-top:before {
	font-family: 			'Material Symbols Outlined';
	content:				"\f5d2";
	font-size:				45px;
	color:					#d4d4d4;
	vertical-align:			middle;
}

a#back-to-top:hover {
    opacity: 				0.7;
	text-decoration:		none;
}



/* MODAL POPUP / The myModal container needs to be relative */
#myModal {
	position:				absolute;
    top: 					20%;
    left: 					0;
}

#myModal .modal-dialog {
	max-width:				515px;	
}

#myModal .modal-content {
	color:					#333333;
	padding:				0;	
}

#myModal span.close {
	display: 				inline-block;
	text-align:				right;
	float:					right;
	font-size:				35px;
	color:					#abaaaa;
	padding:				0 18px 0 18px;
	cursor:					pointer;
}

#myModal img {
	width: 					100%;
	max-width: 				198px;
	height: 				auto;
	margin:					0 0 10px 0;
}

#myModal .modal-body {
	background:				#f7f7f7;
	font-size:				16px;
	line-height:			25px;
	padding:				22px 22px 22px 22px;	
}

span#myBtn {
	text-decoration:		underline;
	cursor:					pointer;
}


div.FOOTER {
	font-size:				11px;  
	line-height:      		17px; 
	padding-bottom:     	15px;
	height:					94px;
}

div.FOOTER, div.FOOTER a {
	color:  				#f5f9ea;
	font-size:				11px;
}

div.FOOTER a:hover {
	text-decoration:  		underline;
}


/* MOBILE VIEW */
/* Extra large devices (large laptops and desktops, for browsers 1200px and UP) */
@media only screen and (min-width: 1200px) {

}

/* Extra large devices (large laptops and desktops, for browsers 1200px and LESS) */
@media only screen and (max-width: 1200px) {

}

/* Large devices (laptops/desktops, for browsers 1024px and LESS) */
@media only screen and (max-width: 1024px) {

}

/* Medium devices (landscape tablets, for browsers 768px and LESS) */
@media only screen and (max-width: 768px) {
	#bodyTable span.app\.frm\.input, #bodyTable span.app\.frm\.dropdown { margin: 5px 0 2px 0; display: block; }
	#bodyTable label.app\.frm\.input  { margin: 12px 0 2px 0; display: block; /* float: none; */ }
	.container { max-width: 100%; padding-top: 15px; padding-bottom: 15px; }
  	.row { margin-top:10px; margin-bottom:10px; }
	div[class*="col-"] { margin-bottom: 12px; }
}

/* Extra small devices (phones, for browsers 480px and LESS) */
@media only screen and (max-width: 480px) {
	.nobr { white-space: normal; }
	#bodyTable h1 { font-size: 26px; line-height: 32px; margin: 4px 0 22px 0; }
	#bodyTable h2 { font-size: 22px; font-weight: bold; line-height: 24px; margin: 4px 0 8px 0; }
	#bodyTable h3 { font-size: 20px; font-weight: bold; line-height: 24px; margin: 4px 0 6px 0; }
	.divider { width: 34%; }
} 

/* Extra extra small devices (phones, for browsers 384px and LESS) */
@media only screen and (max-width: 384px) {
	div#app\.frm\.contact_us\.app_frm_recaptcha-div { width: 238px; }
}

/* MENU ONLY - For browsers 768px and UP) */
@media only screen and (min-width: 768px) {

}