/*******************************************************************************
**
** evportal.css
**
** Copyright 2017-2019 BCIT <smartgrid@bcit.ca>
**
** By browsing, downloading, accessing or using this Vehicle Charging Station
** Software, you agree or continue to agree, as the case may be, to the BCIT
** Vehicle Charging Station Software Terms of Use ("Terms of Use") the full text
** of which is available at https://files.mgrid-bcit.ca/OpenOCPP/license.txt
*/

/*******************************************************************************
** Full reset and some global things.
** http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

*
{
	outline: none;
	margin: 0;
	border: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Sans-serif;
}

/* When adding padding to a box it changes the width of the box.
** https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/

*, *::before, *::after
{
	box-sizing: inherit;
}

/* Google's default formatting for Charts.  Was getting overwritten by *{}. */

svg g text
{
	font-family: Arial;
}

/* 100% height on body fixes issues with CSS gradients on the page body. */

html
{
	height: 100%;
	box-sizing: border-box;
}

body
{
	background-color: white;
	text-align: left;
	color: black;
}

main
{
	display: block; /* http://html5doctor.com/the-main-element/ */
}

button
,#hamburger
{
	cursor: pointer;
}

button:disabled
{
	cursor: auto;
}

/* Make links look a little bit less like links. */

a
{
	color: #38ACEC;
	text-decoration: none;
}

a:hover
{
	color: #687FC0;
}

.vspace
{
	height: 25px;
}

.hidden_form
{
	display: none;
}

/*******************************************************************************
** header.html
*/

#page
{
	display: flex;
	flex-direction: row;
}

#a2hs-prompt
{
	display: none;
	margin: 10px 15px 10px 15px;
	padding: 10px 0px 10px 0px;
	background-color: #008000;
	text-align: center;
	color: white;
}

/*******************************************************************************
** menu.html
**
** https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/

#side_menu
{
	order: 1;
	width: 128px;
}

#menu_header
{
	width: 128px;
	height: 128px;
	background: white url("logo-128.png") 0px 0px no-repeat;
}

#menu
{
	list-style-type: none;
/*	width: 125px;*/
	margin: 5px 0px 0px 0px;
	padding: 50px 0px 50px 0px;
	background-color: #7EB91F;
}

#menu li
{
	font-size: 0.75em;
	font-weight: bold;
}

#menu li a
,#close_menu
{
	display: block;
	padding: 10px 0px 10px 10px;
	color: white;
	text-decoration: none;
}

#menu li:hover
,#menu li a:hover
,#close_menu:hover
{
	background-color: #88D211;
	color: black;
}

#hamburger
,#close_menu
{
	display: none;
}

/*******************************************************************************
** Main contents
*/

#contents
{
	order: 2;
	width: 100%;
}

header
{
	margin: 0px 0px 15px 15px;
}

main
{
	margin: 0px 15px 0px 15px;
}

main h1
{
	background-color: #7EB91F;
	margin: 0px 0px 15px 0px;
	padding: 6px 0px 6px 5px;
	color: white;
	font-size: 1.0em;
}

main h1.h1x
{
	margin-top: 25px;
}

main h2
{
	font-size: 1.25em;
	padding: 0px 0px 15px 0px;
}

main h3
{
	font-size: 1.25em;
	padding: 0px 0px 15px 0px;
	color: red;
}

main p
{
	margin: 0px 0px 5px 0px;
	font-size: 0.75em;
}

/* Warn customers when balance is below certain values. */
#paywarn
{
	margin: 10px 0px 0px 0px;
	padding: 5px 0px 5px 5px;
	background-color: #FFA500;
	color: #000000;
	font-weight: bold;
}

.research_stmt
,.pp
{
	font-size: 1.0em;
}

.indent
{
	margin-left: 15px;
}

/*******************************************************************************
** footer.html
*/

#copyright_menu
{
	display: block;
	margin-left: 3px;
	font-size: 0.75em;
}

