body {
    background-color: var(--background);
    font-family: "PT Sans";
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    max-height: 100vh;
    margin: 0;
    padding: var(--margin);
    padding-bottom: 0;
    text-shadow: 0 1px 2px var(--shadow-color);
}

* {
    box-sizing: border-box;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    z-index: 10000;
    transition: all var(--transition-time);
    pointer-events: none;
}

.backdrop.show {
    opacity: 1;
    pointer-events: all;
}

.installButton {
    position: fixed;
    bottom: 0px;
    background: var(--secondary);
    left: 0px;
    right: 0px;
    padding: var(--margin);
    color: var(--secondary-text);
    font-size: larger;
    font-weight: bold;
    text-align: center;
}

.icon {
    font-family: "Material Icons";
    user-select: none;
}

.stretch {
    flex-grow: 1;
    flex-shrink: 1;
}

.header {
    z-index: 10000;
    box-shadow: 0 -3px calc(var(--margin) / 2) var(--margin) var(--background);
}

.topLine {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    box-shadow: 0 0 0 1px var(--shadow-color);
    border: none;
    border-radius: var(--border-radius);
    color: var(--secondary);
    overflow: hidden;
    text-align: center;
    transition: all var(--transition-time);
}

.button:not(.inactive):hover {
    background-color: var(--primary-highlight);
}

.button.inactive {
    background-color: transparent;
    border: solid var(--line-thickness) var(--secondary);
}

.timebutton, .connectionQuery .search {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--input-line-height);
    margin-left: var(--margin);
    font-size: x-large;
    line-height: var(--input-line-height);
    text-align: center;
}

.inputwrapper {
    display: flex;
    align-items: center;
    background-color: var(--secondary);
    color: var(--secondary-text);
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;
    min-height: var(--input-line-height);
    padding: 0px var(--margin);
    border: solid var(--line-thickness) var(--primary);
    border-radius: var(--border-radius);
    transition: all var(--transition-time);
    line-height: calc(var(--input-line-height) - 2 * var(--line-thickness));
    text-shadow: 0 1px 2px var(--shadow-color);
}

.inputwrapper * {
    position: absolute;
}

.inputwrapper .placeholder, .inputwrapper .placeholder_icon {
    transition: all var(--transition-time);
    user-select: none;
    width: var(--margin);
    font-size: large;
}

.inputwrapper .placeholder_icon {
    font-size: x-large;
    opacity: 0;
    transform: scale(0);
}

.inputwrapper.active .placeholder {
    transform: translateX(var(--margin));
    opacity: 0;
}

.inputwrapper.active .placeholder_icon {
    transform: scale(1);
    opacity: 1;
}

.inputwrapper .gps {
    right: var(--margin);
    transition: color var(--transition-time);
    font-size: x-large;
}

.inputwrapper .gps.active {
    color: var(--primary);
}

input.stopSearch {
    font-size: large;
    background-color: transparent;
    border: none;
    outline: none;
    left: calc(3 * var(--margin));
    right: var(--margin);
    top: 0;
    bottom: 0;
    width: calc(100% - 30px);
    font-family: "PT Sans";
    color: inherit;
    text-shadow: inherit;
    line-height: calc(var(--input-line-height) - (2 * var(--line-thickness)));
    padding: 0;
}

.connectionQuery {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    transition: all var(--transition-time);
    height: var(--input-line-height);
    margin-top: var(--margin);
    font-size: small;
}

.connectionQuery.hidden {
    height: 0px;
    opacity: 0;
    margin: 0;
}

.connectionQuery .start, .connectionQuery .end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    line-height: 12px;
    background-color: transparent;
    border-radius: var(--border-radius);
    border: solid var(--line-thickness) var(--secondary);
    color: var(--secondary);
    flex-basis: 1px;
    flex-grow: 1;
    flex-wrap: wrap;
    word-break: break-all;
    overflow: hidden;
    text-align: center;
}

.connectionQuery span {
    line-height: var(--input-line-height);
    width: calc(2 * var(--margin));
    text-align: center;
    font-size: large;
}

/* .connectionQuery .search, .timebutton {
    display: flex;
    flex-basis: var(--input-line-height);
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    justify-content: center;
    font-size: x-large;
    align-items: center;
    width: var(--input-line-height);
    margin-left: var(--margin);
    color: var(--primary-text);
    transition: all var(--transition-time);
} */

/* .connectionQuery .search.active, .timebutton {
    background-color: var(--primary);
    box-shadow: 0 0 0 1px var(--shadow-color);
    border: none;
} */