Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. HTML Code Editor<->Laufzeit unterschiedlich

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    HTML Code Editor<->Laufzeit unterschiedlich

    This topic has been deleted. Only users with topic management privileges can see it.
    • JB_Sullivan
      JB_Sullivan last edited by JB_Sullivan

      Moin zusammen,
      kann mir jemand sagen was ich oder ggf. ioB falsch macht?

      Im Editor (1.2.6) wird mit einem basic-html Widget mit meinem eingegeben Code die Tabelle so angezeigt.

      2020-08-01 09_54_28-Edit vis.png

      Gehe ich aber ins Laufzeit Bild, sieht das ganze so aus - es fehlen also die kompletten Rahmen:

      2020-08-01 09_54_07-vis.png

      Habt ihr eine Idee wo der Fehler liegen könnte?
      Hier mal mein HTML Quellcode - ist der vielleicht nicht 100% sauber?

      Davon mal ganz abgesehen - es handelt sich hierbei nicht um einen Datenpunkt, sondern um reines HTML was mir als Information (Erinnerung) dienen soll. Mir würde es sehr gut gefallen, wenn ich diese Tabelle direkt über die ioB Oberfläche bearbeiten könnte, wenn sich Änderungen darin ergeben.

      So wie es jetzt ist, muss ich den HTML Quelltext ändern und im Editor diesen dem View wieder neu zuweisen.
      Wie müsste ich vorgehen, wenn ich das über die VIS Browser Oberfläche anpassen wollte?

      <style type="text/css">
      .tg  {border-collapse:collapse;border-spacing:0;}
      .tg .tg-m4eo{font-size:14px;font-family:Verdana, Geneva, sans-serif !important;}
      .tg .tg-nrw8{font-size:14px, bold !important;}
      .tg .tg-9vto{font-family:Verdana, Geneva, sans-serif !important;}
      .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:2px;border-color:white;overflow:hidden;word-break:normal;}
      .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:2px;border-color:white;overflow:hidden;word-break:normal;}
      </style>
      <table class="tg">
        <tr>
          <th class="tg-m4eo"><b>Wochentag</b></th>
          <th class="tg-nrw8"><b>Randmähen</b></th>
          <th class="tg-nrw8"><b>Einstiegspunkt</b></th>
          <th class="tg-nrw8"><b>Start</b></th>
          <th class="tg-nrw8"><b>Ende</b></th>
        </tr>
        <tr>
          <td class="tg-031e"><b>Montag</b></td>
          <td class="tg-031e"><center>JA</center></td>
          <td class="tg-031e"><center>Auto</center></td>
          <td class="tg-031e">11:45</td>
          <td class="tg-031e">12:00</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>4</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">19:00</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Dienstag</b></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>2</center></td>
          <td class="tg-031e">11:00</td>
          <td class="tg-031e">13:00</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>3</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">19:00</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Mittwoch</b></td>
          <td class="tg-031e"><center>JA</center></td>
          <td class="tg-031e"><center>Auto</center></td>
          <td class="tg-031e">11:45</td>
          <td class="tg-031e">12:00</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>5</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">19:00</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Donnerstag</b></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>1</center></td>
          <td class="tg-031e">10:45</td>
          <td class="tg-031e">12:45</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>3</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">19:00</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Freitag</b></td>
          <td class="tg-031e"><center>JA</center></td>
          <td class="tg-031e"><center>Auto</center></td>
          <td class="tg-031e">11:45</td>
          <td class="tg-031e">12:00</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>6</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">19:00</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Samstag</b></td>
          <td class="tg-031e"><center>JA</center></td>
          <td class="tg-031e"><center>Auto</center></td>
          <td class="tg-031e">11:45</td>
          <td class="tg-031e">12:00</td>
        </tr>
        <tr>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"><center>2</center></td>
          <td class="tg-031e">16:30</td>
          <td class="tg-031e">18:30</td>
        </tr>
        <tr>
          <td class="tg-031e"><b>Sonntag</b></td>
          <td class="tg-031e" colspan="4"></font color="red"><center>Mähpause</center></td></font>
        </tr>
        <tr>
          <td class="tg-031e"><b>SUMME</b></td>
          <td class="tg-031e"></td>
          <td class="tg-031e"></td>
          <td class="tg-9vto" colspan="2"><center>19 h 40 Min.</center></td>
        </tr>
      </table>
      
      Homoran 1 Reply Last reply Reply Quote 0
      • Homoran
        Homoran Global Moderator Administrators @JB_Sullivan last edited by Homoran

        @JB_Sullivan Vermutung:
        Linienfarbe ist schwarz (oder transparent).
        Musst du evtl. im widget anpassen

        JB_Sullivan 1 Reply Last reply Reply Quote 0
        • JB_Sullivan
          JB_Sullivan @Homoran last edited by

          @Homoran
          Ich kann machen was ich will - ob im HTML Quellcode oder über das Widget - er stellt mit die Linien einfach nicht dar.

          1 Reply Last reply Reply Quote 0
          • JB_Sullivan
            JB_Sullivan last edited by JB_Sullivan

            Ich kriege noch eine Macke - ich habe jetzt so viele Online Tabellen Generatoren probiert und immer funktioniert es im VIS Editor und auch als normale HTML Datei im Browser. Sobald ich aber es als Laufzeitbild aufrufe kommt nur Murks dabei heraus.

            Von links nach rechts: Browser via html Datei Aufruf; VIS Laufzeit Bild; VIS Editor (basic-html Widget)

            2020-08-02 12_30_27-new 4.html.png 2020-08-02 12_30_41-vis.png 2020-08-02 12_30_51-Edit vis.png

            <style type="text/css">
            .tg  {border-collapse:collapse;border-color:#ccc;border-spacing:0;}
            .tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:1px;color:#333;
              font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
            .tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:1px;color:#333;
              font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
            .tg .tg-qqnn{background-color:#9B9B9B;border-color:#ffffff;color:#333;font-size:14px;text-align:center;vertical-align:top}
            .tg .tg-if0v{background-color:#9b9b9b;border-color:#ffffff;font-family:Verdana, Geneva, sans-serif !important;;font-size:14px;
              font-weight:bold;text-align:left;vertical-align:top}
            .tg .tg-7so4{background-color:#9B9B9B;border-color:#ffffff;color:#333;font-size:14px;font-weight:bold;text-align:center;
              vertical-align:top}
            .tg .tg-95p8{background-color:#9B9B9B;border-color:#ffffff;color:#fe0000;font-size:14px;font-weight:bold;text-align:center;
              vertical-align:top}
            .tg .tg-2l5z{background-color:#9b9b9b;border-color:#ffffff;font-size:14px;font-weight:bold;text-align:center;vertical-align:top}
            .tg .tg-ev6e{background-color:#9b9b9b;border-color:#ffffff;font-size:14px;text-align:center;vertical-align:top}
            .tg .tg-kx3t{background-color:#9b9b9b;border-color:#ffffff;font-size:14px;font-weight:bold;text-align:left;vertical-align:top}
            </style>
            <table class="tg">
            <thead>
              <tr>
                <th class="tg-2l5z">Wochentag</th>
                <th class="tg-2l5z">Randmähen</th>
                <th class="tg-2l5z">Einstiegspunkt</th>
                <th class="tg-2l5z">Start</th>
                <th class="tg-2l5z">Ende</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="tg-if0v">Montag</td>
                <td class="tg-ev6e">JA</td>
                <td class="tg-ev6e">Auto</td>
                <td class="tg-ev6e">11:45</td>
                <td class="tg-ev6e">12:00</td>
              </tr>
              <tr>
                <td class="tg-if0v"></td>
                <td class="tg-ev6e"></td>
                <td class="tg-ev6e">4</td>
                <td class="tg-ev6e">16:30</td>
                <td class="tg-ev6e">18:30</td>
              </tr>
              <tr>
                <td class="tg-if0v">Dienstag</td>
                <td class="tg-7so4"></td>
                <td class="tg-qqnn">2</td>
                <td class="tg-qqnn">11:00</td>
                <td class="tg-qqnn">13:00</td>
              </tr>
              <tr>
                <td class="tg-kx3t"></td>
                <td class="tg-qqnn"></td>
                <td class="tg-qqnn">3</td>
                <td class="tg-qqnn">16:30</td>
                <td class="tg-qqnn">18:30</td>
              </tr>
              <tr>
                <td class="tg-kx3t">Mittwoch</td>
                <td class="tg-qqnn">JA</td>
                <td class="tg-qqnn">Auto</td>
                <td class="tg-qqnn">11:45</td>
                <td class="tg-qqnn">12:00</td>
              </tr>
              <tr>
                <td class="tg-kx3t"></td>
                <td class="tg-qqnn"></td>
                <td class="tg-qqnn">5</td>
                <td class="tg-qqnn">16:30</td>
                <td class="tg-qqnn">18:30</td>
              </tr>
              <tr>
                <td class="tg-kx3t">Donnerstag</td>
                <td class="tg-7so4"></td>
                <td class="tg-qqnn">1</td>
                <td class="tg-qqnn">10:45</td>
                <td class="tg-qqnn">12:45</td>
              </tr>
              <tr>
                <td class="tg-kx3t"></td>
                <td class="tg-7so4"></td>
                <td class="tg-qqnn">3</td>
                <td class="tg-qqnn">16:30</td>
                <td class="tg-qqnn">18:30</td>
              </tr>
              <tr>
                <td class="tg-kx3t">Freitag</td>
                <td class="tg-qqnn">Ja</td>
                <td class="tg-qqnn">Auto</td>
                <td class="tg-qqnn">11:45</td>
                <td class="tg-qqnn">12:00</td>
              </tr>
              <tr>
                <td class="tg-kx3t"></td>
                <td class="tg-7so4"></td>
                <td class="tg-qqnn">6</td>
                <td class="tg-qqnn">16:30</td>
                <td class="tg-qqnn">18:30</td>
              </tr>
              <tr>
                <td class="tg-kx3t">Samstag</td>
                <td class="tg-qqnn">Ja</td>
                <td class="tg-qqnn">Auto</td>
                <td class="tg-qqnn">11:45</td>
                <td class="tg-qqnn">12:00</td>
              </tr>
              <tr>
                <td class="tg-kx3t"></td>
                <td class="tg-7so4"></td>
                <td class="tg-qqnn">2</td>
                <td class="tg-qqnn"></td>
                <td class="tg-qqnn"></td>
              </tr>
              <tr>
                <td class="tg-kx3t">Sonntag</td>
                <td class="tg-95p8" colspan="4">Mähpause</td>
              </tr>
              <tr>
                <td class="tg-kx3t">Summe</td>
                <td class="tg-7so4" colspan="2"></td>
                <td class="tg-qqnn" colspan="2">18h 10 Min.</td>
              </tr>
            </tbody>
            </table>
            
            liv-in-sky 2 Replies Last reply Reply Quote 0
            • liv-in-sky
              liv-in-sky @JB_Sullivan last edited by liv-in-sky

              @JB_Sullivan

              ich habe das alles nicht genau geprüft - habe aber hier ein beispiel, wie ich einen datenpunkt fülle und den dann über standard html widget mit binding anzeige

              vielleicht hilft das

              const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                                  "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                                  " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                                 // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                                  " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                                  " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                                  "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                                  " </style></head><body> <div>";
              

              die bezeichnung der css ist unterschiedlich

              hier das ganze script: https://forum.iobroker.net/topic/28021/html-table-für-vis-oder-iqontrol-js-und-blockly

              1 Reply Last reply Reply Quote 0
              • JB_Sullivan
                JB_Sullivan last edited by

                Ich mache gar nichts mit Datenpunkt, ich schreiben den kompletten HTML Quellcode direkt in das Eingabefeld vom html-basic Widget.

                2020-08-02 12_39_33-.png

                liv-in-sky 1 Reply Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @JB_Sullivan last edited by

                  @JB_Sullivan soweit ich mich erinnere, habe ich es auch nicht geschafft, im script eigene css namen zu verwenden

                  evt. mußt du die css definitionen im css tab des editors definieren

                  JB_Sullivan 1 Reply Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @JB_Sullivan last edited by

                    @JB_Sullivan /ist im endeffekt das selbe über das binding)

                    schreibe mal deine css settings ins css tab und den rest ins widget

                    Image 1.png

                    JB_Sullivan 1 Reply Last reply Reply Quote 0
                    • JB_Sullivan
                      JB_Sullivan @liv-in-sky last edited by

                      @liv-in-sky Das habe ich auch schon versucht - also alles was css im Tabellen Quellcode ist, weg gelassen und dafür im Widget definiert. Das funktioniert auch nur bedingt - da werden dann z.B. die Tabellen Linien nicht angezeigt.

                      liv-in-sky 1 Reply Last reply Reply Quote 0
                      • JB_Sullivan
                        JB_Sullivan @liv-in-sky last edited by

                        @liv-in-sky Mit dem CSS im Editor, bin ich mir sehr unsicher. Da stehen schon ~ 2000 Zeilen vom Material Design Widget drin. Ich weiß nicht, ob ich da "einfach" was dazu schreiben kann/darf.

                        Dieses CSS Feld habe ich nie wirklich verstanden.

                        liv-in-sky 1 Reply Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @JB_Sullivan last edited by liv-in-sky

                          @JB_Sullivan

                          vis runtime:

                          Image 2.png

                          JB_Sullivan 1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @JB_Sullivan last edited by liv-in-sky

                            @JB_Sullivan

                            einfach am anfang einfügen - wenn du keine gleichen css bezeichnungen hast - kein thema

                            Image 3.png

                            1 Reply Last reply Reply Quote 0
                            • JB_Sullivan
                              JB_Sullivan @liv-in-sky last edited by

                              @liv-in-sky OK - also bei dir funktioniert es in der Runtime. Dann liegt es scheinbar an den ganzen Eintragungen die vom MaterialDesign Widget dort rein geschrieben wurden.

                                 /* -----
                                 Material Design CSS for ioBroker.vis
                                 (c) 2017 Uhula, MIT License
                                 https://github.com/Uhula/ioBroker-Material-Design-Style
                                 -----
                                 V1.8 04.01.2018
                                 + mdui-(color)-glow für red, yellow, blue und green hinzugefügt 
                                 o der active-State der Buttons in tnav/bnav wird nun mit box-shadow 
                                   statt border gezeichnet
                                 
                                 V1.7 22.12.2017
                                 + mdui-state: Anzeige von Textstati mit Vorder-/Hintergrundfarbe (basic ValueList HTML)
                                 + mdui-cols-X: Grid-System (152px) für responsive design
                                 o mdui-raisedbutton, mdui-flatbutton Texte werden nun horz/vert zentriert
                              
                                 V1.6 16.10.2017
                                 o mdui-dialog z-index korrigiert, damit Dialoge auch im ioBroker fullscreen Mode sichtbar sind
                              
                                 V1.5 11.10.2017
                                 + mdui-table-xxxx hinzu, fertig
                              
                                 V1.3 24.09.2017
                                 + mdui-transparent-acc für mdui-slider hinzu
                                 + mdui-(color)-acc für input mit btn
                                 + mdui-slider ohne focus-Rahmen
                                 + Designtime: bei [Mouse-down] > 3 Sek alle Widgets mit einem Rahmen versehen und die ID anzeigen
                                 + Designtime: bei [Mouse-over] > 0.5 Sek das Widget mit einem Rahmen versehen und die ID anzeigen
                              
                                 V1.2 19.09.2017
                                 + mdui-select hinzu
                                 o mdui-input angepasst
                                 o mdui-flash/blink/pulse mit filter:drop-shadow (not IE Browser!)
                                 o mdui-(color) für input/select ermöglicht
                              
                                 V1.0 01.09.2017
                                 ----- */
                              
                              /* -----
                                 Generell
                                 ----- */
                              
                              /* nur zur Laufzeit anwenden, nicht im Editor */
                              .mdui-runtime .mdui-hide {
                                display:none !important;
                              }
                              
                              .mdui-toggle img {
                                transition: transform 0.3s ease;
                              }
                              
                              .mdui-toggle.ui-state-active img {
                                transform: rotate(180deg);
                              }
                              
                              .mdui-float {
                                position:relative !important;
                                left:auto !important;
                                top:auto !important;
                                float: left !important;
                              }
                              
                              .mdui-float-right {
                               float: right !important;
                              }
                              
                              
                              .vis-view,
                              .vis-view .ui-widget {
                                font-family: Roboto, Arial;
                                font-size: 16px !important;
                                color:#ffffff;
                              }
                              
                              .vis_container_edit>.vis-view {
                                background:#000;
                                color:#ffffff;
                                font-family: Roboto, Arial;
                                font-size: 16px !important;
                              }
                              
                              
                              
                              /* -----
                                 application bar
                                 ----- */
                              
                              .mdui-abar {
                                background:#1A237E !important;
                              
                                z-index:99;
                                border:none !important;
                              }
                              .mdui-abar .vis-view{
                                background:none !important;
                              }
                              
                              /* -----
                                 top navigation
                                 ----- */
                              .mdui-tnav {
                                background:#1A237E !important;
                              
                                border:none !important;
                                z-index:98;
                                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.85);
                                overflow-y:hidden !important;
                                overflow-x:auto !important;
                              }
                              .mdui-tnav .vis-view {
                                background:none !important;
                              }
                              
                              /* -----
                                 content
                                 ----- */
                              .mdui-content {
                                background:#303030 !important;
                                overflow-y:auto !important;
                                overflow-x:auto !important;
                              }
                              
                              /* -----
                                 bottom navigation
                                 ----- */
                              .mdui-bnav {
                                background:#1A237E !important;
                                z-index:98;
                                border:none;
                                box-shadow:0px -2px 4px -1px rgba(0,0,0,0.8);
                              }
                              .mdui-bnav .vis-view {
                                background:none !important;
                              }
                              
                              /* -----
                                 left navigation
                                 -----
                              // Binden des click() Events an den #vis_container mit der Delegation
                              // für die mdui-l/rbar Klassen. Ein direktes Binding funktioniert durch
                              // den view-Aufbau nicht, da dieses Script dann beim zurück-Navigieren
                              // nicht mehr aufgerufen wird.
                              setTimeout(function () {
                                  // click-Event für das left-nav Element zum Öffnen
                                  $("#vis_container").on( "click", ".mdui-lnavbutton", function() {
                                      $( ".mdui-lnav" ).addClass( "mdui-lnav-open" );
                                  } );
                                  // click-Event für die left-nav zum Schließen
                                  $("#vis_container").on( "click", ".mdui-lnav", function() {
                                      $( ".mdui-lnav" ).removeClass( "mdui-lnav-open" );
                                  } );
                              
                                  // click-Event für das right-nav Element zum Öffnen
                                  $("#vis_container").on( "click", ".mdui-rnavbutton", function() {
                                      $( ".mdui-rnav" ).addClass( "mdui-rnav-open" );
                                  } );
                                  // click-Event für die right-nav zum Schließen
                                  $("#vis_container").on( "click", ".mdui-rnav", function() {
                                      $( ".mdui-rnav" ).removeClass( "mdui-rnav-open" );
                                  } );
                              }, 1000);
                              */
                              
                              .mdui-lnav {
                                background: #283593 !important;
                              }
                              
                              .mdui-runtime .mdui-lnav {
                                position: absolute !important;
                                top: 0px !important;
                                left: 0px !important;
                                width: 0px !important;
                                height: 100% !important;
                                background: #283593 !important;
                                border:none !important;
                                z-index:200;
                                overflow-x:hidden;
                                overflow-y:auto;
                                box-shadow: 0 10px 20px rgba(0,0,0,0.39), 0 6px 6px rgba(0,0,0,0.43);
                              }
                              
                              .mdui-runtime  .mdui-lnav.mdui-lnav-open {
                                transition: width 0.5s ease;
                                width: 288px !important;
                              }
                              
                              /* zum Abfangen der click-Events zum Schließen den ganzen Bildschirm
                                 trabnsparent überlagern */
                              .mdui-runtime  .mdui-lnav.mdui-lnav-open:before {
                                position:fixed;
                                content:"";
                                left:0px;
                                top:0px;
                                height:100%;
                                width:100%;
                                background: rgba(0,0,0,0.3) !important;
                              }
                              
                              
                              /* -----
                                 right navigation
                                 -----  */
                              
                              .mdui-rnav {
                                background: #283593 !important;
                              }
                              .mdui-runtime .mdui-rnav {
                                position: absolute !important;
                                top: 0 !important;
                                left: 100% !important;
                                width: 0 !important;
                                height: 100% !important;
                                background: #283593 !important;
                                border:none !important;
                                z-index:200;
                                box-shadow: 0 10px 20px rgba(0,0,0,0.39), 0 6px 6px rgba(0,0,0,0.43);
                                overflow-x:hidden;
                                overflow-y:auto;
                              }
                              
                              .mdui-runtime  .mdui-rnav.mdui-rnav-open {
                                transition: all 0.5s ease;
                                width: 288px !important;
                                left: calc(100% - 288px) !important;
                              }
                              
                              /* zum Abfangen der click-Events zum Schließen den ganzen Bildschirm
                                 trabnsparent überlagern */
                              .mdui-runtime  .mdui-rnav.mdui-rnav-open:before {
                                position:fixed;
                                content:"";
                                left:0px;
                                top:0px;
                                height:100%;
                                width:100%;
                                background: rgba(0,0,0,0.3) !important;
                              }
                              
                              /*
                              13er Raster, 52er Block, 156er Col
                              ----------------------------------
                               1 col   156
                               2 cols  312   320
                               3 cols  468   480
                               4 cols  624   640
                               5 cols  780   800
                               6 cols  936   960
                               7 cols 1092  1120
                               8 cols 1248  1280
                               9 cols 1404  1440
                              10 cols 1560  1600
                              */
                              
                              @media (min-width: 0px) {
                                .mdui-cols-1,
                                .mdui-cols-2,
                                .mdui-cols-3,
                                .mdui-cols-4,
                                .mdui-cols-5,
                                .mdui-cols-6,
                                .mdui-cols-7,
                                .mdui-cols-8,
                                .mdui-cols-9,
                                .mdui-cols-10 { width:calc(100% - 8px) !important; margin:4px !important; }
                              
                                .mdui-cols-1.mdui-card,
                                .mdui-cols-2.mdui-card,
                                .mdui-cols-3.mdui-card,
                                .mdui-cols-4.mdui-card,
                                .mdui-cols-5.mdui-card,
                                .mdui-cols-6.mdui-card,
                                .mdui-cols-7.mdui-card,
                                .mdui-cols-8.mdui-card,
                                .mdui-cols-9.mdui-card,
                                .mdui-cols-10.mdui-card { width:calc(100% - 8px) !important;  }
                              }
                              @media (min-width: 360px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(50% - 8px) !important;  }
                              }
                              @media (min-width: 480px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(33.3% - 8px) !important;  }
                                .mdui-cols-2,
                                .mdui-cols-2.mdui-card { width:calc(66.6% - 8px) !important; }
                              }
                              
                              @media (min-width: 640px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(25% - 8px) !important;  }
                                .mdui-cols-2,
                                .mdui-cols-2.mdui-card { width:calc(50% - 8px) !important; }
                                .mdui-cols-3,
                                .mdui-cols-3.mdui-card { width:calc(75% - 8px) !important; }
                              }
                              @media (min-width: 960px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(16.6% - 8px) !important;  }
                                .mdui-cols-2,
                                .mdui-cols-2.mdui-card { width:calc(33.3% - 8px) !important; }
                                .mdui-cols-3,
                                .mdui-cols-3.mdui-card { width:calc(50% - 8px) !important; }
                                .mdui-cols-4,
                                .mdui-cols-4.mdui-card { width:calc(66.6% - 8px) !important; }
                                .mdui-cols-5,
                                .mdui-cols-5.mdui-card { width:calc(83.3% - 8px) !important; }
                              }
                              @media (min-width: 1280px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(12.5% - 8px) !important;  }
                                .mdui-cols-2,
                                .mdui-cols-2.mdui-card { width:calc(25% - 8px) !important; }
                                .mdui-cols-3,
                                .mdui-cols-3.mdui-card { width:calc(37.5% - 8px) !important; }
                                .mdui-cols-4,
                                .mdui-cols-4.mdui-card { width:calc(50% - 8px) !important; }
                                .mdui-cols-5,
                                .mdui-cols-5.mdui-card { width:calc(62.5% - 8px) !important; }
                                .mdui-cols-6,
                                .mdui-cols-6.mdui-card { width:calc(75% - 8px) !important; }
                                .mdui-cols-7,
                                .mdui-cols-7.mdui-card { width:calc(87.5% - 8px) !important; }
                              }
                              
                              @media (min-width: 1560px) {
                                .mdui-cols-1,
                                .mdui-cols-1.mdui-card { width:calc(10% - 8px) !important;  }
                                .mdui-cols-2,
                                .mdui-cols-2.mdui-card { width:calc(20% - 8px) !important; }
                                .mdui-cols-3,
                                .mdui-cols-3.mdui-card { width:calc(30% - 8px) !important; }
                                .mdui-cols-4,
                                .mdui-cols-4.mdui-card { width:calc(40% - 8px) !important; }
                                .mdui-cols-5,
                                .mdui-cols-5.mdui-card { width:calc(50% - 8px) !important; }
                                .mdui-cols-6,
                                .mdui-cols-6.mdui-card { width:calc(60% - 8px) !important; }
                                .mdui-cols-7,
                                .mdui-cols-7.mdui-card { width:calc(70% - 8px) !important; }
                                .mdui-cols-8,
                                .mdui-cols-8.mdui-card { width:calc(80% - 8px) !important; }
                                .mdui-cols-9,
                                .mdui-cols-9.mdui-card { width:calc(90% - 8px) !important; }
                              }
                              
                              
                              /* -----
                                 Buttons
                                 ----- */
                              .mdui-input .ui-button,
                              .mdui-flatbutton,
                              .mdui-flatbutton .ui-button,
                              .mdui-flatbutton a,
                              .mdui-flatbutton div,
                              .mdui-flatbutton button {
                                background:none !important;
                                border:none !important;
                                color:#FFFFFF !important;
                                font-size:1em !important;
                                font-weight: normal !important;
                                border-radius:2px !important;
                              }
                              
                              .mdui-flatbutton,
                              .mdui-flatbutton * {
                                color:#2196F3 !important;
                              }
                              
                              .mdui-flatbutton.mdui-center .vis-widget-body   {
                                display:flex;
                                justify-content: center;
                                align-items: center;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-flatbutton:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              
                              .mdui-flatbutton .vis-widget-body,
                              .mdui-flatbutton .vis-widget-body * {
                                display:flex;
                                align-items: center;
                              }
                              
                              .mdui-center-vertical .vis-widget-body   {
                                display:flex;
                                align-items: center;
                              }
                              .mdui-center-horizontal .vis-widget-body   {
                                display:flex;
                                justify-content: center;
                              }
                              
                              
                              /* Minimum width: 88dp Height: 36dp
                              Normal color: 500  Pressed color: 700
                              Disabled text: 30% #FFFFFF Disabled button: 12% #FFFFFF
                              */
                              .mdui-raisedbutton {
                                font-size:1em !important;
                                background: #212121 !important;
                                border:none !important;
                                border-radius:2px !important;
                              }
                              
                              .mdui-raisedbutton .vis-widget-body   {
                                display:flex;
                                justify-content: center;
                                align-items: center;
                              }
                              
                              
                              .mdui-raisedbutton {
                                box-shadow: 0 1px 3px rgba(0,0,0,0.27), 0 1px 2px rgba(0,0,0,0.54);
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-raisedbutton:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              
                              .mdui-raisedbutton a,
                              .mdui-raisedbutton div,
                              .mdui-raisedbutton .ui-button {
                                color:#ffffff !important;
                                background: none !important;
                                border:none !important;
                                font-weight: normal !important;
                              }
                              
                              
                              /* floating button */
                              .mdui-floatingbutton {
                                background: #212121 !important;
                                position: fixed !important;
                                z-index:1000;
                                border-radius:50% !important;
                                box-shadow: 0 10px 20px rgba(0,0,0,0.49), 0 6px 6px rgba(0,0,0,0.53);
                                border:none !important;
                              }
                              
                              .mdui-floatingbutton * {
                                background: none !important;
                                border:none !important;
                                color:#ffffff !important;
                              }
                              
                              .mdui-floatingbutton.ui-button {
                                padding:12px !important;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-floatingbutton:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              
                              
                              /* -----
                                 Buttons in AppBar / Tabs / BottomNavigation
                                 ----- */
                              .mdui-tnav .mdui-flatbutton,
                              .mdui-bnav .mdui-flatbutton {
                                padding-left:6px !important;
                                padding-right:6px !important;
                                z-index:100;
                              }
                              
                              .mdui-tnav .mdui-flatbutton .vis-widget-body,
                              .mdui-bnav .mdui-flatbutton .vis-widget-body {
                                display:flex;
                                width:100%;
                                height:100%;
                                justify-content: center;
                                align-items: center;
                              }
                              
                              .mdui-tnav .mdui-flatbutton,
                              .mdui-tnav .mdui-flatbutton *,
                              .mdui-bnav .mdui-flatbutton,
                              .mdui-bnav .mdui-flatbutton * {
                                background:none !important;
                                border:none !important;
                                border-radius:0px !important;
                                color:rgba(255,255,255,1) !important;
                                font-size:1em !important;
                                font-weight:normal !important;
                              }
                              
                              .mdui-tnav .mdui-flatbutton,
                              .mdui-bnav .mdui-flatbutton {
                                opacity:0.689;
                              }
                              
                              .mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-bnav .mdui-flatbutton.ui-state-active *{
                                color: #FFFFFF !important;
                                opacity:1;
                              }
                              
                              .mdui-tnav .mdui-flatbutton {
                                border-bottom:3px solid rgba(0,0,0,0) !important;
                              }
                              
                              .mdui-bnav .mdui-flatbutton {
                                border-top:3px solid rgba(0,0,0,0) !important;
                              }
                              
                              
                              .mdui-tnav .mdui-flatbutton.ui-state-active {
                                box-shadow: inset 0px -3px 0px 0px #FFFFFF;
                              }
                              
                              .mdui-bnav .mdui-flatbutton.ui-state-active {
                                box-shadow: inset 0px 3px 0px 0px #FFFFFF;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-tnav .mdui-flatbutton:hover,
                              .mdui-runtime.mdui-notouch .mdui-bnav .mdui-flatbutton:hover {
                                opacity:1;
                              }
                              
                              
                              
                              
                              
                              /* -----
                                 Cards
                                 ----- */
                              .mdui-card {
                                background: #424242;
                                box-shadow: 0 0 0 1px rgba(255,255,255,0.025) inset, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
                                border-radius:2px;
                                z-index:0;
                                margin:4px;
                              }
                              
                              .mdui-card.mdui-title:after {
                                content:"";
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:50px;
                                background: rgba(0,0,0,0.2);
                              }
                              
                              
                              /* -----
                                 Tiles
                                 ----- */
                              .mdui-tile {
                                background: #424242;
                                border-radius:0px;
                                z-index:0;
                              }
                              
                              .mdui-tile:not([class*='mdui-cols']) {
                                box-shadow:-1px -1px 0px 0px rgba(0,0,0,0.75) inset;
                              }
                              
                              .mdui-tile.mdui-title:after {
                                content:"";
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:50px;
                                background: rgba(0,0,0,0.2);
                              }
                              
                              /* -----
                                 tables
                                 -----
                                 HMTL-Tabellen (tables), die mit mdui-table versehen werden, können in zwei
                                 Arten angezeigt werden: (a) als normale Table und (b) als responsive Table,
                                 wobei aus Zeile dann Cards/Tiles werden und aus Spalten dann Zeilen.
                              
                                 mdui-table-bordered
                                 mdui-table-striped
                              
                                 mdui-table-response-(width)-(type)[-w(colwidth)][-c(colcount)][-l]
                                 (width) = 0000 .. 9999
                                 (type)  = card | tile | list
                                 (colwidth) = 0000 .. 9999
                                 (colcount) = 0 .. 99
                              
                              
                              
                              
                              */
                              .mdui-table,
                              .mdui-table table {
                                border-collapse: collapse;
                              }
                              
                              .mdui-table tr th {
                                color:#ffffff;
                                opacity:0.54 !important;
                                font-weight:normal;
                                font-size:0.8em;
                                padding:6px;
                                border-bottom: 1px solid rgba(255,255,255,0.1);
                              }
                              .mdui-table.mdui-table-bordered tr th {
                                border-bottom-width: 2px;
                              }
                              .mdui-table.mdui-table-striped tr:nth-child(even) {
                                box-shadow:0 0px 0px 1000px rgba(255,255,255,0.05) inset;
                              }
                              
                              .mdui-table tr td {
                                padding:6px;
                                color:#ffffff;
                              }
                              .mdui-table.mdui-table-bordered tr td {
                                border-bottom: 1px solid rgba(255,255,255,0.1);
                              }
                              
                              /* responsive: cards or tiles  */
                              
                              .mdui-table.mdui-table-card,
                              .mdui-table.mdui-table-tile,
                              .mdui-table.mdui-table-list {
                                display: block;
                              }
                              .mdui-table.mdui-table-card thead,
                              .mdui-table.mdui-table-tile thead,
                              .mdui-table.mdui-table-list thead {
                                display: none;
                              }
                              
                              .mdui-table.mdui-table-card tbody,
                              .mdui-table.mdui-table-tile tbody,
                              .mdui-table.mdui-table-list tbody{
                                display: block;
                                width:100%;
                              }
                              
                              .mdui-table.mdui-table-card tbody tr,
                              .mdui-table.mdui-table-tile tbody tr,
                              .mdui-table.mdui-table-list tbody tr{
                                display: block;
                                border:none;
                                padding: 6px;
                                overflow: hidden;
                              }
                              .mdui-table.mdui-table-card tbody tr td,
                              .mdui-table.mdui-table-tile tbody tr td,
                              .mdui-table.mdui-table-list tbody tr td {
                                display: block;
                                padding:0;
                                padding-bottom:4px;
                                border-bottom-width: 0px;
                              }
                              .mdui-table.mdui-table-card tbody tr td:before,
                              .mdui-table.mdui-table-tile tbody tr td:before,
                              .mdui-table.mdui-table-list tbody tr td:before {
                                color:#ffffff;
                                display:block;
                                font-size:9pt;
                                content: attr(label) attr(labelth);
                                opacity:0.7;
                              }
                              
                              /* table-card */
                              .mdui-table.mdui-table-card tbody tr {
                                margin:4px;
                                float:left;
                                box-shadow:
                                  0 0px 0px 1000px rgba(255,255,255,0.1) inset,
                                  0 0 0 1px rgba(255,255,255,0.025) inset,
                                  0 3px 6px rgba(0,0,0,0.36),
                                  0 3px 6px rgba(0,0,0,0.43);
                                border-radius:2px;
                              }
                              .mdui-table.mdui-table-card.mdui-table-striped tr:nth-child(even) {
                                box-shadow:
                                  0 0px 0px 1000px rgba(255,255,255,0.2) inset,
                                  0 0 0 1px rgba(255,255,255,0.025) inset,
                                  0 3px 6px rgba(0,0,0,0.36),
                                  0 3px 6px rgba(0,0,0,0.43);
                              }
                              
                              /* table-tile */
                              .mdui-table.mdui-table-tile tbody tr {
                                margin-top: 2px;
                                margin-left: 2px;
                                float:left;
                                box-shadow:
                                  0 0px 0px 1000px rgba(255,255,255,0.1) inset,
                                  0 0px 0px 1px rgba(255,255,255,0.025) inset;
                              }
                              .mdui-table.mdui-table-tile.mdui-table-striped tr:nth-child(even) {
                                box-shadow:
                                  0 0px 0px 1000px rgba(255,255,255,0.2) inset,
                                  0 0px 0px 1px rgba(255,255,255,0.025) inset;
                              }
                              
                              /* table-list */
                              .mdui-table.mdui-table-list tbody tr {
                                padding:8px 8px 4px 8px;
                              }
                              .mdui-table.mdui-table-list:not(.mdui-table-striped) tbody tr {
                                box-shadow:
                                  0 1px 0px 0px rgba(255,255,255,0.5);
                              }
                              .mdui-table.mdui-table-list.mdui-table-striped tr:nth-child(even) {
                                box-shadow:
                                  0 0px 0px 1000px rgba(255,255,255,0.1) inset;
                              }
                              .mdui-table.mdui-table-list tbody tr td:first-child {
                                font-weight:bold;
                              }
                              .mdui-table.mdui-table-list tbody tr td:first-child:before {
                                display:none;
                              }
                              .mdui-table.mdui-table-list tbody tr td:not(:first-child) {
                                padding-left:16px;
                              }
                              
                              
                              /* ------
                                 Labels
                                 ------ */
                              .mdui-title {
                                z-index:2;
                                color: rgba(255,255,255,1) !important;
                                font-size: 1.1em !important;
                                text-shadow:none !important;
                                letter-spacing: 0px !important;
                                width:auto;
                                height:auto;
                                opacity:0.9;
                              }
                              
                              .mdui-subtitle {
                                z-index:2;
                                color: rgba(255,255,255,1);
                                font-size: 0.8em;
                                text-shadow:none !important;
                                letter-spacing: 0px !important;
                                width:auto;
                                height:auto;
                                opacity:0.5;
                              }
                              
                              .mdui-label {
                                z-index:2;
                                color:rgba(255,255,255,1) !important;
                                font-weight:normal !important;
                                font-size:0.9em !important;
                                text-shadow:none !important;
                                letter-spacing: 0px !important;
                                width:auto;
                                height:auto;
                                opacity:0.7;
                              }
                              
                              .mdui-value {
                                z-index:2;
                                color:rgba(255,255,255,1) !important;
                                font-weight:bold !important;
                                font-size:1em !important;
                                text-shadow:none !important;
                                letter-spacing: 0px !important;
                                width:auto;
                                height:auto;
                                opacity:1;
                              }
                              
                              /* ------
                                 States
                                 ------ */
                              .mdui-state {
                                z-index:2;
                                color:rgba(255,255,255,1) !important;
                                font-weight:bold !important;
                                font-size:1em !important;
                                text-shadow:none !important;
                                letter-spacing: 0px !important;
                                width:auto;
                                height:auto;
                                border-radius:2em;
                                overflow:visible;
                              }
                              
                              .mdui-state .vis-widget-body div {
                                width:100%;
                                height:100%;
                              }
                              
                              .mdui-state .vis-widget-body div * {
                                /*background:rgba(0,0,0,0.01);*/
                                border-radius:2em;
                                display:flex;
                                align-items: center;
                                width:100%;
                                height:100%;
                                /*box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);*/
                              }
                              
                              /* horizontal zentrieren */
                              .mdui-state .vis-widget-body div *[class*='-bg'] {
                                justify-content: center;
                              }
                              
                              
                              /* -----
                                 input
                                 -----
                                 <div class="vis-widget" id="w00004">
                                      <div class="vis-widget-body">
                                          <label for="w00004_input">Label</label>
                                          <input type="text" name="w00004_input" id="w00004_input" >
                                          Stk
                                          <input type="button" >
                                      </div>
                                  </div>
                              */
                              
                              .mdui-input  {
                                color:rgba(255,255,255,0.7) !important;
                                z-index:2;
                                font-weight:normal !important;
                                text-align: left !important;
                                letter-spacing: 0px !important;
                              }
                              
                              .mdui-input label {
                                font-size:0.9em;
                              }
                              
                              
                              .mdui-input input[type="text"] {
                                border-bottom : 2px solid rgba(255,255,255,0.54) !important;
                                color : rgba(255,255,255,1) !important;
                                background: rgba(0,0,0,0) !important;
                                height:calc(100% - 2px) !important;
                                border-radius:0px !important;
                                margin:0px !important;
                                padding:0px !important;
                                _line-height:2em !important;
                                _min-height:0px !important;
                              }
                              
                              .mdui-input input[type="button"] {
                                top:-2px;
                                color: #2196F3 !important;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-input input[type="text"]:hover,
                              .mdui-input input[type="text"]:focus {
                                border-bottom-color : #2196F3 !important;
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              /* -----
                                 select
                                 -----
                              */
                              
                              .mdui-select  {
                                z-index:2;
                                font-weight:normal !important;
                                text-shadow:none !important;
                                text-align: left !important;
                                letter-spacing: 0px !important;
                              }
                              
                              .mdui-select select  {
                                color : rgba(255,255,255,1);
                                height:100% !important;
                                font-size:1em !important;
                                background: rgba(0,0,0,0);
                                border: none;
                                outline: none;
                                border-bottom : 2px solid rgba(255,255,255,0.54);
                                width:100%;
                              }
                              
                              .vis_container_edit .mdui-select select {
                                pointer-events: none;
                              }
                              
                              .mdui-select select option {
                                background: #212121 !important;
                                font-weight:normal !important;
                                font-size:1.5em !important;
                              }
                              
                              .mdui-select:before {
                                position: absolute;
                                top: calc(50% - 0.22em);
                                right: 0.22em;
                                width: 0px;
                                height: 0px;
                                padding: 0px;
                                content: "";
                                border-left: .4em solid transparent;
                                border-right: .4em solid transparent;
                                border-top: .4em solid #FFFFFF;
                                pointer-events: none;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-select select:hover,
                              .mdui-select select:focus {
                                border-bottom-color : #2196F3;
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              
                              
                              
                              /* -----
                                 Slider
                                 -----
                              Der folgende CSS Code wandelt das jqui Control "Slider"
                              so um, dass es sich im Stil eines Slider Controls im Material Design
                              zeigt und so bedienbar ist.
                              
                              <div class="vis-widget-body mdui-slider" style="padding: 4px;">
                                <div class="sliderJQUI ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="w00003_slider" data-oid="javascript.0.Variable.TestINTEGER" data-oid2="" data-oid-working="" data-oid2-working="">
                                  <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 47%;"></span>
                                </div>
                              </div>
                              */
                              
                              
                              .mdui-slider {
                                overflow:hidden;
                                padding:0px !important;
                              }
                              
                              .mdui-slider .ui-slider {
                                border:none  !important;
                                z-index:2;
                                padding:0px !important;
                                margin:0px !important;
                                background:none !important;
                              }
                              
                              .mdui-slider .ui-slider-horizontal {
                                top:calc(50% - 8px);
                                height:16px !important;
                                width:calc(100% - 16px) !important;
                                left:0px !important;
                              }
                              
                              .mdui-slider .ui-slider-horizontal:before {
                                content: "";
                                position: absolute;
                                top: calc(50% - 2px);
                                left: 0px;
                                width: calc(100% + 20px);
                                height: 4px;
                                background:#ffffff !important;
                                border-radius: 2px;
                                pointer-events: none;
                              }
                              
                              .mdui-slider .ui-slider-vertical {
                                left:calc(50% - 8px) !important;
                                width:16px !important;
                                height:calc(100% - 16px) !important;
                                top:16px !important;
                              }
                              .mdui-slider .ui-slider-vertical:before {
                                content: "";
                                position: absolute;
                                left: calc(50% - 2px);
                                top: -16px;
                                width: 4px;
                                height: calc(100% + 16px);
                                background:#ffffff !important;
                                border-radius: 2px;
                                pointer-events: none;
                              }
                              
                              
                              .mdui-slider .ui-slider-handle {
                                padding:0px !important;
                                margin:0px !important;
                                width:16px !important;
                                height:16px !important;
                                background: #ffffff !important;
                                border:none  !important;
                                border-radius: 50% !important;
                                box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.27),
                                  0 2px 2px 0 rgba(0, 0, 0, 0.27),
                                  0 1px 5px 0 rgba(0, 0, 0, 0.54);
                              }
                              
                              .mdui-slider .ui-slider-handle:focus {
                                outline: none;
                              }
                              .mdui-notouch .mdui-slider .ui-slider-handle:focus {
                                box-shadow: 0 0 4px 2px rgba(33,150,243,0.39), 0 10px 20px rgba(33,150,243,0.39), 0 6px 6px rgba(33,150,243,0.43);
                              }
                              
                              .mdui-slider .ui-slider-horizontal .ui-slider-handle:before {
                                content: "";
                                position: absolute;
                                top: calc(50% - 2px);
                                left: 100%;
                                width: 1000px;
                                height: 4px;
                                background:rgba(0,0,0,.5) !important;
                                border-radius: 2px;
                                pointer-events: none;
                              }
                              .mdui-slider .ui-slider-vertical .ui-slider-handle:before {
                                content: "";
                                position: absolute;
                                left: calc(50% - 2px);
                                top: -1000px;
                                width: 4px;
                                height: 1000px;
                                background:rgba(0,0,0,.7) !important;
                                border-radius: 2px;
                                pointer-events: none;
                              }
                              
                              .mdui-slider .ui-slider-horizontal .ui-slider-handle {
                                top:calc(50% - 8px) !important;
                              }
                              
                              .mdui-slider .ui-slider-vertical .ui-slider-handle {
                                left:calc(50% - 8px) !important;
                              }
                              
                              .mdui-runtime.mdui-notouch .mdui-slider:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                border-radius:2px;
                                transition: all 0.3s ease;
                              }
                              
                              
                              
                              /* -----
                                 Radio Buttons
                                 ----- */
                              .mdui-radio  {
                                z-index:2;
                              }
                              
                              .mdui-radio.mdui-vertical td {
                              display: block;
                              }
                              
                              .mdui-radio *[id*="_radio"] {
                                background:none !important;
                                border:none !important;
                                color:rgba(0,0,0,1) !important;
                              }
                              .mdui-radio *[id*="_radio"] * {
                                padding-top:2px !important;
                                padding-bottom:2px !important;
                                padding-left:4px !important;
                                padding-right:4px !important;
                                font-size:1em;
                                font-weight:bold;
                              }
                              .mdui-radio *[id*="_radio"] label {
                                background:none !important;
                                border:none !important;
                                color:rgba(255,255,255,0.87) !important;
                                border-radius:0px;
                                border-bottom:2px solid rgba(0,0,0,0) !important;
                              }
                              .mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#2196F3 !important;
                                color:#2196F3 !important;
                              }
                              .mdui-runtime.mdui-notouch .mdui-radio *[id*="_radio"] label:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                border-radius:2px;
                                transition: all 0.3s ease;
                              }
                              
                              /* Radiobuttons vertikal darstellen */
                              .mdui-radio.mdui-vertical td {
                                 display: block;
                              }
                              
                              
                              /* -----
                                 Switch
                                 -----
                              */
                              .mdui-switch {
                                z-index:2;
                                xheight:36px;
                                xwidth:48px;
                                xpadding:6px;
                              }
                              
                              
                              .mdui-switch input[type="checkbox"] {
                                display: none;
                              }
                              
                              .mdui-switch input[type="checkbox"]~label {
                                position: relative;
                                display: inline-block;
                                cursor: pointer;
                                z-index:2;
                                height:100%;
                                width:100%;
                              }
                              .mdui-switch input[type="checkbox"]~label:before,
                              .mdui-switch input[type="checkbox"]~label:after {
                                content: "";
                                position: absolute;
                                outline: 0;
                                top: 50%;
                                -ms-transform: translate(0, -50%);
                                -webkit-transform: translate(0, -50%);
                                transform: translate(0, -50%);
                                -webkit-transition: all 0.3s ease;
                                transition: all 0.3s ease;
                              }
                              .mdui-switch input[type="checkbox"]~label:before {
                                left: 0px;
                                width: 48px;
                                height: 16px;
                                background-color: #808080;
                                border-radius: 100px;
                              }
                              
                              .mdui-switch input[type="checkbox"]~label:after {
                                left: 0px;
                                width: 24px;
                                height: 24px;
                                background-color: #c0c0c0;
                                border-radius: 50%;
                                box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.27),
                                  0 2px 2px 0 rgba(0, 0, 0, 0.27),
                                  0 1px 5px 0 rgba(0, 0, 0, 0.54);
                              }
                              .mdui-runtime.mdui-notouch .mdui-switch:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                border-radius:2px;
                                transition: all 0.3s ease;
                              }
                              
                              .mdui-switch input[type="checkbox"]:checked~label:before {
                                background-color: #1E88E5;
                              }
                              
                              
                              .mdui-switch input[type="checkbox"]:checked~label:after {
                                background-color: #2196F3 ;
                                -ms-transform: translate(100%, -50%);
                                -webkit-transform: translate(100%, -50%);
                                transform: translate(100%, -50%);
                              }
                              
                              
                              
                              
                              /* -----
                                 Dialog
                                 ----- */
                              .mdui-runtime .ui-dialog {
                                box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 14px 28px rgba(0,0,0,0.65), 0 10px 10px rgba(0,0,0,0.62);
                                border:none;
                                background:#303030;
                                border-radius:2px;
                                position:absolute;
                                z-index: 2147483647 !important;
                              }
                              
                              .mdui-runtime  .ui-dialog .vis-view {
                                border:none !important;
                                background:none !important;
                                color: #ffffff !important;
                              }
                              
                              
                              .mdui-runtime  .ui-dialog .ui-widget-content {
                                padding:0px;
                                margin:0px;
                              }
                              
                              .mdui-runtime  .ui-dialog .ui-widget-header {
                                border:none;
                                background:none;
                              }
                              
                              .mdui-runtime  .ui-dialog .ui-widget-header .ui-button {
                                border:none !important;
                                background:none !important;
                                color: #ffffff !important;
                              }
                              
                              
                              /* -----
                                 DatePicker
                                 ----- */
                              .ui-datepicker {
                                background: #303030 !important;
                                color: rgba(255,255,255,0.87) !important;
                                box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 14px 28px rgba(0,0,0,0.65), 0 10px 10px rgba(0,0,0,0.62);
                                border:none;
                                border-radius:2px;
                              }
                              
                              .ui-datepicker-header,
                              .ui-datepicker td,
                              .ui-datepicker td a {
                                background: #303030 !important;
                                color: rgba(255,255,255,0.87) !important;
                                border:none !important;
                              }
                              
                              .mdui-runtime.mdui-notouch .ui-datepicker td a:hover {
                                box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset;
                                transition: all 0.3s ease;
                              }
                              
                              .ui-datepicker td a.ui-state-active {
                                  color: rgba(0,255,0,1) !important;
                              }
                              .ui-datepicker td a.ui-state-highlight {
                                  color: rgba(255,0,0,1) !important;
                              }
                              
                              .ui-datepicker th {
                                color: rgba(255,255,255,0.54) !important;
                              }
                              
                              .ui-datepicker button {
                                background: #303030 !important;
                                border:none !important;
                                color: rgba(255,255,0,1) !important;
                              }
                              
                              
                              
                              /* -----
                                 Mediaqueries
                                 -----
                              */
                              
                              .mdui-show480 {
                                display:none !important;
                              }
                              @media screen and (max-width: 480px) {
                                .mdui-hide480 {
                                  display:none !important;
                                }
                                .mdui-show480 {
                                  display:initial !important;
                                }
                              }
                              
                              /* -----
                                 script
                                 -----
                                 Zur Laufzeit verstecken, im Design-Mode anzeigen
                              */
                              
                              .mdui-script {
                                display:none;
                              }
                              
                              .vis_container_edit .mdui-script {
                                display:initial;
                                background: rgba(255,0,0,0.5) !important;
                                color: #ffffff;
                              }
                              
                              /* -----
                                 glow
                                 ----- */
                              .mdui-red-glow {
                                filter: drop-shadow(0px 0px 2px #F44336) drop-shadow(0px 0px 2px #F44336) drop-shadow(0px 0px 4px #F44336);
                              }
                              .mdui-yellow-glow {
                                filter: drop-shadow(0px 0px 2px #FFDB3B) drop-shadow(0px 0px 2px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); 
                              }
                              .mdui-blue-glow {
                                filter: drop-shadow(0px 0px 2px #2B95F3) drop-shadow(0px 0px 2px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) 
                              }
                              .mdui-green-glow {
                                filter: drop-shadow(0px 0px 2px #4CAF50) drop-shadow(0px 0px 2px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) 
                              }
                              
                              /* -----
                                 flash
                                 ----- */
                              .mdui-red-flash {
                                animation: mdui-red-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-red-flash-ani  {
                                0%,
                                10% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336);
                                 }
                                11% { filter:none; }
                              }
                              .mdui-yellow-flash {
                                animation: mdui-yellow-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-yellow-flash-ani  {
                                0%,
                                10% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
                                11% { filter: none; }
                              }
                              .mdui-blue-flash {
                                animation: mdui-blue-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-blue-flash-ani  {
                                0%,
                                10% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) }
                                11% { filter: none; }
                              }
                              .mdui-green-flash {
                                animation: mdui-green-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-green-flash-ani  {
                                0%,
                                10% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) }
                                11% { filter: none; }
                              }
                              
                              /* -----
                                 blink
                                 ----- */
                              
                              .mdui-red-blink   {
                                animation: mdui-red-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-red-blink-ani  {
                                0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                                51% {filter: none;}
                              
                              }
                              .mdui-yellow-blink {
                                animation: mdui-yellow-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-yellow-blink-ani  {
                                0%,50% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
                                51% {filter: none;}
                              
                              }
                              .mdui-blue-blink {
                                animation: mdui-blue-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-blue-blink-ani  {
                                0%,50% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3); }
                                51% {filter: none;}
                              }
                              .mdui-green-blink {
                                animation: mdui-green-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-green-blink-ani  {
                                0%,50% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50); }
                                51% {filter: none;}
                              }
                              
                              /* -----
                                 pulse
                                 ----- */
                              .mdui-red-pulse {
                                animation: mdui-red-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-red-pulse-ani  {
                                50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                                0%,100% {filter: drop-shadow(0px 0px 4px #F44336) ; }
                              
                              }
                              .mdui-yellow-pulse {
                                animation: mdui-yellow-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-yellow-pulse-ani  {
                                50% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
                                0%,100% {filter: drop-shadow(0px 0px 4px #FFDB3B) }
                              
                              }
                              .mdui-blue-pulse {
                                animation: mdui-blue-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-blue-pulse-ani  {
                                50% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3); }
                                0%,100% {filter: drop-shadow(0px 0px 4px #2B95F3); }
                              
                              }
                              .mdui-green-pulse {
                                animation: mdui-green-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-green-pulse-ani  {
                                50% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50); }
                                0%,100% {filter: drop-shadow(0px 0px 4px #4CAF50) ; }
                              }
                              
                              
                              /* -----
                                 bargraph
                                 ----- */
                              
                              .mdui-h-flip  { transform: scaleX(-1); }
                              .mdui-v-flip  { transform: scaleY(-1); }
                              .mdui-h-flip.mdui-v-flip  { transform: scale(-1); }
                              
                              
                              /* Hintergrund und Border */
                              .mdui-h-bargraph,
                              .mdui-v-bargraph {
                                background-position: -1000px !important;
                                background-repeat: no-repeat !important;
                                box-shadow:0 0 0 1000px rgba(255,255,255,0.1) inset;
                                border:none !important;
                              }
                              
                              .mdui-h-bargraph>*,
                              .mdui-v-bargraph>* {
                                background-image:inherit !important;
                              }
                              
                              .mdui-h-bargraph:after,
                              .mdui-v-bargraph:after {
                                content:"";
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:100%;
                                background-image:inherit !important;
                                opacity:0.1;
                              }
                              
                              .mdui-h-bargraph.mdui-segment-10 {
                                  clip-path: polygon(
                                     0% 100%,  0% 0%,  9% 0%,  9% 100%,
                                    10% 100%, 10% 0%, 19% 0%, 19% 100%,
                                    20% 100%, 20% 0%, 29% 0%, 29% 100%,
                                    30% 100%, 30% 0%, 39% 0%, 39% 100%,
                                    40% 100%, 40% 0%, 49% 0%, 49% 100%,
                                    50% 100%, 50% 0%, 59% 0%, 59% 100%,
                                    60% 100%, 60% 0%, 69% 0%, 69% 100%,
                                    70% 100%, 70% 0%, 79% 0%, 79% 100%,
                                    80% 100%, 80% 0%, 89% 0%, 89% 100%,
                                    90% 100%, 90% 0%, 100% 0%, 100% 100%
                                  ) ;
                              }
                              
                              .mdui-h-bargraph.mdui-triangle  {
                                  clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 60%);
                              }
                              .mdui-h-bargraph.mdui-ramp  {
                                  clip-path: polygon(0% 80%, 100% 0%, 100% 100%, 0% 100%);
                              }
                              
                              .mdui-h-bargraph.mdui-segment-10.mdui-ramp {
                                  clip-path: polygon(
                                     9% 100%,  9% 71%,  0% 80%,  0% 100%,
                                    19% 100%, 19% 63%, 10% 72%, 10% 100%,
                                    29% 100%, 29% 55%, 20% 64%, 20% 100%,
                                    39% 100%, 39% 47%, 30% 56%, 30% 100%,
                                    49% 100%, 49% 39%, 40% 48%, 40% 100%,
                                    59% 100%, 59% 31%, 50% 40%, 50% 100%,
                                    69% 100%, 69% 23%, 60% 32%, 60% 100%,
                                    79% 100%, 79% 15%, 70% 24%, 70% 100%,
                                    89% 100%, 89%  7%, 80% 16%, 80% 100%,
                                   100% 100%,100%  0%, 90%  8%, 90% 100%
                                  );
                              }
                              .mdui-h-bargraph.mdui-segment-10.mdui-triangle {
                                  clip-path: polygon(
                                     9% 37%,  9% 63%,  0% 60%,  0% 40%,
                                    19% 33%, 19% 67%, 10% 64%, 10% 36%,
                                    29% 29%, 29% 71%, 20% 68%, 20% 32%,
                                    39% 25%, 39% 75%, 30% 72%, 30% 28%,
                                    49% 21%, 49% 79%, 40% 76%, 40% 24%,
                                    59% 17%, 59% 83%, 50% 80%, 50% 20%,
                                    69% 13%, 69% 87%, 60% 84%, 60% 16%,
                                    79%  9%, 79% 91%, 70% 88%, 70% 12%,
                                    89%  5%, 89% 95%, 80% 92%, 80% 8%,
                                    100% 0%, 100% 100%, 90% 96%, 90% 4%
                                  );
                              }
                              
                              .mdui-v-bargraph.mdui-segment-10 {
                                  clip-path: polygon(
                                   100%  0%, 0%  0%, 0%  9%,100%  9% ,
                                   100% 10%, 0% 10%, 0% 19%,100% 19% ,
                                   100% 20%, 0% 20%, 0% 29%,100% 29% ,
                                   100% 30%, 0% 30%, 0% 39%,100% 39% ,
                                   100% 40%, 0% 40%, 0% 49%,100% 49% ,
                                   100% 50%, 0% 50%, 0% 59%,100% 59% ,
                                   100% 60%, 0% 60%, 0% 69%,100% 69% ,
                                   100% 70%, 0% 70%, 0% 79%,100% 79% ,
                                   100% 80%, 0% 80%, 0% 89%,100% 89% ,
                                   100% 90%, 0% 90%, 0% 100%,100% 100%
                                  ) ;
                              }
                              
                              .mdui-v-bargraph.mdui-triangle  {
                                  clip-path: polygon(60% 0%, 100% 100%, 0% 100%, 40% 0%);
                              }
                              .mdui-v-bargraph.mdui-ramp  {
                                  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 80% 0%);
                              }
                              
                              .mdui-v-bargraph.mdui-segment-10.mdui-ramp {
                                  clip-path: polygon(
                                  100%   9%, 71%  9%, 80%  0%, 100%  0%,
                                  100%  19%, 63% 19%, 72% 10%, 100% 10%,
                                  100%  29%, 55% 29%, 64% 20%, 100% 20%,
                                  100%  39%, 47% 39%, 56% 30%, 100% 30%,
                                  100%  49%, 39% 49%, 48% 40%, 100% 40%,
                                  100%  59%, 31% 59%, 40% 50%, 100% 50%,
                                  100%  69%, 23% 69%, 32% 60%, 100% 60%,
                                  100%  79%, 15% 79%, 24% 70%, 100% 70%,
                                  100%  89%,  7% 89%, 16% 80%, 100% 80%,
                                  100% 100%, 0% 100%,  8% 90%, 100% 90%
                                  );
                              }
                              .mdui-v-bargraph.mdui-segment-10.mdui-triangle {
                                  clip-path: polygon(
                                   37%   9%, 63%  9%, 60%  0%, 40%  0%,
                                   33%  19%, 67% 19%, 64% 10%, 36% 10%,
                                   29%  29%, 71% 29%, 68% 20%, 32% 20%,
                                   25%  39%, 75% 39%, 72% 30%, 28% 30%,
                                   21%  49%, 79% 49%, 76% 40%, 24% 40%,
                                   17%  59%, 83% 59%, 80% 50%, 20% 50%,
                                   13%  69%, 87% 69%, 84% 60%, 16% 60%,
                                    9%  79%, 91% 79%, 88% 70%, 12% 70%,
                                    5%  89%, 95% 89%, 92% 80%,  8% 80%,
                                    0% 100%,100% 100%,96% 90%,  4% 90%
                                  );
                              }
                              
                              
                              
                              /* -----
                                 Farben
                                 ----- */
                              
                              
                              /* 500 */
                              .mdui-teal-bg { background-color: #009688 !important; }
                              .mdui-amber-bg { background-color: #FFCA28 !important; }
                              .mdui-indigo-bg  { background-color: #3F51B5 !important; }
                              .mdui-blue-bg  { background-color: #2196F3 !important; }
                              .mdui-lime-bg { background-color: #CDDC39 !important; }
                              .mdui-red-bg { background-color: #F44336 !important; }
                              .mdui-green-bg { background-color: #4CAF50 !important; }
                              .mdui-yellow-bg { background-color: #FFEB3B !important; }
                              .mdui-brown-bg { background-color: #795548 !important; }
                              .mdui-grey-bg { background-color: #9E9E9E !important; }
                              .mdui-bluegrey-bg { background-color: #607D8B !important; }
                              .mdui-white-bg { background-color: #FFFFFF !important; }
                              .mdui-black-bg { background-color: #000000 !important; }
                              
                              
                              .mdui-teal-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-teal-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-teal-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-teal-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #009688 !important;
                                color: #009688 !important;
                              }
                              .mdui-amber-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-amber-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-amber-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-amber-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                color: #FFCA28 !important;
                                border-color: #FFCA28 !important;
                              }
                              .mdui-indigo-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-indigo-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-indigo-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-indigo-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #3F51B5 !important;
                                color: #3F51B5 !important;
                              }
                              .mdui-blue-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-blue-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-blue-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-blue-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #2196F3 !important;
                                color: #2196F3 !important;
                              }
                              .mdui-lime-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-lime-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-lime-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-lime-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #CDDC39 !important;
                                color: #CDDC39 !important;
                              }
                              .mdui-red-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-red-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-red-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-red-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #F44336 !important;
                                color: #F44336 !important;
                              }
                              .mdui-green-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-green-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-green-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-green-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #4CAF50 !important;
                                color: #4CAF50 !important;
                              }
                              .mdui-yellow-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-yellow-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-yellow-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-yellow-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #FFEB3B !important;
                                color: #FFEB3B !important;
                              }
                              .mdui-brown-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-brown-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-brown-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-brown-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #795548 !important;
                                color: #795548 !important;
                              }
                              .mdui-grey-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-grey-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-grey-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-grey-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #9E9E9E !important;
                                color: #9E9E9E !important;
                              }
                              .mdui-bluegrey-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-bluegrey-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-bluegrey-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-bluegrey-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #607D8B !important;
                                color: #607D8B !important;
                              }
                              .mdui-white-acc.mdui-tnav .mdui-flatbutton.ui-state-active,
                              .mdui-white-acc-acc.mdui-tnav .mdui-flatbutton.ui-state-active *,
                              .mdui-white-acc-acc-acc.mdui-bnav .mdui-flatbutton.ui-state-active,
                              .mdui-white-acc-acc-acc-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{
                                border-color: #FFFFFF !important;
                                color: #FFFFFF !important;
                              }
                              
                              /* 500 color */
                              .mdui-teal,
                              .mdui-teal select, .mdui-teal input,
                              .mdui-teal-acc.mdui-input input[type="button"],
                              .mdui-teal-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-teal.mdui-radio *[id*="_radio"] label,
                              .mdui-teal.mdui-label, .mdui-teal.mdui-value,
                              .mdui-teal.mdui-title, .mdui-teal.mdui-subtitle,
                              .mdui-teal.mdui-flatbutton div,
                              .mdui-teal.mdui-flatbutton a,
                              .mdui-teal.mdui-flatbutton .ui-button,
                              .mdui-teal.mdui-flatbutton .ui-button-text,
                              .mdui-teal.mdui-flatbutton.ui-button,
                              .mdui-teal.mdui-floatingbutton.ui-button {
                                color: #009688 !important;
                              }
                              .mdui-amber,
                              .mdui-amber select, .mdui-amber input,
                              .mdui-amber-acc.mdui-input input[type="button"],
                              .mdui-amber-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-amber.mdui-radio *[id*="_radio"] label,
                              .mdui-amber.mdui-label, .mdui-amber.mdui-value,
                              .mdui-amber.mdui-title, .mdui-amber.mdui-subtitle,
                              .mdui-amber.mdui-flatbutton div,
                              .mdui-amber.mdui-flatbutton a,
                              .mdui-amber.mdui-flatbutton .ui-button,
                              .mdui-amber.mdui-flatbutton .ui-button-text,
                              .mdui-amber.mdui-flatbutton.ui-button,
                              .mdui-floatingbutton.mdui-amber.ui-button  {
                                color: #FFCA28 !important;
                              }
                              .mdui-indigo,
                              .mdui-indigo select, .mdui-indigo input,
                              .mdui-indigo-acc.mdui-input input[type="button"],
                              .mdui-indigo-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-indigo.mdui-radio *[id*="_radio"] label,
                              .mdui-indigo.mdui-label, .mdui-indigo.mdui-value,
                              .mdui-indigo.mdui-title, .mdui-indigo.mdui-subtitle,
                              .mdui-indigo.mdui-flatbutton div,
                              .mdui-indigo.mdui-flatbutton a,
                              .mdui-indigo.mdui-flatbutton .ui-button,
                              .mdui-indigo.mdui-flatbutton .ui-button-text,
                              .mdui-indigo.mdui-flatbutton.ui-button,
                              .mdui-indigo.mdui-floatingbutton.ui-button  {
                                color: #7986CB !important;
                              }
                              .mdui-blue,
                              .mdui-blue select, .mdui-blue input,
                              .mdui-blue-acc.mdui-input input[type="button"],
                              .mdui-blue-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-blue.mdui-radio *[id*="_radio"] label,
                              .mdui-blue.mdui-label, .mdui-blue.mdui-value,
                              .mdui-blue.mdui-title, .mdui-blue.mdui-subtitle,
                              .mdui-blue.mdui-flatbutton div,
                              .mdui-blue.mdui-flatbutton a,
                              .mdui-blue.mdui-flatbutton .ui-button,
                              .mdui-blue.mdui-flatbutton .ui-button-text,
                              .mdui-blue.mdui-flatbutton.ui-button,
                              .mdui-blue.mdui-floatingbutton.ui-button  {
                                color: #2196F3 !important;
                              }
                              .mdui-lime,
                              .mdui-lime select, .mdui-lime input,
                              .mdui-lime-acc.mdui-input input[type="button"],
                              .mdui-lime-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-lime.mdui-radio *[id*="_radio"] label,
                              .mdui-lime.mdui-label, .mdui-lime.mdui-value,
                              .mdui-lime.mdui-title, .mdui-lime.mdui-subtitle,
                              .mdui-lime.mdui-flatbutton div,
                              .mdui-lime.mdui-flatbutton a,
                              .mdui-lime.mdui-flatbutton .ui-button-text,
                              .mdui-lime.mdui-flatbutton .ui-button,
                              .mdui-lime.mdui-flatbutton.ui-button,
                              .mdui-lime.mdui-floatingbutton.ui-button  {
                                color: #CDDC39 !important;
                              }
                              .mdui-red,
                              .mdui-red select, .mdui-red input,
                              .mdui-red-acc.mdui-input input[type="button"],
                              .mdui-red-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-red.mdui-radio *[id*="_radio"] label,
                              .mdui-red.mdui-label, .mdui-red.mdui-value,
                              .mdui-red.mdui-title, .mdui-red.mdui-subtitle,
                              .mdui-red.mdui-flatbutton div,
                              .mdui-red.mdui-flatbutton a,
                              .mdui-red.mdui-flatbutton .ui-button,
                              .mdui-red.mdui-flatbutton .ui-button-text,
                              .mdui-red.mdui-flatbutton.ui-button  {
                                color: #F44336 !important;
                              }
                              .mdui-green,
                              .mdui-green select, .mdui-green input,
                              .mdui-green-acc.mdui-input input[type="button"],
                              .mdui-green-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-green.mdui-radio *[id*="_radio"] label,
                              .mdui-green.mdui-label, .mdui-green.mdui-value,
                              .mdui-green.mdui-title, .mdui-green.mdui-subtitle,
                              .mdui-green.mdui-flatbutton div,
                              .mdui-green.mdui-flatbutton a,
                              .mdui-green.mdui-flatbutton .ui-button,
                              .mdui-green.mdui-flatbutton .ui-button-text,
                              .mdui-green.mdui-flatbutton.ui-button  {
                                color: #4CAF50 !important;
                              }
                              .mdui-yellow,
                              .mdui-yellow select, .mdui-yellow input,
                              .mdui-yellow-acc.mdui-input input[type="button"],
                              .mdui-yellow-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-yellow.mdui-radio *[id*="_radio"] label,
                              .mdui-yellow.mdui-label, .mdui-yellow.mdui-value,
                              .mdui-yellow.mdui-title, .mdui-yellow.mdui-subtitle,
                              .mdui-yellow.mdui-flatbutton div,
                              .mdui-yellow.mdui-flatbutton a,
                              .mdui-yellow.mdui-flatbutton .ui-button,
                              .mdui-yellow.mdui-flatbutton .ui-button-text,
                              .mdui-yellow.mdui-flatbutton.ui-button  {
                                color: #FFEB3B !important;
                              }
                              .mdui-brown,
                              .mdui-brown select, .mdui-brown input,
                              .mdui-brown-acc.mdui-input input[type="button"],
                              .mdui-brown-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-brown.mdui-radio *[id*="_radio"] label,
                              .mdui-brown.mdui-label, .mdui-brown.mdui-value,
                              .mdui-brown.mdui-title, .mdui-brown.mdui-subtitle,
                              .mdui-brown.mdui-flatbutton div,
                              .mdui-brown.mdui-flatbutton a,
                              .mdui-brown.mdui-flatbutton .ui-button-text,
                              .mdui-brown.mdui-flatbutton .ui-button,
                              .mdui-brown.mdui-flatbutton.ui-button  {
                                color: #795548 !important;
                              }
                              .mdui-grey,
                              .mdui-grey select, .mdui-grey input,
                              .mdui-grey-acc.mdui-input input[type="button"],
                              .mdui-grey-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-grey.mdui-radio *[id*="_radio"] label,
                              .mdui-grey.mdui-label, .mdui-grey.mdui-value,
                              .mdui-grey.mdui-title, .mdui-grey.mdui-subtitle,
                              .mdui-grey.mdui-flatbutton div,
                              .mdui-grey.mdui-flatbutton a,
                              .mdui-grey.mdui-flatbutton .ui-button,
                              .mdui-grey.mdui-flatbutton .ui-button-text,
                              .mdui-grey.mdui-flatbutton.ui-button  {
                                color: #9E9E9E !important;
                              }
                              .mdui-bluegrey,
                              .mdui-bluegrey select, .mdui-bluegrey input,
                              .mdui-bluegrey-acc.mdui-input input[type="button"],
                              .mdui-bluegrey-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-bluegrey.mdui-radio *[id*="_radio"] label,
                              .mdui-bluegrey.mdui-label, .mdui-bluegrey.mdui-value,
                              .mdui-bluegrey.mdui-title, .mdui-bluegrey.mdui-subtitle,
                              .mdui-bluegrey.mdui-flatbutton div,
                              .mdui-bluegrey.mdui-flatbutton a,
                              .mdui-bluegrey.mdui-flatbutton .ui-button,
                              .mdui-bluegrey.mdui-flatbutton .ui-button-text,
                              .mdui-bluegrey.mdui-flatbutton.ui-button  {
                                color: #607D8B !important;
                              }
                              .mdui-white,
                              .mdui-white select, .mdui-white input,
                              .mdui-white-acc.mdui-input input[type="button"],
                              .mdui-white-acc.mdui-radio *[id*="_radio"] label.ui-state-active,
                              .mdui-white.mdui-radio *[id*="_radio"] label,
                              .mdui-white.mdui-label, .mdui-bluegrey.mdui-value,
                              .mdui-white.mdui-title, .mdui-bluegrey.mdui-subtitle,
                              .mdui-white.mdui-flatbutton div,
                              .mdui-white.mdui-flatbutton a,
                              .mdui-white.mdui-flatbutton .ui-button,
                              .mdui-white.mdui-flatbutton .ui-button-text,
                              .mdui-white.mdui-flatbutton.ui-button  {
                                color: #FFFFFF !important;
                              }
                              
                              /* 500 slider */
                              .mdui-transparent-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-transparent-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-transparent-acc.mdui-slider .ui-slider-handle:before {
                                background: none !important;
                              }
                              .mdui-teal-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-teal-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-teal-acc.mdui-slider .ui-slider-handle {
                                background: #009688 !important;
                              }
                              .mdui-amber-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-amber-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-amber-acc.mdui-slider .ui-slider-handle {
                                background: #FFC107 !important;
                              }
                              .mdui-indigo-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-indigo-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-indigo-acc.mdui-slider .ui-slider-handle {
                                background: #3F51B5 !important;
                              }
                              .mdui-blue-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-blue-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-blue-acc.mdui-slider .ui-slider-handle {
                                background: #2196F3 !important;
                              }
                              .mdui-lime-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-lime-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-lime-acc.mdui-slider .ui-slider-handle {
                                background: #CDDC39 !important;
                              }
                              .mdui-red-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-red-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-red-acc.mdui-slider .ui-slider-handle {
                                background: #F44336 !important;
                              }
                              .mdui-green-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-green-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-green-acc.mdui-slider .ui-slider-handle {
                                background: #4CAF50 !important;
                              }
                              .mdui-yellow-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-yellow-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-yellow-acc.mdui-slider .ui-slider-handle {
                                background: #FFEB3B !important;
                              }
                              .mdui-brown-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-brown-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-brown-acc.mdui-slider .ui-slider-handle {
                                background: #795548 !important;
                              }
                              .mdui-grey-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-grey-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-grey-acc.mdui-slider .ui-slider-handle {
                                background: #9E9E9E !important;
                              }
                              .mdui-bluegrey-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-bluegrey-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-bluegrey-acc.mdui-slider .ui-slider-handle {
                                background: #607D8B !important;
                              }
                              .mdui-white-acc.mdui-slider .ui-slider-horizontal:before,
                              .mdui-white-acc.mdui-slider .ui-slider-vertical:before,
                              .mdui-white-acc.mdui-slider .ui-slider-handle {
                                background: #FFFFFF !important;
                              }
                              
                              
                              /* 500 Radio */
                              .mdui-teal-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#009688 !important;
                                color:#009688 !important;
                              }
                              .mdui-amber-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#FFCA28 !important;
                                color:#FFCA28 !important;
                              }
                              .mdui-indigo-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#7986CB !important;
                                color:#7986CB !important;
                              }
                              .mdui-blue-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#2196F3 !important;
                                color:#2196F3 !important;
                              }
                              .mdui-lime-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#CDDC39 !important;
                                color:#CDDC39 !important;
                              }
                              .mdui-red-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#F44336 !important;
                                color:#F44336 !important;
                              }
                              .mdui-green-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#4CAF50 !important;
                                color:#4CAF50 !important;
                              }
                              .mdui-yellow-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#FFEB3B !important;
                                color:#FFEB3B !important;
                              }
                              .mdui-brown-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#795548 !important;
                                color:#795548 !important;
                              }
                              .mdui-grey-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#795548 !important;
                                color:#9E9E9E !important;
                              }
                              .mdui-bluegrey-acc.mdui-radio *[id*="_radio"] label.ui-state-active {
                                border-bottom-color:#607D8B !important;
                                color:#607D8B !important;
                              }
                              
                              /* 500 Switch */
                              .mdui-teal-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #009688 ; }
                              .mdui-amber-acc input[type="checkbox"]:checked~label:after { background-color: #FFC107 ; }
                              .mdui-indigo-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #3F51B5 ; }
                              .mdui-blue-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #64B5F6; }
                              .mdui-lime-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #CDDC39 ; }
                              .mdui-red-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #F44336 ; }
                              .mdui-green-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #4CAF50 ; }
                              .mdui-yellow-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #FFEB3B ; }
                              .mdui-brown-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #795548 ; }
                              .mdui-grey-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #9E9E9E ; }
                              .mdui-bluegrey-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #607D8B ; }
                              
                              
                              /* 600 Switch */
                              .mdui-teal-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #00897B; }
                              .mdui-amber-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #FFB300; }
                              .mdui-indigo-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #3949AB; }
                              .mdui-blue-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #1E88E5; }
                              .mdui-lime-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #C0CA33; }
                              .mdui-red-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #E53935; }
                              .mdui-green-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #43A047; }
                              .mdui-yellow-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #FDD835; }
                              .mdui-brown-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #6D4C41; }
                              .mdui-grey-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #757575; }
                              .mdui-bluegrey-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #546E7A; }
                              
                              
                              /* 800 */
                              .mdui-teal-bg.mdui-lnav, .mdui-teal-bg.mdui-rnav,
                              .mdui-teal-bg.mdui-card, .mdui-teal-bg.mdui-tile {
                                background-color : #00695C !important;
                              }
                              .mdui-amber-bg.mdui-lnav, .mdui-amber-bg.mdui-rnav,
                              .mdui-amber-bg.mdui-card, .mdui-amber-bg.mdui-tile {
                                background-color : #FF8F00 !important;
                              }
                              .mdui-indigo-bg.mdui-lnav, .mdui-indigo-bg.mdui-rnav,
                              .mdui-indigo-bg.mdui-card, .mdui-indigo-bg.mdui-tile {
                                background-color : #283593 !important;
                              }
                              .mdui-blue-bg.mdui-lnav, .mdui-blue-bg.mdui-rnav,
                              .mdui-blue-bg.mdui-card, .mdui-blue-bg.mdui-tile {
                                background-color : #1565C0 !important;
                              }
                              .mdui-lime-bg.mdui-lnav, .mdui-lime-bg.mdui-rnav,
                              .mdui-lime-bg.mdui-card, .mdui-lime-bg.mdui-tile {
                                background-color : #9E9D24 !important;
                              }
                              .mdui-red-bg.mdui-lnav, .mdui-red-bg.mdui-rnav,
                              .mdui-red-bg.mdui-card, .mdui-red-bg.mdui-tile {
                                background-color : #C62828 !important;
                              }
                              .mdui-green-bg.mdui-lnav, .mdui-green-bg.mdui-rnav,
                              .mdui-green-bg.mdui-card, .mdui-green-bg.mdui-tile {
                                background-color : #2E7D32 !important;
                              }
                              .mdui-yellow-bg.mdui-lnav, .mdui-yellow-bg.mdui-rnav,
                              .mdui-yellow-bg.mdui-card, .mdui-yellow-bg.mdui-tile {
                                background-color : #F9A825 !important;
                              }
                              .mdui-brown-bg.mdui-lnav, .mdui-brown-bg.mdui-rnav,
                              .mdui-brown-bg.mdui-card, .mdui-brown-bg.mdui-tile {
                                background-color : #4E342E !important;
                              }
                              .mdui-grey-bg.mdui-lnav, .mdui-grey-bg.mdui-rnav,
                              .mdui-grey-bg.mdui-card, .mdui-grey-bg.mdui-tile {
                                background-color : #424242 !important;
                              }
                              .mdui-bluegrey-bg.mdui-lnav, .mdui-bluegrey-bg.mdui-rnav,
                              .mdui-bluegrey-bg.mdui-card, .mdui-bluegrey-bg.mdui-tile {
                                background-color : #37474F !important;
                              }
                              
                              /* 850 */
                              .mdui-teal-bg.mdui-content {
                                background-color : #005b4e !important;
                              }
                              .mdui-amber-bg.mdui-content {
                                background-color : #FF7F00 !important;
                              }
                              .mdui-indigo-bg.mdui-content {
                                background-color : #212c88 !important;
                              }
                              .mdui-blue-bg.mdui-content {
                                background-color : #1156B0 !important;
                              }
                              .mdui-lime-bg.mdui-content {
                                background-color : #908a1d !important;
                              }
                              .mdui-red-bg.mdui-content {
                                background-color : #be2222 !important;
                              }
                              .mdui-green-bg.mdui-content {
                                background-color : #246d29 !important;
                              }
                              .mdui-yellow-bg.mdui-content {
                                background-color : #f7931e !important;
                              }
                              .mdui-brown-bg.mdui-content {
                                background-color : #462d28 !important;
                              }
                              .mdui-grey-bg.mdui-content {
                                background-color : #303030 !important;
                              }
                              .mdui-bluegrey-bg.mdui-content {
                                background-color : #2e3c43 !important;
                              }
                              
                              
                              /* 900 */
                              .mdui-teal-bg.mdui-tnav, .mdui-teal-bg.mdui-bnav,
                              .mdui-teal-bg.mdui-abar {
                                background : #004D40 !important;
                              }
                              .mdui-amber-bg.mdui-tnav, .mdui-amber-bg.mdui-bnav,
                              .mdui-amber-bg.mdui-abar {
                                xbackground : #FF6F00 !important;
                                background: hsl(45, 50%, 50%) !important;
                              }
                              .mdui-indigo-bg.mdui-tnav, .mdui-indigo-bg.mdui-bnav,
                              .mdui-indigo-bg.mdui-abar {
                                background : #1A237E !important;
                              }
                              .mdui-blue-bg.mdui-tnav, .mdui-blue-bg.mdui-bnav,
                              .mdui-blue-bg.mdui-abar {
                                background : #0D47A1 !important;
                              }
                              .mdui-lime-bg.mdui-tnav, .mdui-lime-bg.mdui-bnav,
                              .mdui-lime-bg.mdui-abar {
                                background : #827717 !important;
                              }
                              .mdui-red-bg.mdui-tnav, .mdui-red-bg.mdui-bnav,
                              .mdui-red-bg.mdui-abar {
                                xbackground : #B71C1C !important;
                                background: hsl(0, 50%, 40%) !important;
                              }
                              .mdui-green-bg.mdui-tnav, .mdui-green-bg.mdui-bnav,
                              .mdui-green-bg.mdui-abar {
                                background : #1B5E20 !important;
                              }
                              .mdui-yellow-bg.mdui-tnav, .mdui-yellow-bg.mdui-bnav,
                              .mdui-yellow-bg.mdui-abar {
                                xbackground : #F57F17 !important;
                                background: hsl(60, 50%, 40%) !important;
                              }
                              .mdui-brown-bg.mdui-tnav, .mdui-brown-bg.mdui-bnav,
                              .mdui-brown-bg.mdui-abar {
                                background : #3E2723 !important;
                              }
                              .mdui-grey-bg.mdui-tnav, .mdui-grey-bg.mdui-bnav,
                              .mdui-grey-bg.mdui-abar {
                                background : #212121 !important;
                              }
                              .mdui-bluegrey-bg.mdui-tnav, .mdui-bluegrey-bg.mdui-bnav,
                              .mdui-bluegrey-bg.mdui-abar {
                                background : #263238 !important;
                              }
                              
                              ! ````
                              /* -----
                              flash
                              ----- */
                              .mdui-red-flash {
                              outline: 2px solid transparent;
                              animation: mdui-red-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-red-flash-ani {
                              0% { outline-color: rgba(254,67,54,1);
                              box-shadow: 0 0 32px 4px rgba(254,67,54,1)}
                              
                              20%,100% { outline-color: transparent; }
                              }
                              .mdui-yellow-flash {
                              outline: 2px solid transparent;
                              animation: mdui-yellow-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-yellow-flash-ani {
                              0% { outline-color: rgba(255,235,59,1);
                              box-shadow: 0 0 32px 4px rgba(255,235,59,1)}
                              20%,100% { outline-color: transparent; }
                              }
                              .mdui-blue-flash {
                              outline: 2px solid transparent;
                              animation: mdui-blue-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-blue-flash-ani {
                              0% { outline-color: rgba(43,150,243,1);
                              box-shadow: 0 0 32px 4px rgba(43,150,243,1)}
                              20%,100% { outline-color: transparent; }
                              }
                              .mdui-green-flash {
                              outline: 2px solid transparent;
                              animation: mdui-green-flash-ani 1s linear infinite;
                              }
                              @keyframes mdui-green-flash-ani {
                              0% { outline-color: rgba(76,175,80,1);
                              box-shadow: 0 0 32px 4px rgba(76,175,80,1)}
                              20%,100% { outline-color: transparent; }
                              }
                              
                              ! /* -----
                              blink
                              ----- /
                              ! .mdui-red-blink {
                              outline: 2px solid transparent;
                              animation: mdui-red-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-red-blink-ani {
                              50% { outline-color: rgba(254,67,54,1);
                              box-shadow: 0 0 32px 4px rgba(254,67,54,1); }
                              25%,75% { outline-color: transparent; }
                              }
                              .mdui-yellow-blink {
                              outline: 2px solid transparent;
                              animation: mdui-yellow-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-yellow-blink-ani {
                              50% { outline-color: rgba(255,235,59,1);
                              box-shadow: 0 0 32px 4px rgba(255,235,59,1); }
                              25%,75% { outline-color: transparent; }
                              }
                              .mdui-blue-blink {
                              outline: 2px solid transparent;
                              animation: mdui-blue-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-blue-blink-ani {
                              50% { outline-color: rgba(43,150,243,1);
                              box-shadow: 0 0 32px 4px rgba(43,150,243,1); }
                              25%,75% { outline-color: transparent; }
                              }
                              .mdui-green-blink {
                              outline: 2px solid transparent;
                              animation: mdui-green-blink-ani 1s linear infinite;
                              }
                              @keyframes mdui-green-blink-ani {
                              50% { outline-color: rgba(76,175,80,1);
                              box-shadow: 0 0 32px 4px rgba(76,175,80,1); }
                              25%,75% { outline-color: transparent; }
                              }
                              ! / -----
                              pulse
                              ----- */
                              .mdui-red-pulse {
                              outline: 2px solid rgba(254,67,54,0.5);
                              animation: mdui-red-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-red-pulse-ani {
                              50% { outline-color: rgba(254,67,54,1);
                              box-shadow: 0 0 32px 4px rgba(254,67,54,1); }
                              }
                              .mdui-yellow-pulse {
                              outline: 2px solid rgba(255,235,59,0.5);
                              animation: mdui-yellow-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-yellow-pulse-ani {
                              50% { outline-color: rgba(255,235,59,1);
                              box-shadow: 0 0 32px 4px rgba(255,235,59,1); }
                              }
                              .mdui-blue-pulse {
                              outline: 2px solid rgba(43,150,243,0.5);
                              animation: mdui-blue-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-blue-pulse-ani {
                              50% { outline-color: rgba(43,150,243,1);
                              box-shadow: 0 0 32px 4px rgba(43,150,243,1); }
                              }
                              .mdui-green-pulse {
                              outline: 2px solid rgba(76,175,80,0.5);
                              animation: mdui-green-pulse-ani 3s linear infinite;
                              }
                              @keyframes mdui-green-pulse-ani {
                              50% { outline-color: rgba(76,175,80,1);
                              box-shadow: 0 0 32px 4px rgba(76,175,80,1); }
                              }
                              
                              
                              
                              /* -----
                                 Design
                                 ----- */
                              
                              /* Weißes Raster mit 52x52 156x156 als Hintergrund */
                              .vis-grid:before {
                                content:"";
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:100%;
                                background-image:
                                  repeating-linear-gradient(
                                   transparent,
                                   transparent 155px,
                                   rgba(255,255,255,1) 155px,
                                   rgba(255,255,255,1) 156px
                                  ),
                              
                                  repeating-linear-gradient(to right,
                                   transparent,
                                   transparent 155px,
                                   rgba(255,255,255,1) 155px,
                                   rgba(255,255,255,1) 156px
                                   )
                                !important;
                              }
                              .vis-grid:after {
                                content:"";
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:100%;
                                background-image:
                                  repeating-linear-gradient(
                                   transparent,
                                   transparent 51px,
                                   rgba(255,255,255,1) 52px,
                                   rgba(255,255,255,1) 52px
                                  ),
                              
                                  repeating-linear-gradient(to right,
                                   transparent,
                                   transparent 51px,
                                   rgba(255,255,255,1) 52px,
                                   rgba(255,255,255,1) 52px
                                   )
                                !important;
                              }
                              
                              /* Sichtbarkeit des Grids verringern */
                              .vis-grid {
                                opacity: 0.2;
                                z-index:100;
                              }
                              
                              
                              
                              /* bei [Klick] nach 3 Sek je Widget einen Rahmen zeichnen und die ID
                              einblenden */
                              .vis_container_edit .vis-view:active .vis-widget:after {
                                animation: vis-view-hover-ani 5s;
                                animation-delay: 3s;
                                color:#000;
                              }
                              
                              /* beim :hover nach 0.5 Sek hervorheben und die ID einblenden */
                              .vis_container_edit .vis-view .vis-widget:hover:after {
                                animation: vis-view-hover-ani 3s;
                                animation-delay: 1s;
                                color:#000;
                              }
                              
                              @keyframes vis-view-hover-ani  {
                                0%,100% {
                                position:absolute;
                                left:0px;
                                top:0px;
                                width:calc(100% - 2px);
                                height:calc(100% - 2px);
                                text-align:left;
                                border:1px dotted #ffff00;
                                font-size:0.6em;
                                background: linear-gradient(yellow 0%, yellow 100%);
                                background-size: 48px 12px;
                                background-repeat: no-repeat;
                                content:attr(id);
                                pointer-events: none;
                                }
                              
                              }
                              
                              .widget-helper {
                                  border: 1px dashed transparent;
                              }
                              
                              .widget_inner_helper {
                                  outline: 1px dashed black;
                                  border: 1px dashed white;
                                  pointer-events: none;
                                  top:1px;
                                  left:0px;
                                  position:absolute;
                                  width: calc(100% - 3px);
                                  height: calc(100% - 3px);
                              }
                              
                              
                              /* container-bezeichnungen anzeigen */
                              .vis_container_edit .mdui-content:before,
                              .vis_container_edit .mdui-rnav:before,
                              .vis_container_edit .mdui-lnav:before,
                              .vis_container_edit .mdui-tnav:before,
                              .vis_container_edit .mdui-abar:before {
                                  position:absolute;
                                  top:0px;
                                  left:0px;
                                  content:"content";
                                  background: #ffff00;
                                  color:#000;
                                  font-size:12px;
                                  font-weight:bold;
                                  height:1.2em;
                                  width:5em;
                                  opacity:0.66;
                              }
                              
                              .vis_container_edit .mdui-abar:before { content:"app-bar"; }
                              .vis_container_edit .mdui-tnav:before { content:"top-nav"; }
                              .vis_container_edit .mdui-lnav:before { content:"left-nav"; }
                              .vis_container_edit .mdui-rnav:before { content:"right-nav"; }
                              .vis_container_edit .mdui-content:hover:before,
                              .vis_container_edit .mdui-rnav:hover:before,
                              .vis_container_edit .mdui-lnav:hover:before,
                              .vis_container_edit .mdui-tnav:hover:before,
                              .vis_container_edit .mdui-abar:hover:before {
                                opacity:1;
                              }
                              
                              .vis_container_edit .mdui-cols-1  { width:156px !important;}
                              .vis_container_edit .mdui-cols-2  { width:312px !important;}
                              .vis_container_edit .mdui-cols-3 { width:468px !important; }
                              .vis_container_edit .mdui-cols-4  { width:624px !important;}
                              .vis_container_edit .mdui-cols-5  { width:780px !important;}
                              .vis_container_edit .mdui-cols-6  { width:924px !important;}
                              .vis_container_edit .mdui-cols-7  { width:1092px !important;}
                              .vis_container_edit .mdui-cols-8  { width:1248px !important;}
                              .vis_container_edit .mdui-cols-9  { width:1404px !important;}
                              .vis_container_edit .mdui-cols-10  { width:1560px !important;}
                              
                              liv-in-sky 1 Reply Last reply Reply Quote 0
                              • liv-in-sky
                                liv-in-sky @JB_Sullivan last edited by

                                @JB_Sullivan

                                editor widget

                                Image 5.png

                                mit dem material design widget zusammen mit solchen einträgen kenne ich mich leider nicht aus - da muss du den programmierer oder im thread fragen

                                JB_Sullivan 1 Reply Last reply Reply Quote 0
                                • JB_Sullivan
                                  JB_Sullivan @liv-in-sky last edited by

                                  @liv-in-sky Tatsache - so funktioniert es auch im Laufzeit VIS

                                  Vielen Dank für den Schubs in die richtige Richtung

                                  2020-08-02 12_52_46-vis.png

                                  1 Reply Last reply Reply Quote 1
                                  • First post
                                    Last post

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  764
                                  Online

                                  31.8k
                                  Users

                                  80.0k
                                  Topics

                                  1.3m
                                  Posts

                                  vis
                                  3
                                  15
                                  570
                                  Loading More Posts
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  Community
                                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                  The ioBroker Community 2014-2023
                                  logo