editr.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

body {
  overflow: hidden;
}

/* 
    Textures
*/

[id="1"] {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADJJREFUOE9jDA8P/29oaMhADjh//jwDY0dHx39yNMP0jBrAMBqIDKNhAMoPlOcFSrMzAG7nLlu8G+bJAAAAAElFTkSuQmCC");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;

}

[id="2"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADNJREFUOE9j9PT0/M9AAWAEGcDDw0OWEV++fGEYNWA0DIZLOvD19f3PwcExwHmBLOuhmgCrKEex0FtLIQAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
object-fit: cover;

}

[id="3"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANBJREFUWEftVrEWQDAM1MnGD9n8mtlg95FsJqYYSuQO1fJ07TW9XC9pXNU2cxZw5WVxGN19noAlbnAFYALyVtMwHp5BcdbFsr8qgAZGcTQBOWC51lIIvXijQDIE2Ayu4tOpAjYT1owa/rQC0QmgphWcVj2nFUiGAOsdH39ZgZ9AMAXYMkOJ+HFVDzxGoO673Znw7l/PV0gSdNEJhB5KLW+8pw+gpkRx6kSkSYYGRnE0AfTzYauH9sDdQytNwHI1ux+fgDQi9u2sTFEzrp0wFoEF5tyeUaMzMqsAAAAASUVORK5CYIIA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;

}

[id="4"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAG5JREFUOE9jbPJX/W+jwsdADjhy5xMD4+A2AOREEMDlRbxegGmGhQ02Q3AagK4ZlyFYDYBpfvD6C4OCKA9YLzIb2SVYDVhy/BlYU4ylFANyGCCLw1xEMBopCkSQLcPAAGwBh5xnCAYioQw2OAwAAKSneWF2TERPAAAAAElFTkSuQmCC");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;

}

[id="5"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAL1JREFUWEdjnOSx6D/DAALGQeeAQO0ImobH+qsrUMzHCIEBcwCtLUYPVlhIwENg1AFDJgTQUzF63BLrEbLTwIA5gJDFpIYEySEwYA4g1WJiQ4LoEBh1wGgIDHgITDvRC07YkrzSJLUTnn9+ClafZVGMVR/RuWDAHQBzPrEOIeRzmHlEh8CgcQC6Q3AlCFxxTrUWESwqBswBJGUFPIpJTgPUspjsRDj8HQDzIbFtOnJDZPD2jMj1EaX6Brx3DACes9+BlKvVwAAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;

}

[id="6"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALFJREFUWEftl0EOhTAIRPUaPWFP3mt8E5O64Ie8QWPFWLcN8DoMqGut9bc8+KxpAEopQ3Vore31DgUmQDoFeo+6MaKAFI8eoATkWIoPA6hK2MJeXH6ATh69kW2N5x1UIA0AgXhmpKmRFUgDoILQzW2e8LvAM6U6phPgtAIkvTr/7wP47iZUb257r8bhJlQTDQNQN5y3MW18WIHhAPTJdfUcFbhagOInwJ8CJNld54//HW99A/sBTxqtNwAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
  
}

/* Skipped id 7 */

