/**
 * html5layout.css
 * @author Trian Karayiannis
 * This file contains the basic definitions for elements structured according to my UI framework
 */

@media screen, print {
	
	/* --------- STRUCTURAL ELEMENTS & SECTIONING -------------- */
	
	html, body {
		font-family: Ubuntu, Arial, sans-serif;
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		
		overflow: auto;
		display: flex;
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	header {
		min-height: 36px;
	}
	footer {
		--height: 1.8em;
		min-height: var(--height);
		line-height: var(--height);
		box-sizing: border-box;
	}
	main {
		display: flex;
		flex-direction: row;
		flex: auto;
		border-width: 0;
		overflow: hidden;
		box-sizing: border-box;
	}
	nav {
		width: 200px;
		min-width: 50px;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	article, .container {
		display: flex;
		flex: auto;
		overflow-x: auto;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 1px; /* fixes a display error that otherwise makes these overflow 1px */
	}
	
	.floating-window {
		--default-width: 290px;
		--default-height: 80%;
		width: var(--default-width);
		min-width: var(--default-width);
		max-width: calc(2* var(--default-width));
		height: var(--default-height);
		max-height: var(--default-height) !important;
		right:10px;
		top: 40px;
		cursor: move;
		border: 2px solid var(--dark-blue);
		border-radius: 0.3em;
		box-sizing: border-box;
		position: absolute !important;
		z-index: 10;
		background-color: var(--grayscale-d);
		color: var(--body-text-color);
		display: flex;
		display: none;
		flex-direction: column;
		align-items: stretch;
	}
	.floating-window-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	summary {
		font-weight: bold;
		cursor: pointer;
		font-size: 1.0em;
		padding: 0.2em;
	}
	#body_top_level_container {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100%;
	}
	.top-level-container {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		flex-grow: 100;
		max-height: 100%;
	}
	#viewPane-container {
		flex-grow: 20;
		min-height: 100%;
		max-height: 100%;
		height: 100%;
	}
	.viewPane {
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display:none;
	}
	.flex-viewPane {
		display: flex;
		flex-direction: column;
		flex: 50 0 auto;
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}
	.content-expandable {
		flex: auto;
	}
	.panel {
		padding: 0.6em;
		border-radius: 0.2em;
		border: 1px solid transparent;
	}
	.navbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-flow: row nowrap;
		position: inherit;
		padding: 0 !important;
		text-align: left !important;
		width: 100%;
	}
	.navbar > * {
		margin: 0.4em !important;
	}
	.navbar .button {
		border-width: 0;
	}
	.navbar .button[role=link2view] {
		display: inline-block;
		padding: 0.2em 0.4em;
		border-radius: 0.3em;
	}
	.navgroup {
		display: flex;
		align-items: center;
	}
	.navbar .navgroup {
		flex: 0 1 auto;
		align-self: auto;
		margin: 0.5em !important;
	}
	.flex-toolbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 3px;
		outline: 1px solid;
		box-sizing: border-box;
	}
	.toolbar {
		padding: 0 !important;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.toolbar > * {
		margin: 0.4em 0.4em !important;
	}
	
	.toolbar-inner-group {
		border: 1px solid transparent;
		padding: 0.3em;
		margin: 0 0.2em;
	}
	
	.section, .subsection {
		font-weight: bolder;
		letter-spacing: 0.05em;
		padding-top: 0.5em;
	}
	.section {
		font-size: 1.4em;
	}
	.subsection {
		font-size: 1.2em;
	}
	.divider-lr {
		cursor: col-resize;
		width: 6px;
		min-width: 6px;
	}
	.divider-tb {
		cursor: row-resize;
		height: 6px;
		min-height: 6px;
	}
	.bg_disabled {
		cursor: default;
	}
	#major_errors {display:none;}
	
	/* -------------- GENERIC DEFINITIONS ---------- */
	
	[data-show-if-badge] {display: none;}
	
	.badge_level1, .badge_level2, .badge_level3, .badge_level4 {
		border-radius: 2em;
		display: inline-block;
		padding: 0.5em 0.7em;
	}
	.hidden {display:none;}
	.w100 {width: 100%;box-sizing: border-box;}
	.left {text-align: left;}
	.center {text-align: center;}
	.right {text-align: right;}
	.sml9 {font-size: 0.9em;}
	.sml8 {font-size: 0.8em;}
	.sml7 {font-size: 0.7em;}
	.sml6 {font-size: 0.6em;}
	.sml0 {font-size: 1.0em;}
	.lrg0 {font-size: 1.0em;}
	.lrg1 {font-size: 1.1em;}
	.lrg2 {font-size: 1.2em;}
	.lrg3 {font-size: 1.3em;}
	.lrg4 {font-size: 1.4em;}
	.lrg5 {font-size: 1.5em;}
	.lrg6 {font-size: 1.6em;}
	.block {display: block;}
	.bold {font-weight: bold;}
	.bsp0 {border-spacing: 0;}
	.no-padding {padding: 0;}
	.padding-thin {padding: 0.3em 0.3em 0.2em;}
	.padding-mid {padding: 0.6em;}
	.padding-thick {padding: 0.9em;}
	.nowrap, .no_wrap {white-space: nowrap;}
	.mono {font-family: Consolas, 'Courier New', monospace;}
	.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.flex-start {
		align-content: flex-start;
		justify-content: flex-start;
	}
	.flex-end {
		display: flex;
		align-content: flex-end;
		justify-content: flex-end;
	}
	.flex-row, .flex-column {
		display: flex;
		flex-direction: row;
	}
	.flex-column {
		flex-direction: column;
	}
	.flex-space-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.placeholder-textbox,
	.text-outlined {
		display:flex;
		align-items: center;
		justify-content: center;
		font: 700 17pt 'Helvetica Neue', sans-serif;
		height:100%;
	}
	.not-applicable-yet {
		color: var(--dark-red) !important;
	}
	
	
	/* --------------- APP MAIN MENU --------------- */
	
	#vp_00 .link2view {
		font-size: 1.2em;
		font-weight: bold;
		padding: 0.8em 0.6em !important;
		cursor: pointer;
	}
	#vp_00 .header2 {
		text-align: center;
		margin-top: 2em;
	}
	.home_screen_menu{
		margin: 20px 10px;
		border: 1px solid transparent;
		border-radius: 6px;
		width: 90%;
		border-spacing: 0;
	}
	.home_screen_menu th {
		width: 20%;
		max-width: 22%;
		text-align: right;
		padding: 1em;
		vertical-align: middle;
		border-spacing: 0 !important;
		}
	.home_menu {
		border-spacing: 0;
		}
	.home_screen_menu.section {
		font-weight: bold;
		padding: 0.5em 1em;
		text-align: center;
		}
	.home_screen_menu.info {
		font-weight: normal;
		padding: 0.5em 1em;
		font-size: 0.8em;
		text-align: center;
		}
	.home_screen_menu.header2 {
		text-align: center;
		margin-top: 2em;
		}
	.home_screen_menu.link2view {
		font-size: 1.2em;
		font-weight: bold;
		border: 1px solid transparent;
		padding: 0.8em 0.6em !important;
		}
	.link2view.work-in-progress {background-color: var(--pale-light-purple);}
	.link2view.future-feature {background-color: var(--pale-orange);}
	.link2view.work-in-progress .link2viewTitle:after {content:" (υπό ανάπτυξη)";}
	.link2view.future-feature .link2viewTitle:after {content:" (στα προσεχώς)";}
	.home_screen_menu .link2view .link2viewTitle {
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: space-between;
	}
	.home_screen_menu .link2view .link2view-counter-bubble {
		display: none;
		background-color: var(--dark-red);
		color: var(--grayscale-f);
		padding: 0.5vw 0.5vw 0.4vw;
		border-radius: 0.8vw;
		font-size: 0.8em;
		font-family: monospace, Monospaced;
		min-width: 2.3vw;
		height: 2.3vw;
		box-sizing: border-box;
	}
	#vp_00 .link2viewInfo {
		font-size: 0.8em;
	}
	
	.stacking-horizontal {
		display: flex;
		flex-direction: row;
	}
	.stacking-vertical {
		display: flex;
		flex-direction: column;
	}
	
	.home_screen_menudiv.link2view {
		/*margin: 2px;*/
		}
	.mainTable {
		outline: 1px solid;
		border-spacing: 0;
		width: 95%;
		margin: 10%;
		}
	.mainTable td {
		padding: 0.6em 1em 0.5em;
		text-align: center;
		}
	.mainTable .link2view {
		cursor: pointer;
		font-weight: bold;
		font-size: 1.2em;
		}
	.link2view.ui-draggable-dragging {
		max-height: 100px;
		}
	.link2view.ui-draggable-dragging .dim {
		text-overflow: ellipsis;
		}
	
	#module_shortcuts {
		display:flex;
		flex-direction: row;
		overflow-y: auto;
		flex-grow:0;
		background: var(--purple);
		min-height:25px;
	}
	#module_shortcuts .link2view {
		font-size: 0.8em;
		max-width: 120px;
		display: inline-flex;
		position: static !important;
		height: auto !important;
		border: 1px solid transparent;
		padding: 4px;
		}
	.link2view.ui-draggable-dragging {max-height: 100px;}
	.vp00_selector td {
		padding: 6px 20px;
		font-weight: bold;
		cursor: pointer;
		}
	.disabledLink {
		cursor: not-allowed !important;
		}
	
	/* --------------- FORM ELEMENTS ---------------- */
	
	textarea, input {
		font-family: 'Courier New', monospace;
		}
	.select_horizontal {
		display: inline-block !important;
		height: 1.8em;
		}
	.select_horizontal option,
	.select_horizontal optgroup {
		display: inline-block !important;
		padding: 0.2em 0.4em;
		margin: 0;
		text-align: left;
		}
	.inputHelper {
		position: absolute;
		z-index: 30;
		max-width: 70%;
		max-height: 100%;
		top: 40px;
		left: 200px;
		border: 1px solid transparent;
		border-radius: 10px;
		min-width: 200px;
		min-height: 200px;
		padding: 1em;
		display:none;
		}
	.inputHelper_present {
		text-decoration: underline;
		}
	
	.input-is-station {width: 4em;}
	.input-is-termatiko, .input-is-terminal {width: 5em;}
	.input-is-treno {width: 5em;}
	.input-is-posint {width: 6em;}
	.input-is-float {width: 6em;}
	.input-is-voucher {width: 13em;}
	.input-is-telephone {width: 10em;}
	.input-is-username {width: 9em;}
	
	input:required, textarea:required, select:required {
		border-bottom: 2px solid var(--dark-blue);
	}
	th.required, td.required, .required {text-decoration: double underline var(--dark-blue);}
	.help-section {padding: 0.5rem;}
	.required:after {content: " *"}
	
	input[type="range"].rangeAsToggle {
		width: 6em;
		margin: 0 2.8em 0 2.6em;
		}
	input[type="range"].rangeAsToggle::-moz-range-progress {
		height: 1.6em;
		border-radius: 2.6em;
		}
	input[type="range"].rangeAsToggle::-moz-range-track {
		height: 1.6em;
		border-radius: 2.6em;
		}
	input[type="range"].rangeAsToggle::-moz-range-thumb {
		height: 1.6em;
		width: 1.6em;
		}
	.rangeAsToggle::before {
		content: "OXI";
		margin-left: -2.5em;
		}
	.rangeAsToggle::after {
		content: "NAI";
		margin-right: -2.8em;
		}

	label.input { /* this one is a label that wraps around an input element */
		display: inline-block;
		font-weight: 400;
		padding: 0.6em 0 0.3em;
	}
	.label-input {display: inline-flex;flex-direction: row;padding: 0.4em;}
	.label-input label {
		padding-right: 1em;
		display: block;
	}
	
	.toolbar_item_tb {display: flex;flex-direction: column;margin-right: 0.5rem;}
	.toolbar_item_tb > * {display: inline-block;}
	.toolbar_item_tb > span {font-size: 0.8em;border-bottom: 1px solid var(--dark-blue);margin-bottom:0.2em;}
	.toolbar_item_tb .toolbar_item_value,
	.toolbar_item_tb input,
	.toolbar_item_tb select {height: 1.5em;box-sizing: border-box;}
	
	[data-type=intTime],
	[data-type=time],
	[data-type=floatTime],
	[data-type=treno],
	[data-type=sta8mos],
	[data-type=stathmos],
	[data-type=termatiko],
	[data-type=terminal],
	[data-type=posInt],
	[data-type=posFloat],
	[data-type=int],
	[data-type=float],
	[data-type=posInteger],
	[data-type=ekdotis] {
		width: 5em;
	}
	
	[data-type=date],
	[data-type=latlon],
	[data-type=username],
	[data-type=identifier],
	[data-type=identifier_el],
	[data-type=identifier_gr],
	[data-type=trena] {
		width: 9em;
	}
	
	[data-type=voucher] {
		width: 12em;
	}
	
	input.tristate {
		cursor: pointer;
		user-select: none;
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border: 1px solid var(--grayscale-9);
	}
	select.tristate {
		-webkit-appearance: none;
		-moz-appearance: none;
		text-indent: 1px;
		text-overflow: '';
		--size: 1.3rem;
		width: var(--size);
		height: var(--size);
	}
	
	.input_language_marker {
		display: inline-block;
		background-color: var(--grayscale-d);
		padding: 0.1em 0.3em;
		border-radius: 0.6em;
		color: var(--grayscale-9);
		font-weight: bold;
		font-family: monospace, Monospaced;
		font-size: 0.8em;
		user-select: none;
	}
	.input_language_mixed {
		background-color: var(--red) !important;
		color: var(--yellow) !important;
	}
	.train_id_in_el {
		background-color: var(--dark-blue);
		color: var(--grayscale-f);
	}
	.train_id_in_en {
		background-color: var(--dark-green);
		color: var(--grayscale-f);
	}
	
	.tooltip_source {
		padding: 2px 2px 1px 2px;
		border-radius: 3px;
		display: inline-block;
		font-size: 0.8em;
	}
	
	.flex-crud {
		display: flex;
		width: 100%;
		flex-direction: column;
		border: 1px solid transparent;
		margin: 1px;
		border-radius: 5px;
		flex-grow: 1;
		max-height: 100%;
	}
	.flex-crud .flex-toolbar {
		flex-grow: 1;
	}
	.flex-crud .flex-crud-main-view {
		display: flex;
		flex-direction: row;
		flex-grow: 100;
		height: 100%;
	}
	.flex-crud .flex-crud-list {
		flex-grow: 2;
		overflow-y: scroll;
	}
	.flex-crud .flex-crud-edit {
		flex-grow: 4;
	}
	
	.form-panel {
		display: flex;
		flex-direction: column;
		padding: 0.4em;
		border-radius: 0.4em;
		border: 1px solid var(--grayscale-d);
		margin: 0.5em 0;
		box-sizing: border-box;
	}
	
	.form-panel h3, .form-panel h4 {margin: 0.6em 0 0.2em;}
	
	.form-panel label {
		margin: 0.4em 0 0.1em;
		font-size: 0.9em;
	}
	
	/* --------------- BUTTONS AND LINKS ------------ */
	
	a, .textLink {cursor: pointer;text-decoration: none;}
	.button {
		display: inline-block;
		padding: 0.3em 0.7em 0.3em 0.7em;
		text-align: center;
		cursor: pointer;
		border-radius: 4px;
		font-family: Geneva, Arial, sans-serif;
		border-width: 0;
	}
	.button img {
		margin: 0.1em 0.1em -0.1em;
	}
	.button:disabled,
	.button[disabled],
	.button[disabled]:active,
	.imageButton:disabled,
	.imageButton[disabled],
	.imageButton[disabled]:active {
		cursor: default;
	}
	
	.link2view[data-show-if-badge] {display:none;}
	
	
	/* ------------TABLES AND LISTS ------------ */
	
	.table_view {
		border-spacing: 0;
		border-width: 1px 0 0 1px;
		border-style: solid;
		border-color: transparent;
	}
	.table_view thead th,
	.table_view thead td {
		font-weight: bold;
		border-spacing: 0;
		border-width: 0 1px 1px 0;
		border-style: solid;
	}
	.table_view th,
	.table_view td {
		padding: 0.3em 0.5em;
		border-spacing: 0;
		border-width: 0 1px 1px 0;
		border-style: solid;
	}
	.table_view th {
		text-align: right;
		min-width: 5%;
		max-width: 40%;
		padding-left: 1.5em;
	}
	.table_view .section {
		font-weight: bold;
		padding: 0.4em;
		text-align: center;
	}
	.table_view td {
		text-align: left;
	}
	
	.listView {list-style-type: none;margin: 0;padding-left: 0;}
	.listItem {cursor: pointer;padding: 0.4em 0.4em;}
	.listItem_inactive {text-decoration: line-through;}
	.listItem_disabled {text-decoration: line-through;cursor: not-allowed;}
	.listItem_badge {float: right;}
	
	.pill-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 5px;
	}
	.pill-container .pill {
		display: inline-flex;
		margin: 2px;
		align-items: center;
		justify-content: space-between;
		border-radius: 6px;
	}
	.pill-container .pill .label {
		padding: 5px;
		border-radius: 5px 0 0 5px;
		flex-grow: 1;
		font-size: 0.8em;
		font-family: monospace, Monospaced;
	}
	.pill-container .pill .ops {
		padding: 0;
		display: flex;
		flex-direction: row;
		border-radius: 0 5px 5px 0;
		align-self: stretch;
	}
	.pill-container .pill .ops > .button:first-of-type {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
	
	.labelAboveItem {
		display: inline-flex;
		flex-direction: column;
		margin-right: 0.7em;
	}
	.labelAboveItem em {
		display: block;
		font-size: 0.6em;
		color: #0c75bb;
		text-decoration: underline;
		text-decoration-color: #e79b60;
		font-style: normal;
	}
	
	.table_basic {
		border-spacing: 0 !important;
	}
	.table_basic th,
	.table_basic td {
		padding: 0.4em 0.8em;
		border-bottom: 1px solid transparent;
	}
	.table_basic thead th {
		text-align: center;
	}
	.table_basic tbody th {
		text-align: right;
		max-width: 35%;
		width: 35%;
	}
	.table_basic tbody td {
		text-align: left;
	}
	.table_basic .section {
		font-weight: bold;
		padding: 0.4em;
		text-align: center;
	}
	
	/* ------ TFUI STUFF ------- */
	
	.tfui-panel {
		padding:10px;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}
	.tfui-viewstack .tfui-panel {
		margin-top: -1px;
		border-style: solid;
		border-width: 1px;
		width: 100%;
		max-height: 100%;
	}
	.tfui-viewstack {
		padding:0;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		max-height: 100%;
	}
	.tfui-button-group {
		padding: 0;
	}
	
	.button-theme-switcher {display:none;}
	
}

