@charset "UTF-8";

:root {
    --primary: #36b0a4;
    --primary1: #2C6DCC;
    --primary-dark: #267b73;
    --primary-light: #81d9d0;
    --primary-bg: #c8eeea;
    --bs-primary-rgb: 54, 176, 164;
    --primary-bg-light: #e9f8f7;


    --secondary: #36B0A4;
    --secondary-dark: #1c686e;
    --secondary-light: #53aab1;
    --secondary-light-text: #111;
    --secondary-bg: #e1f7f8;

    --text-gray: #adadad;
    --text-gray-light: #b8b8b8;

    --bs-body-font-size: 1rem;
    --bs-body-color: #101414;
    --bs-border-color: #e9e8e7;
    --app-secondary: #252627;

    --app-nav-bg: #f6f7f8;
    --app-nav-border-color: #edeeef;

    --success: #2CCC59;

    --info: #2CB6CC;

    --warning: #CC2C46;
    --warning-rgb: 204, 44, 70;
    --link-hover: #267b73;

    --bs-info: #0daac8;
    --bs-info-rgb: 13, 170, 200;
    --bs-border-radius: 3px;
    --bs-secondary-rgb: 105, 105, 105;
    --bs-secondary-color: #6a6c6e;

    /** style0 **/
    --hl-color-primary: #4cc8bc;
    --hl-color-primary-bg: #dbf4f2;
    --hl-color-red: #ff3b30;
    --hl-color-red-dark: #fdedeb;
    --hl-color-red-bg: #fbdbd8;

    --hl-color-orange: #F8B95D;
    --hl-color-orange-dark: #d9913c;
    --hl-color-orange-bg: #fef8ef;
    --hl-color-orange-alpha: #F8B95D80;

    --hl-color-yellow: #d8da82;
    --hl-color-yellow-bg: #fbfbf3;
    --hl-color-yellow-dark: #97985b;

    --hl-color-pink: #fd96b7;
    --hl-color-pink-bg: #fbf2f8;
    --hl-color-pink-dark: #E45E9D;

    --hl-color-blue: #8cbcfc;
    --hl-color-blue-bg: #f4f8ff;
    --hl-color-blue-dark: #7597d2;

    --hl-color-purple: #c9b3e8;
    --hl-color-purple-bg: #f6f2fb;
    --hl-color-purple-dark: #a581d8;

    --hl-color-green: #b4d981;
    --hl-color-green-bg: #f3fcf2;
    --hl-color-green-dark: #66b15d;
    --hl-color-grey: #dadada;
    --hl-color-gray: #dadada;

    --mark-color-bg: #ffdb59;

    --app-gray1: #666;
    --app-gray2: #888;
    --app-gray3: #aaa;
    --app-gray4: #bbb;
    --app-gray5: #ccc;
    --app-gray6: #e3e4e5;
    --app-gray7: #ecedef;
    --app-gray8: #f8f9fa;


    --tagify-dd-color-primary: rgb(53, 149, 246);
    --tagify-dd-text-color: black;
    --tagify-dd-bg-color: white;
    --tagify-dd-item-pad: .3em .5em;
    --tagify-dd-max-height: 300px
}

.btn-primary {
    --bs-btn-disabled-bg: #53aab1;
    --bs-btn-disabled-border-color:#53aab1;
}

[data-bs-theme=light] {
    --bd-purple: #4c0bce;
    --bd-violet: #712cf9;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
    --bd-teal-rgb: 32, 201, 151;
    --bd-violet-bg: var(--bd-violet);
    --bd-toc-color: var(--bd-violet);
    --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
    --bd-callout-link: 10, 88, 202;
    --bd-callout-code-color: #ab296a;

    table.table {
        border-color: #f1f2fa;
    }
}

[data-bs-theme=dark] {
    --primary: #267b73;
    --primary-dark: #36B0A4;
    --link-hover: #36B0A4;

    --bd-violet: #9461fb;
    --bd-violet-bg: #712cf9;
    --bd-toc-color: var(--bs-emphasis-color);
    --bd-sidebar-link-bg: rgba(84, 33, 187, .5);
    --bd-callout-link: 110, 168, 254;
    --bd-callout-code-color: #e685b5;
    --bd-pre-bg: #1b1f22;

    --bs-body-color: #dee2e6;
    --bs-border-color: #495057;
    --app-nav-bg: #101315;
    --app-nav-border-color: #34373a;

    --hl-color-red-bg: rgba(234, 76, 58, .08);
    --hl-color-orange-bg: rgba(217, 145, 60, .06);
    --hl-color-yellow-bg: rgba(151, 152, 91, .1);
    --hl-color-pink-bg: rgba(216, 129, 180, .07);
    --hl-color-blue-bg: rgba(117, 151, 210, .09);
    --hl-color-purple-bg: rgba(165, 129, 216, .07);
    --hl-color-green-bg: rgba(102, 177, 93, .08);

    .navbar.fixed-top {
        border-bottom: 0.75px solid #34373a;
        background-color: var(--app-nav-bg);
    }

    #note-filter {
        background-color: #171a1d;
    }

    a.hl-book-title {
        color: #e3e6e9;
    }

    .tagify {
        --placeholder-color: rgba(250, 250, 250, 0.4);
        --placeholder-color-focus: rgba(250, 250, 250, 0.25);
    }

    .share-html-text #quote-title,
    .share-html-mark #quote-title,
    .share-html-text #quote-author,
    .share-html-mark #quote-author,
    .share-html-text #site-logo,
    .share-html-mark #site-logo,
    .share-html-mark #quote-lines hl,
    .share-html-text #quote-lines hl {
        color: #101414;
    }
}

