/* @import "./style1.css"; */

@font-face { 
font-family: "barkentina"; 
src: url("./fonts/barkentina.woff2");
}

@font-face { 
font-family: "sourcesanspro";
src: url("./fonts/sourcesanspro-regular.woff2"); 
}


@font-face { 
font-family: "libelsuit";
src: url("./fonts/libel-suit-regular.woff2"); 
}

@font-face { 
font-family: "poppins";
src: url("./fonts/poppins-regular.woff2"); 
}

* { 
box-sizing: border-box; 
	margin: 0; 
	padding: 0;
}

body { 
	background: var(--bodyBG);
	font: var(--bodyFont);
	color: var(--bodyFontColor);
	margin: 0 auto;
}

.flex-header-wrapper {
	display:flex;
	margin: auto;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--FLEXHeaderWrapperGAP);
}

.flex-header-wrapper > * {
	flex: 0 0 auto;
}

.flex-header-wrapper > *:last-of-type {
	margin-bottom:  var(--FLEXHeaderWrapperGAP);
}



.page-header {
	display:flex;
	align-items: center;
	justify-content: center;
	flex-basis: 100%;
	font: var(--pageHeaderFont);
	width: var(--pageHeaderWidth);
	max-width: var(--pageHeaderMaxWidth);
	color: var(--pageHeaderFontColor);
	background: var(--pageHeaderBG);
	border: var(--pageHeaderBorder);
	border-radius: var(--pageHeaderBorderRadius);
	padding: var(--pageHeaderPadding);
}

.newLocationWrapper {
	flex-basis:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.newLocationHeader {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--FLEXnewLocationHeaderGAP);
	margin:auto;
	border: var(--newLocationHeaderBorder);
	border-radius: var(--newLocationHeaderBorderRadius);
	padding: var(--newLocationHeaderPadding);
	width: var(--newLocationHeaderWidth);
	background: var(--newLocationHeaderBG);
	color: var(--newlocationHeaderFontColor);
	font: var(--newLocationHeaderFont);
}


.newLocationHeader .kreis {
	display: flex;
	justify-content: center;   
	align-items: center;
	transform: var(--newLocationHeaderKreisTransform);
	height: var(--newLocationHeaderKreisHeight);
	width: var(--newLocationHeaderKreisWidth);
	border-radius: var(--newLocationHeaderKreisBorderRadius);50%;
	background: var(--newLocationHeaderKreisBG);
	border: var(--newLocationHeaderKreisBorder);
	text-align:center;
	z-index: 1000;
}



