@import url("/assets/css/colors.css");

body {
	background-color: var(--white);
	color: var(--darkgray);
	}

p {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
	}
	
topbar {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.0;	
	font-size: 12px;
	color: var(--blue);
	}
	
sidebar {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--blue);
	}
	
h1 {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	font-size: 32px;
	font-weight: normal;
	color: var(--blue);
	}
	
h2 {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	font-size: 20px;
	font-weight: normal;
	color: var(--red);
	}	
	
h3 {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	font-size: 18px;
	font-weight: normal;
	color: var(--blue);
	}	
	
hr {
    display: block;
    background-color: var(--gray);
    height: 1px;
    border: 0;
    border-top: 0;
    margin: 1em 0;
    padding: 0;
}

.footer {
	text-align: center;
	font-size: 11px;
	color: var(--gray);
}
	
/* Top Navigation Bar */
.divtoptable {
	display: table;
	width: 95%;
	margin: auto;
	background-color: var(--white);
	border: 2px solid var(--white);
}	
.divtopTableRow {
	display: table-row;
	height: 60px;
}
.divtopTableCell1 {
	border: 0px solid var(--white);
	display: table-cell;
	padding: 5px 10px 0px 0px;
	text-align: center;
	vertical-align: middle;
	width: 10%;
}
.divtopTableCell2 {
	border: 0px solid var(--white);
	display: table-cell;
	padding: 5px 30px 0px 10px;
	text-align: center;
	vertical-align: middle;
	width: 72%;
}
.divtopTableCell3 {
	border: 0px solid var(--white);
	display: table-cell;
	padding: 5px 10px 0px 10px;
	text-align: center;
	vertical-align: middle;
	width: 18%;
}
.divtopTableCell4 {
	border: 0px solid var(--white);
	display: table-cell;
	padding: 5px 30px 0px 10px;
	text-align: center;
	vertical-align: middle;
	width: 80%;
}
.divtopTableCell5 {
	border: 0px solid var(--white);
	display: table-cell;
	padding: 5px 10px 0px 10px;
	text-align: center;
	vertical-align: middle;
	width: 10%;
}
.divtopTableBody {
	display: table-row-group;
}


	/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  font-family: "Verdana", sans-serif;
}

	/* Dropdown button */
.dropdown .dropbtn {
  font-size: 10px; 
  border: none;
  outline: none;
  color: white;
  padding: 10px 0px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

	/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: var(--white);
}

	/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px var(--white);
  z-index: 1;
}

	/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  font-size: 13px;
  color: var(--mediumgray);
  padding: 10px 0px;
  text-decoration: none;
  display: block;
  text-align: left;
}

	/* Add a background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--white);
}

	/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}







/* Page Layout Table */
.divPageTable {
	display: table;
	width: 95%;
	margin: auto;
	background-color: var(--white);
	border: 2px solid var(--white);
	padding: 0px 0px 10px 0px;
	background-repeat: no-repeat;	
}	


.divPageTableRow {
	display: table-row;
	height: auto;
}
.divPageTableCell1 {
	display: table-cell;
	padding: 0px 10px 0px 0px;
	width: 10%;
	text-align: left;
	vertical-align: top;
	
}
.divPageTableCell2 {
	display: table-cell;
	padding: 15px 30px 10px 10px;
	width: 72%;
	text-align: left;
	vertical-align: top;
}
.divPageTableCell3 {
	display: table-cell;
	padding: 20px 10px 0px 20px;
	width: 18%;
	text-align: left;
	vertical-align: top;
}
.divPageTableBody {
	display: table-row-group;
}

/* General Links */
a:link {
    color: var(--blue);  
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: var(--blue);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: var(--red); 
    background-color: transparent;
    text-decoration: none;
}

a:active {
    color: var(--red);
    background-color: transparent;
    text-decoration: none;
}

/* Center Style */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