.dropdown-toggle.indicator::after {
    display: inline-block !important;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.btn-primary {
    --bs-btn-bg: #36b0a4;
    --bs-btn-active-bg: #36b0a4;
    --bs-btn-active-border-color: #36b0a4;
    --bs-btn-hover-bg: #267b73;
    --bs-btn-hover-border-color: #267b73;
}

.btn-outline-primary {
    --bs-btn-color: #36b0a4;
    --bs-btn-border-color: #267b73;
    --bs-btn-active-bg: #36b0a4;
    --bs-btn-active-border-color: #36b0a4;
}

.form-control:focus {
    box-shadow: 0 0 0 !important;
    border-color: var(--secondary);
}

.hor-center {
    display: flex;
    align-items: center;
}

.inline-hor-center {
    display: flex;
    align-items: center;
}

.vert-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inline-vert-center {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

th,
td {
    min-width: 50px
}

@font-face {
    font-family: "readmomobs";
    src: url("fonts/readmomobs.eot");
    src: url("fonts/readmomobs.eot?#iefix") format("embedded-opentype"),
        url("fonts/readmomobs.woff?0") format("woff"),
        url("fonts/readmomobs.ttf?0") format("truetype"),
        url("fonts/readmomobs.svg#readmomobs") format("svg");
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: "readmomobs" !important;
    content: attr(data-icon);
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    text-align: center;
}

.dropdown-toggle .icon::before,
[class^="rb-"]:before,
[class*=" rb-"]:before {
    font-family: "readmomobs" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    text-align: center;
}

.rb-amazon:before { content: "\61"; }
.rb-android:before { content: "\62"; }
.rb-apple:before { content: "\63"; }
.rb-at:before { content: "\64"; }
.rb-ban:before { content: "\65"; }
.rb-bell:before { content: "\66"; }
.rb-bell-slash:before { content: "\67"; }
.rb-bug:before { content: "\68"; }
.rb-check:before { content: "\69"; }
.rb-check-lg:before { content: "\6a"; }
.dropdown-toggle .icon::before, .rb-angle-down:before { content: "\6b"; }
.dropdown-toggle.show .icon::before, .rb-angle-left:before { content: "\6c"; }
.rb-angle-right:before { content: "\6d"; }
.rb-angle-up:before { content: "\6e"; }
.rb-cloud-download:before { content: "\6f"; }
.rb-cloud-upload:before { content: "\70"; }
.rb-copy:before { content: "\71"; }
.rb-download:before { content: "\72"; }
.rb-emoji-smile:before { content: "\73"; }
.rb-emoji-sunglasses:before { content: "\74"; }
.rb-eye:before { content: "\75"; }
.rb-eye-slash:before { content: "\76"; }
.rb-filter1:before { content: "\77"; }
.rb-filter-1:before { content: "\78"; }
.rb-fonts:before { content: "\79"; }
.rb-gear:before { content: "\7a"; }
.rb-gift:before { content: "\41"; }
.rb-github:before { content: "\42"; }
.rb-globe:before { content: "\43"; }
.rb-google:before { content: "\44"; }
.rb-list:before { content: "\45"; }
.rb-list-ol:before { content: "\ea11"; }
.rb-list-ul:before { content: "\ea15"; }
.rb-music-note:before { content: "\48"; }
.rb-paypal:before { content: "\49"; }
.rb-pencil:before { content: "\4a"; }
.rb-pencil1:before { content: "\4b"; }
.rb-people:before { content: "\4c"; }
.rb-user:before { content: "\4d"; }
.rb-quote:before { content: "\4e"; }
.rb-receipt:before { content: "\4f"; }
.rb-share:before { content: "\50"; }
.rb-sliders:before { content: "\51"; }
.rb-fav0:before { content: "\52"; }
.rb-fav1:before { content: "\53"; }
.rb-stripe:before { content: "\54"; }
.rb-telegram:before { content: "\55"; }
.rb-toggle-off:before { content: "\56"; }
.rb-toggle-on:before { content: "\57"; }
.rb-twitter-x:before { content: "\58"; }
.rb-type-bold:before { content: "\ea0a"; }
.rb-type-italic:before { content: "\ea0f"; }
.rb-type-strike:before { content: "\ea13"; }
.rb-type-underline:before { content: "\ea16"; }
.rb-upload:before { content: "\32"; }
.rb-x:before { content: "\33"; }
.rb-x-lg:before { content: "\34"; }
.rb-alipay:before { content: "\35"; }
.rb-search:before { content: "\36"; }
.rb-dash:before { content: "\37"; }
.rb-plus:before { content: "\38"; }
.rb-filter:before { content: "\77"; }
.rb-share1:before { content: "\46"; }
.rb-markdown:before {content: "\47";}
.rb-book1:before {content: "\5a";}
.rb-book:before {content: "\30";}
.rb-notion:before {content: "\31";}
.rb-gdrive:before {content: "\39";}
.rb-onenote:before {content: "\21";}
.rb-sync:before {content: "\22";}
.rb-evernote:before {content: "\23";}
.rb-instagram:before { content: "\59"; }

html {
    -webkit-font-smoothing: antialiased;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 15px;
}

@media (max-width:720px) {
    html {
        font-size: 15px;
    }
}

/* body {background: #fff url(/static/images/paper.png); background-size: 8px 8px;} */
body,
ul.fancytree-container {
    font-family: PingFangSC, "helvetica neue", "hiragino sans gb", arial, "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;
}

th {
    font-weight: 600;
}

td {
    color: #444;
    vertical-align: middle;
    padding: .3em .5em
}

.media-list td {
    vertical-align: top;
}

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width:1200px) {

    .h1,
    h1 {
        font-size: 3rem;
    }
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; }
h3.page-title {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.4;
    overflow: hidden;
    max-width: 40em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a, .page-link {
    color: var(--primary);
    outline: none;
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

a.disabled, a.disabled:visited {
    color: var(--gray)
}

.btn.btn-round {
    border-radius: 3rem;
}

.btn-lg {
    font-weight: 500;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


.page-media-list td {
    min-width: auto;
}

.page-media-list p {
    margin-bottom: .5rem;
}

.page-media-list p.date-read {
    margin-top: .35rem;
}

.footer-navlink a, .sidebar a.nav-link, footer, .social-icons a {
    color: var(--bs-secondary-color);
}

.page-media-list .md-title:hover {
    color: var(--primary);
}

td p:last-child {
    margin-bottom: 0;
}

.developers main { min-height: calc(100vh - 160px);}
div.code {
  white-space: pre;
}
.hljs-attr, .p-required {
  color: var(--hl-color-orange-dark) !important;
}
.hljs-string, .hljs-number {
    color: var(--bs-secondary-color);
}
.hljs-punctuation, .hljs-tag {
    color: var(--bs-secondary-color);
}

nav a.text-secondary:hover,
nav a.text-secondary:active {
    color: var(--bs-body-color) !important;
}

.bootbox.modal .modal-header {
    border-bottom-width: 0;
}

.bootbox.modal .modal-footer {
    border-top-width: 0;
}

.text-black {
    color: #000;
}

.media-add-tabs a {
    color: var(--bs-secondary-color);
}

.bootbox-accept {
    min-width: 4.4rem;
}

.newaddpage .nav-link.new-add,
.newsyncpage .nav-link.new-sync,
.newimportpage .nav-link.new-import {
    color: var(--bs-body-color);
    border-bottom-width: 1px;
    border-bottom-color: var(--bs-body-color);
}

.media-add-hr {
    margin-top: -1.7px !important;
    border-color: var(--bs-border-color);
    opacity: 1;
}

.media-meta .col-form-label {
    min-width: 4.2rem;
    font-weight: 500;
}

.mediaaddpage h6 {
    font-weight: 500;
}

.input-symbol::first-line {
    display: inline-block;
}

#hl-preview {
    min-height: 30vh;
    max-height: 60vh;
    overflow: scroll;
}

.flex-equal>* {
    flex: 1;
}

.home-intro-img {
    width: 90%;
    max-width: 803px;
}

@media (min-width: 768px) {
    .flex-md-equal>* { flex: 1; }
    .home-intro-img { min-height: 400px; }
}

.home-page .text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.input-symbol {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0 !important;
    border-bottom-color: var(--bs-body-color);
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.media-meta input,
.media-meta select {
    min-width: 15rem;
}

input.input-symbol {
    width: 2.3rem;
    height: 20px;
    padding-top: 11px;
}

.note-hl-content p:last-child {
    margin-bottom: 0 !important;
}

#navbarScroll {
    font-size: 15px;
}

#subYearly {
    margin-top: .5rem;
}

input.form-control {
    border-radius: 3px;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.userlanguage {
    /* color: var(--primary); */
}

.rb-globe:before {
    vertical-align: text-bottom;
}

main[role="main"] {
    border: 0px solid #edeeef;
    /* border-radius: 5px; */
    padding: 15px 10px;
    margin-top: 50px;
    margin-bottom: 15px;
    min-height: calc(100vh - 178px);
}

.container {
    max-width: 1024px;
}

main.container a:hover {
    text-decoration: none;
}

.widthmobile main.container {
    width: 95%;
    max-width: 820px;
}

.widthmobile.book-shareview main.container {
    width: 95%;
    max-width: 720px;
}

li.smscreen {
    display: none !important;
}

.note-content-row .rb-share,
.note-content-row .rb-share1,
.note-content-row .rb-fav0 {
    display: none;
}

nav a,
nav .nav-link {
    font-size: 15px;
    color: var(--bs-body-color);
}

.book-shareview .navbar-nav {
    display: none;
}

main:has(.signin-container) {
    display: flex;
    flex-direction: column;
}

@media (min-width:720px) {}

@media (max-width:720px) {
    .widthmobile main.container {
        width: 100%;
        max-width: 100%;
    }

    .widthmobile.book-shareview .container {
        width: 100%;
    }

    .media-title-section {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    .signin-area {
        padding-left: 2px;
        padding-right: 2px;
        margin-top: .5rem;
        margin-right: 0.25rem;
    }

    .navbar-nav a.nav-link.px-3 {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .media-meta .d-flex {
        flex-wrap: wrap;
    }

    .media-meta .d-break.d-none {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

    .media-meta input.form-control {
        width: auto;
    }

    .media-meta .mob-grow {
        flex-grow: 1 !important;
    }

    .highlightpage main[role="main"],
    .mediapage main[role="main"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .highlightpage .container,
    .mediapage .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .headline,
    .note-item,
    .note-date,
    .note-book-title {
        padding-left: 15px;
        padding-right: 15px;
    }

    #note-filter {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    #searchContent {
        max-width: 40vw;
    }

    .action-opts .rb-share,
    .action-opts .rb-share1,
    .action-opts .rb-fav0 {
        display: inline-block;
    }

    .note-content-row:hover .smscreen.rb-share,
    .note-content-row:hover .smscreen.rb-share1,
    .note-content-row:hover .smscreen.rb-fav0 {
        display: none;
    }

    li.smscreen {
        display: block !important;
    }

    footer .text-end {
        text-align: left !important;
    }
}

nav.navbar.fixed-top {
    height: 50px;
}

.main-container {
    background-color: #fff;
    padding: 5px 15px;
}

a.navbar-brand {
    display: inline-block;
    max-width: 220px;
    padding-left: 15px;
    line-height: 1;
}

a.hover-bold:hover {
    text-decoration: none;
    font-weight: 600;
}

label.md-item-cover:hover {
    cursor: pointer;
}

.bootbox-accept:hover, .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.btn-check+.btn-primary:hover {
    border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-disabled-border-color: #81d9d0;
}

.btn-outline-primary:hover {
    color: var(--primary-dark);
    background-color: var(--primary-bg);
    border-color: var(--primary-light);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--primary-bg);
    border-color: var(--primary-light);
}

.text-primary {
    color: var(--primary) !important;
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.book-author {
    font-size: 1.125rem;
}

.text-gray, .text-grey {
    color: #999
}

.btn-accent {
    background-color: var(--bd-accent);
    box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), 0.15),0 0.25rem 1.5rem rgba(var(--bs-body-bg-rgb), 0.75);
}

table.table {
    border-top: 0px solid #a4a4a4;
    border-left: 0px solid rgba(0, 0, 0, .06);
    border-right: 0px solid rgba(0, 0, 0, .06);
}

.table thead:nth-child(1) {
    background-color: #f9fafd;
}

.table>:not(caption)>*>* {
    box-shadow: none;
}

/* .table {border: 0px solid #eaedef;} */
tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .015);
}

tbody tr:hover {
    background-color: #f6f7fb !important;
}

.form-control, .form-select, .btn {border-radius: .21rem;}

table.table thead>*>* {
    padding: .75rem .5rem
}

table.pricing td:not(:first-child) {
    text-align: center;
}

.modal-body {
    padding: 1.5rem 1rem
}

.container-fluid {
    /* padding-left: 0;
    padding-right: 0; */
}

.navbar.fixed-top {
    border-bottom: 1px solid var(--app-nav-border-color);
    background: var(--app-nav-bg);
}

body>footer {
    border-top: 1px solid var(--app-nav-border-color);
    background-color: var(--app-nav-bg);
}

.mediapage h1.book-title {
    font-size: 2.25rem;
}

.d-footer-none>footer {
    display: none;
}

.navbar .container-fluid {
    max-width: 1160px;
}

@media (min-width:1400px) { 
    .container {
        max-width: 1160px;
    }
}

h5.mt-4:first-child {
    margin-top: .5rem !important;
}

.hl-book-title {
    font-weight: 700;
    color: #000;
}

#regioninfo {
    display: none;
}

.note-highlight {
    position: relative;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--hl-color-orange);
    padding-left: 9px;
}

.note-item[class*="mark-style"] .note-highlight {
    border-left-width: 0;
    padding-left: 0;
}

.note-note {
    margin-top: .75rem !important;
}

.note-item:has(tags) .note-content-row.py-4 {
    padding-bottom: .75rem !important;
}

#note-filter {
    position: sticky;
    top: 50px;
    background-color: #fafbfd;
    margin-top: -1.25rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 999;
}

#note-filter>div {
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
}

#noteSearch {
    cursor: pointer;
}

.cherry-editor .CodeMirror-lines {
    padding: 15px 15px !important;
}

.cherry-previewer {
    padding: 15px 15px 15px 15px !important;
}

.cherry.theme__light .cherry-previewer {
    background-color: #f6f7fb !important;
}

.cherry-toolbar {
    padding: 0 5px !important;
}

.ch-icon {
    /* line-height: 32px !important; */
}

.cherry-toolbar-ok,
.cherry-toolbar-close {
    padding: 6px 12px 4px !important;
}

.ch-icon:before {
    line-height: 26px !important;
}

.ch-icon-ok,
.ch-icon-close {
    font-size: 20px;
}

.signin-opts {
    width: 300px;
    margin: 0 auto
}

.signin-opts [role="button"] {
    width: 100%;
    max-width: 300px;
    margin: .65rem auto;
    padding: .475rem;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    transition: background-color .218s;
    font-size: 14px;
}

.signin-opts [role="button"]:hover, .signin-opts [role="button"]:focus{
    border-color: var(--primary-light);
    background-color: var(--primary-bg-light);
}

.signin-opts [role="button"] a {
    color: var(--bs-body-color);
}

.signin-opts .g_id_signin [role="button"] {
    padding-left: .67rem;
}

