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


@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;
}


.header {
	display:flex;
	flex-flow: row wrap;
	width: 100vw;
	max-width: 800px;
	margin: auto;
	text-align: center;
	color: white;
	border-radius: 0 0 8px 8px;
}

.header > .pageTitle {
	font: var(--pageHeaderFont);
	color: #3869a1;
	background: linear-gradient(#fff,#ddd);
	flex: 0 1 100%;
	padding: 8px 0;
}

.header > .addLocationButton {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.2rem, 2.8vw, 1.75rem);
	font-weight: bold;
	padding: 7px 0;
	background: linear-gradient(0deg, #485563, #384350, #29323c);
	border-radius: 0 0 0 8px;
	border-right: 1px solid black;
}


.header > .addLiveLocationButton {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.2rem, 2.8vw, 1.75rem);
	font-weight: bold;
	background: linear-gradient(0deg, #5a6672, #414c58, #29323c);
	border-radius: 0 0 8px 0;
	padding:20px 0;
}


.header > .addLocationBox {
	display: none;
	flex-direction: column;
	flex: 0 1 100%;
	align-self:center;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
	border-radius: 8px;
	background: none;
}


.div-inputField {
	color:black;
	border-radius: 0;
	width:90%;
	display: flex;
	flex: 0 1 95%;
	align-items: center;
	justify-content: center;
	padding-top: 2vh;
	padding-bottom: 2vh;
	background: #333742;
}


.div-inputField input {
	font-size: clamp(1em, 4.2vw, 1.75em);
	padding: 10px;
	flex: 0 1 95%;
	border: none;
	border-bottom: 1px solid white;
	outline: none;
	background:none;
	color: white;
	text-align: center;
	&:not(:placeholder-shown) 
	{
		outline: none;
		border: none;
		border-bottom: 1px solid white;
	}
	&::placeholder {
		font-weight: bold;
		opacity: 0.5;
		color: white;
	}

}


.div-newLocationMessage {
	_font-size: clamp(1.2rem, 2.8vw, 1.75rem);
	border-radius: 0 0 8px 8px;
	width:90%;
	display: none;
	flex-direction: column;
	_flex: 0 1 90%;
	align-items: center;
	justify-content: center;
	background: #333742;
	color: #333742
}


.newLocationMessage {
	display:flex;
	flex: 0 0 100%;
	_flex-wrap: wrap;
	word-break: break-word;
	width: 100%;
	font-size: clamp(1em, 3.8vw, 1.75em);
	_border: 1px solid white;
	_width: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	color: white;
	margin-bottom: 2vh;
	background: #333742;
padding-left: 10px;
padding-right: 10px;
white-space: break-spaces;
_word-break: break-all;
    _overflow-wrap: break-word;
    _overflow: hidden;
}


.sendButton {
	display: none;
	_flex: 0 1 100%;
	width: 100%;
	font-size: clamp(1.3rem, 2.8vw, 1.9rem);
	text-align: center;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #333742;
	border-radius: 0 0 8px 8px;
}




.flexStationContainerWrapper {
	display: flex;
	_flex-direction: column;
	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;
	margin-top: 2em;
	&:last-of-type {
		margin-bottom: 2em;
	}
}

@media only screen and (orientation: landscape) {
  .flexElement {
    flex-wrap: wrap;
	max-width: 48%;
  }
}



.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: var(--stationTableCaptionBG);
	font: 1.2rem var(--bodyFontFamily);
	padding: 10px 10px 10px 10px;
	_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: #8eb1c2;
	font-weight: bold;
	_font-size: 1.2rem;
}


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


.stationDetailsRow {
	flex-basis:100%;
	display:block;
	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: 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;
	text-align: center;
}

.stationTableNameCell div {
   flex-basis: 100%;
}


.stationTableNameCell .name {
	font-size: 1.0em;
}

.stationTableNameCell .address {
	font-size: 0.7em;
	color: #cbced4;
}

.stationTableNameCell .hide {
	display:none;
}


.stationTableDistanceCell,
	.stationTableE5Cell,
	.stationTableE10Cell,
	.stationTableDieselCell {
		display: flex;
		align-items: center;
		self-align: center;
		justify-content: center;
		padding-top:5px;
		padding-bottom:5px;
		flex-basis:10%;
		font-size: 0.9em;
}

.stationTableDistanceCell {
	border-right: 1px solid black;
}

.stationTableE5Cell {
}
.stationTableE10Cell {
}
.stationTableDieselCell {
}


::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: var(--stationTableFooterBG);
}

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


.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;
	background: white;
	color: black;
	width:80%;
	flex-direction:column;
	gap: 20px;
	margin: 0 auto;
	margin-top: 20px;
	justify-content: center;
	align-items: center;
}
.thereIsNoPlaceYet {
	display: none;
	background: white;
	color: black;
	width:80%;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
}