#copyright_foot
{
	display: none;
}

/*******************************************************************************
** error_page.html
*/

/*******************************************************************************
** Forms.
*/

hr
{
	border: 2px dashed cyan;
	margin: 15px 0px 15px 0px;
}

main form
{
/*outline: 2px solid purple;*/
	display: inline-block;
	margin-top: 18px;
}

main form label
{
	display: inline-block;
	width: 175px;
	padding-top: 2px;
	vertical-align: top;	/* Works w/ cells and inline, not block */
	font-weight: bold;
}

main form input
,select
{
	width: 205px;
	border: 1px solid black;
	padding: 1px 1px 2px 2px;
	background-color: #F6F6F6;
}

.measurement label
{
	display: inline-block;
	width: 125px;
	padding-top: 2px;
	vertical-align: top;	/* Works w/ cells and inline, not block */
	font-weight: bold;
}

.measurement input
{
	width: 205px;
	border: 1px solid black;
	padding: 1px 1px 2px 2px;
	background-color: #F6F6F6;
}

button
{
	display: inline-block;
	margin: 2px 0px 2px 0px;
	padding: 4px 16px;
	background-color: #7EB91F;
	color: white;
	text-align: center;
	font-size: 0.75rem; /* em = multiply, rem = constant size */
	font-weight: bold;
}

button:hover
{
	color: black;
}

.submit_but
{
	display: block;
	margin: 2px auto 2px 0px;
}

.submit_but:disabled
{
	background-color: #666666;
	color: #808080;
}

.msg
,.pmsg
,.error
,.motd
{
	margin: 15px 0px 15px 75px;
	color: #008000;
	font-size: 1.25em;
	font-weight: bold;
}

.pmsg
{
	margin-left: 0px;
}

.error
{
	color: #B22222;
}

/* Message Of The Day */

.motd
{
	border: 5px dotted #C060C0;
	margin-left: 60px;
	padding: 15px 15px 15px 15px;
	color: #6060C0;
}

/* Registration. */

#registration_cb input
{
	width: 25px;
}

#registration_cb label
{
	width: auto;
}

/*******************************************************************************
**	Radio buttons are forms, but they are quite different from regular forms.
*/

.radios .r
{
	margin-bottom: 20px;
	font-size: 0.75em;
}

.radios input[type="radio"]
{
	width: auto;
	vertical-align: bottom;
	cursor: pointer;
}

.radios input[type="radio"]:focus
{
	outline: 1px dotted black;
}

.radios label
{
	width: auto;
	vertical-align: bottom;
}

/*******************************************************************************
** Google Visualization Tables are a whole special thing to work with.
*/

td.google-visualization-table-td input[type=text]
{
	outline: 2px none;				/* 3px "regular" border */
	border: 1px solid black;
	padding: 1px 1px 2px 2px;
	background-color: #F6F6F6;
}

td.google-visualization-table-td select
{
	width: 300px;
}

/* To help deal with justification. */

td.google-visualization-table-td .box
{
	display: flex;
	justify-content: center;
}

td.google-visualization-table-td input[type=checkbox]
{
	background-color: #F6F6F6;
}

td.google-visualization-table-td input[type=text].input_err
{
	outline: 2px solid #B22222;	/* 3px *error* border */
	border-color: #B22222;
}

/*******************************************************************************
** Tabbed pages.
** https://codepen.io/oknoblich/pen/tfjFl
*/

#tabber
{
	padding-top: 10px;
}

#tabber section
{
	display: none;
	padding-top: 10px;
	border-top: 1px solid #7EB91F;
}

/* Move the radio buttons FAR away.
** If they are display:none then arrow key navigation doesn't work.
*/

#tabber input[name="tabs"]
{
  position: absolute;
  left: -9999px;
}

#tabber .tab_top
{
	display: inline-block;
	margin-bottom: -1px;
	padding: 15px 15px;
	font-weight: bold;
	text-align: center;
	color: #7EB91F;
	border: 1px solid transparent;	/* Helps hide movement of labels */
}