.email-signin {
    width: 80%;
    max-width: 300px;
    margin: .65rem auto;
}

.signin-opts a:is(:hover, :active, :focus) {
    text-decoration: none;
}

.signin-opts .icon {
    width: 24px;
    height: 24px;
    margin-left: .25rem;
}

.chkbox {
    width: 75%;
    margin: 0 auto;
}

.signin-opts .icon::before {
    display: inline-block;
    width: 24px;
    height: 24px;
    content: " ";
    overflow: hidden;
    background-repeat: no-repeat;
}

.signin-email-box,
.signin-email-box .input-group,
#signup-email-box {
    width: 80%;
    max-width: 360px;
    margin: 0 auto;
}

.signin-email-box .btn,
#signup-email-box .btn {
    border-radius: 2rem;
    padding-right: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.signin-email-box input.form-control,
#signup-email-box input.form-control {
    border-right-width: 0 !important;
    border-radius: 2rem;
    padding-left: 1rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#signup-email:focus {
    border-right-width: 0;
}

.form-floating.email-input,
#signup-email1 {
    max-width: 240px;
    margin: 0 auto;
}

.signin-amazon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iODQiIHZpZXdCb3g9IjAgMCA4NCA4NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+aWNuLWFtYXpvbi1hPC90aXRsZT48cGF0aCBkPSJNNDEuNjk4IDgzLjI3MWMtMTUuNjIyIDAtMjkuNjkxLTUuNzc1LTQwLjMzNy0xNS4zODgtLjgzNi0uNzU1LS4wOS0xLjc4NS45MTUtMS4yIDExLjQ4NSA2LjY4MyAyNS42OSAxMC43MDggNDAuMzYgMTAuNzA4IDkuODk2IDAgMjAuNzc1LTIuMDU0IDMwLjc4NS02LjMgMS41MS0uNjQgMi43NzUuOTk1IDEuMjk4IDIuMDg3QzY1Ljc5IDc5Ljc2NyA1Mi44NDUgODMuMjcgNDEuNjk4IDgzLjI3ek02Ny45NSA2OC43MTdjLS44NzIuMTA0LTEuMDA3LS42NTgtLjIyMi0xLjIxIDUuMTEyLTMuNTkgMTMuNDg3LTIuNTUzIDE0LjQ2LTEuMzUuOTggMS4yMTItLjI1OCA5LjYwOC01LjA0NyAxMy42MTUtLjczNy42MTYtMS40MzguMjg3LTEuMTExLS41MjYgMS4wNzgtMi42OTIgMy40OS04LjcxOCAyLjM0OC0xMC4xODEtMS4xNDMtMS40NjItNy41NS0uNjkzLTEwLjQyOC0uMzQ4em0tNy40MTQtNC4xODJjLS43NTYuNjgtMS44NTMuNzI1LTIuNzA3LjI2Ni0zLjgwOC0zLjE2My00LjQ5LTQuNjI0LTYuNTY5LTcuNjM3LTYuMjkzIDYuNDA5LTEwLjc0NyA4LjMzMi0xOC44OTQgOC4zMzItOS42NDkgMC0xNy4xNTMtNS45NTYtMTcuMTUzLTE3Ljg2MyAwLTkuMzAzIDUuMDM3LTE1LjYyOCAxMi4yMjEtMTguNzI5IDYuMjE3LTIuNzMgMTQuOTAyLTMuMjI2IDIxLjU0Ny0zLjk3MnYtMS40ODhjMC0yLjczLjIxNi01Ljk1Mi0xLjM5MS04LjMxLTEuMzk2LTIuMTEtNC4wNzYtMi45NzgtNi40MzMtMi45NzgtNC4zNzEgMC04LjI2IDIuMjM5LTkuMjEgNi44OC0uMiAxLjAzNC0uOTU0IDIuMDU3LTEuOTkyIDIuMTFsLTExLjEwNy0xLjIwNGMtLjk0LS4yMTMtMS45ODItLjk2My0xLjcxMi0yLjM5N0MxOS42ODggNC4wNyAzMS44NTcgMCA0Mi43NjQgMGM1LjU3NSAwIDEyLjg2NSAxLjQ4NyAxNy4yNiA1LjcwNiA1LjU3NSA1LjIxIDUuMDQgMTIuMTU3IDUuMDQgMTkuNzI2djE3Ljg1YzAgNS4zNzMgMi4yMyA3LjcyOCA0LjMyNCAxMC42Mi43MyAxLjA0NS44OTcgMi4yODQtLjAzNiAzLjA0N2E0ODcuNzIzIDQ4Ny43MjMgMCAwIDAtOC43OSA3LjYxMmwtLjAyNi0uMDI2ek00OC45OCAzNi41OTNjMCA0LjQ2Ny4xMDggOC4xODYtMi4xNDMgMTIuMTU3LTEuODIxIDMuMjIzLTQuNzE3IDUuMjEtNy45MzQgNS4yMS00LjM5MyAwLTYuOTY4LTMuMzUtNi45NjgtOC4zMTIgMC05Ljc2MSA4Ljc1Ny0xMS41MzUgMTcuMDQ1LTExLjUzNXYyLjQ4eiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.signin-facebook {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBjbGFzcz0iYnQiPjxnIGlkPSJmYWNlYm9vayI+PGcgaWQ9ImZhY2Vib29rLXZlY3RvciI+PHBhdGggZmlsbD0iIzE4NzdGMiIgZD0iTTIyIDEyLjAwMmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwcy0xMCA0LjQ3Ny0xMCAxMGMwIDQuOTkxIDMuNjU3IDkuMTI4IDguNDM4IDkuODc5di02Ljk4OGgtMi41NHYtMi44OTFoMi41NFY5Ljc5OWMwLTIuNTA2IDEuNDkyLTMuODkgMy43NzctMy44OSAxLjA5NCAwIDIuMjM4LjE5NSAyLjIzOC4xOTV2Mi40NmgtMS4yNmMtMS4yNDMgMC0xLjYzLjc3MS0xLjYzIDEuNTYydjEuODc2aDIuNzczbC0uNDQzIDIuODloLTIuMzN2Ni45ODljNC43OC0uNzUgOC40MzctNC44ODggOC40MzctOS44NzkiPjwvcGF0aD48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMTUuODkzIDE0Ljg5My40NDMtMi44OTFoLTIuNzczdi0xLjg3NmMwLS43OS4zODctMS41NjIgMS42My0xLjU2MmgxLjI2di0yLjQ2cy0xLjE0NC0uMTk2LTIuMjM4LS4xOTZjLTIuMjg0IDAtMy43NzcgMS4zODUtMy43NzcgMy44OXYyLjIwNGgtMi41NHYyLjg5aDIuNTR2Ni45ODlhMTAgMTAgMCAwIDAgMy4xMjQgMHYtNi45ODh6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=');
}

.signin-google {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBjbGFzcz0iYnQiPjxnIGlkPSJnb29nbGUiPjxnIGlkPSJnb29nbGUtdmVjdG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PHBhdGggaWQ9IlNoYXBlIiBmaWxsPSIjNDI4NUY0IiBkPSJNMjAuNjQgMTIuMjA1cS0uMDAyLS45NTctLjE2NC0xLjg0SDEydjMuNDhoNC44NDRhNC4xNCA0LjE0IDAgMCAxLTEuNzk2IDIuNzE3djIuMjU4aDIuOTA4YzEuNzAyLTEuNTY3IDIuNjg0LTMuODc0IDIuNjg0LTYuNjE1Ij48L3BhdGg+PHBhdGggaWQ9IlNoYXBlXzIiIGZpbGw9IiMzNEE4NTMiIGQ9Ik0xMiAyMWMyLjQzIDAgNC40NjgtLjgwNiA1Ljk1Ny0yLjE4TDE1LjA1IDE2LjU2Yy0uODA2LjU0LTEuODM3Ljg2LTMuMDQ4Ljg2LTIuMzQ0IDAtNC4zMjgtMS41ODQtNS4wMzYtMy43MTFIMy45NTh2Mi4zMzJBOSA5IDAgMCAwIDEyLjAwMSAyMSI+PC9wYXRoPjxwYXRoIGlkPSJTaGFwZV8zIiBmaWxsPSIjRkJCQzA1IiBkPSJNNi45NjQgMTMuNzEyYTUuNCA1LjQgMCAwIDEtLjI4Mi0xLjcxYzAtLjU5My4xMDItMS4xNy4yODItMS43MVY3Ljk2SDMuOTU3QTkgOSAwIDAgMCAzIDEyLjAwMmMwIDEuNDUyLjM0OCAyLjgyNy45NTcgNC4wNDJ6Ij48L3BhdGg+PHBhdGggaWQ9IlNoYXBlXzQiIGZpbGw9IiNFQTQzMzUiIGQ9Ik0xMiA2LjU4YzEuMzIyIDAgMi41MDguNDU1IDMuNDQxIDEuMzQ2bDIuNTgyLTIuNThDMTYuNDYzIDMuODkyIDE0LjQyNyAzIDEyIDNhOSA5IDAgMCAwLTguMDQzIDQuOTU4bDMuMDA3IDIuMzMyYy43MDgtMi4xMjcgMi42OTItMy43MSA1LjAzNi0zLjcxIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=');
}

.signin-apple {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBjbGFzcz0iYnQiPjxnIGlkPSJhcHBsZSI+PHBhdGggaWQ9ImFwcGxlLXZlY3RvciIgZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTguNTIgOC4yM2MtLjEwNi4wODYtMS45OTMgMS4xODMtMS45OTMgMy42MiAwIDIuODIgMi40MDEgMy44MTggMi40NzMgMy44NDMtLjAxMS4wNi0uMzgxIDEuMzY2LTEuMjY2IDIuNjk2LS43ODggMS4xNy0xLjYxMiAyLjM0LTIuODY1IDIuMzRzLTEuNTc1LS43NTEtMy4wMjItLjc1MWMtMS40MSAwLTEuOTEuNzc1LTMuMDU2Ljc3NVM2Ljg0NSAxOS42NyA1LjkyNSAxOC4zNEM0Ljg2IDE2Ljc3OCA0IDE0LjM1IDQgMTIuMDQ4YzAtMy42OTQgMi4zMjktNS42NTMgNC42MjEtNS42NTMgMS4yMTggMCAyLjIzMy44MjUgMi45OTguODI1LjcyOCAwIDEuODYzLS44NzQgMy4yNDgtLjg3NC41MjUgMCAyLjQxMi4wNSAzLjY1NCAxLjg4NW0tNC4zMS0zLjQ0OGMuNTcyLS43MDEuOTc4LTEuNjc0Ljk3OC0yLjY0NyAwLS4xMzUtLjAxMS0uMjcyLS4wMzUtLjM4Mi0uOTMzLjAzNi0yLjA0Mi42NC0yLjcxIDEuNDQtLjUyNi42MTYtMS4wMTYgMS41ODktMS4wMTYgMi41NzUgMCAuMTQ4LjAyNC4yOTYuMDM1LjM0NGExLjQgMS40IDAgMCAwIC4yNS4wMjVjLjgzNyAwIDEuODktLjU3OCAyLjQ5Ny0xLjM1NSI+PC9wYXRoPjwvZz48L3N2Zz4=');
}

