.map-viewer {
    position: relative;
}

.map-viewer #map-canvas {
    height: 100%; z-index:0
}

.map-viewer .shadow {
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
}

/**
 * Layer Categories
 */
.map-viewer .layers-navigation {
    position:absolute;
    width:47px;
    height:600px;
    top:50%;
    margin-top:-300px;
    left:0;
    z-index:99;
    background-color: #2e2e2e;
}

.map-viewer .layers-navigation ul {
    margin:0;
    padding:5px 0;
    list-style-type:none;
    text-align: left;
}

.map-viewer .layers-navigation li {
    display:inline;
    cursor:pointer;
}

.map-viewer .layers-categories {
    position:absolute;
    min-width:230px;
    min-height:598px;
    top:50%;
    margin-top:-300px;
    left:47px;
    background-color:rgba(68, 68, 68, 1.0);
    border:solid 1px #000;
    z-index:98;
}

.map-viewer .layer-category {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

.map-viewer .layer-category ul {
    border: 0 solid;
}

.map-viewer .layers-categories h3 {
    font-size: 0.7em;
    font-weight: bold;
}

.map-viewer .layers-categories ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.map-viewer .layers-categories ul {
    background-color: inherit;
    background-image: none;
}

.map-viewer .layers-categories li {
    display:block;
    width:223px;
    font-size:0.7em;
    color:#aaaaaa;
    background-color:#2e2e2e;
    margin-bottom: 0;
    border:solid 0 #000;
    outline: 0;
    padding-top: 5px;
    padding-left: 5px;
}

.map-viewer .layers-categories li a {
    display:block;
    height:25px;
    width:223px;
    color:#aaaaaa;
    cursor:pointer;
    text-decoration:none;
    border: 0;
}

.map-viewer .layers-categories li a:hover, .map-viewer .layers-categories li a:focus, .map-viewer .layers-categories li a:active {
    border: 0;
    color:#fff;
}

.map-viewer .layers-categories li a:hover {
    cursor: pointer;
}

.map-viewer input[type=checkbox].css-checkbox {
    display:none;
    direction:ltr;
}

.map-viewer input[type=checkbox].css-checkbox + label.css-label {
    padding-left:30px;
    margin-top:3px;
    margin-left:5px;
    margin-right:3px;
    height:20px;
    display:inline-block;
    line-height:20px;
    background: no-repeat 0 0;
    vertical-align:middle;
    cursor:pointer;
}

.map-viewer input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -20px;
}

.map-viewer label.css-label {
    background-image:url(../assets/checkbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#player{
    font-family:"Droid Arabic Kufi", "Segoe", "Segoe UI","Trebuchet MS", "Verdana", "sans-serif";
    font-weight: 400;

    background: #2f91e9; /* Old browsers */
    background: -moz-linear-gradient(top,  #2E2E2E 0%, #1A1A1A 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1A1A1A), color-stop(100%,#2f91e9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2E2E2E 0%,#1A1A1A 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2E2E2E 0%,#1A1A1A 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2E2E2E 0%,#1A1A1A 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2E2E2E 0%,#1A1A1A 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1A1A1A', endColorstr='#2E2E2E',GradientType=0 ); /* IE6-9 */

    position:absolute;
    min-width:685px;
    height:45px;
    bottom:15px;
    left:50%;
    margin-left:-345px;

    border:solid 1px black;

    color:#fff;
    font-size:1.1em;
    z-index:97;
}

#player #play-button:hover {
    cursor: pointer;
}

#player #play-button {
    height: 34px;
    width: 26px;
    display: block;
    float: left;
    margin-top: 7px;
    margin-left: 7px;
    background: url(../assets/play.png) no-repeat;
    background-size: 32px 32px;
}

#player #play-button.paused {
    background-image: url(../assets/stop.png);
}

#player #speed-one-button, #player #speed-two-button {
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #85C9E1;
    height: 34px;
    width: 28px;
    display: block;
    float: left;
    margin-top: 7px;
    margin-left: 10px;
    padding-left: 32px;
    background-repeat: no-repeat;
}

#player #speed-one-button {
    background-image: url('../assets/2rightarrow-32.png');
}