#tabber .tab_top:hover
{
	color: #88D211;
	cursor: pointer;
}

#tabber input:checked + .tab_top
{
	color: black;
	border: 1px solid #7EB91F;
	border-top: 5px solid #88D211;
	border-bottom-color: white;
}

#tabber #tab1:checked ~ #content1,
#tabber #tab2:checked ~ #content2,
#tabber #tab3:checked ~ #content3,
#tabber #tab4:checked ~ #content4,
#tabber #tab5:checked ~ #content5
{
	display: block;
}

/*******************************************************************************
** Privacy.
*/

#privacy
{
	font-size: 1.25rem;
}

#privacy p
{
	max-width: 480px;
	margin-bottom: 25px;
}

#privacy address
{
	margin: -15px auto 25px 25px;
	font-size: 1.0rem;
}

#privacy address .space
{
	height: 10px;
}

/*******************************************************************************
** Map.
*/

.map
{
	outline: 1px solid black;
	width: 100%;
	height: 600px;
	position: relative;
}

.clustTxt
{
	position: relative;
	top: 6px;
}

.infowindow
{
	padding-bottom: 1px;	/* Bottom of InfoWidow is clipped by 1px */
	color: black;
	text-align: center;
	font-size: 12px;
}

.iw_title
{
	font-size: 18px;
	font-weight: bold;
	text-decoration: underline
}

.iw_desc
{
	font-size: 14px;
	font-weight: bold;
}

.infowindow em
{
	color: salmon;
	font-weight: bold;
	font-style: italic;
}

.infowindow table
{
	text-align: left;
}

.infowindow table	th
{
	padding-right: 15px;
	text-align: right;
}

.infowindow form
{
	display: block;
	min-width: 0px;
	margin-top: 0px;
}

#map_err
{
	height: 1.0em;
	outline: 1px solid red;
	padding: 5px;
	color: red;
	font-size: 16px;
}

/*******************************************************************************
** Shared dashboard stuff between EVportal and Admin.
*/

/* DEBUG */
 #dashboard_Ports
,#dashboard_CP
,#dashboard_summary
,#energy_icon
,#time_icon
,#dashboard_Sessions
,#dashboard_Energy
,#dashboard_Revenue
,#dashboard_Duration
,#dashboard_Idle
,#dashboard_Vehicles
,#dashboard_VehiclesEnergy
,#dashboard_Hourly
{
/*outline: 1px solid red;*/
}

/* EVportal */

#dashboard_evportal
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#dashboard_start		{ order: 1; /*outline: 1px solid green;*/ }
#Gdiv_Energy			{ order: 2; }
#Gdiv_Power				{ order: 3; }
#Gdiv_SoC				{ order: 4; }
#dashboard_summary
{
	order:5;
	display: flex;
	flex-direction: row;
}

#energy_icon	{ order:  1; }
#time_icon		{ order:  2; }

#startcharging_form
,#stopcharger_form
,#unplug_warning
,#Gdiv_Energy
,#Gdiv_Power
,#Gdiv_SoC
{
	margin-top: 18px;
	margin-right: 25px;
}

#unplug_warning
{
	color: #336600;
	font-size: 1.25em;
	font-weight: bold;
}

/* Admin */

#dashboard_admin
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Admin */
#dashboard_CP					{ order:  3; }
#dashboard_Ports				{ order:  4; }
#dashboard_Sessions			{ order:  5; }
#dashboard_Energy				{ order:  6; }
#dashboard_Revenue			{ order:  7; }
#dashboard_Duration			{ order:  8; }
#dashboard_Vehicles			{ order:  9; }
#dashboard_VehiclesEnergy	{ order: 10; }
#dashboard_Hourly				{ order: 11; }
#dashboard_Idle				{ order: 12; }

/* Shared */