/* Button Style */
.submit1 {
    background-color: var(--red);
    border: none;
    color: white;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    font-family: "Verdana", sans-serif;
    display: inline-block;
    font-size: 12px;
}

/* Bullet Point Styling */
ul {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
}
	
ol {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
	}

/* Image Locations and Tables */	
.rightimage {
	float: right;
}

.leftimage {
	float: left;
}

.imagetable {
	text-indent: 0;
	text-align: center;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
	}

.listingtable {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.3;	
	font-size: 11px;
	color: var(--mediumgray);
	}
	
.linefield1 {
    width: 25%;
    height: 31px;
    box-sizing: border-box;
    border: 1px solid var(--gray);
    border-radius: none;
    background-color: var(--white);
    resize: none;
    text-align: left;
    text-decoration: none;
    font-family: "Verdana", sans-serif;
    font-size: 11px;
}

.messageform {
    width: 100%;
    height: 31px;
    box-sizing: border-box;
    border: 1px solid var(--gray);
    border-radius: none;
    background-color: var(--white);
    padding: 3px;
    resize: none;
    text-align: left;
    text-decoration: none;
    font-family: "Verdana", sans-serif;
    font-size: 11px;
}

.messagetextarea {
    width: 100%;
    padding: 6px 3px;
    box-sizing: border-box;
    border: 1px solid var(--gray);
    border-radius: none;
    background-color: var(--white);
    overflow: auto;
    text-wrap: normal;
    vertical-align: top;
    resize: vertical;
    font-family: "Verdana", sans-serif;
    font-size: 11px;
}

p.label {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.0;	
	font-size: 12px;
	color: var(--mediumgray);
}

td.tablelabel {
	padding: 5px;
	text-align: left;
	height: 40px;
}

td.tablelabelright {
	padding: 5px;
	text-align: right;
	height: 40px;
}


.vidborder {
        border: 1px solid var(--gray);
    }
    
    
    




/* Admin Section Page Layout Table */
.adminPageTable {
	display: table;
	width: 95%;
	margin: auto;
	background-color: var(--white);
	border: 2px solid var(--white);
	padding: 0px 0px 10px 0px;
	background-repeat: no-repeat;	
}	

.adminPageTableRow {
	display: table-row;
	height: auto;
}
.adminPageTableCell1 {
	display: table-cell;
	padding: 20px 10px 0px 20px;
	width: 10%;
	text-align: left;
	vertical-align: top;
}
.adminPageTableCell2 {
	display: table-cell;
	padding: 15px 30px 10px 10px;
	width: 80%;
	text-align: left;
	vertical-align: top;
}
.adminPageTableCell3 {
	display: table-cell;
	padding: 20px 10px 0px 20px;
	width: 10%;
	text-align: left;
	vertical-align: top;
}
.adminPageTableBody {
	display: table-row-group;
}




/* Admin Section Headline Tables */
.adminheadlineTable {
	display: table;
	width: 100%;
	margin: auto;
	padding-top: 20px;
}

.adminheadlineTableBody {
	display: table-row-group;
}

.adminheadlineTableRow {
	display: table-row;
	height: 30px;
}

.adminheadlineTableCell1 {
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	font-size: 32px;
	font-weight: normal;
	color: var(--blue);
}

.adminheadlineTableCell2 {
	text-align: center;
	font-size: 12px;
	font-weight: normal;
}

.adminheadlineTableCell3 {
	text-align: right;
	font-size: 13px;
	font-weight: normal;
}

.adminheadlineTableCell1   {
	border: 2px solid var(--white);
	display: table-cell;
	width: 65%;
	vertical-align: bottom;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	background-color: var(--white);
	padding-bottom: 12px;
}

.adminheadlineTableCell3   {
	border: 2px solid var(--white);
	display: table-cell;
	width: 30%;
	vertical-align: bottom;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	background-color: var(--white);
	padding-bottom: 12px;
}

.adminheadlineTableCell2 {
    width: 5%;
}



