update

public/rgc_website/css/form_joeStyle.css

+/* Bootstrap a bit adapt */
+.joeForm {
+    display: block;
+    width: auto;
+    height: 25px;
+    padding: 3px 3px;
+    font-size: 14px;
+    line-height: 1;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #696a6d;
+    border-radius: 10px;
+}
+
+i.fas {
+    display: inline-block;
+    border-radius: 60px;
+    box-shadow: 0px 0px 2px #888;
+    padding: 0.5em 0.6em;
+  
+  }
\ No newline at end of file

public/rgc_website/css/index.css

+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.6);
+    border-radius: 5px;
+    border: 1px solid #444;
+    padding: 10px 10px;
+    color: #fff;
+    width: 250px;
+    /* font: 1em "Fira Sans", sans-serif; */
+}
+
+
+
+.mytab { 
+       display:inline-block; 
+       margin-left: 35px; 
+}
+
+h1 {
+	/* font-family: 'Lato', sans-serif; */
+	font-style: bold;
+    color: red;
+	background-color: rgba(42, 42, 42, 0);
+	text-shadow: 3px 3px #000000
+}
+h2 {
+	/* font-family: 0.75em 'Lato', sans-serif; */
+	font-weight: bold;
+    color: wheat;
+}
+h3 {
+	/* font: 1em 'Lato', sans-serif;
+	font-style: bold; */
+    color: rgb(179, 245, 209);
+}
+
+#heightSliderLabel, #heightValue {
+    vertical-align: top;
+}
+
+.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
+    color: #fff
+}
+
+.loadingIndicator {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -33px;
+    margin-left: -33px;
+    width: 66px;
+    height: 66px;
+    background: url(Source/Images/ajax-loader.gif) center no-repeat;
+}
+
+.cover {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.75);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 150px;
+}
+#img_menu {
+	margin-right: 10px; padding: 0; width: 300px;position: absolute; left: 5px;
+}
+#img_menu:hover {
+	cursor: pointer;
+	opacity: .9;
+}
+
+#HightChartContainer {
+    position: absolute;
+    /* right: 50px; */
+    top: 95px;
+    left: 390px;
+    width: 65%;
+    min-height: 60%;
+    margin: 0 auto;
+}
+#TableContainer {
+    position: absolute;
+    /* right: 50px; */
+    top: 750px;
+    left: 390px;
+    width: 65%;
+    /* min-height: 60%; */
+    margin: 0 auto;
+}
+#ebikeRealtime {
+    position: absolute;
+    left: 245px;
+	top: 10px;
+	min-width: 10%;
+	min-height: 50%;
+	margin: 0 auto;
+}
+
+#ebikeInfo {
+    position: absolute;
+    right: 10px;
+	top: 50px;
+	width: 200px;
+}
+
+#StatInfo{
+	position: absolute;
+	right: 50px;
+	bottom: 10px;
+	width: 50%;
+}
+
+/* #ebikeRealtime {
+    position: absolute;
+    right: 10px;
+	top: 100px;
+	width: 250px;
+} */
+.nowrap {
+    white-space: nowrap;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+html, body, #cesiumContainer {
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+#uiMenu {
+    border-radius:5px;
+    padding: 10px;
+    position:absolute;
+    left: 20px;
+    font-family: "Arial";
+    z-index: 99999;
+}
+#redHook {
+	cursor: pointer;
+}
+
+.myButtonOff {
+	-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
+	-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
+	box-shadow: 3px 4px 0px 0px #8a2a21;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f09c87), color-stop(1, #f24437));
+	background:-moz-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-webkit-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-o-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:-ms-linear-gradient(top, #f09c87 5%, #f24437 100%);
+	background:linear-gradient(to bottom, #f09c87 5%, #f24437 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09c87', endColorstr='#f24437',GradientType=0);
+	background-color:#f09c87;
+	-moz-border-radius:18px;
+	-webkit-border-radius:18px;
+	border-radius:18px;
+	border:1px solid #d02718;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Verdana;
+	font-size:12px;
+	padding:6px 15px;;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #810e05;
+}
+.myButtonOff:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #f09c87));
+	background:-moz-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-webkit-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-o-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:-ms-linear-gradient(top, #f24437 5%, #f09c87 100%);
+	background:linear-gradient(to bottom, #f24437 5%, #f09c87 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#f09c87',GradientType=0);
+	background-color:#f24437;
+}
+.myButtonOff:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonOn {
+	-moz-box-shadow: 3px 4px 0px 0px #9acc85;
+	-webkit-box-shadow: 3px 4px 0px 0px #9acc85;
+	box-shadow: 3px 4px 0px 0px #9acc85;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
+	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
+	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
+	background-color:#74ad5a;
+	-moz-border-radius:18px;
+	-webkit-border-radius:18px;
+	border-radius:18px;
+	border:1px solid #3b6e22;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Verdana;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #92b879;
+}
+.myButtonOn:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
+	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
+	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
+	background-color:#68a54b;
+}
+.myButtonOn:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonRed {
+	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
+	box-shadow:inset 0px 1px 0px 0px #f5978e;
+	background-color:#f24537;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #d02718;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+}
+.myButtonRed:hover {
+	background-color:#c62d1f;
+}
+.myButtonRed:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonGreen {
+	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
+	box-shadow:inset 0px 1px 0px 0px #caefab;
+	background-color:#77d42a;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #268a16;
+	display:inline-block;
+	cursor:pointer;
+	color:#0a0a0a;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+}
+.myButtonGreen:hover {
+	background-color:#5cb811;
+}
+.myButtonGreen:active {
+	position:relative;
+	top:1px;
+}
+
+.myButtonBlue {
+	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	box-shadow:inset 0px 1px 0px 0px #97c4fe;
+	background-color:#3d94f6;
+	-moz-border-radius:3px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	border:1px solid #337fed;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Trebuchet MS;
+	font-size:12px;
+	padding:2px 2px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #1570cd;
+}
+.myButtonBlue:hover {
+	background-color:#1e62d0;
+}
+.myButtonBlue:active {
+	position:relative;
+	top:1px;
+}
+
+
+#3DTiles {
+    padding-top: 10px;
+}
+
+/* for the arrow down */
+/* i {
+	
+	border-width: 0 3px 3px 0;
+	display: inline-block;
+	padding: 3px;
+  }
+  .down {
+	border: solid rgb(138, 154, 226);
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}   */
+
+.mainbackdrop {
+	overflow: scroll;
+	overflow-x: hidden;
+	max-height: 60%;
+}
+
+/* Hide Scroll bar x and pretty right */
+::-webkit-scrollbar {
+	width: 5px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: rgba(42, 42, 42, 0);
+}
+
+/* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+	background-color: rgba(250, 250, 250, 0.5);
+	border-radius: 20px
+}
+
+/* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+	background-color: rgba(42, 42, 42, 0);
+}
+
+/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+	background-color: rgba(42, 42, 42, 0);
+}

public/rgc_website/css/legend.css

+.outlined {
+    border: 0px solid black;
+ }
+
+ p{
+     margin-top: 1px;
+     margin-bottom: 5px;
+ }
+
+ h6{
+     margin-top: 2px;
+     margin-bottom: 2px;
+ }
+#legend {
+    position: absolute;
+    /*display: none; */
+    display: block;
+    width: 130px;
+    /*height: 300px; */
+    
+    bottom: 5px;
+    right: 5px; 
+	/*left: 85%;*/
+    background-color: rgba(0, 0, 0, 0.70); /* dim the background */
+    z-index: 2;
+    cursor: auto; /* ??? */
+    padding: 1px;    
+	
+	color: white;
+	font-size: 1.0em;
+    font-weight: bold;
+}
+

public/rgc_website/css/main.css

+.jumbotron {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+@media (min-width: 768px) {
+  .jumbotron {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+}
+
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+
+.jumbotron h1 {
+  font-weight: 300;
+}
+
+.jumbotron .container {
+  max-width: 40rem;
+}
+
+footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+footer p {
+  margin-bottom: 0.25rem;
+}
+
+body{
+    background-color: #cc3125;/* thistle; */
+}
+
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
+
+
+a {
+	color: black;
+}
+
+a:hover{
+  color: white;
+}
+
+a:visited {
+	color: black;
+
+}
+
+
+.myBtn {
+    color: #fff;
+    background-color: tomato;
+    border-color: thistle; /*set the color you want here*/
+    width: 180px;
+}
+.myBtn:hover, .myBtn:focus, .myBtn:active, .myBtn.active, .open>.dropdown-toggle.myBtn {
+    color: #fff;
+    background-color: thistle;
+    border-color: #285e8e; /*set the color you want here*/
+}
+
+.thumbimg{
+    width: 100%;
+    height: 225px;
+}
+
+a.button {
+    -webkit-appearance: button;
+    -moz-appearance: button;
+    appearance: button;
+
+    text-decoration: none;
+    color: blue;
+    border: solid;
+    border: 4px;
+}
+
+.windSVG{
+    margin-right : 20px;
+}
+
+.hftlogo{
+  margin-right : 20px;
+  /* width: 100px; */
+}
+
+
+.extension{
+  padding: 20px 10px;
+  min-height: 445px;
+  max-height: 445px;
+  /* margin: 20px; */
+}
+
+.py-5{
+  padding: 1rem!important; 
+}
+
+.card-body{
+  min-height: 90px;
+  padding: 0.5rem 0.5rem 0.2rem;
+
+}
+
+.card-text{
+  max-height: 85px;
+  overflow: auto;
+  /* overflow-y: auto; */  
+  /* padding-bottom: 10px; */
+
+}
+
+.btnGroupDiv{
+  /* padding: 20px 00px 00px 20px; */
+  padding: 0.5rem;
+}
\ No newline at end of file

public/rgc_website/css/myCesiumStyle.css

+@charset "UTF-8";
+
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+
+html {
+  margin: 0 auto;
+  max-width: 80%;
+}
+
+header,
+footer {
+  padding: 1em;
+  color: black;
+  background-color: White;
+  clear: left;
+  text-align: center;
+}
+footer {
+  padding-top: 0px;
+}
+
+.pagecesium {
+  height: 500px;
+  position: relative;
+  width: 100%;
+  min-width: 630px;
+}
+
+.pagepp {
+  float: left;
+  height: 100%;
+  width: 50%;
+}
+
+body {
+  min-width: 650px;
+  margin: 0px;
+}
+
+h2,
+h3 {
+  margin-block-start: 1px;
+  margin-block-end: 1px;
+}
+
+.titleFigure {
+  margin: 2px 0;
+  /* height: 20%; */
+  width: 12%;
+}
+
+.cesium-infoBox-visible {
+
+  
+    font-weight: 100;    
+    background-color: brown;
+    text-align: right;
+}
+
+.cesium-infoBox-iframe {
+    font-size: 0.5em;
+    font-weight: 100;    
+    background-color: brown;
+    text-align: left;
+  }

public/rgc_website/css/switchButton.css

+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 19px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 11px;
+  width: 11px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
\ No newline at end of file