General clean up, updates, and prep for new version of launcher using Svelte.

app/css/native_app.css

@@ -1,104 +1,151 @@
 body {
-  margin: 0rem;
-  padding: 0rem;
-  /*border: solid thin pink;*/
-  margin-bottom: 1rem; /* This is for the bottom status bar. */
+    margin: 0rem;
+    padding: 0rem;
+    /*border: solid thin pink;*/
+    margin-bottom: 1rem; /* This is for the bottom status bar. */
 }
 
 body > .container { /* allow the container directly under body to be 100% wide*/
-  /*max-width: 100%;*/
-  
-  margin: .1rem;
-  padding: .1rem;
-  /*border: solid thin pink;*/
+    /*max-width: 100%;*/
+
+    margin: .1rem;
+    padding: .1rem;
+    /*border: solid thin pink;*/
 }
 
 body > .container > .row { /* allow the container directly under body to be 100% wide*/
-  margin-right: 0;
-  margin-left: 0;
-  margin: .1rem;
-  padding: .1rem;
+    margin-right: 0;
+    margin-left: 0;
+    margin: .1rem;
+    padding: .1rem;
 }
 
 .app_status_bar {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  margin: 0 0;
-  padding: 0 .5rem;
-  background: #eee;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin: 0 0;
+    padding: 0 .5rem;
+    background: #eee;
 }
 
 .app_status_bar:hover {
-  font-size: 2.5rem;
+    font-size: 2.5rem;
 }
 
 .app_network_status {
-  
-  background: #eee;
+
+    background: #eee;
 }
 
 .app_datetime {
-  float: right;
+    float: right;
 }
 
 .app_warning {
-  background: yellow;
+    background: yellow;
 }
 
 .btn_no_case {
-  text-transform: none;
+    text-transform: none;
 }
 
 /*
 .btn-info {
-  background: green;
+    background: green;
 }
 
 .btn-info:hover {
-  background: darkgreen;
+    background: darkgreen;
 }
 
 
 mynewcolor:#77cccc;
 
 .btn-info {
-    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
+        @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
 }
 
 .btn-outline-primary {
-    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
+        @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
 }
 */
 
 
 .filename {
-  /*
-  margin-left: .1rem;
-  padding-left: .1rem;
-  */
+    /*
+    margin-left: .1rem;
+    padding-left: .1rem;
+    */
 }
 
 
 .menu_session_time {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .menu_session_code, .detail_session_code {
-  margin-left: .1rem;
-  padding-left: .1rem;
-  font-size: .5em;
+    margin-left: .1rem;
+    padding-left: .1rem;
+    font-size: .5em;
 }
 
 .session_detail>h2 {
-  background-color: #F7F7F7;
-  /*border-bottom: solid .1rem black;*/
+    background-color: #F7F7F7;
+    /*border-bottom: solid .1rem black;*/
 }
 
 .detail_session_code {
-  margin-left: .1rem;
-  padding-left: .1rem;
-  font-size: .5em;
+    margin-left: .1rem;
+    padding-left: .1rem;
+    font-size: .5em;
 }
 
 
+
+.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;
+    }
+}
+
+#file_import_drag_area {
+    font-size: 3rem;
+    font-weight: 600;
+    width: 90%;
+    height: 15rem;
+}
+
+#file_import_drag_area:hover {
+    font-size: 3.5rem;
+    font-weight: 1000;
+}
+
+#file_import_drag_area:hover:before {
+    /*font-weight: 1000;
+    content: 'Here';*/
+}
+
+#file_import_drag_area::before {
+    content: attr(data-value);
+
+    position: relative;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 15rem;
+    /*border: 1px solid red;*/
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}