@charset "UTF-8";
@font-face{font-family:DroidSerif; src:url(DroidSerif.ttf);}

html, body { height: 100%; overflow: auto; }

/* ============ Links ============ */
a:link, a:visited { color: #00ff00; text-decoration: none; }
a:hover, a:active { color: #00cc00; text-decoration: underline; }
#diffElements span a:link, #diffElements span a:visited { color: #00ff00; text-decoration: none; cursor: default; }
#diffElements span a:hover, #diffElements span a:active { color: #00cc00; text-decoration: none; cursor: default; }
#diffElements input, #diffElements select { width: 130px; }

/* ============ Base ============ */
body {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	background: #111;
	color: #fff;
	padding: 0;
	margin: 0;
}

/* ============ Section dividers ============ */
section {
	margin-bottom: 12px;
	border-bottom: 1px solid #333;
}
section span {
	color: #aaa;
	background: #2a2a2a;
	padding-right: 10px;
	font-family: DroidSerif;
	font-size: 14px;
	font-weight: normal;
}
ul hr { color: #333; background: #333; height: 1px; border: 0; }

/* ============ Tables (general) ============ */
table { width: 100%; }
table.action td:last-child { border-left: 1px solid #333; }
table.action th:last-child { border-left: 1px solid #333; }
table.userInput th:first-child { text-align: right; }
table.userInput td:first-child { text-align: right; width: 45%; padding: 3px; }
table.userInputFullPage td:first-child { width: 50%; text-align: right; padding: 3px; }
table.sll { padding-bottom: 40px; }

/* ============ Data tables (table.res) ============ */
table.res {
	border-collapse: collapse;
	table-layout: fixed;
}
table.res th {
	text-align: center;
	padding: 5px;
	background: #1a1a1a;
	color: #aaa;
	border-bottom: 2px solid #00ff00;
}
table.res th[data-sort] { cursor: pointer; }
table.res tr { border-bottom: 1px solid #333; }
table.res tr:nth-child(odd) { background: #222; }
table.res tr:nth-child(even) { background: #1a1a1a; }
table.res tr:nth-child(even):hover { background: #2a3a2a; }
table.res tr:nth-child(odd):hover { background: #2a3a2a; }
table.res td {
	padding: 5px;
	text-align: center;
	width: auto;
	word-wrap: break-word;
	color: #fff;
}
table.res th.sorting-asc, table.res th.sorting-desc {
	background: #333;
	border-radius: 5px 5px 0 0;
}

/* ============ Charge point details table ============ */
table.cpd {
	border-collapse: collapse;
	width: 70%;
}
table.cpd th {
	text-align: left;
	padding: 5px 5px 5px 15px;
	background: #1a1a1a;
	color: #aaa;
	border-bottom: 2px solid #00ff00;
}
table.cpd tr { border-bottom: 1px solid #333; }
table.cpd td { padding: 5px; text-align: center; color: #fff; }
table.cpd td:first-child {
	text-align: left;
	width: 200px;
	padding-left: 15px;
	background: #222;
}

/* ============ Form elements ============ */
input, select, textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
select {
	width: 70%;
	font-size: 12px;
	margin: 1px 0 1px 0;
	padding: 2px;
	outline: none;
	border: 1px solid #444;
	border-radius: 0;
	-webkit-border-radius: 0;
	background: #1a1a1a;
	color: #fff;
}
select option { font-size: 12px; background: #1a1a1a; color: #fff; }
input[type="text"], input[type="number"], input[type="password"], input[type="text"].dateTimePicker {
	appearance: none;
	-webkit-appearance: none;
	margin: 1px 3px 1px 0;
	padding: 3px;
	border: 1px solid #444;
	border-radius: 0;
	width: 70%;
	font-size: 12px;
	background: #1a1a1a;
	color: #fff;
}
input[type="text"]::placeholder, input[type="password"]::placeholder { color: #666; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
	border-color: #00ff00;
	outline: none;
}
textarea {
	margin: 1px 3px 1px 0;
	padding: 3px;
	border: 1px solid #444;
	border-radius: 0;
	width: 70%;
	height: 6em;
	font-size: 12px;
	font-family: Verdana, sans-serif;
	resize: vertical;
	background: #1a1a1a;
	color: #fff;
}
input[type="checkbox"] { accent-color: #00ff00; }
input[type="file"] { color: #aaa; }

/* ============ Buttons ============ */
input[type="button"] {
	margin: 0 0 5px 5px;
	width: 100px;
	font-size: 12px;
	height: 25px;
	border-radius: 3px;
	background: #333;
	border: 1px solid #555;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
input[type="button"]:hover { background: #444; }
input[type="button"]:active, input[type="submit"]:active { position: relative; top: 1px; }
input[type="submit"] {
	min-width: 100px;
	font-size: 12px;
	background: linear-gradient(to bottom, #00dd00, #00aa00);
	color: #000;
	cursor: pointer;
	height: 25px;
	border: 0;
	border-radius: 3px;
	font-weight: bold;
}
input[type="submit"]:hover { background: linear-gradient(to bottom, #00ff00, #00cc00); }
input[type="submit"].blueSubmit { background: #397ac2; color: #fff; font-weight: normal; }
input[type="submit"].blueSubmit:hover { background: #1e63b0; }
input[type="submit"].redSubmit { background: #c14848; color: #fff; font-weight: normal; }
input[type="submit"].redSubmit:hover { background: #af3232; }
input:disabled { background-color: #333; color: #666; }
input[type="submit"]:disabled, input[type="submit"]:hover:disabled, input[type="submit"]:active:disabled {
	cursor: not-allowed;
	background: linear-gradient(to bottom, #555, #333);
	color: #888;
	font-weight: normal;
}
#add_space { padding-top: 20px; }
.add-margin-bottom { margin-bottom: 20px; }
.submit-button { margin-top: 20px; }
.inline { display: inline-block; }

/* ============ Top banner & menu ============ */
.top-banner {
	width: 100%;
	height: 80px;
	border-radius: 0;
	background: #111;
	border-bottom: 1px solid #222;
}
.top-menu {
	height: 35px;
	border-radius: 0;
	background: linear-gradient(to right, #0a2a0a, #1a1a1a);
	border-bottom: 1px solid rgba(0, 255, 0, 0.2);
}
.container {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	*zoom: 1;
}

/* ============ Navigation ============ */
ul.navigation {
	color: #ccc;
	margin: 0;
	position: relative;
	float: right;
}
ul.navigation li {
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}
ul.navigation li a {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 35px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}
ul.navigation li a:link, ul.navigation li a:visited { color: #ccc; }
ul.navigation li a:hover, ul.navigation li a:active { color: #00ff00; }
ul.navigation li:hover > ul { visibility: visible; opacity: 1; }
ul.navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 99999;
	text-align: center;
}
ul.navigation ul li { background: #1a2a1a; width: 100%; }
ul.navigation ul li:hover { background: #0a2a0a; }
ul.navigation ul li a {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	padding: 0;
}

/* ============ Left sidebar menu ============ */
.left-menu {
	float: left;
	width: 230px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.left-menu ul { list-style: none; margin: 0; padding: 0; }
.left-menu li a {
	color: #aaa;
	display: block;
	voice-family: inherit;
	text-decoration: none;
	outline: none;
	background: #2a2a2a;
	padding: 7px;
}
.left-menu li a:link { color: #aaa; background: #2a2a2a; }
.left-menu li a:hover {
	color: #00ff00;
	background: #333;
	border-radius: 2px 0 0 2px;
}
.left-menu li a.highlight {
	color: #00ff00;
	background: #333;
	border-left: 3px solid #00ff00;
	border-radius: 2px 0 0 2px;
}

/* ============ Content areas ============ */
.main { height: auto; min-height: 100%; }
.main-wrapper { height: auto; }
.content {
	position: relative;
	width: 80%;
	border: 1px solid #333;
	border-radius: 4px;
	background: #2a2a2a;
	margin: 12px auto;
	padding: 12px;
	color: #fff;
}
.op-content {
	min-height: 350px;
	margin: 0 0 0 230px;
	padding: 0 0 0 12px;
	border-left: 1px solid #333;
}
.op15-content {
	min-height: 470px;
	margin: 0 0 0 230px;
	padding: 0 0 0 12px;
	border-left: 1px solid #333;
}
.op16-content {
	min-height: 800px;
	margin: 0 0 0 230px;
	padding: 0 0 0 12px;
	border-left: 1px solid #333;
}
.right-content { margin: 0 0 0 230px; border-left: 1px solid #333; padding-left: 12px; }
.right-content div { display: none; }
.right-content div:first-child { display: block; }

/* ============ Alert boxes ============ */
.info, .warning, .error { text-align: left; border: 1px solid; margin-bottom: 10px; padding: 15px 30px; }
.info { color: #66aaff; background-color: #1a2a3a; border-color: #335577; }
.warning { color: #ffcc00; background-color: #3a3000; border-color: #665500; }
.error {
	color: #ff6666;
	background-color: #3a1a1a;
	border: 1px solid #663333;
	border-radius: 4px;
	position: relative;
	width: 80%;
	margin: 12px auto;
	padding: 12px;
}

/* ============ Tooltips ============ */
a.tooltip { color: #aaa; position: relative; text-decoration: none; }
a.tooltip span { display: none; }
a.tooltip:hover { cursor: default; }
a.tooltip:hover span {
	font-family: Verdana, sans-serif;
	position: absolute;
	z-index: 1001;
	display: block;
	width: 250px;
	top: 2em;
	left: 1em;
	border: 1px solid #444;
	color: #ccc;
	background-color: #2a2a2a;
	font-size: 12px;
	padding: 0.5em;
}

/* ============ Dashboard tiles ============ */
.tileWrapper { text-align: center; }
.tileRow1 { width: 220px; }
.tileWrapper a:link, .tileWrapper a:visited {
	margin: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	border: 1px solid #333;
	border-left: 3px solid #00ff00;
	border-radius: 8px;
	display: inline-block;
	box-shadow: none;
	font-size: 14px;
	font-weight: bold;
	vertical-align: top;
	text-decoration: none;
	background-color: #2a2a2a;
	color: #fff;
}
.tileWrapper a:hover, .tileWrapper a:active {
	background-color: #333;
	border-color: #00ff00;
}
span.baseTable { display: table; text-align: left; width: 100%; margin-top: 10px; }
span.baseRow { display: table-row; font-weight: normal; line-height: 30px; }
span.baseCell { display: table-cell; }
span.baseCell:first-child { width: 62%; text-align: right; }
span.baseCell:nth-child(2) { padding-left: 5px; }
span.base { margin-top: 10px; margin-bottom: 10px; display: block; font-weight: normal; }
span.formatNumber {
	font-size: 18px;
	color: #00ff00;
	font-weight: bold;
}

/* ============ Logo ============ */
.logo-link {
	display: flex;
	align-items: center;
	text-decoration: none !important;
	height: 80px;
}
.logo-icon {
	height: 40px;
	width: auto;
	margin-right: 8px;
}
.logo-text {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	letter-spacing: 1px;
	margin-right: 16px;
}
.logo-subtitle {
	font-size: 13px;
	color: #888;
	letter-spacing: 2px;
}

/* ============ Language Switcher ============ */
.lang-switch {
	display: inline-block;
	vertical-align: middle;
	padding: 0 10px;
}
.lang-switch select {
	width: auto;
	min-width: 70px;
	font-size: 11px;
	padding: 2px 4px;
	margin: 0;
	border: 1px solid #444;
	border-radius: 3px;
	background: #222;
	color: #aaa;
	cursor: pointer;
	line-height: 20px;
	height: 24px;
}
.lang-switch select:hover { background: #333; color: #fff; }
.lang-switch select option { background: #222; color: #aaa; }

/* ============ Login Page ============ */
body.login-page {
	background: #111 url('../images/login-bg.png') center center / cover no-repeat fixed;
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-wrapper {
	text-align: center;
	width: 360px;
}
.login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}
.login-logo .logo-icon {
	height: 50px;
	margin-right: 8px;
}
.login-logo .logo-text {
	font-size: 32px;
	font-weight: bold;
	color: #fff;
}
.login-subtitle {
	color: #888;
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 30px;
}
.login-card {
	background: rgba(30, 30, 30, 0.85);
	border: 1px solid #333;
	border-radius: 12px;
	padding: 30px 30px 25px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.login-title {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 25px 0;
	text-align: center;
}
.login-field { margin-bottom: 16px; }
.login-field input[type="text"],
.login-field input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 6px;
	color: #fff;
	outline: none;
	box-sizing: border-box;
}
.login-field input[type="text"]::placeholder,
.login-field input[type="password"]::placeholder { color: #666; }
.login-field input[type="text"]:focus,
.login-field input[type="password"]:focus { border-color: #00ff00; }
.login-submit {
	width: 100% !important;
	padding: 10px !important;
	font-size: 14px !important;
	font-weight: bold;
	color: #000;
	background: linear-gradient(to bottom, #00ff00, #00cc00) !important;
	border: none;
	border-radius: 6px !important;
	cursor: pointer;
	height: auto !important;
	min-width: auto !important;
}
.login-submit:hover {
	background: linear-gradient(to bottom, #33ff33, #00ff00) !important;
}
.login-error {
	color: #ff6666;
	background: rgba(60, 20, 20, 0.9);
	border: 1px solid #663333;
	border-radius: 6px;
	padding: 10px;
	margin-bottom: 16px;
	font-size: 12px;
}

/* ============ jQuery UI Dark Override ============ */
.ui-widget-content {
	border-color: #444;
	background: #2a2a2a;
	background-image: none !important;
	color: #fff;
}
.ui-widget-content a { color: #00ff00; }
.ui-widget-header {
	border-color: #333;
	background: #1a1a1a;
	background-image: none !important;
	color: #fff;
}
.ui-widget-header a { color: #fff; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border-color: #444;
	background: #333;
	background-image: none !important;
	color: #aaa;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border-color: #00ff00;
	background: #333;
	background-image: none !important;
	color: #00ff00;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border-color: #00ff00;
	background: #00aa00;
	background-image: none !important;
	color: #000;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border-color: #00ff00;
	background: #1a3a1a;
	background-image: none !important;
	color: #00ff00;
}
.ui-datepicker { background: #2a2a2a; border: 1px solid #444; }
.ui-datepicker td span, .ui-datepicker td a { color: #ccc; }
.ui-datepicker th { color: #888; }
.ui-timepicker-div .ui-widget-header { background: #1a1a1a; }
.ui-timepicker-div dl dt { color: #aaa; }
.ui-timepicker-div dl dd { color: #fff; }