html,body{
	background-color:#7CFC00;
	background-color:#fff;
	padding:0px;
	margin:0px;
	/* background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(255,255,255,1)); */
}

a{
	text-decoration:none;
	color:#8a0;
}
a:hover{
	color:#a40;
	text-decoration:none;
}

div.page_outer{
	position:relative;
	background-color:transparent; 
	background-image:url("pics/mainboard2.png");
	background-image:url("pics/background.jpg");
	background-image:none;
	background-repeat:no-repeat;
	background-repeat:repeat-x;
	background-position:top center;
	max-width:1918px;
	margin:0px auto;
	border:0px solid #222;
	padding:0px;
}

div.header_background{
	position:absolute;
	top:0px;
	height:0px;
	background:linear-gradient(to bottom, rgba(255,255,255,0.0),rgba(255,255,255,0.0),rgba(255,255,255,0.0), rgba(255,255,255,0.9),rgba(255,255,255,1)); 
	position:relative;
	z-index:1;

}

div.page_vertical_spacer{
	position:relative;
	top:00px;
	width:100%;
	height:7vh;
	border:0px solid blue;
	display:none;
}
div.page{
	position:relative;
	top:0px;
	margin:0px auto;
	z-index:2; 
	max-width:1200px;
	min-width:300px;
	border:0px solid #ddd;
	border:0px solid red;
}
div.header_container{
	padding:0px;
}
div.header_bar{
	background-color:#fff;
	/* padding:2vh; */
	margin-top:0vh;
	padding:0px;
}
div.header_buttons p.header_covid-19{
	color:#ffc107;
	color:#666;
	margin-bottom:0px;
	border:0px solid red;
	padding-top:3px;
}
navbar{ padding:0px;}

h2{
	color:#222;
}
h3{
	border-top:1px solid #8a0;
	color:#333;
	color:#8a0;
}
h4{
	color:#a40;
}
h4.fmf_green{
	#8a0;
}

div.card a.home-icon-link div.card-body h3.card-title{
	border:0px;
	font-size:1em;
}

a.navbar-brand{
	border:0px solid red;
}
span.logo img{
	color:lawngreen;
	font-size:4vw;
	width:20vw;
	min-width:165px;
	max-width:250px;
}
img.logo_icon{
	width:6vw;
	min-width:20px;
	max-width:50px;
	margin-right:10px;
	margin-right:0.3vw;
}

div.page_content{
	background-color:rgba(255,255,255,0.95);
	padding-top:1vh;
}


div.covid19{
	border-radius:8px;
	background-color:#ffc107;
	text-align:center;
}
div.covid19 h3{
	font-size:2.5vw;
	text-align:center;
	font-weight:300;
}


div.icon{
	border:1px solid black;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	height:25px;
	width:25px;
	height:80%;
	font-size:14px;
	padding:0px;
	color:black;
}
div.icon-category-home{
	width:120px;
	height:120px;
	background-color:#aaa;
	background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(128,128,128,1)); 
	color:white;
	border:6px solid #1a6600;
	border:0px solid #ddd;
	
}
div.icon-category-home-inner{
	border:4px solid #fff;
	border:0px solid #fff;
	width:100%;
	height:100%;
	color:white;
	display:flex;
	background-color:rgba(0,255,0,0.7);
	background-color:#666;
	background-color:rgba(66,66,66,0.7);
	background-color:#28a745;
	background-color:#51c821;
	background-color:#1f451a;
	background-color:#5bc242;
	background-color:#e55f3b;
	background-color:#f9b454;
	background-color:#a0a090;
	background-color:#638c80;
	background-color:#a40;
	background-color:#8a0;
	background-color:#eee;
}
div.icon-category-home-inner:hover{
	background-color:#8a0;
}

div.icon-category-home-inner img{
	max-width:60%;
    filter: invert(96%) sepia(4%) saturate(100%) hue-rotate(168deg) brightness(0%) contrast(109%);
    filter: invert(28%) sepia(68%) saturate(7077%) hue-rotate(79deg) brightness(90%) contrast(104%);
	filter: invert(18%) sepia(12%) saturate(2566%) hue-rotate(66deg) brightness(103%) contrast(89%);
    filter: invert(96%) sepia(4%) saturate(17%) hue-rotate(168deg) brightness(100%) contrast(109%);
	filter: invert(22%) sepia(87%) saturate(3174%) hue-rotate(30deg) brightness(91%) contrast(101%);

	/* filter converter https://codepen.io/sosuke/pen/Pjoqqp */
}
div.icon-category-home-inner img:hover{
    /* filter: invert(28%) sepia(68%) saturate(7077%) hue-rotate(79deg) brightness(90%) contrast(104%);
    filter: invert(96%) sepia(4%) saturate(100%) hue-rotate(168deg) brightness(0%) contrast(109%);
	filter: invert(97%) sepia(97%) saturate(0%) hue-rotate(54deg) brightness(105%) contrast(104%); */
}
span.icon{
	border:1px solid #666;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	height:25px;
	width:25px;
	font-size:14px;
	padding:0px;
	color:black;
}
span.icon-covid19{
	background-color:#ffc107;
	color:black;
}