/* Admin Section Scorecard Tables */
.dashTable {
	display: table;
	width: 100%;
	margin: auto;
}

.dashTableBody {
	display: table-row-group;
}

.dashTableRowHead {
	display: table-row;
	height: 50px;
}
.dashTableRow {
	display: table-row;
	height: 75px;
}

.dashTableCellmargin {
	border: 2px solid var(--white);
	display: table-cell;
	padding: 20px 10px 0px 20px;
	width: 10%;
	background-color: var(--white);
}

.dashTableCell0 {
	border: 2px solid var(--white);
	display: table-cell;
	padding: 10px 10px 0px 10px;
	width: 17%;
	text-align: left;
	vertical-align: middle;
	background-color: var(--silver);
}

.dashTableCell1 {
	background-color: var(--blue);
	font-weight: bold;
	font-size: 13px;
}

.dashTableCell3 {
	background-color: var(--silver);
	font-size: 11px;
}

.dashTableCell2 {
	background-color: var(--silver);
	font-size: 11px;
}

.dashTableCell1, .dashTableCell2, .dashTableCell3   {
	border: 2px solid var(--white);
	display: table-cell;
	width: 9%;
	text-align: center;
	vertical-align: middle;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	padding: 5px;
}


/* Outcome Tables */
.outcometableleft {
    width: 45%;
    float: left;
}
.outcometableright {
    width: 45%;
    float: right;
}
.outcomeheader {
    width: 120%; 
    text-align: left;
}
#outcomerow {
    height: 45px;
}
.dashTableCell4 {
	background-color: var(--silver);
	font-size: 11px;
	width: 40%; 
	text-align: left; 
	border: 2px solid var(--white);
	display: table-cell;
	vertical-align: middle;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;	
	padding: 10px;
}
.container {
    box-sizing: border-box;
    width: 100%;
    background-color: var(--silver);
}
.model {
    box-sizing: border-box;
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 15px 8px;
    color: white;
    background-color: var(--blue);
}
.dashTableCell5 {
	background-color: var(--silver);
	font-size: 11px;
	width: 65%; 
	border: 2px solid #ffffff;
	display: table-cell;
	vertical-align: middle;
	font-family: "Arial", sans-serif;
}
.dashTableCell6 {
	background-color: var(--silver);
	font-size: 11px;
	width: 35%; 
	text-align: left; 
	border: 2px solid var(--white);
	display: table-cell;
	vertical-align: middle;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.0;	
	padding: 10px;
}
.outcomeheadercharts {
    width: 190%; 
    text-align: left;
}


/* Outcome Report Pie Chart Formatting */
.evpiechart {
	display: flex;
	justify-content: center;
	align-items: center;
	}
#coloryes {
	background-color: var(--blue);
	color: var(--blue);
}
#colornotyet {
	background-color: var(--yellow);
	color: var(--yellow);
}
#colorno {
	background-color: var(--red);
	color: var(--red);
}
#pielegend {
    width: 50%;
    margin-top: 5px;
}
#piechart {
    width: 150px;
    margin-right: 5px;
}
.toupiechart {
	display: flex;
	justify-content: center;
	align-items: center;
	}   







/* Admin Section ListTables */
.listTable {
	display: table;
	width: 100%;
	margin: auto;
}

.listTableBody {
	display: table-row-group;
}

.listTableRowHead {
	display: table-row;
	height: 50px;
}
.listTableRow {
	display: table-row;
	height: 60px;
}

.listTableCell1 {
	background-color: var(--blue);
	font-weight: bold;
	font-size: 13px;
}

.listTable .listTableRow:nth-child(even){
	background-color: var(--silver);
	}
	
.listTable .listTableRow:nth-child(odd) {
  	background-color: var(--gray);
	}	

.listTableCell2, .listTableCell3 {
	font-size: 11px;
}

.listTableCell1, .listTableCell2, .listTableCell3 {
	border: 2px solid var(--white); 
	display: table-cell;

	text-align: center;
	vertical-align: middle;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.2;
	padding: 5px;
}




