|  |  |  | 
|---|
|  |  |  | right: auto; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .close, .hide { | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | font-size: 1.5em; | 
|---|
|  |  |  | padding-left: 1em; | 
|---|
|  |  |  | color: black; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #fail .close { | 
|---|
|  |  |  | font-size: inherit; | 
|---|
|  |  |  | height: 1em; | 
|---|
|  |  |  | color: black; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .panel { | 
|---|
|  |  |  | opacity: .85; | 
|---|
|  |  |  | color: black; | 
|---|
|  |  |  | padding: 0; | 
|---|
|  |  |  | background: white; | 
|---|
|  |  |  | padding: 5px; | 
|---|
|  |  |  | border-left: 1px solid black; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | overflow-y: auto; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | transition: right .4s, width .4s; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | width: 360px; | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | width: 350px; | 
|---|
|  |  |  | right: -365px; | 
|---|
|  |  |  | right: -361px; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel.expanded { | 
|---|
|  |  |  | right: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .panel .hide { | 
|---|
|  |  |  | display: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel.enabled .hide { | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | bottom: 20%; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | transition: right .4s, margin-right .4s; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel.enabled .hide { | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel.expanded .hide { | 
|---|
|  |  |  | right: 360px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .panel .panel-container { | 
|---|
|  |  |  | overflow-y: auto; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | padding: 5px; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | @media (max-width: 600px) { | 
|---|
|  |  |  | .panel { | 
|---|
|  |  |  | width: 80%; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .panel.enabled.expanded .hide { | 
|---|
|  |  |  | right: 80%; | 
|---|
|  |  |  | margin-right: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .close, .hide { | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | padding: 0px 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #fail .close { | 
|---|
|  |  |  | font-size: inherit; | 
|---|
|  |  |  | height: 1em; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel .type { | 
|---|
|  |  |  | padding-bottom: 0; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel .name { | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | padding-bottom: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel .name .icon { | 
|---|
|  |  |  | margin: -5px 0.2rem 0; | 
|---|
|  |  |  | text-indent: 2rem; | 
|---|
|  |  |  | font-size: 1.4rem; | 
|---|
|  |  |  | vertical-align: top; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .panel .vehicleInfo { | 
|---|
|  |  |  | font-size: 21px; | 
|---|
|  |  |  | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .addon-icon { | 
|---|
|  |  |  | margin-left: 0.2rem; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .normal-icon, .addon-icon { | 
|---|
|  |  |  | font-size: 1rem; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .icon, .icon-loc, .icon-pin, .icon-zoom { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | height: 1em; | 
|---|
|  |  |  | width: 1em; | 
|---|
|  |  |  | text-indent: 1rem; | 
|---|
|  |  |  | text-indent: 1.5em; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | background-size: contain; | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | 
|---|
|  |  |  | display: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | a { | 
|---|
|  |  |  | a, .close:hover, .hide:hover { | 
|---|
|  |  |  | color: #337ab7; | 
|---|
|  |  |  | text-decoration: none; | 
|---|
|  |  |  | cursor: pointer; | 
|---|