.signin-x {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBjbGFzcz0iYnQiPjxwYXRoIGZpbGw9IiMyNDI0MjQiIGQ9Ik0xMy4zNDYgMTAuOTMyIDE4Ljg4IDQuNWgtMS4zMTFsLTQuODA1IDUuNTg1TDguOTI2IDQuNUg0LjVsNS44MDMgOC40NDZMNC41IDE5LjY5aDEuMzExbDUuMDc0LTUuODk4IDQuMDUzIDUuODk4aDQuNDI2ek0xMS41NSAxMy4wMmwtLjU4OC0uODQtNC42NzgtNi42OTNoMi4wMTRsMy43NzYgNS40LjU4OC44NDIgNC45MDcgNy4wMmgtMi4wMTR6Ij48L3BhdGg+PC9zdmc+');
}

.signin-email {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0IiBjbGFzcz0iYnQiPjxnIGlkPSJlbWFpbC1pY29uIj48ZyBpZD0iR3JvdXAgMTAxMjMiIHN0cm9rZT0iIzI0MjQyNCI+PHJlY3QgaWQ9IlJlY3RhbmdsZSAxNDg4IiB3aWR0aD0iMTciIGhlaWdodD0iMTMiIHg9IjMuNSIgeT0iNS41MDUiIHJ4PSIxIj48L3JlY3Q+PHBhdGggaWQ9IlZlY3RvciAxMDciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTMuNSA4LjAwNSA4LjUgNiA4LjUtNiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+');
}


.btn-outline-primary.disabled,
.btn-outline-primary:disabled { color: var(--primary);}

.filter-fav::before { font-size: 21px; line-height: 29px;}
.hl-fav1.rb-fav1,.filter-fav {color: var(--hl-color-orange);}

#bkreviewlast { }

#price-tier.row>* {
    padding-left: calc(var(--bs-gutter-x) * .2);
    padding-right: calc(var(--bs-gutter-x) * .2);
}

#price-tier .list-group-flush>.list-group-item {
    border-width: 0 0 0px;
    padding: .27rem .3rem;
    font-size: 13px;
}

#price-tier .price-tag { }
#price-tier ul { border-top: 0; border-bottom: 0; }

#price-tier .card:hover {
    border-color: var(--primary);
    box-shadow: 0 .25rem .375rem rgba(23, 174, 136, 0.05) !important;
    transition: border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.btn.do-order {min-width: 130px;}

#price-tier .card:hover .price-tag {
    background-color: var(--primary);
    color: #fff;
    transition: color .15s ease-in-out,
        background-color .15s ease-in-out;
}

#price-tier .fs-2 {letter-spacing: 1px; }
#price-tier .disfunc { color: var(--text-gray); text-decoration: line-through;}
#price-tier .card-body { border-top: 0; }

.subscribe-toggle {
    line-height: 2rem;
    color: #999;
    font-weight: 600;
}

.subscribe-toggle .form-switch>* { display: inline-block; }
.subscribe-toggle .toggle {
    margin-top: 2rem;
    color: hsl(234, 14%, 74%);
    display: flex;
    align-items: center;
}

.subscribe-toggle .toggle-btn {
    display: inline-block;
    margin: 0 1rem;
}

.subscribe-toggle .checkbox {
    display: none;
}

.subscribe-toggle .sub {
    background: linear-gradient(135deg,
            var(--primary) 0%,
            var(--primary-dark) 100%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 1.4rem;
    width: 3.3rem;
    border-radius: 1.6rem;
    padding: 0.3rem;
    margin-top: .25rem;
}

.subscribe-toggle .circle {
    background-color: #fff;
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
}

.subscribe-toggle .checkbox:checked+.sub {
    justify-content: flex-end;
}

#bookreview .h6 {
    font-weight: 500;
}

#bkreviewlast>* {
    margin-bottom: 0;
}

.bootbox-body {
    text-align: center;
}

.hl-action span {
    font-size: 1.2rem;
    color: var(--primary);
    cursor: pointer;
}

.hl-action span:hover {
    color: var(--primary-light);
}

#plan-switch label {min-width: 9rem;}
#plan-switch span.ts {font-size: 11px; line-height: 16px;}

#price-tier span.prices {display: none;}
#price-tier.sel-month span.price-month {display: inline-block;}
#price-tier.sel-year span.price-year {display: inline-block;}

/*#0:下划线； 1:绿； 2: 蓝； 3:黄； 4:粉； 5:紫；*/
.filter-color a:is(:active, :focus, :hover) {
    text-decoration: none;
}

.filter-color a,
.filter-color button {
    display: inline-block;
    margin: 4px 3px;
    width: 21px;
    height: 21px;
    border-radius: 1rem;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    box-sizing: border-box;
    border: 1.5px solid rgba(0, 0, 0, .0);
    user-select: none;
}

.action-opts .filter-color {
    padding: .4rem .75rem .5rem;
}

.action-opts .filter-color a {
    padding: 2px;
    width: 17px;
    height: 17px;
    border: 1.5px solid rgba(0, 0, 0, .0);
    margin-top: 0;
}

@media (min-width:720px) {
    .modal-dialog.modal-hl-share {
        max-width: 640px;
    }
}

.image-container {
    margin: 0 auto;
}

.image-container #imageHtml {
    position: relative;
    overflow: hidden;
}

.image-container.instapost #imageHtml {
    position: absolute;
    overflow: hidden;
}

#quote-box {
    border-radius: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

#quote-title {
    color: #fff;
}

.share-html-text #quote-title,
.share-html-mark #quote-title {
    color: var(--bs-body-color);
}

#quote-author {
    color: rgba(255, 255, 255, .9);
    font-size: .9;
}

.share-html-text #quote-author,
.share-html-mark #quote-author {
    color: var(--bs-body-color);
}

.share-html-text #site-logo,
.share-html-mark #site-logo {
    color: var(--bs-body-color);
}

.lines-box {
    min-height: 11em;
}

.ratio-3x4 {
    --bs-aspect-ratio: 133.3333%;
}
.instapost { max-width:480px; position: relative;}
.instapost::before { display: block; padding-top: 133.3333%; content: ""; }
.instapost>* {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.instapost #quote-box {border-radius: 0;padding: 3rem 5rem;}

#quote-lines {
    padding: 1.5rem 4rem;
    position: relative;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
}

#quote-lines.quote-lg { font-size: 18px; }
#quote-lines.quote-sm { font-size: 14px; }

.instapost #quote-lines { font-size: 20px; padding: 3.3rem 0rem 1rem;}
.instapost #quote-lines.quote-lg { font-size: 23px; }
.instapost #quote-lines.quote-sm { font-size: 17px; }
.instapost h3.my-3 {margin-bottom: 1.5rem !important;}
.instapost .quote-bottom {padding: 1.5rem 0rem;}
.instapost #quote-lines::after {display: none;}
.instapost #quote-lines::before {left: -.5rem;}

#quote-lines hl,
#quote-lines {
    color: rgba(255, 255, 255, .99);
}

#quote-lines:has(hl) {
    color: rgba(255, 255, 255, .5);
}

.share-html-text #quote-lines hl {
    color: var(--bs-body-color);
}

.share-html-mark #quote-lines hl {
    color: var(--bs-body-color);
    background-color: var(--primary-bg);
}

.share-html-text #quote-lines:has(hl),
.share-html-mark #quote-lines:has(hl),
[class*='mark-style'] .note-hl-content:has(hl) {
    color: var(--text-gray-light);
}

.share-html-mark #quote-lines::before {
    content: "";
}

.share-html-mark #quote-lines::after {
    content: "";
}

#quote-lead,
#quote-end {
    font-size: 4em;
    color: rgba(255, 255, 255, .6);
}

#quote-lines::before,
#quote-lines::after {
    position: absolute;
    width: 30px;
    color: rgba(255, 255, 255, .08);
    font-size: 8rem;
}

#quote-lines::before {
    content: "“";
    top: -2.5rem;
    left: 0.5rem;
}

#quote-lines::after {
    content: "”";
    bottom: -5.8rem;
    right: 2.1rem;
}

.share-html-text #quote-lines::before,
.share-html-text #quote-lines::after,
.share-html-mark #quote-lines::before,
.share-html-mark #quote-lines::after {
    color: #eee;
}

.quote-bottom {
    padding: 1rem 4rem 0.5rem;
    line-height: 32px;
}

#image-box {
    position: absolute;
    top: 0;
    left: 0;
}

#image-box img {
    width: 100%;
    box-shadow: 0 1px 3px #def;
    display: none;
}

#site-logo {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}

.share-btns .btn {
    color: var(--primary);
}

.share-bg,
.share-text,
.share-mark {
    display: inline-block;
    min-width: 45px;
    font-weight: 300;
}

.share-mark .share-bg,
.share-bg.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--hl-color-orange-dark);
}

.share-text,
.share-text.btn-outline-primary:hover {
    color: var(--primary);
    background-color: white;
}

.share-mark.btn-outline-primary:hover {
    color: var(--bs-body-color);
    background-color: white;
}

.share-style .btn-check:active+.btn-outline-primary,
.share-style .btn-check:checked+.btn-outline-primary,
.share-style .btn-outline-primary.active,
.share-style .btn-outline-primary:active {
    /* color: #fff; */
    background-color: #fff;
    border-color: var(--primary);
}

.share-style .btn-check+.share-bg.btn-outline-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.share-style .btn-check+.share-mark.btn-outline-primary {
    padding-left: .5rem;
    padding-right: .5rem;
}

.share-style .btn-check:active+.share-bg.btn-outline-primary,
.share-style .btn-check:checked+.share-bg.btn-outline-primary,
.share-style .share-bg.btn-outline-primary.active,
.share-style .share-bg.btn-outline-primary:active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: bolder;
}