#energy_icon
,#time_icon
{
	display: inline-block;
	margin: 18px 25px 15px 0px;
	text-align: center;
	font-size: 0.75em;
}

#energy_icon img
,#time_icon img
{
	display: block;
	margin: 0px auto 0px auto;
}

#time_icon
{
	margin-right: 0px;
}

/*******************************************************************************
** Some forms are more table-like than just a bunch of boxes to fill in.
*/

.table_form form
{
	display: block;
	margin: 4px 0px 0px 0px;
}

.table_form table
{
	border-collapse: collapse;
}

.table_form th
{
	width: 130px;
}

.table_form input
{
	width: 125px;
}

.table_form input
{
	margin-right: 5px;
	vertical-align: top;
}

.table_form button
{
	display: inline;
	margin: 0px -1px 0px 0px;
	padding: 3px 16px 3px 16px;
}

/*******************************************************************************
** Special stuff that is only for debug/test things.
*/

#dr_info
{
	margin-top: 25px;
}

#dr_summary,
#dr_summary td
{
	border: 1px solid black;
}

#dr_summary
{
	border-collapse: collapse;
}

#dr_summary td
{
	padding: 5px;
}

#dr_export
{
	margin-top: 25px;
}

#dr_graph
{
}

/******************************************************************************/
@media screen and (max-width: 945px)
{

/* Make tabbed labels smaller. */

#tabber .tab_top
{
	font-size: 0.75em;
}

/* Make Admin go from two columns down to one column. */

#dashboard_admin
{
	grid-template-columns: 1fr;
}

/* Change order of things so Charge Points and Ports are right at the top. */

#dashboard_admin #energy_icon			{ order:  3; }
#dashboard_admin #time_icon			{ order:  4; }
#dashboard_admin #dashboard_CP		{ order:  1; }
#dashboard_admin #dashboard_Ports	{ order:  2; }


} /* X < 936 */

/******************************************************************************/
@media screen and (max-width: 817px)
{
} /* X < 818 */

/******************************************************************************/
@media screen and (max-width: 799px)
{

/* Hide the tabbed label images. */

#tabber .tab_top img
{
	display: none;
}

} /* X < 800 */

/******************************************************************************/
@media screen and (max-width: 767px)
{
} /* X < 768 */

/******************************************************************************/
@media screen and (max-width: 714px)
{

/* Bring back the tabbed label images and hide the text. */

#tabber .tab_top
{
	padding: 15px 20px;
}

#tabber .tab_top img
{
	display: inline-block;
}

#tabber .tab_top span
{
	display: none;
}

} /* X < 715 */

/******************************************************************************/
@media screen and (max-width: 545px)
{

/* Put input boxes below the labels. */

main form label
{
	display: block;
}

/* Except for radio buttons. Those can stay. */

.radios label
{
	display: inline-block;
}

.msg
,.error
,.motd
{
	margin-left: 15px;
}

} /* X <= 545 */

/******************************************************************************/
@media screen and (max-width: 479px)
{

#page
{
	flex-direction: column;
}

#menu_header
,#menu
,header
{
	display: none;
}

#hamburger
{
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 31px;
	height: 31px;
	background-color: #7EB91F;
}

#hamburger div
{
	width: 80%;
	height: 15%;
	background-color: white;
	border-radius: 20px;
	margin: 14% 10% 14% 10%;
}

#menu
{
	position: absolute;
	width: 100%;
	min-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index: 1;
}

#menu li
{
	font-size: 1.5em;
}

#close_menu
{
	display: block;
	text-align: right;
	padding: 0px 15px 0px 0px;
}

main
{
	margin: 0px 0px 0px 0px;
}

.msg
,.error
,.motd
{
	margin-left: 5px;
}

#copyright_menu
{
	display: none;
}

#copyright_foot
{
	display: block;
	border-top: 1px solid black;
	font-size: 0.75em;
}

} /* 0 <= X < 480 */