.Word {
    font-family: arial,"Microsoft JhengHei","微軟正黑體","HanaMinB","花園明朝體B";
}

.LoadingPanel {
    opacity: 1;
    height: 100%;
    width: 100%;
    background-color: #fff;
    position: absolute;
    /*display: block;*/
    margin: auto;
    display: flex;
    z-index: 98;
}

.PageLoading {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    margin: auto;
    display: none;
    z-index: 99;
}

.PageLoadingSpinner {
    margin: 50vh auto !important;
}

.spinner {
    /*margin: 50vh auto;*/
    margin: auto auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spannerX-center {
    margin-left: auto;
    margin-right: auto;
}

.spannerY-center {
    margin-top: 50vh;
    margin-bottom: 50vh;
}

.spinner > div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}

.ProgressLoading {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: rgba(51, 51, 51, 0.9);
    margin: auto;
    display: none;
    z-index: 99;
}

.ProgressLoading .progress {
    margin-top: 30%;
    margin-left: 30%;
    margin-right: 30%;
    border: 2px solid #343a40;
    height: 32px;
    background-color: transparent;
}

.ProgressLoading .ProgressMessagePanel {
    /*margin-top: 30%;*/
    margin-left: 30%;
    margin-right: 30%;
    /* text-align: center; */
    display: flex;
}

.ProgressLoading .ProgressMessagePanel .ProgressMessageText {
    display: none;
    text-align: center;
    font-size: 20px;
    color: #979797;
    width: 100%;
    padding: 10px;
}

/*
Loader
 */
/*.loader,*/
/*.loader:before,*/
/*.loader:after {*/
/*    background: #636363;*/
/*    -webkit-animation: load1 1s infinite ease-in-out;*/
/*    animation: load1 1s infinite ease-in-out;*/
/*    width: 1em;*/
/*    height: 4em;*/
/*}*/
/*.loader {*/
/*    color: #636363;*/
/*    text-indent: -9999em;*/
/*    margin: auto;*/
/*    display: inline-block;*/
/*    margin-left: 10px;*/
/*    position: relative;*/
/*    font-size: 2px;*/
/*    -webkit-transform: translateZ(0);*/
/*    -ms-transform: translateZ(0);*/
/*    transform: translateZ(0);*/
/*    -webkit-animation-delay: -0.16s;*/
/*    animation-delay: -0.16s;*/
/*}*/
/*.loader:before,*/
/*.loader:after {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    content: '';*/
/*}*/
/*.loader:before {*/
/*    left: -1.5em;*/
/*    -webkit-animation-delay: -0.32s;*/
/*    animation-delay: -0.32s;*/
/*}*/
/*.loader:after {*/
/*    left: 1.5em;*/
/*}*/
/*@-webkit-keyframes load1 {*/
/*    0%,*/
/*    80%,*/
/*    100% {*/
/*        box-shadow: 0 0;*/
/*        height: 4em;*/
/*    }*/
/*    40% {*/
/*        box-shadow: 0 -2em;*/
/*        height: 5em;*/
/*    }*/
/*}*/
/*@keyframes load1 {*/
/*    0%,*/
/*    80%,*/
/*    100% {*/
/*        box-shadow: 0 0;*/
/*        height: 4em;*/
/*    }*/
/*    40% {*/
/*        box-shadow: 0 -2em;*/
/*        height: 5em;*/
/*    }*/
/*}*/

/*
Other setting
 */
.ErrorMessagePanel {
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    padding-top: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: none;
}

.ErrorMessagePanel span {
    color: #dedede;
    padding: 5px;
    font-size: 22px;
}


#HomeNavbar span.navbar-text {
    font-size: larger;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
}

#HomeNavbar ul.navbar-nav li.nav-item a.nav-link {
    font-size: larger;
    color: #ffffff;
    opacity: 0.8;
}

#HomeNavbar ul.navbar-nav li.nav-item a.nav-link:hover {
    opacity: 1;
}

.full-row {
    padding-left: 0px;
    padding-right: 0px;
}