table.table-header td{
	border:0px; 
}
	
div.header_buttons{
	margin:0px;
	border:0px solid red;
	text-align:right;
	padding-bottom:1vh;
}
a.header_btn{
	min-width:100px;
	margin-left:0.25vw;
	
}

div.page-header{
	min-height:140px;
	padding-top:15px;
	background-color:#fff;
}
div.page-header h1{
	margin-bottom:0.0em;	
}

input.btn-success{
	background-color:#8a0;
	border:0px;
}
a.btn-success{
	background-color:#8a0;
	border:0px;
}

div.header-instructions{
	padding:1vh 1.2vw;
	color:white;
	color:#333;
	background-color:#555;
	background-color:#d05600;
	background-color:#eee;
	border-radius:5px;
}

div.vendor_header{
	background-color:#eee;
	border-radius:4px;
	padding-bottom:1vh;
}

div.primary-search{
	background-color:#ddd;
	background-color:#fff;
	/* padding:1vh 1.2vw; */
	border-bottom:0px solid #ccc;
	border:0px solid #ccc;
	border-radius:0px 0px 5px 5px;
	
	
}
div.primary-search .input-group-text{
	background-color:#666;
	color:white;
	/* background-color:#a40;
	border:0px; */
}

span.search_results_category, span.search_results_settlement{
	color:#a40;
}

header.jumbotron{
	background-image:url(pics/stock-photo-three-black-cars-stand-in-small-service-station-and-two-men-repair-one-car-138250919.jpg);
	background-position:-4px -400px;
	margin-bottom:4rem;
	border:1px solid lightblue;
	border:1px 0px 1px 0px;
	min-height:246px;
}

div.jumbotron_opacity{
	position:absolute;
	bottom:0px;
	background-color:rgba(255,255,255,0.9);
	padding:0.1rem;
 	margin-left:-15px; 
 	margin-right:-15px; 
	/* width:100%;  */
	padding-right:4rem;
	padding-left:1rem;
	border-radius: 0px 0.5rem 0px 0px;
	
}

div.jumbotron_opacity h1{
	color:blue;
	
}

div.header_contact_details{
	padding-top:1em;
}

label{
	margin-bottom:0px;
	font-size:0.9rem;
}

span.select-label{
	border:0px solid red;
	min-width:2rem;
}

a.home-icon-link{
	color:#333;
}
a.home-icon-link:hover{
	text-decoration:none;
}

div.card{
	margin-top:2rem;
	border:0px solid red;
	/* margin-left:50px; */
	/* margin-right:50px; */
}
div.card a{
	/* color:#006600; */
}
div.card ul{
	border:0px solid red;
	/* padding-left:0px; */
	
}
div.card li{
	/* list-style-type:none; */
	list-style-position:outset;
}
div.card h3{
	font-size:1.1em;
}

form > div.fieldset{
	margin-bottom:4rem;
	padding:2rem;
	border:1px solid #f6f6f6;
	border-radius:0.5rem;
	background-color:#fafafa;
}

form div.fieldset div.fieldset{
	margin-bottom:1vh;
	margin-top:1vh;
	padding:1rem 0rem;
	border:0px solid #ddd;
	border-radius:0.3rem;
}
span.oh_day{
	display:inline-block;
	min-width:40px;

}
.vendor_org_structure div.card{
	border:1px solid #c0c0c0;
}
.vendor_org_structure div.card-footer{
	border-top:0px;
}

table.vendor_results div{
	border:1px solid red;
}

img.icon_vendor_options{
	width:30px;
	border:0px solid red;
	margin-right:0.5vw;
}
img.icon_vendor_contact_links{
	width:25px;
	border:0px solid red;
	margin-right:0px;
	filter: invert(22%) sepia(87%) saturate(3174%) hue-rotate(30deg) brightness(91%) contrast(101%);
}
table.vendor_results div.address{
	color:blue;
}
table.vendor_results div.phone{
	color:orange;
}
div.vendor_features img{
	display:inline;
}
div.vendor_listing_logo{
	width:100px;
	height:100px;
	background-color:grey;
}
div.vendor_listing{
	border:1px solid #8a0;
	margin-bottom:4vh;
	border-radius: 0.25rem;
	box-shadow:1px 2px 3px 0px #777;
}
div.vendor_listing a{
	color:#a40;
}
div.vendor_not_local div.vendor_name, div.vendor_not_local div.vendor_phone{
	background-color:#a40;
}
div.listing_component_left{
	border:0px solid red;
}
div.listing_component_right{
	border:0px solid red;
}