#player #speed-two-button {
    background-image: url('../assets/2rightarrow-32.png');
}

#player .separator {
    background-image: url('../assets/separator.png');
    height: 32px;
    width: 2px;
    float: left;
    margin: 6px 7px 0 7px;
    visibility: hidden !important;
}

#player #time-slider {
    background: transparent url('../assets/slider-background.png') repeat-x;
    height: 32px;
    width: 240px;
    display: block;
    float: left;
    margin: 6px 0 0 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#player #time-slider:hover {
    cursor: pointer;
}

#player #time-slider.ibl-no-frames:hover {
    cursor: default;
}

#player .ibl-no-frames .noUi-handle {
    display: none;
}

#player .ibl-tooltip {
    position: absolute;
    width: 100%;
}

#player .ibl-tooltip .ibl-text {
    display: none;
    background: #3F3E39;
    font-size: 12px;
    color: #d9d9d9;
    top: -40px;
    padding: 1px 5px 1px;
    text-align: center;
    white-space: nowrap;

    position: relative;

    left: 0%;
}

#player .ibl-hover .ibl-tooltip .ibl-text {
    display: inline-block;
}

#player .ibl-no-frames .ibl-tooltip .ibl-text {
    display: none;
}

#player .noUi-handle {
    height: 34px;
    width: 8px;
    left: -4px;
    top: 3px;
    border: none;
    box-shadow: none;
    border-radius: 0px;
    background: url('../assets/slider-handle.png') transparent;
}

#player .ibl-handle-hover .noUi-handle,
#player .ibl-clicked .noUi-handle {
    background: url('../assets/slider-handle-selected.png') transparent;
}

#player .noUi-handle:hover {
    cursor: pointer;
}

#player .noUi-handle:after, #player .noUi-handle:before {
    display: none;
}

#player #prev-frame-button {
    background-image: url('../assets/rewind-32.png');
    background-repeat: no-repeat;
    height: 34px;
    width: 34px;
    display: block;
    float: left;
    margin: 7px 6px 0 0;
}

#player #next-frame-button {
    background: url('../assets/forward-32.png') repeat-x;
    height: 34px;
    width: 34px;
    display: block;
    float: left;
    margin: 7px 0 0 7px;
}

#player #time-label {
    background-repeat: repeat-x;
    color: #85C9E1;
    height: 34px;
    width: 130px;
    display: table;
    float: left;
    text-align: center;
    letter-spacing: -1px;
    margin: 5px 1px 0 1px;
}

#time-label-wrapper {
    display: table-row;
}

#time-label .time-value {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#busy-indicator {
    z-index: 100;
    position: absolute;
    left: 50%;
    bottom: 90px;
    border: 0;
    margin: -10px 0 0 -110px;
    display: none;
    background: url('../assets/ajax-loader.gif') no-repeat;
    height: 19px;
    width: 220px;
}

.map-viewer .ui-accordion .ui-accordion-content {
    padding: 0;
    border-top: 0;
    overflow: inherit;
}

.map-viewer .layers-categories li {
    text-align: left;
}

.map-viewer .layers-categories li.selected {
    background-color: #3f9cf1;
    border: solid 1px #87c1f5;
    color: #fff;
}

.map-viewer .layers-categories li.selected a {
    color: white;
}

.map-viewer .ui-slider {

    background: #515151 none repeat 50% 50%;
    height: 8px;
    width: 75%;
    float: left;
    margin-top: 10px;
}

.map-viewer .ui-time-handle.ui-state-default {
    background: transparent url('../assets/slider.png');
    border: 0;
    margin-top: -1px;
    outline: 0;
}

#legend {
    position: absolute;
    height:498px;
    top:50%;
    margin-top:-250px;
    right:0;
    display: none;
    background-color: #2E2E2E;
    border:solid 1px #000;
    z-index:98;
    padding-left: 5px;
    padding-top: 5px;
    cursor: pointer;
}

#legend.shown {
    display: block;
}

#legend #hide-button,
#legend #hide-button {
    background-image: url('../assets/legend-hide-button.png');
    z-index:99;
    height: 14px;
    width: 12px;
    display: block;
}

