.panel .sprite {
    background-image: url(../images/ocsviewer-spritesheet.png);
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    padding-right: 10px;
    vertical-align: middle;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel .sprite-add {
    width: 17px;
    height: 17px;
    background-position: -10px -10px;
}

.panel .sprite-back {
    width: 23px;
    height: 23px;
    background-position: -47px -10px;
}
.panel .sprite-delete {
    width: 17px;
    height: 17px;
    background-position: -10px -47px;
}

.panel .sprite-forward {
    width: 23px;
    height: 23px;
    background-position: -90px -47px;
}

.panel .sprite-full-screen-icon {
    width: 17px;
    height: 17px;
    background-position: -133px -47px;
}



.panel .sprite-loop {
    width: 23px;
    height: 23px;
    background-position: -133px -84px;
}

.panel .sprite-next {
    width: 23px;
    height: 23px;
    background-position: -10px -127px;
}

.panel .sprite-panel-options-button {
    width: 19px;
    height: 13px;
    background-position: -49px -123px;
}
body.mobile div.panel_options span.panel_options_arrow {
    width: 55px;
    height: 25px; 
    background-position: -29px -119px;
}
.panel .sprite-panel-options-close {
    width: 20px;
    height: 18px;
    background-position: -92px -127px;
}
body.mobile div.panel_options.active span.panel_options_arrow {
    width: 55px;
    height: 25px;
    background-position: -72px -120px;
}
.panel .sprite-pause {
    width: 23px;
    height: 23px;
    background-position: -132px -127px;
}

.panel .sprite-play {
    width: 23px;
    height: 23px;
    background-position: -170px -10px;
}

.panel .sprite-reverse {
    width: 23px;
    height: 23px;
    background-position: -175px -164px;
}

.panel .sprite-rocker {
    width: 23px;
    height: 23px;
    background-position: -213px -10px;
}

.panel .sprite-obs {
    width: 17px;
    height: 17px;
}
.panel .sprite-obs.off {
    background-position: -176px -53px;
}
.panel .sprite-obs.on {
    background-position: -84px -90px;
}

.panel .sprite-radar {
    width: 18px;
    height: 17px;
}
.panel .sprite-radar.off {
    background-position: -176px -90px;
}
.panel .sprite-radar.on {
    background-position: -175px -127px;
}

.panel .sprite-vector.off,
.panel .sprite-shape.off {
    width: 17px;
    height: 17px;
    background-position: -213px -53px;
}

.panel .sprite-vector.on,
.panel .sprite-shape.on {
    width: 17px;
    height: 17px;
    background-position: -214px -90px;
}

.panel .sprite-contour {
    width: 17px;
    height: 17px;
}
.panel .sprite-contour.off {
    background-position: -90px -10px;
}
.panel .sprite-contour.on {
    background-position: -127px -10px;
}

.panel .sprite-gradient {
    width: 17px;
    height: 17px;
}
.panel .sprite-gradient.off {
    background-position: -10px -84px;
}
.panel .sprite-gradient.on {
    background-position: -47px -84px;
}


/** Sprite Customizations **/
.panel .sprite-panel-options-button {
    background-color: rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 4px;
}

.panel .sprite-legend-unselected {
    cursor: pointer;
    font-weight: 100;
    font-style: italic;
    float: right;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel .sprite-legend-selected {
    cursor: pointer;
    font-weight: 100;
    font-style: italic;
    color: #00e726;
    float: right;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel .divider {
    border-bottom: 1px solid #5a6378;
    display: block;
    margin: 5px 10px 10px 10px;
}


span.panel_options_arrow {
    position: absolute;
    top: 11px;;
    right: 10px;
    z-index: 2;
}
div.panel_options.active span.panel_options_arrow {
    z-index: 3;
    background-position: -92px -127px;
    background-color: rgba(255,255,255,0.0);
}
div.panel_options_container {
    width: 246px;
    color: #fff;
    font-family: "Proxima Nova","Arial","Trebuchet",Arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: -226px;
    /*   bottom: 100px; */
    display: none;
    opacity: 0.95;
    z-index: 2;
}
div.panel_options.active div.panel_options_container {
    display: block;
}
div.panel_options_container .title {
    font-size: 100%;
    height: 37px;
    background: #5a6378;
    padding: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.panel_options_container .title .sprite-delete,
div.panel_options_container .title .sprite-panel-options-close {
    float: right;
    padding-right: 0;
}
div.panel_options_container .options {
    background: #393f4f;
    height: auto;
    max-height: 100%;
    overflow: auto;
}
div.panel_options_container .row {
    color: #fefeff; /* text color */
    font-family: "Proxima Nova","Arial","Trebuchet",Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
}
div.panel_options_container .time_ago {
    color: #f75f5f;
}
div.panel_options_container .sprite.legend {
    float: right;
    padding-right: 0;
}
div.map_controls_container {
    height: 42px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -42px;
    margin: 0;
    background: #5a6378;
    padding: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #d5dbe6;
    font-family: "Proxima Nova","Arial","Trebuchet",Arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    opacity: 0.95;
    z-index: 2;
}
.no-cssanimation .panel:hover div.map_controls_container,
.no-cssanimation .map:hover div.map_controls_container {
    bottom: 0;
}


.cssanimations .panel:hover div.map_controls_container,
.cssanimations .map:hover div.map_controls_container {
    -webkit-animation-name: animationControlsSlideUp;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: animationControlsSlideUp;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-name: animationControlsSlideUp;
    -o-animation-duration: 0.2s;
    -o-animation-iteration-count: 1;
    -o-animation-direction: alternate;
    -o-animation-timing-function: ease-out;
    -o-animation-fill-mode: forwards;
    animation-name: animationControlsSlideUp;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.cssanimations .panel div.map_controls_container,
.cssanimations .map div.map_controls_container {
    -webkit-animation-name: animationControlsSlideDown;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: animationControlsSlideDown;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-name: animationControlsSlideDown;
    -o-animation-duration: 0.2s;
    -o-animation-iteration-count: 1;
    -o-animation-direction: alternate;
    -o-animation-timing-function: ease-out;
    -o-animation-fill-mode: forwards;
    animation-name: animationControlsSlideDown;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@-webkit-keyframes animationControlsSlideUp {
    from   { bottom: -42px; }
    to { bottom: 0px; }
}
@-webkit-keyframes animationControlsSlideDown {
    from   { bottom: 0px; }
    to { bottom: -42px; }
}
@-moz-keyframes animationControlsSlideUp {
    from   { bottom: -42px; }
    to { bottom: 0px; }
}
@-moz-keyframes animationControlsSlideDown {
    from   { bottom: 0px; }
    to { bottom: -42px; }
}
@-o-keyframes animationControlsSlideUp {
    from   { bottom: -42px; }
    to { bottom: 0px; }
}
@-o-keyframes animationControlsSlideDown {
    from   { bottom: 0px; }
    to { bottom: -42px; }
}
@keyframes animationControlsSlideUp {
    from   { bottom: -42px; }
    to { bottom: 0px; }
}
@keyframes animationControlsSlideDown {
    from   { bottom: 0px; }
    to { bottom: -42px; }
}



/* Panel Options Animation */
.panel_options-out-animation {
  animation: slideOut ease-in 1s;
  animation-iteration-count: 1;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes slideOut{
  0% {
    opacity:1;
    right: 0px;
  }
  48% {
    opacity:1;
    right: -226px;
  }
  100% {
    opacity:0;
    right: -226px;
  }
}

.panel_options-in-animation {
  animation: slideIn ease-in-out 1s;
  animation-iteration-count: 1;
  animation-fill-mode:forwards; /*when the spec is finished*/
}
@keyframes slideIn{
  0% {
    opacity:1;
    right: -226px;
  }
  100% {
    opacity:1;      
    right: 0;
  }
}



/* Legend container styles */
div.legend_content_container {
    height: 10px;
    top: -30px;
    left: 0px;
    right: 0px;
    position: absolute;
    background: transparent;
}
div.map_legend_group_container {
    height: 10px;
    overflow: hidden;
}
div.legend_content_container canvas {
    width: 100%;
    height: 10px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
div.legend_info_container {
    height: 20px;
    top: -20px;
    left: 0px;
    right: 0px;
    position: absolute;
    background: #5a6378;
    font-size: 10px;
    font-weight: 100;
    text-align: right;
    padding-top: 2px;
    padding-right: 10px;
}
div.legend_tooltip {
    background: #464646;
    padding: 8px 12px 2px 12px;
    position: absolute;
    z-index: 1;
    top: -62px;
    font-size: 12px;
    font-weight: bold;
    height: 22px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing: content-box;
}
div.legend_arrow {
    position: absolute;
    z-index: 1;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #464646;
    top: -30px;
}
div.speed {
    position: absolute;
    display: inline-block;
    top: 10px;
    left: 10px;
}
div.controls {
    position: absolute;
    top: 12px;
    left: 20%;
    right: 20%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.animation {
    position: absolute;
    display: inline-block;
    top: 10px;
    right: 10px;
}
span.label {
    vertical-align: middle;
}
span.adjust {
    position: relative;
    display: inline-block;
    height: 16px;
    width: 31px;
    vertical-align: middle;
    padding-top: 8px;
    margin-top: -4px;
}
span.adjust input[type="range"] {
    vertical-align: top;
    margin-top: 3px;
}
span.outer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    text-indent: -9999px;
    border-bottom: 16px solid #393f4f;
    border-left: 31px solid transparent;
}
span.inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    text-indent: -9999px;
    border-bottom: 12px solid #4eb7cd;
    border-left: 23.25px solid transparent;
}
span.start, span.end {
    display: inline-block;
    position: relative;
}
span.start span, span.end span {
    vertical-align: middle;
}
span.scrubber {
    width: 55px;
    height: 4px;
    display: inline-block;
    position: relative;
}
span.scrubber input[type="range"],
span.adjust input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    width: 55px;
    border-radius: 2px;
    background: #4eb7cd;
    outline: none;
    cursor: pointer;
}
span.scrubber input[type="range"]::-webkit-slider-thumb,
span.adjust input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 5.5px;
    border: 3px solid #4eb7cd;
    background: #393f4f;
    margin-top: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

span.scrubber input[type="range"]::-moz-range-track,
span.adjust input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 4px;
    width: 55px;
    border-radius: 2px;
    background: #4eb7cd;
    outline: none;
    cursor: pointer;
    border: none;
}
span.scrubber input[type="range"]::-moz-range-thumb,
span.adjust input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    cursor: pointer;
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 5.5px;
    border: 3px solid #4eb7cd;
    background: #393f4f;
    margin-top: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.msie span.scrubber input[type="range"],
.msie span.adjust input[type="range"] {
    height: 8px;
    width: 55px;
    border-radius: 4px;
    background: #4eb7cd;
    outline: none;
    cursor: pointer;
    padding: 0px;
    color: transparent;
}
.msie span.scrubber input[type="range"]::-ms-track,
.msie span.adjust input[type="range"]::-ms-track {
    height: 8px;
    width: 55px;
    border-radius: 4px;
    background: #4eb7cd;
    outline: none;
    cursor: pointer;
    border: none;
    color: transparent;
    background-image: none;
    padding: 0px;
}
.msie span.scrubber input[type="range"]::-ms-fill-lower,
.msie span.adjust input[type="range"]::-ms-fill-lower {
    background: #4eb7cd;
}
.msie span.scrubber input[type="range"]::-ms-fill-upper,
.msie span.adjust input[type="range"]::-ms-fill-upper {
    background: #393f4f;
}
.msie span.scrubber input[type="range"]::-ms-thumb,
.msie span.adjust input[type="range"]::-ms-thumb {
    cursor: pointer;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 5.5px;
    /* border: 3px solid #4eb7cd; */
    background: white; /* #393f4f; */
    margin-top: 6px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.msie span.scrubber input[type="range"]::-ms-tooltip,
.msie span.adjust input[type="range"]::-ms-tooltip {
    display: none; 
}

span.progress {
    height: 4px;
    display: inline-block;
    width: 50%;
    border-radius: 2px;
    background: #4eb7cd;
}
span.knob {
    cursor: pointer;
    width: 11px;
    height: 11px;
    display: inline-block;
    position: absolute;
    left: 40%;
    top: -4px;
    border-radius: 5.5px;
    border: 3px solid #4eb7cd;
    background: #393f4f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.map .radar_console_container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: #ffffff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 100;
    font-size: 90%;
    border-top: 1px solid #21252F;
    z-index: 2;
}
.map .radar-header {
    background: #5a6378;
    text-align: center;
    height: 26px;
}
.map .radar_console_container .product-info {
    display: inline-block;
    position: absolute;
    left: 0px;
    text-align: left;
    margin-top: 0;
    height: 26px;
    padding: 2px 8px 0px 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}
.map .radar_console_container .site-info {
    margin: auto;
    display: inline-block;
    margin-top: 0;
    height: 26px;
    padding: 2px 8px 0px 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}
.map .radar_console_container .product-info.active,
.map .radar_console_container .site-info.active {
    background: #343434;
}
.panel .site-options {
    margin: auto;
    background: #343434;
    max-width: 200px;
    display: none;
}
.panel .site-options ul,
.panel .site-options ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.panel .site-options ul li {
    padding: 2px 6px;
}
.panel .site-options ul li:hover {
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}
.panel .site-options ul li.active {
    background: #0073bc;

}
.panel .radar-options {
    display: none;
    min-width: 400px;
    background: #343434;
    position: absolute;
    top: 26px;
    left: 0px;
    z-index: 2;
}
.map .radar_console_container table {
    float: left;
    width: 49.99999%;
    margin: 0;
    padding: 0;
}
.map .radar_console_container th {
    background: #393f4f;
    text-align: left;
    font-weight: 500;
}
.map .radar_console_container td {
    border: 1px solid #676767;
}
.map .radar_console_container td.rdr-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.map .radar_console_container td.active,
.map .radar_console_container td.rdr-btn.active,
.map .radar_console_container td.rdr-btn.active:hover {
    background: #0073bc;
}
.map .radar_console_container td.rdr-btn span {
    color: #fff;
    text-align: center;
    display: block;
    cursor: pointer;
}
.map .radar_console_container td span.align-left {
    text-align: left;
}	

div.alert_box {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    background: #ff0000;
    color: #000000;
    font-weight: 100;
    font-size: 12px;
    padding: 7px 0px 2px 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 50;
    cursor: pointer;
}
div.alert_box > div {
    float: left;
}
div.alert_box .sprite_delete {
    float: right;
    cursor: pointer;
    width: 17px;
    height: 17px;
    background-position: -10px -47px;    
}

.text_popup {
    position: absolute;
    z-index: 9999;
    background: #393f4f;
    color: white;
    border: 1px solid black;
    padding: 0px 10px 0px 10px;
    top: 0px;
    left: 0px;
    min-width: 230px;
}

.text_list {
    z-index: 9999;
    background: #393f4f;
    color: white;
    border: 1px solid black;
    min-width: 230px;
    max-width: 400px;
    min-height: 10px;
    max-height: 165px;
    overflow-y: auto;
}
.text_list .advisory_list_delete {
    float: right;
    padding-left: 12px;
}
.advisory_text_list .advisory_info {
    margin-bottom: 3px;
    padding: 5px 5px;
    height: 35px;
}
.advisory_text_list .advisory_text_container {
    float: left;
}
.advisory_text_list .advisory_color_block {
    border: 1px solid black;
    width: 14px;
    height: 14px;
    float: left;
    margin: 11px 6px 0px 0px;
}
.advisory_text_list .advisory_name {

}
.advisory_text_list .advisory_end_time {

}
.text_popup .advisory_popup_close {
    float: right;
    margin-right: 0px;
    padding-right: 0px;
}

.text_popup.user_layer_popup {
    min-width: 370px;
}
.text_popup .user_layer_desc_list {
    float: left;
    max-height: 395px;
    overflow-y: auto;
    width: 101%;
}
.text_popup .user_layer_info {
    padding-bottom: 5px;
}
.text_popup .user_layer_feature_name {
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}


.text_popup .clear {
    clear: both; 
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* Openlayers Styles */
.ol-control,
.ol-scale-line {
    position:absolute;
    padding:2px
}
.ol-box {
    box-sizing:border-box;
    border-radius:2px;
    border:2px solid #00f
}
.ol-mouse-position {
    top:8px;
    right:8px;
    position:absolute
}
.ol-scale-line {
    background:rgba(0,60,136,.3);
    border-radius:4px;
    bottom:8px;
    left:8px
}
.ol-scale-line-inner {
    border:1px solid #eee;
    border-top:none;
    color:#eee;
    font-size:10px;
    text-align:center;
    margin:1px;
    will-change:contents,width
}
.ol-overlay-container{
    will-change:left,right,top,bottom
}
.ol-unsupported {
    display:none
}
.ol-viewport .ol-unselectable {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent
}
.ol-control {
    background-color:rgba(255,255,255,.4);
    border-radius:4px
}
.ol-control:hover{
    background-color:rgba(255,255,255,.6)
}
.ol-zoom{top:.5em;left:.5em}
.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}
.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}
.ol-control button{
    display:block;
    margin:1px;
    padding:0;
    color:#fff;
    font-size:1.14em;
    font-weight:700;
    text-decoration:none;
    text-align:center;
    height:1.375em;
    width:1.375em;
    line-height:.4em;
    background-color:rgba(0,60,136,.5);
    border:none;
    border-radius:2px
}
.ol-control button::-moz-focus-inner{
    border:none;
    padding:0
}
.ol-zoom-extent button{
    line-height:1.4em
}.ol-compass{
    display:block;
    font-weight:400;
    font-size:1.2em;
    will-change:transform
}
.ol-touch .ol-control button{
    font-size:1.5em
}
.ol-touch .ol-zoom-extent{
    top:5.5em
}
.ol-control button:focus,.ol-control button:hover{
    text-decoration:none;background-color:rgba(0,60,136,.7)
}
.ol-zoom .ol-zoom-in{
    border-radius:2px 2px 0 0
}
.ol-zoom .ol-zoom-out{
    border-radius:0 0 2px 2px
}
.ol-attribution{
    text-align:right;
    bottom:.5em;
    right:.5em;
    max-width:calc(100% - 1.3em)
}
.ol-attribution ul{
    margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff
}
.ol-attribution li{display:inline;list-style:none;line-height:inherit}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,.ol-attribution ul{display:inline-block}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution.ol-logo-only ul{display:block}
.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}
.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-logo-only button,
.ol-attribution.ol-uncollapsible button{display:none}
.ol-zoomslider{top:4.5em;left:.5em;height:200px}
.ol-zoomslider button{position:relative;height:10px}
.ol-touch .ol-zoomslider{top:5.5em}
.ol-overviewmap{left:.5em;bottom:.5em}
.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button{display:inline-block}
.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}
.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button{display:none}
.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}



/* Overwrite OpenLayers Styles */
.panel .ol-zoom {
    top: .5em;
    left: .5em;
}
.panel .ol-control {
    position: absolute;
    background-color: rgba(255,255,255,.4);
    border-radius: 4px;
    padding: 2px;
}
.panel div.ol-zoom.ol-control button, 
.panel div.ol-zoom.ol-control button:hover {
    display: block;
    margin: 1px;
    padding: 0;
    color: #393f4f;
    font-size: 18px;
    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 22px;
    width: 22px;
    line-height: 19px;
    background: #b3bcd1;
    background: rgba(179, 188, 209, 0.8);
    filter: alpha(opacity=80);
    margin-bottom: 4px;
}
.panel .ol-zoom .ol-zoom-in {
    border-radius: 2px 2px 2px 2px;
}
.panel .ol-zoom .ol-zoom-out {
    border-radius: 2px 2px 2px 2px;
}

/* Move items down if radar console is shown */
.map.radar div.ol-zoom.ol-control {
    margin-top: 26px;
}
.map.radar span.panel_options_arrow {
    top: 36px;
}
.map.radar div.panel_options_container {
    top: 26px;
}
.ol-unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}


.hidden {
    display: none;
}