div.vendor_address{
	border:0px solid red;
	padding-top:5px;
	color:#444;
}
div.vendor_tagline p{
	font-weight:600;
	border:0px solid blue;
	margin-bottom:0px;
}
div.vendor_tagline{
	font-weight:600;
	border:0px solid blue;
	border-bottom:1px solid #eee;
	background-color:#fafafa;
	padding-top:5px;
	padding-bottom:5px;
}

div.vendor_name h5 a{
	color:unset;
}
/* -- phone -- */
div.vendor_phone{
	border:0px solid red;
	font-size:16px;
	text-align: right;
}
div.vendor_phone a{
	color:white;
}
div.vendor_phone img.icon_phone_number{
	border:0px solid white;
	width:20px;
	margin-top:-2px;
}
div.vendor_features{
	border:0px solid red;	
}
div.vendor_products{
	border:0px solid red;	
	padding-top:0px;
}
span.vendor_social_media{
	border:0px solid blue;
	display:inline-block;
	position:absolute;
	right:0px;
	
}

/* --- social media icons --- */

div.icon_social{
	min-width:16px;
	min-height:16px;
	border:0px solid red;	
	border-radius: 7px;
	box-shadow: 1px 3px 3px rgba(0,0,0,.2); 
	margin-left:0.25vw;
	margin-right:0.25vw;
	display:inline-block;
	margin-bottom:5px;
	margin-top:0px;
}
div.icon_social img{
	width:100%;
}
div.website{ background-color:#8a0} 
div.covid{ background-color:#ffc107;}
div.covid img{ filter: invert(96%) sepia(4%) saturate(100%) hue-rotate(168deg) brightness(0%) contrast(109%);} 
div.facebook{ background-color:#4267b2;} 
div.twitter{ background-color:#1da1f2;} 
div.instagram{ background: #d6249f;	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} 

div.vendor_features div.icon_social, div.modal div.icon_social{
	width:30px;
	height:30px;
}
div.vendor_social_media{
	text-align:right;
	padding-top:10px;
	padding-left:0px;
}
div.vendor_social_media div.icon_social{
	width:30px;
	height:30px;
	margin-right:0px;
	margin-left:0.5vw;
}
div.vendor_name, div.vendor_phone{
	background-color:#8a0;
	color:white;
}
div.vendor_features, div.vendor_products{
	padding-top:5px;
	border-top:1px solid #eee;
	
}
div.vendor_features div.icon_social:hover{
	cursor:pointer;
}
div.vendor_products div.icon_social,div.vendor_features div.icon_social{
	width:30px;
	height:30px;
	margin-right:0.5vw;
	margin-left:0vw;
	margin-bottom:5px;

}
div.help{
	display:inline-block;
	border-radius:50%;
	/* background-color:#bbb;
	background-color:#17a2ba; */
}
div.help:hover{cursor:pointer;}
div.help img{
	display:inline;
	vertical-align:middle;
	width:100%;
	border:0px solid blue;
	filter: invert(60%) sepia(45%) saturate(6749%) hue-rotate(156deg) brightness(97%) contrast(82%);
}
div.vendor_features_label div.help{
	width:20px;
	height:20px;
	margin-left:5px;
	margin-right:0px;
	line-height:10px;
	border:1px solid #17a2ba;
}
div.vendor_features_label, div.vendor_products_label{
	border:0px solid blue;
	min-width:200px;
	max-width:240px;
	border-top:1px solid #eee;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#fafafa;
	padding-right:0px;
	font-size:0.em;
	
}

div.faqs{
	font-size:0.8em;
}


/* ------------ dashboard -----------------*/
div.appliance_list .row{
	padding-top:20px;
	padding-bottom:20px;
	border-bottom:1px solid #ddd;
	
}
div.appliance_list:nth-of-type(odd){
	background-color:#def;

}
div.appliance_list .col{
	padding-top:10px;
}

div.category {
	background-color:#666;
}
div.category div.col{
	color:white;
	font-weight:600;
	padding-top:10px;
	padding-bottom:10px;

}	


/* ------------ forms -----------------*/
form.form input.dull_field{
	background-color:#ddd !Important;
}

footer{
	padding-top:1vh;
	margin-top:5rem;
	border-radius: 5px 5px 0px 0px;
	background-color:#ddd;
	margin-left:0px;
	margin-right:0px;
}

.float-right{
	float:right;
}
.troubleshoot{
	border:1px solid red;
}


/* --------------- IMAGE MODAL ---------------- */

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}