Upload 3 files

static/IMG-Larger.css

@@ -0,0 +1,88 @@
+
+
+/*IMGGGGG*/
+#myImg {
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+  
+  #myImg:hover {opacity: 0.7;}
+  
+  /* The Modal (background) */
+  .modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+  }
+  
+  /* Modal Content (image) */
+  .modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+  }
+  
+  /* Caption of Modal Image */
+  #caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 150px;
+  }
+  
+  /* Add Animation */
+  .modal-content, #caption {    
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+  }
+  
+  @-webkit-keyframes zoom {
+    from {-webkit-transform:scale(0)} 
+    to {-webkit-transform:scale(1)}
+  }
+  
+  @keyframes zoom {
+    from {transform:scale(0)} 
+    to {transform:scale(1)}
+  }
+  
+  /* The Close Button */
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  
+  /* 100% Image Width on Smaller Screens */
+  @media only screen and (max-width: 700px){
+    .modal-content {
+        width: 100%;
+    }
+  }

static/MenuStyle.css

@@ -75,9 +75,10 @@
   transform: translate(0, -10px) rotate(45deg);
 }
 /*Dashed Lines on the left - Menu icon */
-#slider {
-  position: absolute;
-  width:400px;
+#mySidebar {
+
+  position: fixed;
+  width:450px;
   height:900px;
   background:rgb(179, 179, 179);
   transform: translateX(-100%);
@@ -113,20 +114,22 @@
   100% { -webkit-transform: translateX(-100%); }
 }
 /*Menu options*/
-#menuOptions{
+#menuOptions , #menuOptions li a{
   margin-left: 5px;
-  font-size: 30px;
+  font-size: 25px;
   margin-top: 8px;
   color: white;
   font-family: "acumin-pro", sans-serif;
   font-weight: 400;
+  
   font-style: normal;
+  text-decoration: none;
 }
 #menuOptions  li{
   margin-bottom: 6px;
   
   }
-#menuOptions  li:hover{
+#menuOptions  li:hover, #menuOptions li a:hover{
 color: black;
 cursor: pointer;
 

static/wordSearchCss.css

