+
+.timerange input {
+ display: inline-block;
+ width: 67%;
+ margin-right: 5px;
+}
+
+.timerange select {
+ display: inline-block;
+ width: 30%;
+ float: right;
+}
+
+
+/* GridFTP view */
+
+#filex {
+ /* needed for positioning spinner */
+ position: relative;
+}
+
+#filex input[type=checkbox] {
+ margin: 0;
+}
+
+.path.breadcrumb > li + li::before {
+ content: "› ";
+}
+
+#spinner-overlay {
+ background: url('/static/filex/spinner.gif') white center center no-repeat fixed;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ display: none;
+}
+
+.busy #spinner-overlay {
+ display: initial;
+}
+
+#filex nav {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+#host {
+ flex: 1 auto;
+ margin-right: 10px;
+ white-space: nowrap;
+}
+
+#controls {
+ flex: 0 auto;
+ margin-bottom: 5px;
+ white-space: nowrap;
+}
+
+#path {
+ flex: 1 100%;
+}
+
+@media (min-width: 768px) {
+ #host {
+ order: 1;
+ flex: 0 auto;
+ margin-right: 10px;
+ }
+
+ #path {
+ order: 2;
+ flex: 10 auto;
+ margin-top: -1px;
+ margin-right: 10px;
+ }
+
+ #controls {
+ order: 3;
+ flex: 0 auto;
+ }
+}
+
+#host .list {
+ display: none;
+}
+
+#host.edit .list {
+ display: initial;
+}
+
+#host.edit #btn-host {
+ display: none;
+}
+
+#host .selectize-control {
+ min-width: 200px;
+}
+
+#host .selectize-input {
+ padding-right: 32px;
+}
+
+
+
+/* task details view */
+
+.working-dir {
+ margin-top: 10px;
+}
+
+@media (min-width: 768px) {
+ .working-dir {
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ margin-top: -17px;
+ z-index: 1;
+ }
+}