/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'AppButton.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

div.AppButton {
  padding: 0.5em;
  min-width: 2em;
  min-height: 2em;
  border-radius: 1em;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(255, 255, 255, 0.23) 49%,
    rgba(255, 255, 255, 0.14) 100%
  );
  opacity: 1;
  pointer-events: all;
  -webkit-user-select: none;
  user-select: none;
}

div.AppButton.visible {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(255, 255, 255, 0.23) 49%,
    rgba(255, 255, 255, 0.14) 100%
  );
  opacity: 1;
  pointer-events: all;
}

@keyframes openButtonExpand {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div.AppButton.hidden {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.23) 51%,
    rgba(0, 0, 0, 0.18) 100%
  );
  pointer-events: none;
  opacity: 0;
}

@keyframes openButtonCollapse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

div.AppButton.visible:hover,
div.AppButton:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(255, 255, 255, 0.28) 49%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

div.AppButton.hidden:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.28) 51%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

div.AppButton:active,
div.AppButton.visible:active {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.28) 51%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

div.AppButton.hidden:active {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(255, 255, 255, 0.28) 49%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

div.AppButton {
  border: max(1px, 0.025em) #dadada solid;
  padding: 5px 10px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 9pt;
  outline: none;
}

div.AppButton.blue {
  color: white;
  background: #4c8ffb;
  border: max(1px, 0.025em) #3079ed solid;
  box-shadow: inset 0 max(1px, 0.025em) 0 #80b0fb;
}

div.AppButton.blue:hover {
  border: max(1px, 0.025em) #2f5bb7 solid;
  box-shadow:
    0 max(1px, 0.025em) max(1px, 0.025em) #eaeaea,
    inset 0 max(1px, 0.025em) 0 #5a94f1;
  background: #3f83f1;
}

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

div.AppButton.orange {
  color: white;
  border: max(1px, 0.025em) solid #fb8f3d;
  background: -webkit-linear-gradient(top, #fda251, #fb8f3d);
  background: -moz-linear-gradient(top, #fda251, #fb8f3d);
  background: -ms-linear-gradient(top, #fda251, #fb8f3d);
}

div.AppButton.orange:hover {
  border: max(1px, 0.025em) 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 max(1px, 0.025em) #efefef;
}

div.AppButton.orange:active {
  box-shadow: inset 0 max(1px, 0.025em) max(1px, 0.025em) rgba(0, 0, 0, 0.3);
}

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

div.AppButton.red:hover {
  background: -webkit-linear-gradient(top, #dd4b39, #c53727);
  background: -moz-linear-gradient(top, #dd4b39, #c53727);
  background: -ms-linear-gradient(top, #dd4b39, #c53727);
  border: max(1px, 0.025em) solid #af301f;
}

div.AppButton.red:active {
  box-shadow: inset 0 max(1px, 0.025em) max(1px, 0.025em) 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!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'AppCollapsiblePanel.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

div.AppCollapsiblePanel {
  position: fixed;
  left: 0;
  top: 0;
  visibility: visible;
  padding: 0.5em;
  height: 100vh;
  width: 33vw;
  min-width: 33vw;
}

div.AppCollapsiblePanel.visible {
  height: 100vh;
  width: 33vw;
  min-width: 33vw;
  animation-name: panelVisibleAnimation;
  animation-duration: 1s;
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes panelVisibleAnimation {
  from {
    height: 3em;
    min-width: 3em;
    width: 3em;
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    height: 100vh;
    min-width: 33vw;
    width: 33vw;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

html.mobile div.AppCollapsiblePanel,
html.mobile div.AppCollapsiblePanel.visible {
  width: 60vw;
  min-width: 60vw;

  @keyframes panelVisibleAnimation {
    from {
      height: 3em;
      min-width: 3em;
      width: 3em;
      background-color: rgba(0, 0, 0, 0);
    }
    to {
      height: 100vh;
      min-width: 60vw;
      width: 60vw;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}

div.AppCollapsiblePanel.hidden {
  animation-name: panelHiddenAnimation;
  animation-duration: 1s;
  height: 3em;
  height: 3em;
  min-width: 3em;
  width: 3em;
  background-color: rgba(0, 0, 0, 0);
}

@keyframes panelHiddenAnimation {
  from {
    width: 33vw;
    min-height: 100vh;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  to {
    height: 3em;
    min-width: 3em;
    width: 3em;
    background-color: rgba(0, 0, 0, 0);
  }
}
div.AppCollapsiblePanel div.openButton span {
  font-size: 200%;
}

div.AppCollapsiblePanel div.openButton {
  width: 2em;
  height: 2em;
}

div.AppCollapsiblePanel.visible div.openButton {
  animation-name: openButtonExpand;
  animation-duration: 1s;
  transform: rotate(180deg);
}

@keyframes openButtonExpand {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

div.AppCollapsiblePanel.hidden div.openButton {
  animation-name: openButtonCollapse;
  animation-duration: 1s;
  transform: rotate(0deg);
}

@keyframes openButtonCollapse {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

div.AppCollapsiblePanel div.content {
  position: relative;
  margin-top: 1em;
  height: calc(100vh - 5em);
  overflow-y: auto;
  overflow-x: hidden;
}

div.AppCollapsiblePanel.visible div.content {
  animation-name: contentVisible;
  animation-duration: 1s;
  opacity: 1;
}

@keyframes contentVisible {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div.AppCollapsiblePanel.hidden div.content {
  animation-name: contentHidden;
  animation-duration: 1s;
  overflow-x: hidden !important;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes contentHidden {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'AppSlider.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

div.AppSlider {
  display: grid;
  grid-template-columns: minmax(3em, 3em) 2em auto 2em;
  grid-template-rows: auto 3em;
  grid-template-areas: "caption caption caption caption" "value leftMargin slider rightMargin ";
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

div.AppSlider div.caption {
  grid-area: caption;
  place-self: stretch;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.5em;
}

div.AppSlider div.value {
  grid-area: value;
  place-self: stretch;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1em;
}

div.AppSlider div.slider {
  grid-area: slider;
  place-self: stretch;
  margin: 0em;
  background-color: rgba(0, 0, 0, 0.5);
}

div.AppSlider div.sliderRightMargin,
div.AppSlider div.sliderLeftMargin {
  background-color: rgba(0, 0, 0, 0.5);
}

div.AppSlider div.sliderBackground {
  grid-area: slider;
  place-self: stretch;
  padding-top: 0.5em;
  margin: 0;
}

div.AppSlider div.sliderBackground hr {
  border-style: dotted;
  border-color: rgba(255, 255, 255, 0.5);
}

div.AppSlider div.slider div.handle {
  position: relative;
  width: 1em;
  min-width: 1em;
  max-width: 1em;
  height: 1em;
  min-height: 1em;
  max-height: 1em;
  cursor: grab;
  top: 0.5em;
}

div.AppSlider div.slider div.handle:active {
  cursor: grabbing;
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'AppZoomControl.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

.AppZoomControl-button {
  position: fixed;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(255, 255, 255, 0.23) 49%,
    rgba(255, 255, 255, 0.14) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: var(--app-zoom-display);
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.AppZoomControl-zoomIn {
  top: 16px;
}

.AppZoomControl-zoomOut {
  top: 64px; /* 16px + 40px button + 8px gap */
}

.AppZoomControl-button:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(255, 255, 255, 0.28) 49%,
    rgba(255, 255, 255, 0.2) 100%
  );
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

.AppZoomControl-button:active:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.28) 51%,
    rgba(0, 0, 0, 0.1) 100%
  );
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.AppZoomControl-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hide zoom controls when printing */
@media print {
  .AppZoomControl {
    display: none !important;
  }
  #content {
    transform: scale(1) !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: top left !important;
  }
}
/*

     _________________________________     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.source.shared.genxdev.net/
    |  |       `.-`-'--`-'.'      |  |     o---O     allows you to step through Typescript and set
    |-'|        | ,-.-.-. |       |._|     O---o     breakpoints.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'GenXdevAVGCompliance.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

div.GenXdevAVGCompliance {
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #ffeb3b;
  position: fixed;
  bottom: 0;
  font-size: 2vh;
  height: auto;
  color: #000;
  padding: 1rem;
  z-index: 9999;
  cursor: pointer !important;
  cursor: hand !important;
  pointer-events: all !important;
  line-height: normal;
}

@media (orientation: landscape) {

  div.GenXdevAVGCompliance {
    font-size: 2vw;
  }
}

div.GenXdevAVGCompliance.visible {
  display: block;
}

div.GenXdevAVGCompliance.hidden {
  display: none;
}

/* Hide AVG compliance when printing */
@media print {
  .GenXdevAVGCompliance {
    display: none !important;
  }
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'GenXdevBackground.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/
div.GenXdevBackground,
div.GenXdevBackgroundImage,
div.GenXdevBackgroundImageFilter,
div.GenXdevBackground div.content,
div.GenXdevBackground canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

div.GenXdevBackground {
  padding: 0;
  margin: 0;
}

div.GenXdevBackgroundImage {
  overflow: auto;
  background-image: url("../../../../../assets/images/background1.png");
  transition: background-image 10s ease-in-out;
  background-size: cover;
  transform: scale(1.4);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  transform-origin: center 40%;
}

div.GenXdevBackgroundImageFilter {
  background-color:  rgb(255 255 255 / 25%);
}

div.GenXdevBackground div.content {
  overflow: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 0;
  margin: 0;

  scrollbar-base-color: rgba(71, 113, 150, 0.65);
  scrollbar-face-color: rgba(151, 180, 205, 0.65);
  scrollbar-width: auto;
  scrollbar-width: 5em;
  scrollbar-color: rgba(129, 207, 255, 0.75);
}

div.GenXdevBackground canvas {
  padding: 0;
  margin: 0;
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'fileUploader.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

div.file-uploader,
span.file-uploader {
  width: 300px;
  height: 150px;
  border: 2px solid steelblue;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}

div.file-uploader--dragging,
span.file-uploader--dragging {
  background-color: lightblue;
}

div.file-uploader__contents,
span.file-uploader__contents {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

div.file-uploader__file-name,
span.file-uploader__file-name {
  font-weight: 700;
}
button.glassbutton,
span.glassbutton,
div.glassbutton,
a.glassbutton {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;

    padding: 0.5em 1.5em;
    margin: 0.5em;

    cursor: pointer;
    overflow: visible;
    text-overflow: ellipsis;

    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    outline: 0;
}

button.glass,
div.glass,
a.glass,
span.glass {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYwNjc2OCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMyUiIHN0b3AtY29sb3I9IiNiYmJiYmIiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMjglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg4JSIgc3RvcC1jb2xvcj0iIzRiNTA1MSIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iOTclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,
            rgba(96, 103, 104, 0.3) 0%,
            rgba(187, 187, 187, 0.3) 3%,
            rgba(187, 187, 187, 0.3) 27%,
            rgba(0, 0, 0, 0.3) 28%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.3) 73%,
            rgba(75, 80, 81, 0.3) 88%,
            rgba(0, 0, 0, 0.3) 97%,
            rgba(0, 0, 0, 0.3) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom,
            color-stop(0%, rgba(96, 103, 104, 0.3)),
            color-stop(3%, rgba(187, 187, 187, 0.3)),
            color-stop(27%, rgba(187, 187, 187, 0.3)),
            color-stop(28%, rgba(0, 0, 0, 0.3)),
            color-stop(60%, rgba(0, 0, 0, 0.3)),
            color-stop(73%, rgba(0, 0, 0, 0.3)),
            color-stop(88%, rgba(75, 80, 81, 0.3)),
            color-stop(97%, rgba(0, 0, 0, 0.3)),
            color-stop(100%, rgba(0, 0, 0, 0.3)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 3%, rgba(187, 187, 187, 0.3) 27%, rgba(0, 0, 0, 0.3) 28%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3) 73%, rgba(75, 80, 81, 0.3) 88%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 3%, rgba(187, 187, 187, 0.3) 27%, rgba(0, 0, 0, 0.3) 28%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3) 73%, rgba(75, 80, 81, 0.3) 88%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 3%, rgba(187, 187, 187, 0.3) 27%, rgba(0, 0, 0, 0.3) 28%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3) 73%, rgba(75, 80, 81, 0.3) 88%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 3%, rgba(187, 187, 187, 0.3) 27%, rgba(0, 0, 0, 0.3) 28%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3) 73%, rgba(75, 80, 81, 0.3) 88%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* W3C */

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 0.29em rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset;
}

button.glass-sculpted,
div.glass-sculpted,
a.glass-sculpted,
span.glass-sculpted {
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYwNjc2OCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMiUiIHN0b3AtY29sb3I9IiNiYmJiYmIiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjYmJiYmJiIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iODglIiBzdG9wLWNvbG9yPSIjYmJiYmJiIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MiUiIHN0b3AtY29sb3I9IiM0YjUwNTEiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 2%, rgba(187, 187, 187, 0.3) 5%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 47%, rgba(187, 187, 187, 0.3) 88%, rgba(75, 80, 81, 0.3) 92%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(96, 103, 104, 0.3)), color-stop(2%, rgba(187, 187, 187, 0.3)), color-stop(5%, rgba(187, 187, 187, 0.3)), color-stop(10%, rgba(0, 0, 0, 0.3)), color-stop(47%, rgba(0, 0, 0, 0.3)), color-stop(88%, rgba(187, 187, 187, 0.3)), color-stop(92%, rgba(75, 80, 81, 0.3)), color-stop(97%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 2%, rgba(187, 187, 187, 0.3) 5%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 47%, rgba(187, 187, 187, 0.3) 88%, rgba(75, 80, 81, 0.3) 92%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 2%, rgba(187, 187, 187, 0.3) 5%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 47%, rgba(187, 187, 187, 0.3) 88%, rgba(75, 80, 81, 0.3) 92%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 2%, rgba(187, 187, 187, 0.3) 5%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 47%, rgba(187, 187, 187, 0.3) 88%, rgba(75, 80, 81, 0.3) 92%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(96, 103, 104, 0.3) 0%, rgba(187, 187, 187, 0.3) 2%, rgba(187, 187, 187, 0.3) 5%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 47%, rgba(187, 187, 187, 0.3) 88%, rgba(75, 80, 81, 0.3) 92%, rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.3) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d606768', endColorstr='#4d000000', GradientType=0);
    /* IE6-8 */

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 0.29em rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset;
}

div.button:active,
a.button:active,
span.button:active,
button.button:active {
    margin-left: 0.1em;
    margin-right: calc(0.1em*-1);
}

/**
   * Style A
   */
button:active.clear-a,
button:active.red-a,
button:active.green-a,
button:active.blue-a,

span:active.clear-a,
span:active.red-a,
span:active.green-a,
span:active.blue-a,

div:active.clear-a,
a:active.clear-a,
div:active.red-a,
a:active.red-a,
div:active.green-a,
a:active.green-a,
div:active.blue-a,
a:active.blue-a {

    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

button:hover.clear-a,
span:hover.clear-a,
div:hover.clear-a,
a:hover.clear-a {
    color: rgba(255, 255, 255, 0.99);
    text-shadow: 0em 0em 0.1em rgba(255, 255, 255, 0.99), 0em 0em 0.2em rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 6px rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset,
        0 0 0.25em 0.1em rgba(255, 255, 255, 0.75),
        0 0 0.5em 0.1em rgba(255, 255, 255, 0.75) inset;
}

button:active.clear-a,
span:active.clear-a,
div:active.clear-a,
a:active.clear-a {
    color: rgba(0, 0, 0, 1.0);

    border-color: rgba(255, 255, 255, 0.6) !important;
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em 0 0 rgba(255, 255, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 255, 255, 0.75),
        0 0 0.5em 0.1em rgba(255, 255, 255, 0.75) inset !important;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
}


button.red-a,
span.red-a,
div.red-a,
a.red-a {
    color: rgba(255, 200, 200, 0.99);
    background-color: rgba(255, 120, 120, 0.25);
}


button:hover.red-a,
span:hover.red-a,
div:hover.red-a,
a:hover.red-a {
    color: rgba(255, 230, 230, 0.99);
    text-shadow: 0em 0em 0.1em rgba(255, 230, 230, 0.99), 0em 0em 0.20em rgba(255, 200, 200, 0.99);
    border-color: rgba(255, 120, 120, 0.4);
    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 0.30em rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset,
        0 0 0.25em 0.1em rgba(255, 120, 120, 0.75),
        0 0 0.5em 0.1em rgba(255, 120, 120, 0.75) inset;
}

button:active.red-a,
span:active.red-a,
div:active.red-a,
a:active.red-a {

    color: rgba(255, 230, 230, 0.99);
    text-shadow: 0em 0em 0.1em rgba(255, 230, 230, 0.99), 0em 0em 0.20em rgba(255, 200, 200, 0.99);

    border-color: rgba(255, 180, 180, 0.6) !important;
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 120, 120, 0.4) inset,
        0 0.5em 0 0 rgba(255, 120, 120, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 120, 120, 0.75),
        0 0 0.5em 0.1em rgba(255, 120, 120, 0.75) inset !important;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjc4NzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODc4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(255, 120, 120, 1)), color-stop(100%, rgba(255, 120, 120, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* W3C */
}

button.green-a,
span.green-a,
div.green-a,
a.green-a,
button.green-b,
span.green-b,
div.green-b,
a.green-b {
    color: rgba(180, 255, 220, 0.99);
    background-color: rgba(110, 255, 185, 0.25);
}

button:hover.green-a,
span:hover.green-a,
div:hover.green-a,
a:hover.green-a {
    color: rgba(220, 255, 240, 0.99);
    text-shadow: 0em 0em 0.1em rgba(220, 255, 240, 0.99), 0em 0em 4px rgba(180, 255, 220, 0.99);
    border-color: rgba(110, 255, 185, 0.4);
    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 0.30em rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset,
        0 0em 0.25em 0.1em rgba(110, 255, 185, 0.75),
        0 0em 0.5em 0.1em rgba(110, 255, 185, 0.75) inset;
}

button:active.green-a,
span:active.green-a,
div:active.green-a,
a:active.green-a {
    color: rgba(220, 255, 240, 0.99);
    text-shadow: 0em 0em 0.1em rgba(220, 255, 240, 0.99), 0em 0em 0.20em rgba(180, 255, 220, 0.99);

    border-color: rgba(110, 255, 185, 0.6) !important;
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(110, 255, 185, 0.4) inset,
        0 0.5em 0 0 rgba(110, 255, 185, 0.5) inset,
        0 0 0.25em 0.1em rgba(110, 255, 185, 0.75),
        0 0 0.5em 0.1em rgba(110, 255, 185, 0.75) inset !important;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2ZWZmYjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNmVmZmI5IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(110, 255, 185, 1)), color-stop(100%, rgba(110, 255, 185, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* W3C */
}

button.blue-a,
span.blue-a,
div.blue-a,
a.blue-a,
button.blue-b,
span.blue-b,
div.blue-b,
a.blue-b {
    color: rgba(200, 230, 255, 0.99);
    background-color: rgba(120, 200, 255, 0.25);
}

button:hover.blue-a,
span:hover.blue-a,
div:hover.blue-a,
a:hover.blue-a {
    color: rgba(230, 240, 255, 0.99);
    text-shadow: 0em 0em 0.1em rgba(230, 240, 255, 0.99), 0em 0em 0.20em rgba(200, 230, 255, 0.99);
    border-color: rgba(120, 200, 255, 0.4);
    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.1em 0.30em rgba(0, 0, 0, 0.5),
        0 0.5em rgba(0, 0, 0, 0.05) inset,
        0 0em 0.25em 0.1em rgba(120, 200, 255, 0.75),
        0 0em 0.5em 0.1em rgba(120, 200, 255, 0.75) inset;
}

button:active.blue-a,
span:active.blue-a,
div:active.blue-a,
a:active.blue-a {
    color: rgba(230, 240, 255, 0.99);
    text-shadow: 0em 0em 0.1em rgba(230, 240, 255, 0.99), 0em 0em 0.20em rgba(200, 230, 255, 0.99);

    border-color: rgba(120, 200, 255, 0.6) !important;
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(120, 200, 255, 0.4) inset,
        0 0.5em 0 0 rgba(120, 200, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(120, 200, 255, 0.75),
        0 0 0.5em 0.1em rgba(120, 200, 255, 0.75) inset !important;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3OGM4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzhjOGZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(120, 200, 255, 1)), color-stop(100%, rgba(120, 200, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* W3C */
}

/**
   * Style B
   */
div.clear-a,
a.clear-a,
span.clear-a,
button.clear-a,
div.clear-b,
a.clear-b,
span.clear-b,
button.clear-b {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

div:hover.clear-b,
a:hover.clear-b,
span:hover.clear-b,
button:hover.clear-b {
    color: rgba(0, 0, 0, 1.0);
    text-shadow: none;

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em rgba(255, 255, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 255, 255, 0.75);

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
}

div:active.clear-b,
a:active.clear-b,
span:active.clear-b,
button:active.clear-b {

    border-color: rgba(255, 255, 255, 0.6) !important;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em 0 0 rgba(255, 255, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 255, 255, 0.75),
        0 0 0.5em 0.1em rgba(255, 255, 255, 0.75) inset !important;
}

div:hover.red-b,
a:hover.red-b,
span:hover.red-b,
button:hover.red-b {
    text-shadow: 0em 0em 0.1em rgba(255, 160, 160, 0.99), 0em 0em 0.20em rgba(255, 130, 130, 0.99);

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em rgba(255, 180, 180, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 120, 120, 0.75),
        0 0 0.5em 0.1em rgba(255, 120, 120, 0.75) inset;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjc4NzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODc4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(255, 120, 120, 1)), color-stop(100%, rgba(255, 120, 120, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 120, 120, 1) 0%, rgba(255, 120, 120, 0) 100%);
    /* W3C */
}

div:active.red-b,
a:active.red-b,
span:active.red-b,
button:active.red-b {
    text-shadow: 0em 0em 0.1em rgba(255, 230, 230, 0.99), 0em 0em 0.20em rgba(255, 200, 200, 0.99);
    border-color: rgba(255, 180, 180, 0.6) !important;

    box-shadow:
        0 0.05em 0 0 rgba(255, 120, 120, 0.4) inset,
        0 0.5em 0 0 rgba(255, 180, 180, 0.5) inset,
        0 0 0.25em 0.1em rgba(255, 120, 120, 0.75),
        0 0 0.5em 0.1em rgba(255, 120, 120, 0.75) inset !important;
}

div:hover.green-b,
a:hover.green-b,
span:hover.green-b button:hover.green-b {
    text-shadow: 0em 0em 0.1em rgba(170, 255, 190, 0.99), 0em 0em 0.20em rgba(140, 255, 160, 0.99);

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em rgba(110, 255, 185, 0.5) inset,
        0 0 0.25em 0.1em rgba(110, 255, 185, 0.75),
        0 0 0.5em 0.1em rgba(110, 255, 185, 0.75) inset;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2ZWZmYjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNmVmZmI5IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(110, 255, 185, 1)), color-stop(100%, rgba(110, 255, 185, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(110, 255, 185, 1) 0%, rgba(110, 255, 185, 0) 100%);
    /* W3C */
}

div:active.green-b,
a:active.green-b,
span:active.green-b,
button:active.green-b {
    text-shadow: 0em 0em 0.1em rgba(220, 255, 240, 0.99), 0em 0em 0.20em rgba(190, 255, 210, 0.99);
    border-color: rgba(110, 255, 185, 0.6) !important;

    box-shadow:
        0 0.05em 0 0 rgba(110, 255, 185, 0.4) inset,
        0 0.5em 0 0 rgba(110, 255, 185, 0.5) inset,
        0 0 0.25em 0.1em rgba(110, 255, 185, 0.75),
        0 0 0.5em 0.1em rgba(110, 255, 185, 0.75) inset !important;
}

div:hover.blue-b,
a:hover.blue-b,
span:hover.blue-b,
button:hover.blue-b {
    text-shadow: 0em 0em 0.1em rgba(170, 200, 255, 0.99), 0em 0em 0.20em rgba(140, 170, 255, 0.99);

    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0.05em;

    box-shadow:
        0 0.05em 0 0 rgba(255, 255, 255, 0.4) inset,
        0 0.5em rgba(120, 200, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(120, 200, 255, 0.75),
        0 0 0.5em 0.1em rgba(120, 200, 255, 0.75) inset;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3OGM4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzhjOGZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0em, center center, 100%, color-stop(0%, rgba(120, 200, 255, 1)), color-stop(100%, rgba(120, 200, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 100%);
    /* W3C */
}

div:active.blue-b,
a:active.blue-b,
span:active.blue-b,
button:active.blue-b {
    text-shadow: 0em 0em 0.1em rgba(230, 240, 255, 0.99), 0em 0em 0.20em rgba(200, 210, 255, 0.99);
    border-color: rgba(120, 200, 255, 0.6) !important;

    box-shadow:
        0 0.05em 0 0 rgba(120, 200, 255, 0.4) inset,
        0 0.5em 0 0 rgba(120, 200, 255, 0.5) inset,
        0 0 0.25em 0.1em rgba(120, 200, 255, 0.75),
        0 0 0.5em 0.1em rgba(120, 200, 255, 0.75) inset !important;
}
/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi!
    |_.|      (( (*  )(*  )))     |._|      o-O      Welcome in the debugging environment!
    |  |       `.-`-'--`-'.'      |  |     o---O     you can set breakpoints in typescript
    |-'|        | ,-.-.-. |       |._|     O---o     source files.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'shared'
     \  \     ,'           `.    /._/       o-O      Filename    : 'styles.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.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 1;
  vertical-align: baseline;
  background: transparent;

  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Helvetica",
    sans-serif;

  color: black;
}

body {
  line-height: 1;
  overscroll-behavior: none;
}

body.noPhonegap.mobile {
  overflow: hidden;
  overscroll-behavior: none;
}

body.noPhonegap.ios {
  overflow: hidden;
  position: fixed;
}

img {
  pointer-events: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

input,
textarea {
  font-family:
    Verdana,
    Tahoma,
    "Bitstream Vera Sans",
    "DejaVu Sans",
    "Droid Sans",
    Legendum,
    Lucida Grande;
  font-size: inherit;
}

html,
div {
  overscroll-behavior: none;
  touch-action: manipulation !important;
}