#legend.expanded #hide-button {
    background-image: url('../assets/legend-show-button.png');
}

#legend #legend-content {
    display: none;
}

#legend.expanded #legend-content {
    display: block;
}

#legend-wrapper {
    height: 498px;
    display: table-row;
}

#legend-button-wrapper {
    display: table-cell;
    vertical-align: middle;
    width: 15px;
}

#legend-content {
    display: table-cell;
    vertical-align: middle;
}

#legend.expanded {
    visibility: visible;
}

.map-viewer .legend-element {
    width: 30px;
    padding: 0 5px;
}

.map-viewer .legend-label {
    width: 130px;
    height: 30px;
}

.map-viewer .rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform-origin: left 50%;
    -moz-transform-origin: left 50%;
    -ms-transform-origin: left 50%;
    -o-transform-origin: left 50%;
    position: relative;
    top: 0;
    left: 50%;
    white-space: nowrap;
    color: #eee;
    font-weight: bold;
    width: 40px;
}

#legend-content img {
    margin: 0 5px;
}

#legend .ibl-hidden {
    display: none;
}

#layer-list .opacity-slider,
#vector-layer-list .opacity-slider {
    padding-right: 10px;
}

#layer-list .opacity-slider .ui-slider-handle,
#vector-layer-list .opacity-slider .ui-slider-handle {
    height: 15px;
    width: 15px;
}

#layer-list .layer-list-icon,
#vector-layer-list .layer-list-icon {
    background: url("../images/move-horizontally.png") no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-left: 10px;
    cursor: pointer;
}

#vector-layer-list .layer-list-icon {
    background: url("../assets/opacity.png") no-repeat;
}

#layer-list .text,
#vector-layer-list .text {
    cursor: pointer;
}

.map-viewer .layer-group {
    font-weight: bold;
    color: white;
    background: #1e1e1e none;
    border: 0;
    border-top: 1px solid black;
}

.map-viewer .ui-corner-top,
.map-viewer .ui-corner-bottom,
.map-viewer .ui-corner-all {
    border-radius: 0;
}

.map-viewer .layer-list.ui-widget-content {
    border: 0;
    background: #2e2e2e none;
}

.map-viewer .layer-group.ui-state-active {
    color: black;
    background: #83C6DE none;
}

.map-viewer .layer-group.ui-state-hover {
    background: #2e2e2e none;
}

.map-viewer .layer-group.ui-state-hover.ui-state-active {
    background: #83C6DE none;
}

.map-viewer .layer-group.ui-accordion,
.map-viewer .layer-group.ui-accordion-header {
    margin-top: 0;
}

.map-viewer .layers-categories,
.map-viewer .layers-navigation,
#player {
    visibility: hidden;
}

.map-viewer .marker-temperature {
    background-image: url("../assets/temperature.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position-x: -5px;
    background-position-y: 0;
    padding-left: 7px;
    font-weight: bold;
}

.map-viewer .marker {
    font-weight: bold;
    padding: 0 3px;
}

[data-layer-id=hidro] {
    border-radius: 100%;
    height: 16px;
    width: 16px;
    background: radial-gradient(circle at 7px 7px, #5cabff, #555);
}

.fa-circle {
    display:none;
}

.map-viewer .layers-navigation .menu-link {
    height: 32px;
    width: 32px;
    margin-left: 0;
    padding: 5px 8px 5px 7px;
    background: no-repeat 5px 7px;
    background-size: 32px 32px;
}

.map-viewer .layers-navigation li.selected .menu-link {
    background-color: black;
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
}

#layer-navigation-spacer {
    background-image: url(../assets/spacer.png);
}

#menu-clear-layers {
    background-image: url(../assets/menu-clear-layers.png);
}

#menu-show-layers a div {
    background-image: url(../assets/menu-show-layers.png);
}

.menu-show-layers {
    position: absolute;
    bottom: 7px;
}

.menu-clear-layers {
    position: absolute;
    bottom: 47px;
}

#menu-satellite {
    background-image: url(../assets/menu-satellite.png);
}

#vector-layer-list li:last-child,
.layer-list li:last-child,
#layer-list li:last-child {
    padding-bottom: 5px;
}