/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \\ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi! This code is optimized.
    |_.|      (( (*  )(*  )))     |._|      o-O      Unoptimized website  @ https://source.viral.genxdev.net/
    |  |       `.-`-'--`-'.'      |  |     o---O     allows you to step through Typescript and set
    |-'|        | ,-.-.-. |       |._|     O---o     breakpoints.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'Viral!'
     \  \     ,'           `.    /._/       o-O      Filename    : 'DefaultAppTheme.css'
      \/ `._ /_______________\_,'  /       o---O
        `.| |  |           |  |,'╔═════════════════╡@license genXdev All Rights Reserved╞═╗
          `.|  |           |  |  ║(the "Software") are the exclusive property of genXdev  ║
╔═══════════╡  |           |  ╞══╝Unauthorized copying, distribution, modification, or use╚══════════════════╗
║of this Software, in whole or in part, is strictly prohibited. For permission requests, please contact:     ║
║genXdev, info@genXdev.net Written permission from genXdev is required for any use of this Software,         ║
║including but not limited to, reproduction, adaptation, distribution, performance, display, or the creation ║
║of derivative works based upon the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,║
║EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR║
║PURPOSE, TITLE, AND NON-INFRINGEMENT. IN NO EVENT SHALL GENXDEV BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER  ║
║LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH║
║THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

canvas,
div#appDisplay1,
div#appDisplay2,
div#appDisplay1 > div {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \\ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi! This code is optimized.
    |_.|      (( (*  )(*  )))     |._|      o-O      Unoptimized website  @ https://source.viral.genxdev.net/
    |  |       `.-`-'--`-'.'      |  |     o---O     allows you to step through Typescript and set
    |-'|        | ,-.-.-. |       |._|     O---o     breakpoints.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'Viral!'
     \  \     ,'           `.    /._/       o-O      Filename    : 'ViralApp.css'
      \/ `._ /_______________\_,'  /       o---O
        `.| |  |           |  |,'╔═════════════════╡@license genXdev All Rights Reserved╞═╗
          `.|  |           |  |  ║(the "Software") are the exclusive property of genXdev  ║
╔═══════════╡  |           |  ╞══╝Unauthorized copying, distribution, modification, or use╚══════════════════╗
║of this Software, in whole or in part, is strictly prohibited. For permission requests, please contact:     ║
║genXdev, info@genXdev.net Written permission from genXdev is required for any use of this Software,         ║
║including but not limited to, reproduction, adaptation, distribution, performance, display, or the creation ║
║of derivative works based upon the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,║
║EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR║
║PURPOSE, TITLE, AND NON-INFRINGEMENT. IN NO EVENT SHALL GENXDEV BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER  ║
║LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH║
║THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

input,
input:active,
input:hover,
input:focus {
  outline: none !important;
  font-style: oblique;
}

canvas,
body,
html {
  background-color: #0d364a;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

body {
  background-image: url("../../assets/images/background21_b5543a4a.jpeg") !important;
  background-color: #0d364a !important;
}

canvas {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 43% center;
  background-size: cover;
}

canvas,
canvas:active {
  cursor: crosshair !important;
  outline: none !important;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background-color: transparent;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

canvas#cbg {
  background-color: #0d364a;
}

canvas#cfg {
  background-color: transparent !important;
}

canvas#cef {
  background-color: transparent !important;
}

input {
  resize: none;
}

div#pnOptions {
  position: fixed;
  height: 100%;
  background: rgb(32 131 242 / 45%);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  width: 30%;
  top: 0;
  bottom: 2em;
  right: 0;
  cursor: default !important;
  font-size: 2vw;
  padding: 1.5em;
  box-sizing: border-box;
}

html.portrait div#pnOptions {
  width: 80%;
  right: 10%;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 4vw;
  margin: 6vh 0;
  height:87%;
  border-radius:1em;
}

div#pnOptions a,
div#pnOptions a:visited {
  position: relative;
  display: block;
  padding: 0.5em;
  text-align: left;
  color: white;
  text-decoration: none;
}

div#pnOptions hr {
  margin-bottom: 0.5em;
}

div#pnOptions table {
  width: 100%;
  padding: 0.5em;
  border-top: 1px solid white;
}

div#pnOptions table th {
  text-align: left;
  font-weight: bold;
  height: 1.2em;
  font-size: 0.7em;
  border-top: 1px solid white;
  color: khaki;
}

div#pnOptions table td {
  color: white;
  cursor: pointer;
  height: 1.5em;
}

div#pnOptions table td.selected {
  color: #ff0;
  background-color: khaki;
  color: black;
  text-align: center;
}

a.button {
  color: #444444;
  background: #f3f3f3;
  border: 1px #dadada solid;
  padding: 5px 10px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 9pt;
  outline: none;
}

a.button:hover {
  border: 1px #c6c6c6 solid;
  box-shadow: 1px 1px 1px #eaeaea;
  color: #333333;
  background: #f7f7f7;
}

a.button:active {
  box-shadow: inset 1px 1px 1px #dfdfdf;
}

a.button.blue {
  color: white;
  background: #4c8ffb;
  border: 1px #3079ed solid;
  box-shadow: inset 0 1px 0 #80b0fb;
}

a.button.blue:hover {
  border: 1px #2f5bb7 solid;
  box-shadow:
    0 1px 1px #eaeaea,
    inset 0 1px 0 #5a94f1;
  background: #3f83f1;
}

a.button.blue:active {
  box-shadow: inset 0 2px 5px #2370fe;
}

a.button.orange {
  color: white;
  border: 1px solid #fb8f3d;
  background: -webkit-linear-gradient(top, #fda251, #fb8f3d);
  background: -moz-linear-gradient(top, #fda251, #fb8f3d);
  background: -ms-linear-gradient(top, #fda251, #fb8f3d);
}

a.button.orange:hover {
  border: 1px solid #eb5200;
  background: -webkit-linear-gradient(top, #fd924c, #f9760b);
  background: -moz-linear-gradient(top, #fd924c, #f9760b);
  background: -ms-linear-gradient(top, #fd924c, #f9760b);
  box-shadow: 0 1px #efefef;
}

a.button.orange:active {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

a.button.red {
  background: -webkit-linear-gradient(top, #dd4b39, #d14836);
  background: -moz-linear-gradient(top, #dd4b39, #d14836);
  background: -ms-linear-gradient(top, #dd4b39, #d14836);
  border: 1px solid #dd4b39;
  color: white;
  text-shadow: 0 1px 0 #c04131;
}

a.button.red:hover {
  background: -webkit-linear-gradient(top, #dd4b39, #c53727);
  background: -moz-linear-gradient(top, #dd4b39, #c53727);
  background: -ms-linear-gradient(top, #dd4b39, #c53727);
  border: 1px solid #af301f;
}

a.button.red:active {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  background: -webkit-linear-gradient(top, #d74736, #ad2719);
  background: -moz-linear-gradient(top, #d74736, #ad2719);
  background: -ms-linear-gradient(top, #d74736, #ad2719);
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \\ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi! This code is optimized.
    |_.|      (( (*  )(*  )))     |._|      o-O      Unoptimized website  @ https://source.viral.genxdev.net/
    |  |       `.-`-'--`-'.'      |  |     o---O     allows you to step through Typescript and set
    |-'|        | ,-.-.-. |       |._|     O---o     breakpoints.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'Viral!'
     \  \     ,'           `.    /._/       o-O      Filename    : 'ViralStatsPanel.css'
      \/ `._ /_______________\_,'  /       o---O
        `.| |  |           |  |,'╔═════════════════╡@license genXdev All Rights Reserved╞═╗
          `.|  |           |  |  ║(the "Software") are the exclusive property of genXdev  ║
╔═══════════╡  |           |  ╞══╝Unauthorized copying, distribution, modification, or use╚══════════════════╗
║of this Software, in whole or in part, is strictly prohibited. For permission requests, please contact:     ║
║genXdev, info@genXdev.net Written permission from genXdev is required for any use of this Software,         ║
║including but not limited to, reproduction, adaptation, distribution, performance, display, or the creation ║
║of derivative works based upon the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,║
║EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR║
║PURPOSE, TITLE, AND NON-INFRINGEMENT. IN NO EVENT SHALL GENXDEV BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER  ║
║LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH║
║THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

TABLE#pnStats {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: calc(min(3vw,3vh));
  background-color: rgba(0, 0, 0, 0.5);
}

TABLE#pnStats td {
  width: 1em;
  text-align: right;
  padding-left: 0.5em;
  vertical-align: middle;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

TABLE#pnStats td.spacer {
  width: auto;
  padding-left: 0;
}

TABLE#pnStats td.number {
  width: 1em;
  padding-right: 0.5em;
}