html, body, #map {
margin: 0;
font-family: sans-serif;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#map .ol-attribution {
left: 0;
right: auto;
}
#popup {
color: black;
background: white;
padding: 5px;
border-left: 1px solid black;
font-size: 14px;
position: absolute;
width: 350px;
right: -365px;
top: 0;
bottom: 0;
transition: right .4s, width .4s;
opacity: .85;
overflow-y: auto;
}
#popup.show {
right: 0;
}
@media (max-width: 600px) {
#popup {
width: 80%;
right: -100%;
}
#popup.show {
right: 0%;
}
}
#popup .close {
float: right;
cursor: pointer;
font-size: 20px;
}
#popup .type {
padding-bottom: 0;
color: #444;
font-size: 80%;
}
#popup p {
margin: 0;
padding: 5px;
}
#popup .name {
font-weight: bold;
}
#popup .vehicleInfo {
font-size: 21px;
margin: -4px 0 -5px;
}
#popup table {
margin-top: 3px;
border-top: 1px solid gray;
width: 100%;
border-collapse: collapse;
}
#popup table th {
text-align: left;
border-bottom: 1px solid #999;
padding-top: 5px;
}
#popup table td {
vertical-align: top;
}
#popup .active {
background: #f5f5f5;
color: gray;
}
#popup .success {
background: #dff0d8;
}
#popup .warning {
background: #fcf8e3;
}
#popup .danger {
background: #f2dede;
}
#popup table .vehicleInfo {
float: right;
}
#title {
top: .5em;
left: .5em;
padding: 2px .5em;
font-weight: bold;
background-color: rgba(255,255,255,.6);
}
#fail, #popup .error {
background: red;
color: white;
font-weight: bold;
padding: 5px;
}
#fail {
top: -10em;
right: 0.5em;
}
.ol-zoom {
top: 2.2em;
}
a {
color: #337ab7;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
.small {
font-size: 80%;
}