.share-style .btn-check:active+.share-text.btn-outline-primary,
.share-style .btn-check:checked+.share-text.btn-outline-primary,
.share-style .share-text.btn-outline-primary.active,
.share-style .share-text.btn-outline-primary:active {
    color: var(--bs-body-color);
    background-color: transparent;
    border-color: var(--primary);
    font-weight: bolder;
}

.share-style .btn-check:active+.share-mark.btn-outline-primary,
.share-style .btn-check:checked+.share-mark.btn-outline-primary,
.share-style .share-mark.btn-outline-primary.active,
.share-style .share-mark.btn-outline-primary:active {
    color: var(--bs-body-color);
    background-color: transparent;
    border-color: var(--primary);
    font-weight: bolder;
}

.share-mark mark {
    color: var(--bs-body-color);
    background-color: var(--primary-bg);
    padding-left: .5rem;
    padding-right: .5rem;
}

.share-opts .btn-check+.btn-outline-primary,
.share-opts .btn-outline-primary.dropdown-toggle.show,
.share-opts .btn-outline-primary {
    background: transparent;
    color: var(--text-gray);
}

.share-opts .btn-check:active+.btn-outline-primary,
.share-opts .btn-check:checked+.btn-outline-primary,
.share-opts .btn-outline-primary.active,
.share-opts .btn-outline-primary.dropdown-toggle.show,
.share-opts .btn-outline-primary:active {
    background: transparent;
    color: var(--primary);
    text-decoration: none;
    border-color: var(--primary);
}

.btn-check:active+.btn-outline-primary:focus,
.btn-check:checked+.btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus,
.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
    box-shadow: none !important;
}

.quote-bottom {
    overflow: auto;
}

.filter-color a:hover,
a.style-selected {
    border-color: rgba(0, 0, 0, .17) !important;
}

.quote-style {
    background-color: var(--hl-color-primary);
}

.share-html-text div[class^='quote-style'],
.share-html-text div[class*=' quote-style'],
.share-html-mark div[class^='quote-style'],
.share-html-mark div[class*=' quote-style'] {
    background-color: white;
}

