emhass 0.13.0__py3-none-any.whl → 0.13.1__py3-none-any.whl

emhass/static/style.css

@@ -0,0 +1,1373 @@
+/*! EMHASS Style Sheet */
+/*! style.css v1.0.0 (modified version) | ISC License | https://github.com/ungoldman/style.css */
+
+/* color reference css */
+.light {
+  color: darkblue;
+  color: #ccf3ff;
+  color: white;
+  color: #e1e1e1;
+  color: silver;
+  color: #7d7d7d;
+  color: #3d3d3d;
+  color: #111111;
+}
+
+
+.dark {
+  color: #ccf3ff;
+  color: #e1e1e1;
+  color: silver;
+  color: #7d7d7d;
+  color: #3f3f3f;
+  color: #282928;
+  color: #181818;
+  color: #111111;
+}
+
+/* -------------- */
+
+/* Base (modified) ungoldman style */
+html {
+  color: #3d3d3d;
+  background-color: white;
+  box-sizing: border-box;
+  font-family: Roboto, Noto, Noto Sans, sans-serif;
+  font-size: calc(14px + 0.25vw);
+  line-height: 1.55;
+  -webkit-font-kerning: normal;
+  font-kerning: normal;
+  text-rendering: optimizeLegibility;
+  -webkit-font-feature-settings: "kern", "liga" 1, "calt" 0;
+  font-feature-settings: "kern", "liga" 1, "calt" 0;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0 auto;
+}
+
+article,
+aside,
+footer,
+header,
+nav,
+section,
+figcaption,
+figure,
+main {
+  display: block;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+p,
+blockquote,
+ul,
+ol,
+dl,
+table,
+pre {
+  margin-top: 0;
+  margin-bottom: 1.22em;
+}
+
+small {
+  font-size: 80%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+  line-height: 1.25em;
+  margin-bottom: 1.25rem;
+  margin-top: 2rem;
+  position: relative;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  color: #7d7d7d;
+  font-size: 0.7em;
+  font-weight: 300;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+  font-size: 0.9em;
+}
+
+h1 {
+  font-size: 2.75em;
+}
+
+h2 {
+  font-size: 2.25em;
+}
+
+h3 {
+  font-size: 1.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1.15em;
+  /* color: #575757; */
+}
+
+p {
+  letter-spacing: -0.01em;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  color: darkblue;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #251fe3;
+}
+
+a:active {
+  color: #070f71;
+}
+
+
+a:active,
+a:hover {
+  outline-width: 0;
+  outline: 0;
+}
+
+a:active,
+a:focus,
+a:hover {
+  text-decoration: underline;
+}
+
+ul,
+ol {
+  padding: 0;
+  padding-left: 2em;
+}
+
+ul ol,
+ol ol {
+  list-style-type: lower-roman;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+li>p {
+  margin-top: 1em;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+  padding: 0 1rem;
+  color: #7d7d7d;
+  border-left: 4px solid silver;
+}
+
+blockquote> :first-child {
+  margin-top: 0;
+}
+
+blockquote> :last-child {
+  margin-bottom: 0;
+}
+
+padding b,
+strong {
+  font-weight: inherit;
+  font-weight: 600;
+}
+
+mark {
+  background-color: darkblue;
+  color: #3d3d3d;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: Roboto, Noto, Noto Sans, sans-serif;
+  font-size: 90%;
+}
+
+pre,
+code {
+  background-color: silver;
+  border-radius: 7px;
+}
+
+pre {
+  overflow: auto;
+  word-wrap: normal;
+  padding: 1em;
+  line-height: 1.45;
+}
+
+pre code {
+  background: transparent;
+  display: inline;
+  padding: 0;
+  line-height: inherit;
+  word-wrap: normal;
+}
+
+pre code::before,
+pre code::after {
+  content: normal;
+}
+
+pre>code {
+  border: 0;
+  font-size: 1em;
+  white-space: pre;
+  word-break: normal;
+}
+
+code {
+  padding: 0.2em 0;
+  margin: 0;
+}
+
+code::before,
+code::after {
+  letter-spacing: -0.2em;
+  content: "\00a0";
+}
+
+kbd {
+  background-color: silver;
+  background-image: linear-gradient(#ccf3ff, silver);
+  background-repeat: repeat-x;
+  border: 1px solid silver;
+  border-radius: 7px;
+  box-shadow: 0 1px 0 silver;
+  color: #3d3d3d;
+  display: inline-block;
+  line-height: 0.95em;
+  margin: 0 1px;
+  padding: 5px 5px 1px;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+hr {
+  box-sizing: content-box;
+  overflow: visible;
+  background: transparent;
+  height: 4px;
+  padding: 0;
+  margin: 1em 0;
+  background-color: silver;
+  border: 0 none;
+}
+
+hr::before {
+  display: table;
+  content: "";
+}
+
+hr::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+img {
+  border-style: none;
+  border: 0;
+  max-width: 50%;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 1em 0;
+}
+
+figure img {
+  background: #e1e1e1;
+  border: 1px solid #c7c7c7;
+  padding: 0.25em;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: 0.75em;
+  font-weight: 200;
+  margin: 0;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+dfn {
+  font-style: italic;
+}
+
+dd {
+  margin-left: 0;
+}
+
+dl {
+  padding: 0;
+}
+
+dl dt {
+  padding: 0;
+  margin-top: 1em;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+dl dd {
+  padding: 0 1em;
+  margin-bottom: 1.25em;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+input {
+  margin: 0;
+}
+
+h2 {
+  color: darkblue;
+}
+
+.text.adaptive {
+  color: #111111;
+}
+
+
+button:hover,
+.alert:hover,
+select:hover {
+  color: darkblue;
+  background-color: #e1e1e1;
+}
+
+button:active {
+  background-color: #d7d7db;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  border: 1px solid #7d7d7d;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+[disabled] {
+  cursor: default;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details,
+menu {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+canvas {
+  display: inline-block;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+/* feather icons css 
+https://github.com/feathericons/feather */
+.feather {
+  width: 27px !important;
+  height: 27px !important;
+  stroke: currentColor !important;
+  stroke-width: 2 !important;
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+  fill: none !important;
+  filter: drop-shadow(#282928 .2px .2px) !important;
+  -webkit-text-size-adjust: none !important;
+  -ms-text-size-adjust: none !important;
+
+}
+
+/* feather icons no background color */
+#top-links a {
+  background: none !important;
+}
+
+/* -------------- */
+
+/* EMHASS added style */
+/* set rounded element radius */
+button,
+.main-svg,
+.mystyle,
+.alert,
+.info,
+.section-card,
+select,
+table {
+  border-radius: 7px;
+  /* overflow: visible; */
+}
+
+button,
+.alert,
+.info,
+.section-card,
+select {
+  text-transform: none;
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: #3d3d3d 3px 3px;
+}
+
+
+.alert,
+.info {
+  max-width: 50%;
+}
+
+.info {
+  margin: 0 auto;
+  margin-top: 2em;
+  padding-top: 1em;
+}
+
+h2 {
+  margin-bottom: .3em;
+  margin-right: .3em;
+  margin-left: .3em;
+}
+
+.table_div h4 {
+  margin-top: .5em;
+}
+
+.info p {
+  line-height: 2em;
+}
+
+table {
+  max-width: 50%;
+}
+
+button {
+  padding: 10px;
+  margin: 0px;
+}
+
+.table_div {
+  /* margin: 15px 5px 0px 0px; */
+  margin: 15px 5px 0px 0px;
+}
+
+/* center align diagram/table and set overflow scroll*/
+.plotly-graph-div,
+.table_div {
+  overflow-x: auto !important;
+  margin: 0 auto;
+  margin-bottom: 10px;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .8s;
+}
+
+/* Set min size for diagrams  */
+.svg-container,
+.table_div div {
+  min-width: 850px;
+}
+
+/* center align Table*/
+.table_div table {
+  margin: 0 auto !important;
+}
+
+/* Diagram modbar styling */
+.modebar-group {
+  float: right !important;
+  min-width: 0px !important;
+}
+
+.modebar-container,
+.modebar {
+  width: 100% !important;
+  position: relative !important;
+  float: right !important;
+}
+
+/* */
+
+.svg-container,
+.main-svg,
+.gl-container,
+.modebar-container {
+  margin: 0 !important;
+}
+
+/* Special style for DataFrmae tables */
+/* includes alternating gray and white with on-hover color */
+.mystyle,
+.main-svg {
+  font-size: 11pt;
+  font-family: Arial;
+  border-collapse: collapse;
+  border-style: hidden;
+}
+
+.mystyle td {
+  padding: 5px;
+}
+
+th {
+  padding: 5px 7.77px;
+  text-align: center;
+}
+
+.mystyle tr:nth-child(even) td,
+th {
+  background: #e1e1e1;
+}
+
+.mystyle tr:nth-child(odd) td {
+  background: white;
+}
+
+.mystyle tr:hover td {
+  background-color: silver;
+  cursor: pointer;
+}
+
+th:last-child {
+  border-top-right-radius: 7px;
+}
+
+th:first-child {
+  border-top-left-radius: 7px;
+}
+
+tr:last-child td:first-child {
+  border-bottom-left-radius: 7px;
+}
+
+tr:last-child td:last-child {
+  border-bottom-right-radius: 7px;
+}
+
+tr:hover td:first-child {
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
+}
+
+tr:hover td:last-child {
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+}
+
+#top-links {
+  display: flex;
+  position: absolute;
+  right: 13px;
+  top: 13px;
+}
+
+/* Post task status styling */
+.loading-div {
+  display: flex;
+  margin: 0 auto;
+  align-items: center;
+  align-self: center;
+  max-width: fit-content;
+}
+
+.loading-div h4 {
+  margin-right: 13px;
+}
+
+/* #loader {
+  min-width: 3.5em;
+  min-height: 3.5em;
+  width: 3.5em;
+  height: 3.5em;
+} */
+
+.loading {
+  /* loading animation  */
+  border: 16px solid silver;
+  border-radius: 50%;
+  border-top: 16px solid #00008b;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+  vertical-align: text-top;
+  transition: 1s;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.tick {
+  /* tick symbol  */
+  color: #bfebbc;
+  vertical-align: text-top;
+  font-size: 4.0em;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .5s;
+}
+
+.cross {
+  /* cross symbol  */
+  color: #e3b7b7;
+  vertical-align: text-top;
+  font-size: 4.0em;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .5s;
+}
+
+@-webkit-keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Basic and Advanced fade transitions */
+.TabSelection,
+#advance,
+#basic,
+button,
+select,
+.info {
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .3s;
+}
+
+.input-list,
+.input-box {
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .1s;
+}
+
+/* Alert box styling */
+.alert {
+  display: box;
+  overflow-x: auto;
+  align-items: center;
+  align-self: center;
+  box-sizing: inherit;
+  margin: 0 auto;
+  margin-top: 35px;
+  transition: 0.3s;
+}
+
+.alert div {
+  display: flex;
+  margin: 0 auto;
+  width: fit-content;
+  height: fit-content;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-duration: .8s;
+}
+
+#alert-text {
+  white-space: pre-line;
+  padding-right: 35px;
+  transition: 0.3s;
+}
+
+.alert span {
+  color: #a71515;
+  font-weight: bold;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: calc(22px + 1.5vh);
+  margin: 35px;
+}
+
+/* Input box/List styling */
+#input-container {
+  align-items: center;
+  display: grid;
+}
+
+.input-button-container {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+.input-list,
+#text-area {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  box-sizing: inherit;
+  margin: 0 auto;
+  width: auto;
+  min-width: 50%;
+  max-width: 75%;
+}
+
+.input-buttons {
+  max-width: 50%;
+  display: flex;
+  align-items: "center";
+  align-self: center;
+  align-items: center;
+  box-sizing: inherit;
+  margin: 0 auto;
+  width: auto;
+}
+
+
+.input-buttons button,
+.input-buttons select {
+  border-collapse: collapse;
+  border-radius: 7px;
+  border-style: solid;
+  line-height: 1.15;
+  width: 43px;
+  height: 43px;
+  margin-right: 0.5rem;
+  text-align: center;
+}
+
+#input-select,
+#input-clear {
+  width: 77px;
+}
+
+
+.input-list input,
+.input-box textarea,
+#config-box {
+  border-collapse: collapse;
+  border-radius: 7px;
+  border-style: solid;
+  background-color: #e1e1e1;
+  border-color: silver;
+  color: #282928;
+  overflow-x: auto;
+  line-height: 1.15;
+  box-sizing: inherit;
+  padding: 8px;
+}
+
+.input-box {
+  min-width: 100%;
+}
+
+.input-value {
+  min-width: 75%;
+}
+
+.input-list p {
+  font-size: 1.5em;
+  color: #282928;
+  height: max-content;
+  align-self: center;
+  margin: 0;
+}
+
+/* config page */
+#configuration-container {
+  border: 1px solid;
+  border-width: 1px 0px;
+}
+
+#configuration-container,
+.header-footer {
+  margin-bottom: 5px;
+  padding: 20px 0px;
+  border-radius: 7px;
+  max-width: 90%;
+  margin: auto;
+}
+
+
+.header-footer {
+  background-color: #0000;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-footer h4,
+.header-footer div,
+.header-footer a {
+  line-height: 0;
+  margin: auto 0;
+
+}
+
+/* loading icons */
+.header-footer p {
+  margin: 20px 0;
+}
+
+
+.header-footer h4 {
+  color: darkblue;
+}
+
+.header-footer .feather {
+  height: 3em !important;
+  stroke-width: 3 !important;
+}
+
+#save,
+#json {
+  min-width: 15%;
+  height: auto;
+  display: block;
+  min-height: fit-content;
+  margin-left: auto;
+}
+
+/* configuration list page */
+
+.section-card {
+  max-width: 99%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1vh;
+}
+
+.section-card h4 {
+  margin-top: 5px;
+  background-color: #0000 !important;
+}
+
+.section-card-header {
+  background-color: #e1e1e15e;
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.355);
+  /* justify-content: center; */
+}
+
+.section-body {
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switch,
+.section-card-header input {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 27px;
+  margin-left: auto;
+}
+
+.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: calc(27px - 7px);
+  width: calc(27px - 7px);
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: darkblue;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.slider,
+.slider:before {
+  border-radius: 7px
+}
+
+/* param container and content styling  */
+.param {
+  text-align: left;
+  padding: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.355);
+  transition: 1s;
+}
+
+.param input,
+.section-card-header input {
+  background-color: #ffffff11;
+  border-radius: 7px;
+  border: solid 1px;
+  color: #181818;
+  min-width: 40%;
+  max-width: 70%;
+}
+
+
+.section-card-header input {
+  min-width: calc(27px - 7px);
+}
+
+.param p,
+.param i {
+  font-size: .7em;
+  margin-top: 4px;
+}
+
+.param i {
+  font-size: .7em;
+  margin-bottom: 5px;
+}
+
+.param p {
+  padding-right: 5px;
+  max-width: 777px;
+}
+
+.param h5 {
+  font-size: 1em;
+}
+
+.param h5,
+p {
+  margin: 5px;
+  margin-left: 0px;
+  margin-bottom: 0px;
+}
+
+.param button {
+  width: 20px;
+  height: 20px;
+  line-height: 0;
+  padding: 1px;
+  box-shadow: none;
+  margin-bottom: 5px;
+}
+
+.param-input {
+  display: block;
+  float: left;
+  min-width: 100%;
+}
+
+.param-input input {
+  min-width: 70%;
+}
+
+.param-input input[type="time"] {
+  min-width: 35%;
+}
+
+/* when requirement param is not met */
+.requirement-disable {
+  pointer-events: none;
+  filter: opacity(25%);
+}
+
+/* configuration box page */
+
+#config-box {
+  min-width: 100%;
+  min-height: 85vh;
+}
+
+
+
+
+/* mobile only changes */
+@media only screen and (max-width: 799px) {
+
+  /* modbar disable drag layer and buttons*/
+  .modebar-group:has(a[data-attr=dragmode]),
+  .draglayer,
+  .layer-below {
+    display: none !important;
+  }
+
+  .info,
+  .alert {
+    max-width: 100%;
+  }
+}
+
+
+
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+  html.adaptive {
+    background: #111111;
+    color: #e1e1e1;
+  }
+
+  img,
+  figure,
+  svg.main-svg {
+    -webkit-filter: invert(.82);
+    filter: invert(.82);
+  }
+
+  figure,
+  svg.main-svg {
+    border-color: #181818;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  button,
+  .alert,
+  .info,
+  select {
+    color: #e1e1e1;
+    background-color: #282928;
+    box-shadow: #282928 4px 7px;
+  }
+
+  button:hover,
+  .alert:hover,
+  select:hover {
+    color: #ccf3ff;
+    background-color: #3d3d3d;
+  }
+
+  button:active {
+    background-color: #111111;
+  }
+
+  h2,
+  h3,
+  h4,
+  .header-footer h4,
+  kbd,
+  a {
+    background-color: #111111;
+    color: #ccf3ff;
+    border: #3f3f3f;
+  }
+
+  a:hover {
+    color: #d2e8f0;
+  }
+
+
+  a:active {
+    color: #aaccd6;
+  }
+
+  .modebar-btn svg path {
+    fill: #111 !important;
+  }
+
+  .modebar-btn svg {
+    filter: invert(100%) sepia(64%) saturate(2%) hue-rotate(294deg) brightness(85%) contrast(93%) !important
+  }
+
+  .modebar-btn--logo svg {
+    filter: None !important;
+    /* filter: invert(100%) saturate(100%) brightness(87%) contrast(100%) !important */
+  }
+
+  .g-gtitle,
+  .g-xtitle,
+  .g-ytitle,
+  legend,
+  th {
+    color: #e1e1e1;
+  }
+
+  .mystyle tr {
+    background: none;
+  }
+
+  .mystyle tr:nth-child(even) td,
+  th {
+    background: #282928;
+  }
+
+  .mystyle tr:nth-child(odd) td {
+    background: #111111;
+  }
+
+  .mystyle tr:hover td {
+    background-color: #3f3f3f;
+  }
+
+  .modebar-group {
+    background-color: #0000 !important;
+  }
+
+  .modebar-btn {
+    background: #3f3f3f;
+  }
+
+  .input-list input,
+  .input-box textarea,
+  #config-box {
+    background-color: #282928;
+    border-color: #e1e1e1;
+    color: #e1e1e1
+  }
+
+  .input-list p {
+    color: #e1e1e1;
+  }
+
+  .loading {
+    /* loading animation  */
+    border: 16px solid #282928;
+    border-top: 16px solid #ccf3ff;
+  }
+
+  input:checked+.slider {
+    background-color: #ccf3ff;
+  }
+
+  .param {
+    border-color: rgba(255, 255, 255, 0.355);
+  }
+
+  .param input,
+  .section-card-header input {
+    color: #e1e1e1;
+  }
+
+  .section-card-header {
+    background-color: #ffffff11;
+  }
+
+
+  #configuration-container {
+    background-color: #ffffff07;
+    border: 0;
+  }
+
+
+}