.liveLocationHeader {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: var(--FLEXnewLocationHeaderGAP);
	margin:auto;
	margin-top: 1em;
	border: var(--newLocationHeaderBorder);
	border-radius: var(--newLocationHeaderBorderRadius);
	padding: var(--newLocationHeaderPadding);
	width: var(--newLocationHeaderWidth);
	background: linear-gradient(#FF0000 0%,#990000 100%);
	color: var(--newlocationHeaderFontColor);
	font: var(--newLocationHeaderFont);
}


.liveLocationHeader .kreis {
	display: flex;
	justify-content: center;   
	align-items: center;
	transform: var(--newLocationHeaderKreisTransform);
	height: var(--newLocationHeaderKreisHeight);
	width: var(--newLocationHeaderKreisWidth);
	border-radius: var(--newLocationHeaderKreisBorderRadius);50%;
	background: linear-gradient(#FF0000 0%,#990000 100%);
	_border: 1px solid gray;
	text-align:center;
	z-index: 1000;
}


.newLocationForm {
	font: var(--newLocationFormFont);
	display: flex;
	align-items: center;
	margin: auto;
	flex-wrap: nowrap;
	flex-direction: column;
	overflow: hidden;
	background: var(--newLocationFormBG);
	width: var(--newLocationFormWidth);
	max-width: var(--newLocationFormMaxWidth);
	height: var(--newLocationFormHeight);
	border: var(--newLocationFormBorder);
	border-radius: var(--newLocationFormBorderRadius);
	color: var(--newLocationFormFontColor);
	transition: var(--newLocationFormTransition);
	
}

.newLocationForm > div {
	flex-basis: 0 0 100%;
}

.newLocationForm > div:first-of-type {
	margin: var(--newLocationFormFirstOfTypeMargin);
}

.newLocationForm > div:last-of-type {
	margin: var(--newLocationFormLastOfTypeMargin);
}

.newLocationForm input {
	border: var(--newLocationFormInputFieldBorder);
	border-bottom: var(--newLocationFormInputFieldBorderBottom);
	font: var(--newLocationFormInputFieldFont);
	text-align: var(--newLocationFormInputFieldTextAlign);
	width: var(--newLocationFormInputFieldWidth);
	height:var(--newLocationFormInputFieldHeight);
	margin: var(--newLocationFormInputFieldMargin);
}

.newLocationForm button {
	font: var(--newLocationFormButtonFont);
	color: var(--newLocationFormButtonFontColor);white;
	padding: var(--newLocationFormButtonPadding);8px 20px 8px 20px;
	border: var(--newLocationFormButtonBorder);none;
	border-radius: var(--newLocationFormButtonBorderRadius); 8px;
	background: var(--newLocationFormButtonBG); linear-gradient(#d3d3d3 0%,#8a8a8a 100%);
	width: 200px;
}

@keyframes newLocationFormButtonAnimation {
	0% {
		transform: scale(1); 
		background: linear-gradient(#d3d3d3 0%,#8a8a8a 100%);
		background-color: gray;
	}
	100% { 
		transform: scale(1.2); 
		background: linear-gradient(#b3dd52,#9db800);
		background-color: #9db800;
	}
}

.newLocationMessageWrapper {
	margin-top: 1rem;
	margin-bottom: 1rem;
	overflow:hidden;
	height: 0;
	background: #607d8b;
	border-radius: 5px;
	width:80%;
	transition:height 0.4s ease-in-out;
}


.newLocationMessage {
	padding: 10px;
}


.flexStationContainerWrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
    margin: auto;
	gap: var(--flexStationContainerWrapperGAP);
}

.flexElement {
	width: var(--flexElementWidth);
	max-width: var(--flexElementMaxWidth);
	margin: var(--flexElementMargin);
	margin-bottom: 1rem;
}

.flexElement:last-of-type {
	margin-bottom: 2rem;
}

.stationTableSettings {
	width: var(--stationTableSettingsWidth);
	background: var(--stationTableSettingsBG);
	border-radius: var(--stationTableSettingsBorderRadius);
	overflow:hidden;
	transition: var(--stationTableSettingsTransition);
	font: var(--stationTableSettingsFont);
	color: var(--stationTableSettingsColor);
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--flexStationTableSettingsGAP);
	height:0;
}


.stationTableSettings .settingsHeader {
	margin: var(--stationTableSettingsHeaderMargin);
	border-radius: var(--stationTableSettingsHeaderBorderRadius);
	background: var(--stationTableSettingsHeaderBG);
	width: var(--stationTableSettingsHeaderWidth);
	padding: var(--stationTableSettingsHeaderPadding);
	text-align: var(--stationTableSettingsHeaderTextAlign);
	color: var(--stationTableSettingsHeaderColor);
	box-shadow: var(--stationTableSettingsHeaderBoxShadow);
	font: var(--stationTableSettingsHeaderFont);
}


.stationTableSettings button:last-of-type {
	margin-bottom: 1rem;
}

.stationTableSettings .optionElement {
	width: var(--stationTableSettingsOptionElementWidth);
	display:flex; 
	flex-direction: column;
	align-items:center;
}

.stationTableSettings .optionElementHeader {
	width: var(--stationTableSettingsOptionElementHeaderWidth);
	border: var(--stationTableSettingsOptionElementHeaderBorder);
	border-bottom: var(--stationTableSettingsOptionElementHeaderBorderBottom);
	border-radius: var(--stationTableSettingsOptionElementHeaderBorderRadius);
	background: var(--stationTableSettingsOptionElementHeaderBG);
	color: var(--stationTableSettingsOptionElementHeaderColor);
	padding: var(--stationTableSettingsOptionElementHeaderPadding);
	font: var(--stationTableSettingsOptionElementHeaderFont);
	text-align: center;
}

.stationTableSettings input {
	width: var(--stationTableSettingsInputWidth);
	height: var(--stationTableSettingsInputHeight);
	margin: var(--stationTableSettingsInputMargin);
	text-align: var(--stationTableSettingsInputTextAlign);
	border: var(--stationTableSettingsInputBorder);
	border-radius: var(--stationTableSettingsInputBorderRadius);
	padding: var(--stationTableSettingsInputPadding);
	font: var(--stationTableSettingsInputFont);
	background: var(--stationTableSettingsInputBG);
}

.stationTableSettings .optionDisplayAddress {
	width: var(--stationTableSettingsDisplayAddressWidth);
	background: var(--stationTableSettingsDisplayAddressBG);
	border: var(--stationTableSettingsDisplayAddressBorder);
	border-radius: var(--stationTableSettingsDisplayAddressBorderRadius);
	padding: var(--stationTableSettingsDisplayAddressPadding);
	flex-basis: var(--stationTableSettingsDisplayAddressFlexBasis);
	display: var(--stationTableSettingsDisplayAddressDisplay);
	flex-direction: var(--stationTableSettingsDisplayAddressFlexDirection);
	align-items: var(--stationTableSettingsDisplayAddressAlignItems);
}

.stationTableSettings hr {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}


.stationTableSettings .saveProfileButton {
margin:auto;
width: 60%;
border: none;
border-radius: 10px;
padding: 9px;
align-self: center;
flex-basis:100%;
background: linear-gradient(#BCFD4C 0%,#6b8f1a 100%);
color: white;
text-align: center;
_margin-top: 1rem;
font: bold 1.1rem var(--bodyFontFamily);
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


.stationTableSettings .deleteProfileButton {
width: 70%;
border-radius: 10px;
border: none;
padding: 9px;
_margin-top: 1rem;
align-self: center;
flex-basis:100%;
background: linear-gradient(#ff0000,#990000);
color: white;
font: bold 1.2rem var(--bodyFontFamily);
text-align: center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.stationRowsContainer {
	height: 0;
	transition:height .2s ease-in-out;
}

.stationTable {
	width:100%;
	background-color: #3c3c3e;
	_border:1px solid #3c3c3e;
	border-radius: 0 0 5px 5px;
	overflow:hidden;
	transition: calc(var(--animationDurationFadeinStationSettings) * 1ms) ease-in-out;
	height:0;
}


.stationTableCaption {
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	margin: auto;
	_padding:2px;
	border-radius:5px 5px 0 0;
	border:none;
	width: 100%;
	background-color:#686a7f; //#404c5c;
	background: linear-gradient(#d3d3d3 0%,#8a8a8a 100%);
	font: 1.3rem poppins;
	_line-height: 36px;
}

.stationTableCaption .stationTableCaptionSVG {
	margin-top: 5px;
	margin-bottom: 5px;
	flex-basis:10%;
	margin-left:auto;
}


.stationTableCaption .stationTableCaptionLocationName {
	flex-basis:78%;
	margin-left: auto;   
	margin-right: auto;
	text-align: center;
	font-size: 1.1em;
}

.stationTableCaption .emptyCaptionElement {
	flex-basis:12%;
	margin-right: auto;
	font-size: 1.3em;
	vertical-align: middle;
	padding-bottom:5px;
}




.stationTableHeader {
	background: var(--stationTableSettingsBG);
	padding-top:5px;
	padding-bottom: 5px;
    _background-color: #98897A; // #1598CB; // #323E4A; //#7A7A7A; // #425664;
    _background-color: #6d7993;
	font: 1.1rem var(--bodyFontFamily);
	display:flex;
	margin: auto;
	justify-content: center;
	align-items: center;	
	flex-wrap: nowrap;
	text-align:center;
	height:35px;
}

.stationTableHeader div {
flex-basis: 10%;
}

.stationTableHeader div:first-of-type {
flex-basis: 60%;
}

.stationTableHeader > .activeSortOrder {
	transition: font-size 0.6s ease-in;
	color: #00BFFF;
	font-weight: bold;
	font-size: 1.2rem;
}

.stationTableRow {
    display: flex;
	justify-content: center;
	align-items: center;	
	flex-wrap: wrap;
    margin: auto;
	margin-bottom: var(--stationTableRowMarginBottom);
	margin-top: var(--stationTableRowMarginTop);
	text-align:center;
	border-radius: 0;
	background-color: #575759;
font: 1.2rem poppins;
}


.stationTableRow div {

}

.stationDetailsRow {
	flex-basis:100%;
	display:flex;
	margin: auto;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1rem;
	background: gray;
	overflow:hidden;
	transition:all 0.6s ease-out;
	height: 0;
	padding-left:10px;
	padding-right: 10px;
	_margin-top: 1rem;
	font-size:1.2rem;
	border-radius: 0 0 10px 10px;

}

.stationDetailsRow div:first-of-type {
margin-top: 1rem;

}

.stationDetailsRow div:last-of-type {
margin-bottom: 1rem;
flex-basis: 100%;
_background: red;
}

.break {
flex-basis:100%;
background-color:red;
height: 0;
}

.open {
height: auto;
}


.stationTableNameCell {
	padding-top:5px;
	padding-bottom:5px;
	padding-left: 5px;
    flex-basis: 60%;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	margin: auto;
	font-size: 0.7rem;
}

.stationTableNameCell div {
   flex-basis: 100%;
}
.stationTableDistanceCell {
	padding-top:5px;
	padding-bottom:5px;
	font-size: 0.7em;
	flex-basis:10%;
	border-right: 1px solid black;
}
.stationTableE5Cell {
	padding-top:5px;
	padding-bottom:5px;
    flex-basis: 10%;
	font-size: 0.9rem;
}

.stationTableE10Cell {
	padding-top:5px;
	padding-bottom:5px;
    flex-basis: 10%;
	font-size: 0.9rem;
}
.stationTableDieselCell {
	padding-top:5px;
	padding-bottom:5px;
    flex-basis: 10%;
	font-size: 0.9rem;
}


.stationTableNameCell .name {
	text-align: center;
	font-size: 1.4em;
}

.stationTableNameCell .address {
	text-align: center;
	font-size: 0.9em;
	color: #cbced4;
}
.stationTableNameCell .hide {
	display:none;
}

::placeholder {
}


.stationTableFooter {
	margin:0 !important;
	padding:0 !important;
}

.stationTableFooterCell {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	_font-size: 1rem;
	padding: 0px;
	height: 30px;
	background: linear-gradient(#d3d3d3 0%,#8a8a8a 100%);
	_background: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
	_background: linear-gradient(#295e6a,#4797b1);
}

/* ################################### */


.optionDisplayAddress input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

.optionDisplayAddress label {
	cursor: pointer;
	text-indent: -9999px;
	width: 60px;
	height: 25px;
	background-color: grey;
	display: block;
	border-radius: 100px;
	position: relative;
	transition: all 0.3s linear;
}


.optionDisplayAddress label:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 21px;
	height: 21px;
	background: #fff;
	border-radius: 90px;
	transition: all 0.3s linear;
    _transition: background-color 0.3s linear;
}

.optionDisplayAddress input:checked + label {
	background-color: #bada55;
}

.optionDisplayAddress input:checked + label:after {
	left: calc(100% - 2px);
	transform: translateX(-100%);

}

.optionDisplayAddress label:active:after {
	width: 13px;
}

/* ################################### */

.stationLoadingSpinnerContainer {
	text-align:center;
	font-size:1.2rem;
	margin: auto;
	padding: 1rem 0;
	background-color: #3c3c3e;
}

.stationLoadingSpinner {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.stationLoadingSpinner:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: stationLoadingSpinnerAnimation 1.2s linear infinite;
}

@keyframes stationLoadingSpinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ################################### */

.hide {
	display:none;
}

/* ################################### */

.message {
display: none;
flex-direction: column;
wrap: wrap;
background: white;
color: black;
width:80%;
}