.filter-color .filter-style0 { background-color: var(--hl-color-red); }
.share-html-mark .quote-style0 #quote-lines hl,.mark-style0 hl, .mark-style0 .note-hl-content { background-color: transparent; text-decoration: underline; text-underline-offset: .27rem; text-decoration-color: var(--hl-color-red); }
.share-html-text .lines-box { border-top: 0px solid var(--primary); border-bottom: 0px solid var(--primary); }
.quote-style0 { background-color: var(--hl-color-red); }
.share-html-text .quote-style0 #quote-title { color: var(--hl-color-red); }
.share-html-text .quote-style0 .lines-box { border-color: var(--hl-color-red); }
.share-html-mark .quote-style0 { color: var(--bs-body-color); }
.filter-color .filter-style1 { background-color: var(--hl-color-green); }
.quote-style1 { background-color: var(--hl-color-green-dark); }
.share-html-text .quote-style1 #quote-title { color: var(--hl-color-green-dark); }
.share-html-text .quote-style1 .lines-box { border-color: var(--hl-color-green-dark); }
.share-html-mark .quote-style1 #quote-lines hl { background-color: #cbe4a7; }
.mark-style1 hl, .mark-style1 .note-hl-content { background-color: #cbe4a7; }
.filter-color .filter-style2 { background-color: var(--hl-color-blue); }
.quote-style2 { background-color: var(--hl-color-blue-dark); }
.share-html-text .quote-style2 #quote-title { color: var(--hl-color-blue-dark); }
.share-html-text .quote-style2 .lines-box { border-color: var(--hl-color-blue-dark); }
.share-html-mark .quote-style2 #quote-lines hl { background-color: #afd0fd; }
.mark-style2 hl, .mark-style2 .note-hl-content { background-color: #afd0fd; }
.filter-color .filter-style3 { background-color: var(--hl-color-orange); }
.quote-style3 { background-color: var(--hl-color-orange-dark); }
.share-html-text .quote-style3 #quote-title { color: var(--hl-color-orange-dark); }
.share-html-text .quote-style3 .lines-box { border-color: var(--hl-color-orange-dark); }
.share-html-mark .quote-style3 #quote-lines hl { background-color: var(--mark-color-bg); }
.mark-style3 hl, .mark-style3 .note-hl-content { background-color: var(--mark-color-bg); }
.filter-color .filter-style4 { background-color: var(--hl-color-pink); }
.quote-style4 { background-color: var(--hl-color-pink-dark); }
.share-html-text .quote-style4 #quote-title { color: var(--hl-color-pink-dark); }
.share-html-text .quote-style4 .lines-box { border-color: var(--hl-color-pink-dark); }
.share-html-mark .quote-style4 #quote-lines hl { background-color: #fecbdb; }
.mark-style4 hl, .mark-style4 .note-hl-content{ background-color: #fecbdb; }
.filter-color .filter-style5 { background-color: var(--hl-color-purple); }
.quote-style5 { background-color: var(--hl-color-purple-dark); }
.share-html-text .quote-style5 #quote-title { color: var(--hl-color-purple-dark); }
.share-html-text .quote-style5 .lines-box { border-color: var(--hl-color-purple-dark); }
.share-html-mark .quote-style5 #quote-lines hl { background-color: #d9caef; }
.mark-style5 hl, .mark-style5 .note-hl-content { background-color: #d9caef; }
.filter-color .filter-style6 { background-color: var(--hl-color-yellow); }
.quote-style6 { background-color: var(--hl-color-yellow-dark); }
.share-html-text .quote-style6 #quote-title { color: var(--hl-color-yellow-dark); }
.share-html-text .quote-style6 .lines-box { border-color: var(--hl-color-yellow-dark); }
.share-html-mark .quote-style6 #quote-lines hl { background-color: var(--hl-color-yellow-bg); }
.mark-style6 hl, .mark-style6 .note-hl-content { background-color: var(--hl-color-yellow-bg); }
.hl-share { line-height: 1; }
.note-item { border-bottom: 1px solid var(--bs-border-color); }
label.note-item {border-bottom-width: 0;}
.note-item:last-child { }
.hl-style0 .note-highlight { border-left-color: var(--hl-color-red); }
.hl-style0 .note-lead { color: var(--hl-color-red); }
.hl-style0:has(.show) { background-color: var(--hl-color-red-bg); }
.hl-style1 .note-highlight { border-left-color: var(--hl-color-green); }
.hl-style1 .note-lead { color: var(--hl-color-green); }
.hl-style1:has(.show) { background-color: var(--hl-color-green-bg); }
.hl-style2 .note-highlight { border-left-color: var(--hl-color-blue); }
.hl-style2 .note-lead { color: var(--hl-color-blue); }
.hl-style2:has(.show) { background-color: var(--hl-color-blue-bg); }
.hl-style3 .note-highlight { border-left-color: var(--hl-color-orange); }
.hl-style3 .note-lead { color: var(--hl-color-orange); }
.hl-style3:has(.show) { background-color: var(--hl-color-orange-bg); }
.hl-style4 .note-highlight { border-left-color: var(--hl-color-pink); }
.hl-style4 .note-lead { color: var(--hl-color-pink); }
.hl-style4:has(.show) { background-color: var(--hl-color-pink-bg); }
.hl-style5 .note-highlight { border-left-color: var(--hl-color-purple); }
.hl-style5 .note-lead { color: var(--hl-color-purple); }
.hl-style5:has(.show) { background-color: var(--hl-color-purple-bg); }
.hl-style6 .note-highlight { border-left-color: var(--hl-color-yellow); }
.hl-style6 .note-lead { color: var(--hl-color-yellow); }
.hl-style6:has(.show) { background-color: var(--hl-color-yellow-bg); }
.note-lead { color: var(--hl-color-orange); position: absolute; left: -3px; }
.note-content-row { position: relative; }
.note-content-row a:is(:hover, :active, :focus) { text-decoration: none; }
.note-content-row:has(.show) { transition: background-color .15s ease-in-out; }
.note-content-row:hover .rb-share, .note-content-row:hover .rb-share1, .note-content-row:hover .rb-fav0 { display: inline-block; line-height: 1; }
.list-only { border-width: 0 !important; }
.note-actions { width: 15%; }

@media (min-width:720px) {
    .note-actions {
        min-width: 96px;
    }
}

.note-actions>a {
    line-height: 25px;
    padding-left: 7px;
    padding-right: 7px;
}

.note-actions .dropdown-menu {
    min-width: 11.4rem;
}

.note-hl-content p {
    white-space: break-spaces;
}

.note-hl-content:has(hl),
.cherry-previewer {
    color: var(--text-gray-light);
}

.note-hl-content:has(hl) {
    background-color: transparent !important;
}

.note-hl-content hl,
.cherry-previewer hl {
    color: var(--bs-body-color)
}

.note-actions .dropdown-toggle {
    /* margin-right: -.25em; */
}

.dropdown-toggle::after {
    display: none !important;
}

a.dropdown-toggle:hover {
    text-decoration: none !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background: none;
    color: var(--link-hover);
}

.cherry .cherry-highlight-line {
    animation: changeBgColor .1s !important;
}



/*
 * Content
 */
[role="main"] {
    padding-top: 133px;
}

@media (min-width: 768px) {
    [role="main"] {
        padding-top: 47px;
    }

    .highlightpage .vhl,
    .page-media-list .vmedia,
    .newaddpage .vnew,
    .tags-page .vtags {
        text-decoration: underline;
        text-underline-offset: 15px;
    }
}

.error-box {
    margin-top: 10vh;
    max-height: 70vh;
    overflow: scroll;
}

.error-box pre {
    font-size: .75em
}

.breakword {
    overflow-wrap: break-word;
    word-break: break-all;
    word-wrap: break-word;
}


/*
 * Navbar
 */
.navbar-brand {
    text-align: center;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-right: 0;
    font-size: 1.4rem;
    background-color: rgba(0, 18, 20, 0);
}

.popover {
    max-width: 320px;
}


.bg-orange {
    background: #c47309 !important;
    color: #fff !important;
}

.bg-green {
    background: #00b15a !important;
    color: #fff !important;
}

.bg-green-light {
    background: #e3f3dd;
}

.w60 {
    width: 60px
}

.w70 {
    width: 70px
}

.w80 {
    width: 80px
}

.w90 {
    width: 90px
}

.w100 {
    width: 100px
}

.w120 {
    width: 120px
}

.w140 {
    width: 140px
}

.w160 {
    width: 160px
}

.w180 {
    width: 180px
}

.w200 {
    width: 200px
}

.w250 {
    width: 250px
}

.wp70 {
    max-width: 70%
}

.wp80 {
    max-width: 80%
}

.wp90 {
    max-width: 90%
}

select:focus,
select:active,
input[type="radio"]:focus,
input[type="radio"]:active {
    outline: none;
    box-shadow: none !important;
}

td .btn-sm {
    line-height: 1;
}

.bootbox .modal-body {
    padding: 2rem 1rem;
}

.bootbox-alert.show .bootbox-close-button {
    display: none;
}

.note-date {
    font-family: sans-serif, arial;
    color: #999;
    min-width: 7rem;
}

.note-date+.book-title.mt-3 {
    margin-top: .25rem !important;
}

.card-header h5,
.card-header h4 {
    margin-bottom: 0;
    font-weight: 600;
}

.card-footer-custom {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.card-footer-custom:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

/* .card-shenling .field, .card-shenling .content {display: inline-block; margin-bottom: .75rem} */
.card-shenling .field {
    font-weight: 500;
    margin-right: .5rem;
    color: #000;
    line-height: 22px;
    font-size: 1.1em
}

.card .content,
.card-shenling .content {
    color: #777;
}

span.nav-icon::before {
    content: '●';
    color: rgba(255, 255, 255, .1);
    display: inline-block;
    padding-left: .3rem;
    padding-right: .3rem;
}

.nav-item.active span.nav-icon::before {
    color: var(--primary)
}

ion-icon {
    vertical-align: middle;
}

/* .btn ion-icon {vertical-align: text-top;} */

.table>:not(:first-child) {
    border-top: 0px solid #ccc;
}

.table td.icons {
    padding: .5rem .75rem
}

td.icons a {
    display: inline-block;
    padding: .25rem .35rem 0;
}

td.icons ion-icon {
    font-size: 1.3em;
}

.note-btn-group .note-btn.btn-light {
    border-color: transparent;
    background-color: transparent;
}

.note-btn-group .note-btn.btn-light:hover {
    background-color: #dae0e5
}

.note-btn-group .note-btn:active {
    outline: none;
}

.note-toolbar,
.note-editor.note-airframe .note-statusbar,
.note-editor.note-frame .note-statusbar {
    background: #ebedef;
}

.col-form-label {}

.invite-box .input-group {
    max-width: 360px;
}

.col-lead {
    min-width: 7rem;
}

table td.withInput {
    padding: .25rem .75rem;
}

.text-invalid {
    color: var(--warning);
}

.form-check-label {
    word-break: break-all;
}

.note-editor.note-airframe,
.note-editor.note-frame {
    border: 1px solid #ced4da;
}

th.zhshd {
    min-width: 110px;
}

.tabledit-toolbar-column {
    min-width: 150px;
}

.tabledit-toolbar ion-icon {
    width: 1.4em;
    height: 1.4em
}

/* .form-control:focus {box-shadow: none;} */
.col-form-label.text-muted {
    font-weight: 400;
}

.node-title {
    padding-left: 3rem;
}


.nav-link {
    color: var(--primary);
    text-decoration: none;
}

.nav-link:hover {
    color: var(--primary-dark);
    text-decoration: none;
}

.mw5em {
    max-width: 5em;
}

.mw6em {
    max-width: 6em;
}

.mw7em {
    max-width: 7em;
}

.mw8em {
    max-width: 8em;
}

.mw10em {
    max-width: 10em;
}

.mw12em {
    max-width: 12em;
}

.mw15em {
    max-width: 15em;
}

.text-small {
    font-size: 90%;
}

a.del {
    color: var(--warning);
    font-family: Tahoma
}

/* .field-uk {font-family:'menlo',Courier, monospace} */
.field-mingcheng {
    color: var(--primary)
}

ul.fancytree-container {
    min-height: 10rem;
}

label.col-1 {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
}

.text-invisible {
    visibility: hidden;
}

/****** bootstrap multiple select */
span.multiselect-native-select {
    position: relative
}

span.multiselect-native-select select {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px -1px -1px -3px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    left: 50%;
    top: 30px
}

.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: .5rem 0
}

.multiselect-container .input-group {
    margin: 5px 10px
}

.multiselect-container>li {
    padding: 0
}

.multiselect-container>li>a.multiselect-all label {
    font-weight: 700
}

.multiselect-container>li.multiselect-group label {
    margin: 0;
    padding: 3px 15px 3px 15px;
    height: 100%;
    font-weight: 700
}

.multiselect-container>li.multiselect-group-clickable label {
    cursor: pointer
}

.multiselect-container>li>a {
    padding: 0
}

.multiselect-container>li>a>label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 2px 15px 2px 20px
}

.multiselect-container>li>a>label.radio,
.multiselect-container>li>a>label.checkbox {
    margin: 0
}

.multiselect-container>li>a>label>input[type=checkbox] {
    margin-bottom: 5px
}

.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
    padding: 2px 15px 2px 20px
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
.form-inline .multiselect-container li a label.radio input[type=radio] {
    margin-left: -20px;
    margin-right: 0
}

.multiselect-container.show {
    max-height: 400px;
    min-width: 300px;
    overflow: scroll;
}

.multiselect.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0 !important;
}

.multiselect.btn {
    border-color: #ced4da;
}

/****** bootstrap multiple select end */


.tagify {
    --tags-disabled-bg: #F1F1F1;
    --tags-border-color: #DDD;
    --tags-hover-border-color: #CCC;
    --tags-focus-border-color: var(--primary);
    --tag-border-radius: 3px;
    --tag-bg: var(--primary-bg);
    --tag-hover: var(--primary-light);
    --tag-text-color: black;
    --tag-text-color--edit: black;
    --tag-pad: 0.3em 0.5em;
    --tag-inset-shadow-size: 1.2em;
    --tag-invalid-color: var(--warning);
    --tag-invalid-bg: rgba(211, 148, 148, 0.3);
    --tag--min-width: 1ch;
    --tag--max-width: 100%;
    --tag-hide-transition: 0.3s;
    --tag-remove-bg: rgba(var(--warning-rgb), 0.2);
    --tag-remove-btn-color: black;
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: var(--warning);
    --input-color: inherit;
    --placeholder-color: rgba(0, 0, 0, 0.4);
    --placeholder-color-focus: rgba(0, 0, 0, 0.25);
    --loader-size: .8em;
    --readonly-striped: 1;
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border: 1px solid var(--tags-border-color);
    padding: 0;
    line-height: 0;
    outline: 0;
    position: relative;
    box-sizing: border-box;
    transition: .1s
}

@keyframes tags--bump {
    30% {
        transform: scale(1.2)
    }
}

@keyframes rotateLoader {
    to {
        transform: rotate(1turn)
    }
}
.tagify:has([contenteditable=true]) { cursor: text; }
.tagify:hover:not(.tagify--focus):not(.tagify--invalid) { --tags-border-color: var(--tags-hover-border-color); }
.tagify[disabled] { background: var(--tags-disabled-bg); filter: saturate(0); opacity: .5; pointer-events: none; }
.tagify[disabled].tagify--select, .tagify[readonly].tagify--select { pointer-events: none; }
.tagify[disabled]:not(.tagify--mix):not(.tagify--select), .tagify[readonly]:not(.tagify--mix):not(.tagify--select) { cursor: default; }
.tagify[disabled]:not(.tagify--mix):not(.tagify--select)>.tagify__input, .tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input { visibility: hidden; width: 0; margin: 5px 0; }
.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div, .tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div { padding: var(--tag-pad); }
.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before, .tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before { animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused; }
@keyframes readonlyStyles { 0% { background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px; box-shadow: none; filter: brightness(.95); } }
.tagify[disabled] .tagify__tag__removeBtn, .tagify[readonly] .tagify__tag__removeBtn { display: none; }
.tagify--loading .tagify__input>br:last-child { display: none; }
.tagify--loading .tagify__input::before { content: none; }
.tagify--loading .tagify__input::after { content: ""; vertical-align: middle; opacity: 1; width: .7em; height: .7em; width: var(--loader-size); height: var(--loader-size); min-width: 0; border: 3px solid; border-color: #eee #bbb #888 transparent; border-radius: 50%; animation: rotateLoader .4s infinite linear; content: "" !important; margin: -2px 0 -2px .5em; }
.tagify--loading .tagify__input:empty::after { margin-left: 0; }
.tagify+input, .tagify+textarea { position: absolute !important; left: -9999em !important; transform: scale(0) !important; }
.tagify__tag { display: inline-flex; align-items: center; padding-left: .25rem; padding-right: .25rem; max-width: var(--tag--max-width); margin-inline: 5px 0; margin-block: 5px; position: relative; z-index: 1; outline: 0; line-height: 20px; cursor: default; transition: .13s ease-out; font-size: 14px; }
.tagify__tag>div { display: flex; flex: 1; vertical-align: top; box-sizing: border-box; max-width: 100%; padding: var(--tag-pad); color: var(--tag-text-color); line-height: inherit; border-radius: var(--tag-border-radius); white-space: nowrap; transition: .13s ease-out; }
.tagify__tag>div>* { white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: top; min-width: var(--tag--min-width); max-width: var(--tag--max-width); }
.tagify__tag>div>[contenteditable] { display: block; outline: 0; -webkit-user-select: text; user-select: text; cursor: text; margin: -2px; padding: 2px; max-width: 350px; }
.tagify__tag>div>:only-child { width: 100%; }
.tagify__tag>div::before { content: ""; position: absolute; border-radius: 2rem; inset: var(--tag-bg-inset, 0); z-index: -1; pointer-events: none; box-shadow: 0 0 0 var(--tag-inset-shadow-size) #f0f0f0 inset; }
.tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before { --tag-bg: var(--tag-hover); }
.tagify__tag--loading { pointer-events: none; }
.tagify__tag--loading .tagify__tag__removeBtn { display: none; }
.tagify__tag--loading::after { --loader-size: .4em; content: ""; vertical-align: middle; opacity: 1; width: .7em; height: .7em; width: var(--loader-size); height: var(--loader-size); min-width: 0; border: 3px solid; border-color: #eee #bbb #888 transparent; border-radius: 50%; margin: 0 .5em 0 -.1em; }
.tagify__tag--flash div::before { animation: none; }
.tagify__tag--hide { width: 0 !important; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; opacity: 0; transform: scale(0); transition: var(--tag-hide-transition); pointer-events: none; }
.tagify__tag--hide>div>* { white-space: nowrap; }
.tagify__tag.tagify--noAnim>div::before { animation: none; }
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span { opacity: .5; }
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before { --tag-bg: var(--tag-invalid-bg); transition: .2s; }
.tagify__tag[readonly] .tagify__tag__removeBtn { display: none; }
.tagify__tag[readonly]>div::before { animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused; }
.tagify__tag--editable>div { color: var(--tag-text-color--edit); }
.tagify__tag--editable>div::before { box-shadow: 0 0 0 2px var(--tag-hover) inset !important; }
.tagify__tag--editable>.tagify__tag__removeBtn { pointer-events: none; opacity: 0; transform: translateX(100%) translateX(5px); }
.tagify__tag--editable.tagify--invalid>div::before { box-shadow: 0 0 0 2px var(--tag-invalid-color) inset !important; }
.tagify__tag__removeBtn, .tagify__num { order: 5; display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; cursor: pointer; font: 14px/1 Arial; background: var(--tag-remove-btn-bg); color: var(--tag-remove-btn-color); width: 14px; height: 14px; margin-inline: auto 4.6666666667px; overflow: hidden; transition: .2s ease-out; }
.tagify__tag__removeBtn::after { content: "×"; transition: .3s, color 0s; }
.tagify__tag__removeBtn:hover { color: #fff; background: var(--tag-remove-btn-bg--hover); }
.tagify__tag__removeBtn:hover+div>span { }
.tagify__tag__removeBtn:hover+div::before { box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg, rgba(211, 148, 148, .3)) inset !important; transition: box-shadow .2s; }
.tagify:not(.tagify--mix) .tagify__input br { display: none; }
.tagify:not(.tagify--mix) .tagify__input * { display: inline; white-space: nowrap; }
.tagify__input { flex-grow: 1; display: inline-block; min-width: 110px; margin: 5px; padding: var(--tag-pad); line-height: normal; position: relative; white-space: pre-wrap; color: var(--input-color); box-sizing: inherit; overflow: hidden; font-size: 14px; }
.tagify__input:focus { outline: 0; }
.tagify__input:focus::before { transition: .2s ease-out; opacity: 0; transform: translatex(6px); }
@supports (-ms-ime-align:auto) { .tagify__input:focus::before { display: none; } }
.tagify__input:focus:empty::before { transition: .2s ease-out; opacity: 1; transform: none; color: rgba(0, 0, 0, .25); color: var(--placeholder-color-focus); }
@-moz-document url-prefix() { .tagify__input:focus:empty::after { display: none; } }
.tagify__input::before { content: attr(data-placeholder); width: 100%; height: 100%; margin: auto 0; z-index: 1; color: var(--placeholder-color); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; pointer-events: none; opacity: 0; position: absolute; }
.tagify__input::after { content: attr(data-suggest); display: inline-block; vertical-align: middle; position: absolute; min-width: calc(100% - 1.5em); text-overflow: ellipsis; overflow: hidden; white-space: pre; color: var(--tag-text-color); opacity: .3; pointer-events: none; max-width: 100px; }
.tagify__input .tagify__tag { margin: 0 1px; }
.tagify--mix { display: block; }
.tagify--mix .tagify__input { padding: 5px; margin: 0; width: 100%; height: 100%; line-height: 1.5; display: block; }
.tagify--mix .tagify__input::before { height: auto; display: none; line-height: inherit; }
.tagify--mix .tagify__input::after { content: none; }
.tagify--select { cursor: default; }
.tagify--select::after { content: ">"; opacity: .5; position: absolute; top: 50%; right: 0; bottom: 0; font: 16px monospace; line-height: 8px; height: 8px; pointer-events: none; transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg); }
.tagify--select[aria-expanded=true]::after { transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2); }
.tagify--select[aria-expanded=true] .tagify__tag__removeBtn { pointer-events: none; opacity: 0; transform: translateX(100%) translateX(5px); }
.tagify--select .tagify__tag { flex: 1; max-width: none; margin-inline-end: 2em; margin-block: 0; padding-block: 5px; cursor: text; }
.tagify--select .tagify__tag div::before { display: none; }
.tagify--select .tagify__tag+.tagify__input { display: none; }
.tagify--empty .tagify__input::before { transition: .2s ease-out; opacity: 1; transform: none; display: inline-block; width: auto; }
.tagify--mix .tagify--empty .tagify__input::before { display: inline-block; }
.tagify--focus { --tags-border-color: var(--primary); transition: 0s; }
.tagify--invalid { --tags-border-color: #D39494; }
.tagify__dropdown { position: absolute; z-index: 9999; transform: translateY(-1px); border-top: 1px solid var(--tagify-dd-color-primary); overflow: hidden; }
.tagify__dropdown[dir=rtl] { transform: translate(-100%, -1px); }
.tagify__dropdown[placement=top] { margin-top: 0; transform: translateY(-100%); }
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper { border-top-width: 1.1px; border-bottom-width: 0; }
.tagify__dropdown[position=text] { box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), .1); font-size: .9em; }
.tagify__dropdown[position=text] .tagify__dropdown__wrapper { border-width: 1px; }
.tagify__dropdown__wrapper { scroll-behavior: auto; max-height: var(--tagify-dd-max-height); overflow: hidden; overflow-x: hidden; color: var(--tagify-dd-text-color); background: var(--tagify-dd-bg-color); border: 1px solid; border-color: var(--tagify-dd-color-primary); border-bottom-width: 1.5px; border-top-width: 0; box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .2); transition: .3s cubic-bezier(.5, 0, .3, 1), transform .15s; animation: dd-wrapper-show 0s .3s forwards; }
@keyframes dd-wrapper-show { to { overflow-y: auto; } }
.tagify__dropdown__header:empty { display: none; }
.tagify__dropdown__footer { display: inline-block; margin-top: .5em; padding: var(--tagify-dd-item-pad); font-size: .7em; font-style: italic; opacity: .5; }
.tagify__dropdown__footer:empty { display: none; }
.tagify__dropdown--initial .tagify__dropdown__wrapper { max-height: 20px; transform: translateY(-1em); }
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper { transform: translateY(2em); }
.tagify__dropdown__item { box-sizing: border-box; padding: var(--tagify-dd-item-pad); margin: 1px; white-space: pre-wrap; cursor: pointer; border-radius: 2px; position: relative; outline: 0; max-height: 60px; max-width: 100%; line-height: normal; position: relative; }
.tagify__dropdown__item--active { background: var(--tagify-dd-color-primary); color: #fff; }
.tagify__dropdown__item:active { filter: brightness(105%); }
.tagify__dropdown__item--hidden { padding-top: 0; padding-bottom: 0; margin: 0 1px; pointer-events: none; overflow: hidden; max-height: 0; transition: var(--tagify-dd-item--hidden-duration, .3s) !important; }
.tagify__dropdown__item--hidden>* { transform: translateY(-100%); opacity: 0; transition: inherit; }
.tagify__dropdown__item--selected::before { content: "✓"; font-family: monospace; position: absolute; inset-inline-start: 6px; text-indent: 0; line-height: 1.1; }
.tagify__dropdown:has(.tagify__dropdown__item--selected) .tagify__dropdown__item { text-indent: 1em; }
.tagify.tagify--outside { width: 100%; max-width: 700px; border: 0; justify-content: center; }
.tagify--outside .tagify__input { order: 1; flex: 100%; border: 1px solid var(--tags-border-color); max-width: 240px; display: none; border-radius: .25rem; padding: 5px; }
.tagify--outside.tagify--focus .tagify__input { display: flex; }
.tagify--outside.tagify--focus .tagify__input::before { display: block; content: " "; flex-basis: 100%; height: 0; }
.tagify__num {width: auto; font-weight: 600; padding: 0 .3rem; border-left: 1px solid rgba(0,0,0,.4); border-radius: 0;}
/* tagify end.... */

.note-content-row.py-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.note-hl-content ul:last-child {
    margin-bottom: 0;
}

html[lang="zh"] [v="zh"],
html[lang="en"] [v="en"],
html[lang="pt"] [v="pt"],
html[lang="ja"] [v="ja"],
html[lang="es"] [v="es"],
html[lang="de"] [v="de"],
html[lang="it"] [v="it"],
html[lang="zh-Hans"] [v="zh-Hans"],
html[lang="zh-Hant"] [v="zh-Hant"]{
    color: var(--primary);
}

html[lang="es"] #home-page h1,
html[lang="fr"] #home-page h1,
html[lang="pt"] #home-page h1{
    font-size: 2.5rem;
}


#share-link {
    /* max-width: 360px; */
}

