pre{line-height:1.3}
.card-app-fancy{overflow:auto;clear:both;position:relative;font-weight:300}
.card-app-fancy .sl-card-inner{padding:1ex 1em}
.card-app-fancy .sl-card-header-title{margin:0 0 .5ex 0;font-size:44px;font-size:3.8vw;font-weight:300;text-transform:inherit;color:inherit}
.card-app-fancy header, .card-app-fancy .sl-card-header{border-bottom: 0}
.appicon{float:left;margin-right:1ex;width:4em;height:4em;background:url(/app/images/appicon.svg) no-repeat center;background-size:100%;border-radius:.8ex}
.downloadbutton{float:left;white-space:nowrap;height:100%;padding:.8ex .6em 0 .6em;color:white;background-color:#e41030;border-radius:.8ex}
.card-features div, .card-features img{float:left}
.card-features img{margin:0 2.5em}
.card-features .feature-l, .card-features .feature-r{clear:both;margin:1ex 0;position:relative;width:17em;font-size:22px;line-height:26px;min-height:120px}
.card-features .feature-l .icon, .card-features .feature-r .icon{font-size:60px;position:absolute;top:20px}
.card-features .feature-l{padding-right:76px;text-align:right}
.card-features .feature-l .icon{right:0}
.card-features .feature-r{padding-left:76px}
.card-features .feature-r .icon{left:0}
.card-download .sl-card-inner{min-height:420px}
.card-download img{float:left;width:14em;margin:0 1em 2ex 0}
.card-help video{display:block;margin:2ex auto;width:304px;height:540px}
.card-app-ioswidget .sl-card-inner{min-height:420px}
.card-app-ioswidget .sl-card-body div{font-size:22px;line-height:26px;margin-right:280px}
.card-app-ioswidget .sl-card-body video{position:absolute;top:42px;right:4ex;width:192px;height:340px;border:1px solid #888;box-shadow:5px 5px 8px #ccc}
@media screen and (min-width:1200px){
.card-app-fancy .sl-card-header-title{font-size:42px}
}
@media screen and (max-width:1100px){
.card-features div{float:none;margin-left:auto;margin-right:auto;width:auto}
.card-features img{display:none}
.card-features .feature-l, .card-features .feature-r{padding:72px 0 20px 0;text-align:center;width:auto;max-width:300px}
.card-features .feature-l .icon, .card-features .feature-r .icon{left:0;right:0;top:20px}
.card-app-ioswidget .sl-card-body div{margin-right:1ex}
.card-app-ioswidget .sl-card-body video{position:static;top:auto;left:auto;margin-top:2ex}
}
@media screen and (max-width:720px){
.card-app-fancy .sl-card-header-title{font-size:22px}
}
.app-about{overflow:auto;margin-bottom:600px}
.app-about section{float:left;margin-right:5em}
.app-about h2{margin:1ex 0;font-size:16px}
.app-about p{font-size:20px;margin-bottom:3ex}
.app-about div{font-size:20px}
.app-about-beast{height:300px;background:url(/app/images/pet-flunder.png) no-repeat bottom 50px center;background-size:280px}
.app-about-beast.onedomain{height:370px;background:url(/app/images/pet-onedomain.png) no-repeat center center;background-size:320px}
.app-settings .sl-toggle{width:auto;background:#999}
.app-settings .sl-toggle div{color:white}
.app-settings .sl-toggle .sl-is-on{background:white;border-radius:3px;color:#333;font-weight:400}
.app-settings .sl-form-in-card{background:#999}
.app-settings .xscroll{overflow-x:scroll}
.app-settings .dtab td{font-family:monospace;font-size:9pt;padding:.2ex 1ex;border:1px solid #999}
.app-settings .dtab td:first-child{width:2%}
.app-settings .settingstable td{padding-bottom:1em;vertical-align:top}
.app-settings .settingstable td input{margin-top:0.25em}
.app-settings table.settingstable tr.disabled, .app-settings label.disabled{color:lightgray}
.app-settings input[name="detectservice_padding_top"]{width:2.5em}
.app-settings input[name="debug_params"]{width:10em}
.app-settings .directory_handler_instructions ol{margin-top:1ex}
.app-settings .directory_handler_instructions li{margin-top:.5ex}
.app-settings .directory_handler, .app-settings .directory_handler_enabled, .app-settings .directory_handler_disabled{display:none}
#servertype, #app_geo, #app_env_debug{font-size:9pt}
@media (prefers-color-scheme: dark){
.app-dark-mode{background-color: darkgray;color: white}
.app-dark-mode.sl-card h2.sl-card-header-title{color: white}
.app-dark-mode-state{visibility: hidden}
.app-dark-mode-state::before{content:'yes';visibility:visible}
}
#app-push-test .subscription{display:flex;margin-bottom:1em}
#app-push-test .subscription > div{width:50%}
#app-push-test .state::after{content:'not subscribed'}
#app-push-test.subscribed .state::after{content:'subscribed'}
#app-push-test .subscribe::after{content:'subscribe'}
#app-push-test.subscribed .subscribe::after{content:'unsubscribe'}
#app-push-test .pntokens .mine{color: green}