@@ -0,0 +1,401 @@
+#all{
+  position: fixed; /* Sit on top of the page content */
+  display: none; /* Hidden by default */
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+  
+}
+body{
+  margin-top: 50px;
+}
+.tab{
+  margin-top: -4px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+#infoImg{
+  margin-top: -2px;
+}
+#LegendHist{
+  margin-left: 25px;
+}
+.container{
+  margin-top: 11px;
+}
+.container .bar1, .container .bar2 , .container .bar3 {
+  height: 5px;
+}
+
+.select2-selection {
+  height: 34px !important; 
+  width: 51ch !important;
+  border: solid 2px #6e6e6e !important;
+  /* padding-left: 4px; */
+  margin-left: 5px;
+  margin-right: -4px ;
+  margin-top: 5px;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13px;
+  border-radius: 3px;
+  cursor: pointer;
+  color: black;
+  
+}
+
+.select2-selection--multiple {
+  height: auto !important;
+  width: 51ch !important;
+  margin-left: -7px;
+  padding-left: -5px;
+}
+
+.select2-selection__choice {
+  height: 30px;
+  line-height: 30px;
+  /* padding-right: 16px !important; */
+  padding-left: 10px !important;
+  background-color: #CAF1FF !important;
+  color: #333 !important;
+  border: none !important;
+  border-radius: 3px !important;
+}
+
+.select2-selection__choice__remove {
+  float: right;
+  margin-right: 0;
+  margin-left: 2px;
+}
+.select2-search--inline .select2-search__field {
+  line-height: 10px;
+  color: #333;
+  margin-left: 0;
+  margin-bottom: 5px;
+  /* width: 100%!important; */
+}
+
+.select2-container:hover,
+.select2-container:focus,
+.select2-container:active,
+.select2-selection:hover,
+.select2-selection:focus,
+.select2-selection:active {
+  outline-color: transparent;
+  outline-style: none;
+}
+
+.select2-results__options li {
+  display: block; 
+  width: 51ch !important;
+}
+
+.select2-selection__rendered {
+  transform: translateY(2px);
+}
+
+.select2-selection__arrow {
+  display: none;
+}
+
+.select2-results__option--highlighted {
+  background-color: #CAF1FF !important;
+  color: #333 !important;
+}
+
+.select2-dropdown {
+  border-radius: 0 !important;
+  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
+  border: none !important;
+  margin-top: 4px !important;
+  width:52ch !important;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13px;
+  margin-left: 5px;
+}
+
+.select2-results__option {
+  font-family: "acumin-pro", sans-serif;
+  font-size: 13px;
+  line-height: 24px !important;
+  vertical-align: middle !important;
+  padding-left: 8px !important;
+}
+
+.select2-results__option[aria-selected="true"] {
+  background-color: #eee !important; 
+}
+
+.select2-search__field {
+  font-family: "acumin-pro", sans-serif;
+  color: #333;
+  font-size: 13px;
+  padding-left: 8px !important;
+  border-color: #c4c4c4 !important;
+}
+.select2-container--default  {
+  border: none;
+}
+#keywordLabelID{
+  font-family: "acumin-pro", sans-serif;
+  font-weight: bold;
+  /* font-style: normal; */
+  margin-left: 7px ;
+  font-size: 13px;
+  position: absolute;
+  margin-top: 10px;
+  color: black;
+  /* font-style: italic; */
+
+}
+#keywordinputID{
+margin-top: 15px ;
+height: 33px;
+width: 51ch;
+margin-left: 5px;
+margin-right: -4px ;
+margin-bottom: 10px;
+font-family: "acumin-pro", sans-serif;
+font-weight: 400;
+font-style: normal;
+font-size: 13px;
+border-radius: 3px;
+cursor: pointer;
+color: black;
+font-weight: 400;
+padding-left: 10px;
+border: 2px solid  #6e6e6e;
+}
+#WordSearch{
+  background-color: #16c72e;
+  border: none;
+  padding: 10px 122px; /*102*/
+  cursor: pointer;
+  border-radius: 5px;
+  margin-left: 5px;
+  margin-top: 5px;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: bold;
+  font-style: normal;
+  font-size: 14px;
+  color:white;
+  display:block;
+  width:373px;
+}
+#WordSearch:hover{
+  /* background-color:darkseagreen; */
+  color:black;
+  box-shadow: 0 0 8px 2px #16c72e; 
+}
+
+ #labelOutputs, #measureLabel, #relvDocLabel{
+  font-family: "acumin-pro", sans-serif;
+  font-weight: bold;
+  margin-left: 7px ;
+  /* margin-top: 5px; */
+  font-size: 13px;
+  position: absolute;
+  color: black;
+  
+}
+
+#measureLabel, #relvDocLabel{
+  margin-top: 10px;
+}
+
+#measureCheckbox, #relvdiv{ /*,.area , .pattern, .border , .length , .match{*/
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  margin-left: 13px ;
+  margin-top: 10px;
+  font-size: 12;
+  cursor: pointer;
+  max-width: 50%;
+
+}
+#relvselectid {
+
+  width: 51ch;
+  font-size: 13px;
+  margin-top: 5px;
+  resize: auto;
+  background-color: #fff;
+  border-radius: 0 0 3px 3px;
+  border: 2px solid  #6e6e6e;
+  margin-bottom: 10px;
+}
+
+/***********************************Output******************************************/
+div.scroll-container {
+  margin-top: 30px;
+  margin-left: 5px;
+  margin-right: 5px;
+  background-color: #333;
+  overflow: auto;
+  white-space: nowrap;
+  padding: 8px;
+
+
+}
+
+div.scroll-container img {
+  padding: 10px;
+  float: left !important;
+  /* width: 500px; */
+}
+div.scroll-container img:hover {
+  transform: scale(1.02);
+}
+/********Table**************/
+.dataframe {
+  margin-top: 30px;
+  margin-left: 5px;
+  margin-right: 5px;
+  font-family: "acumin-pro", sans-serif;
+
+  border-collapse: collapse;
+  width: auto;
+}
+
+.dataframe td, .dataframe th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.dataframe tr:nth-child(even){background-color: #f2f2f2;}
+
+.dataframe tr:hover {background-color: #ddd;}
+
+.dataframe th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #353b39;
+  color: white;
+}
+
+
+/* The container */
+
+/**/
+.radioClass{
+  margin-left: 5px;
+}
+.containerLabels {
+  margin-top:5px ;
+  display: inline-block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-family: "acumin-pro", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default radio button */
+.containerLabels input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* Create a custom radio button */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 22px;
+  width: 22px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+
+/* On mouse-over, add a grey background color */
+.containerLabels:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the radio button is checked, add a blue background */
+.containerLabels input:checked ~ .checkmark {
+  background-color: #2196F3;
+}
+
+/* Create the indicator (the dot/circle - hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the indicator (dot/circle) when checked */
+.containerLabels input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the indicator (dot/circle) */
+.containerLabels .checkmark:after {
+ 	top: 7.2px;
+	left: 7px;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: white;
+}
+
+/****************Sunburst**************/
+#sunburst {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.w3-container{
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+/**********************Loading***************************/
+#loading {
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid #16c72e;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+  /* margin-left:; */
+  margin-top:10%; 
+  /* margin-left: 300px;  */
+  margin-left:60% ;
+  margin-right: 20px;
+
+  position: absolute;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+