/* Chrome-specific rules */
@supports (-webkit-appearance:none) {
	input[type="range"] {
		width: 4em;
	}
}

@media screen {
	.print_only {
		display:none;
	}
}

/* Printing rules */
@media print {
	.viewPane {
		height: auto;
	}
	
	header, footer {
		display:none;
	}
	
	main, article {
		height: auto;
	}
	
	.print_only {
		display: block;
	}
	
	.no_print {
		display:none;
	}
}


/* 
 * html5theme.css
 * Created on : Nov 11, 2010, 11:15:31 PM
 * Author     : Trian Karayiannis
 * This file contains the styling definitions for elements structured according to my UI framework
*/


@media screen, print {
	
	/* --------- STRUCTURAL ELEMENTS & SECTIONING -------------- */
	
	body {font: normal 11pt Helvetica, sans-serif;background: var(--body-bg-color);color: var(--body-text-color);}
	#ui_loading {
		display:none;
		position:fixed;
		top:10px;
		right:10px;
		z-index:100;
	}
	#ui_loading > div {
		height:20px;
		width:20px;
		border-radius: 12px;
		border:2px solid white;
		color: white;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.flex-viewPane {background-color: var(--body-bg-color);}
	.flex-toolbar {background-color: var(--toolbar-bg-color);outline-color: var(--toolbar-border-color);}
	.floating-window-header {background-color: var(--dark-blue);color: var(--grayscale-f);outline:0;}
	
	.navbar {background-color: var(--navbar-bg-color);color: var(--navbar-button-text-color);}
	.navbar .button {background-color: var(--navbar-button-bg-color);color: var(--navbar-button-text-color);}
	.navbar .button:hover {background-color: var(--navbar-button-hover-bg-color) !important;}
	.navbar .button[role=link2view] {color: var(--grayscale-4);}
	.navbar .silent-button {background-color: var(--grayscale-3);}
	.navbar .silent-button:hover {background-color: var(--grayscale-5);}
	.navbar .tfui-button {background-color: var(--navbar-button-bg-color) !important;color:var(--navbar-button-text-color) !important;}
	.navbar .tfui-button.tfui-button-pressed {background-color: var(--navbar-button-hover-bg-color) !important;}
	
	.toolbar {background-color: var(--toolbar-bg-color);}
	.toolbar-inner-group {background-color: var(--grayscale-b);border-color: var(--grayscale-9);}
	
	.panel {border-color: var(--grayscale-e);background-color: var(--body-bg-color);/* var(--grayscale-f_1);*/}
	.ui-splitter {background-color: var(--grayscale-d);border-color: var(--grayscale-c);}
	.ih_marked_selection {background-color: var(--light-green);color: var(--grayscale-f);}
	.inputHelper_present {color: var(--red-fg);text-decoration: underline;}
	.focusedInput {background-color: var(--input-focused-bg);}
	.inputHelper {background-color: var(--grayscale-e);border-color: var(--grayscale-b);}
	
	.bg_editable {background-color: var(--area-editable-bg);}
	.bg_disabled {background-color: var(--area-disabled-bg);}
	.bg_info {background-color: var(--light-green);}
	.divider-lr,
	.divider-tb {background-color: var(--grayscale-b);outline: 1px solid var(--grayscale-9);}
	
	.panel-info,
	.panel-help,
	.panel-error,
	.panel-warning {
		padding:0.6em 1em;border-radius: 0.5em;font-size: 0.9em;
		}
	.panel-info {background-color: var(--panel-info-bg-color);color: var(--panel-info-text-color);}
	.panel-help {background-color: var(--panel-help-bg-color);color: var(--panel-help-text-color);}
	.panel-warning {background-color: var(--panel-warning-bg-color);color: var(--panel-warning-text-color);}
	.panel-error {background-color: var(--panel-error-bg-color);color: var(--panel-error-text-color);}
	
	
	/* -------------- GENERIC DEFINITIONS ---------- */
	
	.dim {color: var(--grayscale-9);}
	
	.badge_border_level1 {border-left: 1.2em solid var(--badge-l1);}
	.badge_border_level2 {border-left: 1.2em solid var(--badge-l2);}
	.badge_border_level3 {border-left: 1.2em solid var(--badge-l3);}
	.badge_border_level4 {border-left: 1.2em solid var(--badge-l4);}
	.badge_level1 {background-color: var(--badge-l1);}
	.badge_level2 {background-color: var(--badge-l2);}
	.badge_level3 {background-color: var(--badge-l3);}
	.badge_level4 {background-color: var(--badge-l4);}
	
	.tooltip_source {background-color: var(--grayscale-f);color: var(--blue);}
	
	.file_uploader {background-color: var(--light-green);}
	.file_uploader:hover {background-color: var(--light-green-hover);}
	.dragover {background-color: var(--light-green);}
	.drop_target_active {background: var(--yellow) !important;outline: 2px solid var(--orange);}
	.drop_target_hover {background: var(--blue) !important;}
	
	.module_shortcuts_active {background: var(--home-screen-shortcuts-area-bg) !important;}
	.module_shortcuts_hover {background: var(--light-green) !important;}
	#module_shortcuts .link2view {background: var(--grayscale-e);border-color: var(--grayscale-8);}
	#module_shortcuts .link2view:hover {background-color: var(--yellow);}
	.placeholder-textbox,
	.text-outlined {
		color: var(--grayscale-e_1);
		text-shadow:
				-1px -1px 0 var(--grayscale-9),
				1px -1px 0 var(--grayscale-9),
				-1px 1px 0 var(--grayscale-9),
				1px 1px 0 var(--grayscale-9);
	}
	
	
	/* --------------- APP MAIN MENU --------------- */
	
	#vp_00,
	#vp_00 main {
		background-color: var(--home-screen-bg);
		}
	
	.home_screen_standout {
		background-color: var(--home-screen-standout);
		padding: 0.6em 1em;
		border-radius: 0.6em;
		display: flex;
		flex-direction: row;
		justify-content: center;
		}
	
	.home_screen_menu {
		background-color: var(--home-screen-bg);
		border-color: transparent;
		border-spacing: 0;
		}
	.home_screen_menu .tfui-button {
		background-color: var(--tf-button);
		color: var(--dark-blue);
		font-weight: 500;
		}
	.home_screen_menu .section {
		background-color: var(--grayscale-f);
		color:            var(--home-screen-button-group-section-color);
		padding: 0.7em 0.5em;
		font-size: 1.2em;
		text-align: center;
		}
	.home_screen_menu .tfui-button {
		padding: 0.7em 0.5em;
		}
	.home_screen_menu .tfui-button:hover {
		background-color: var(--tf-button-active);
	}
	.home_screen_menu [data-tf-vrole="button-group"] [data-tf-vrole="button"].tfui-button-pressed {
		background-color: var(--home-screen-bg-level1) !important;
	}
	.home_screen_menu .tfui-button.tfui-stacking-vertical-child {border-left: 3px solid transparent;}
	.home_screen_menu .tfui-button.tfui-stacking-vertical-child.tfui-button-pressed {border-left-color: var(--orange);}
	.home_screen_menu .tfui-panel {
		background-color: var(--home-screen-bg-level1);
	}
	.home_screen_menu .tfui-button-pressed {
		background-color: var(--tf-button-active);
	}
	.home_screen_menu .tfui-button-pressed {
		color: var(--orange);
		font-weight: 500;
	}
	.home_screen_menu .link2view {
	}
	.home_screen_menu .link2view:hover {
		background-color: var(--home-menu-item-hover);
		}
	.home_screen_menu .link2viewInfo {
		color: var(--grayscale-9);
	}
	.home_screen_menu .link2viewInfo .warning {color: var(--medium-red);}
	.home_screen_menu .link2viewInfo .info {color: var(--teal);}
	.home_screen_menu .tfui-viewstack .section {
		/*background-color: var(--tf-button);*/
		color: var(--home-menu-section-text);
		padding: 0.5em 0.3em;
		text-align: center;
		}
	.home_screen_menu .info {
		color: var(--grayscale-b);
		}
	.home_screen_menu.header2 {color:var(--grayscale-5)}
	
	.section,
	.subsection
	{
		background-color: var(--home-screen-section-bg);
		color:            var(--home-screen-section-color);
		border-bottom:    2px solid var(--home-screen-section-color);
		padding: 0.7em 1.5em;
		font-size: 1.2em;
	}
	.subsection {
		color           : var(--home-screen-subsection-color);
		border-color    : var(--home-screen-subsection-color);
		padding-left    : 3em;
		font-size: 1.1em;
	}
	.tfui-button-group .section {
		border-color: transparent !important;
		background-color: var(--home-screen-bg-section);
	}
	
	.home_menu_page {--border-radius : 0.2em;}
	table.home_menu_page {border-spacing: 0;}
	table.home_menu_page tr:first-child :first-child {border-top-left-radius: var(--border-radius);}
	table.home_menu_page tr:first-child :last-child {border-top-right-radius: var(--border-radius);}
	table.home_menu_page tr:last-child :first-child {border-bottom-left-radius: var(--border-radius);}
	table.home_menu_page tr:last-child :last-child {border-bottom-right-radius: var(--border-radius);}
	div.home_menu_page div:first-child {border-radius: var(--border-radius) var(--border-radius) 0 0;}
	div.home_menu_page div:last-child {border-radius: 0 0 var(--border-radius) var(--border-radius);}
	.home_menu_page .link2view, .home_menu_page .link2view {border-bottom: 1px solid var(--grayscale-c);}
	
	#vp_00 .header2 {color: var(--grayscale-5);}
	#vp_00 .link2view {border-color: var(--grayscale-d);background-color: var(--grayscale-f);}
	.link2view.deprecatedLink {color: var(--dark-red);text-decoration: line-through;}

	.vp00_active_selector {background: var(--input-focused-bg);}
	
	
	/* --------------- FORM ELEMENTS ---------------- */
	
	.flex-crud {outline-color: var(--grayscale-b);}
	.flex-crud-list {border:1px solid var(--grayscale-c);}
	
	/* --------------- BUTTONS AND LINKS ------------ */
	
	a, .textLink {color: var(--blue);}
	.disabledLink {color: var(--grayscale-9);}
	
	.button {background: var(--grayscale-c);color:var(--grayscale-4)}
	.button:hover , .imageButton:hover  {background: var(--grayscale-c);}
	.button:active, .imageButton:active {background: var(--grayscale-b);}
	.buttonHover {background: var(--grayscale-d);}
	
	.button:disabled,
	.button[disabled],
	.button[disabled]:active,
	.button[disabled]:hover,
	.imageButton:disabled,
	.imageButton[disabled],
	.imageButton[disabled]:active {color: var(--grayscale-5);background-color: var(--grayscale-c) !important;cursor: not-allowed;}
	
	.button-red, .navbar .button-red                            {background-color: var(--red);color: var(--button-text-color);}
	.button-red:hover, .navbar .button-red:hover                {background-color: var(--red-hover) !important;}
	.button-lightred, .navbar .button-lightred                  {background-color: var(--light-red);color: var(--button-text-color);}
	.button-lightred:hover, .navbar .button-lightred:hover      {background-color: var(--light-red-hover) !important;}
	.button-green, .navbar .button-green                        {background-color: var(--green);color: var(--button-text-color);}
	.button-green:hover, .navbar .button-green:hover            {background-color: var(--green-hover) !important;}
	.button-lightgreen, .navbar .button-lightgreen              {background-color: var(--light-green);color: var(--grayscale-5);}
	.button-lightgreen:hover, .navbar .button-lightgreen:hover  {background-color: var(--light-green-hover) !important;}
	.button-darkgreen, .navbar .button-darkgreen                {background-color: var(--dark-green);color: var(--button-text-color);}
	.button-darkgreen:hover, .navbar .button-darkgreen:hover    {background-color: var(--dark-green-hover) !important;}
	.button-blue, .navbar .button-blue                          {background-color: var(--blue);color: var(--button-text-color);}
	.button-blue:hover, .navbar .button-blue:hover              {background-color: var(--blue-hover) !important;}
	.button-lightblue, .navbar .button-lightblue                {background-color: var(--light-blue);color: var(--button-text-color);}
	.button-lightblue:hover, .navbar .button-lightblue:hover    {background-color: var(--light-blue-hover) !important;}
	.button-yellow, .navbar .button-yellow                      {background-color: var(--yellow);color: var(--grayscale-5);}
	.button-yellow:hover, .navbar .button-yellow:hover          {background-color: var(--yellow-hover) !important;}
	.button-orange, .navbar .button-orange                      {background-color: var(--orange);color: var(--button-text-color);}
	.button-orange:hover, .navbar .button-orange:hover          {background-color: var(--orange-hover) !important;}
	.button-purple, .navbar .button-purple                      {background-color: var(--light-purple);color: var(--button-text-color);}
	.button-purple:hover, .navbar .button-purple:hover          {background-color: var(--light-purple-hover) !important;}
	.button-darkpurple, .navbar .button-darkpurple              {background-color: var(--purple);color: var(--button-text-color);}
	.button-darkpurple:hover, .navbar .button-darkpurple:hover  {background-color: var(--purple-hover) !important;}
	.button-teal, .navbar .button-teal                          {background-color: var(--teal);color: var(--button-text-color);}
	.button-teal:hover, .navbar .button-teal:hover          {background-color: var(--teal-hover) !important;}
	
	.text-dark-red {color: var(--dark-red);}
	.text-dark-blue {color: var(--dark-blue);}
	.text-dark-green {color: var(--dark-green);}
	.text-red {color: var(--red);}
	.text-green {color: var(--green);}
	.text-blue {color: var(--blue);}
	.text-purple {color: var(--light-purple);}
	.text-orange {color: var(--orange);}
	
	input, select, textarea {
		background-color: var(--form-element-bg-color);
		border: 1px solid var(--form-element-border-color);
		color: var(--form-element-text-color);
	}
	input[disabled], select[disabled], textarea[disabled] {
		background-color: var(--input-disabled-bg);
		border: 1px solid var(--grayscale-9);
	}
	
	input[type="range"].rangeAsToggle {background-color: var(--grayscale-f);}
	input[type="range"].rangeAsToggle::-moz-range-progress {background-color: var(--light-green);}
	input[type="range"].rangeAsToggle::-moz-range-track {background-color: var(--grayscale-9);}
	
	.outline-orange {
		border-radius: 0.5em;
		outline: 1px solid var(--orange);
	}
	
	/* ------------TABLES AND LISTS ------------ */
	
	.listItem {border-bottom: 1px solid var(--grayscale-e_1);}
	.listItem:hover {background: var(--grayscale-d);}
	.listItem_selected {background: var(--light-blue) !important;color: var(--grayscale-5);}
	.listItem_selected .dim {color: var(--grayscale-f);}
	.listItem_inactive {color:var(--grayscale-9);}
	.listItem_disabled {color:var(--grayscale-9);}
	.listItem_invalidated {background-color:var(--pale-light-red);}
	.listGroup .listGroup_label {background: var(--grayscale-e);color: var(--blue);}
	
	.table_view {border-color: var(--grayscale-d);background-color: var(--body-bg-color);}
	.table_view th,
	.table_view td {border-color: var(--grayscale-e_1);}
	.table_view .section {background: var(--body-bg-color);color: var(--blue);}
	.table_view tbody th {color:var(--dark-blue);}
	.table_basic th,
	.table_basic td {border-bottom-color: var(--grayscale-f_2);}
	.table_basic thead th {background: var(--grayscale-f_2);}
	.table_basic tbody th {background-color: var(--grayscale-f_2);}
	.table_basic tbody tr:hover {background-color: var(--grayscale-f_2);}
	.table_basic .toolbar {background-color: var(--grayscale-f_2);}
	
	.table_info thead th, .table_info thead td {background-color: var(--grayscale-d);}
	
	.pill-container .pill {border: 1px solid var(--grayscale-d);background-color: var(--grayscale-f);}
	.pill-container .pill:hover {background-color: var(--grayscale-e);}
	
	
	/* ----------- TFUI STUFF ------------ */
	
	.tfui-button {
		background-color: var(--grayscale-d);
	}
	
	.navbar .tfui-button {
		background-color: var(--grayscale-5);
		color: var(--grayscale-d);
		border-color:var(--grayscale-7);
	}
	.navbar .tfui-button-pressed {
		background-color: var(--grayscale-7);
	}
	
	.tfui-panel {
		background-color: var(--body-bg-color);
	}
	.tfui-viewstack .tfui-panel {
		border-color: var(--tf-button-pressed-border-bg) !important;
	}
	#vp_00 .tfui-viewstack .tfui-panel {
		/*border-color: transparent !important;*/
	}
	
}