[id="8"] {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAK9JREFUWEdjbI6R/c8wgIBx0DmgpoydpuHR0vUTxXyMEBgwB9DaYvRghYUEPASGnAPUL78Be8p6AQeYntfLQ1LaoTgE6O4AmIXo3qRbCNDdAf9+vwV7VvMG/oKSZiEw4A7AlaTRo4JmITBoHYDusKTiLwNTDsAcMuqA0RAYDYHREBiwEIBZjF4yEtsyorhFNOAOIKkBiEUxxSFAdQfADKR183zw9owoDVJy9Q947xgAE4XdgWlb6HsAAAAASUVORK5CYIIA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="9"] {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAb9JREFUWEfNlz1OxDAQhWNptQ0H2JZqRQMNRwAajsDeggZuQMctOAI0cARooKOi3SugSF4Rz3OULxpZkVCcFOs4drxv3rz5SYgXTWz+rk332zR7Gy9t1PBmN7fbdPP4nUabt9c/3XT1oXOOhwdoP44NywEgZLL8zCwF4my5GNP6brjfZQRM9AxUByDfCsgm+TRfe/MpfJ/XP00T1AoZ1NzO6RlYDACzvD0fQs/q9iwiQ9zHKLP1MQNLA7B6QTyXtCHL6dIn08ipbTCtFBmYD4CHnBmMlnnq95hyo6AagAerBQKgOKaKnRqQM6O3v5BXQqwO4H2dqqHiGD5qrDa09+tuJYtSPtZ70oLHpBiENkJcDAD68PV3+OQqMaAMqcyY58wXjA5H5D0D1QA8b5MGqNaj9KA9IbLhnDVixIjTCemUEKsDUE/oJSISMLVYSUtOfhl3REy1swNQT/iFf1YVQ6+o3k+7c55QFOgc9Iy9BuiC2QEoEQnSHeJfgEo1ghnUc6WbCasBmBoFXn+gjke+Zj8gA1FzpkfBvwNgImLfX+ps6PtSPhl9GVUHcGMdkXxX6gFLvuX7/MoWQ5YfQqwM4ADxGE162R2WywAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

/* skipped 10 for sake of clarity in editor (lol bad pun) */


[id="11"] {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAHNJREFUOE9jVIlo/89AAWAEGaDmkkiWEbf2zGcYNQBLGGwNkwAHqPeqFwQDFiMQQZo3bYPo8/PCrR9mOFYDYJLIhsEMBBkOMhinAek8EnCbQYpnfkF4AyQH4sNokKFY0wFIAQgga8blmdGEhBSIBFMMHgUAXTVqMR7uNBMAAAAASUVORK5CYIIA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="12"] {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABOFJREFUWEeNV01PHFcQ7F4MKzNrJUQsx7XhT/kOl/BPcssfMDdI5Bu/COQcTcQe2EUClH1RV1f36wFhvELs7Mz76NddVV2jJxdnTaQJPk3tH36pirSmYndEeQ/DFH8xxZ75td2PdURWN/9iyV8OF7KlKq2J6EZFtmytiUjbYLweX3yJbXwQ1/JALABfFEFhLxXNTRmzzWo+GsE2kTUD2Dv6KLqxhVU2TWVic224rWSXx+cWQElA7qaijUFgfdvAU2MbZJwZKCeW7NiwCIRbvPjSk4svsZ6fgGnIm5ziuUAemBXPDUrlBfCpGaxHEqV4NYDj8zNkYGe2iwWe1vd+JluJh2pRW1GZDrtY+GF175sSEnbhAVkJfHNfgdjAQIbK06FoyEBTBGBjn1ZrBx+B1wHmR5x+GEQ2Ig/rewcRNo7NIhX8DgQxq3mOkg4G0Gv129FCWpskzJGIhj0R1PLqH0wfDvZxP0CLQ6nhJhJnWSSTSlacRJ4bxGUgtB+J2sMFq9wXiFVt8dtrD2A238cxrTwJ4lEQzcvD1HtcMTJ2Fy9B5fHqu/P3tc+AjXkKrOe089M7Cl+AMYHaJYfpET05P3OyEVGrm5ufCKALVKaSBAqdSqECUDkeO401S0/OnYY+JAjVZciP+0wpVWQ6DGLC9nS35swuWnE6n+uRvdsdRCcij+t1lgWPnYbBcA/Py1YUsFDJQ2yyDdaoPN05G7pCUBGzzI7UnWEXmTCWVWYhA13cmQWit9O4ZyaaQAjM3qeFHxK1D/G270mXbG1yS/YAvNlnrBeYFCddHFQc8QwLISh+OwL49fCjs52p9qelnOgbKsvrbyP2xD7MAPcsTYVwcXQjnVRHAJmgFZXV9x+DNk4xO9gnW6oOIAOOgfwUqsZJxs2nJkblLdZkAPM5LkPWHdcmxRSiZEJy2+TYkRRNx1coAWTnc+BGm8wGRdp7W+HgmM+DlgyUPlqz4CV02Q1whh8IbwIY9zzCL0SscBtR0I4N3LP5kQGfwFOjO77Hb+N5NDIIClUjeQEKdqFxkobw+oY1g9vopgo9yBK4Unm+SAnw3O6Ct8GNFH2mNJsMw6/Pg5ZVIZvK9vBeNhOR/6AfInp6+Xc/k4rAPYnIMpvOnDbL880+lsLT/WRgo4+Ap6hupdA3vCICGKPTO1y03dnBnH7wGRgtZ2Mv1elfdCHKE2UM1kA/jNqf//yj4johbrztiC8ARfZ7bfEzXGUxMdnzYVqIr+IfI5DXA5jv024xjQmmonLVWo36SRVTChnpHa4s2j67YT9htOWw1/FkZzYgO7BsrG23bd2qo0kRvM6ahHC3boEN48/xxVnrnc/1nsF219tUprZws3Z67y4oRIaEgBHVhq5n4Hs0lNceQZMb9j7cktY3o3Qy1WZTwbL7HS2ynUJwNiqwkPwsr9h0DEMEaggh6dZblTHupSEpzClvYWtatT10v6KsIakm2boly6trhDJQ+6t2W2b8kNSc6AXdsrtqPFe+fG7d7w3LFl0v9H/sEaiSFD7Yf5QgG4QbzExZUqwz9a03nW5aO11j/c5Wui4D4e+XX+H6IbnZhEI/O53Cb3hwHBjeoL79sMlMZ4O/aRlrikGJN6doWHp6+ReO97gydBO4nDB6Ey5alG/NjKq38qitNTOnLZpOmj72nDxAk/8BxWkkNI6CRLAAAAAASUVORK5CYII=");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="13"] {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEftl0sKwCAMBeNle4PSHqHgEXsYS5FsBHlN/CRCXXRTIePkGTAcGyUiomt/v/PWGXOtYA6Q7mzAaoUfYFkDnGKUHXS71BlwD4BOzuaGGRgGgNR/Law24BZAevLuBoYD1NRrC4sNuAWYNglR+msgqEXqQcQFW1uzLkDrycW3oOyxOwAUtlpI1RkoDUwD6FVYnQE3AFrlZRbEGWADZgBo9kv/iw1IC6D99o9T69fxAyaci01twl6CAAAAAElFTkSuQmCC");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="14"] {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQBJREFUOE+NU10LgkAQ9BQCKRQii6AIol4K+gvS//8LvfUQUgQGIQRqzMKe231o+7LHns7Ozs6p1ezQpuMsQJTvO2UZfMc18xvlAlgvd8H1drHA4jAL4klI9bpuKDsBrD89BQASAA6juBthmiyoQxSFupNrPM3gn5kBini+CsqsjdrP87ZqOvFM0Rj8UwXEUgZqNAKKUjgJ4qPOQBaAqQd/KBvIMwGYawMDs7OPlWbAncAAmnCWgkkz8b06bvJ2aE6XU/UWWESTtmTALJIktRyqRxhS3qULGem0PdMaYZC+R8VG4jfAY/+I6OsizYPREGw+vcZHUZLT4H/52nDuE/kLky2YbjxyP0sAAAAASUVORK5CYIIA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="15"] {
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQ5JREFUOE9jPD4p4r+anBgDCNx69ApMIwOYHEwMXQ0jNgP4+fgZPn76iGHY0zdfGYLNRMHi7/7wgGmsBmDoxCEAMhBsAIjhaKQI94KFEhfYBiGWL3CbsHkP7gJi/AwyFARO3PsGpmFhw7imzve/tAg33Az0QINJ7D93H+xKZAASA3sBJIgccMiG4HI6zCAMA9DDA6YQ2QJkNtgA9GgDuQDdZlyugrsAZhPIBaAwgdHIAYacmGDyjG835P0n5E9sKRUeC7BARHc2sgtgrnj54SdGCoV7gVDIYwsXcEL6vyUJHI2gBIIvU8ESEiwPwLyNEoi4bEFOPCCvgQAs8cGj8dq9Z+CUBkr/yLkNxMYXyAB6KrirkPXw4QAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="16"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIhJREFUOE9jZM9Z/Z+BAsAIM+Cnsi1JxrDfPQxWDzaAVM0wm0CG4DXAufIWg5xHGMN8+wtYXYfTAJBGGCDZAGTNIENINsC4fhbYcoFfDmCaZANgTocZpOc0jfQwQA6xxIMGI9oAkP9hAFtiIpgS/TfpwA3Y6HcFIzXCDQDJkJofUDITSdkQTTEAv7Fy4Z5FYKEAAAAASUVORK5CYII=");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="17"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAJJJREFUOE9j9N7w/z8DBYCREgO2HrvMADfAU4GBQYqHeKcEzboMVoxiAEiAGEN2P2JgmL4DhwGEDAFpBgG8BuAyBKaZKAPQDUHWTLQBMEPQNRNtwMZ7DAwqAthjhmAYgDTDADZD8BqArBmXITgNwKYZmyFYDcCnGd0QDAN+/SM+GYPCBMUAUKYgFzAylF2iKDsDAIHrZTO5HBzfAAAAAElFTkSuQmCC");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="18"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIFJREFUOE9j/LyJ4T8DBYAR2QAeH+JM+rIFoQ6vATCF6AZjNQCbotM3ITaZqjMw4DIEqwtANoA0OxZDDNjfi2kIzBVYDQBpgGmG+RZdDMMAbAFIszAgGAuEwoCgAYTCgKABsIDDFQYgeYKBCPMG0ekAORYGTxjgylo4A5G4vIiqCgAJh3ZR4vXYPAAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="20"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGZJREFUOE9j5Klm+M9AAWCEGcDTQpopX2og6sEGkKoZZhXIENoYUJWM3Tttc1HFsboApjnXE1Xx5O0QPrIhOA1A1wwzCmTISDEA5GeyAxGkmaJoJCVBUy8lgmwlNT+gZCZSnI2uFgBttFBxn/KikgAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="23"]{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQtJREFUOE+Fk1ELAUEQx+d06eQoXghJkrxQnn2C+/qeJElCvFCs7tLlNHtmzY3l5mX3bnd+M/OfHScIggTedrzuaKvXZrWT+badOwjwfd9c3Edrs297/QyAzu6hgmFtAkopyAWc3I2GxOoJ5EjUXIDrF7QjmcxodViAM52Nk0FrBDxSJm8AkI50bgCVrpeJxAHkTAGoHFzD8yPNoFQv6vrQUBy05WUO5VIqriyFAhgAlmAz3hE8l6VYReQgCZCQn4B/gmI5jbin41gB6MxbRxpw8QiiASgidoHM5kwR8Q6VhZDbNvp0waqiRTiuy1cbsYW8ffLp8gzMO5DDxC9JgBw0I6JMn48tH2nb/xd0U7XjnLG8hAAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}

