Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <base target="_blank">
</head>
<body>
  <header class="text-center">
    <h1><monokaiui label text-color="magenta">Monokai UI</monokaiui></h1>
    <h1 class="subtitle"><monokaiui label text-color="cyan">GUI for PWA</monokaiui></h1>
    <hr>
    <h1 class="subtitle"><monokaiui label text-color="orange">major alpha update</monokaiui></h1>
    <h1 class="subtitle"><monokaiui label text-color="orange">Breaks backwards compatibility</monokaiui></h1>
    <h1 class="subtitle"><monokaiui label text-color="orange">WORK IN PROGRESS</monokaiui></h1>
  </header>
  <hr>
  <h3 class="text-center"><monokaiui label text-color="green">Single Label</monokaiui></h3>
  <monokaiui label id="label-example">All MonokaiUI labels are automatically translated via JSON and retain the original text via the "translate" attribute.<br>This attribute can be used to translate in run-time without having to restart the program or interface.</monokaiui>
      
  <div class="container center">
    <div style="display:grid;grid-template-columns: min-content min-content;grid-gap:5px;">
      
      <div style="grid-column-start: 1;grid-column-end: 3;"><h3 class="text-center"><monokaiui label text-color="green">Attributes</monokaiui></h3></div>
      
      <monokaiui label text-color="orange" bold="true" style="text-align:right;width:100%">Normal</monokaiui><div></div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">text-wrap=</monokaiui>
      <div class="container">
        <monokaiui button checked="true" checked-bg="green" checked-text-color="light" onclick="monokaiUI_switchChecked(this);monokaiLabel_setTextWrap('label-example',monokaiUI_isChecked(this))">Apply</monokaiui>
      </div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">bold=</monokaiui>
      <div class="container">
        <monokaiui button checked-bg="green" checked-text-color="light" onclick="monokaiUI_switchChecked(this);monokaiLabel_setBold('label-example',monokaiUI_isChecked(this))">Apply</monokaiui>
      </div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">italic=</monokaiui>
      <div class="container">
        <monokaiui button checked-bg="green" checked-text-color="light" onclick="monokaiUI_switchChecked(this);monokaiLabel_setItalic('label-example',monokaiUI_isChecked(this))">Apply</monokaiui>
      </div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">text-color=</monokaiui>
      <div class="container">
        <monokaiui group>
          <monokaiui button checked="true" onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','default')">default</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','magenta')">magenta</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','cyan')">cyan</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','green')">green</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','orange')">orange</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','light')">light</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextColor('label-example','dark')">dark</monokaiui>
        </monokaiui>
      </div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">text-glow=</monokaiui>
      <div class="container">
        <monokaiui group>
          <monokaiui button checked="true" onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','default')">default</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','magenta')">magenta</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','cyan')">cyan</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','green')">green</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','orange')">orange</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','light')">light</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiLabel_setTextGlow('label-example','dark')">dark</monokaiui>
        </monokaiui>
      </div>
      
      <monokaiui label text-color="orange" bold="true" style="text-align:right;width:100%">Generic</monokaiui><div></div>
      
      <monokaiui label style="text-align:right;width:100%" text-wrap="false">disabled=</monokaiui>
      <div class="container">
        <monokaiui group>
          <monokaiui button checked="true" onclick="monokaiUI_setChecked(this,true,true);monokaiUI_setDisabled('label-example', false)">false</monokaiui>
          <monokaiui button onclick="monokaiUI_setChecked(this,true,true);monokaiUI_setDisabled('label-example', true)">true</monokaiui>
        </monokaiui>
      </div>
      
    </div>
  </div>
  <hr>
  <div class="container center">
    <ul class="green glow item-boxcheck">
      <li>monokai palette colors has HSL separated values</li>
      <li>UI elements has &lt;monokaiui&gt; parent</li>
      <li>Add JS function monokaiUI_getAttribute(eORid, attributeName)</li>
      <li>Add JS function monokaiUI_setAttribute(eORid, attributeName, attributeValue)</li>
      <li>Add JS function monokaiUI_isChecked(eORid)</li>
      <li>Add JS function monokaiUI_setChecked(eORid, flag, group=false)</li>
      <li>Add JS function monokaiUI_switchChecked(eORid, group=false)</li>
      <li>All JS functions init_monokai*** has elements=null parameter
        <ul>
          <li>if no parameter is defined: initialize all elements</li>
          <li>if parameter is array of DOM elements: initialize all array elements</li>
        </ul>
      </li>
      <li class="orange item-box">For some elements: change em to px</li>
      <!--
      https://www.w3schools.com/tags/ref_pxtoemconversion.asp
      Default pixel size: 16
      -->
      <li><a href="https://codepen.io/tonywhite1985/pen/VwYpEoW">&lt;hamburger&gt;</a></li>

      <li class="orange item-box"><a href="https://codepen.io/tonywhite1985/pen/xxxNmRV">&lt;button&gt;</a></li>
      <li class="orange item-box">&lt;label&gt;
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
          <li>Features
            <ul>
              <li>Nestable & independent elements</li>
              <li>Nested in &lt;button&gt; element</li>
              <li>Can translate in run-time</li>
            </ul>
          </li>
        </ul>
      </li>
      
      <li class="orange item-box">&lt;group&gt;
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li class="magenta item-boxcross">fillH (fill horizontal)</li>
            <li class="magenta item-boxcross">fillV (fill vertical)</li>
            <li>fill="true" (fill both)</li>
            <li>edgySide
              <ul>
                <li>edgySideN="true"</li>
                <li>edgySideE="true"</li>
                <li>edgySideS="true"</li>
                <li>edgySideW="true"</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>JS</li>
        <li class="orange item-box">Features
          <ul>
            <li>Set attribute align="vertical" for vertical group</li>
            <li>Set attribute align="horizontal" for horizontal group (default)</li>
            <li>Set attribute condensed="true" for condensed elements (default)</li>
            <li>Set attribute condensed="false" for non condensed elements</li>
            <li>Set gap between elements (default gap="0px")<br>
              css function attr() supports only strings,<br>
              then update style with javascript.
            </li>
            <li>Set attribute fill="true" to fill elements in container (default)</li>
            <li>Set attribute fill="false" to not fill elements in container</li>
          </ul>
        </li>
      </ul>
      </li>

      <li class="magenta item-box">&lt;checkbox&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;progressbar&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;radiobutton&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;spoiler&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
          <li class="magenta item-box">Zero height when closed</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;switch&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">
            JS
            <ul>
              <li class="magenta item-box">Debug on monokaiUI_isDisabled function</li>
              <li class="magenta item-box">Debug on monokaiUI_setDisabled function</li>
              <li class="magenta item-box">Debug on monokaiUI_switchDisabled function</li>
            </ul>
          </li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;textinput&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">Create new &lt;textarea&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;waiting&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

      <li class="magenta item-box">&lt;loader&gt;
        <ul>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>
      
      <li class="magenta item-box">Create new &lt;slider&gt;
        <ul>
          <li class="magenta item-box">Do tests for desktop and mobile for drag&drop</li>
          <li class="magenta item-box">HTML</li>
          <li class="magenta item-box">CSS</li>
          <li class="magenta item-box">JS</li>
        </ul>
      </li>

    </ul>
  </div>
  <monokaiui><loader></loader></monokaiui>
</body>
              
            
!

CSS

              
                @charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,300i,400,700,700i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Fira+Code:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');

:root{
  /* Monokai color palette HSL values */
  /* base */         /* variant 1 */      /* variant 2*/
  --dark_H:      70; --dark-1_H:      55; --dark-2_H:      40;
  --dark_S:      8%; --dark-1_S:     10%; --dark-2_S:     13%;
  --dark_L:     15%; --dark-1_L:     22%; --dark-2_L:     28%;
  --magenta_H:  338; --magenta-1_H:  338; --magenta-2_H:  337;
  --magenta_S:  95%; --magenta-1_S:  97%; --magenta-2_S: 100%;
  --magenta_L:  56%; --magenta-1_L:  68%; --magenta-2_L:  80%;
  --cyan_H:     190; --cyan-1_H:     190; --cyan-2_H:     189;
  --cyan_S:     81%; --cyan-1_S:     83%; --cyan-2_S:     86%;
  --cyan_L:     67%; --cyan-1_L:     79%; --cyan-2_L:     91%;
  --green_H:     80; --green-1_H:     80; --green-2_H:     79;
  --green_S:    76%; --green-1_S:    78%; --green-2_S:    81%;
  --green_L:    53%; --green-1_L:    65%; --green-2_L:    77%;
  --orange_H:    32; --orange-1_H:    32; --orange-2_H:    31;
  --orange_S:   98%; --orange-1_S:  100%; --orange-2_S:  100%;
  --orange_L:   55%; --orange-1_L:   67%; --orange-2_L:   79%;
  --light_H:     60; --light-1_H:     45; --light-2_H:     30;
  --light_S:    24%; --light-1_S:    21%; --light-2_S:    19%;
  --light_L:    96%; --light-1_L:    75%; --light-2_L:    60%;
  --opacity_25: 0.25;
  --opacity_50: 0.50;
  --opacity_75: 0.75;
  
  /* Monokai palette */
  --dark:      hsl(var(--dark_H),     var(--dark_S),     var(--dark_L));
  --dark-1:    hsl(var(--dark-1_H),   var(--dark-1_S),   var(--dark-1_L));
  --dark-2:    hsl(var(--dark-2_H),   var(--dark-2_S),   var(--dark-2_L));
  --magenta:   hsl(var(--magenta_H),  var(--magenta_S),  var(--magenta_L));
  --magenta-1: hsl(var(--magenta-1_H),var(--magenta-1_S),var(--magenta-1_L));
  --magenta-2: hsl(var(--magenta-2_H),var(--magenta-2_S),var(--magenta-2_L));
  --cyan:      hsl(var(--cyan_H),     var(--cyan_S),     var(--cyan_L));
  --cyan-1:    hsl(var(--cyan-1_H),   var(--cyan-1_S),   var(--cyan-1_L));
  --cyan-2:    hsl(var(--cyan-2_H),   var(--cyan-2_S),   var(--cyan-2_L));
  --green:     hsl(var(--green_H),    var(--green_S),    var(--green_L));
  --green-1:   hsl(var(--green-1_H),  var(--green-1_S),  var(--green-1_L));
  --green-2:   hsl(var(--green-2_H),  var(--green-2_S),  var(--green-2_L));
  --orange:    hsl(var(--orange_H),   var(--orange_S),   var(--orange_L));
  --orange-1:  hsl(var(--orange-1_H), var(--orange-1_S), var(--orange-1_L));
  --orange-2:  hsl(var(--orange-2_H), var(--orange-2_S), var(--orange-2_L));
  --light:     hsl(var(--light_H),    var(--light_S),    var(--light_L));
  --light-1:   hsl(var(--light-1_H),  var(--light-1_S),  var(--light-1_L));
  --light-2:   hsl(var(--light-2_H),  var(--light-2_S),  var(--light-2_L));
  /* 25% opacity */
  --dark_25:      hsla(var(--dark_H),     var(--dark_S),     var(--dark_L),     var(--opacity_25));
  --dark-1_25:    hsla(var(--dark-1_H),   var(--dark-1_S),   var(--dark-1_L),   var(--opacity_25));
  --dark-2_25:    hsla(var(--dark-2_H),   var(--dark-2_S),   var(--dark-2_L),   var(--opacity_25));
  --magenta_25:   hsla(var(--magenta_H),  var(--magenta_S),  var(--magenta_L),  var(--opacity_25));
  --magenta-1_25: hsla(var(--magenta-1_H),var(--magenta-1_S),var(--magenta-1_L),var(--opacity_25));
  --magenta-2_25: hsla(var(--magenta-2_H),var(--magenta-2_S),var(--magenta-2_L),var(--opacity_25));
  --cyan_25:      hsla(var(--cyan_H),     var(--cyan_S),     var(--cyan_L),     var(--opacity_25));
  --cyan-1_25:    hsla(var(--cyan-1_H),   var(--cyan-1_S),   var(--cyan-1_L),   var(--opacity_25));
  --cyan-2_25:    hsla(var(--cyan-2_H),   var(--cyan-2_S),   var(--cyan-2_L),   var(--opacity_25));
  --green_25:     hsla(var(--green_H),    var(--green_S),    var(--green_L),    var(--opacity_25));
  --green-1_25:   hsla(var(--green-1_H),  var(--green-1_S),  var(--green-1_L),  var(--opacity_25));
  --green-2_25:   hsla(var(--green-2_H),  var(--green-2_S),  var(--green-2_L),  var(--opacity_25));
  --orange_25:    hsla(var(--orange_H),   var(--orange_S),   var(--orange_L),   var(--opacity_25));
  --orange-1_25:  hsla(var(--orange-1_H), var(--orange-1_S), var(--orange-1_L), var(--opacity_25));
  --orange-2_25:  hsla(var(--orange-2_H), var(--orange-2_S), var(--orange-2_L), var(--opacity_25));
  --light_25:     hsla(var(--light_H),    var(--light_S),    var(--light_L),    var(--opacity_25));
  --light-1_25:   hsla(var(--light-1_H),  var(--light-1_S),  var(--light-1_L),  var(--opacity_25));
  --light-2_25:   hsla(var(--light-2_H),  var(--light-2_S),  var(--light-2_L),  var(--opacity_25));
  /* 50% opacity */
  --dark_50:      hsla(var(--dark_H),     var(--dark_S),     var(--dark_L),     var(--opacity_50));
  --dark-1_50:    hsla(var(--dark-1_H),   var(--dark-1_S),   var(--dark-1_L),   var(--opacity_50));
  --dark-2_50:    hsla(var(--dark-2_H),   var(--dark-2_S),   var(--dark-2_L),   var(--opacity_50));
  --magenta_50:   hsla(var(--magenta_H),  var(--magenta_S),  var(--magenta_L),  var(--opacity_50));
  --magenta-1_50: hsla(var(--magenta-1_H),var(--magenta-1_S),var(--magenta-1_L),var(--opacity_50));
  --magenta-1_50: hsla(var(--magenta-2_H),var(--magenta-2_S),var(--magenta-2_L),var(--opacity_50));
  --cyan_50:      hsla(var(--cyan_H),     var(--cyan_S),     var(--cyan_L),     var(--opacity_50));
  --cyan-1_50:    hsla(var(--cyan-1_H),   var(--cyan-1_S),   var(--cyan-1_L),   var(--opacity_50));
  --cyan-2_50:    hsla(var(--cyan-2_H),   var(--cyan-2_S),   var(--cyan-2_L),   var(--opacity_50));
  --green_50:     hsla(var(--green_H),    var(--green_S),    var(--green_L),    var(--opacity_50));
  --green-1_50:   hsla(var(--green-1_H),  var(--green-1_S),  var(--green-1_L),  var(--opacity_50));
  --green-2_50:   hsla(var(--green-2_H),  var(--green-2_S),  var(--green-2_L),  var(--opacity_50));
  --orange_50:    hsla(var(--orange_H),   var(--orange_S),   var(--orange_L),   var(--opacity_50));
  --orange-1_50:  hsla(var(--orange-1_H), var(--orange-1_S), var(--orange-1_L), var(--opacity_50));
  --orange-2_50:  hsla(var(--orange-2_H), var(--orange-2_S), var(--orange-2_L), var(--opacity_50));
  --light_50:     hsla(var(--light_H),    var(--light_S),    var(--light_L),    var(--opacity_50));
  --light-1_50:   hsla(var(--light-1_H),  var(--light-1_S),  var(--light-1_L),  var(--opacity_50));
  --light-2_50:   hsla(var(--light-2_H),  var(--light-2_S),  var(--light-2_L),  var(--opacity_50));
  /* 75% opacity */
  --dark_75:      hsla(var(--dark_H),     var(--dark_S),     var(--dark_L),     var(--opacity_75));
  --dark-1_75:    hsla(var(--dark-1_H),   var(--dark-1_S),   var(--dark-1_L),   var(--opacity_75));
  --dark-2_75:    hsla(var(--dark-2_H),   var(--dark-2_S),   var(--dark-2_L),   var(--opacity_75));
  --magenta_75:   hsla(var(--magenta_H),  var(--magenta_S),  var(--magenta_L),  var(--opacity_75));
  --magenta-1_75: hsla(var(--magenta-1_H),var(--magenta-1_S),var(--magenta-1_L),var(--opacity_75));
  --magenta-2_75: hsla(var(--magenta-2_H),var(--magenta-2_S),var(--magenta-2_L),var(--opacity_75));
  --cyan_75:      hsla(var(--cyan_H),     var(--cyan_S),     var(--cyan_L),     var(--opacity_75));
  --cyan-1_75:    hsla(var(--cyan-1_H),   var(--cyan-1_S),   var(--cyan-1_L),   var(--opacity_75));
  --cyan-2_75:    hsla(var(--cyan-2_H),   var(--cyan-2_S),   var(--cyan-2_L),   var(--opacity_75));
  --green_75:     hsla(var(--green_H),    var(--green_S),    var(--green_L),    var(--opacity_75));
  --green-1_75:   hsla(var(--green-1_H),  var(--green-1_S),  var(--green-1_L),  var(--opacity_75));
  --green-2_75:   hsla(var(--green-2_H),  var(--green-2_S),  var(--green-2_L),  var(--opacity_75));
  --orange_75:    hsla(var(--orange_H),   var(--orange_S),   var(--orange_L),   var(--opacity_75));
  --orange-1_75:  hsla(var(--orange-1_H), var(--orange-1_S), var(--orange-1_L), var(--opacity_75));
  --orange-2_75:  hsla(var(--orange-2_H), var(--orange-2_S), var(--orange-2_L), var(--opacity_75));
  --light_75:     hsla(var(--light_H),    var(--light_S),    var(--light_L),    var(--opacity_75));
  --light-1_75:   hsla(var(--light-1_H),  var(--light-1_S),  var(--light-1_L),  var(--opacity_75));
  --light-2_75:   hsla(var(--light-2_H),  var(--light-2_S),  var(--light-2_L),  var(--opacity_75));
  
  -webkit-tap-highlight-color:transparent; /* !!! NON STANDARD RULE !!! */
  /* Dust effect */
  --dust:url("https://antoniobianco.altervista.org/monokaiui/noise.webp");
}

