body {
  background-color:#222
}
.button.icon {
  padding-left:1.75em
}
#header {
  background-color:#00834a;
  color:rgba(255,255,255,.85);
  background-image:url(img/overlay.png),url(img/circles.svg);
  background-position:top left,center center;
  background-attachment:scroll,scroll;
  position:relative
}
body.error #header {
  background-color:#70462c;
  color:#c29c8d
}
body.maintenance #header {
  background-color:#2a2a2a;
  color:#989898
}
@media screen and (max-width:736px) and (orientation:landscape) {
  #header {
    background-size:auto,30em
  }
}
#header p.small {
  font-size:1.2em;
  margin-top:2em;
  margin-bottom:2em
}
@media screen and (max-width:736px) {
  #header p.small {
    font-size:.8em;
    line-height:1.7em
  }
}
#header p a {
  color:rgba(255,255,255,.89)
}
#header p a:hover {
  color:#fff
}
#header .mas {
  line-height:5em
}
#header .image {
  border-radius:100%;
  box-shadow:none
}
#header .button {
  background-color:rgba(0,144,81,.1)
}
#header .button:hover {
  background-color:rgba(0,144,81,.33)
}
#header .button:active {
  background-color:rgba(0,144,81,.5)
}
#header .button.special {
  background-color:#009051;
  color:#fff!important
}
#header .button.special:hover {
  background-color:#009c59
}
#header .button.special:active {
  background-color:#00834a
}
#header h2 {
  font-weight:700
}
body.error #header .button.special {
  background-color:#573425;
  color:#fff!important
}
body.error #header .button.special:hover {
  background-color:#5f3a2a
}
body.error #header .button.special:active {
  background-color:#4d2e21
}
#header .content .subcontent {
  color:rgba(166,220,169,.46);
  font-size:.69em;
  line-height:1.45em;
  cursor:default
}
#beta header a,
#header .content .subcontent a,
#header p a,
a.mas {
  border-bottom:none
}
#header .content .subcontent a:hover {
  border-bottom:dotted 1px!important
}
#header .content .subcontent .highlight:hover,
#header .content .subcontent a {
  color:rgba(166,220,169,.89)
}
#header .content .subcontent .highlight:hover {
  cursor:text
}
#header .content .subcontent .download {
  font-size:1.2em;
  padding-bottom:.3em;
  padding-top:.3em
}
#header .image {
  -moz-transform:none;
  -webkit-transform:none;
  -ms-transform:none;
  transform:none;
  -moz-transition:none;
  -webkit-transition:none;
  -ms-transition:none;
  transition:none;
  opacity:1
}
#header .image.logo {
  box-shadow:none;
  border-radius:0;
  margin:0 0 3em;
  width:20em
}
#header .image.logo img {
  margin:auto;
  -moz-transition-delay:0s;
  -webkit-transition-delay:0s;
  -ms-transition-delay:0s;
  transition-delay:0s;
  border-radius:0;
  display:block;
  position:relative;
  width:100%
}
@media screen and (max-width:736px) and (orientation:portrait) {
  ul.icons.labeled {
    white-space:normal;
    text-align:center
  }
  ul.icons.labeled li {
    display:inline-block;
    padding:0 1em 0 0;
    white-space:normal
  }
}
ul.icons.labeled li .icon:before {
  color:#bbb;
  font-size:1em
}
a.mas {
  text-decoration:none
}
.mas img {
  cursor:pointer
}
.content>.mas img.mas_download {
  border-radius:9px;
  box-shadow:0 0 40px 3px rgba(255,255,255,.3)
}
.content>.mas img.mas_download:hover {
  box-shadow:0 0 50px 4px rgba(255,255,95,.3)
}
#lovebeyond header .fa:hover {
  color:#ce0507;
  cursor:default
}
#lovebeyond form {
  margin:0
}
#lovebeyond form>img,
.ios div.qr.is-preload {
  display:none
}
@media screen and (max-width:480px) and (orientation:portrait) {
  #lovebeyond form {
    display:inline-flex
  }
  #lovebeyond .button.special {
    padding-left:0;
    width:100%;
    margin:0!important
  }
}
#info .spotlight .image.square,
#info .spotlight .image.square img {
  border-radius:1%
}
#info .spotlight .image.ios,
#info .spotlight .image.ios img {
  box-shadow:none;
  border-radius:0
}
@media screen and (max-width:736px) and (orientation:portrait) {
  #info .spotlight.ios {
    flex-direction:column-reverse!important
  }
  #info .spotlight .image.ios {
    margin:2em 0 0!important
  }
}
#info .special.formats ul.icons.labeled li {
  padding:0 1em
}
#info .special.formats ul.icons.labeled li:last-child {
  margin-right:1em
}
#defaultapp .button.special {
  background-color:#009051;
  color:#fff!important
}
#defaultapp .button.special:hover {
  background-color:#009c59
}
#defaultapp .button.special:active {
  background-color:#00834a
}
#defaultapp.style2 p a {
  color:#707070;
  border-bottom:none
}
#defaultapp.style2 p a:hover,
section.doc a:hover {
  color:#009051
}
#defaultapp .subcontent,
#legacy .subcontent {
  font-size:.6em;
  line-height:1.65em
}
#defaultapp .subcontent .highlight:hover {
  color:#666;
  cursor:text
}
#defaultapp .subcontent a,
#legacy .subcontent a {
  border-bottom:0
}
#defaultapp .subcontent a:hover,
#legacy .subcontent a:hover {
  color:#666;
  border-bottom:dotted 1px!important
}
#defaultapp .subcontent.below {
  margin-top:1em
}
#defaultapp header .fa:hover {
  color:#009051;
  cursor:default
}
section.doc .content {
  max-width:800px;
  display:block;
  margin:auto
}
section.doc .disclaimer {
  text-align:justify;
  font-size:.7em
}
section.doc .inapp {
  text-align:left
}
section.doc ul li {
  padding:.2em;
  text-align:left
}
#legacy header .fa:hover {
  color:#745552;
  cursor:default
}
#legacy .button.special {
  background-color:#745552;
  color:#fff!important
}
#legacy .button.special:hover {
  background-color:#8a6563
}
#legacy .button.special:active {
  background-color:#5d4442
}
#legacy .subcontent .highlight:hover {
  color:#666;
  cursor:text
}
#legacy .subcontent.below {
  margin-top:1em
}
#beta {
  background-color:#333;
  background-image:url(img/overlay.png),url(img/circles.svg);
  background-position:top left,center center;
  background-size:auto,cover
}
#beta header a:hover {
  border-bottom:none;
  color:#d87036
}
#beta .major:after {
  border-color:#666
}
#beta .button:not(.special) {
  background-color:rgba(255,255,255,.05);
  color:#c2c2c2!important;
  box-shadow:inset 0 0 0 2px #888
}
#beta .button:hover {
  background-color:rgba(255,255,255,.1)
}
#beta .button:active {
  background-color:rgba(255,255,255,.02)
}
#beta .button.special {
  background-color:#d87036;
  color:#fff!important
}
#beta .button.special:hover {
  background-color:#ee7e3e
}
#beta .button.special:active {
  background-color:#c36531
}
#beta .subcontent {
  font-size:.6em;
  line-height:1.65em;
  color:#666
}
#beta .subcontent a {
  color:#999;
  border-bottom:none
}
#beta .subcontent a:hover {
  border-bottom:dotted 1px!important
}
#beta .subcontent .highlight:hover {
  cursor:text;
  color:#999
}
#beta .subcontent.below {
  margin-top:1em
}
#toolbar_space.solid {
  display:block;
  height:3em
}
#toolbar,
#toolbar>h1 {
  left:0;
  top:0;
  opacity:1
}
#toolbar {
  -moz-transition:background-color .6s ease-in-out;
  -webkit-transition:background-color .6s ease-in-out;
  -ms-transition:background-color .6s ease-in-out;
  background-color:#2e2b2e;
  background-color:rgba(49,49,49,.975);
  color:#d2d1d2;
  cursor:default;
  height:3.5em;
  line-height:3.65em;
  position:fixed;
  text-align:right;
  width:100%;
  z-index:10001;
  -moz-transition:opacity 1.3s ease,-moz-transform .3s ease;
  -webkit-transition:opacity 1.3s ease,-webkit-transform .3s ease;
  -ms-transition:opacity 1.3s ease,-ms-transform .3s ease;
  transition:opacity 1.3s ease,transform .3s ease;
  -moz-transform:translateY(0);
  -webkit-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)
}
#toolbar.solid {
  position:relative
}
#toolbar.alt {
  position:absolute;
  -moz-transition-delay:1s;
  -webkit-transition-delay:1s;
  -ms-transition-delay:1s;
  transition-delay:1s;
  background-color:transparent;
  color:#94c699
}
#toolbar img {
  height:28px;
  width:28px;
  vertical-align:middle;
  margin-bottom:.2em;
  margin-right:.3em
}
body.is-loading #toolbar.alt {
  opacity:0
}
body.is-loading #toolbar {
  -moz-transform:translateY(-4em);
  -webkit-transform:translateY(-4em);
  -ms-transform:translateY(-4em);
  transform:translateY(-4em)
}
body.is-loading #toolbar.alt,
body.is-loading #toolbar.solid {
  -moz-transform:translateY(0);
  -webkit-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0)
}
#toolbar>h1 {
  color:#fff;
  font-weight:600;
  height:inherit;
  line-height:inherit;
  margin:0 0 0 1.5em;
  padding:0;
  position:absolute
}
#toolbar>h1 a {
  padding:0!important;
  font-weight:inherit
}
#toolbar,
#toolbar a,
#toolbar>h1 span {
  font-weight:400
}
#toolbar.alt .hide,
#toolbar.alt>h1 {
  -moz-transition:opacity .5s ease,-moz-transform 1s ease;
  -webkit-transition:opacity .5s ease,-webkit-transform 1s ease;
  -ms-transition:opacity .5s ease,-ms-transform 1s ease;
  transition:opacity .5s ease,transform 1s ease;
  opacity:0
}
#toolbar a,
#toolbar>h1 {
  -moz-transition:color .2s ease-in-out;
  -webkit-transition:color .2s ease-in-out;
  -ms-transition:color .2s ease-in-out;
  transition:color .2s ease-in-out;
  display:inline-block
}
#toolbar a {
  color:inherit;
  text-decoration:none;
  letter-spacing:.1em;
  border-bottom:none
}
#toolbar a:hover {
  color:#fff
}
body.error #toolbar a,
body.maintenance #toolbar a {
  color:#e5e5e5
}
#toolbar a.nav {
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  padding:0 .35em
}
#toolbar a.nav i {
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  font-style:normal;
  text-transform:none!important;
  margin:0 .5em 0 0
}
#toolbar a:last-child {
  padding-right:1.5em
}
body.download_mas_button #toolbar.alt {
  color:#c17555
}
#toolbar.alt>h1 {
  color:inherit
}
#footer {
  background-color:#222
}
#changelog ul li a:hover,
#footer .icons a:hover,
#footer a:hover {
  color:#009051
}
#footer a {
  border-bottom:none
}
#footer .copyright {
  cursor:default
}
#footer .moreinfo {
  color:#6d6d6d;
  font-size:.7em;
  cursor:default
}
#footer .languages {
  color:#6d6d6d;
  font-size:.6em
}
#footer .languages a,
#footer .languages span.active {
  padding:.2em
}
#footer .languages span.active {
  color:#b0b0b0;
  cursor:default
}
#footer .languages span.separator::after {
  content:" | "
}
#changelog ul li a {
  border-bottom:none;
  color:#666
}
#changelog .version {
  margin-bottom:2em;
  border-bottom:solid 1px #e6e6e6
}
#changelog .version:last-of-type {
  margin-bottom:0;
  border-bottom:none
}
#changelog h4 span,
#changelog h4 time {
  font-size:.69em;
  padding-left:.5em;
  color:#9b9b9b
}
#changelog h4 span::before {
  content:"| "
}
#changelog h4 a:hover {
  color:inherit;
  text-decoration:underline
}
#changelog h2 a.changelog:hover {
  color:#9b9b9b
}
#changelog h2 .alt_changelog {
  font-size:.4em;
  line-height:2;
  display:block;
  color:#666
}
h2 .alt_changelog a {
  color:#666
}
#changelog h2 .alt_changelog a {
  border-bottom:none
}
#changelog h2 .alt_changelog a:hover {
  color:#9b9b9b;
  border-bottom:dotted 1px!important
}
#changelog span.href_version {
  display:block;
  position:relative;
  top:-5em;
  visibility:hidden;
  overflow:hidden
}
@media screen and (max-width:980px) {
  #toolbar a.nav:before {
    margin:0
  }
}
@media screen and (max-width:736px) {
  #toolbar {
    height:3em;
    line-height:3.125em
  }
  #toolbar>h1 {
    margin-left:1em
  }
  #toolbar a {
    font-size:.8em
  }
  #toolbar a:last-child {
    padding-right:1em
  }
}
@media screen and (max-width:640px) {
  #toolbar a.nav span,
  #toolbar h1 span {
    display:none
  }
  #toolbar a.nav {
    font-size:1em
  }
  #toolbar a.nav i {
    margin:0
  }
  #toolbar a:last-child i {
    margin:0 .5em 0 0
  }
}
@media screen and (max-width:480px) {
  #toolbar {
    min-width:320px
  }
}
@media (prefers-color-scheme:dark) {
  .wrapper {
    background-color:#222!important;
    color:#888!important
  }
  h2,
  h3,
  h4 {
    color:#a1a1a1!important
  }
  .wrapper,
  .wrapper>.inner.alt>*,
  header.major:after {
    border-bottom-color:#505050;
    border-top-color:#505050
  }
  .wrapper.style2 .button.special {
    background-color:#12467b;
    color:#dbdbdb!important
  }
  .wrapper.style2 .button.special:hover {
    background-color:#155290
  }
  .wrapper.style2 .button.special:active {
    background-color:#0e3b68
  }
  .image {
    box-shadow:0 0 0 4px #484848,0 0 0 5px #333
  }
  #defaultapp.style2 p a {
    color:#c3c3c3
  }
  #defaultapp header .fa:hover,
  #defaultapp.style2 p a:hover {
    color:#007140
  }
  section.doc a:hover {
    color:#007140!important
  }
  #defaultapp,
  #info,
  #legacy,
  #termsofuse {
    background-color:#2a2a2a!important
  }
  #legacy .button.special {
    background-color:#5a4240;
    color:#dbdbdb!important
  }
  #legacy .button.special:active,
  #legacy .button.special:hover {
    color:#dbdbdb!important
  }
  #legacy .button.special:hover {
    background-color:#674c4b
  }
  #legacy .button.special:active {
    background-color:#453331
  }
  #defaultapp .subcontent .highlight:hover,
  #defaultapp .subcontent a:hover,
  #legacy .subcontent .highlight:hover,
  #legacy .subcontent a:hover {
    color:#aeaeae
  }
  #changelog .version {
    border-bottom-color:#505050
  }
  #changelog h4 span,
  #changelog h4 time {
    color:#777
  }
}
body.ios-beta #toolbar.alt {
  color:#5d4a47!important
}
body.ios-beta #toolbar a:hover {
  color:#0f0401!important
}
#header.ios-beta img.mas_download:hover {
  box-shadow:0 0 50px 4px rgba(249,170,41,.3)
}
#header.ios-beta .mas {
  line-height:3
}
#header h1 .beta {
  font-size:.3em;
  position:absolute;
  color:#9c230e;
  padding-top:1em;
  padding-left:.2em
}
.emoji,
.emotion {
  cursor:default;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-size:contain;
  background-position:center center;
  background-attachment:scroll
}
.emotion {
  visibility:hidden;
  background-image:url(../img/Keka-Squish-Face-512x512.png)
}
.emoji {
  opacity:0;
  background-image:url(../img/Keka-Love-Face-512x512.png)
}
body.downloading #header .content ul.actions {
  padding-top:1.5em
}
ul>li>.mas {
  display:inline-flex
}
@media screen and (max-width:480px) and (orientation:portrait) {
  ul>li>.mas {
    display:inline-flex;
    display:contents
  }
}
body.downloading .emotion {
  background-image:url(../img/Keka-Smile-Face-512x512.png)
}
::selection {
  color:#fff7d8;
  background-color:#6e5854
}
#footer ::selection {
  color:#000;
  background-color:#bbb
}
.wrapper ::selection {
  color:#fff;
  background-color:#666
}
@media (prefers-color-scheme:dark) {
  .wrapper ::selection {
    color:#000;
    background-color:#bbb
  }
}
#GithubSponsor:before {
  margin-left:0
}
div.qr.is-preload {
  visibility:hidden;
  opacity:0
}
div.qr {
  width:5em;
  height:5em;
  background-color:#fff;
  position:absolute;
  bottom:0;
  right:0;
  margin:1em;
  border-radius:10px;
  -moz-transition:opacity 1.3s ease,-moz-transform .3s ease;
  -webkit-transition:opacity 1.3s ease,-webkit-transform .3s ease;
  -ms-transition:opacity 1.3s ease,-ms-transform .3s ease;
  transition:opacity 1.3s ease,transform .3s ease;
  visibility:visible;
  opacity:1
}
.ios div.qr {
  background-color:#00834a;
  position:relative;
  margin:0 .1em 1.5em auto
}
@media screen and (max-width:736px) {
  div.qr {
    display:none
  }
}
@media screen and (max-width:980px) and (orientation:portrait) {
  .ios div.qr {
    margin-right:auto
  }
}
div.qr img {
  width:100%;
  padding:.3em;
  filter:invert(24%) sepia(100%) saturate(3917%) hue-rotate(151deg) brightness(91%) contrast(101%)
}
.ios div.qr img {
  filter:invert(98%) sepia(33%) saturate(243%) hue-rotate(208deg) brightness(113%) contrast(100%)
}
div.qr a,
div.qr a:hover {
  border-bottom:none!important
}
.fa,
.far,
.fas {
  font-family:"Font Awesome 5 Free",Arial,Helvetica,sans-serif!important
}
.icon:before {
  font-weight:700!important
}