/*
//================================================

Xiao Browser
Effortlessly open any website in your web browser's sidebar – streamline your workflow instantly!
Copyright (C) 2024 Stefan vd
      Copyright 2024 183600
www.stefanvd.net

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.


To view a copy of this license, visit http://creativecommons.org/licenses/GPL/2.0/

    本项目基于chrome-extensions-samples-main修改，并且此文件可能修改了，以下为原项目的版权声明
 Copyright 2023 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
//================================================
*/

.dark{
--totl-primary-background:#232323;
--totl-primary-font-color:#fff;
--totl-body-background:#111111;
--totl-svg-fill-color:#fff;
--totl-svg-fill-color-hover:#474747;
--totl-primary-sidebar-background:#1c1c1c;
--totl-nav-background-hover:#474747;
--totl-nav-color:rgba(255,255,255,.882);
--totl-title-color:#fff;
--totl-title-border:1px solid #444444;
--totl-section-border:1px solid rgba(255,255,255,.12);
--totl-table-first-background:#212121;
--totl-table-first-color:#ffffff;
--totl-table-td-border:1px solid rgba(255,255,255,.12);
--totl-table-tr-background-hover:#424242;
--totl-table-tr-background-active:#4e4e4e;
--totl-dropmenu-li-background-hover:#424242;
--totl-dropmenu-li-background-active:#4e4e4e;
--totl-menu-background-hover:#474747;
--totl-select-not-background:#333;
--totl-select-background:rgba(244,244,244,.4);
--totl-select-option-color:rgba(255, 255, 255,.80);
--totl-select-option-checked-background:#292929 linear-gradient(0deg,#292929 0%,#292929 100%);
--totl-select-disable-background:#2e2e2e;
--totl-select-disable-color:rgba(255,255,255,.80);
--totl-select-disable-option:#292929 linear-gradient(0deg,#292929 0%,#292929 100%);
--totl-radio-label-border:2px solid #c7c7c7;
--totl-radio-label-background:rgba(0,0,0,1);
--totl-radio-checked-border:#4285f4;
--totl-radio-checked-disabled:#717171;
--totl-checkbox-label-background:rgba(0,0,0,1);
--totl-checkbox-label-border:2px solid #c7c7c7;
--totl-checkbox-checked:#4285f4;
--totl-checkbox-checked-disabled:#717171;
--totl-checkbox-checked-disabled-border:2px solid #717171;
--totl-range-background:#4285f4;
--totl-range-disabled-background:rgba(255,255,255,.54);
--totl-select-only-background:#111111;
--totl-select-only-color:rgba(255,255,255,.70);
--totl-select-only-border:1px solid rgba(255,255,255,.70);
--totl-select-only-border-focus:2px solid #4285f4;
--totl-select-only-border-top:0.375em solid rgba(255,255,255,.12);
--totl-select-only-hover-color:rgba(255,255,255,.80);
--totl-select-only-hover-border:2px solid rgba(255,255,255,1);
--totl-button-color:#fff;
--totl-button-background:rgba(244,244,244,.4);
--totl-button-background-active:rgba(158,158,158,.2);
--totl-button-background-hover:rgba(158,158,158,.4);
--totl-input-other-color:rgba(255,255,255,.7);
--totl-input-other-background:#111111;
--totl-input-other-multi-background:rgba(244,244,244,.4);
--totl-input-other-border:1px solid rgba(255,255,255,.70);
--totl-input-other-border-focus:2px solid #4285f4;
--totl-input-url-background:rgba(244,244,244,.4);
--totl-input-url-color:rgba(255,255,255,.80);
--totl-input-url-placeholder-color:#959595;
--totl-minitable-border:1px solid rgba(255,255,255,.12);
--totl-minitable-background-hover:#424242;
--totl-minitable-background-active:#4e4e4e;
--totl-minitable-tab-border:1px solid #444444;
--totl-input-url-disabled-background:#2e2e2e;
--totl-input-url-disabled-color:rgba(255,255,255,.80);
--totl-input-number-disabled-color:rgba(255,255,255,.50);
--totl-input-number-disabled-border:1px dotted rgba(255,255,255,.7);
--totl-input-number-hover-color:rgba(255,255,255,.7);
--totl-input-number-hover-border:2px solid rgba(255,255,255,1);
--totl-input-text-disabled-color:rgba(255,255,255,.80);
--totl-input-text-disabled-border:1px dotted rgba(0,0,0,.12);
--totl-button-disabled-color:rgba(255,255,255,.3);
--totl-button-disabled-background:rgba(255,255,255,.12);
--totl-sidebar-icon-background:rgba(255,255,255,.882);
--totl-subtitle-color:#717171;
--totl-card-background:#232323;
--totl-card-info:#4285f4;
--totl-tag-border:1px solid #DFE1E5;
--totl-tag-hover:rgba(232, 240, 253,.2);
--totl-donation-bar:#FFD54F;
--totl-gray-text:#9e9e9e;
--browser-preview-image: url(/images/browser-preview-dark.png);
--browser-preview-image-2x: url(/images/browser-preview-dark@2x.png);
}
.light{
--totl-primary-background:#fff;
--totl-primary-font-color:#000;
--totl-body-background:#fff;
--totl-svg-fill-color:#000;
--totl-svg-fill-color-hover:#ebebeb;
--totl-primary-sidebar-background:#f5f5f5;
--totl-nav-background-hover:#ebebeb;
--totl-nav-color:#373737;
--totl-title-color:#333;
--totl-title-border:1px solid #EEE;
--totl-section-border:1px solid rgba(0,0,0,0.12);
--totl-table-first-background:#fafafa;
--totl-table-first-color:#000000;
--totl-table-td-border:1px solid rgba(0,0,0,.12);
--totl-table-tr-background-hover:#EEEEEE;
--totl-table-tr-background-active:#F5F5F5;
--totl-dropmenu-li-background-hover:#EEEEEE;
--totl-dropmenu-li-background-active:#F5F5F5;
--totl-menu-background-hover:#ebebeb;
--totl-select-not-background:#fff;
--totl-select-background:#fff;
--totl-select-option-color:black;
--totl-select-option-checked-background:#eeeeee linear-gradient(0deg,#eeeeee 0%,#eeeeee 100%);
--totl-select-disable-background:rgba(0,0,0,.12);
--totl-select-disable-color:rgba(0,0,0,.54);
--totl-select-disable-option:#eeeeee linear-gradient(0deg,#eeeeee 0%,#eeeeee 100%);
--totl-radio-label-border:2px solid #656565;
--totl-radio-label-background:rgba(255,255,255,1);
--totl-radio-checked-border:#4285f4;
--totl-radio-checked-disabled:#b0b0b0;
--totl-checkbox-label-background:rgba(255,255,255,1);
--totl-checkbox-label-border:2px solid #656565;
--totl-checkbox-checked:#4285f4;
--totl-checkbox-checked-disabled:#b0b0b0;
--totl-checkbox-checked-disabled-border:2px solid #b0b0b0;
--totl-range-background:#4285f4;
--totl-range-disabled-background:rgba(0,0,0,.26);
--totl-select-only-background:#fff;
--totl-select-only-color:rgba(0,0,0,.54);
--totl-select-only-border:1px solid rgba(0,0,0,.42);
--totl-select-only-border-focus:2px solid #4285f4;
--totl-select-only-border-top:0.375em solid rgba(0,0,0,.12);
--totl-select-only-hover-color:rgba(0,0,0,.54);
--totl-select-only-hover-border:2px solid rgba(0,0,0,.87);
--totl-button-color:#000;
--totl-button-background:rgba(244,244,244,.4);
--totl-button-background-active:rgba(158,158,158,.2);
--totl-button-background-hover:rgba(158,158,158,.4);
--totl-input-other-color:rgba(0,0,0,.54);
--totl-input-other-background:#fff;
--totl-input-other-multi-background:#fff;
--totl-input-other-border:1px solid rgba(0,0,0,.42);
--totl-input-other-border-focus:2px solid #4285f4;
--totl-input-url-background:#fff;
--totl-input-url-color:#000;
--totl-input-url-placeholder-color:#909090;
--totl-minitable-border:1px solid rgba(255,255,255,.12);
--totl-minitable-background-hover:#EEEEEE;
--totl-minitable-background-active:#F5F5F5;
--totl-minitable-tab-border:1px solid #cccccc;
--totl-input-url-disabled-background:rgba(0,0,0,.12);
--totl-input-url-disabled-color:rgba(0,0,0,0.26);
--totl-input-number-disabled-color:rgba(0,0,0,.54);
--totl-input-number-disabled-border:1px dotted rgba(0,0,0,.42);
--totl-input-number-hover-color:rgba(0,0,0,.54);
--totl-input-number-hover-border:2px solid rgba(0,0,0,.87);
--totl-input-text-disabled-color:rgba(0,0,0,.80);
--totl-input-text-disabled-border:1px dotted rgba(0,0,0,.12);
--totl-button-disabled-color:rgba(0,0,0,.26);
--totl-button-disabled-background:rgba(0,0,0,.12);
--totl-sidebar-icon-background:#373737;
--totl-subtitle-color:#b0b0b0;
--totl-card-background:#fff;
--totl-card-info:#4285f4;
--totl-tag-border:1px solid #DFE1E5;
--totl-tag-hover:rgba(232, 240, 253,1);
--totl-donation-bar:#FFF59D;
--totl-gray-text:#585858;
--browser-preview-image: url(/images/browser-preview.png);
--browser-preview-image-2x: url(/images/browser-preview@2x.png);
}

