-
-
- - - -
- - - -
-
-
-
-
+ .loading-map {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ color: #FFF;
+ background-color: #000;
+ text-align: center;
+ opacity: 0.5;
+ font-size: 45px;
+ }
-
-
-
RGB
-
-
- Layers
-
-
-
-
-
+ .loading-map.off {
+ opacity: 0;
+ -o-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ transition: all ease .5s;
+ visibility: hidden;
+ }
-
- Viz
-
+ .middle-center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .middle-center * {
+ display: block;
+ padding: 5px;
+ }
+
+ #menu {
+ left: 0;
+ top: 70px;
+ width: 300px;
+ -o-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ transition: all ease .5s;
+ }
+
+ #menu.off {
+ left: -200px;
+ -o-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ transition: all ease .5s;
+ background-color: red;
+ }
+
+ #toolbar {
+ height: 35px;
+ }
+
+ #toolbar li {
+ display: block;
+ color: #fff;
+ background-color: #556671;
+ font-weight: 700;
+ font-size: 12px;
+ padding: 5px;
+ height: 100%;
+ width: 100%;
+ text-transform: uppercase;
+ text-align: center;
+ text-decoration: none;
+ outline: 0;
+ cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ #toolbar li svg {
+ font-size: 25px;
+ line-height: 25px;
+ padding-bottom: 0;
+ }
+
+ #toolbar li:hover {
+ background-color: #28333b;
+ }
+
+ #toolbar li.active {
+ color: #000;
+ background-color: #fff;
+ }
+
+ #toolbar li.disabled {
+ pointer-events: none;
+ opacity: 0.4;
+ }
+
+ #menu-content section {
+ display: none;
+ }
+
+ #menu-content section.active {
+ display: inherit;
+ }
+
+ #hide-arrow {
+ -o-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ transition: all ease .5s;
+ }
+
+ #hide-arrow.off {
+ transform: rotate(-180deg);
+ }
+
+ #hide-btn {
+ position: absolute;
+ top: 0;
+ height: 35px;
+ font-size: 35px;
+ line-height: 35px;
+ vertical-align: middle;
+ right: -35px;
+ color: #28333b;
+ background-color: #fff;
+ }
+
+ #hide-btn:hover {
+ color: #fff;
+ background-color: #28333b;
+ cursor: pointer;
+ }
+
+ .line-red {
+ fill: none;
+ stroke: red;
+ stroke-width: 1.5px;
+ }
+
+ .line-green {
+ fill: none;
+ stroke: green;
+ stroke-width: 1.5px;
+ }
+
+ .line-blue {
+ fill: none;
+ stroke: blue;
+ stroke-width: 1.5px;
+ }
+
+ #histogram-table td {
+ min-width: 60px;
+ }
+
+ @media(max-width: 767px) {
+ #menu.off {
+ left: -240px;
+ -o-transition: all .5s ease;
+ -webkit-transition: all .5s ease;
+ -moz-transition: all .5s ease;
+ -ms-transition: all .5s ease;
+ transition: all ease .5s;
+ }
+
+ .mapboxgl-ctrl-attrib {
+ font-size: 10px;
+ }
+ }
+
+ .logo {
+ position: absolute;
+ z-index: 90;
+ background-color: white;
+ }
+
+ .logo img {
+ height: 70px;
+ width: 80px;
+ }
+
+ #name {
+ position: absolute;
+ z-index: 99;
+ top: 0px;
+ left: 80px;
+ height: 70px;
+ width: 280px;
+ background-color: white;
+ color: green;
+ background-color: white;
+ font-size: 30px;
+ font-weight: bold;
+ }
+
+ .vizex img {
+ height: 70px;
+ width: 80px;
+ }
+
+
+
+
+
+
+  }})
+
-
+
-
-
-
+
+  }})
+
+
+
+