/*!
 * Wills Js is based on Bootstrap5.1
 * ZYW.Util will base on native JS.
 * Wills 0.1
 */
/*!
 * 用于carousel图片设定高度，主动居中mask.
 */
/*!
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

 */
.zywtext p:first-of-type::first-letter {
    font-weight: bolder;
}

:root, [data-bs-theme=light] {
    --zyw-headerColor: #90249b;
    --zyw-headerColor-dark: #90249b;
    --zyw-bodyBgc2: #3788db;
    --zyw-bodyBgc: #ffffff;
    --zyw-fullScreenImg: url('/ZYW/Images/IMG_3362.jpg');
    --zyw-app-bgcolor-login: rgba(156, 212, 137, 0.49);
    --zyw-app-bgcolor-logout: rgba(160, 165, 170, 0.53);
    --zyw-app-link-active: rgba(5, 60, 177, 0.87);
    --zyw-app-link-active-dark: rgba(236, 245, 4, 0.56);
    --zyw-textcolorofActive: #90249b;
    --zyw-metaTheme: #90249b;
    --zyw-svg-hover: #f646d3;
    --zyw-svg-fill: #90249b; /*#c225a1;*/
}
[data-bs-theme=dark]{
    --zyw-headerColor: var(--zyw-headerColor-dark);
    --zyw-textcolorofDark: #CCCCCC;
    --zyw-app-link-active: rgba(236, 245, 4, 0.56);
    --zyw-svg-hover: #e125ba;
    --zyw-svg-fill: #90249b;/*#982f82;*/
}
input[type=text], textarea {
    -webkit-text-size-adjust: none;
}
meta[name="theme-color"]{

}
.zyw-primary {
    background-color: var(--zyw-headerColor) !important;
}
.coverMe{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--bs-primary);
    color: #fff;
    opacity: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.z-10{
    z-index: 10;
}

.WillsHeaderBg{

}
#app{

}
.zyw-App-o, .zyw-App-bodyO{

}
/**
   为了页面垂直居中。
 */
html,body{
    /*
    background-image:url("/ZYW/Images/1.jpeg") ;
    background-repeat: no-repeat;
    background-position: center,center;
    */
    height: 100%;
}
#appRoot {
    height: 100%;
}
/*
    垂直居中元素需要
 */
.vCenter{
    margin: auto !important;
}
/**
    垂直居中父元素需要
 */
.vCenterParent{
    display: flex;
    align-items: center;
}
.zyw-d-flex{
    display: flex;
}

.carousel-item img, .centerMe {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}



.ZYW-navbar {
    transition-duration: 1s;
    flex-wrap: nowrap;
    justify-content: flex-start;
    font-size: 1.2em;
        /*border-bottom: #d0d0d0 solid 1px;*/
        /*margin-bottom: 0.4em;*/
}
.bgColored.ZYW-navbar{
    transition-duration: 1s;
    background-color: var(--zyw-headerColor);
}
.ZYWNavBg {
    background-color: var(--zyw-headerColor);
}
.ZYW-navbar hr {
    margin: 0px ;
}
.PageFullImage{
    background-image: var(--zyw-fullScreenImg);
    background-position: center ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}
.nav-link,.ZYW-navbar .offcanvas .navbar-nav{
    padding: 0em;
}
.nav-item {
    cursor: pointer;
    display: inline;
}
/*
.navbar-nav .nav-item {
    margin-right: 20px;
    margin-left: 20px;
}
*/




.WillsFooter {
    margin-top: 8em;
}


.hCenter{
    margin-left: auto;
    margin-right: auto;
}
.text-bg-dark{
    color: var(--zyw-textcolorofDark) !important;
}
/**
为了减少offcanvas的宽度，但是直接减少，会导致平铺显示时过短。
 */
.offcanvas.showing, .offcanvas.show{
    max-width: 68vw;
}
.ZYW-h-200px{
    height: 200px !important;
}
.ZYW-h-100{
    min-height: 100vh;
}
.max-vh-20{
    max-height: 20vh;
}
.min-vh-50{
    min-height: 50vh;
}
.min-vh-80{
    min-height: 80vh;
}
.min-vh-75{
    min-height: 75vh;
}
.ZYW-text-min{
    font-size: small;
    font-weight: lighter;
}
.ZYW-font-lighter{
    font-weight: lighter;
}