.normal-row {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.CHANTHomeNav:before {
    background-color: rgba(30, 51, 40, 0.3);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.CHANTHomeNav {
    background-image: url('/20250207132659oe_/https://www.chant.org/img/header-bg.jpg');
    background-color: #505962;
    background-blend-mode: color-burn;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer {
    background-image: url('/20250207132659oe_/https://www.chant.org/img/footer-bg.jpg');
    background-color: #505962;
    background-blend-mode: luminosity;
    color: #cccccc;
    z-index: 97;
}

.scrollGradient {
    background:
        linear-gradient(#ffffff 33%, rgba(255,255,255, 0)),
        linear-gradient(rgba(255,255,255, 0), #ffffff 66%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(34,34,34, 0.5), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(34,34,34, 0.5), rgba(0,0,0,0)) 0 100%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}

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

span.Supplement.LexiconShow { color: var(--Lexicon-color)!important }
span.Supplement.IntraTextShow { color: var(--IntraText-color)!important }
span.SelectedLexicon { font-weight: 900; background-color: var(--Lexicon-color); color: #000; }

span.Supplement.MarkNotShown {
    color: #000000!important;
}

/* Supplement */
#displaySupplement .SupplementDataRow {
    padding: 5px;
    display: flex;
}

#displaySupplement .SupplementDataRow:before {
    border-radius: 5px;
    padding: 5px;
    margin-right: 10px;
    display: table;
}

#displaySupplement .SupplementDataRow span {
    padding-top: 5px;
}

#displaySupplement .Supplement_markC:before {
    content: '註';
    background-color: var(--markC-color);
}

#displaySupplement .Supplement_markD:before {
    content: '校';
    background-color: var(--markD-color);
}

#displaySupplement .Supplement_IRA:before {
    content: '重';
    background-color: var(--IntraText-color);
}

#displaySupplement .Supplement_Lexicon:before {
    content: '詞';
    background-color: var(--Lexicon-color);
}

#displaySupplement .Supplement_Variant:before {
    content: '異';
    background-color: var(--Variant-color);
}

#displaySupplement .Supplement_Philology:before {
    content: '訓';
    background-color: var(--Philology-color);
}

.TableAdjustableContent {
    resize:both;
    overflow: auto;
    /*text-overflow: ellipsis;*/
}

.WholePageErrorMessage {
    margin: auto;
    height: 60vh;
    line-height: 60vh;
    /*top: 40%;*/
    /*position: absolute;*/
    width: 100%;
    text-align: center;
    font-size: 32px;
}

.WholePageErrorMessageMultiLine {
    margin: auto;
    /*height: 60vh;*/
    /*line-height: 60vh;*/
    top: 40%;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 32px;
}

.PageContainer {
    height: 88vh;
    overflow-y: auto;
}

.HeaderLogo {
    height: 40px;
    filter: invert(9%) sepia(30%) saturate(3251%) hue-rotate(333deg) brightness(97%) contrast(98%);
}

h1.PageTitle {
    padding-top:50px;
    padding-bottom:50px;
    text-align: center;
}

.snippet-para-separator {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

.highlight-keywords-match {
    font-weight: 900;
    color: #990000;
}

.keyword-search-result-box {
    font-size: 18px;
    text-decoration: none;
    color: #3b3b3b;
}

.EditingTools,
.EditingChapterTools {
    cursor: zoom-in;
}


/* SWJZ CSS */


section {
    margin: 20px;
}

toc {
    font-size: 24px;
    display: block;
    padding-bottom: 10px;
}

chapter1 {
    font-size: 18px;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
}

xz1 {
    font-family: CHANT;
    color: #990000;
}

nw1 {
    font-family: CHANT;
    color: #990000;
}

in2 {
    font-size: 9px;
    color: #990000;
}

nw2_6 {
    font-family: CHANT;
}

editor {
    margin: 20px;
    display: block;
}

in1 {
    font-size: 13px;
    color: #333399;
}

nw2 {
    font-family: CHANT;
}

sentence {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}

pr1 {
    font-size: 9px;
    color: #003300;
}

menu span sm1,
chapter1 sm1 {
    font-size: 13px;
    color: #333399;
}

fq {
    font-size: 9px;
    color: #800000;
}

xz1_6 {
    font-family: CHANT;
}

pr2 {
    font-size: 9px;
    color: #808000;
}

nw1_6 {
    font-family: CHANT;
}

menu span.active,
menu span:active,
menu span:hover {
    color: #990000;
    font-weight: 800;
}
menu span {
    display: block;
    font-size: 18px;
    transition: .3s;
    cursor: pointer;
    padding-top: 3px;
}


.ResultPanelV2 {
    height: 85vh;
    overflow: auto;
}



:root {
    --main-text-color: #464F57;
    --main-title-color: #ededed;

    --hyperlink-text-color: #4f8fcf;
    --hyperlink-hover-color: #8d1f1f;

    --markC-color:orange;
    --markD-color:#3399ff;
    --Philology-color:#148c9f;
    --Variant-color:#b30000;
    --Lexicon-color:#28a745;
    --IntraText-color: #49c9b0;

    --Bone-box-color: 1, 68, 87;
    --Jinwen-box-color: 250, 241, 67;
    --PreHan-box-color: 31, 70, 120;
    --SixDyn-box-color: 79, 17, 145;
    --Jianbo-box-color: 10, 168, 36;
    --Leishu-box-color: 181, 103, 20;
    --Lexicon-box-color: 27, 167, 222;
    --IntraText-box-color: 147, 190, 15;

    --box-opacity: 0.6;
}