html{overflow:hidden;height:100vh}
body{min-width:1150px;min-height:800px;background:var(--totl-body-background);color:var(--totl-primary-font-color);font-family:Arial,sans-serif;cursor:default;font-size:13px}
#main-content{display:-webkit-box;position:absolute;left:0;right:0;top:0;bottom:0}
#mainview{padding-left:240px;margin:0;position:fixed;left:0;right:0;top:0;bottom:0;z-index:1;overflow:auto;margin-top:56px}
#mainview-content{box-sizing:border-box;max-width:1020px;min-width:600px;padding:0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));position:relative}
#managed-prefs-banner{background:var(--totl-donation-bar);height:32px;margin:0;padding:0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));-webkit-user-select:none;-moz-user-select:none;user-select:none;color:black;position:relative}
#managed-prefs-icon{display:inline-block;padding:0px 15px 0px 0px}
#managed-prefs-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;margin-right:30px}
#managed-prefs-text-close{float:right;display:inline-flex;cursor:pointer;color:#000;font-size:18px;position:absolute;right:calc(26px + env(safe-area-inset-right));padding:10px;align-items:center;flex-direction:column}
#navbar-container{background:var(--totl-primary-sidebar-background);bottom:0;display:block;left:0;position:fixed;top:0;width:240px;z-index:398;content-visibility:auto;padding-left:env(safe-area-inset-left)}
#navbar-container>ul{-webkit-user-select:none;-moz-user-select:none;user-select:none;list-style-type:none;padding:0;margin:68px 0 0 0}
.navbar-item{color:var(--totl-nav-color);cursor:pointer;display:block;font-size:105%;outline:none;padding:7px 0}
.navbar-item:hover{background:var(--totl-nav-background-hover);color:var(--totl-primary-font-color)}
.navbar-item-selected{background:var(--totl-nav-background-hover);color:var(--totl-primary-font-color)}
ul#navbar li a{display:flex;align-items:center;margin-right:0;padding:12px 24px 12px 24px;font-size:105%;cursor:pointer}
ul#navbar li a svg{margin-right:24px;fill:var(--totl-sidebar-icon-background)}
.page h2{-webkit-padding-end:24px;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--totl-title-color);font-size:200%;font-weight:400;margin:0;padding-bottom:4px;padding-top:13px}
.page{height:100%;width:100%;position:relative}
section{position:relative;-webkit-box-orient:horizontal;border-bottom:var(--totl-section-border);display:-webkit-box;padding-top:20px;padding-bottom:20px;width:100%}
section>h3{font-size:105%;font-weight:700;margin:0;width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
section>div:only-of-type{-webkit-box-flex:1}
.page section:last-child{margin-bottom:20px}
#websitezoomname{width:200px;margin-left:30px}
/* Hyperlinks */
#mainview-content section a{color:rgb(51, 103, 214);text-decoration:underline}
#mainview-content section a:active{color:rgb(51, 103, 214)}
#mainview-content section a:visited{color:rgb(51, 103, 214)}
#mainview-content section a:hover{color:rgb(51, 103, 214)}
.btnspace{margin:0 8px 0 0}
.grey-text{color:grey}
.hidden{display:none}
.item{font-style:italic}
.donate-content{display:flex;align-items:center;height:100%}
/* Search */
.search{position:relative;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:247px;margin-right:65px;font-size:18px;cursor:pointer;outline:none}
.search input{color:var(--totl-primary-font-color);background:var(--totl-primary-sidebar-background);border:0;border-radius:5px;height:35px;padding:10px 10px 10px 40px;box-sizing:border-box;outline:none;width:100%;max-width:975px}
.searchicon{position:absolute;top:5px;left:5px;height:20px;width:20px;padding:3px;border-radius:20px}
.searchicon:hover{background:var(--totl-svg-fill-color-hover);cursor:pointer}
.searchicon svg{fill:var(--totl-sidebar-icon-background)}
.searchfoundnothing{display:none}
/* html */
.sharemenu{position:absolute;right:0;margin-top:-27px;color:var(--totl-gray-text);font-size:11px;display:flex;align-items:center}
/* donation button */
.donatebutton{background:#FDD835;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#000;font-size:12px;min-width:7em;padding:2px 10px;text-decoration:none;text-transform:uppercase;box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}
.donatebutton:hover{background:rgba(253,216,53,.6)}
/* load */
#productwelcomeimageload{display:block;margin-left:auto;margin-right:auto;padding-left:0;font-family:verdana;font-size:16px;color:#000;text-align:center}
#productwelcomeimageload .icon{display:flex;align-items:center;justify-content:center}
/* image gallery */
#wallpapershow{display:inline-block;right:0;position:absolute;width:135px}
#wallpaperhide{display:inline-block;right:0;position:absolute;width:135px}
#imagegallery{padding-left:20px;margin:16px 0 0 0;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}
.imageshaduw{margin:10px 15px 10px 0;padding:1px;border:1px solid #bebebe;height:150px;width:150px;cursor:pointer}
/* loading bar */
#loadinghelp{bottom:10px;position:absolute;right:15px}
#loading{position:fixed;width:100%;height:100%;z-index:500;background:rgba(255,255,255,1);margin:0;padding:0;left:0;top:0}
#loadingcenter{margin:20% auto;width:500px}
#progressbar{width:500px;height:5px;background-color:rgba(33,150,243,0.5);clear:both;margin:5px 0}
#progress{background:rgb(33,150,243);height:5px;width:0;max-width:100%;float:left;animation:progress 2s 1 forwards}
#pbaranim{height:5px;width:500px;overflow:hidden;opacity:.25}
@keyframes progress{to{width:500px}}
/* help text */
.helpwhatproblem{background:#FFF59D;color:#000;padding:10px;line-height:25px}
.videopreview{display:block;float:left;padding-right:24px}
.videopreview iframe{width:480px;height:270px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border-radius:2px}
.suggpanel{width:335px;position:relative;display:block;float:left}
/* lamp */
#loadinglamp{margin-right:5px}
#welcomelamp{margin-right:5px}
#rememberlamp{margin-right:5px}
/* share box */
#shareboxyoutube{background:url(../images/youtube@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/youtube.png) 1x,url(../images/youtube@2x.png) 2x);width:25px;height:18px;display:inline-block;background-size:cover;margin-left:10px;margin-right:10px;cursor:pointer}
#shareboxfacebook{background:url(../images/facebook@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/facebook.png) 1x,url(../images/facebook@2x.png) 2x);width:18px;height:18px;display:inline-block;background-size:cover;margin-right:10px;cursor:pointer}
#shareboxtwitter{background:url(../images/twitter@2x.png)left top no-repeat;background:-webkit-image-set(url(../images/twitter.png) 1x,url(../images/twitter@2x.png) 2x);width:18px;height:18px;display:inline-block;background-size:cover;cursor:pointer}
#shareboxrate:hover,#shareboxyoutube:hover,#shareboxfacebook:hover,#shareboxtwitter:hover{opacity:.8;cursor:pointer}
.probox{top:0;position:absolute;background:#FDD835;color:black;font-size:12px;padding:2px 12px;border-radius:2px;display:inline-block}
.proboxtext{display:inline-flex;line-height:18px;padding:15px 15px 10px;gap:25px}
.proboxbutton,.proboxbutton:hover{background:#4285f4;color:white}
.proboxbutton:hover{opacity:.8}
/* Review box */
#reviewextensionbox{height:75px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.stars{position:absolute;color:#ffce32;font-size:38px;top:0;left:30px}
#ayh{position:absolute;font-size:20px;font-weight:700;top:0;right:30px;color:var(--totl-primary-font-color)}
#tllo{position:absolute;font-size:16px;top:25px;right:30px;color:var(--totl-primary-font-color)}
#nt{position:absolute;font-size:12px;font-weight:700;color:var(--totl-primary-font-color);text-transform:uppercase;top:60px;left:50px;cursor:pointer}
#war{position:absolute;font-size:12px;font-weight:700;color:#39F;text-transform:uppercase;top:60px;right:30px;cursor:pointer}
/* Xiao Browser buttons */
.buttoncolor{padding:10px;height:19px;width:19px}
.minibrowserpreview{width:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
.minibrowserpreview .columnA{width:60%}
.minibrowserpreview .columnB{width:30%}
.minibrowserpreview .activebutton{width:19px;height:19px;position:absolute;padding-top:44px;padding-left:98px;background-size:contain}
.browserbuttons{display:flex;gap:8px;margin-bottom:8px;margin-top:8px}
.browserbuttons img{border-radius:5px;border:var(--totl-input-other-border);cursor:pointer}
.browserbuttons .lightbackground{background:#ffffff}
.browserbuttons .darkbackground{background:#232323}
.browserpreview{background:var(--browser-preview-image)left top no-repeat;background:-webkit-image-set(var(--browser-preview-image) 1x, var(--browser-preview-image-2x) 2x);background:image-set(var(--browser-preview-image) 1x, var(--browser-preview-image-2x) 2x);height:110px;width:300px;background-size:contain}
/* Profile */
.cardokbutton{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:8px 0;float:left;background:0 0;border:none;border-radius:2px;color:#2296f3;position:relative;height:36px;min-width:64px;padding:0 16px;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px}
.cardokbutton:active{background-color:rgba(158,158,158,.4)}
.cardokbutton:hover{background-color:rgba(158,158,158,.2)}
.suggpanel .desprofile{display:block;min-height:85px}
.suggpanel .profile{background:var(--totl-card-background);display:inline-block;margin:0px;position:relative;padding:0;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);width:100%;min-height:270px}
.suggpanel .profile:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.suggpanel .profile .cardactionbox{position:relative;display:inline-block;width:100%;height:50px}
.submitprofile{position:absolute;bottom:5px;margin:10px 0px}
.primarytitle{padding:24px 16px 0px 16px;font-size:16px;position:relative}
.subtitle{padding:0px 16px 16px 16px;font-size:13px;color:var(--totl-subtitle-color)}
.supporttitle{padding:0px 16px 16px 16px;font-size:13px;display:inline-block}
.endttitle{padding:0px 16px 24px 16px;font-size:13px}
/* tablet */
.introworks{display:inline-block;padding:24px 16px 0px 16px;position:relative;height:145px}
.introworks .step{height:30px;position:relative}
.introworks .step .stepdescription{font-size:13px;width:100%;text-align:left;float:left}
header{background:var(--totl-primary-background);color:var(--totl-primary-font-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;box-shadow:0 2px 5px rgba(0,0,0,.26);display:block;flex-direction:row;align-items:center;z-index:399;position:fixed}
header .messagehead{align-items:center;display:flex;width:100%;position:relative;margin:0;padding:0}
header .masterhead{min-height:56px;align-items:center;display:flex;position:relative;margin:0;padding:0 16px}
header .icon{position:relative;display:flex;margin:0}
header .title{color:var(--totl-primary-font-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-left:54px;font-size:18px;position:absolute;top:17px;left:0;cursor:pointer;display:flex;align-items:center;gap:4px}
header .rightmenu{position:absolute;width:24px;height:24px;top:6px;right:20px;padding:10px;border-radius:50%}
header .rightmenu svg{fill:var(--totl-svg-fill-color)}
header .rightmenu:hover{background:var(--totl-svg-fill-color-hover);cursor:pointer}
#dropmenu.hide{display:none}
#dropmenu.show{display:block}
#dropmenu ul{line-height:48px;list-style:none;margin:0;padding:0}
#dropmenu{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 8px 0 rgba(0,0,0,0.12);position:absolute;top:42px;right:calc(24px + env(safe-area-inset-right));width:200px;z-index:800;background:var(--totl-primary-background);padding:10px 0px}
#dropmenu svg{position:relative;top:3px;margin-right:10px;fill: var(--totl-sidebar-icon-background)}
#dropmenu ul li{height:48px;user-select:none;padding:0px 16px;color:var(--totl-primary-font-color);cursor:pointer}
#dropmenu ul li:hover{background-color:var(--totl-dropmenu-li-background-hover)}
#dropmenu ul li:active{background-color:var(--totl-dropmenu-li-background-active)}
#dropmenu ul li.topline{border-top:var(--totl-section-border)}
#menu{-webkit-user-select:none;user-select:none;z-index:399;position:absolute;top:5px;left:5px;height:45px;width:45px;border-radius:50%}
#menu:hover{ background:var(--totl-menu-background-hover);cursor:pointer}
#menuToggle{height:12px;width:20px;border-radius:50%;position:absolute;top:0;bottom:0;margin:auto;left:0;right:0}
#menuToggle span{display:block;width:20px;height:2px;margin-bottom:3px;position:relative;background:var(--totl-primary-font-color)}
/* Mobile sidebar */
input[type=checkbox]:checked ~ #navbar-container{display:none}
input[type=checkbox]:checked ~ #mainview{padding-left:0px}
#darkpanel{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);opacity:0;transition:opacity 0.3s cubic-bezier(0,0,0.3,1);z-index:400;pointer-events:none}
#reveal-menu{display:none}
/* quick bookmarks */
.booktable{gap:16px;display:flex;flex-direction:column}
.bookrow{gap:16px;display:flex;align-items:center}
.bookrow input[type=url]{width:350px}
/* track */
input[type=range]{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;width:100%;height:20px;background:transparent;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0;cursor:pointer}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;background-color:var(--totl-range-background);border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-moz-range-track{width:100%;height:2px;background-color:var(--totl-range-background);border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-ms-track{width:100%;height:2px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent}
input[type=range]::-ms-fill-lower{background-color:#4285f4;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
input[type=range]::-ms-fill-upper{background-color:#4285f4;border:none;border-radius:10px;transition:all 400ms;outline:none;padding:0;margin:0}
/* thumb */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background-color:var(--totl-range-background);border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:-9px}
input[type=range]::-moz-range-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background-color:var(--totl-range-background);border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:0px}
input[type=range]::-ms-thumb{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;transform:scale(0.75);width:20px;height:20px;border:none;background:#4285f4;border-radius:40px;box-shadow:0px 0px 0px green;transition:all 400ms;outline:none;margin-top:0px}
/* thumb hover */
input[type=range]::-webkit-slider-thumb:hover{transform:scale(0.85)}
input[type=range]::-moz-range-thumb:hover{transform:scale(0.85)}
/* thumb active */
input[type=range]::-webkit-slider-thumb:active{transform:scale(1)}
input[type=range]::-moz-range-thumb:active{transform:scale(1)}
input[type=range]::-moz-focus-outer{border:0}
/* Disable */
input[type=range][disabled]::-webkit-slider-runnable-track{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-moz-range-track{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-webkit-slider-thumb{background-color:var(--totl-range-disabled-background)}
input[type=range][disabled]::-moz-range-thumb{background-color:var(--totl-range-disabled-background)}
/* sub */
.md-subin{transform:translateX(22px)}
.md-subgroup{display:inline-block;vertical-align:middle}
/* Bulb */
.md-bulb{position:relative;margin:16px 0 0 0;box-sizing:border-box;height:18px}
.md-bulbpreview{padding-top:10px;position:relative}
/* Color */
.md-color{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
.md-color .input-color-container{position:relative;overflow:hidden;width:56px;height:16px;border:var(--totl-checkbox-label-border);border-radius:2px;display:inline-block;vertical-align:middle;margin-right:10px}
.md-color input[type=color]{position:absolute;right:-25px;top:-5px;width:102px;height:30px;border:none;margin:0;padding:0}
.md-color label div{vertical-align:middle;display:inline;box-sizing:border-box}
.md-color label{display:inline-block}
/* Description */
.md-desbox{position:relative;margin:16px 0;box-sizing:border-box}
/* Form */
form{position:relative;margin:16px 0;box-sizing:border-box}
/* Checkbox */
.md-checkbox{position:relative;margin:16px 0;box-sizing:border-box}
.md-checkbox label{cursor:pointer;box-sizing:border-box;min-height:20px;display:grid;align-items:center}
.md-checkbox label div{box-sizing:border-box;margin-left:30px}
.md-checkbox label::before,.md-checkbox label::after{content:"";position:absolute;left:0;top:0;box-sizing:border-box}
.md-checkbox label::before{width:20px;height:20px;background:var(--totl-checkbox-label-background);border:var(--totl-checkbox-label-border);border-radius:2px;cursor:pointer;transition:background 0.3s;box-sizing:border-box}
.md-checkbox input[type=checkbox]{outline:0;margin-right:15px;box-sizing:border-box;width:12px;height:12px;opacity:0;display:none;float:left}
.md-checkbox input[type=checkbox]:checked + label::before{background:var(--totl-checkbox-checked);border:none;box-sizing:border-box}
.md-checkbox input[type=checkbox]:checked + label::after{transform:rotate(-45deg);top:5px;left:4px;width:12px;height:6px;border:2px solid #fff;border-top-style:none;border-right-style:none;box-sizing:border-box}
.md-checkbox input[type=checkbox]:checked[disabled] + label::before{background:var(--totl-checkbox-checked-disabled);border:var(--totl-checkbox-checked-disabled-border)}
.md-checkbox input[type=checkbox][disabled] + label::before{border:var(--totl-checkbox-checked-disabled-border)}
/* Radio button */
.md-radio{position:relative;margin:16px 0;box-sizing:border-box}
.md-radio-yincang{display: none}
.md-radio label{cursor:pointer;box-sizing:border-box;min-height:20px;display:grid;align-items:center}
.md-radio label div{box-sizing:border-box;margin-left:30px}
.md-radio label::before,.md-radio label::after{content:"";position:absolute;left:0;top:0;box-sizing:border-box}
.md-radio label::before{width:20px;height:20px;background:var(--totl-radio-label-background);border:var(--totl-radio-label-border);border-radius:50%;transition:all .3s ease;transition-property:transform,border-color;box-sizing:border-box}
.md-radio input[type=radio]{outline:0;margin-right:10px;box-sizing:border-box;width:12px;height:12px;opacity:0;display:none} 
.md-radio input[type=radio]:checked + label::before{border-color:var(--totl-radio-checked-border);box-sizing:border-box}
.md-radio input[type=radio]:checked + label::after{transform:scale(1);top:5px;left:5px;width:10px;height:10px;border-radius:50%;background:var(--totl-radio-checked-border);box-sizing:border-box}
.md-radio input[type=radio]:checked[disabled] + label::before{border-color:var(--totl-radio-checked-disabled)}
.md-radio input[type=radio]:checked[disabled] + label::after{background:var(--totl-radio-checked-disabled)}
.md-radio input[type=radio][disabled] + label::before{border-color:var(--totl-radio-checked-disabled)}
/* Select Field */
select:not([multiple]){background:var(--totl-select-only-background);font-family:inherit;width:100%;padding:4px 16px;font-size:16px;color:var(--totl-select-only-color);border:none;border-bottom:var(--totl-select-only-border);border-radius:0} 
select:not([multiple]):hover{color:var(--totl-select-only-hover-color);border-bottom:var(--totl-select-only-hover-border)}
select:not([multiple])[disabled]{box-shadow:none;color:var(--totl-select-disable-color);border-bottom:var(--totl-input-number-disabled-border)}
/* Remove focus */
select:focus{outline:none;border-bottom:var(--totl-select-only-border-focus)}
/* Use custom arrow */
.md-selectfield label{display:none}
.md-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.md-selectfield{font-family:'Roboto','Helvetica','Arial',sans-serif;position:relative}
.md-selectfield::after{content:"▾";position:absolute;top:0.45em;right:0.5em;pointer-events:none;color:var(--totl-select-only-color)}
/* Multi */
select[multiple]{background:var(--totl-select-background);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);padding:6px 0;border:none;border-radius:0}
select[multiple] option{padding:8px 24px;font-size:13px;color:var(--totl-select-option-color)}
select[multiple]:focus option:checked{background:var(--totl-select-option-checked-background)}
select[multiple][disabled]{box-shadow:none;background-color:var(--totl-select-disable-background);color:var(--totl-select-disable-color)}
select[multiple][selected]:disabled,select option:checked,select option:checked[disabled]{background:var(--totl-select-disable-option);color:var(--totl-select-disable-color)}
/* button */
button{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:0 0;border:none;border-radius:2px;color:var(--totl-button-color);position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle;box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);background-color:var(--totl-button-background)}
button:active{background-color:var(--totl-button-background-active)}
button:hover{background-color:var(--totl-button-background-hover)}
/* number */
.md-number{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
/* time */
.md-time{position:relative;margin:16px 0;box-sizing:border-box;height:18px}
/* input other */
input[type=url]::placeholder{color:var(--totl-input-url-placeholder-color)}
input[type=number]{width:40px}
input[type="time"],input[type="number"],input[type="password"],input[type="text"],input:not([type]){background:var(--totl-input-other-background);height:18px;padding:2px 5px;border-radius:0px;border:none;border-bottom:var(--totl-input-other-border);font-size:inherit;outline:none;font-size:12px;color:var(--totl-input-other-color)}
input[type="time"]:hover,input[type="number"]:hover,input[type="password"]:hover,input[type="text"]:hover,input:not([type]):hover{outline:none;border-bottom:var(--totl-input-number-hover-border);color:var(--totl-input-number-hover-color)}
input[type="time"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="text"]:focus,input:not([type]):focus{border-bottom:var(--totl-input-other-border-focus)}
input[type=url]{background:var(--totl-input-url-background);color:var(--totl-input-url-color);padding:10px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none;outline:none;font-size:13px}
/* special */
#multiopacitynumber{width:45px;padding:10px;background-color:var(--totl-input-other-multi-background);color:var(--totl-input-url-color);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none;outline:none;font-size:13px;height:auto}
#multiopacitynumber[disabled]{box-shadow:none;background-color:var(--totl-input-url-disabled-background);color:var(--totl-input-url-disabled-color)}
/* Disable url */
input[type=url][disabled]{box-shadow:none;background-color:var(--totl-input-url-disabled-background);color:var(--totl-input-url-disabled-color)}
/* Disable number */
input[type=number][disabled], input[type=password][disabled]{border:none;border-bottom:var(--totl-input-number-disabled-border);color:var(--totl-input-number-disabled-color)}
/* Disable text */
input[type=text][disabled]{border:none;border-bottom:var(--totl-input-text-disabled-border);color:var(--totl-input-text-disabled-color)}
/* Disable buttons */
button[disabled],input[type=button][disabled],input[type=submit][disabled],button[disabled]:hover,input[type=button][disabled]:hover,input[type=submit][disabled]:hover{box-shadow:none;background-color:var(--totl-button-disabled-background);color:var(--totl-button-disabled-color);cursor:default}
/* Modal */
#materialModal{font-family:Arial,sans-serif;position:fixed;bottom:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.5);display:table;z-index:1000}
#materialModalCentered{display:table-cell;vertical-align:middle;padding:20px}
#materialModalContent{border-radius:2px;padding:14px;position:relative;color:var(--totl-primary-font-color);background:var(--totl-primary-background);max-width:485px;min-height:200px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none}
#materialModalTitle{margin:10px;font-weight:bold;font-size:16px}
#materialModalText{margin:10px;margin-bottom:60px}
#materialModalButtons{width:calc(100% - 24px);position:absolute;bottom:0px}
.materialModalButton{-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:8px 0;float:right;background:0 0;border:none;border-radius:2px;color:#2296f3;position:relative;height:36px;min-width:64px;padding:0 16px;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px}
.materialModalButton:active{background-color:rgba(158,158,158,.4)}
.materialModalButton:hover{background-color:rgba(158,158,158,.2)}
#multiopacityaddbutton,#multiopacityremovebutton{max-width:135px;text-overflow:ellipsis;width:100%}
#materialModal.hide,#materialModalRate.hide{opacity:0;transition:opacity 0.2s ease-out;pointer-events:none;content-visibility:auto}
#materialModal.hide #materialModalCentered,#materialModalRate.hide #materialModalRateCentered,#materialModalYouTube.hide #materialModalYouTubeCentered{transform:scale(0.8);transition:transform 0.2s ease-out}
#materialModal.show,#materialModalRate.show{opacity:1;transition:opacity 0.2s ease-in}
#materialModal.show #materialModalCentered,#materialModalRate.show #materialModalRateCentered,#materialModalYouTube.show #materialModalYouTubeCentered{transform:scale(1);transition:transform 0.2s ease-in}
#materialModalRateTitle{margin:24px;font-weight:bold;font-size:16px}
#materialModalRateText{margin:24px;margin-bottom:60px}
#materialModalRateButtons{width:calc(100% - 8px);position:absolute;bottom:0px}
#materialModalRate{font-family:Arial,sans-serif;position:fixed;bottom:0px;left:0px;width:100vw;height:100vh;background:rgba(0,0,0,0.5);display:table;z-index:1000}
#materialModalRateCentered{display:table-cell;vertical-align:middle;padding:20px}
#materialModalRateContent{padding:0px;position:relative;color:var(--totl-primary-font-color);background:var(--totl-primary-background);max-width:450px;min-height:385px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:15px;overflow:hidden}
#materialModalYouTube.hide{opacity:0;transition:opacity 0.2s ease-out;pointer-events:none}
#materialModalYouTube.show{opacity:1;transition:opacity 0.2s ease-in}
#materialModalYouTubeContent img{margin:20px;filter:var(--totl-modal-youtube-logo)}
#materialModalYouTube{font-family:Arial,sans-serif;position:fixed;bottom:0px;left:0px;width:100vw;height:100vh;background:rgba(0,0,0,0.5);display:table;z-index:1000}
#materialModalYouTubeCentered{display:table-cell;vertical-align:middle;padding:20px}
#materialModalYouTubeContent{padding:0px;position:relative;color:var(--totl-primary-font-color);background:var(--totl-primary-background);max-width:450px;min-height:385px;margin:auto;box-shadow:0px 10px 20px 0px rgba(0,0,0,0.4);box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:15px;overflow:hidden}
#materialModalYouTubeTitle{margin:15px;font-size:18px}
#materialModalYouTubeText{margin:15px;margin-bottom:60px}
#materialModalYouTubeButtons{width:calc(100% - 12px);position:absolute;bottom:0px}
#materialModalYouTubeButtonOK{background:red;color:white;border-radius:5px}
#materialModalYouTubeButtonOK:hover{opacity:.7}
/* Rate */
.ratetitle{font-size:28px;font-family:Arial;display:flex;justify-content:center;padding:14px;margin:10px;text-align:center}
.ratedes{font-size:16px;font-family:Arial;display:flex;justify-content:center;margin-top:20px}
.starrating{display:flex;justify-content:center;margin:50px}
.desrate{display:flex;justify-content:center;margin:20px 24px;flex-direction:column;align-items:center}
.rateactiontext{display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:16px;text-align:center}
.rating:not(:checked) > input{position:absolute;top:-9999px;clip:rect(0,0,0,0)}
.rating:not(:checked) > label{float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:365%;line-height:1.2;color:#727272}
.rating:not(:checked) > label:before{content:'★ '}
.rating > input:checked ~ label{color:gold}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label{color:gold}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label{color:#ea0}
.rating > label:active{position:relative;top:2px;left:2px}
#materialModalRateButtonWriteOK,#materialModalButtonSupportOK{background:#4285f4;color:white;border-radius:5px}
#materialModalRateButtonWriteOK:hover,#materialModalButtonSupportOK:hover{opacity:.7}
/* About */
.aboutbuttons button{margin:15px 10px 0 0;display:inline-block}
#permullist{padding-inline-start:15px}
@keyframes slide-in{from{left:-280px}to{left:0}}
@keyframes slide-out{from{left:0}to{left:-280px}}
/* mobile */
@media only screen and (max-width:480px),
only screen and (max-device-width:480px){
  .search{display:none}
  #navbar-container{z-index:401;box-shadow:0 0 16px rgba(0,0,0,.28);animation:slide-out 0.5s ease;animation-fill-mode:forwards}
  body{min-width:auto;min-height:auto}
  #mainview{padding-left:0px}
  #mainview-content{max-width:100%;min-width:100%}
  section{-webkit-box-orient:vertical}
  #loadingcenter{width:230px}
  #progressbar{width:230px}
  #dont-turn-off-the-lights{width:100%;height:auto}
  .suggpanel{width:100%}
  .videopreview{width:100%;padding-right:0}
  .videopreview iframe{width:100%;height:auto}
  #toolbarwhitelist,#toolbarcustomplace{margin-left:0;width:100%}
  #toolbarwhitelist input,#toolbarcustomplace input[type=url]{width:100%;float:left}
  #toolbarwhitelist select{width:100%;margin-right:0px}
  #toolbarcustomplace select{width:100%;margin-right:0px;min-height:300px}
  #ayh{font-size:12px;right:15px}
  #tllo{font-size:11px;top:26px;right:15px}
  .stars{font-size:24px;top:14px;left:15px}
  #nt{left:15px}
  #war{right:15px}
  .minibrowserpreview{flex-direction:column;justify-content:flex-start;align-items:flex-start}
  #materialModal.hide #materialModalCentered,#materialModalRate.hide #materialModalRateCentered,#materialModalYouTube.hide #materialModalYouTubeCentered{transform:translateY(200px);transition:transform 0.2s ease-out}
  #materialModalCentered,#materialModalRateCentered,#materialModalYouTubeCentered{padding:0}
  #materialModalContent,#materialModalRateContent,#materialModalYouTubeContent{max-width:none;width:100vw;margin-top:5vh;left:0;bottom:0;position:absolute;border-radius:25px 25px 0 0}
  #materialModal.show #materialModalCentered,#materialModalRate.show #materialModalRateCentered{transform:translateY(0px);transition:transform 0.2s ease-in}
  .aboutbuttons button{margin:15px 0;display:block}
  #managed-prefs-banner{height:52px}
  .donatebutton{padding:8px 16px}
  .proboxtext{flex-direction:column}
  /* for mobile only */
  input[type=checkbox]:checked ~ #navbar-container{display:block;animation:slide-in 0.5s ease;animation-fill-mode:forwards}
  input[type=checkbox]:checked ~ #darkpanel{opacity:1;display:block;pointer-events:auto}
}
@media only screen and (max-height:330px){
  #navbar-container{overflow:scroll}
}
@media only screen and (max-width:480px),
only screen and (max-device-width:480px) and (orientation:portrait){
  #dont-turn-off-the-lights{width:100%;height:auto;aspect-ratio:16/9}
}
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .layui-card-header {
            margin-top: 5px;
            display: flex;
            align-items: center;
            /* 垂直居中 */
            height: 70px;
        }

        .word-frequency {
            height: 70px;
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            /* 垂直居中 */
        }

        .yizhengpinclassn {
            display: flex;
            align-items: center;
            /*所有子元素都垂直居中了*/
            justify-content: center;
            /* margin-top: 200px; */
            height: 400px;
        }

        .yizhengpinclassn2 {
            display: flex;
            align-items: center;
            /*所有子元素都垂直居中了*/
            justify-content: center;
            margin-bottom: 150px;
            height: 200px;
        }

        .yizhengpinclassqq {
            display: flex;
            justify-content: center;
            height: 300px;
        }

        .word-frequency2touxiang {
            border-radius: 50%;
        }

        .zhichi {
            font-size: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        h1 {
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .tupian {
            border-radius: 5%;
            margin-top: 30px;
        }

        p {
            font-size: 20px;
        }

        .word-frequency2 {
            margin-left: 20px;
            font-size: 30px;
        }

        .kaifazhezhanghao {
            margin-top: 20px;
            font-size: 20px;
        }

        .banquansuoyou {
            margin-top: 105px;
            margin-bottom: 105px;
            font-size: 20px;
        }

        .qq {
            display: flex;
            align-items: center;
            /*所有子元素都垂直居中了*/
            justify-content: center;
            height: 550px;
            flex-direction: column;
        }

        .jieshao {
            display: flex;
            align-items: center;
            /*所有子元素都垂直居中了*/
            justify-content: center;
            margin-top: 400px;
            height: 100px;
        }

        .yinxang {
  display: none;
        }
        .guanyuyincang {
  display: none;
        }
        .managed-prefs-banner {
  display: none;
        }
