* { margin:0; padding:0; border:0; font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; }
html { height:100%; }
body { line-height:1.6em; font-size:17px; color: #eee; background:#1b1b1b; height:100%; overflow-x: hidden; }
body.gabNoOnloadTransitions * { transition:none !important; }
code, .gabCode { font-family: monospace; white-space: pre-wrap; font-size: .8em; line-height: 1; }
a { color: #00B4DC; transition: color .3s; outline: none; text-decoration: underline; }
a:hover { color: #fff; }
footer a { color: #fff; }
footer a:hover { color: #00B4DC; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h1, h2, h3, h4 {  line-height:1em; margin: .6em 0; animation-name: opac; animation-duration: .33s; color: #fff; letter-spacing: -.024em; } 
p { margin-bottom: 1em; }
hr { border-top:1px dashed #444; margin:0.4em 0; }
table { border-spacing: 0px; border-collapse: separate; width:100%; font-size: .9em; }
th { font-size: 1.2em; }
.gabLinedTable td { border-top: 1px solid #0006; padding: .5em; vertical-align:middle; }
td, th { vertical-align: top; padding: .3em; }
/* i { width: 22px; text-align:center;} */
nav { float:right; line-height: 2em; }
nav a, nav a:link, nav a:visited, nav a:active, nav span { text-decoration: none; color: white; padding: .6em; font-size: 1.1em; }
nav a:hover { color: #00B4DC; }
img { transition: 0.3s; }
img:hover { opacity: 0.7; }
li { margin-bottom:.3em; }
ol, ul { margin: .5em 0 1.5em 1.5em; }
.gabUl ul { list-style: none; /* Remove default bullets - add them again in ::before */ }
.gabUl ul li::before {
  content: "✓";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #b3b3b3;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

textarea { font-size: .8em; }
input, textarea, select { border-radius:3px; margin: .3em 0 1em 0; padding: .8em 1em; }
input[type=text], input[type=password], input[type=email], textarea { width: calc(100% - 1em); }
input:focus { outline: none; border: none; }
textarea:focus { outline: none; border: none; }
button { padding: .6em 1em; border-radius: 3px; background: #00B4DC; font-size: 1em; cursor:pointer; color:#333; transition: .3s; }
button:hover { background: #45D9FA; box-shadow: 0px .25em 1em #0003; }
/*header { width:100%; background: #00B4DC; color: white; -webkit-box-shadow: 0px 5px 10px 0px #ddd; -moz-box-shadow: 0px 5px 10px 0px #ddd; box-shadow: 0px 5px 10px 0px #ddd; }
header h1 { margin: 1.5em 0 1em 0; color: white; font-size: 2.2em; }*/
footer { background: #1d1d1d; color: #eee; }

.gabShadow { box-shadow: 0px 4px 4px 2px rgba(0,0,0,0.06); }
.gabBubble { margin: 0 1em .6em 0; background: #00B4DC; border-radius: 1em 0 1em 0; color: #333; text-align: center; line-height: 1.5em; padding:.6em 0; font-size:.85em; flex-basis: 90px; flex-grow: 0; flex-shrink: 0; transition: background .3s; letter-spacing: -.024em; }
.gabBubble:hover { background: #45D9FA; }

.gabHeroBox { text-align:center; margin:-.5em 0 2.5em 0; }
.gabHeroBox h1 { font-size: 2.5em; margin: 0 0 .2em 0; }
.gabHeroBox p { margin: .3em 0 0 0; }

.gabContainer { max-width:1200px; overflow: hidden; margin-left: calc(50% - 600px); padding:3em 0; }

#gabMenu { z-index: 10; position: absolute; border-radius: 16px; line-height: 2em; right: calc( 50% - 550px ); background: #eee; padding: .9em 1.2em; box-shadow: 0px .6em 1em #0004; text-align: left; }
#gabMenu a { text-decoration:none; color: #444; }
#gabMenu i { width: 1.4em; }
.gabCryptedMail:after { content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); }
.gabHighlightColor { color: #fff; }
.gabHighlightColorDark { color: #00B4DC; }
.gabBgHighlight { background:#fdda99; font-weight:bold; color: #333; padding: 0 2px; }
.gabWidth100 { width: 100%; }
.gabSmallFont { font-size:.85em; }
.gabHalfBox { width:50%; float:left; }
.gabThirdBox { width:33.33%; float:left; }
.gabTwoThirdBox { width:66.66%; float:left; }
.gabCtaButton {
   color: #333;
   background: #ffbf45;
   background: -moz-linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
   background: -webkit-linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
   background: linear-gradient(40deg, #ffbf45 30%, #ffda95 100%);
   padding: .6em 1.2em;
   border-radius: 3px;
   font-weight: bold;
   font-size: 1.1em;
   box-shadow: 0px .6em 1em #0004;
   margin: 1em 0;
   cursor:pointer;
}
.gabToolButton { padding:.4em 0; transition: background .3s; }
.gabToolButton:hover { background:#fff2; }

.gabNarrowOnly { display: none; }
.gabWideOnly { display: block; }
.gabLeftNav { position:fixed; inset:5.8em auto 0 0; font-size: .85em; width:106px; overflow: hidden; text-align: center; line-height:1.5em; }
.gabContent { position:fixed; inset:4.2em 0 0 106px; border-radius:1em 0 0 0; background:#222;overflow: auto; }

@media( max-width:1350px )
{
   .gabContainer { margin: 0 2em; }

   #gabMenu { right:0; border-radius: 16px 0 0 16px; }
 
	header { text-align: center; }
   /*nav { width: 100%; }*/
   #gabMenu { top: 8.5em; }
	.gabHalfBox { width:100%; }
	.gabThirdBox { width:100%; }
   .gabTwoThirdBox { width:100%; }
   .gabIframe{ width:100%; height:550px; }
   .gabNarrowOnly { display: block; }
   .gabWideOnly { display: none; }
   .gabLeftNav { width:40px; }
   .gabContent { left:40px;  }
}

@keyframes opac
{
  from { opacity: 0.4; }
  to { opacity: 1; }
}

   /* The switch - the box around the slider */
   .switch {
     position: relative;
     display: inline-block;
     width: 2.5em;
     height: 1.5em;
   }

   /* Hide default HTML checkbox */
   .switch input {
     opacity: 0;
     width: 0;
     height: 0;
   }

   /* The slider */
   .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
   }

   .slider:before {
     position: absolute;
     content: "";
     height: 1em;
     width: 1em;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
   }

   input:checked + .slider {
     background-color: #00B4DC;
   }

   input:focus + .slider {
     box-shadow: 0 0 1px #00B4DC;
   }

   input:checked + .slider:before {
     -webkit-transform: translateX(1em);
     -ms-transform: translateX(1em);
     transform: translateX(1em);
   }

   /* Rounded sliders */
   .slider.round {
     border-radius: 1.5em;
   }

   .slider.round:before {
     border-radius: 50%;
   }
   
/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.3em;
  background: linear-gradient(135deg,#00B4DC00 calc(50% - 0.5em),#00B4DC 0 calc(50% + 0.5em),#00B4DC00 0) right/300% 100%;
  animation: l22 2s infinite;
}
.loader::before {
  content: "Loading...";
  color: #fff0;
  padding: 0 5px;
  background: inherit;
  background-image: linear-gradient(135deg,#fff calc(50% - 0.5em),#fff 0 calc(50% + 0.5em),#fff 0);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l22{
  100%{background-position: left}
}

/* click popup */
.click-bubble
{
   position: fixed;
   pointer-events: none;
   font-size:2em;
   /*background: #eee;
   color:#333;
   padding: .3em;
   border-radius: .8em;
   font-size:.85em;
   box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.2 );*/
   animation: float-up 2s forwards;
   z-index: 9999;
}
@keyframes float-up
{
   0% { transform: translate( -50%, 0 ); opacity: 1; }
   100% { transform: translate( -50%, -30px ); opacity: 0; }
}