@media (min-width: 768px)  {
    .zyw-md-navbarlink{

    }
}
@media (max-width: 768px)  {
     .zyw-formapp-paddingx{
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 576px)  {
    .zyw-log-svg-width{
        width:70%;
        margin-bottom: -50px;
    }
}
.calkeys:hover{
    background-color: rgba(10, 83, 190, 0.49) !important;
    border: #0a53be;
}
.zyw-calinput{
    font-size: 2rem;
}


.zyw-userStatus{
    height: 2rem;

}

.zyw-login.zyw-App-o {
    transition-duration: 1s;
    background-color: var(--zyw-app-bgcolor-login)
}

.zyw-logout.zyw-App-o {
    transition-duration: 1s;
    background-color: var(--zyw-app-bgcolor-logout)
}
.zyw-justify-flex{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}
.zyw-App-close{
    display: none;
}
.zyw-App-open{
    display: flex;
}
.zyw-app-link-dark.zyw-active{
    box-shadow: 0 0 0 0.25rem var(--zyw-app-link-active-dark);
}
.zyw-app-link.zyw-active{
    box-shadow: 0 0 0 0.25rem var(--zyw-app-link-active);
}
.btn.zyw-active{
    box-shadow: 0 0 0 0.25rem var(--zyw-app-link-active-dark);
}
.btn.zyw-active{
    box-shadow: 0 0 0 0.25rem var(--zyw-app-link-active);
}
.zywHidden{
    display: none;
}
.nav-link.zyw-active{
    color: var(--zyw-textcolorofActive);
}
.form-signin{
    max-width: 760px;

}
.form-register{
    max-width: 760px;
}
.zyw-m-t-0-200{
    margin-top: -200px;
}
.zyw-input-close-top {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.zyw-input-close-bottom  {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.form-signin .form-floating:focus-within, .zyw-input-close-top .form-floating:focus-within{
    z-index: 2;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300))
}


svg.ZYWHover:hover{
    transition-duration: 2s;
    fill: var(--zyw-svg-hover);
}
svg.ZYWHover{
    transition-duration: 2s;
    fill: var(--zyw-svg-fill);
}


.pt128{
    padding-top: 128px;
}

.pb-100{
    padding-bottom: 100px;
}
.ps-4-5{
    padding-left: 2rem !important;
}
.pt88{
    padding-top: 88px;
}
.fs-7{
    font-size: 0.75rem !important;
    line-height: 1rem;
}
.fs-8{
    font-size: 0.6rem !important;
}
.fs-9{
    font-size: 0.45rem !important;
}
.mt--1e{
    margin-top: -1rem !important;
}
.mt--1_5e{
    margin-top: -1.5rem !important;
}
.mt--2e{
    margin-top: -2rem !important;
}
.mt--10{
    margin-top: -10px;
}
.mt--20{
    margin-top: -20px;
}
.mt128{
    margin-top: 128px;
}
.minH100{
    min-height: 100px !important;
}
.zyw-w100p{
    width: 100px !important;
}
.zyw-h100p{
    height: 100px !important;
}
.zyw-h150p{
    height: 150px !important;
}
.zyw-h180p{
    height: 180px !important;
}
.zyw-h200p{
    height: 200px !important;
}
.zyw-h250p{
    height: 250px !important;
}
.mt--4{
    margin-top: -4px;
}
.pointer{
    cursor: pointer;
}

.navbar-nav .badge,.navbar-nav .badge-notif{
    margin-top: 0.6rem !important;
    /*font-size: 0.45rem !important;*/
}
.nav-link .badge{
    margin-left: -10px;
    margin-top: 6px;
}
.nav-link .badge{
    --bs-badge-padding-x: 0.85em;
    --bs-badge-padding-y: 0.30em;
    --bs-badge-font-size: 0.40em;
}

.navbar-nav .nav-link{
    font-size: 1.2rem !important;
}

.hljs, code[class^="language-"], .zyw-digMsg pre code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    padding-left: 2em;
    /* 样式规则 */
    background-color: #23241f !important;
}

.zyw-digMsg ul,.zyw-digMsg ol{
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.zyw-digMsg p, .zyw-digMsg pre {
    margin: 6px 0 !important;
}
.mt-0-1{
    margin-top: -1em;
}
.single-line {
    overflow: hidden;       /* 防止内容溢出 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;    /* 使内容在一行显示，不换行 */
         /* width: 200px; 指定div宽度或者使用max-width，根据需要调整 */
}
.max-w-100{
    max-width: 100px;
}
.max-w-50{
    max-width: 50px;
}
.max-w-150{
    max-width: 150px;
}


.image-square {
    width: 100%;
    /* Use padding to set the height relative to the width */
    padding-top: 50%;
    /* Cause the element to box itself as per the padding */
    position: relative;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

/* The ::after pseudo-element is used to maintain the aspect ratio */
.image-square::after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

.glightbox-mobile {
    height: auto;
}
.glightbox-open {
    height: auto;
}
.event-dig h6{
    font-size: 0.9rem;
}
.event-dig h5{
    font-size: 1.0rem;
}
.event-dig h4{
    font-size: 1.1rem;
}
.event-dig h3{
    font-size: 1.2rem;
}
.event-dig h2{
    font-size: 1.3rem;
}
.event-dig h1{
    font-size: 1.4rem;
}