[id="24"]{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAARRJREFUOE+FU6sOwkAQvAbVkJQm/ABIDBqFRqIxWL4BU0XST0Kj0Bgk/ABJaUKqSMlcmMt0W8qqu33M7s7uRlmW1XEcu0t5dirzZNH4q522qqpclOd5DU84wEDHZDhyk8HMg9zfV1e+ngFQwQPA6XZ0y+nKOxEEjhpcPAqXjlOfiBIAqNBgBcMbgZoIul6AvtL/VtBg8Pth6QCGgJdod9jWJMuWjD/77gL0LWz26xqME1EdEQxi0TfIIw9MBLsHYBAUEOtsJ4M/yfQAnD97/JVRK2iR2LUHtmQG6ZK1xsjy2AZB7KoTJLRgWbYBtHOZmCCQqDPGfJUX5UQ3EiABQEep4+N9EETvALqo65ztKbN8eyc45w/CAMgtolHQZQAAAABJRU5ErkJgggAA");
  image-rendering: pixelated;
  background-repeat: no-repeat;
background-size:100% 100%;
  object-fit: cover;
}


.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 0px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
html, body{
    height: 100%;
    width: 100%;
}
body{
    background-color: #1d1b31;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.navbar{
      background-color: #1d1b31;
  border: 3px solid #1d1b31;
    width: 1434px;
    border-radius: 0px;
}