* {
  /* Geometry */
  padding:0em;
  border:0em;
  margin:0em;
  
  /* Interactive elements */
  outline:none;
  background-color:transparent;
  
  /* Font */
  color:var(--light);
  font-size:1em;
  font-family:'Exo 2',sans-serif;
}

::selection{
  background:var(--light);
  color:var(--dark);
}

html, body{
  padding:0em;
}

body{
  background-color:var(--dark);
  background-image:var(--dust);
}

/**********
 * A LINK *
 **********/
a {
  text-decoration-color:var(--cyan);
}
a:link {
  
}
a:visited {
  text-shadow: 0px 0px 3px var(--orange);
  text-decoration-color:var(--orange);
}
a:hover {
  text-shadow: 0px 0px 3px var(--cyan);
  text-decoration-color:var(--cyan);
}
a:active {
  
}

/*****************
 * DIV Alignment *
 *****************/
div.container{
  display:flex;
}
div.container.left{
  justify-content:flex-start;
}
div.container.center{
  justify-content:center;
}
div.container.right{
  justify-content:flex-end;
}
div.container.top{
  align-items:flex-start;
}
div.container.middle{
  align-items:center;
}
div.container.bottom{
  align-items:flex-end;
}
div.container.wrap{
  flex-wrap:wrap;
}

/***************
 * HEAD TITLES *
 ***************/
h1, h2, h3, h4, h5, h6{
  margin:0em;
  padding:0.1em;
  margin-top:0.2em;
  font-weight:bold;
}
h1 {
  font-size:3em;
  color:var(--magenta);
}
h2 {
  font-size:2em;
  color:var(--green);
}
h3 {
  font-size:1.5em;
  color:var(--green);
}
h4 {
  font-size:1em;
  color:var(--green);
}
h5 {
  font-size:0.8em;
  color:var(--green);
}
h6 {
  font-size:0.6em;
  color:var(--green);
}

/*************
 * SUBTITLES *
 *************/
h1.subtitle, h2.subtitle, h3.subtitle, h4.subtitle, h5.subtitle, h6.subtitle{
  margin:0;
  padding:0;
  font-weight:normal;
}
h1.subtitle{
  font-size:1.5em;
}
h2.subtitle{
  font-size:1em;
}
h3.subtitle{
  font-size:0.75em;
}
h4.subtitle{
  font-size:0.5em;
}
h5.subtitle{
  font-size:0.4em;
}
h6.subtitle{
  font-size:0.3em;
}

hr{
  border:0;
  height:1px;
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--light), rgba(0, 0, 0, 0));
  margin-left:1em;
  margin-right:1em;
  margin-top:0.5em;
  margin-bottom:0.5em;
}
hr.green{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--green), rgba(0, 0, 0, 0));
}
hr.orange{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--orange), rgba(0, 0, 0, 0));
}
hr.cyan{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--cyan), rgba(0, 0, 0, 0));
}
hr.magenta{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--magenta), rgba(0, 0, 0, 0));
}
hr.dark{
  background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--dark), rgba(0, 0, 0, 0));
}

/*******************
 * TEXT DECORATION *
 *******************/
ins{
  text-decoration-line:underline;
  text-decoration-color:var(--light);
  text-decoration-style:solid;
}
/* Line */
ins.top{
  text-decoration-line:overline;
}
ins.top.bottom{
  text-decoration-line:overline underline;
}
ins.top.center{
  text-decoration-line:overline line-through;
}
ins.center{
  text-decoration-line:line-through;
}
ins.center.bottom{
  text-decoration-line: line-through underline;
}
ins.top.center.bottom{
  text-decoration-line:overline line-through underline;
}
/* Color */
ins.magenta{
  text-decoration-color:var(--magenta);
}
ins.cyan{
  text-decoration-color:var(--cyan);
}
ins.green {
  text-decoration-color:var(--green);
}
ins.orange {
  text-decoration-color:var(--orange);
}
/* Style */
ins.double{
  text-decoration-style:double;
}
ins.dotted{
  text-decoration-style:dotted;
}
ins.dashed{
  text-decoration-style:dashed;
}
ins.wavy{
  text-decoration-style:wavy;
}

mark{
  background-color:var(--green-1);
  color:var(--dark);
  border-radius:0.2em;
}
mark.magenta{
  background-color:var(--magenta-1);
  color:var(--dark);
}
mark.cyan{
  background-color:var(--cyan-1);
  color:var(--dark);
}
mark.orange{
  background-color:var(--orange-1);
  color:var(--dark);
}
mark.light{
  background-color:var(--light);
  color:var(--dark);
}
mark.dark{
  background-color:var(--dark);
  color:var(--light);
}

p{
  padding-top:0.5em;
  padding-bottom:0.5em;
  padding-left:0.3em;
  padding-right:0.3em;
  margin-top:0.05em;
  margin-bottom:0.05em;
}

/******************
 * HIGHLIGHT CODE *
 ******************/
pre > code{
  /* Geometry */
  padding-top:0.3em;
  padding-bottom:0.3em;
  margin-left:1em;
  margin-right:1em;
  
  /* Theme */
  border-radius:0.3em;
  border-top:0.1em solid var(--light);
  border-bottom:0.1em solid var(--light);
  border-left:none;
  border-right:none;
  background-color:#23241F;
  font-family:'Fira Code', monospace;
}
pre.magenta > code{
  border-top:0.1em solid var(--magenta);
  border-bottom:0.1em solid var(--magenta);
}
pre.cyan > code{
  border-top:0.1em solid var(--cyan);
  border-bottom:0.1em solid var(--cyan);
}
pre.green > code{
  border-top:0.1em solid var(--green);
  border-bottom:0.1em solid var(--green);
}
pre.orange > code{
  border-top:0.1em solid var(--orange);
  border-bottom:0.1em solid var(--orange);
}

table{
  border-collapse:collapse;
}
table > caption{
  font-size:150%;
  padding:0.2em;
  font-weight:bold;
}
table tr > td{
  border-right:0.1em solid var(--light_25);
  padding:0.5em;
  text-align:center;
}
table tr > td:last-child{
  border-right:none;
}
/* Round borders */
table > thead > tr:nth-child(1) > td:nth-child(1){
  border-radius:0.5em 0em 0em 0em;
}
table > thead > tr:nth-child(1) > td:last-child{
  border-radius:0em 0.5em 0em 0em;
}
table > tbody > tr:last-child > td:nth-child(1){
  border-radius:0em 0em 0em 0.5em;
}
table > tbody > tr:last-child > td:last-child{
  border-radius:0em 0em 0.5em 0em;
}
/* Default head theme */
table > thead{
  font-weight:bold;
  border-bottom:0.15em solid var(--light);
}
table > thead > tr > td{
  background-color:var(--dark-2);
}
/* Body structure */
table > tbody > tr > td{
  font-family:'Fira Code', monospace;
  border-bottom:0.1em solid var(--light_25);
}
table > tbody > tr:last-child > td{
  border-bottom:none;
}
/* Default body theme */
table > tbody > tr:nth-child(odd) > td{
  background-color:var(--dark-1_25);
}
table > tbody > tr:nth-child(even) > td{
  background-color:var(--dark-2_25);
}
/* Themes */
table.magenta > thead > tr > td{
  background-color:var(--magenta_75);
}
table.magenta > tbody > tr:nth-child(odd) > td{
  background-color:var(--magenta-1_25);
}
table.magenta > tbody > tr:nth-child(even) > td{
  background-color:var(--magenta-2_25);
}
table.cyan > thead > tr > td{
  background-color:var(--cyan_75);
}
table.cyan > tbody > tr:nth-child(odd) > td{
  background-color:var(--cyan-1_25);
}
table.cyan > tbody > tr:nth-child(even) > td{
  background-color:var(--cyan-2_25);
}
table.green > thead > tr > td{
  background-color:var(--green_75);
}
table.green > tbody > tr:nth-child(odd) > td{
  background-color:var(--green-1_25);
}
table.green > tbody > tr:nth-child(even) > td{
  background-color:var(--green-2_25);
}
table.orange > thead > tr > td{
  background-color:var(--orange_75);
}
table.orange > tbody > tr:nth-child(odd) > td{
  background-color:var(--orange-1_25);
}
table.orange > tbody > tr:nth-child(even) > td{
  background-color:var(--orange-2_25);
}
table.minimal > thead > tr > td,
table.magenta.minimal > thead > tr > td,
table.cyan.minimal > thead > tr > td ,
table.green.minimal > thead > tr > td ,
table.orange.minimal > thead > tr > td{
  background-color:transparent;
}
table.minimal > tbody > tr:nth-child(odd) > td,
table.magenta.minimal > tbody > tr:nth-child(odd) > td,
table.cyan.minimal > tbody > tr:nth-child(odd) > td,
table.green.minimal > tbody > tr:nth-child(odd) > td,
table.orange.minimal > tbody > tr:nth-child(odd) > td{
  background-color:transparent;
}
table.minimal > tbody > tr:nth-child(even) > td,
table.magenta.minimal > tbody > tr:nth-child(even) > td,
table.cyan.minimal > tbody > tr:nth-child(even) > td,
table.green.minimal > tbody > tr:nth-child(even) > td,
table.orange.minimal > tbody > tr:nth-child(even) > td{
  background-color:transparent;
}
table.minimal tr > td,
table.magenta.minimal tr > td,
table.cyan.minimal tr > td,
table.green.minimal tr > td,
table.orange.minimal tr > td{
  border-right:none;
}
table.minimal.magenta > thead{
  border-bottom:0.15em solid var(--magenta);
}
table.minimal.magenta > thead > tr > td{
  color:var(--magenta);
}
table.minimal.magenta > tbody > tr > td{
  border-bottom:0.1em solid var(--magenta_25);
}
table.minimal.cyan > thead{
  border-bottom:0.15em solid var(--cyan);
}
table.minimal.cyan > thead > tr > td{
  color:var(--cyan);
}
table.minimal.cyan > tbody > tr > td{
  border-bottom:0.1em solid var(--cyan_25);
}
table.minimal.green > thead{
  border-bottom:0.15em solid var(--green);
}
table.minimal.green > thead > tr > td{
  color:var(--green);
}
table.minimal.green > tbody > tr > td{
  border-bottom:0.1em solid var(--green_25);
}
table.minimal.orange > thead{
  border-bottom:0.15em solid var(--orange);
}
table.minimal.orange > thead > tr > td{
  color:var(--orange);
}
table.minimal.orange > tbody > tr > td{
  border-bottom:0.1em solid var(--orange_25);
}