.media-notebook {
    height: 56px;
    width: 42px;
    position: relative;
    border-radius: 3px 6px 6px 3px;
    display: inline-block;
}

.notebook-cover {
    background: var(--primary);
    height: 56px;
    width: 42px;
    position: absolute;
    border-radius: 3px 6px 6px 3px;
    z-index: 10;
}

.notebook-cover.orange {
    background: var(--hl-color-orange);
}

.notebook-cover.orange:before {
    background: var(--hl-color-orange);
}

.notebook-cover.blue {
    background: var(--hl-color-blue);
}

.notebook-cover.blue:before {
    background: var(--hl-color-blue);
}

.notebook-cover.green {
    background: var(--hl-color-green);
}

.notebook-cover.green:before {
    background: var(--hl-color-green);
}

.notebook-cover.yellow {
    background: #fed754;
}

.notebook-cover.yellow:before {
    background: #fed754;
}

.notebook-cover.gray {
    background: #c1c1c1;
}

.notebook-cover.gray:before {
    background: #c1c1c1;
}

.notebook-skin {
    height: 24px;
    /* background: rgba(255, 255, 255, .8); */
    background: transparent;
    margin-top: 19px;
    /* padding: 5px 5px; */
    padding: 0;
    font-size: 18px;
    line-height: 1;
    position: relative;
    z-index: 10;
    color: #222;
    text-align: center;
    text-shadow: 0 .76px .76px rgba(255, 255, 255, .45);
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); */
}

.notebook-skin:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0px;
    left: 0;
    bottom: 0;
    background: #cddc39;
}


.page-media-list .progress {
    width: 100px;
    height: 6px;
    margin-top: .5rem;
    margin-right: .75rem;
    border: .5px solid var(--hl-color-green);
}

.page-media-list .progress-bar {
    background-color: var(--hl-color-green);
}

#media-overlay-text {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: rgba(0, 0, 0, 0.67); 
    color: white; 
    font-size: 0.9rem; 
    opacity: 0.5; 
}

.info-container .form-label {font-weight: 500; margin-bottom: .25rem;}