.container{
    background-color: #1d1b31;
  border: 3px solid #1d1b31;
    width: 800px;
    border-radius: 0px;
}
.navbar{
    padding: 1em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top: 16px;
}
.btn, input{
    height: 35px;
    padding: 0 1em;
}
.color{
    padding: 0 .25em;
    width: 100px;
    margin: 0 1em;
}

.container{
    display: grid;
    overflow: scroll;
    grid-template-columns: repeat(var(--size), 1fr);
    grid-template-rows: repeat(var(--size), 1fr);
    gap: 1px;
    padding: 0px;
    margin: 0px;
    width: max-content;
}

.container-large{
    height: 1000px;
    width: 1000px;
    display: grid;
    overflow: scroll;
    grid-template-columns: repeat(var(--size), 1fr);
    grid-template-rows: repeat(var(--size), 1fr);
    gap: 1px;
    padding: 0px;
    margin: 0px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height:10px;
  background: #3a365e; 
}

/* Track */
::-webkit-scrollbar-track {
  background: #3a365e; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(83, 83, 83); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(75, 75, 75); 
}


.pixel{
  background-color: #333;
  border-radius: 0px;
  padding:0px;
  margin:0px;
  display:block;
  overflow:hidden;
  float:left;
}

.pixel-small{
  width: 16px;
  height:16px;
}

.pixel-med{
  width: 32px;
  height:32px;
}

.pixel-large{
  width: 64px;
  height:64px;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-list {
  text-align: center;
  display: flex;
  align-items: center;
}

.tg-list-item {
  margin: 0 2em;
}


h4 {
  color: #999;
}

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: 0.8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -0.8em;
}

.tgl-skewed + .tgl-btn {
  overflow: hidden;
  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
  transform: skew(10deg);
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
  background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}
.tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
  transition: all 0.2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
  border: 4px solid #7FC6A6;
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7FC6A6;
}

.tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}