html{
touch-action: manipulation;
}

body {
overflow: hidden;
overflow-y: auto;
overflow-x: auto;
font-family: 'Fira Sans', sans-serif;
margin:0!important;
}


.route-selector {
width:100%;
height:100%;
display:none;
top:0;
bottom:0;
left:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}

.route-selector-tile {
cursor:pointer;
margin-top:1%;
text-align:center;
font-size:2em;
background-color:rgba(0,0,0,0.40);
height:10%;
margin-left:0.5%;
margin-right:0.5%;
width:24%;
float:left;
display:inline-flex;
color:#FFF;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding:0;

}

.route-selector-tile-tag {
width:50%;
margin:auto;
display:none;
}


.route-selector-tile-title {
width:50%;
margin:auto;
font-size:0.7em;
}

.button-overlay-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
padding: 10px;
box-sizing: border-box;
background-color: rgba(0,0,0,0.35);
z-index: 10;
}

.show-route-selector-button-holder,
.toggle-all-routes-button-holder {
min-height: 52px;
display:none;
height:auto;
width:auto;
flex: 0 0 auto;
background-color: transparent;
text-align:center;
cursor: pointer;
}

.show-route-selector-button,
.toggle-all-routes-button {
font-family: 'Fira Sans', sans-serif;
font-size:1.15em;
color:white;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
margin:auto;
padding: 11px 18px;
border-radius: 8px;
border: 2px solid rgba(255,255,255,0.52);
background: linear-gradient(to bottom, rgba(122, 122, 122, 0.96), rgba(92, 92, 92, 0.96));
box-shadow: 0 3px 10px rgba(0,0,0,0.34);
user-select: none;
line-height: 1.1;
font-weight: 700;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
outline: none;
}

.route-search-holder {
display:none;
flex: 1 1 360px;
min-height: 52px;
background-color: transparent;
padding:0;
box-sizing:border-box;
align-items:center;
justify-content:center;
}

.route-search-input {
width:100%;
max-width:none;
font-family: 'Fira Sans', sans-serif;
font-size:1.05em;
padding:11px 14px;
border-radius:8px;
border:2px solid rgba(255,255,255,0.52);
background: linear-gradient(to bottom, rgba(122, 122, 122, 0.96), rgba(92, 92, 92, 0.96));
box-shadow: 0 3px 10px rgba(0,0,0,0.34);
color:#fff;
font-weight: 600;
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
outline: none;
caret-color: #fff;
text-shadow:-1px -1px 0 rgba(0,0,0,0.55), 1px -1px 0 rgba(0,0,0,0.55), -1px 1px 0 rgba(0,0,0,0.55), 1px 1px 0 rgba(0,0,0,0.55);
}

.route-search-input::placeholder {
color: rgba(255,255,255,0.92);
text-shadow:-1px -1px 0 rgba(0,0,0,0.45), 1px -1px 0 rgba(0,0,0,0.45), -1px 1px 0 rgba(0,0,0,0.45), 1px 1px 0 rgba(0,0,0,0.45);
}

.route-search-input:focus {
box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 3px 10px rgba(0,0,0,0.34);
}

.route-search-input::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: 0.95;
cursor: pointer;
}

.show-route-selector-button:hover,
.toggle-all-routes-button:hover {
transform: translateY(-1px);
box-shadow: 0 5px 12px rgba(0,0,0,0.36);
}

.show-route-selector-button:active,
.toggle-all-routes-button:active {
transform: translateY(0);
box-shadow: 0 2px 7px rgba(0,0,0,0.24);
}

.show-route-selector-button:focus,
.toggle-all-routes-button:focus {
box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 3px 10px rgba(0,0,0,0.34);
}

.toggle-all-routes-button {
border-color: rgba(255,255,255,0.58);
background: linear-gradient(to bottom, rgba(136, 136, 136, 0.96), rgba(100, 100, 100, 0.96));
box-shadow: 0 3px 10px rgba(0,0,0,0.36);
}

.toggle-all-routes-button:hover {
background: linear-gradient(to bottom, rgba(146, 146, 146, 0.98), rgba(112, 112, 112, 0.98));
}

.clear-all-button-holder {
text-align:center;
display:inline-flex;
cursor:pointer;
width:100%;
height:10%;
background-color:lightgrey;
color:#FFF;
}

.close-route-selector-button-holder {
min-height: 50px;
display:inline-flex;
cursor:pointer;
width:100%;
height:10%;
background-color:grey;
color:#FFF;
}

.clear-all-button,.close-route-selector-button {
font-size:2em;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
margin:auto;
}

.map-container {
cursor:pointer;
display:inline-block;
position:relative;
width:100%;
padding-bottom:100%;
vertical-align:top;
overflow:hidden;
height:100%;
margin:0;
padding:0;
}

.svg-content-responsive {
display:inline-block;
position:absolute;
top:0;
left:0;
}

.map-canvas-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.loader-container{
width:100%;
height: 100%;
position: absolute;
top:0;
left:0;
display: inline-flex;
}

@media screen and (max-width: 900px) {
#github-banner{
display:none;
}
.route-selector-tile {
font-size:1.1em;
}
.close-route-selector-button-holder ,.clear-all-button-holder {
height:15%;
}
.route-selector-tile-tag {
display:block;
}
.route-selector-tile-title{
display:none;
}
.clear-all-button,.close-route-selector-button{
 font-size:1.5em;
}

.show-route-selector-button,
.toggle-all-routes-button{
font-size:0.95em;
padding:8px 10px;
}

.button-overlay-container{
flex-wrap: wrap;
}

.route-search-holder{
flex: 1 1 100%;
min-width: 100%;
}

.route-search-input{
font-size:0.95em;
padding:8px 10px;
}

}

.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}

.background-color-selector{
position: fixed;
top: 100px;
}

.share-button-holder{
top: 110px;
left: 10px;
position: fixed;

}

.custom-print-popover{
position:fixed;
top:100px;
left:10px;
}

.spinner {
width: 60px;
height: 60px;
margin: auto;
animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
}

@keyframes rotate {
    0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
    }
    @keyframes background {
    0% {
    background-color: #27ae60;
    }
    50% {
    background-color: #9b59b6;
    }
    100% {
    background-color: #c0392b;
    }
}

/*
#layer_streets{
    opacity:0.5;
}

#layer_arteries{
    opacity:0.85;
}

#layer_freeways{
    opacity:0.75;
}
*/