/*********
 * LISTS *
 *********/
ul, ol{
  list-style:none;
  --item-color:var(--light);
}
ul > li, ol > li{
  position:relative;
  margin-left:2.5em;
}
ul > li:before, ol > li:before{
  color:var(--item-color);
  text-align:center;
  display:inline-block;
  position:absolute;
  width:2.5em;
  height:1em;
  top:0px;
  left:-2.5em;
}
li:empty:before{
  content:"\00a0";
}
/* Themes */
ul.glow > li:before, ol.glow > li:before,
ul.glow ul > li:before, ul.glow ol > li:before,
ol.glow ol > li:before, ol.glow ul > li:before{
  text-shadow:0px 0px 1px var(--light_75), 0px 0px 0.3em var(--item-color);
}
ul.light, ol.light, ul.light ul, ul.light ol, ol.light ol, ol.light ul{
  --item-color:var(--light);
}
ul.magenta, ol.magenta, ul.magenta ul, ul.magenta ol, ol.magenta ol, ol.magenta ul{
  --item-color:var(--magenta);
}
ul.cyan, ol.cyan, ul.cyan ul, ul.cyan ol, ol.cyan ol, ol.cyan ul{
  --item-color:var(--cyan);
}
ul.green, ol.green, ul.green ul, ul.green ol, ol.green ol, ol.green ul{
  --item-color:var(--green);
}
ul.orange, ol.orange, ul.orange ul, ul.orange ol, ol.orange ol, ol.orange ul{
  --item-color:var(--orange);
}
ul > li.glow:before, ol > li.glow:before{
  text-shadow:0px 0px 1px var(--light_75), 0px 0px 0.3em var(--item-color);
}
ul > li.light:before, ol > li.light:before{
  --item-color:var(--light);
}
ul > li.magenta:before, ol > li.magenta:before{
  --item-color:var(--magenta);
}
ul > li.cyan:before, ol > li.cyan:before{
  --item-color:var(--cyan);
}
ul > li.green:before, ol > li.green:before{
  --item-color:var(--green);
}
ul > li.orange:before, ol > li.orange:before{
  --item-color:var(--orange);
}
/* Unordered */
ul{
  --item-type: "\25cf"; /* DEFAULT item-circle */
}
ul.item-circle, ul.item-circle ul, ul > li.item-circle:before {--item-type: "\25cf";}
ul.item-triangle, ul.item-triangle ul, ul > li.item-triangle:before {--item-type: "\25b8";}
ul.item-square, ul.item-square ul, ul > li.item-square:before {--item-type: "\25fe";}
ul.item-check, ul.item-check ul, ul > li.item-check:before {--item-type: "\2714";}
ul.item-cross, ul.item-cross ul, ul > li.item-cross:before {--item-type: "\2715";}
ul.item-ring, ul.item-ring ul, ul > li.item-ring:before {--item-type: "\25cb";}
ul.item-arrow, ul.item-arrow ul, ul > li.item-arrow:before {--item-type: "\279c";}
ul.item-arrowhead, ul.item-arrowhead ul, ul > li.item-arrowhead:before {--item-type: "\27a4";}
ul.item-box, ul.item-box ul, ul > li.item-box:before {--item-type: "\2610";}
ul.item-boxcheck, ul.item-boxcheck ul, ul > li.item-boxcheck:before {--item-type: "\2611";}
ul.item-boxcross, ul.item-boxcross ul, ul > li.item-boxcross:before {--item-type: "\2612";}
ul.item-yinyang, ul.item-yinyang ul, ul > li.item-yinyang:before {--item-type: "\262f";}
ul.item-alien, ul.item-alien ul, ul > li.item-alien:before {--item-type: "\1f47d";}
ul.item-star, ul.item-star ul, ul > li.item-star:before {--item-type: "\2605";}
ul.item-moon, ul.item-moon ul, ul > li.item-moon:before {--item-type: "\23fe";}
ul.item-sun, ul.item-sun ul, ul > li.item-sun:before {--item-type: "\2600";}
ul.item-radioactive, ul.item-radioactive ul, ul > li.item-radioactive:before {--item-type: "\2622";}
ul.item-biohazard, ul.item-biohazard ul, ul > li.item-biohazard:before {--item-type: "\2623";}
ul.item-skull, ul.item-skull ul, ul > li.item-skull:before {--item-type: "\2620";}
ul.item-warning, ul.item-warning ul, ul > li.item-warning:before {--item-type: "\1f6c6";}
ul.item-info, ul.item-info ul, ul > li.item-info:before {--item-type: "\1f6c8";}
ul.item-no, ul.item-no ul, ul > li.item-no:before {--item-type: "\1f6c7";}
ul.item-spade, ul.item-spade ul, ul > li.item-spade:before {--item-type: "\2660";}
ul.item-heart, ul.item-heart ul, ul > li.item-heart:before {--item-type: "\2665";}
ul.item-diamond, ul.item-diamond ul, ul > li.item-diamond:before {--item-type: "\2666";}
ul.item-club, ul.item-club ul, ul > li.item-club:before {--item-type: "\2663";}
ul > li:before{
  content:var(--item-type);
  vertical-align:middle;
  transform-origin:49% 70%;
  transition-duration:0.2s;
}
ul > li.rotate:before{
  transform:rotate(90deg);
}
/* Ordered */
ol{
  counter-reset:monokai-list-counter;
}
ol > li{
  counter-increment:monokai-list-counter;
}
ol > li:before{
  content:counter(monokai-list-counter);
  font-family:'Fira Code', monospace;
  font-weight:bold;
  text-align:right;
  width:2.2em;
}

/***************
 * UI ELEMENTS *
 ***************/
monokaiui{
  /*
  - fixed click caption area for all UI elements
  - allow multiple bootstraps interoperability
  - improve modularity for common UI styles
  - better alignment for all UI elements
  - no wasted space
  */
  display:flex;
  justify-content:center;
  align-items:center;
  /* default variables */
  --corner-round:8px;
  --corner-edgy:0px;
  --corner-NW:var(--corner-round);
  --corner-NE:var(--corner-round);
  --corner-SE:var(--corner-round);
  --corner-SW:var(--corner-round);
  --glow-color:transparent;
  --hamburger-color:var(--light);
  --text-color:var(--light);
  --text-shadow:var(--dark);
}

/*************
 * HAMBURGER *
 *************/
monokaiui > hamburger{
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  width:48px;
  height:48px;
  transition:0.5s;
}
monokaiui > hamburger > div{
  position:relative;
  width:32px;
  height:5px;
  border-radius:48px;
  background-color:var(--hamburger-color);
  transform-origin:50% 50%;
  transition:inherit;
}
monokaiui > hamburger > div:nth-child(1){
  top:5px;
  transform:translate(0em, -11px);
}
monokaiui > hamburger > div:nth-child(3){
  bottom:5px;
  transform:translate(0em, 11px);
}
/* DOTS */
monokaiui > hamburger[shape="dots"]{
  transform:rotate(360deg);
}
monokaiui > hamburger[shape="dots"] > div{
  --dimension:6px;
  width:var(--dimension);
  height:var(--dimension);
}
/* PLUS */
monokaiui > hamburger[shape="plus"]{
  transform:rotate(90deg);
}
monokaiui > hamburger[shape="plus"] > div:nth-child(1){
  transform:rotate(90deg);
}
monokaiui > hamburger[shape="plus"] > div:nth-child(2){
  opacity:0;
  transform:rotate(45deg);
}
monokaiui > hamburger[shape="plus"] > div:nth-child(3){
  transform:rotate(-180deg);
}
/* CROSS */
monokaiui > hamburger[shape="cross"]{
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="cross"] > div:nth-child(1){
  transform:rotate(-45deg) scaleX(1.2);
}
monokaiui > hamburger[shape="cross"] > div:nth-child(2){
  opacity:0;
  transform:rotate(90deg);
}
monokaiui > hamburger[shape="cross"] > div:nth-child(3){
  transform:rotate(45deg) scaleX(1.2);
}
/* TRIANGLE */
monokaiui > hamburger[shape="triangle"]{
  transform:rotate(360deg);
}
monokaiui > hamburger[shape="triangle"] > div:nth-child(1){
  transform:translate(0px, 3px) rotate(120deg) translate(0px, 8px);
}
monokaiui > hamburger[shape="triangle"] > div:nth-child(2){
  transform:translate(0px, 3px) rotate(-120deg) translate(0px, 8px);
}
monokaiui > hamburger[shape="triangle"] > div:nth-child(3){
  transform:translate(0px, 3px) translate(0em, 8px) rotate(180deg);
}
/* CIRCLE */
monokaiui > hamburger[shape="circle"]{
  transform:rotate(-270deg);
}
monokaiui > hamburger[shape="circle"] > div:nth-child(1){
  opacity:0;
  transform:rotate(90deg) scaleX(0.1);
}
monokaiui > hamburger[shape="circle"] > div:nth-child(2){
  width:24px;
  height:24px;
  background-color:transparent;
  border:5px solid var(--hamburger-color);
}
monokaiui > hamburger[shape="circle"] > div:nth-child(3){
  opacity:0;
  transform:rotate(90deg) scaleX(0.1);
}
/* SQUARE */
monokaiui > hamburger[shape="square"]{
  --dimension:22px;
  transform:rotate(270deg);
}
monokaiui > hamburger[shape="square"] > div:nth-child(1){
  transform:translate(0px, 0px);
}
monokaiui > hamburger[shape="square"] > div:nth-child(2){
  width:var(--dimension);
  height:var(--dimension);
  background-color:transparent;
  border-width:5px;
  border-color:transparent var(--hamburger-color);
  border-style:solid;
  border-radius:5px;
}
monokaiui > hamburger[shape="square"] > div:nth-child(3){
  transform:translate(0px, 0px);
}
/* HEART */
monokaiui > hamburger[shape="heart"]{
  transform:rotate(360deg);
}
monokaiui > hamburger[shape="heart"] > div:nth-child(1){
  width:24px;
  height:16px;
  transform:translate(-7px, 8px) rotate(45deg);
}
monokaiui > hamburger[shape="heart"] > div:nth-child(2){
  width:16px;
  height:16px;
  border-radius:0px;
  transform:translate(0px, 4px) rotate(45deg);
}
monokaiui > hamburger[shape="heart"] > div:nth-child(3){
  width:24px;
  height:16px;
  transform:translate(7px, -14px) rotate(-45deg);
}
/* LEFT ARROW */
monokaiui > hamburger[shape="left-arrow"]{
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="left-arrow"] > div:nth-child(1){
  transform:translate(8px, -6px) rotate(45deg) scaleX(0.7);
}
monokaiui > hamburger[shape="left-arrow"] > div:nth-child(2){
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="left-arrow"] > div:nth-child(3){
  transform:translate(8px, 6px) rotate(-45deg) scaleX(0.7);
}
/* RIGHT ARROW */
monokaiui > hamburger[shape="right-arrow"]{
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="right-arrow"] > div:nth-child(1){
  transform:translate(-8px, -6px) rotate(-45deg) scaleX(0.7);
}
monokaiui > hamburger[shape="right-arrow"] > div:nth-child(2){
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="right-arrow"] > div:nth-child(3){
  transform:translate(-8px, 6px) rotate(45deg) scaleX(0.7);
}
/* UP ARROW */
monokaiui > hamburger[shape="up-arrow"]{
  transform:rotate(270deg);
}
monokaiui > hamburger[shape="up-arrow"] > div:nth-child(1){
  transform:translate(8px, -6px) rotate(45deg) scaleX(0.7);
}
monokaiui > hamburger[shape="up-arrow"] > div:nth-child(2){
  transform: rotate(180deg);
}
monokaiui > hamburger[shape="up-arrow"] > div:nth-child(3){
  transform:translate(8px, 6px) rotate(-45deg) scaleX(0.7);
}
/* DOWN ARROW */
monokaiui > hamburger[shape="down-arrow"]{
  transform:rotate(270deg);
}
monokaiui > hamburger[shape="down-arrow"] > div:nth-child(1){
  transform:translate(-8px, -6px) rotate(-45deg) scaleX(0.7);
}
monokaiui > hamburger[shape="down-arrow"] > div:nth-child(2){
  transform:rotate(180deg);
}
monokaiui > hamburger[shape="down-arrow"] > div:nth-child(3){
  transform:translate(-8px, 6px) rotate(45deg) scaleX(0.7);
}
/* THEMES */
monokaiui > hamburger[color="magenta"]{
  --hamburger-color:var(--magenta);
}
monokaiui > hamburger[color="cyan"]{
  --hamburger-color:var(--cyan);
}
monokaiui > hamburger[color="green"]{
  --hamburger-color:var(--green);
}
monokaiui > hamburger[color="orange"]{
  --hamburger-color:var(--orange);
}
monokaiui > hamburger[color="light"],
monokaiui > hamburger[color="default"]{
  --hamburger-color:var(--light);
}
monokaiui > hamburger[color="dark"]{
  --hamburger-color:var(--dark);
}

/*********
 * GROUP *
 *********/