:root {
	--grayscale-f: #fff;
	--grayscale-f_1: #fafafa;
	--grayscale-f_2: #f4f4f4;
	--grayscale-e: #eee;
	--grayscale-e_1: #e8e8e8;
	--grayscale-d: #ddd;
	--grayscale-c: #ccc;
	--grayscale-b: #bbb;
	--grayscale-a: #aaa;
	--grayscale-9: #999;
	--grayscale-8: #888;
	--grayscale-7: #777;
	--grayscale-6: #666;
	--grayscale-5: #555;
	--grayscale-4: #444;
	--grayscale-3: #333;
	
	--badge-l1: #268011;
	--badge-l2: #608fce;
	--badge-l3: #e39837;
	--badge-l4: #ec2f36;
	
	--item-selected-bg: #A3CAFF;
	
	/*--orange : orange;*/
	/*--blue : #647adb;*/
	--pale-light-blue: #c9dcee;
	--pale-light-blue-2: #eef;
	--orange: #de9821;
	--pale-orange: #edd8c4;
	--orange-hover: #ca8b1e;
	--light-blue: #74b6e7;
	--light-blue-hover: #67a2ce;
	--blue: #6b97ef;
	--blue-hover: #5e85d3;
	--dark-blue: #236a9f;
	--dark-blue-hover: #1c5681;
	--pale-blue: #7789a4;
	--pale-light-red: #f5e9e8;
	--light-red: #eeb8b0;
	--light-red-hover: #cc9d97;
	--medium-red: #ad756c;
	--red: #b64426;
	--red-fg: #652514;
	--red-hover: #a83f23;
	--dark-red: #933;
	--dark-red-fg: #933;
	--yellow: #f9f917;
	--yellow-hover: #dfdf14;
	--pale-yellow-green: #d8fc9e;
	--pale-yellow-bg: #FFF1B5;
	--pale-light-green: #a9d39e;
	--light-green: #9fe98b;
	--light-green-hover: #91d57f;
	--green: #67A05A;
	--green-hover: #5d9152;
	--pale-green: #8cae86;
	--pale-medium-green: #5f775b;
	--dark-green: #407235;
	--dark-green-hover: #36612d;
	--purple: #8c4a8c;
	--purple-hover: #a24fa2;
	--pale-light-purple: #decee6;
	--light-purple: #b281cc;
	--light-purple-hover: #a376bb;
	--mid-grey: #888;
	--mid-grey-hover: #777;
	--dark-grey: #555;
	--dark-grey-hover: #444;
	--teal: #179a9a;
	--teal-hover: #19b0b0;
	
	--home-screen-bg-level1: var(--grayscale-f_2); /* pressed buttons & panels */
	--home-screen-bg-level2: var(--grayscale-e); /* inactive buttons */
	--home-screen-bg-section: #e7f0f4; /* button-group unpressed buttons */
	--home-screen-bg: #7294b6;
	--home-screen-standout: #FFF1B5;
	--home-screen-standout-text: #555;
	--home-screen-section-bg: var(--grayscale-f_2);
	--home-screen-section-color: var(--green);
	--home-screen-subsection-color: var(--dark-green);
	--home-screen-button-group-section-bg: var(--grayscale-e);
	--home-screen-button-group-section-color: var(--grayscale-a);
	--home-menu-bg: var(--grayscale-f);
	--home-menu-item-hover: var(--pale-light-blue-2);
	--home-menu-section-text: var(--blue);
	--home-screen-shortcuts-area-bg: mediumpurple;
	--input-bg: #faf3d9;
	--input-focused-bg: #faeaab;
	--input-disabled-bg: #e7d7cd;
	
	--body-bg-color : #f9faf8; /* var(--grayscale-f_1);*/
	--body-text-color : var(--grayscale-3);
	--body-dim-color : var(--grayscale-9);
	--panel-bg-color : var(--grayscale-f_2);
	--panel-sidebar-bg-color : var(--grayscale-e);
	--tabbar-btn-bg-color: var(--grayscale-c);
	--tabbar-btn-bg-color-active: var(--grayscale-e);
	--tabbar-btn-border-color: var(--grayscale-c);
	--tabbar-btn-border-color-active: var(--grayscale-e);
	--toolbar-bg-color: var(--grayscale-e);
	--toolbar-border-color: transparent; /*#eee*/
	--area-editable-bg: #eefee9;
	--area-disabled-bg: #fef5e9;
	
	--drop-target-active: lightgreen;
	
	--navbar-bg-color: var(--grayscale-3);
	--navbar-button-bg-color: var(--grayscale-5);
	--navbar-button-hover-bg-color: var(--grayscale-7);
	--navbar-button-active-bg-color: var(--grayscale-8);
	--navbar-button-text-color: var(--grayscale-e);
	
	--form-element-bg-color: var(--grayscale-f_1);
	--form-element-text-color: var(--grayscale-5);
	--form-element-border-color: var(--grayscale-b);
	--button-text-color: #fff;
	
	--panel-error-bg-color: #ffc2ac;
	--panel-error-text-color: #a47665;
	--panel-warning-bg-color: #feebb5;
	--panel-warning-text-color: #93916f;
	--panel-help-bg-color: #d7e4ec;
	--panel-help-text-color: #81949f;
	--panel-info-bg-color: #d7edd4;
	--panel-info-text-color: #7b9277;
	
	--dromol-selected-bg: #a7d492;
	--treno-seats-fg: #77e;
	--seat-selected-bg: #6b97ef;
	--seat-recommended: #fae7c2;
	--seat-recommended-fg: #2666B3;
	--seat-highly-recommended: #fad9aa;
	--seat-control-bg: #b93;
	--seat-safety-bg: #998c86;
	--seat-prebooked-bg: #ddb;
	--vagoni-bg: #EAE4DC;
	--vagoni-grad1: #EAE4DC;
	--vagoni-grad2: #bab6b1;
	
	--tf-button : var(--grayscale-e_1);
	--tf-button-hover : var(--grayscale-d);
	--tf-button-active : var(--grayscale-f_2);
	--tf-border-color : var(--grayscale-e);
	--tf-panel-bg-color: var(--grayscale-f_2);
	--tf-panel-text: var(--grayscale-3);
	--tf-button-pressed-border-bg: #97c0d1;
	
	--box-shadow-color: #888;
	
}