/* Admin Section Headers */
h5 {
	margin: 50px 0 30px 0; 
	text-indent: 0; 
	text-align: left; 
	font-family: "Verdana", sans-serif; 
	line-height: 1.0; 
	font-size: 32px; 
	font-weight: normal; 
	color: var(--blue);
}
	
h6 {
	margin: 20px 0px 20px 0px; 
	text-indent: 0; 
	text-align: left; 
	font-family: "Verdana", sans-serif; 
	line-height: 1.2; 
	font-size: 20px; 
	font-weight: normal; 
	color: var(--red);
}	

/* Admin Section Back Links - BACK */
a.back:link {
	text-indent: 0; 
	float: right; 
	text-align: left; 
	font-family: "Verdana", sans-serif; 
	line-height: 1.5; 
	font-size: 14px; 
	color: var(--blue); 
	background-color: transparent; 
	text-decoration: none;
}
a.back:visited {
	color: var(--blue);
	background-color: transparent; 
	text-decoration: none;
}
a.back:hover {
	color: var(--red); 
	background-color: transparent; 
	text-decoration: none;
}
a.back:active {
	color: var(--red);
	background-color: transparent; 
	text-decoration: none;
}

/* Admin Section Back Links - PANEL */
a.panel:link {
	text-indent: 0; 
	text-align: center; 
	font-family: "Verdana", sans-serif; 
	line-height: 1.5; font-size: 14px; 
	color: var(--black); 
	background-color: transparent; 
	text-decoration: none;
}
a.panel:visited {
	color: var(--black); 
	background-color: transparent; 
	text-decoration: none;
}
a.panel:hover {
	color: var(--red);
	background-color: transparent; 
	text-decoration: none;
}
a.panel:active {
	color: var(--red);
	background-color: transparent; 
	text-decoration: none;
}

a.linkbutton:link { 
	color: var(--red);
	padding: 5px;
}


/* Headline Links in Tile Content Pages */
a.headline:link {
	line-height: 1.2;	
	font-size: 18px;
	font-weight: normal;
	color: var(--blue);
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
    background-color: transparent; 
    text-decoration: none;
}

a.headline:visited {
    color: var(--blue);
    background-color: transparent;
    text-decoration: none;
}

a.headline:hover {
    color: var(--red);
    background-color: transparent;
    text-decoration: none;
}

a.headline:active {
    color: var(--red);
    background-color: transparent;
    text-decoration: none;
}

/* Forms: Select Boxes - removing gray background and styling to fit forms */
select { 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none; 
	background-color: var(--white); 
	border-radius: 0; 
}
select:not([multiple]) { 
	background: url(assets/images/double-arrow.png) right center no-repeat; 
	background-size: 1.0em 1.2em; 
	padding-right: 1.5em; 
}