monokaiui > group{
  display:flex;
  justify-content:center;
  transition-duration:0.2s;
}
monokaiui > group[align="horizontal"]{
  flex-direction:row;
}
monokaiui > group[align="vertical"]{
  flex-direction:column;
}
monokaiui > group[condensed="true"] > monokaiui > *,
monokaiui > group[condensed="true"] > *,
monokaiui > group[fill="true"] > monokaiui > *,
monokaiui > group[fill="true"] > *{
  width:100%;
  height:100%;
}
monokaiui > group[align="horizontal"][condensed="true"] > monokaiui{
  height:inherit;
}
monokaiui > group[align="horizontal"][condensed="true"] > monokaiui:not(:only-child):not(:first-child):not(:last-child){
  --corner-NW:var(--corner-edgy);
  --corner-NE:var(--corner-edgy);
  --corner-SE:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > group[align="horizontal"][condensed="true"] > monokaiui:not(:only-child):first-child{
  --corner-NE:var(--corner-edgy);
  --corner-SE:var(--corner-edgy);
}
monokaiui > group[align="horizontal"][condensed="true"] > monokaiui:not(:only-child):last-child{
  --corner-NW:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):not(:first-child):not(:last-child){
  --corner-NW:var(--corner-edgy);
  --corner-NE:var(--corner-edgy);
  --corner-SE:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):first-child{
  --corner-SE:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):last-child{
  --corner-NW:var(--corner-edgy);
  --corner-NE:var(--corner-edgy);
}
/* Edgy Side */
monokaiui > group[edgySideN="true"] > monokaiui{
  --corner-NW:var(--corner-edgy);
  --corner-NE:var(--corner-edgy);
}
monokaiui > group[edgySideE="true"] > monokaiui{
  --corner-NE:var(--corner-edgy);
  --corner-SE:var(--corner-edgy);
}
monokaiui > group[edgySideS="true"] > monokaiui{
  --corner-SE:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > group[edgySideW="true"] > monokaiui{
  --corner-SW:var(--corner-edgy);
  --corner-NW:var(--corner-edgy);
}

/*********
 * LABEL *
 *********/
monokaiui > label{
  /* geometry */
  position:relative;
  width:inherit;
  top:0px;
  left:0px;
  /* transition */
  transition-duration:0.2s;
  transition-property:color, text-shadow;
  /* default theme */
  color:var(--text-color);
  text-shadow:0px 0px 1px var(--text-shadow);
  word-wrap:break-word;
  white-space:initial;
}
monokaiui > label:empty:before{
  content:"\00a0";
}
monokaiui > label[bold="true"]{
  font-weight:bold;
}
monokaiui > label[bold="false"]{
  font-weight:normal;
}
monokaiui > label[italic="true"]{
  font-style:italic;
}
monokaiui > label[italic="false"]{
  font-style:normal;
}
monokaiui > label[text-wrap="false"]{
  word-wrap:initial;
  white-space:nowrap;
}
monokaiui > label[text-wrap="true"]{
  word-wrap:break-word;
  white-space:initial;
}

monokaiui > label[text-color="dark"]{
  --text-color:var(--dark);
  --text-shadow:var(--light);
}
monokaiui > label[text-color="magenta"]{
  --text-color:var(--magenta);
  --text-shadow:var(--dark);
}
monokaiui > label[text-color="cyan"]{
  --text-color:var(--cyan);
  --text-shadow:var(--dark);
}
monokaiui > label[text-color="green"]{
  --text-color:var(--green);
  --text-shadow:var(--dark);
}
monokaiui > label[text-color="orange"]{
  --text-color:var(--orange);
  --text-shadow:var(--dark);
}
monokaiui > label[text-color="light"],
monokaiui > label[text-color="default"]{
  --text-color:var(--light);
  --text-shadow:var(--dark);
}
monokaiui > label[text-glow]:not([text-glow="default"]):not([disabled]){
  text-shadow:0px 0px 3px var(--text-glow);
}
monokaiui > label[text-glow="dark"]{
  --text-glow:var(--dark);
}
monokaiui > label[text-glow="magenta"]{
  --text-glow:var(--magenta);
}
monokaiui > label[text-glow="cyan"]{
  --text-glow:var(--cyan);
}
monokaiui > label[text-glow="green"]{
  --text-glow:var(--green);
}
monokaiui > label[text-glow="orange"]{
  --text-glow:var(--orange);
}
monokaiui > label[text-glow="light"]{
  --text-glow:var(--light);
}
monokaiui > label[disabled]{
  color:rgba(255,255,255,0);
  -webkit-background-clip:text;
  background-clip:text;
  background-color:hsla(0,0%,100%,0.5);
  text-shadow:-1px -1px 1px hsla(0,0%,0%,0.5);
}

/**********
 * BUTTON *
 **********/
monokaiui > button{
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  cursor:pointer;
  position:relative;
  transition-duration:0.2s;
  /* generic values */
  /* default theme */
  --background-texture-none:url("");
  --background-texture-dust:var(--dust);
  --background-texture:var(--background-texture-none);
  --background-color:var(--light-1);
  --background-color-hilight:var(--light);
  --text-color:var(--dark);
  --text-shadow:var(--light);
}
monokaiui > button[disabled]{
  cursor:not-allowed;
}
monokaiui > button *{
  cursor:inherit;
}
monokaiui > button > bg{
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:var(--corner-NW) var(--corner-NE) var(--corner-SE) var(--corner-SW);
  position:relative; /* for click effect */
  transition-duration:inherit;
  background-color:var(--background-color);
  background-image:linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                  linear-gradient(to bottom, var(--background-color-hilight), transparent, transparent);
}
monokaiui > button > bg:before{
  opacity:0;
  /* geometry */
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  /* transition */
  transition-duration:inherit;
  transition-timing-function:ease-out;
  background-color:var(--background-color);
  background-image:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent),
                  linear-gradient(to bottom, var(--background-color), transparent, transparent);
}
monokaiui > button:active:not([disabled]) > bg,
monokaiui > button[checked="true"] > bg{
  animation:monokaibutton-checked-remove-border-glitches 0.2s ease-out 0s 1 forwards;
}
@keyframes monokaibutton-checked-remove-border-glitches{
  from {}
  to {
    background-color:transparent;
    background-image:none;}
}
monokaiui > button:active:not([disabled]) > bg:before,
monokaiui > button[checked="true"] > bg:before{
  opacity:1;
}

monokaiui > button > bg:after{
  /* geometry */
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  /* transition */
  transition-duration:inherit;
  transition-timing-function:ease-out;
  background-image:var(--background-texture);
}
monokaiui > button[texture="dust"] > bg:after{
  --background-texture:var(--background-texture-dust);
}

monokaiui > button[checked="false"]:not([glow="default"]) > bg:after,
monokaiui > button[checked="true"]:not([checked-glow="default"]) > bg:after{
  z-index:1;
  box-shadow:0px 0px 20px 2px var(--glow-color),
             0px 0px  4px 1px var(--glow-color) inset;
}

monokaiui > button[checked="false"][glow="light"],
monokaiui > button[checked="true"][checked-glow="light"]{
  --glow-color:var(--light-2);
}
monokaiui > button[checked="false"][glow="magenta"],
monokaiui > button[checked="true"][checked-glow="magenta"]{
  --glow-color:var(--magenta);
}
monokaiui > button[checked="false"][glow="cyan"],
monokaiui > button[checked="true"][checked-glow="cyan"]{
  --glow-color:var(--cyan);
}
monokaiui > button[checked="false"][glow="green"],
monokaiui > button[checked="true"][checked-glow="green"]{
  --glow-color:var(--green);
}
monokaiui > button[checked="false"][glow="orange"],
monokaiui > button[checked="true"][checked-glow="orange"]{
  --glow-color:var(--orange);
}
monokaiui > button[checked="false"][glow="dark"],
monokaiui > button[checked="true"][checked-glow="dark"]{
  --glow-color:black;
}

monokaiui > button[checked="false"][bg="magenta"],
monokaiui > button[checked="true"][checked-bg="magenta"]{
  --background-color:var(--magenta);
  --background-color-hilight:var(--magenta-2);
}

monokaiui > button[checked="false"][bg="cyan"],
monokaiui > button[checked="true"][checked-bg="cyan"]{
  --background-color:var(--cyan);
  --background-color-hilight:var(--cyan-2);
}

monokaiui > button[checked="false"][bg="green"],
monokaiui > button[checked="true"][checked-bg="green"]{
  --background-color:var(--green);
  --background-color-hilight:var(--green-2);
}

monokaiui > button[checked="false"][bg="orange"],
monokaiui > button[checked="true"][checked-bg="orange"]{
  --background-color:var(--orange);
  --background-color-hilight:var(--orange-2);
}

monokaiui > button[checked="false"][bg="dark"],
monokaiui > button[checked="true"][checked-bg="dark"]{
  --background-color:var(--dark-1);
  --background-color-hilight:var(--dark-2);
}

monokaiui > button[checked="false"][bg="light"],
monokaiui > button[checked="true"][checked-bg="light"],
monokaiui > button[checked="false"][bg="default"],
monokaiui > button[checked="true"][checked-bg="default"]{
  --background-color:var(--light-1);
  --background-color-hilight:var(--light);
}

monokaiui > button > bg > monokaiui > label{
  padding-top:0.3em;
  padding-bottom:0.3em;
  padding-left:0.4em;
  padding-right:0.4em;
  font-weight:bold;
}

monokaiui > button:active > bg > monokaiui > label{
  /* geometry */
  top:2px;
  transition-duration:0s;
}

monokaiui > button[text-wrap="true"] > bg > monokaiui > label{
  word-wrap:break-word;
  white-space:initial;
}
monokaiui > button[text-wrap="false"] > bg > monokaiui > label{
  word-wrap:initial;
  white-space:nowrap;
}

monokaiui > button[checked="false"][text-color="dark"] > bg > monokaiui > label,
monokaiui > button[checked="false"][text-color="default"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="dark"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="default"]  > bg > monokaiui > label{
  --text-color:var(--dark);
  --text-shadow:var(--light);
}
monokaiui > button[checked="false"][text-color="magenta"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="magenta"] > bg > monokaiui > label{
  --text-color:var(--magenta);
  --text-shadow:var(--dark);
}
monokaiui > button[checked="false"][text-color="cyan"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="cyan"] > bg > monokaiui > label{
  --text-color:var(--cyan);
  --text-shadow:var(--dark);
}
monokaiui > button[checked="false"][text-color="green"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="green"] > bg > monokaiui > label{
  --text-color:var(--green);
  --text-shadow:var(--dark);
}
monokaiui > button[checked="false"][text-color="orange"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="orange"] > bg > monokaiui > label{
  --text-color:var(--orange);
  --text-shadow:var(--dark);
}
monokaiui > button[checked="false"][text-color="light"] > bg > monokaiui > label,
monokaiui > button[checked="true"][checked-text-color="light"] > bg > monokaiui > label{
  --text-color:var(--light);
  --text-shadow:var(--dark);
}
monokaiui > button[disabled] > bg > monokaiui > label{
  color:transparent;
  background-color:hsla(0,0%,100%,0.5);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:-1px -1px 1px hsla(0,0%,0%,0.5);
}
monokaiui > button[disabled]:active > bg > monokaiui > label {
  top:0px;
}
/* Button group */
monokaiui > group[align="horizontal"][condensed="true"] > monokaiui:not(:only-child) > button > bg{
  height:100%;
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):not(:first-child):not(:last-child) > button > bg{
  background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):first-child > button > bg{
  background-image:linear-gradient(to bottom, var(--background-color), rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}
monokaiui > group[align="vertical"][condensed="true"] > monokaiui:not(:only-child):last-child > button > bg{
  background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}

/* Button edgy corners */
monokaiui > button[edgyNW] > bg{
  --corner-NW:var(--corner-edgy);
}
monokaiui > button[edgyNE] > bg{
  --corner-NE:var(--corner-edgy);
}
monokaiui > button[edgySE] > bg{
  --corner-SE:var(--corner-edgy);
}
monokaiui > button[edgySW] > bg{
  --corner-SW:var(--corner-edgy);
}
/* Edgy Side */
monokaiui > button[edgySideN="true"]{
  --corner-NW:var(--corner-edgy);
  --corner-NE:var(--corner-edgy);
}
monokaiui > button[edgySideE="true"]{
  --corner-NE:var(--corner-edgy);
  --corner-SE:var(--corner-edgy);
}
monokaiui > button[edgySideS="true"]{
  --corner-SE:var(--corner-edgy);
  --corner-SW:var(--corner-edgy);
}
monokaiui > button[edgySideW="true"]{
  --corner-SW:var(--corner-edgy);
  --corner-NW:var(--corner-edgy);
}

/************
 * CHECKBOX *
 ************/
div.monokaiUI > div.checkbox {
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
div.monokaiUI > div.checkbox.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
div.monokaiUI > div.checkbox > div.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.3em;
  padding: 0.1em;
  transform: rotate(-90deg);
  transition-duration: 0.2s;
  /* Theme */
  background-color: var(--dark-1);
  box-shadow: 0em 0em 0em 1px var(--light_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.checkbox.on > div.box {
  transform: rotate(0deg);
}
div.monokaiUI > div.checkbox > div.box > div.symbol {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 1em;
  transition-duration: inherit;
  /* Theme */
  opacity: 0;
  transform: scale(0.01,0.01);
  color: var(--light);
  background-color: transparent;
}
div.monokaiUI > div.checkbox.on > div.box > div.symbol{
  opacity: 1;
  transform: scale(1,1);
}
div.monokaiUI > div.checkbox > div.label {
  padding-left: 0.2em;
  padding-right: 0.6em;
  background-color: transparent;
}
/* Themes */
div.monokaiUI > div.checkbox.magenta > div.box {
  box-shadow: 0em 0em 0em 1px var(--magenta_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.checkbox.magenta > div.box > div.symbol {
  color: var(--magenta);
}
div.monokaiUI > div.checkbox.cyan > div.box {
  box-shadow: 0em 0em 0em 1px var(--cyan_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.checkbox.cyan > div.box > div.symbol {
  color: var(--cyan);
}
div.monokaiUI > div.checkbox.green > div.box {
  box-shadow: 0em 0em 0em 1px var(--green_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.checkbox.green > div.box > div.symbol {
  color: var(--green);
}
div.monokaiUI > div.checkbox.orange > div.box {
  box-shadow: 0em 0em 0em 1px var(--orange_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.checkbox.orange > div.box > div.symbol {
  color: var(--orange);
}

/****************
 * PROGRESS BAR *
 ****************/
div.monokaiUI > div.progressbar {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  overflow: hidden;
  transition: 0.3s;
  border-radius: 1em;
  user-select: none;
  background-color: var(--dark-2);
  box-shadow: 0em 0em 0em 1px var(--light_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.progressbar > div.filling {
  border-radius: 1em;
  background-color: var(--light-1);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                    linear-gradient(to bottom, var(--light), transparent, transparent);
  text-align: right;
  transition: width 0.2s;
}
div.monokaiUI > div.progressbar > div.filling > span.label {
  color: var(--dark);
  font-size: 100%;
  font-weight: bold;
  text-shadow: 0px 0px 0.1em var(--light);
}
div.monokaiUI > div.progressbar.undefined > div.filling {
  position: relative;
  animation-name: monokaiProgressbar_undefined;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
div.monokaiUI > div.progressbar.undefined > div.filling > span.label {
  color: transparent;
  text-shadow: 0px 0px 0px transparent;
}
@keyframes monokaiProgressbar_undefined {
  0%   {left: -5%; width: 10%;}
  50%  {left: 95%; width: 10%;}
  100% {left: -5%; width: 10%;}
}
/* Themes */
div.monokaiUI > div.progressbar.magenta {
  box-shadow: 0em 0em 0em 1px var(--magenta_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.progressbar.magenta > div.filling {
  background-color: var(--magenta);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                    linear-gradient(to bottom, var(--magenta-2), transparent, transparent);
}
div.monokaiUI > div.progressbar.cyan {
  box-shadow: 0em 0em 0em 1px var(--cyan_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.progressbar.cyan > div.filling {
  background-color: var(--cyan);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                    linear-gradient(to bottom, var(--cyan-2), transparent, transparent);
}
div.monokaiUI > div.progressbar.green {
  box-shadow: 0em 0em 0em 1px var(--green_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.progressbar.green > div.filling {
  background-color: var(--green);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                    linear-gradient(to bottom, var(--green-2), transparent, transparent);
}
div.monokaiUI > div.progressbar.orange {
  box-shadow: 0em 0em 0em 1px var(--orange_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.progressbar.orange > div.filling {
  background-color: var(--orange);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)),
                    linear-gradient(to bottom, var(--orange-2), transparent, transparent);
}

/****************
 * RADIO BUTTON *
 ****************/
div.monokaiUI > div.radiobutton {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
div.monokaiUI > div.radiobutton.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
div.monokaiUI > div.radiobutton > div.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  transition-duration: 0.2s;
  /* Theme */
  background-color: var(--dark-1);
  box-shadow: 0em 0em 0em 1px var(--light_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.radiobutton.on > div.box {
  /* Nothing */
}
div.monokaiUI > div.radiobutton > div.box > div.symbol {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition-duration: inherit;
  /* Theme */
  opacity: 0;
  transform: scale(0.01,0.01);
  background-image: radial-gradient(var(--light), var(--light_25), transparent, transparent);
}
div.monokaiUI > div.radiobutton.on > div.box > div.symbol{
  opacity: 1;
  transform: scale(1.5,1.5);
}
div.monokaiUI > div.radiobutton > div.label {
  padding-left: 0.2em;
  padding-right: 0.6em;
  background-color: transparent;
}
/* Themes */
div.monokaiUI > div.radiobutton.magenta > div.box {
  box-shadow: 0em 0em 0em 1px var(--magenta_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.radiobutton.magenta > div.box > div.symbol {
  background-image: radial-gradient(var(--magenta), var(--magenta_25), transparent, transparent);
}
div.monokaiUI > div.radiobutton.cyan > div.box {
  box-shadow: 0em 0em 0em 1px var(--cyan_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.radiobutton.cyan > div.box > div.symbol {
  background-image: radial-gradient(var(--cyan), var(--cyan_25), transparent, transparent);
}
div.monokaiUI > div.radiobutton.green > div.box {
  box-shadow: 0em 0em 0em 1px var(--green_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.radiobutton.green > div.box > div.symbol {
  background-image: radial-gradient(var(--green), var(--green_25), transparent, transparent);
}
div.monokaiUI > div.radiobutton.orange > div.box {
  box-shadow: 0em 0em 0em 1px var(--orange_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.radiobutton.orange > div.box > div.symbol {
  background-image: radial-gradient(var(--orange), var(--orange_25), transparent, transparent);
}

/***********
 * SPOILER *
 ***********/
div.monokaiUI > div.spoiler > div.content {
  overflow: hidden;
  transition: 0.2s;
  transition-timing-function: ease-out;
  transition-delay: 0.2s;
  max-height: 0;
}
div.monokaiUI > div.spoiler.open > div.content {
  /* max-height: Edited in javascript to preserve the fluidity of the animation */
}
/* HR elements */
div.monokaiUI > div.spoiler > div:nth-child(1) > hr,
div.monokaiUI > div.spoiler > div:last-child > hr {
  margin: 0;
  opacity: 0;
  width: 1%;
  transition: 0.5s;
  transition-delay: 0.2s;
  transition-timing-function: linear;
}
div.monokaiUI > div.spoiler.cutting > div:nth-child(1) > hr,
div.monokaiUI > div.spoiler.cutting > div:last-child > hr {
  opacity: 1;
  width: 100%;
  transition: 0.1s;
  transition-delay: 0s;
}

/**********
 * SWITCH *
 **********/
div.monokaiUI > div.switch {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  --height: 1.5em;
  cursor: pointer;
}
div.monokaiUI > div.switch.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
div.monokaiUI > div.switch > div.hole {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Geometry */
  height: 1em;
  width: 2.5em;
  border-radius: 1em;
  background-color: var(--dark-2);
  box-shadow: 0em 0em 0em 1px var(--light_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.switch > div.hole > div.ball {
  position: relative;
  height: var(--height);
  width: var(--height);
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transform: translateX(-0.5em);
  border-radius: 50%;
  background-color: var(--light-1);
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)),
                    linear-gradient(to bottom, var(--light), transparent, transparent);
  box-shadow: 0px -0.4em 0.4em 0.1em rgba(0,0,0,0.3) inset;
  
}
div.monokaiUI > div.switch.on > div.hole > div.ball {
  background-color: var(--light);
  transform: translateX(0.5em);
}
/* Themes */
div.monokaiUI > div.switch.magenta > div.hole {
  box-shadow: 0em 0em 0em 1px var(--magenta_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.switch.on.magenta > div.hole > div.ball {
  background-color: var(--magenta);
}
div.monokaiUI > div.switch.cyan > div.hole {
  box-shadow: 0em 0em 0em 1px var(--cyan_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.switch.on.cyan > div.hole > div.ball {
  background-color: var(--cyan);
}
div.monokaiUI > div.switch.green > div.hole {
  box-shadow: 0em 0em 0em 1px var(--green_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.switch.on.green > div.hole > div.ball {
  background-color: var(--green);
}
div.monokaiUI > div.switch.orange > div.hole {
  box-shadow: 0em 0em 0em 1px var(--orange_25) inset,
              0em 0em 0.3em 0em var(--dark) inset;
}
div.monokaiUI > div.switch.on.orange > div.hole > div.ball {
  background-color: var(--orange);
}

/**************
 * TEXT INPUT *
 **************/
div.monokaiUI > div.textinput {
  position: relative;
  display: flex; /*DEBUG ex flex*/
  justify-content: center;
  align-items: center;
}
div.monokaiUI > div.textinput.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
div.monokaiUI > div.textinput > input {
  display: flex;
  justify-content: center;
  align-items: center;
  /* geometry */
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  /* Theme */
  cursor: inherit;
  border-radius: 0.3em;
  color: var(--light);
  background-color: var(--dark-1);
  box-shadow: 0em 0em 0em 1px var(--light_25) inset,
              0em 0em 0.3em 0.1em var(--dark) inset;
}
div.monokaiUI > div.textinput.text-left > input {
  text-align: left;
}
div.monokaiUI > div.textinput.text-center > input {
  text-align: center;
}
div.monokaiUI > div.textinput.text-right > input {
  text-align: right;
}
/* Input group */
div.monokaiUI > div.textinput.group-left > input {
  height: calc(100% - 0.6em);
  border-radius: 0.3em 0em 0em 0.3em;
}
div.monokaiUI > div.textinput.group-hcenter > input {
  height: calc(100% - 0.6em);
  border-radius: 0em;
}
div.monokaiUI > div.textinput.group-right > input {
  height: calc(100% - 0.6em);
  border-radius: 0em 0.3em 0.3em 0em;
}
div.monokaiUI > div.textinput.group-top > input {
  width: calc(100% - 0.8em);
  border-radius: 0.3em 0.3em 0em 0em;
}
div.monokaiUI > div.textinput.group-vcenter > input {
  width: calc(100% - 0.8em);
  border-radius: 0em;
}
div.monokaiUI > div.textinput.group-bottom > input {
  width: calc(100% - 0.8em);
  border-radius: 0em 0em 0.3em 0.3em;
}
/* Themes */
div.monokaiUI > div.textinput.magenta > input {
  color: var(--magenta);
  box-shadow: 0em 0em 0em 1px var(--magenta_25) inset,
              0em 0em 0.3em 0.1em var(--dark) inset;
}
div.monokaiUI > div.textinput.magenta > input::selection {
  background: var(--magenta-2);
}
div.monokaiUI > div.textinput.cyan > input {
  color: var(--cyan);
  box-shadow: 0em 0em 0em 1px var(--cyan_25) inset,
              0em 0em 0.3em 0.1em var(--dark) inset;
}
div.monokaiUI > div.textinput.cyan > input::selection {
  background: var(--cyan-2);
}
div.monokaiUI > div.textinput.green > input {
  color: var(--green);
  box-shadow: 0em 0em 0em 1px var(--green_25) inset,
              0em 0em 0.3em 0.1em var(--dark) inset;
}
div.monokaiUI > div.textinput.green > input::selection {
  background: var(--green-2);
}
div.monokaiUI > div.textinput.orange > input {
  color: var(--orange);
  box-shadow: 0em 0em 0em 1px var(--orange_25) inset,
              0em 0em 0.3em 0.1em var(--dark) inset;
}
div.monokaiUI > div.textinput.orange > input::selection {
  background: var(--orange-2);
}

/****************
 * WAITING ICON *
 ****************/
div.monokaiUI > div.waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  --border-color: var(--light_25);
  --ball-1-color: var(--light);
  --ball-2-color: var(--light);
  --ball-3-color: var(--light);
}
div.monokaiUI > div.waiting.in-square {
  border-radius: 0.3em;
  background-color: var(--dark-1_75);
  box-shadow: 0em 0em 0em 1px var(--border-color) inset,
              0em 0em 0.3em 0.3em var(--dark) inset;
}
div.monokaiUI > div.waiting.in-circle {
  border-radius: 50%;
  background-color: var(--dark-1_75);
  box-shadow: 0em 0em 0em 1px var(--border-color) inset,
              0em 0em 0.3em 0.3em var(--dark) inset;
}
div.monokaiUI > div.waiting > div.point {
  --size: 20%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  animation-iteration-count: infinite;
}
div.monokaiUI > div.waiting > div.point:nth-child(1) {
  background-color: var(--ball-1-color);
}
div.monokaiUI > div.waiting > div.point:nth-child(2) {
  background-color: var(--ball-2-color);
}
div.monokaiUI > div.waiting > div.point:nth-child(3) {
  background-color: var(--ball-3-color);
}
/* Clockwise */
div.monokaiUI > div.waiting.animation-clockwise {
  position: relative;
}
div.monokaiUI > div.waiting.animation-clockwise > div.point {
  transform: rotate(-90deg) translate(100%, 0%);
  position: absolute;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-name: monokaiWaiting_clockwise;
}
div.monokaiUI > div.waiting.animation-clockwise > div.point:nth-child(1) {
  /* Nothing */
}
div.monokaiUI > div.waiting.animation-clockwise > div.point:nth-child(2) {
  animation-delay: 0.5s;
}
div.monokaiUI > div.waiting.animation-clockwise > div.point:nth-child(3) {
  animation-delay: 1s;
}
@keyframes monokaiWaiting_clockwise {
  0%   {transform: rotate(-90deg) translate(100%, 0%);}
  100% {transform: rotate(630deg) translate(100%, 0%);}
}
/* Counterclockwise */
div.monokaiUI > div.waiting.animation-counterclockwise {
  position: relative;
}
div.monokaiUI > div.waiting.animation-counterclockwise > div.point {
  transform: rotate(630deg) translate(100%, 0%);
  position: absolute;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-name: monokaiWaiting_counterclockwise;
}
div.monokaiUI > div.waiting.animation-counterclockwise > div.point:nth-child(1) {
  /* Nothing */
}
div.monokaiUI > div.waiting.animation-counterclockwise > div.point:nth-child(2) {
  animation-delay: 0.5s;
}
div.monokaiUI > div.waiting.animation-counterclockwise > div.point:nth-child(3) {
  animation-delay: 1s;
}
@keyframes monokaiWaiting_counterclockwise {
  0%   {transform: rotate(630deg) translate(100%, 0%);}
  100% {transform: rotate(-90deg) translate(100%, 0%);}
}
/* Fingers */
div.monokaiUI > div.waiting.animation-fingers > div.point {
  transform: translate(0%, 50%);
  transform-origin: 50% 50%;
  animation-name: monokaiWaiting_fingers;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
}
div.monokaiUI > div.waiting.animation-fingers > div.point:nth-child(1) {
  /* Nothing */
}
div.monokaiUI > div.waiting.animation-fingers > div.point:nth-child(2) {
  margin: 10%;
  animation-delay: 0.1s;
}
div.monokaiUI > div.waiting.animation-fingers > div.point:nth-child(3) {
  animation-delay: 0.2s;
}
@keyframes monokaiWaiting_fingers {
  0%   {transform: translate(0%, 50%);  animation-timing-function: ease-out;}
  20%  {transform: translate(0%, 50%);  animation-timing-function: ease-out;}
  60%  {transform: translate(0%, -50%); animation-timing-function: ease-in;}
  80%  {transform: translate(0%, -50%); animation-timing-function: ease-out;}
  100% {transform: translate(0%, 50%);  animation-timing-function: ease-out;}
}
/* Hypnosis */
div.monokaiUI > div.waiting.animation-hypnosis {
  position: relative;
}
div.monokaiUI > div.waiting.animation-hypnosis > div.point {
  position: absolute;
  animation-name: monokaiWaiting_hypnosis;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
div.monokaiUI > div.waiting.animation-hypnosis > div.point:nth-child(1) {
  /* pendulum wire */
  background-color: var(--light_50);
  width: 1px;
  height: 55%;
  top: 0%;
  border-radius: 0%;
  transform-origin: 50% 0%;
  transform: rotate(0deg);
}
div.monokaiUI > div.waiting.animation-hypnosis > div.point:nth-child(2) {
  /* pendulum stone */
  width: 22%;
  height: 22%;
  top: 55%;
  border-radius: 0%;
  clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 50% 100%, 0% 25%);
  transform-origin: 50% -255%;
  transform: rotate(0deg);
}
div.monokaiUI > div.waiting.animation-hypnosis > div.point:nth-child(3) {
  opacity: 0;
}
@keyframes monokaiWaiting_hypnosis {
  0%    {transform: rotate(25deg);}
  50%   {transform: rotate(-25deg);}
  100%  {transform: rotate(25deg);}
}
/* Swap */
div.monokaiUI > div.waiting.animation-swap {
  position: relative;
}
div.monokaiUI > div.waiting.animation-swap > div.point {
  position: absolute;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-name: monokaiWaiting_swap;
}
div.monokaiUI > div.waiting.animation-swap > div.point:nth-child(1) {
  opacity: 0;
}
div.monokaiUI > div.waiting.animation-swap > div.point:nth-child(2) {
  animation-delay: 1.66s;
  opacity: 0;
}
div.monokaiUI > div.waiting.animation-swap > div.point:nth-child(3) {
  animation-delay: 3.33s;
  opacity: 0;
}
@keyframes monokaiWaiting_swap {
  0%     {opacity: 1; transform: rotate(0deg)   translate(  0%,  0%);}
  16.67% {opacity: 1; transform: rotate(180deg) translate( 130%, 0%);}
  33.33% {opacity: 1; transform: rotate(180deg) translate( 130%, 0%);}
  50%    {opacity: 1; transform: rotate(360deg) translate(   0%, 0%);}
  66.67% {opacity: 1; transform: rotate(180deg) translate(-130%, 0%);}
  83.33% {opacity: 1; transform: rotate(180deg) translate(-130%, 0%);}
  100%   {opacity: 1; transform: rotate(0deg)   translate(   0%, 0%);}
}
/* Themes */
div.monokaiUI > div.waiting.magenta {
  --ball-1-color: var(--magenta);
  --ball-2-color: var(--magenta);
  --ball-3-color: var(--magenta);
}
div.monokaiUI > div.waiting.cyan {
  --ball-1-color: var(--cyan);
  --ball-2-color: var(--cyan);
  --ball-3-color: var(--cyan);
}
div.monokaiUI > div.waiting.green {
  --ball-1-color: var(--green);
  --ball-2-color: var(--green);
  --ball-3-color: var(--green);
}
div.monokaiUI > div.waiting.orange {
  --ball-1-color: var(--orange);
  --ball-2-color: var(--orange);
  --ball-3-color: var(--orange);
}
div.monokaiUI > div.waiting.border-magenta {
  --border-color: var(--magenta_25);
}
div.monokaiUI > div.waiting.border-cyan {
  --border-color: var(--cyan_25);
}
div.monokaiUI > div.waiting.border-green {
  --border-color: var(--green_25);
}
div.monokaiUI > div.waiting.border-orange {
  --border-color: var(--orange_25);
}

/**********
 * LOADER *
 **********/
monokaiUI > loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  XXdisplay: flex;
  XXjustify-content: center;
  XXalign-items: center;
  background-color: var(--dark_75);
  transition-duration: 0.5s;
}
@supports (backdrop-filter: none){
  monokaiUI > loader{
    backdrop-filter: blur(5px);
  }
}
monokaiui > loader:before {
  content: "";
  /* geometry */
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
  /* Theme */
  border: 8px solid var(--light);
  border-radius: 100%;
  border-top: 8px solid var(--dark);
  border-bottom: 8px solid var(--dark);
  animation: spinner 2s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.text-magenta {
  color: var(--magenta);
}
.text-cyan {
  color: var(--cyan);
}
.text-green {
  color: var(--green);
}
.text-orange {
  color: var(--orange);
}
.text-light {
  color: var(--light);
}

.text-justify {
  text-align: justify;
  text-justify: inter-word;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
              
            
!

JS

              
                /* NEED UPGRADE */
function kill_monokaiLoader(){
  var elements=document.getElementsByTagName('loader');
  function removeElement(e){
    e.remove();
  }
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      element.style.opacity="0";
      setTimeout(removeElement,500,element.parentElement);
      //element.parentElement.remove();
    }
  }
}

function init_monokaiUI_Components(elements=null){
  if(elements==null) elements=document.getElementsByTagName('MONOKAIUI');
  for (let i=0; i<elements.length; i++){
    let element=elements[i];
    if(element.hasAttributes()){ /* monokaiui tag is not initialized */
      let uiname=element.attributes[0].name; /* detect first attribute */
      element.removeAttribute(uiname); /* remove first attribute */
      let outerHTML=element.outerHTML; /* copy innerHTML in variable */
      outerHTML=outerHTML.replace(/monokaiui/i, uiname); /* substitute monokaiui tag name with uiname */
      outerHTML="<monokaiui>"+outerHTML+"</monokaiui>"; /* insert chid into new parent */
      element.outerHTML=outerHTML; /* write element as parent with his child */
    }
  }
}

function init_monokaiGroup(elements=null){
  if(elements==null) elements=document.getElementsByTagName('GROUP');
  let template='';
  for(let i=0; i<elements.length; i++){
    let e=elements[i];
    if(is_monokaiUI_element(e)){
      // Initialize defaults
      if((!monokaiGroup_isVertical(e))&&(!monokaiGroup_isHorizontal(e))) monokaiGroup_setHorizontal(e);
      let condensedValue=monokaiUI_getAttribute(e, "condensed");
      if(condensedValue!="false") monokaiGroup_setCondensed(e,true);
      monokaiGroup_setGap(e, monokaiGroup_getGap(e));
      let fillValue=monokaiUI_getAttribute(e, "fill");
      if(fillValue!="false") monokaiGroup_setFill(e,true);
      monokaiGroup_setEdgySide(e,"N",monokaiGroup_isEdgySide(e,"N"));
      monokaiGroup_setEdgySide(e,"E",monokaiGroup_isEdgySide(e,"E"));
      monokaiGroup_setEdgySide(e,"S",monokaiGroup_isEdgySide(e,"S"));
      monokaiGroup_setEdgySide(e,"W",monokaiGroup_isEdgySide(e,"W"));
    }
  }
}
/* Return true if the group is vertical */
function monokaiGroup_isVertical(eORid){
  if(monokaiUI_getAttribute(eORid, "align")=="vertical") return true;
  else return false;
}
/* Return true if the group is horizontal */
function monokaiGroup_isHorizontal(eORid){
  if(monokaiUI_getAttribute(eORid, "align")=="horizontal") return true;
  else return false;
}
function monokaiGroup_setVertical(eORid){
  monokaiUI_setAttribute(eORid,"align","vertical");
}
function monokaiGroup_setHorizontal(eORid){
  monokaiUI_setAttribute(eORid,"align","horizontal");
}
function monokaiGroup_isCondensed(eORid){
  if(monokaiUI_getAttribute(eORid, "condensed")=="true") return true;
  else return false;
}
function monokaiGroup_setCondensed(eORid, flag){
  monokaiUI_setAttribute(eORid,"condensed", flag);
}
function monokaiGroup_getGap(eORid){
  let gapValue=monokaiUI_getAttribute(eORid, "gap");
  if((gapValue=="")||(gapValue==null)) gapValue="0px";
  return gapValue;
}
function monokaiGroup_setGap(eORid, value){
  monokaiUI_setAttribute(eORid, "gap", value);
  /* Set style! */
  $(eORid).style.gridGap=value;
}
function monokaiGroup_isFill(eORid){
  if(monokaiUI_getAttribute(eORid, "fill")=="true") return true;
  else return false;
}
function monokaiGroup_setFill(eORid, flag){
  monokaiUI_setAttribute(eORid,"fill", flag);
}
function monokaiGroup_isEdgySide(eORid, side){
  side=side.toUpperCase();
  let rawValue=monokaiUI_getAttribute(eORid,"edgySide"+side);
  let value=false;
  if(rawValue=="true") value=true;
  return value;
}
function monokaiGroup_setEdgySide(eORid, side, flag){
  side=side.toUpperCase();
  let e=$(eORid);
  if(flag) monokaiUI_setAttribute(e, "edgySide"+side, "true");
  else monokaiUI_setAttribute(e, "edgySide"+side, "false");
}
function monokaiGroup_switchEdgySide(eORid, side){
  side=side.toUpperCase();
  let value=true;
  if(monokaiGroup_isEdgySide(eORid, side)) value=false;
  monokaiGroup_setEdgySide(eORid, side, value);
}
function monokaiGroup_getChildrens(eORid){
  /* I'm your father */
  /* return array of childs of eORid */
  let childrens=[];
  let monokaiTags=getChildsByTagName($(eORid), "MONOKAIUI");
  for(let i=0; i<monokaiTags.length; i++){
    monokaiTags[i].children[0];
  }
}

/* Initialize label */
function init_monokaiLabel(elements=null){
  if(elements==null) elements=document.getElementsByTagName('LABEL');
  /* Element with no template */
  for(let i=0; i<elements.length; i++){
    let e=elements[i];
    if(is_monokaiUI_element(e)){
      /* default values */
      monokaiLabel_setTextWrap(e,monokaiLabel_getTextWrap(e));
      monokaiLabel_setTextColor(e,monokaiLabel_getTextColor(e));
      monokaiLabel_setTextGlow(e,monokaiLabel_getTextGlow(e));
      monokaiLabel_setTranslate(e,monokaiLabel_getTranslate(e));
      //monokaiLabel_translate(e,"");
    }
  }
}
/* Base translation is english! Then no english words duplicate */
var translations = {
  "Default":"English",
  "Italiano":{
    "GUI for PWA":"GUI per PWA",
    "major alpha update":"Importante aggiornamento alpha",
    "Breaks backwards compatibility":"Rompe la retrocompatibilità",
    "WORK IN PROGRESS":"LAVORI IN CORSO",
    "Single Label":"Singola Label",
    "All MonokaiUI labels are automatically translated via JSON and retain the original text via the \"translate\" attribute.<br>This attribute can be used to translate in run-time without having to restart the program or interface.":"Tutte le etichette MonokaiUI sono tradotte automaticamente tramite JSON e conservano il testo originale tramite l'attributo \"translate\".<br>Tale attributo può essere usato per tradurre in run-time senza dover riavviare il programma o l'interfaccia.",
    "Attributes":"Attributi",
    "Normal":"Normale",
    "Generic":"Generico",
    "Apply":"Applica",
    "false":"falso",
    "true":"vero",
    "default":"predefinito",
    "magenta":"magenta",
    "cyan":"ciano",
    "green":"verde",
    "orange":"arancio",
    "light":"chiaro",
    "dark":"scuro"
  }};

function monokaiLabel_getTranslate(eORid){
  let value=monokaiUI_getAttribute(eORid,"translate");
  if((value=="")||(value==null)) value=$(eORid).innerHTML;
  return value;
}
function monokaiLabel_setTranslate(eORid,value){
  monokaiUI_setAttribute(eORid,"translate",value);
}
function monokaiLabel_translate(eORid,lang=""){
  let key=monokaiUI_getAttribute(eORid,"translate");
  /*if((origin=="")||(origin==null)) {
    origin=$(eORid).innerHTML;
    monokaiUI_setAttribute(eORid,"translate",origin);
  }*/
  let translated="";
  try{
    translated=translations[lang][key];
  }
  catch(error){
    translated=key;
  }
  if(typeof(translated)=="undefined") translated=key;
  $(eORid).innerHTML=translated;
}
function monokaiLabel_getText(eORid){
  return $(eORid).innerHTML;
}
function monokaiLabel_setText(eORid,text){
  $(eORid).innerHTML=text;
}
function monokaiLabel_getTextWrap(eORid){
  let result=true;
  let value=monokaiUI_getAttribute(eORid,"text-wrap");
  if(value=="false") result=false;
  return result;
}
function monokaiLabel_setTextWrap(eORid,flag){
  monokaiUI_setAttribute(eORid,"text-wrap",flag);
}
function monokaiLabel_isBold(eORid){
  let value=monokaiUI_getAttribute(eORid,"bold");
  if((value=="")||(value==null)) value=false;
  return value;
}
function monokaiLabel_setBold(eORid,flag){
  monokaiUI_setAttribute(eORid,"bold",flag);
}
function monokaiLabel_switchBold(eORid){
  let value=!monokaiLabel_isBold(eORid);
  monokaiLabel_setBold(eORid,value);
}
function monokaiLabel_isItalic(eORid){
  let value=monokaiUI_getAttribute(eORid,"italic");
  if((value=="")||(value==null)) value=false;
  return value;
}
function monokaiLabel_setItalic(eORid,flag){
  monokaiUI_setAttribute(eORid,"italic",flag);
}
function monokaiLabel_switchItalic(eORid){
  let value=!monokaiLabel_isItalic(eORid);
  monokaiLabel_setItalic(eORid,value);
}
function monokaiLabel_getTextColor(eORid){
  let result="";
  let value=monokaiUI_getAttribute(eORid, "text-color");
  if((value=="")||(value==null)) value="default";
  return value;
}
function monokaiLabel_setTextColor(eORid,color){
  monokaiUI_setAttribute(eORid,"text-color",color);
}
function monokaiLabel_getTextGlow(eORid){
  let result="";
  let value=monokaiUI_getAttribute(eORid, "text-glow");
  if((value=="")||(value==null)) value="default";
  return value;
}
function monokaiLabel_setTextGlow(eORid,color){
  monokaiUI_setAttribute(eORid,"text-glow",color);
}

/* Initialize button */
function init_monokaiButton(elements=null){
  if(elements==null) elements=document.getElementsByTagName('BUTTON');
  let template='<bg><monokaiui label></monokaiui></bg>';
  for(let i=0; i<elements.length; i++){
    let e=elements[i];
    if(is_monokaiUI_element(e)){
      let userHTML=e.innerHTML;
      e.innerHTML=template;
      /* Init nested element */
      let label=e.getElementsByTagName('MONOKAIUI')[0];
      init_monokaiUI_Components([label]);
      label=e.getElementsByTagName('LABEL')[0];
      label.innerHTML=userHTML;
      init_monokaiLabel([label]);
      //init_monokaiLabel(e.getElementsByTagName('LABEL'));
      //monokaiButton_setLabel(e,userHTML);
      //monokaiLabel_translate(label[0],"Italiano");
      
      /* Background attributes */
      let valueBg=monokaiUI_getAttribute(e,"bg");
      if((valueBg=="")||(valueBg==null)) valueBg="default";
      monokaiUI_setAttribute(e,"bg",valueBg);
      
      let valueCheckedBg=monokaiUI_getAttribute(e,"checked-bg");
      if((valueCheckedBg=="")||(valueCheckedBg==null)) valueCheckedBg=valueBg;
      monokaiUI_setAttribute(e,"checked-bg",valueCheckedBg);
      
      /* Text color attributes */
      let valueTextColor=monokaiUI_getAttribute(e,"text-color");
      if((valueTextColor=="")||(valueTextColor==null)) valueTextColor="default";
      monokaiUI_setAttribute(e,"text-color",valueTextColor);
      
      let valueCheckedTextColor=monokaiUI_getAttribute(e,"checked-text-color");
      if((valueCheckedTextColor=="")||(valueCheckedTextColor==null)) valueCheckedTextColor=valueTextColor;
      monokaiUI_setAttribute(e,"checked-text-color",valueCheckedTextColor);
      
      /* Glow attributes */
      let valueGlow=monokaiUI_getAttribute(e,"glow");
      if((valueGlow=="")||(valueGlow==null)) valueGlow="default";
      monokaiUI_setAttribute(e,"glow",valueGlow);
      
      let valueCheckedGlow=monokaiUI_getAttribute(e,"checked-glow");
      if((valueCheckedGlow=="")||(valueCheckedGlow==null)) valueCheckedGlow=valueGlow;
      monokaiUI_setAttribute(e,"checked-glow",valueCheckedGlow);
      
      monokaiUI_setChecked(e,monokaiUI_isChecked(e));
    }
  }
}
function monokaiButton_getLabel(eORid){
  return $(eORid).getElementsByTagName('LABEL')[0].innerHTML;
}
function monokaiButton_setLabel(eORid,content){
  $(eORid).getElementsByTagName('LABEL')[0].innerHTML=content;
}
/* Return true if checked */
function monokaiButton_isChecked(eORid){
  return monokaiUI_isChecked(eORid);
}
/* Set 'checked' status of button */
function monokaiButton_setChecked(eORid,flag,group=false){
  monokaiUI_setChecked(eORid,flag,group);
}
function monokaiButton_switchChecked(eORid,group=false){
  monokaiUI_switchChecked(eORid,group);
}
function monokaiButton_getBackground(eORid){
  let value=monokaiUI_getAttribute(eORid, "bg");
  if((value=="")||(value==null)) value="default";
  return value;
}
function monokaiButton_setBackground(eORid, theme){
  monokaiUI_setAttribute(eORid, "bg", theme);
}
function monokaiButton_getTextColor(eORid){
  let value=monokaiUI_getAttribute(eORid, "text-color");
  if((value=="")||(value==null)) value="default";
  return value;
}
function monokaiButton_setTextColor(eORid, theme){
  monokaiUI_setAttribute(eORid, "text-color", theme);
}
/* Get true if corner is edgy
eORid: element OR id
corner: "NW" | "NE" | "SE" | "SW" | "N" | "E" | "S" | "W" | "ALL"
return: true | false
*/
function monokaiButton_hasEdgyCorner(eORid, corner){
  let result=false;
  corner=corner.toUpperCase();
  
  let nw=$(eORid).hasAttribute("edgyNW");
  let ne=$(eORid).hasAttribute("edgyNE");
  let se=$(eORid).hasAttribute("edgySE");
  let sw=$(eORid).hasAttribute("edgySW");
  
  switch(corner){
    case 'NW':
    case 'NE':
    case 'SE':
    case 'SW':
      result=$(eORid).hasAttribute("edgy"+corner);
      break;
    case 'N':
      if(nw&&ne) result=true;
      break;
    case 'E':
      if(ne&&se) result=true;
      break;
    case 'S':
      if(se&&sw) result=true;
      break;
    case 'W':
      if(sw&&nw) result=true;
      break;
    case 'ALL':
      if(nw&&ne&&se&&sw) result=true;
      break;
  }
  return result;
}
/* Set/unset edgy corner
eORid: element OR id
corner: "NW" | "NE" | "SE" | "SW" | "N" | "E" | "S" | "W" | "ALL"
flag: true | false
*/
function monokaiButton_setEdgyCorner(eORid, corner, flagEdgy){
  corner=corner.toUpperCase();
  /* null to delete attribute */
  let cornerValue=null;
  /* zero length string to create attribute without value */
  if(flagEdgy==true) cornerValue="";
  
  switch(corner){
    case 'NW':
    case 'NE':
    case 'SE':
    case 'SW':
      monokaiUI_setAttribute(eORid, "edgy"+corner, cornerValue);
      break;
    case 'N':
      monokaiUI_setAttribute(eORid, "edgyNW", cornerValue);
      monokaiUI_setAttribute(eORid, "edgyNE", cornerValue);
      break;
    case 'E':
      monokaiUI_setAttribute(eORid, "edgyNE", cornerValue);
      monokaiUI_setAttribute(eORid, "edgySE", cornerValue);
      break;
    case 'S':
      monokaiUI_setAttribute(eORid, "edgySE", cornerValue);
      monokaiUI_setAttribute(eORid, "edgySW", cornerValue);
      break;
    case 'W':
      monokaiUI_setAttribute(eORid, "edgySW", cornerValue);
      monokaiUI_setAttribute(eORid, "edgyNW", cornerValue);
      break;
    case 'ALL':
      monokaiUI_setAttribute(eORid, "edgyNW", cornerValue);
      monokaiUI_setAttribute(eORid, "edgyNE", cornerValue);
      monokaiUI_setAttribute(eORid, "edgySE", cornerValue);
      monokaiUI_setAttribute(eORid, "edgySW", cornerValue);
      break;
  }
}
/* Switch edgy corner
eORid: element OR id
corner: "NW" | "NE" | "SE" | "SW" | "N" | "E" | "S" | "W" | "ALL"
*/
function monokaiButton_switchEdgyCorner(eORid, corner){
  let value=!monokaiButton_hasEdgyCorner(eORid, corner);
  monokaiButton_setEdgyCorner(eORid, corner, value);
}
/* NEED UPGRADE */
/* Initialize checkbox */
function init_monokaiCheckbox(elements=null){
  if(elements==null) elements=document.getElementsByTagName('CHECKBOX');
  var template='<div class="box"><div class="symbol">✔</div></div><div class="label">&nbsp;</div>';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      var userHTML=element.innerHTML;
      element.innerHTML=template;
      /* Default attributes */
      if(!element.hasAttribute('symbol')){element.setAttribute('symbol','✔');}
      /* Update HTML */
      monokaiCheckbox_setLabel(element,userHTML);
      monokaiCheckbox_setSymbol(element,monokaiCheckbox_getSymbol(element));
    }
  }
}
/* NEED UPGRADE */
function monokaiCheckbox_isChecked(eORid){
  if($(eORid).classList.contains('on'))
  {return true;}
  else{return false;}
}
/* NEED UPGRADE */
function monokaiCheckbox_setChecked(eORid,check){
  if(monokaiCheckbox_isChecked(eORid)!=check)
  {monokaiCheckbox_switchChecked(eORid);}
}
/* NEED UPGRADE */
function monokaiCheckbox_switchChecked(eORid){
  if($(eORid).classList.contains('on'))
  {$(eORid).classList.remove('on');}
  else{$(eORid).classList.add('on');}
}
/* NEED UPGRADE */
function monokaiCheckbox_getLabel(eORid){
  return $(eORid).getElementsByClassName('label')[0].innerHTML;
}
/* NEED UPGRADE */
function monokaiCheckbox_setLabel(eORid,content){
  $(eORid).getElementsByClassName('label')[0].innerHTML=content;
}
/* NEED UPGRADE */
function monokaiCheckbox_getSymbol(eORid){
  return $(eORid).getAttribute('symbol');
}
/* NEED UPGRADE */
function monokaiCheckbox_setSymbol(eORid,text){
  $(eORid).setAttribute('symbol',text);
  $(eORid).getElementsByClassName('symbol')[0].innerHTML=text;
}
/* NEED UPGRADE */
function monokaiCheckbox_click(eORid){
  if(!monokaiUI_isDisabled(eORid))
  {monokaiCheckbox_switchChecked(eORid);}
}

/* Initialize Hamburger Icon */
function init_monokaiHamburger(elements=null){
  if(elements==null) elements=document.getElementsByTagName('HAMBURGER');
  let template='<div></div><div></div><div></div>';
  for(let i=0; i<elements.length; i++){
    let e=elements[i];
    if(is_monokaiUI_element(e)){
      e.innerHTML=template;
    }
  }
}
function monokaiHamburger_getShape(eORid){
  let shapeName = monokaiUI_getAttribute(eORid, "shape");
  if(shape==null) shapeName="";
  return shapeName;
}
function monokaiHamburger_setShape(eORid, shapeName){
  monokaiUI_setAttribute(eORid, "shape", shapeName);
}
function monokaiHamburger_switchShape(eORid, shapeName){
  if(monokaiHamburger_getShape(eORid)!="")
  {monokaiHamburger_setShape(eORid, null);}
  else{monokaiHamburger_setShape(eORid, shapeName);}
}
/* NEED UPGRADE */
/* Initialize progressbar */
function init_monokaiProgressbar(elements=null){
  if(elements==null) elements=document.getElementsByTagName('PROGRESSBAR');
  var template='<div class="filling" style="width:0%;">&nbsp;<span class="label">0%</span>&nbsp;</div>';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      element.innerHTML=template;
      /* Default attributes */
      if(!element.hasAttribute('value')){element.setAttribute('value','0');}
      /* Detect attributes */
      var value=monokaiProgressbar_getValue(element);
      /* Update HTML */
      monokaiProgressbar_setValue(element,value);
    }
  }
}
/* NEED UPGRADE */
/* Returns value or "undefined".
eORid - DOM element OR (string)id of progressbar
Return string value - the percent value without "%" symbol. For example "50".
Return string "undefined" - in case of undefined value.*/
function monokaiProgressbar_getValue(eORid){
  if($(eORid).classList.contains('undefined'))
  {return 'undefined';}
  else{return $(eORid).getAttribute('value');}
}
/* NEED UPGRADE */
/* Set the progressbar value
eORid - DOM element OR (string)id of progressbar
string value - the percent value without "%" symbol. For example "50".
Tip: don't pass value parameter if you want undefined state.*/
function monokaiProgressbar_setValue(eORid,value=null){
  var progressbar=$(eORid);
  var is_undefined=progressbar.classList.contains('undefined');
  /* value must be integer min=0 max=100 */
  if((value)&&(!isNaN(value))&&(parseInt(value)>=0)&&(parseInt(value)<=100)){ /* Remove undefined and Set value */
    if(is_undefined)
    {progressbar.classList.remove('undefined');}
    progressbar.setAttribute('value', value);
    var filling=progressbar.getElementsByClassName('filling')[0];
    filling.setAttribute('style','width:'+value+'%');
    filling.getElementsByClassName('label')[0].innerHTML=value+'%';
  }
  else { /* Set undefined */
    if(!is_undefined){progressbar.classList.add('undefined');}
  }
}
/* NEED UPGRADE */
function monokaiProgressbar_switchUndefined(eORid){
  if($(eORid).classList.contains('undefined'))
  {$(eORid).classList.remove('undefined');}
  else{$(eORid).classList.add('undefined');}
}
/* NEED UPGRADE */
/* Initialize Radio Button */
function init_monokaiRadiobutton(elements=null){
  if(elements==null) elements=document.getElementsByTagName('RADIOBUTTON');
  var template='<div class="box"><div class="symbol"></div></div><div class="label">&nbsp;</div>';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      var userHTML=element.innerHTML;
      element.innerHTML=template;
      /* Update HTML */
      monokaiRadiobutton_setLabel(element,userHTML);
    }
  }
}
/* NEED UPGRADE */
function monokaiRadiobutton_isChecked(eORid){
  if($(eORid).classList.contains('on'))
  {return true;}
  else{return false;}
}
/* NEED UPGRADE */
function monokaiRadiobutton_setChecked(eORid,check){
  if(monokaiRadiobutton_isChecked(eORid)!=check)
  {monokaiRadiobutton_switchChecked(eORid);}
}
/* NEED UPGRADE */
function monokaiRadiobutton_switchChecked(eORid){
  if($(eORid).classList.contains('on'))
  {$(eORid).classList.remove('on');}
  else{$(eORid).classList.add('on');}
}
/* NEED UPGRADE */
function monokaiRadiobutton_getGroup(eORid){
  var element=$(eORid);
  var groupName="";
  if(element.hasAttribute('group')){
    groupName=element.getAttribute('group');
  }
  return groupName;
}
/* NEED UPGRADE */
function monokaiRadiobutton_setGroup(eORid, groupName){
  $(eORid).setAttribute('group', groupName);
}
/* NEED UPGRADE */
function monokaiRadiobutton_getLabel(eORid){
  return $(eORid).getElementsByClassName('label')[0].innerHTML;
}
/* NEED UPGRADE */
function monokaiRadiobutton_setLabel(eORid,content){
  $(eORid).getElementsByClassName('label')[0].innerHTML=content;
}
/* NEED UPGRADE */
function monokaiRadiobutton_getValue(groupName){
  var value="";
  var elements=document.getElementsByClassName('radiobutton');
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if((is_monokaiUI_element(element))&&
       (monokaiRadiobutton_getGroup(element)==groupName)&&
       (monokaiRadiobutton_isChecked(element)==true)
      ){
      value=element.getAttribute("value");
      break;
    }
  }
  return value;
}
/* NEED UPGRADE */
function monokaiRadiobutton_click(eORid){
  if(!monokaiUI_isDisabled(eORid))
  {
    var groupName=monokaiRadiobutton_getGroup(eORid);
    if(groupName!=""){
      /* Set all group OFF */
      var elements=document.getElementsByClassName('radiobutton');
      for(var i=0; i<elements.length; i++){
        var element=elements[i];
        if(is_monokaiUI_element(element)){
          if(monokaiRadiobutton_getGroup(element)==groupName)
          {monokaiRadiobutton_setChecked(element,false);}
        }
      }
      monokaiRadiobutton_setChecked(eORid,true);
    }
  }
}

/* NEED UPGRADE */
/* Initialize invisible clipboard */
function init_Clipboard(){
  var element=document.getElementById('silentClipboard');
  if(element){element.remove();}
  element=document.createElement('INPUT');
  var id_value="silentClipboard";
  var style_value = "position:absolute;top:-100px;left:0px;width:1px;height:1px;z-index:-1;font-size:12px;background-color:transparent;outline:none;border:none;color:transparent;";
  element.setAttribute('id', id_value);
  element.setAttribute('style', style_value);
  document.body.appendChild(element);
  /* LABEL FOR INPUT */
  var label=document.createElement('LABEL');
  label.setAttribute('for', id_value);
  label.setAttribute('style', style_value);
  label.innerHTML="Silent Clipboard";
  document.body.appendChild(label);
}
/* NEED UPGRADE */
function copyToClipboard(text){
  var clipboard=document.getElementById("silentClipboard");
  clipboard.value=text;
  clipboard.select();
  clipboard.setSelectionRange(0, 99999); /* For mobile devices */
  document.execCommand("copy"); /* Copy the text inside the text field */
  clipboard.value=""; /* Reset text field */
}

/* NEED UPGRADE */
/* Initialize spoiler */
function init_monokaiSpoiler(elements=null){
  if(elements==null) elements=document.getElementsByTagName('SPOILER');
  var template='<div class="container center"><hr></div><div class="content"></div><div class="container center"><hr></div>';
  for(var i=0; i<elements.length; i++) {
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      /* Detect content */
      if(element.getElementsByClassName('content').length!=1){
        var content=element.innerHTML;
        element.innerHTML=template;
        element.getElementsByClassName('content')[0].innerHTML=content;
        monokaiSpoiler_updateTheme(element);
        if(monokaiSpoiler_isOpen(element)){monokaiSpoiler_open(element);}
      }
    }
  }
}
/* NEED UPGRADE */
function monokaiSpoiler_open(eORid){
  var element=$(eORid);
  if(!element.classList.contains('open'))
  {element.classList.add('open');}
  var content=element.getElementsByClassName('content')[0];
  content.style.maxHeight=content.scrollHeight+"px";
  element.classList.add("cutting");
  setTimeout(function(){
    if(monokaiSpoiler_isOpen(eORid)){
      content.style.maxHeight='initial';
      element.classList.remove("cutting");
    }
  }, 400);
}
/* NEED UPGRADE */
function monokaiSpoiler_close(eORid){
  var element=$(eORid);
  if(element.classList.contains('open'))
  {element.classList.remove('open');}
  var content=element.getElementsByClassName('content')[0];
  content.style.maxHeight=content.scrollHeight+"px";
  element.classList.add("cutting");
  setTimeout(function(){
    content.style.maxHeight="0px";
    setTimeout(function(){
      element.classList.remove("cutting");
    }, 300);
  }, 100);
}
/* NEED UPGRADE */
function monokaiSpoiler_switch(eORid){
  if(monokaiSpoiler_isOpen(eORid))
  {monokaiSpoiler_close(eORid);}
  else{monokaiSpoiler_open(eORid);}
}
/* NEED UPGRADE */
function monokaiSpoiler_isOpen(eORid){
  if($(eORid).classList.contains('open'))
  {return true;}
  else{return false;}
}
/* NEED UPGRADE */
function monokaiSpoiler_updateTheme(eORid){
  var element=$(eORid);
  /* Detect hr theme */
  var theme='';
  if(element.hasAttribute('hr')){
    theme=element.getAttribute('hr');
    element.firstElementChild.getElementsByTagName('HR')[0].className=theme;
    element.lastElementChild.getElementsByTagName('HR')[0].className=theme;
  }
  else{
    element.firstElementChild.getElementsByTagName('HR')[0].removeAttribute("class");
    element.lastElementChild.getElementsByTagName('HR')[0].removeAttribute("class");
  }
}

/* NEED UPGRADE */
/* Initialize switch */
function init_monokaiSwitch(elements=null){
  if(elements==null) elements=document.getElementsByTagName('SWITCH');
  var template='<div class="hole"><div class="ball"></div></div>';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element))
    {element.innerHTML=template;}
  }
}
/* NEED UPGRADE */
function monokaiSwitch_isOn(eORid){
  if($(eORid).classList.contains('on'))
  {return true;}
  else{return false;}
}
/* NEED UPGRADE */
function monokaiSwitch_switchState(eORid){
  var element=$(eORid);
  if(element.classList.contains('on'))
  {element.classList.remove('on');}
  else{element.classList.add('on');}
}
/* NEED UPGRADE */
function monokaiSwitch_setState(eORid,state){
  if(monokaiSwitch_isOn(eORid)!=state)
  {monokaiSwitch_switchState(eORid);}
}
/* NEED UPGRADE */
function monokaiSwitch_click(eORid){
  if(!monokaiUI_isDisabled(eORid))
  {monokaiSwitch_switchState(eORid);}
}

/* NEED UPGRADE */
/* Initialize textinput */
function init_monokaiTextinput(elements=null){
  if(elements==null) elements=document.getElementsByTagName('TEXTINPUT');
  var template='<input type="text" size="10">';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      element.innerHTML=template;
      /* Default attributes */
      var value='';
      var size='10';
      var id='';
      var disabled=false;
      /* Detect attributes */
      if(element.hasAttribute('value')){value=element.getAttribute('value');}
      if(element.hasAttribute('size')){size=element.getAttribute('size');}
      if(element.hasAttribute('id')){id=element.getAttribute('id');}
      disabled=monokaiUI_isDisabled(element);
      /* Update HTML */
      monokaiTextinput_setValue(element, value);
      monokaiTextinput_setSize(element, size);
      monokaiTextinput_setId(element, "_"+id);
      monokaiUI_setDisabled(element, disabled);
    }
  }
}
/* NEED UPGRADE */
function is_monokaiTextinput(eORid){
  if((is_monokaiUI_element(eORid))&&($(eORid).getElementsByTagName('INPUT').length>0))
  {return true;}
  else{return false;}
}
/* NEED UPGRADE */
function monokaiTextinput_getValue(eORid){
  return $(eORid).getElementsByTagName('INPUT')[0].value;
}
/* NEED UPGRADE */
function monokaiTextinput_setValue(eORid,value){
  $(eORid).getElementsByTagName('INPUT')[0].value=value;
}
/* NEED UPGRADE */
function monokaiTextinput_getSize(eORid){
  return $(eORid).getElementsByTagName('INPUT')[0].size;
}
/* NEED UPGRADE */
function monokaiTextinput_setSize(eORid,size){
  $(eORid).getElementsByTagName('INPUT')[0].setAttribute('size', size);
}
/* NEED UPGRADE */
function monokaiTextinput_getId(eORid){
  return $(eORid).getElementsByTagName('INPUT')[0].id;
}
/* NEED UPGRADE */
function monokaiTextinput_setId(eORid,id){
  $(eORid).getElementsByTagName('INPUT')[0].setAttribute('id', id);
}

/* NEED UPGRADE */
/* Initialize Waiting icon */
function init_monokaiWaiting(elements=null){
  if(elements==null) elements=document.getElementsByTagName('WAITING');
  var template='<div class="point"></div><div class="point"></div><div class="point"></div>';
  for(var i=0; i<elements.length; i++){
    var element=elements[i];
    if(is_monokaiUI_element(element)){
      element.innerHTML=template;
    }
  }
}
/* NEED UPGRADE */
function monokaiWaiting_getAnimation(eORid){
  var currentClasses = $(eORid).classList;
  for(var i=0; i<currentClasses.length; i++){
    if(currentClasses.item(i).includes("animation"))
    {return currentClasses.item(i);}
  }
  return null;
}
/* NEED UPGRADE */
function monokaiWaiting_setAnimation(eORid, animationName){
  var currentClasses=$(eORid).classList;
  for(var i=0; i<currentClasses.length; i++){
    if(currentClasses.item(i).includes("animation"))
    {currentClasses.remove(currentClasses.item(i));}
  }
  if(animationName!=null){$(eORid).classList.add(animationName);}
}

/* Get DOM element
Detect if eORid parameter is DOM element or element's ID.
Return DOM element
Return null if element or ID is invalid
*/
function $(eORid){
  if(typeof eORid=="string")
  {eORid=document.getElementById(eORid);}
  if(eORid){return eORid;}
  else{return null;}
}
/* NEED UPGRADE? */
function getChildsByClassName(parent, className){
  var childs=[];
  var allChilds=parent.children;
  for(var i=0; i<allChilds.length; i++){
    if(allChilds[i].classList.contains(className)){
      childs.push(allChilds[i]);
    }
  }
  return childs;
}
/* NEED UPGRADE? */
function getChildsByTagName(parent, tagName){
  let childs=[];
  let allChilds=parent.children;
  for(let i=0; i<allChilds.length; i++){
    if(allChilds[i].tagName==tagName){
      childs.push(allChilds[i]);
    }
  }
  return childs;
}

/******************************
 * MonokaiUI common functions *
 ******************************/
function is_monokaiUI_element(eORid){
  let e=$(eORid);
  if(e.parentElement.tagName=='MONOKAIUI') return true;
  else return false;
}
/* Get attribute from monokai element
 * return: attribute value
 * return "" when attribute does not have value
 * return null when attribute does not exists
 */
function monokaiUI_getAttribute(eORid, attributeName){
  let attributeValue=null;
  let e=$(eORid);
  if(e.hasAttribute(attributeName)){
    attributeValue=e.getAttribute(attributeName);
    if(attributeValue==null) attributeValue="";
  }
  return attributeValue;
}
/* Set attribute value
 * Create attribute without value if attributeValue=""
 * Delete attribute if attributeValue=null
 */
function monokaiUI_setAttribute(eORid, attributeName, attributeValue){
  let e=$(eORid);
  if(attributeValue==true) attributeValue="true";
  if(attributeValue==false) attributeValue="false";
  if(attributeValue==null) e.removeAttribute(attributeName);
  else e.setAttribute(attributeName, attributeValue);
}
/* COMPONENT DISABLED */
function monokaiUI_isDisabled(eORid){
  return $(eORid).hasAttribute("disabled");
}
function monokaiUI_setDisabled(eORid,flag){
  if(flag) monokaiUI_setAttribute(eORid,"disabled","");
  else monokaiUI_setAttribute(eORid,"disabled",null);
  
  /* Exception for textinput */
  /* NEED UPGRADE */
  if(is_monokaiTextinput(eORid))
  {$(eORid).getElementsByTagName('INPUT')[0].disabled=disable;}
}
function monokaiUI_switchDisabled(eORid){
  monokaiUI_setDisabled(eORid,!monokaiUI_isDisabled(eORid));
}

function monokaiUI_isChecked(eORid){
  let value=monokaiUI_getAttribute(eORid, "checked");
  if(value=="true") value=true;
  else value=false;
  return value;
}
function monokaiUI_setChecked(eORid,flag,group=false){
  let e=$(eORid);
  if(flag) monokaiUI_setAttribute(e, "checked", "true");
  else monokaiUI_setAttribute(e, "checked", "false");
  if(group){
    /* in the <group> tag, set "checked='false'" to all elements with checked attribute */
    /* Make new functions? monokaiUI_getParent(eORid) and monokaiUI_getChilds(eORid) */
    let parent=e.parentElement.parentElement;
    if(parent.tagName=="GROUP"){
      let monokaiTags=getChildsByTagName(parent, "MONOKAIUI");
      for(let i=0; i<monokaiTags.length; i++){
        let monokaiElement=monokaiTags[i].children[0];
        if((e!=monokaiElement)&&(monokaiElement.hasAttribute("checked"))) monokaiUI_setAttribute(monokaiElement, "checked", "false");
      }
    }
  }
}
function monokaiUI_switchChecked(eORid,group=false){
  let newValue=true;
  if(monokaiUI_isChecked(eORid)) newValue=false;
  monokaiUI_setChecked(eORid, newValue, group);
}

function monokaiUI_translate(lang="",elements=null){
  if(elements==null) elements=document.getElementsByTagName('LABEL');
  for(let i=0; i<elements.length; i++){
    let e=elements[i];
    monokaiLabel_translate(e,lang);
  }
}

/* Initialize all elements */
function init_monokaiUI(){
  init_monokaiUI_Components();
  init_monokaiGroup();
  init_monokaiLabel();
  init_monokaiButton();
  //init_monokaiCheckbox();
  init_monokaiHamburger();
  //init_monokaiProgressbar();
  //init_monokaiRadiobutton();
  //init_monokaiSpoiler();
  //init_monokaiSwitch();
  //init_monokaiTextinput();
  //init_monokaiWaiting();
  //init_Clipboard();
  monokaiUI_translate("Italiano");
  kill_monokaiLoader();
}

/* AUTORUN BOOTSTRAP */
window.onload=init_monokaiUI;
//window.addEventListener("load", init_monokaiUI);

/* EXPERIMENTAL MINI FUNCTIONS */
function isTouchScreen(){
  if(navigator.maxTouchPoints>0) return true;
  else return false;
}

function isOrientable(){
  if(typeof window.orientation!=='undefined') return true;
  else return false;
}

function isOnLine(){
  return navigator.onLine;
}
              
            
!
999px

Console