/* 
    Document   : list
    Created on : 6 Δεκ 2010, 2:26:57 πμ
    Author     : Trian Karayiannis
*/

@media screen, print {
	.lista_synodou {padding-top:5em;}
	.lista_synodou .no_break {page-break-inside: avoid;}

	.lista_synodou .header {
		display:none;
		font-family: serif;
		position:fixed;
		top:0;
	}
	
	.title {font-size:1.3em !important;}

	.lista_synodou .section {
		font-size: 12pt;
		font-weight: bold;
		margin:1em 0 0.4em 3em;
	}
	
	.lista_synodou .trainose_logo {
		width : 10%;
	}
	.lista_synodou .location_header {
		padding:0.5em 0 !important;
		border-bottom:3px solid var(--grayscale-c);
	}
	.lista_synodou .title {
		width:89%;
		display:inline-block !important;
		margin:0;
	}

	table.lista_epivatwn {
		border: 1px solid var(--grayscale-d);
		font-size: 11pt;
		width: 100%;
	}
	table.lista_epivatwn td {
		border: 1px solid var(--grayscale-d);
		padding: 0.2em 0.3em;
		text-align: center;
	}

	.lista_synodou table.generic {
		width:100%;
		font: normal 1.1em monospace;
	}
	.lista_synodou table.generic th, table.generic td {
		border:1px solid var(--grayscale-b);
	}
	.lista_synodou table.generic td {
		line-height: 1.3em;
		text-align: center;
	}
	.lista_synodou .touristika {
		width : 100%;
		background : var(--grayscale-d);
		font-weight:bold;
		padding : 1em 0;
		text-align : center;
		margin-top:1em;
	}
	
	.lista_synodou td.kostos {text-align:right !important;width:4em;padding:0.2em 0.3em 0 0 !important;}
	.lista_synodou .offer_present {height:1.3em;padding:0 0.3em 0 0;margin-bottom:-5px;}
	
	.invalid {color:var(--grayscale-8);text-decoration: line-through;}
	
	.dromologio-info td {color:var(--grayscale-9);font-weight:bold;padding:4px;}
	.dromologio-standout {font-weight:bold;background:var(--grayscale-f) !important;border-radius:4px;padding:3px 3px 1px;}
	.dromologio.trip-not-selectable {cursor:not-allowed;}
	.dromologio.trip-not-selectable td {background:var(--grayscale-e) !important;color:var(--grayscale-a) !important;}
	
	div.dromologio {
		--padding: 0.4em;
		--border-color: var(--grayscale-c);
		--hover-bg-master: #bfe8a1;
		--hover-bg-segment: #b1d795;;
	}
	div.dromologio:hover {background: var(--hover-bg-master);}
	div.dromologio {
		display:flex;
		flex-direction: column;
		border-radius: var(--padding);
		border: 1px solid var(--border-color);
		margin-bottom: 0.5em;
	}
	div.dromologio .summary {
		font-size: 1.2em;
		display: flex;
		flex-direction: row;
		padding: var(--padding);
		align-items: center;
	}
	div.dromologio .summary > * {flex-grow: 1}
	div.dromologio .trip-details {
	
	}
	div.dromologio .trip-segments { /* that's the wrapper for .trip-segment */
		display:none;
	}
	
	div.dromologio .trip-segment {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin: var(--padding);
		border: 1px solid var(--border-color);
		padding: var(--padding);
		border-radius: var(--padding);
		font-family: monospace;
	}
	div.dromologio .trip-segment > * {flex-grow: 1; padding: 0.2em 0.5em;}
	div.dromologio .trip-segment .treno_info_link:hover {
		color: white;
	}
	div.dromologio .trip-segment:hover {background: var(--hover-bg-segment);}
	div.dromologio .trip-segment em {
		background: var(--grayscale-f);
		padding:0.2em;
		border-radius: 0.4em;
		font-style: normal;
		font-weight: bold;
	}
	.through_trip_1, .through_trip_0 {
		padding: 0.4em;
		font-size: 0.7em;
		font-family: Ubuntu, Arial, sans-serif;
		user-select: none;
		border-radius: 0.4em;
		display: inline-block;
		border-style: solid;
		border-width: 1px;
	}
	.through_trip_1 {
		background-color: var(--light-green);
		color: var(--green);
		border-color: var(--green);
	}
	.through_trip_0 {
		background-color: var(--light-blue);
		color: var(--dark-blue);
		border-color: var(--dark-blue);
	}
	
	
	.dromologia .delay {color:var(--dark-red-fg);font-size:0.9em;}

	.dromologio.hasDeparted {background:var(--light-red);}
	
	/*
	 * FORMATTING ΒΑΓΟΝΙΩΝ
	 */
	.btn_vagoni {display:block;border-radius: 7px;margin: 2px;padding: 0.6em 0.4em;
		background:#D6D1C9;color: #222;font-weight: bold;text-align: center;cursor: pointer;width:60px;}
	.btn_vagoni_sel {background:var(--light-blue);color:var(--grayscale-f);}
	.vagoni, .coachModel {
		display: inline-table;
		width: 20em;
		margin: 1em;
		border-radius: 1em;
		padding: 1em;
		background: var(--vagoni-bg);
		background: linear-gradient(to bottom, var(--vagoni-grad1) 0%, var(--vagoni-grad2) 80%);
		border: 1px solid var(--grayscale-a);
	}
	.seat {text-align: center;padding: 0.3em 0.6em 0.1em;color: var(--grayscale-3);font-weight: bold;cursor:pointer;background:var(--grayscale-f_2);
		border-radius: 6px;border: 0.4em solid var(--grayscale-9);font-size: 0.9em;user-select: none !important;}
	.seat_empros {border-top-width: 0 !important;}
	.seat_opis8en {border-bottom-width: 0 !important;}
	.seat_peristrefomenh {border-style: dotted !important;}
	.seat_reserved {background:var(--grayscale-c) !important;color:var(--grayscale-8);cursor:text !important;}
	.seat_prebooked {background:var(--seat-prebooked-bg);color:var(--grayscale-8);cursor:text !important;}
	.seat_control {background:var(--seat-control-bg) !important;color:var(--grayscale-f);}
	.seat_safety {background:var(--seat-safety-bg) !important;color:var(--grayscale-f);}
    .seat-locked {background-color: var(--light-purple);}
	.seat_recommended, .seat_highly_recommended {border-color: var(--grayscale-8);color:var(--seat-recommended-fg);text-decoration:underline;}
	.seat_recommended {background: var(--seat-recommended);}
	.seat_highly_recommended {background: var(--seat-highly-recommended);}
	.seat-is-offer {border-color:var(--dark-red);border-style: double;}
	.seat_selected {background:var(--seat-selected-bg) !important;color: var(--grayscale-f)}
	.vagoni .diadromos {width:20%;}
	.sb_treno {display:block;padding:0.2em 0.4em;cursor:pointer;font-family: monospace;background:var(--grayscale-f_2);}
	.sb_treno treno {display:inline;font-weight: bold;}
	.sb_treno itinerary {display:inline-block;font-weight: bold;}
	.sb_treno date {display:inline-block;color:var(--grayscale-7);}
	.sb_treno seats {display:block;color:var(--treno-seats-fg);font-family: monospace;padding:0.3em;}
	.synth_table_lrg {
		background-color: var(--grayscale-9);
		border-radius: 0.3em;
		min-width: 1.5em;
		min-height: 1em;
	}
	
	
	.dromologio_hover td {background: var(--grayscale-c);}
	.dromologio_selected td {background: var(--dromol-selected-bg);}
	.treno_info_link {padding: 0.3em;color: var(--dark-blue);font-weight: bold;border-radius: 0.4em;cursor:pointer;background-color: var(--orange);}
	.treno_info_link:hover {background: var(--grayscale-4);color: var(--orange) !important;}
 
}

@media print {
	.lista_synodou {
		display: block;
		margin: 0;
		color: #333;
		background: var(--grayscale-f);
		font: normal 11pt Helvetica, sans-serif;
	}
	.lista_synodou .no_print {display: none;}
	.lista_synodou .big_gap {padding-top: 30px;display: block;}
	.lista_synodou .trainose_logo {margin-bottom: -5px;}
	.lista_synodou .title {display:inline-block;width: 79%;}
	.lista_synodou .tour_container {display: block;page-break-before : always; page-break-after: always;height : 24cm !important;}
	.lista_synodou .touristika {margin-top: 0;font-size: 3em;padding-top: 12cm;}
	.lista_synodou .synopsh {page-break-after: always;}
	
	.lista_epivatwn {margin-bottom: 2em;}
	
	
	.vagoni {
		margin-right: 3mm;
		margin-bottom: 3mm;
		display: inline-table;
		background : var(--grayscale-c);
		border : 3px solid var(--grayscale-8);
		border-radius: 6px;
		font-size: 0.3cm;
		page-break-inside: avoid;
		overflow: visible !important;
		-moz-user-select: none !important;
	}
	.seat {
		border-style: solid;
		border-color: var(--grayscale-8);
		border-width: 0.3em;
		width: 0.8cm;
		height: 0.4cm;
		border-radius: 0.5em;
		text-align: center;
		user-select: none !important;
		-moz-user-select : none !important;
	}
	.vagoni .diadromos {width:0.5cm;}
	.seat_empros {border-top-width: 0 !important;}
	.seat_opis8en {border-bottom-width: 0 !important;}
	.seat_peristrefomenh {border-style: dotted !important;}
	.seat_reserved, .seat_control {
		border-style: solid;
		border-color: var(--grayscale-5);
		border-width: 3mm 2mm !important;
		height: 1mm;
		font-size: 0;
		padding: 0;
	}
	.seat_control {
		border-color: var(--grayscale-9);
	}
    
}



/**
 * TF css
 * @version 0.1
 * @author Trian Karayiannis
 * @email trian.karayiannis@icloud.com
 */


@media screen, print {
	
	body.tfui {
		margin:0;
		padding: 0;
		font: normal 11pt Helvetica, Arial, sans-serif;
		width: 100%;
		height: 100%;
	}
	
	/* CLASSES TO BE USED IN AND AS CSS COMPONENTS */
	.tfui-behind-the-scenes {
		position:absolute;
		z-index: 0;
		width: 100%;
		height:100%;
		text-align: center;
	}
	
	.tfui-viewPane {
		display : block;
		position:absolute;
		z-index:1;
		width: 100%;
		height:100%;
		top:0;
		left:0;
	}
	
	.tfui-inputHelper {
		display:none;
		position: absolute;
		z-index:10;
	}
	
	.tfui-mask, .tfui-dialog-container {
		display:none;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		overflow: hidden;
		opacity: 0.7;
		filter:Alpha(opacity=70);
	}
	.tfui-mask {
		background-color: var(--grayscale-7);
		z-index:29;
	}
	.tfui-dialog-container {
		z-index:30;
		opacity:1;
		filter:Alpha(opacity=100);
	}
	.tfui-dialog {
		min-width:100px;
		min-height:60px;
		background-color: var(--tf-panel-bg-color);
		margin:100px auto;
		opacity:1 !important;
		filter:Alpha(opacity=100) !important;
		max-width: 50%;
	}
	
	.tfui-toolbar {
		display:inline-block;
		background-color:var(--grayscale-d);
		border:1px solid var(--grayscale-c);
		padding:0 !important;
		text-align: left;
	}
	.tfui-toolbar > * {
		margin:0.4em 0.2em 0.4em;
		display:inline-block;
		font-size: 0.9em;
	}
	
	.tfui-titlebar {
		background-color : var(--dark-blue);
		font-size: 0.7em;
		color:var(--grayscale-e);
		padding:0.1em 0.2em 0.05em 0.4em;
		text-align: left;
	}
	.tfui-titlebar > * {display:inline-block;margin:0;cursor: default;}
	.tfui-titlebar h1, .tfui-titlebar h2, .tfui-titlebar h3,
	.tfui-titlebar h4, .tfui-titlebar h5, .tfui-titlebar h6
	{
		font-size:1.1em;
		line-height: 1.8em;
		text-align:left !important;
		padding:0.1em 0.4em;
	}
	.tfui-titlebar .tfui-button {
		padding:0.1em 0.3em;
		margin-top:0.1em;
		float:right;
	}
	
	.tfui-border {
		border : 1px solid var(--grayscale-d);
	}
	
	.tfui-navbar {
		background-color: var(--grayscale-5);
		color: var(--grayscale-d);
		padding:0 !important;
		text-align: center !important;
		width:100% !important;
		display:table;
		min-height: 30px;
		height:30px;
		cursor: default;
	}
	.tfui-navbar > * {
		margin:0.4em 0 0.4em 0.4em !important;
	}
	.tfui-navLeft, .tfui-navRight, .tfui-navCenter {
		top: 0;
		display: table-cell;
		padding:0.4em 0.6em 0.3em;
	}
	.tfui-navLeft, .tfui-navRight {
		top: 0;
		min-width: 20%;
		max-width: 30%;
		font-size:0.8em;
	}
	.tfui-navLeft {
		left: 0;
		text-align: left;
	}
	.tfui-navCenter {
		float : none;
		text-align:center;
		max-width: 60%;
		text-overflow:ellipsis;
		font-weight:bold;
		letter-spacing:0.05em;
	}
	.tfui-navRight {
		right: 0;
		text-align:right;
	}
	.tfui-navbar .tfui-button {background-color:var(--grayscale-7);color:var(--grayscale-f);border-color:var(--grayscale-8);}
	.tfui-navbar .tfui-button:hover {background-color:var(--grayscale-8);}
	.tfui-navbar table {display:inline-table;position:relative;top:7px;}
	.tfui-navbar form {display:inline;}
	.tfui-navbar .tfui-button-group .tfui-button {color:var(--grayscale-3) !important;font-weight: normal;border-color: var(--grayscale-b) !important;}
	.tfui-navbar .tfui-button-group .tfui-button-pressed {background-color:var(--grayscale-f) !important;border-color:var(--grayscale-f) !important;}
	
	.bg-blue {background-color:var(--light-blue) !important;border-color: var(--light-blue);}
	.bg-blue:hover {background-color:var(--light-blue-hover) !important;}
	
	.tfui-sidebar {
		font-size: 0.8em;
/*		min-width: 10%;
		max-width: 40%;*/
		background-color: var(--light-blue-hover);
	}
	.tfui-sidebar:first-child {margin-top:5px;}
	.tfui-sidebar:last-child {margin-bottom:5px;}
	.tfui-sidebar > * {margin:auto 5px;}
	
	.tfui-header1 {font-size:1.4em;}
	.tfui-header2 {font-size:1.2em;}
	.tfui-header3 {font-size:1.1em;}
	.tfui-header1, .tfui-header2, .tfui-header3
	{
		font-family: Verdana, sans-serif;
		letter-spacing: 0.08em;
		margin: 1em 0 0.6em 1em;
		font-weight: bold;
		cursor: default;
	}
	
	.tfui-box-shadow {
		box-shadow			: 4px 6px 6px var(--grayscale-5);
	}
	.tfui-box-shadow-dark {
		box-shadow			: 4px 6px 6px var(--grayscale-3);
	}
	
	.tfui-pointer {
		cursor: pointer;
	}
	
	/* CLASSES FOR GENERIC USAGE (TABLES ETC.) */
	
	.tfui-table-info {
		border-spacing: 0;
		font-size:0.9em;
	}
	.tfui-table-info th, .tfui-table-info td {
		padding : 0.3em 0.4em 0.1em;
	}
	.tfui-table-info th {
		font-weight: bold;
		text-align: right;
	}
	.tfui-table-info td {
		text-align: left;
	}
	.tfui-row-selected {
		background-color: var(--blue);
	}
	.tfui-row-hover {
		background-color: var(--grayscale-d);
	}
	
	.tfui-textLink, a {
		cursor  : pointer;
		color	: var(--blue);
		display : inline-block;
		text-decoration: none;
	}
	.tfui-textLink:hover, a:hover {
		color: var(--orange);
	}
	.tfui-button {
		display:inline-block;
		padding:0.3em 0.7em 0.3em 0.7em;
		text-align:center;
		cursor:pointer;
		font-family:Geneva, Arial, sans-serif;
		color: var(--grayscale-8);
	}
	.tfui-button:hover {
		background-color: var(--tf-button-hover);
	}
	.tfui-button:disabled, .tfui-button[disabled], .tfui-button[disabled]:active, .tfui-disabled {
		cursor: not-allowed;
		color: var(--grayscale-8);
		background-color: var(--tf-button-hover);
	}
	.tfui-button-pressed {
		background-color: var(--tf-button-active) !important;
		border-color: var(--tf-button-active);
	}
	
	.tfui-button-group > * {
		margin:0 !important;
		white-space: nowrap;
		clear:both;
	}
	
	.tfui-button-group .tfui-button {--borad: 3px;}
	.tfui-button-group[data-tf-vstacking="horizontal"][data-tf-position="above"] [data-tf-vrole="button"]:first-of-type {border-radius: var(--borad) 0 0 0;}
	.tfui-button-group[data-tf-vstacking="horizontal"][data-tf-position="above"] [data-tf-vrole="button"]:last-of-type {border-radius: 0 var(--borad) 0 0;}
	.tfui-button-group[data-tf-vstacking="horizontal"][data-tf-position="below"] [data-tf-vrole="button"]:first-of-type {border-radius:0 0 0 var(--borad);}
	.tfui-button-group[data-tf-vstacking="horizontal"][data-tf-position="below"] [data-tf-vrole="button"]:last-of-type {border-radius:0 0 var(--borad) 0;}
	.tfui-button-group[data-tf-vstacking="vertical"][data-tf-position="left"] [data-tf-vrole="button"]:first-of-type {border-radius: var(--borad) 0 0 0;}
	.tfui-button-group[data-tf-vstacking="vertical"][data-tf-position="left"] [data-tf-vrole="button"]:last-of-type {border-radius: 0 0 0 var(--borad);}
	.tfui-button-group[data-tf-vstacking="vertical"][data-tf-position="right"] [data-tf-vrole="button"]:first-of-type {border-radius: 0 var(--borad) 0 0;}
	.tfui-button-group[data-tf-vstacking="vertical"][data-tf-position="right"] [data-tf-vrole="button"]:last-of-type {border-radius: 0 0 var(--borad) 0;}
	
	[data-tf-vstacking] .tfui-button-pressed {position: relative;}
	[data-tf-vstacking="horizontal"] .tfui-button-pressed {
		border-top: 3px solid var(--tf-button-pressed-border-bg);
		border-left: 1px solid var(--tf-button-pressed-border-bg);
		border-right: 1px solid var(--tf-button-pressed-border-bg);
	}
	[data-tf-vstacking="vertical"] .tfui-button-pressed {
		border-left: 3px solid var(--tf-button-pressed-border-bg);
	}
	.tfui-button-group[data-tf-srole="tabnav"] {
		position:relative;
		z-index: 2;
	}
	.tfui-button-group[data-tf-vstacking] {
		--margin:0px;
	}
	.tfui-button-group[data-tf-vstacking="horizontal"] {padding-left:1em;margin-bottom: var(--margin);}
	.tfui-button-group[data-tf-vstacking="vertical"  ] {padding-top :1em;margin-right : var(--margin);}
	
	.tfui-viewstack[data-navbuttons-position] {--tfui-pos-offset:-2px;}
	.tfui-viewstack[data-navbuttons-position="above"] {border-top   : 1px solid var(--tf-button-pressed-border-bg);position: relative;top   : var(--tfui-pos-offset);}
	.tfui-viewstack[data-navbuttons-position="below"] {border-bottom: 1px solid var(--tf-button-pressed-border-bg);position: relative;bottom: var(--tfui-pos-offset);}
	.tfui-viewstack[data-navbuttons-position="left" ] {border-left  : 1px solid var(--tf-button-pressed-border-bg);position: relative;left  : var(--tfui-pos-offset);}
	.tfui-viewstack[data-navbuttons-position="right"] {border-right : 1px solid var(--tf-button-pressed-border-bg);position: relative;right : var(--tfui-pos-offset);}

	
	
	ul.tfui-menu-grid, ol.tfui-menu-grid {
		display:block !important;
		border:1px solid var(--grayscale-b);
		margin-left:0;
		padding:0 !important;
		font-size:0;
		text-align:center;
		background-color: var(--grayscale-d);
	}
	
	ul.tfui-menu-grid li, ol.tfui-menu-grid li {
		list-style-type: none;
		text-align:left;
		display:inline-block;
		padding:0.5em 0 0.5em 0.4em;
		border:1px solid var(--grayscale-d);
		background-color:var(--grayscale-e);
		font-size:14pt;
	}
	.tfui-menu-grid-cols1 li {width:99.5%;}
	.tfui-menu-grid-cols2 li {width:48.7%;}
	.tfui-menu-grid-cols3 li {width:32%;}
	
	ul.tfui-menu-grid li:hover, ol.tfui-menu-grid li:hover {
		background-color: var(--grayscale-f) !important;
		border-color:var(--grayscale-c) !important;
	}
	
	
	.tfui-expandable-menu {
		display:inline-block;
	}
	
	.tfui-expandable-menu .tfui-menu-enabler {
		cursor:pointer;
		text-align:center;
		padding:0.3em 0.3em 0.2em;
	}
	.tfui-expandable-menu .tfui-menu-enabler:hover,
	.tfui-expandable-menu .tfui-menu-enabler-active
	{
		background-color: var(--grayscale-e);
		box-shadow: 2px 3px 5px var(--grayscale-9);
		border:1px solid var(--grayscale-c);
	}
	.tfui-expandable-menu .tfui-menu-enabler-active {
		background-color: var(--grayscale-e);
		box-shadow: 4px 6px 8px var(--grayscale-7) !important;
		
	}
	
	.tfui-expandable-menu .tfui-menu-content {
		display:none;
		position:absolute;
		z-index:20;
		background-color: var(--grayscale-e);
		border:1px solid var(--grayscale-d);
		box-shadow: 4px 6px 8px var(--grayscale-7);
		font-size:0.9em;
	}
	
	.tfui-menu-item {
		display:block;
		cursor:pointer;
		padding:0.3em 0.4em;
		border-bottom:1px solid var(--grayscale-b);
	}
	.tfui-menu-item:hover {
		background-color: var(--grayscale-f) !important;
	}
	
	
	
	
	.label-info {
		background-color: var(--grayscale-e);
		padding: 10px;
		outline: 1px solid var(--grayscale-c);
	}
	
	.tfui-round			{border-radius: 4px;}
	.tfui-stacking-vertical-child {display:block;}
	.tfui-stacking-horizontal-child {display:inline-block;}
	
}



:root {
	--orange : #de9821;
	--ht-blue: #0047BB;
	--ht-blue-hover: #055dec;
	--ht-red: #b32436;
	--ht-red-hover: #98202f;
	--ht-primary-color: var(--ht-blue);
	--ht-secondary-color: #333;
}

@media print, screen {
	
	.sml9 {font-size: 0.9em;}
	.sml8 {font-size: 0.8em;}
	.sml7 {font-size: 0.7em;}
	.sml6 {font-size: 0.6em;}
	.sml0 {font-size: 1.0em;}
	.lrg0 {font-size: 1.0em;}
	.lrg1 {font-size: 1.1em;}
	.lrg2 {font-size: 1.2em;}
	.lrg3 {font-size: 1.3em;}
	.lrg4 {font-size: 1.4em;}
	.lrg5 {font-size: 1.5em;}
	
	
	/* -- OVERRIDES TO THE GENERIC CSS -- */
	
	.section, .subsection {
		font-weight: 200;
		letter-spacing: 0.1em;
		padding: 0.5em 0 0.3em;
	}
	.section {font-size: 1.6em;}
	.subsection {font-size: 1.3em;}
	
	
	/* -- ENTRIES RELATED TO THIS APPLICATION -- */
	
	.table_info {
		border-spacing: 0;
	}
	.table_info thead th, .table_info thead td {
		font-weight: bold;
	}
	.table_info th, .table_info td {
		padding: 0.4em 0.7em;
	}
	.table_info th {
		text-align: right;
	}
	.table_info td {
		text-align: left;
	}
	.table_info .section {
		font-weight: bold;
		padding: 0.4em;
		text-align: center;
	}
	
	
	.textLink:hover
		{color:var(--ht-secondary-color);}
	#ui_user_menu .textLink:hover {color:var(--ht-secondary-color);}
		
	.orange_header,
	.blue_header,
	.grey_header
			{display:block;font-size:1.1em;font-weight:bold;margin-top:10px;padding:0.4em 0.8em 0.5em;text-shadow: 0 0 3px #888;}
	.orange_header {background:var(--ht-secondary-color);color:white;}
	.blue_header {background:#6b97ef;color:white;}
	.grey_header {background:#bbbbbb;color:white;}
	
	.button-blue {background-color: var(--ht-blue);}
	.button-blue:hover {background-color: var(--ht-blue-hover) !important;}
	.button-orange {background-color: var(--ht-secondary-color);}
	.button-orange:hover {background-color: var(--ht-red-hover) !important;}
	
	.btn_trip_segment {background:#adc9ed;display:block;margin:5px 0;cursor:pointer;border-radius:6px;padding:6px;}
	.trip_segment_selected {background:#a7d492;}
	.standout-font {font-family:'Lucida sans unicode', Helvetica, Arial, sans-serif;}
	
	.errorMessage, .warningMessage, .infoMessage
		{padding:8px 14px;font-weight:bold;border-width:1px;border-style:solid;border-radius:4px;margin:4px 8px;}
	.errorMessage	{background:#F2DEDE;border-color:#EED3D7;color:#B94A48;}
	.warningMessage	{background:#FCF8E3;border-color:#FBEED5;color:#C09853;}
	.infoMessage	{background:#D9EDF7;border-color:#BCE8F1;color:#3A87AD;}
	.successMessage	{background:#DFF0D8;border-color:#D6E9C6;color:#468847;}
	.inputError		{border:3px solid #a55;}
	.invalid		{color:#aaa;}
	
	.navbar {background:var(--ht-primary-color);padding:0 !important;text-align: left !important;width:100%;color:#eee;min-height: 34px;}
	.navbar > * {margin:0.4em !important;}
	.navbar .button {background:white;color:var(--ht-secondary-color);font-size: 0.8em;font-weight: bold;}
	.navbar .button:hover {color: white;background:var(--ht-secondary-color) !important;}
	.navbar .button[role=link2view] {display:inline-block;padding:0.2em 0.4em;border-radius: 0.4em;color:var(--dark-grey);}
	.sidebar {background: white;}
	
	
	.webticket, .trenotaxi_booking {border:2px solid #bbb;page-break-inside:avoid;margin-top:0.5em;font-family:monospace;font-size:1em;width:100% !important;}
	.webticket * th,
	.webticket .half,
	.trenotaxi_booking * th,
	.trenotaxi_booking .half
				{font-size:0.7em !important;text-align:right !important;padding-right:1em;font-weight:normal;}
	
	.tkt_invalid {color: #900;font: bolder 4em Georgia;letter-spacing: 0.2em;transform: rotate(-20deg);
		text-align:center;margin-left: 200px;margin-top: 100px;opacity: 0.6;position: absolute;z-index: 2;
	}
	
	.voucher {width:100%;font-size:1.2em;font-family:monospace;}
	.voucher th {text-align:right;font-size:0.7em;}
	.voucher td {text-align:left;padding:0.1em 0.4em;}
	.voucher {margin-top:2em;border:2px solid #bbb;background:#FFF6E0;}
	.voucher th, .voucher td {padding:0.4em 0.8em;}
	.voucher_id {font-weight:bold;font-size:1.6em;background:#EDDDCE;}
	
	.webticket .main_info			{text-align:left;font-size:1em !important;padding:0.4em 1em;font-weight:bold;letter-spacing:0.05em;}
	.webticket .title_title			{text-align:center !important;font-weight:bold;}
	.webticket .border_bottom > td	{border-bottom:1px solid #eee;}
	.webticket .border_right		{border-right:1px solid #eee;}
	.webticket .bggrey				{background:#eee;}
	.webticket .standout			{background:#ddc;font-weight:bold;text-align:center;}
	.webticket .standout2			{background:#eee;font-weight:bold;padding:0.2em 1em;}
	.webticket .trip_segment > td	{padding: 0.1em 0.2em;}
	
	.center		{text-align:center;}
	
	.sb_treno {padding: 0.4em 0.4em 0.4em 1.2em;border-left: 6px solid white;background: #fff;font-size: 1.1em;}
	.sb_treno:hover {background-color: #f3f3f3;}
	.sb_treno_selected {border-left:6px solid var(--ht-secondary-color);background: #f3f3f3;}
	.sb_treno_selected date {}
	.sb_treno .row {display: flex;flex-direction: row;align-items: center;padding: 2px 0;justify-content: space-between;}
	.sb_treno .sec {display: block;width:4.5em;color:#777;font-size: 0.8em;}
	.sb_treno .pri {display: block;font-weight: bold;}
	.sb_treno .treno {color:#777;font-size:1.4em;}
	.sb_treno_selected .treno {color:var(--ht-secondary-color);}
	.sb_treno .seats {color:#77e;font-family: monospace;}
	.seat_tag {
		padding: 0.2em 0.3em 0.1em;
		background-color: var(--ht-secondary-color);
		color: white;
		display: inline-block;
		margin: 3px 5px;
		border-radius: 4px;
		font-weight: bold;
	}
	
	.hasDeparted {cursor: not-allowed;background-color: transparent !important;}
	.hasDeparted * {color: var(--grayscale-a);}
	.not_bookable {font-weight:bold;text-align: center;padding: 0.3em;color:var(--grayscale-c) !important;}
	
	.dromologio {
		border-color: var(--grayscale-d);
	}
	.dromologio:not([class*="hasDeparted"]):hover div {background: var(--light-green);}
	.dromologio_selected div {background:var(--blue);color: var(--grayscale-f);} /** #699be6 / #6b97ef */
	.dromologio_selected em {color: var(--blue);} /** #699be6 / #6b97ef */
	.dromologio_selected:hover em {color: var(--light-green);} /** #699be6 / #6b97ef */
	.dromologio_selected .dim {color: white !important;}
	.dromologio_selected .dromologio-standout {color: var(--dark-grey) !important;}
	.dromologio_selected .treno_info_link {color:white;}
	
	.trainose_logo {margin-left:1em;}
	.webticket .tkt_invalid {color: #900;font: bolder 4em Georgia;letter-spacing: 0.2em;
		transform: rotate(-20deg);
		text-align:center;margin-left: 200px;margin-top: 40px;opacity: 0.6;position: absolute;z-index: 2;
	}
	
	.table_info td {text-align:center;}
	
	table.prebooking_info {background:#ddd;width:100%;border-spacing: 0;font-size:0.9em;outline:1px solid #787;}
	table.prebooking_info thead {background:#9a9;padding:0.1em 0.3em;text-align:center;vertical-align: bottom;}
	table.prebooking_info thead th {border-bottom:2px solid #787;border-right:1px solid #787 !important;}
	table.prebooking_info th,
	table.prebooking_info td
		{text-align:center;border-right:1px solid #ccc;}
	
	#ui_sta8moi_helper {
		display: none;
		position: absolute;
		z-index: 300;
		top:0;
		right:0;
		width: 250px;
		height: 100%;
		max-width:250px;
		max-height:100%;
		background:#777;
		color:#eee;
		overflow:auto;
		box-shadow:-2px 0 6px 0 #777;
	}
	#ui_sta8moi_helper td {
		padding:3px 4px 2px 4px;
		border-bottom:1px solid #888;
	}
	#ui_sta8moi_helper td:hover {background:#888;}
	
	.ih_marked_selection {
		background: #6b97ef;
		border-radius: 3px;
	}
	
	.document-container {
		width:50em;
		max-width:50em;
		text-align:left;
		margin:2em auto;
		padding:1em;
		border-radius:0.3em;
		border:1px solid #f4f4f4;
	}
	
	abbr {border-bottom:1px dotted #333;}
	
/*	FROM HERE ON LIES CSS SPECIFIC TO INDIVIDUAL PAGES	*/
	
	.offer_3 {border-color: #B25B5B !important;}
	.offer_4 {border-color: #DDB23B !important;}
	.offer_5 {border-color: #6780B2 !important;}
	.offer_6 {border-color: #f8b541  !important;}
	
	#vpw3_people {border-spacing:0;}
	#vpw3_people td {border:1px solid #eee;padding:0.2em 0.8em;}
	#w3ekpt {border-spacing:0;font-size:0.8em !important;}
	#w3ekpt td {background:#777; cursor:pointer;border:1px solid #999;padding:0.3em;color:#eee;}
	.w3_hover, .hover {color:#ddd;background:#999 !important;outline: 1px solid var(--ht-secondary-color);border-color:var(--ht-secondary-color) !important;}
	.selected {background:var(--ht-secondary-color) !important;border-color:var(--ht-secondary-color) !important;color:#fff;outline:2px solid var(--ht-secondary-color);}
	.selectedOp {background:var(--ht-secondary-color) !important;}
	#vp_w3 label.toggle {font-weight:bold;background:#777;color:#fff;padding:4px 8px;cursor:pointer;}
	.w3_top td {border-spacing: 0;border-top:1px solid #888;}
	.w3_bot td {border-spacing: 0;border-bottom:1px solid #888;}
	
	.ui-layout-pane {border-width:0;}
	
	#vp_e1 .tfui-button-pressed {background:#6b97ef !important;color:white !important;}
	#ui_user_menu .textLink {color:white;}
	#vp_x1 .ui-layout-resizer-west,
	#vp_x1 .ui-layout-center
		{background:#fff;}
	.x1_service_ptr
		{background:#f4f4f4;padding:0.6em;cursor:pointer;text-align:right;}
	.x1_service_ptr:hover
		{background:#eee;color:#333;}
	.x1_service_ptr_active {background:var(--ht-secondary-color) !important;color:white;outline:3px solid var(--ht-secondary-color);}
	
	.vpc02_center
		{width:80%;max-width:800px;margin:0 auto;}
	#vpc02_regtable
		{border-spacing:0;font-size:1.2em;width:100%;text-align:left;}
	#vpc02_regtable td.help {width:150px;font-size:0.8em;}
	#vpc02_regtable th,
	#vpc02_regtable td
		{padding:0.3em;}
	#vpc02_regtable th {text-align:right;font-weight:bold;max-width:35%;}
	#vpc02_regtable input,
	#vpc02_regtable select
		{width:99%;font-size:1.2em;}

	.vpc13_center
	{width:80%;max-width:800px;margin:0 auto;}
	.vpc15_center
	{width:80%;max-width:800px;margin:0 auto;}
	#vpc13_regtable
	{border-spacing:0;font-size:1.2em;width:100%;text-align:left;}
	#vpc13_regtable td.help {width:150px;font-size:0.8em;}
	#vpc13_regtable th,
	#vpc13_regtable td
	{padding:0.3em;}
	#vpc13_regtable th {text-align:right;font-weight:bold;max-width:35%;}
	#vpc13_regtable input,
	#vpc13_regtable select
	{width:99%;font-size:1.2em;}
	
	#vpc03_update input {font-size:1.1em;}
	#vpc15_update input {font-size:1.1em;}
	
	#vpw2_legend td {font-size:0.8em;}
	#vp_w12 .delay {color:#933;}
	#vp_w15 .table_info td {text-align:left;}
	.oikogekeiakes_ekptwseis thead th {text-align:center;background:#eee;}
	.oikogekeiakes_ekptwseis tbody th {text-align:right;font-size:0.9em;background:#f4f4f4;}
	.oikogekeiakes_ekptwseis tbody td {text-align:center;}
	
	#btn_geolocate {height:1.5em;position:relative;bottom:-0.2em;cursor:pointer;}
	
	#vpw13_results {padding:0 1em;}
	#vpw14_vouchers {padding:0 1em;}
	
}

/*@media print {*/
@media print {
	.no_print {display:none !important;}
	.print_only {display:block}
	
	.table_info th, .table_info td {padding:1mm 2mm;}
	.table_info th {text-align:right;font-weight:bold;}
	.table_info td {text-align:left;}
	
	#vp_w13 {background:#fff !important;margin:0;padding:0;top:0 !important;}
	#vpw13_results, #vp_w14 .ui-layout-center {background:#fff !important;margin:0;padding:0;top:0 !important;min-height:100%;}
	.titlos, .voucher {max-width:17.8cm;font-size:0.4cm;margin:0.7cm 0;}
	#vpw14_vouchers {padding:0;}
	
	.document-container {
		border-width:0;
		text-align:justify;
		font-size:12pt;
	}
}


@media screen {
	
	.menu_enablers_container {display:flex;flex-direction: row;align-items: center;}
	.menu_enablers_container > * {margin:0px !important;padding:4px 6px 2px 4px;}
	.menu_enablers_container > *:hover {background-color: var(--ht-secondary-color);}
	.user_active {  color:var(--ht-secondary-color);  }
	.user_active:hover {  background-color: white;  }
	
	
	#sb_sta8meyseis {
		display:none;
		position:fixed;
		z-index:200;
		top:0px;
		right:0px;
		width:100%;
		height:100%;
		width:20em;
		background:#777;
		box-shadow: -1px 0px 5px #555;
		overflow:auto;
		color:#eee;
	}
	#sb_sta8meyseis .header,
	#sb_sta8meyseis table
	{
		margin:10px;
		border-spacing: 0px;
	}
	#sb_sta8meyseis table {font-size:0.8em;width:22em;}
	#sb_sta8meyseis th,
	#sb_sta8meyseis td
	{
		text-align:left;
		padding:3px 4px;
	}
	#sb_sta8meyseis th {background:#555;}
	#sb_sta8meyseis .dly {color:var(--ht-secondary-color);}
	#sb_sta8meyseis td {border-bottom:1px solid #888;}
	#sb_sta8meyseis tbody tr:hover {background:#888;}
	
	#loginUI
	{
		font-size:1em;
		background:#6b97ef;
		border-bottom-width:0px !important;
		box-shadow:6px 6px 9px #444;
		-moz-box-shadow:6px 6px 9px #444;
		-webkit-box-shadow:6px 6px 9px #444;
	}
	#loginUI form > *
	{
		margin:3px 0px;
	}
	#loginUI input,
	#loginUI button,
	#loginUI .label
		{display:block;text-align:left;}
	#loginUI input
		{border:1px solid #bbb;font-weight:bold;font-size:1.2em;width:100%;}
	#loginUI .label
		{color:#eee;font-weight:bold;}
	
	#app_main_menu,
	#ui_user_menu
	{
		display:none;
		position:fixed;
		z-index:200;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		overflow: hidden;
	}
	
	.menu_content {
		font-size:0.85em;
		height:100%;
		width:100%;
		background:#6b97ef;
		overflow:auto;
	}
	.menu_column {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size:1.4em;
		padding: 0em 1em;
	}
	.menu_column .large_link {
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor:pointer;
		color:white;
		background-color: rgba(255, 255, 255, 0.24);
		padding:1em 1.4em;
		min-height: 11em;
	}
	.menu_column .large_link:hover {
		color:#6b97ef;
		background-color: #fff !important;
	}
	.menu_column .large_link .fa {
		font-size: 5em;
		padding:0.3em;
	}
	
	
	.menu_content .lang {
		cursor:pointer;
		display:inline-block;
		color:#fff;
		position:relative;
		bottom:5px;
		padding:5px 1px 5px 12px;
	}
	.menu_content .lang:hover {color:var(--ht-secondary-color);}
	
	#app_main_menu ul
	{
		position:relative;
		color:#fff;
		list-style-type: none;
		padding:0px;
		margin:0px;
	}
	#app_main_menu li {padding:0.6em 0.8em;}
	#app_main_menu li.header {padding:0.4em 0.6em;cursor:default;color:var(--ht-secondary-color);font-weight:bold;background:#6a6a6a;}
	#app_main_menu li.link {cursor:pointer;}
	#app_main_menu li.link:hover {color:#6b97ef;background-color: white;}
	#app_main_menu ul.user .header {background:var(--ht-secondary-color);color:#555;}
	
	#vpe1_user {padding:0.6em 0.6em;background:#f7f7f7;padding:0.4em;border-radius:0.3em;margin:1.4em 0em;}
	#vpe1_user span {padding:0em 0.4em;}
	#vpe1_user .textLink {padding:0.1em 0.4em;}
	#vpe1_user .textLink:hover {background:white;}
	#vpe1_user input {height:1.5em;border-radius:3px;padding:0.1em 0.3em;background:#eee;border:1px solid #ddd;width:95%;}
	#vpe1_user button {display:inline-block;width:100%;}
}


@media screen, print {
	
	html {
		--ht-bg: #c4d1ea;
		--fs-bg: #0047bb;
		--ht-red-pale: #9B5A6A;
		--border-radius: 1vw;
		--border-radius-sml: 0.6vw;
		
		--padu-border: #606060;
		--padu-light-grey: #e9e7e7;
		--padu-blue: #004f9f;
	}
	
	#vp_e1
	{
		text-align:left;
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		padding:5px 10px;
	}
	#vpe1_welcome * {box-sizing: border-box;}
	
	#vpe1_welcome .tlc
	{
		width:100%;
		border-spacing:0;
	}
	#vpe1_welcome tr
		{vertical-align: top;}
	#vpe1_welcome img.menu_link
		{height:1.34em;position:relative;bottom:-0.3em;}
	
	#vpe1_welcome .left_pane
		{width:230px;font-size:0.9em;} /*width:180px;*/
	#vpe1_welcome .left_pane ul
		{list-style-type: none;padding:0;}
	#vpe1_welcome .left_pane li
		{padding:0.3em 0.6em;border-bottom:1px solid #f4f4f4;}
	#vpe1_welcome .left_pane li.header
		{font-weight:bold;}
	#vpe1_welcome .left_pane li.link
		{cursor:pointer;}
	#vpe1_welcome .left_pane li.link:hover
		{background:#eee;}
	
	#vp_e1 .navbar .button {border: 1px solid var(--ht-secondary-color);}
	
	#e1_search_bar {
		border-radius: var(--border-radius);
		height:6em;
		min-height:6em;
		padding: 2em 1em 0.2em;
		width:100%;
		margin:1em auto 0;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background-color: var(--padu-light-grey);
	}
	#e1_search_btn {
		font-size: 1em;
		position: relative;
		top: 1em;
		padding: 0.6em 4em;
		/*border-radius:0;*/
		background-color: var(--ht-blue);
	}
	#e1_search_btn:hover {
		background-color: black !important;
		color: white !important;
	}
	
	#e1_ht {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		/*background-color: var(--ht-bg);*/
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}
	#e1_fs {
		margin: 0;
		background-color: var(--ht-blue);
		border-radius: var(--border-radius);
		padding: 0;
		/*border: 2px solid #000;*/
		color: white;
		display: flex;
		flex-direction: row;
		flex-grow: 15;
		box-sizing: border-box;
	}
	
	.link_ht {
		border-radius: 0.4vw;
		padding: 0.6vw;
		border: 1px solid var(--ht-blue);
		color: var(--ht-blue);
		background-color: white;
		text-align: center !important;
		cursor: pointer;
	}
	.link_ht:hover {
		background-color: #000;
		color: white;
		border-color: #000;
	}
	#vpe1_welcome .the_main_show
	{
		display: flex;
		flex-direction: column;
		gap: 0 10px;
		padding: 1vw 0 0 1vw;
		min-height: 2em;
		border-radius: var(--border-radius);
		margin:2em 0 1em;
		align-items: inherit;
		justify-content: center;
	}
	#vpe1_welcome .center_pane .the_main_show > *,
	#vpe1_welcome .center_pane .secondary_shows > *
	{
		/*margin:10px;*/
		display:block;
		/*padding:5px 10px;*/
		border-radius: var(--border-radius-sml);
		text-align:left;
	}
	#vpe1_welcome .secondary_shows .tfui-panel {
		background-color: #eee !important;
		border-radius: 1em;
		border-width: 0 !important;
		margin-top: 0;
	}
	#vpe1_welcome .center_pane .secondary_shows
	{
		display:inline-block;
		width:100%;
		height: 14em;
		margin:0;
		padding:0;
	}
	
	.fs_header,
	.fs_subheader,
	.fs_info
	{
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		text-align: left;
	}
	.fs_header {
		font-weight: 700;
		font-size: 1.5em;
		margin: 0.4em 0 0.3em;
	}
	.fs_subheader {
		font-size: 1.4em;
		font-weight: 400;
	}
	.fs_info {
		font-size: 1em;
		font-weight: 300;
	}
	.fs_button_primary {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		background-color: var(--ht-red);
		color: white;
		font-size: 1.5em;
		border-radius: var(--border-radius);
		/*border: 1px solid #000;*/
		font-weight: 600;
		padding: 0.5vw 2vw;
	}
	.fs_button_primary:hover {
		background-color: #ffffff;
		color: #000;
	}
	
	.fs_button_secondary
	{
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		background-color: var(--fs-bg);
		border: 1px solid white;
		/*border-radius: 0 !important;*/
		background-color: transparent;
		color: white;
		font-size: 1em;
	}
	.fs_button_secondary:hover {
		background-color: white;
		color: black;
	}
	
	#vpe1_welcome .center_pane .header {
		font-size:1.1em;
		font-weight: 400;
		margin-bottom:0.2em;
		padding: 0.7vh 1.4vh;
	}
	#vpe1_welcome .center_pane .content {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size:1.0em;
		font-weight: 400;
		line-height:1.2em;
		text-align:left;
	}
	
	.e1_footer {
		display: flex;
		flex-direction: row;
		padding: 0.3vw;
		flex-grow: 1;
		align-items: flex-start;
		justify-content: space-between;
	}
	.e1_footer .link {
		font-size: 0.8em;
		max-width: 17em;
		text-align: left;
	}
	
	#vp_e1 .chosen-container {
		font-size: 16px;
	}
	
	.swap_lang_icon:hover {color:white;}
	
	#mapNavButtons {
		position: absolute;
		right:2em;
		bottom: 2em;
		display: flex;
		flex-direction: column;
		font-size: 0.8em;
	}
	#mapNavButtons .button {
		--shc: #333;
		--shs: 1px;
		--shn: -1px;
		background-color: white !important;
		color: var(--shc);
		padding: 0.5vw;
		font-size: 0.8em;
	}
}

@media
	only screen and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 2.5),
	only screen and (max-width: 1200px) and (min-device-pixel-ratio: 2.5),
	only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 2)
{
	#e1_ht, #e1_fs {
		flex-direction: column;
		flex: 1 2;
	}
	#e1_ht > *, #e1_fs > * {
		width: 100%;
		max-width: 100%;
		flex: 1 1;
	}
	
	#vp_e1 header {flex-wrap: wrap;}
	#e1_search_bar {
		flex-direction: unset;
		max-height: unset;
		height: unset;
		min-height: 11em;}
	#e1_search_btn {
		position: initial;
		top: unset;
		display: block;
	}
	body, .flex-viewPane {height: auto;}
}