body{font-family:system-ui,—apple-system,Segoe UI,Rototo,EmojiFont,ChineseFont,Helvetica,Arial,sans-serif;font-size:14px;color:var(--color-dark);background-color:#f0f8ff}
a{text-decoration:none!important;transition:all .35s ease 0s}
.btn.focus,.btn:focus,.custom-select,.custom-select:active,.custom-select:focus,.custom-select:invalid:focus,.custom-select:valid:focus,.form-control,.form-control:active,.form-control:focus{box-shadow:none!important}
[class^="ri-"],[class*=" ri-"]{display:inline-block;margin-right:.25rem}
.grid-btn{padding:.25rem;text-align:center;color:var(--color-darkgray);background-color:var(--color-light);border-radius:.15rem;cursor:pointer;transition:all .35s ease 0s}
.grid-btn.active,.grid-btn:active,.grid-btn:focus,.grid-btn:hover{background-color:var(--color-blue-0);color:var(--color-white)}
.breadcrumb,.infobar,.navbar{background-color:var(--color-white);box-shadow:0 0 15px 5px var(--alpha-black-1);transition:all .35s ease 0s}
.navbar{margin-bottom:1rem}
.navbar .navbar-toggler{padding:.25rem .5rem;border-color:var(--color-lightgray)}
.navbar .navbar-nav .nav-link{color:var(--color-dark)}
.navbar .navbar-nav .nav-link.active,.navbar .navbar-nav .nav-link:active,.navbar .navbar-nav .nav-link:focus,.navbar .navbar-nav .nav-link:hover{color:var(--color-blue-0)}
.breadcrumb{margin:1rem 0}
.breadcrumb .breadcrumb-item.active{color:var(--color-gray)}
.breadcrumb .breadcrumb-item a{color:var(--color-dark)}
.breadcrumb .breadcrumb-item a:hover{color:var(--color-blue-0)}
.infobar{margin:1rem 0;padding:1rem;border-radius:.5rem}
.infobar>p{color:var(--color-dimgray);margin-bottom:0}
.infobar p>a{font-weight:600;color:var(--color-gray)}
.infobar p>a:hover{color:var(--color-blue-0)}
.infobar-title{position:relative;font-size:18px;font-weight:700;padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:2px solid var(--color-light)}
.infobar-title::before{content:"";position:absolute;background-color:var(--color-blue-0);bottom:-2px;left:0;width:70px;height:2px;z-index:1}
.infobar-title::after{content:"";position:absolute;border-radius:50%;background-color:var(--danger);width:10px;height:10px;box-shadow:20px 0 var(--warning),40px 0 var(--success);bottom:15px;right:40px}
.infobar-list{list-style:none;display:block;padding:0;margin:0}
.infobar-list>li{list-style-type:none;display:flex;justify-content:space-between;align-items:center;color:var(--color-gray);padding:0;margin:0}
.infobar-link{display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-template-rows:auto}
.infobar-link>a{display:block;font-size:12px}
.userinfo{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}
.userinfo .info{display:flex;align-items:center;flex-wrap:nowrap}
.userinfo .info .avatar{display:block;position:relative;width:55px;height:55px;margin-right:.75rem}
.userinfo .info .avatar img{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--color-dark);cursor:pointer}
.userinfo .info .avatar span{display:block;position:absolute;right:0;bottom:0;width:16px;height:16px;line-height:calc(16px - 2px);color:var(--color-white);background-color:var(--success);border:1px solid var(--success);border-radius:50%;font-size:12px;text-align:center}
.userinfo .info .avatar span>i{margin-right:0!important}
.userinfo .info .avatar em{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-style:normal;font-size:24px;background-color:var(--color-light);border-radius:50%;color:var(--color-darkgray)}
.userinfo .info .avatar em>i{margin-right:0}
.userinfo .info .alias h3{font-size:17px;font-weight:700}
.userinfo .info .alias h3 a{color:var(--color-dark)}
.userinfo .info .alias h3 a:hover{color:var(--color-blue-0)}
.userinfo .info .alias h3 em{display:inline-block;background-color:var(--primary);color:var(--color-white);font-style:normal;font-size:11px;padding:.125rem .25rem;margin-left:.5rem;border-radius:.15rem;vertical-align:.15rem;cursor:pointer}
.userinfo .info .alias p{font-size:12px;margin-bottom:0}
.collapse .collapse-menu{padding-top:1rem;transition:all .35s ease 0s}
.search .form-control{border-width:2px;border-color:var(--primary)}
.btns-grid{padding:0;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));grid-template-rows:auto}
.btns-grid>span{display:block;font-size:14px;cursor:pointer}
.video-item{display:flex;flex-wrap:nowrap;width:100%;margin-bottom:1rem;padding:1rem;border-radius:.5rem;background-color:var(--color-white);box-shadow:0 0 15px 5px var(--alpha-black-1);transition:all .35s ease 0s}
.video-item .video-item-image{position:relative;width:165px;margin-right:.75rem;aspect-ratio:3/4;transition:all .35s ease 0s}
.video-item .video-item-image img{width:100%;height:100%;border-radius:.25rem;box-shadow:0 0 10px 5px var(--alpha-black-1)}
.video-item .video-item-image:hover{transform:translateY(-5px)}
.video-item .video-item-image:hover img{box-shadow:0 0 0 .1rem var(--color-blue-0)}
.video-item .video-item-image .video-item-infos{position:absolute;bottom:.25rem;left:.25rem;width:calc(100% - .5rem);white-space:nowrap;overflow:hidden;text-overflow:clip}
.video-item .video-item-image .video-item-infos span{display:inline-block;padding:.1rem .25rem;margin-right:.15rem;background-color:var(--danger);border-radius:.15rem;font-size:10px;color:var(--color-white);cursor:pointer}
.video-item .video-item-image .remarks{position:absolute;top:0;right:0;display:inline-block;background-color:var(--primary);color:var(--color-white);font-size:10px;border-top-right-radius:.2rem;padding:.15rem .25rem}
.video-item .video-item-intro{width:calc(100% - 165px - .75rem)}
.video-item .video-item-intro .video-item-title{font-size:17px;font-weight:700;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:clip}
.video-item .video-item-intro .video-item-title a{color:var(--color-dark)}
.video-item .video-item-intro .video-item-title a:hover{color:var(--color-blue-0)}
.video-item .video-item-intro ul{list-style:none;padding:0;margin:0 0 .5rem 0}
.video-item .video-item-intro ul li{list-style-type:none;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.video-item .video-item-intro ul li.intro{display:-webkit-box;display:-moz-box;display:box;display:-ms-grid;display:grid;white-space:wrap;word-break:break-all;line-height:1.5em;max-height:4.5em;text-align:justify}
.pagebar{margin:1rem 0}
.pagebar .btn{font-size:11px}
.pagebar .dropdown-menu{padding:0;margin:0;border-radius:0;font-size:11px;box-shadow:0 0 10px 5px var(--alpha-black-1);width:65px;min-width:65px;max-height:200px;min-height:200px;overflow-x:hidden;overflow-y:auto;text-align:center;box-sizing:border-box}
.pagebar .dropdown-menu::-webkit-scrollbar{width:5px}
.pagebar .dropdown-menu::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-gray)}
.pagebar .dropdown-menu::-webkit-scrollbar-track{background-color:var(--color-gainsboro);border:1px solid var(--color-silvergray)}
.pagebar .dropdown-menu .dropdown-item{color:var(--color-dark);font-size:11px;text-align:center}
.pagebar .dropdown-menu .dropdown-item.active,.pagebar .dropdown-menu .dropdown-item:focus,.pagebar .dropdown-menu .dropdown-item:hover{background-color:var(--primary);color:var(--color-white)}
@keyframes progress-animation{
0%{width:0%}
100%{width:100%}
}
.progress .progress-bar{animation:progress-animation 2s linear infinite}
.btn.btn-radius{padding:.25rem 1.5rem;border-radius:1.5rem}
.from-title{background-color:var(--color-light);padding:.5rem .75rem;margin:1rem 0;border-left:5px solid var(--color-blue-0)}
.total{text-align:justify;margin-bottom:0}
.total strong{margin:0 .25rem}