.media-list a.md-title {
    white-space: nowrap;     
    overflow: hidden;        
    text-overflow: ellipsis; 
    width: 50vw;
    max-width: 400px;
    display: inline-block;
    /* color: var(--primary); */
}

h1.md-title {
    font-size: 1.5rem;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .media-list a.md-title {
        white-space: wrap;   
    }
    h1.md-title {font-size: 1.2rem;}
}

.media-ratings {
    color: var(--text-gray);
}

.media-list .rb-fav1,
.media-list .rb-fav0 {
    display: inline-block;
    margin-right: 1px;
}

.media-list .rb-fav1 {
    color: var(--hl-color-orange);
}

.form-check-inline {
    /* padding-top: calc(.375rem + 1px) */
}

footer .footer-row1 {
    line-height: 28px;
}

footer .footer-row1 #darkmodeswitch {
    margin-top: 7px;
}

.social-icons a::before {
    line-height: 27px;
    display: inline-block;
    padding-top: 2px;
}

footer a.rb-at {margin-top: 4.5px;}
footer a.rb-at::before {line-height: 1rem; font-size: 1rem; padding: .24rem .17rem .17rem .24rem; text-align: center;background:var(--bs-secondary-color); color: #fff;border-radius: 11rem;}
footer a.rb-at:hover:before {background-color: var(--primary-dark);}

.social-icons a:hover {
    text-decoration: none;
}

.privacypage li,
.privacypage li.mt-2 {
    margin-top: .75rem;
}

.privacypage h3 {
    font-size: 1.375rem;
}

.privacypage h2,
.heading1 {
    margin-top: 1.5rem;
    font-size: 26px;
    font-weight: bold;
}

.privacypage td {
    vertical-align: top;
}

.privacy-em {
    color: var(--primary)
}

.privacy-heading_2,
.terms-heading_2 {
    margin-top: 1rem;
    font-weight: bold;
    font-size: 22px;
}

[data-custom-class='title'],
[data-custom-class='title'] * {
    font-size: 26px !important;
}

[data-custom-class='heading_1'],
[data-custom-class='heading_1'] * {
    font-size: 1.3rem !important;
}

[data-custom-class='heading_2'],
[data-custom-class='heading_2'] * {
    font-size: 1.2rem;
}


.question,
[data-custom-class='link'],
[data-custom-class='link'] * {
    color: var(--primary);
    word-break: break-word !important;
}

#navbarScroll a.rb-user {
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: 7px;
    font-size: 17px;
}

a.rb-user::before {
    display: inline-block;
    margin-top: 11px;
}

.btn-primary.disabled {
    border-color: var(--primary-bg);
}

#home-page .container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

#home-page main {
    background-image: linear-gradient(rgba(255, 255, 255, 0.01), rgb(255, 255, 255) 85%), 
        radial-gradient(at 0% 0%, rgba(13, 118, 245, 0.3), rgba(0, 0, 0, 0) 50%), 
        radial-gradient(at 100% 0%, rgba(236, 191, 102, 0.3), rgba(0, 0, 0, 0) 50%), 
        radial-gradient(at 100% 55%, rgba(254, 89, 213, 0.3), rgba(0, 0, 0, 0) 50%), 
        radial-gradient(at 0% 55%, rgba(214, 51, 132, 0.3), rgba(0, 0, 0, 0) 50%);
}

#userlanglist {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

#home-page .container .rounded-3 {
    background-image: linear-gradient(rgba(229, 233, 237, 0.03), rgba(186, 187, 190, 0.11) 90%);
}

#home-page h1 {font-size: 2.7rem; margin-bottom: 1rem;}

.screen-box {
    user-select: none;
    margin: 1rem auto;
    border-radius: .5rem;
    overflow: hidden;
}

.screen-top-bar {
    padding: .375rem .75rem;
    background-color: rgba(244,244,244,.9);
}

.addr-bar {
    background-color: #fafbfc;
    border-radius: 4px;
    padding: .2rem 1rem;
    color: var(--bs-body-color);
    max-width: 40%;
    font-size: .875rem;
    line-height: 1rem;
    text-align: center;
    margin: 0 auto;
}

.screen-body {
    background-color: rgba(255,255,255,.95);
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
}


.md-item {
  width: 74px;
  height: 96px;
  position:relative;
  text-align: center;
  margin:2.5%;
}

.md-item .md-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    object-fit: cover;
}

.md-item-cover {
  position: absolute;
  z-index:1;
  width: 100%;
  height: 100%;
  background: var(--primary-dark);
  background-size:cover;
  border-radius: .17rem;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  overflow: hidden;
  box-shadow: 
    inset 4px 1px 3px #ffffff60,
    inset 0 -1px 2px #00000040;
}

.md-item-content {
    position: absolute;
    top: 0;
    left: 4%;
    width: 96%;
    height: 100%;
}

.md-item-content::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEXk4NTV0c3My8P4ciQVAAAAA3RSTlM9PT3kRbayAAAARklEQVQI1x3JsQ2EQBAEwVppz3hvX4J8DgkHD4MAMAiE0DnocUbdomPOpAym3Y9Vk1u/VcRhEGPnmy98L1ElXtn4V+pt8QDC/gS7d4L6cgAAAABJRU5ErkJggg==);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}

.md-title-wrap {
    margin-top: 18%;
    background: #ffffff44;
    padding: 5%;
}

.md-title-text {
    line-height: 1.2em;
    text-align: left;
    white-space: initial;
    display: flex;
    justify-content: center;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-shadow: 1px 1px 0px #FFFFFF44;
    font-weight: bold;
    word-break: break-all;
}

.md-author-text {
    font-size: 9px;
    line-height: 1.2em;
    text-align: left;
    padding: 0 0;
    white-space: initial;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-height: 3.5em;
    padding-left: 5%;
    padding-right: 2%;
    margin-top: 8%;
    text-shadow: 1px 1px 0px #FFFFFF40;
}

.cover-style1 {color: #375f32; background: linear-gradient(313deg, #5c9f54 0%, #d1e8ce 100%);}
.cover-style2 {color: #465b7e; background: linear-gradient(313deg, #6988bd 0%, #c8d5ed 100%);}
.cover-style3 {color: #825724; background: linear-gradient(313deg, #d9913c 0%, #f0d3b1 100%);}
.cover-style4 {color: #6c415a; background: linear-gradient(313deg, #c274a2 0%, #f3d9e9 100%);}
.cover-style5 {color: #634d82; background: linear-gradient(313deg, #9574c2 0%, #ede6f7 100%);}
.cover-style6 {color: #5b5b37; background: linear-gradient(313deg, #97985b 0%, #e0e0ce 100%);}

.md-item .md-item-cover {
  background-size: 100% 100%;
}

.md-item-cover::before {
    position: absolute;
    display: block;
    content: "";
    width: 10%;
    height: 100%;
    margin-left: 3%;
    border-left: 2px solid #00000010;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
}

.md-item-cover1::after {
    display: block;
    content: "";
    width: 90%;
    height: 100%;
    position: absolute;
    border-radius: .17rem; 
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%);
    top: 0;
    right:0;
    opacity: .1;
}

.media-title-section .md-item {
  width: 90px;
  height: 123px;
}

.top-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 1rem;
    margin-top: 4px;
}

.dot-primary {
    background-color: var(--primary);
}

.dot-min {
    background-color: var(--hl-color-orange);
}

.dot-close {
    background-color: var(--hl-color-red);
}

.home-pic {
    /* height: 300px; */
    border-radius: 7px;
    overflow: hidden;
    max-width: 431px;
    margin: 0 auto;
}

a.tagify__tag-text {
    color: var(--bs-body-color);
}

.app-item p span:first-child {
    display: inline-block;
    min-width: 6em;
}

.reg-Email .regemail,
.reg-Google .reggoogle,
.reg-Amazon .regamazon{
    font-weight: bold;
}

#cookieagrement {
    background-color: #000C;
    color: #fff;
}
a#agreecookie {
    top: 1.2rem;
    right: 1rem;
    color: #fff;
}

#chrome-install {
    z-index: 999999;
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
    width: 360px;
    padding: 16px;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

#chrome-install .ext-title {
    font-weight: 500;
    color: #606060;
    font-size: 1.07rem;
    line-height: 1.6rem;
    margin-bottom: .4rem;
}

#chrome-install .ext-desc {
    color: #868788;
    font-size: 0.85rem;
    margin-bottom: .8rem;
}

#chrome-close {
    padding: 6px 7px;
    font-size: .8rem;
    margin-right: -3px;
}


#tagcloud {width: 100%; height: 490px; border: 0px solid #eee; margin: 0 auto;}
#tagcloud span {transition: color .25s, transform .25s;}
#tagcloud span:hover {
    color: var(--primary) !important;
    cursor: pointer;
    font-weight: 600;
    transform: scale(1.3) !important;
}

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

/* .btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
} */

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.doc-container h2 {
    font-size: 1.8rem;
    margin-top: .8rem;
}

.doc-container h5 {
    margin-top: 1rem;
}

.syncing {
  animation: sync-rotate 2s linear infinite;
}

@keyframes sync-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


@media (min-width: 1000px) {
    .w-md-40 { width: 40%; }
    .w-md-50 { width: 50%; }
    .w-md-60 { width: 60%; }
    .w-md-70 { width: 70%; }
    .w-md-80 { width: 80%; }
    .w-md-90 { width: 90%; }
    .w-md-100 { width: 100%; }

    .home-pic {
        /* height: 270px; */
    }
    .screen-top-bar {
        padding: 6.5px .75rem;
    }

    .addr-bar {
        font-size: 1rem;
        line-height: 20px;
    }

    .top-dots {
        padding-top: 3px;
    }

    .top-dots span {
        width: 13px;
        height: 13px;
        margin-top: 0;
    }

    .home-page h1.mt-3 {
        font-size: 3rem;
    }
}

@media (min-width:1400px) { 
    .home-pic {
        /* height: 300px; */
    }
}

@media print {
    nav.fixed-top {
        position: absolute;
        background-color: transparent !important;
        border-bottom: 0px !important;
    }

    .container {
        max-width: 720px;
    }

    .widthmobile main[role="main"] {
        width: 95%;
        max-width: 720px;
    }

    .rb-fav1 {
        color: var(--hl-color-orange);
    }

    .no-print, .clippings-parser footer  {
        display: none;
    }

    .note-hl-content:has(hl),
    .text-grey,
    .text-gray {
        color: #777 !important;
    }

    .toggleFilter {
        opacity: 0;
    }
}