select.goal {
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

input.scorecardedit {
        width: 60px;
    }

td.tablelabel { padding: 5px; text-align: left; height: 35px; }
td.tablelabelright { padding: 5px; text-align: right; height: 35px; }

fieldset { border: none; }




/* catching unwanted automated registrations */

.confirmemail {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* invisible fields in forms to auto create extended fields */

.redacted {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}



/* Admin Panel Link Styling */
a.buttondiv {
	background-color: var(--red);
	border: none; 
	color: var(--white); 
	padding: 8.5px 30px; 
	text-align: center; 
	text-decoration: none;
	font-family: "Verdana", sans-serif; 
	display: inline-block; 
	font-size: 12px; 
}
a.console {
	background-color: var(--white); 
	border: none; 
	color: var(--blue); 
	padding: 7px 30px; 
	text-align: right; 
	text-decoration: none;
	font-family: "Verdana", sans-serif; 
	display: inline-block; 
	font-size: 14px; 
}

/* Create a new Event */
#ta {height: 100px;}

/* Admin Awareness Entry Screen Styling */
a.consoleleft {background-color: var(--white); border: none; color: var(--blue); padding: 7px  0px; text-align: left; text-decoration: none; font-family: "Verdana", sans-serif; display: inline-block; font-size: 14px; }






/* Car Profile Specs Formatting -- Original and Outdated, still used for Dealer Profiles and EVSE Profiles*/
.specTable {
	display: table;
	width: 100%;
	margin: auto;
	background-color: var(--white);
}
.specTableRow {
	display: table-row;
	height: auto;
}
.specTableCell {
	display: table-cell;
	padding: 10px 10px 10px 15px;
	width: 33%;
	text-align: left;
	vertical-align: middle;
	text-indent: 0;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
}

/* Charger Installation Form */
p.formheader {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: .5;	
	font-size: 20px;
	font-weight: normal;
	color: var(--red);
	padding: 10px 0px 0px 0px;
}

tr.vform {
	height: 60px;
}


/* Event Calendar Styling */
th, td { font-family: Verdana, sans-serif; text-indent: 0px; font-family: Verdana, sans-serif; line-height: 1.0; font-size: 12px; color: var(--mediumgray); }
tr { height: 30px; }
td.eventcol { text-align: left; }
td.datecol { text-align: center; }




.suptable {
    font-family: "Verdana", sans-serif;
	line-height: 2;	
	font-size: 12px;
	width: 100%;
	margin: 10px 0px;
	border-collapse: collapse;
	}

.suptable tr:nth-child(even){
	background-color: var(--bggray);
	}
	
.suptable tr:nth-child(odd) {
  	background-color: var(--white);
	}	

.supth {
	background-color: var(--darkblue);
	color: var(--white);
	border: 1px solid var(--darkblue);
	text-align: left;
	}
	
.supthc {
	background-color: var(--darkblue);
	color: var(--white);
	border: 1px solid var(--darkblue);
	text-align: center;
	}

.suptd {
	padding: 3px;
	text-align: left;
	border: 1px solid var(--gray);
	color: var(--mediumgray);
	}
	
.suptdc {
	padding: 3px;
	text-align: center;
	border: 1px solid var(--gray);
	color: var(--mediumgray);
	}

span.green {
    color:var(--green);
    font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
}

/* 2020 Car Profile Styling with shadow boxes -- Outdated, still used for Dealer Profiles and EVSE Profiles*/
div.profileboxsm {
  width: 625px;
  padding: 3px 10px 12px 20px;
  border: 1px solid var(--lightgray);
  background-color: white;
  box-shadow: 6px 6px 10px var(--lightgray);
}

span.typeofcar {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 12px;
	color: var(--mediumgray);
}
.profileImage {
    width: 46%; 
    float: left; 
    padding-right: 30px; 
    margin-top: 0px;
}

.dark {
	color: var(--mediumblue);
	margin-top: 15px;
}
.profileboxlg {
  width: 100%;
  padding: 0px 0px 10px 0px;
  border: 1px solid var(--lightgray);
  background-color: var(--white);
  box-shadow: 6px 6px 10px var(--lightgray);
  overflow: auto;
}

.spectablecontainer {
	width: 240px;
	height: 100%;
	float: left;
	margin: 10px 25px 10px 25px;
}
.spectablegray {
	border-collapse: collapse;
	width: 230px;
	margin-top: 20px;
}
.specrow {
	background-color: var(--bggray);
	border-spacing: 0px 10px;
}
.speclabel {
	margin: 0;
	padding: 8px 8px;
	border-bottom: 8px solid var(--white);
}
.specvalue {
	margin: 0;
	font-weight: bold;
	text-align: right;
	padding: 8px 8px;
	border-bottom: 8px solid var(--white);
}
.profilereview {
    width: 93%;
    padding-top: 11px;
    margin-left: 25px;
}

.spectablecontainerdealer {
    width: 95%;
	margin: 0px 25px 10px 0px;
}
.spectablegraydealer {
	border-collapse: collapse;
	width: 100%;
	margin-top: 30px;
}
.dealercontact {
	width: 33%;
	padding-left: 25px;
	padding-right: 15px;
	border-bottom: 8px solid var(--white);
	vertical-align: top;
	background-color: var(--white);
	text-align: left;
}


/* Car Profile Page Styling 2023 */
.profileboxlg {
    max-width: 1100px;
}

/* Profile Photo Section */
.photocontainer {
    display: flex;
    flex-direction: row;
} 

.smallphotocontainer {
    display: flex;
    flex-direction: column;
}
.photocontainer {
    column-gap: 1.4%;
} 
.mainphotocontainer {
    flex: 75.7%;
}
.smallphotocontainer {
    flex: 22.9%;
    row-gap: 3.5%;
}

    /* Placement of Federal Tax Return Icon and Text in upper right corner of content field */
.carTaxReturnProfile {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px 10px 0px 0px;
    font-family: "Arial", sans-serif;
    font-style: italic;
	font-size: 10px;
}
.taxreturntextprofile {
    align-self: center;
}

    /* Profile Content Section */
.profilecontent {
    display: flex;
    flex-direction: row;
    column-gap: 0.5%;
    padding-top: 0px;
    margin-top: -8px;
}

    /* Profile Spec Table */
.spectablecontainer {
	flex: 25%;
}
.carspectablegray {
    width: 255px;
	border-collapse: collapse;
	padding-top: 0px;
    margin-left: 5px;
}
.specrow {
	background-color: var(--bggray);
	border-spacing: 0px 0px;
}
.speclabel {
	padding: 8px 8px;
	border-bottom: 8px solid var(--white);
	font-family: "Arial Narrow", sans-serif;
	font-size: 14px;
}
.specvalue {
	font-weight: bold;
	text-align: right;
	padding: 8px 8px;
	border-bottom: 8px solid var(--white);
	font-family: "Arial Narrow", sans-serif;
	font-size: 14px;
}

    /* Profile Headline, Featured Specs and Review Section */
.profilereview {
    flex: 75%;
    padding: 8px 40px 20px 10px;
}
h12 {
	text-align: left;
	font-family: "Arial Narrow", sans-serif;
	line-height: 1;	
	font-size: 24px;
	font-weight: bold;
	color: var(--mediumgray);
	}
span.typeofcarsubhead {
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 1.5;	
	font-size: 15px;
	font-weight: bold;
	color: var(--red);
}
.featuredspecscontainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 1%;
    width: 100%;
    margin: 15px 0px 25px 0px;
    max-height: 100px;
}
.featuredspecs {
    width: 32%;
    text-align: left;
	font-family: "Arial", sans-serif;
	line-height: 1.2;	
	font-size: 13px;
    height: 50px;
}
.featuredspecsvalue {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
}
.cardescription {
    font-family: "Verdana", sans-serif;
    line-height: 1.5;
    text-indent: 20px;
}


    /* Responsive Layout */
@media (max-width: 1200px) {
  .photocontainer {
    flex-direction: column;
    row-gap: 3.6%;
  }
  .mainphotocontainer {
    margin-bottom: 1.4%;
}
  .smallphotocontainer {
    flex-direction: row;
    column-gap: 1.4%;
}
.profilecontent {
    flex-direction: column-reverse;
    row-gap: 3.6%;
}
.featuredspecscontainer {
    max-height: 150px;
}
.featuredspecs {
    width: 49%;
}
    
}

    /* Fuel Cost Calculator */
.fuelcalculatorcontainer {
    width: 255px;
    font-family: "Verdana", sans-serif;
    margin: 18px 0px 0px 5px;
    border: 1px solid var(--lightgray);
    padding: 10px 10px 0px 10px;
}
.fuelcalclabel {
	text-align: right;
	font-size: 12px;
	color: var(--mediumgray);
    font-weight: bold;
}
.annual-miles, .electricity-rate {
    height: 25px;
    border: 1px solid var(--gray);
    background-color: var(--white);
    padding: 3px;
    resize: none;
    text-align: right;
    font-size: 11px;

    margin-bottom: 10px;
}
.annual-miles {
    width: 100px;
    margin-left: 33px;
}
.electricity-rate {
    width: 62px;
    margin-left: 8px;
}
.wattsMile {
    height: 0px;
    color: white;
    font-size: 0px;
    border: none;
}
.result {
    padding-top: 5px;
    width: 100%;
}
.fuelcalcbtn {
    background-color: var(--red);
    border: none;
    color: white;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    font-family: "Verdana", sans-serif;
    display: inline-block;
    font-size: 12px;
    width: 100%;
    font-weight: bold;
}
.fuelcost {
    margin-top: 10px;
    text-align: center;
    background-color: var(--blue);
    padding: 8px;
    height: 60px;
}
.fuelcostheader {
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.fuelcostresult {
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 1.6;
    font-size: 20px;
}

.fueldisclaimer {
    font-family: "Arial", sans-serif;
    font-style: italic;
	font-size: 10px;
	line-height: .6;
}


/* 2023 Car Profile Tiles Page CSS */
    /* Outside shadow box */
div.profileboxtiles {
    width: 300px;
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 30px 0px;
    border: 1px solid var(--lightgray);
    background-color: white;
    box-shadow: 6px 6px 10px var(--lightgray);
}

    /* Main image for profile tiles page */
.profileImageTiles {
    width: 100%; 
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 0;
    left: 0;
}

    /* Placement of Federal Tax Return Icon on top of Car Profile Photo */
.carTaxReturnTiles {
    position: absolute;
    top: 6px;
    left: 270px;
}

    /* Text container box for profiles tiles page */
.postTiles {
    margin: 0px;
    padding: 16px 20px 7px 20px;
    background-color: white;
}

    /* Car Year Mfg and Model Headline */
h11 {
	text-indent: 0;
	text-align: left;
	font-family: "Arial Narrow", sans-serif;
	line-height: 1.2;	
	font-size: 19px;
	font-weight: 600;
	color: var(--mediumgray);
	}	
	
    /* Electric or PHEV Subhead */
span.typeofcar {
	text-indent: 0;
	text-align: left;
	font-family: "Verdana", sans-serif;
	line-height: 2.1;	
	font-size: 12px;
	font-weight: bold;
	color: var(--red);
}

    /* Electric Mileage Bar - automatically calculated width */
.rangebar {
    container-type: inline-size;
    margin-top: -8px;
    background-color: var(--green);
    padding: 0px;
}

    /* Label for Electric Mileage Bar for PHEVs - short bars with text to the right of bar in bar color */
.electricrange {
  /* The default style */
    text-align: right; 
    font-family: "Verdana", sans-serif;
	line-height: 2;	
	font-size: 11px;
	font-weight: bold;
    padding: 2px 8px 2px 8px;
    color: var(--green); 
}

    /* Label for Electric Mileage Bar for EVs - long bars with text inside bar in white*/
@container (min-width: 50px) {
  .electricrange {
    width: 260px;
    text-align: left; 
    font-family: "Verdana", sans-serif;
	line-height: 2;	
	font-size: 11px;
	font-weight: bold;
    padding: 2px 8px 2px 8px;
    color: white; 
  }
}    

.filters {
    list-style-type:none;
    padding: 0;
    margin: 0;
}  

li {
  padding: 7px 0px 7px 0px;
}

.carprofileheader {
    display: flex;
    align-items: center;
    gap: 40px;
    }
    
.filtersdropbtn {
  background-color: var(--red);
  color: white;
  padding: 16px;
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  border: none;
  padding: 8px 30px;
  margin-bottom: 10px;
}

.filtersdropdown {
  position: relative;
  display: inline-block;
}

.filtersdropdown-content {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px var(--lightgray);
  z-index: 1;
}

.filtersdropdown-content a {
  font-size: 12px;
  font-family: "Verdana", sans-serif;
  color: var(--blue);
  padding: 10px 0px;
  text-decoration: none;
  display: inline;
  text-align: left;
}

.filtersdropdown-content a:hover {background-color: var(--white); color: var(--red);}

.filtersdropdown:hover .filtersdropdown-content {display: block;}

.filtersdropdown:hover .filtersdropbtn {background-color: var(--red);}


.carprofileheader {
    display: flex;
    align-items: center;
    gap: 30px;
    }
.filtersdropdown-content {
        padding-left: 8px;
    }
    

    
@media (max-width: 1170px) {
	.carprofileheader {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    height: 130px;
    }
	}







.surveyform {
    width: 100%;
}

.adminhelpimg {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--lightgray);
    background-color: var(--white);
    box-shadow: 6px 6px 10px var(--lightgray);
}



/* Event Calendar Styling */
    .attendance tr:nth-child(even) {background-color: var(--lightgray);}
    .attendance td {padding: 10px 10px;}
    ::-webkit-input-placeholder { /* Edge */color: var(--green); text-align: center;}
    :-ms-input-placeholder { /* Internet Explorer 10-11 */color: var(--green); text-align: center;}
    ::placeholder {color: var(--green); text-align: center;}
    .attendance input[type=text] {background-color: transparent; border: none; text-align: center; color: var(--green); font-family: "Verdana", sans-serif; font-size: 12px;}
    .attendance td, tr {border-style: none; margin: 0;}
    .attendance th {background-color: var(--darkblue); color: var(--white); font-size: 14px; padding: 10px 10px;}






/* Status Progress Box and Buttons */	

.progressbox {
	display: block;
	padding: 0px;
	width: 97%;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 0px;
}	

.progressButton {
	clear: both; 
	float: left; 
	margin-bottom: 10px;
}
	
.proheader {
	margin-bottom: 20px;
} 
	
.proparagraph {
	margin-top: 0px;
}








.sponsorlogo {
    height: 44px;
}






/* Event Check-in Screen Layout */

* {
  box-sizing: border-box;
}
.flex-container-1 {
  display: flex;
  flex-wrap: wrap;
  text-indent: 0;
  font-family: "Verdana", sans-serif;
  line-height: 1.5;	
  font-size: 12px;
  color: var(--mediumgray);
  margin-left: 15%;
  margin-right: 15%;
}

.flex-item-hleft {
  background-color: white;
  padding: 10px;
  flex: 50%;
}

.flex-item-hright {
  background-color: white;
  padding: 0px;
  flex: 50%;
  text-align: right;
}

.flex-item-all {
  background-color: white;
  padding: 10px;
  flex: 100%;
}

.flex-container-2 {
  display: flex;
  flex-wrap: wrap;
  text-indent: 0;
  font-family: "Verdana", sans-serif;
  line-height: 1.5;	
  font-size: 12px;
  color: var(--mediumgray);
  margin: 0;
}

.flex-item-left {
  background-color: white;
  padding: 0px;
  flex: 65%;
}

.flex-item-right {
  background-color: white;
  padding-left: 30px;
  flex: 35%;
  text-align: right;
}



/* Event Check-in Responsive layout */
@media (max-width: 1370px) {
    .flex-container-1 {
  margin: 15px;
}
  
}









/* Large */

	@media screen and (min-width: 1286px) {
	    .divPageTable {
	        width: 88%;
        }
	    
        .divtoptable {
	        width: 88%;
        }
        
        .adminPageTable {
	        width: 88%;
        }
        
	}
		
		
/* XLarge */

	@media screen and (min-width: 1799px) {
	    .divPageTable {
	        width: 80%;
        }
	    
        .divtoptable {
	        width: 80%;
        }
        
        .adminPageTable {
	        width: 80%;
        }
	}