dongwaa/webel.css

@charset "utf-8";
:root{
    color-scheme: light dark;
    --link-color: #1a73e8;
    --link-color-hover: #0a56ca;
}

head, body, html{scroll-behavior:smooth;margin:0;-webkit-text-size-adjust:100%;background-color:var(--bgcolor)}
*{color-adjust:exact!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;font-family: AppleSDGothicNeo-Regular, PingFangHK-Regular, Calibri, Microsoft JhengHei, verdana}
button{color:black;border:none;padding:1em;border-radius:1em;margin:0;cursor:pointer;font-size:13.25px}
a, .acss{text-decoration:none;color:var(--link-color);background-color:transparent} .acss{font-size:16px} a:hover, .acss:hover{color:var(--link-color-hover)}
.aobh{transition-duration:0.1s!important;border-radius:0.5em;padding:0.5em;user-select:none;cursor:pointer}
.aobh:hover{background-color:rgba(0,0,0,.05)}
.aobh:active{background-color:rgba(0,0,0,.1)}
.aobh:hover:active{transform:scale(0.95)}
.gray_aobh{padding:0.5em;user-select:none;filter:grayscale(1)}
.flx{flex-flow:wrap;display:flex;justify-content:space-between;align-items:center} .flx div{vertical-align:middle}
.label{padding:0.25em 0.5em;border-radius:0.5em;white-space:nowrap;width:min-content}
.content{flex: 1 0 auto;outline:none;opacity:1!important;height:auto!important;overflow:unset!important}
.symbol{font-family: -apple-system, BlinkMacSystemFont, Calibri, Roboto, Ubuntu, verdana !important; font-weight: bold}
#no_css, .no_desktop{display:none!important}
.bufLR{padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#divheadbuffer{height:calc(5vh + 4.5em)}
img{object-fit:cover;opacity:1;transition-duration:.375s;transition-timing-function:cubic-bezier(.19,1,.22,1)}

.smtbtn{white-space:pre;padding:1em;border-radius:1em;font-size:13.25px;margin:3px;text-align:center;transition-duration:.1s;display:inline-block;line-height:normal;user-select:none}
.smtbtn > span{font-size:1em;color:#3f3c39;transition-duration:.1s;background-position-y:center;background-repeat:no-repeat;background-size:1.75em auto}
.smtbtn:hover > span{padding:0 1em;background-image:none!important}
.smtbtn:hover:active{transform:scale(0.97)}

.edge2edge{padding:0.75em calc( 5% + 5em );padding:0.75em max(calc(env(safe-area-inset-right) + 5%), calc(5% + 5em)) 0.75em max(calc(env(safe-area-inset-left) + 5%), calc(5% + 5em))}
.card{padding:2em calc( 5% + 5em );padding:2em max(calc(env(safe-area-inset-right) + 5%), calc(5% + 5em)) 2em max(calc(env(safe-area-inset-left) + 5%), calc(5% + 5em))}

h1{margin:0;font-size:2.6rem}
h2{margin:0;font-size:2.15rem;opacity:0.875}
h3{margin:0;font-size:1.675rem;opacity:0.75}
h4{margin:0;font-size:1.325rem;line-height:1.25}
h5{margin:0;font-size:1rem}
h6{margin:0;font-size:0.8rem}
p1{font-size:1.175rem;font-weight:bolder}
p2{font-size:1rem}
p3{font-size:0.875rem;opacity:0.875;font-style:italic}
p4{font-size:0.8rem;opacity:0.8}
p5{font-size:0.625rem}
p6{font-size:0.625rem;opacity:0.8}

input:checked + .slider {background-color:var(--link-color)}
input:checked + .slider:hover {background-color:var(--link-color-hover)}
input:checked + .slider:before {-webkit-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em)}
.switch {position:relative;display:inline-block;width:2.25em;height:1.25em}
.switch input {opacity:0;width:0;height:0}
.slider {border-radius:5em;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#d8d8d8}
.slider:hover {background-color:#c8c8c8}
.slider:before {position:absolute;content:"";border-radius:50%;height:0.75em;width:0.75em;left:0.25em;top:0.25em;box-shadow: 0 2px 2px rgba(0,0,0,.3);background-color:white;background:linear-gradient(180deg, #f8f8f8, #e8e8e8)}
.slider:before, .slider {-webkit-transition:.1s;transition:.1s;transition-timing-function:cubic-bezier(.77,0,.18,1)}

input:checked + .slipink {background-color:#e81973}
input:checked + .slipink:hover {background-color:#d80963}
input:checked + .sligreen {background-color:#73e819}
input:checked + .sligreen:hover {background-color:#63d809}
input:checked + .slipurple {background-color:#8e19e8}
input:checked + .slipurple:hover {background-color:#7e09d8}
input:checked + .sliorange {background-color:#e88e19}
input:checked + .sliorange:hover {background-color:#d87e09}

.checkmark {cursor:pointer;height:1.75em;width:1.75em;border-radius:50%;position:absolute;top:-0.4em;left:0;border:0.15em solid rgba(128,128,128,.5);transition-duration:.05s}
.radiobt {padding-left:2.75em;user-select:none;position:relative;display:inline-block;margin:0.75em 0.25em;line-height:1.2em}
.radiobt > input{display:none}
.radiobt > input:checked ~ .checkmark, .radiobt:hover input:checked ~ .checkmark{cursor:default;background-color:var(--link-color);border:0.15em solid var(--link-color)}
.radiobt > input:checked ~ .checkmark:after, .radiobt:hover input:checked ~ .checkmark:after{opacity:1;box-shadow:0 0.25em 0.25em rgba(0,0,0,.1)}
.radiobt .checkmark:after {opacity:0;border-radius:50%;height:1em;width:1em;left:0.375em;top:0.375em;background-color:white;background:linear-gradient(180deg, #f8f8f8, #e8e8e8);position:absolute;content:"";transition-duration:.05s}
input ~ .checkmark:hover {border:0.15em solid #1a73e8}
input:disabled ~ .checkmark, input:disabled ~ .checkmark:hover{cursor:default!important;border:0.15em dotted rgba(128,128,128,.3)}
.radiobt:hover:active > input ~ .checkmark {transform:scale(0.95)}
.radiobt:hover:active > input:checked ~ .checkmark, input:disabled ~ .checkmark {transform:scale(1)!important}

.pgsbtn{flex-shrink:0}
.pgsbtn label{display:inherit}
.pgsbtn img{object-fit:contain;width:2em;height:2em;cursor:pointer;user-select:none}
.pgsbtn form{display:inline-block;width:10em;margin:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.19,1,.22,1)}
.pgsbtn form:focus-within{width:10em}
.pgsbtn form input{outline:none!important;-webkit-appearance:none;padding:0;margin:0;background:none;border:none;height:2rem;margin-left:0.4em;width:calc(100% - 0.4em);font-size:0.85rem}

.tabview{justify-content:center!important;margin:0.5em;position:fixed;bottom:5vh;left:calc(10vw + 13em);right:calc(10vw + 13em);z-index:10000;color:black}
.tabview-wrp{overflow-x:auto;display:flex;scrollbar-width:thin}
.tabview-sel{width:min-content;padding:0.4em 1em;border-radius:0.75em;margin:0 0.25em;background:none;vertical-align:middle;text-align:center;border:0}
.tabview-sel-h{transition-duration:0.05s;cursor:pointer}
.tabview-sel-h:hover:active{transform:scale(0.97)}
.tabview-sel-s{cursor:default}
.tabview-sel img{height:2em;min-width:2em;vertical-align:middle;user-select:none;display:block;width:100%;object-fit:contain;margin-bottom:0.2em;-webkit-touch-callout:none}
.tabview-sel p3{line-height:1.1;vertical-align:middle;white-space:nowrap}
.tabview-sel-s, .tabview-sel-h:hover{background-color:rgba(0,0,0,.1)}
.tabview-sel-tri{display:none}
.tabview:focus, .tabview-wrp:focus, .tabview-sel:focus{outline:none!important}
.tabview-close{align-items:center;z-index:11000;display:none;background-color:rgba(32,32,32,.1);max-width:50vw;outline:none;border:0;padding:0.75em 1em;margin:0.25em 0.375em;border-radius:5em;width:100%;justify-content:center!important;box-shadow:0 0.5em 1em rgba(0,0,0,0);flex-flow:nowrap!important;white-space:nowrap}
.tabview-close > img{height:2em;width:2em;object-fit:contain;margin-right:0.375em}
.tabview-close > * {vertical-align:middle}

.bottom_wrp{flex-flow:nowrap!important;scrollbar-width:thin;word-break:break-word;position:fixed;bottom:0;left:0;right:0;margin:0 calc( 10% + 3em ) 5vh calc( 10% + 3em );width:calc( 80% - 6em );height:4.5em;border-radius:2.25em;z-index:9999}
.bottom_wrp > .tabview{margin:0.5em;position:unset;flex-grow:1;min-width:0}
.bottom_wrp .ckimg{width:130px;height:52px;padding:0 0.5em;z-index:3}
.bottom_wrp > a > .ckimg{object-fit:cover;filter:brightness(50%)}

.dwhi{width:1.75em;height:1.75em;vertical-align:middle;margin-right:0.1em;pointer-events:none;object-fit:contain}
.topbar{z-index:99999;min-height:45px;flex-flow:initial!important;border-bottom:0.16em solid rgba(128,128,128,.3);padding:2em calc( 5% + 5em ) calc( 0.5em - 0.08em ) calc( 5% + 5em - 0.5em );padding:max(calc(env(safe-area-inset-top) + 0.5em), 2em) calc( 5% + 5em + env(safe-area-inset-right)) calc( 0.5em - 0.08em ) calc( 5% + 5em - 0.5em + env(safe-area-inset-left));position:-webkit-sticky;position:sticky;top:calc( env(safe-area-inset-top) - 1.5em );box-shadow:0 0.75em 0.75em rgba(0,0,0,.15)}
.dwhdt{flex-grow:2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 0.25em}
/* .dwhdto{flex-flow:nowrap} */
.dwhdt img{height:1.625rem;width:1.625rem;margin-right:0.375em;user-select:none}
.dwhdb{border-bottom:2px solid rgba(0,0,0,0.2);transition-duration:0.05s;margin:0 0.5em;padding:0.25em}
.dwhdb, .dwhdbtf{white-space:nowrap;width:min-content;color:#7f7c79}
.dwhdbs{margin:0 0 0.75em 0!important;padding-top:0!important}
.dwhdbtf{cursor:default;border-bottom:2px solid rgba(0,0,0,0.5);margin:0 0.25em;padding:0.25em 0.5em}
.dwhdbt:hover{color:orange;border-bottom:2px solid orange;margin:0 0.25em;padding:0.25em 0.5em}
.dwhdbt:hover:active{transform:scale(0.95)}
.dwhdi{justify-content:flex-start;flex-flow:nowrap;overflow-x:auto;scrollbar-width:thin}
.dwhda{flex-shrink:0}
.dwhdab{border-radius:50%;margin:0.15625em 0.2375em;width:2.375em;height:2.375em;border:none;transition-duration:0.1s;cursor:pointer;padding:0;display:inherit;font-size:unset;outline:none}
.dwhdab:hover:active{transform:scale(0.9)}
.dwhdab > img {object-fit:cover;user-select:none;width:calc(100% - 0.5em);height:calc(100% - 0.5em);padding:0.25em;transition-duration:0.1s;-webkit-touch-callout:none}
.dwhtdo{justify-content:flex-start}
.jtx{display:inline-block;margin-right:0.35em;padding:calc(0.4em - 2px) 0.5em!important;color:#999999;border:2px solid rgba(128,128,128,.3);user-select:none}

.ckusrico{justify-content:end!important;height:100%}
.ckusrbtn{border-radius:3em;padding:0.3em;transition-timing-function:cubic-bezier(.2,.9,0,1.36);transition-duration:0s;aspect-ratio:1/1;z-index:11001;cursor:pointer;position:absolute;right:1em;outline:none;border:0;margin:0;background-color:rgba(0,0,0,0);border-color:rgba(128,128,128,.3)}
.ckusrbtn:hover{background-color:rgba(32,32,32,.1)}
.ckusrbtn > a {display:block;line-height:0}
.ckusrbtn > a > img{border-radius:3em;height:3em;width:3em;min-height:3em;min-width:3em;object-fit:cover;border:0px solid rgba(128,128,128,.5);background-image: url(https://cakko.ml/hid/ico2/PPPlaceholder.png);background-repeat: no-repeat;background-position: center center;background-size: cover}
.ckusrbtn > .ckusrwrp{display:none}
.ckusrbtn:focus, .ckusrbtn:focus-within{border-radius:2.25em;box-shadow:0 1em 2em rgba(0,0,0,.3);border:0.2em solid rgba(128,128,128,.3);aspect-ratio:auto;width:max-content;transition-duration:.25s;cursor:default;position:absolute;bottom:calc(4.5em + 1em + env(safe-area-inset-bottom));right:0;margin:1em;padding:2.25em;background-repeat:no-repeat;background-size:cover;background-position:center center;/*background-image:url(https://cakko.ml/hid/u1.jpg)*/}
.ckusrbtn:focus > a > img, .ckusrbtn:focus-within > a > img{display:none}
.ckusrbtn:focus > .ckusrwrp, .ckusrbtn:focus-within > .ckusrwrp{display:block}
.ckusrbtn:focus + .tabview-close, .ckusrbtn:focus-within + .tabview-close{display:flex}
.pptpi{justify-content:flex-start!important}
.ppimg, .ppimg_cover, .ppimg_cover_edit, .ppimg_cover_edit_img{border-radius:6.5em;transition-duration:0.2s;transition-timing-function:cubic-bezier(.08,.82,.17,1)}
.ppimg{height:5.5em;width:5.5em;object-fit:cover;cursor:pointer}
.ppimg_cover{margin-right:1em;border:2px solid rgba(128,128,128,.8);width:min-content}
.ppimg_cover_edit{justify-content:center!important;background-color:rgba(0,0,0,.3);position:absolute;width:5.5em;height:5.5em;text-align:center;opacity:0;color:white;top:calc(2.25em + 2px)}
.ppimg_cover_edit_img{width:calc(100% - 2em);height:calc(100% - 2em);margin:1em;opacity:0.9;transform:scale(0.7);border-radius:0}
.ppimg_cover:hover{border:2px solid rgba(0,0,0,.3)}
.ppimg_cover:hover > .ppimg{transform:scale(0.925)}
.ppimg_cover:hover > .ppimg_cover_edit{opacity:1;transform:scale(1)}
.ppimg_cover:hover > .ppimg_cover_edit > .ppimg_cover_edit_img{transform:scale(0.9)}
.ppimg_cover:hover:active{border:2px solid rgba(0,0,0,.5)}
.ppimg_cover:hover:active > .ppimg{transform:scale(1)}
.ppimg_cover:hover:active > .ppimg_cover_edit{background-color:rgba(0,0,0,.5)}
.ppimg_cover:hover:active > .ppimg_cover_edit > .ppimg_cover_edit_img{opacity:1;transform:scale(0.8)}

.reqsignin_outer{justify-content:center!important;width:calc(100% - 2em);margin:1em}
.reqsignin_inner{justify-content:unset!important;padding:2em;background-color:white;box-shadow:0 1em 2em rgba(0,0,0,.15);border-radius:2em;width:fit-content;width:-moz-fit-content;width:-webkit-fit-content}
.reqsignin_switch{margin-bottom:1em;padding-bottom:0.75em;border-bottom:2px solid rgba(128,128,128,0.25);width:100%}
.reqsignin_switch .switch{margin:0.5em}

#kbShortcutMenuWrp{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
    background-color:rgba(0,0,0,.3);
    align-items:center;
    justify-content:center;
    transition-delay:.05s;
    transition-duration:.1s;
    opacity:0;
}
#kbShortcutMenuWrp:focus-within{opacity:1!important;display:flex!important}
#kbShortcutMenu{
    min-width: 20em;
    min-height: 10em;
    width: min-content;
    height: min-content;
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
    border-radius: 1em;
    box-shadow: 0 1em 2em rgba(0,0,0,.3);
    transition-duration: .025s;
    outline:none;
    z-index:10000;
    border:0.15em solid rgba(128,128,128,.1);
}
#kbShortcutMenu:focus{border:0.15em solid rgba(128,128,128,.3)}
#kbShortcutMenubg{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    backdrop-filter: grayscale(.8);    
    -webkit-backdrop-filter: grayscale(.8);
}

@keyframes spinner { 0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}
#topbar_loading::before {display: block!important;content: "";height: 1em;width: 1em;margin:0.375em;margin-right:0.125em;padding:0.125em;border-radius: 50%;animation: 1.25s linear infinite spinner;animation-play-state: running;animation-play-state: inherit;border: solid 0.25em rgba(128,128,128,.5);border-top-color: #1a73e8!important;will-change: transform;text-align:center;font-size:16px;line-height:16px;font-weight: bold}
#topbar_loading, #topbar_title_inwrap_main, #topbar_title_inwrap_secondary, #topbar_title_inwarp_sec_buf{transition-delay:0.1s;transition-timing-function:ease}
#topbar_loading{transition-duration:0.5s;display:unset;opacity:1;width:2.375em;transform:translateX(0)}
#topbar_title_wrap, #topbar_title_inwrap_main, #topbar_title_inwrap_secondary{display:block;max-height:2.625em;overflow-y:hidden}
#topbar_title_inwrap_main, #topbar_title_inwrap_secondary, #topbar_title_inwarp_sec_buf{transition-duration:0.3s}
#topbar_title_inwrap_main > * {vertical-align:middle}
#topbar_subtitle, #topbar_inwrap_subtitle{font-weight:normal;display:block/*;width:min-content;white-space:pre*/}
#topbar_title_inwarp_sec_buf{height:0;max-height:0}
.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within, #kbShortcutMenu{background-color:rgba(255,255,255,.95);backdrop-filter:blur(1em);-webkit-backdrop-filter:blur(1em)}
.topbar, #kbShortcutMenu{background-color:rgba(255,255,255,.95)}
@supports (backdrop-filter:blur(1em)) {.dwdt_top, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(255,255,255,.8)} #kbShortcutMenu{background-color:rgba(255,255,255,.6)}}
@supports (-webkit-backdrop-filter:blur(1em)) {.dwdt_top, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(255,255,255,.8)} #kbShortcutMenu{background-color:rgba(255,255,255,.6)}}

@media (prefers-color-scheme: dark) {
body, head, html{background-color:#0f0c09;color:#eeeeee}
button{color:#eee;background-color:#3f3c39}
a, .acss{color:#3993ff} a:hover, .acss:hover{color:#5bb5ff}
textarea{background:#3f3c39;color:#f0f0f0;border-color:#606060}
.aobh:hover{background-color:rgba(255,255,255,.05);color:#5bb5ff}
.aobh:active{background-color:rgba(255,255,255,.1)}
.smtbtn > span, .ckusrwrp{color:white}
.topbar{background-color:rgba(0,0,0,.95)}
.dwhdb{border-bottom:2px solid rgba(255,255,255,.3)}
.dwhdb, .dwhdbtf{color:#9f9c99}
.dwhdbtf{border-bottom:2px solid rgba(255,255,255,.6)}
.ppimg_cover:hover{border:2px solid rgba(132,132,132,1)}
.ppimg_cover:hover:active{border:2px solid rgba(192,192,192,0.8)}
input:checked + .slider:hover {background-color:#2a83f8}
input:checked + .slipink:hover {background-color:#f82983}
input:checked + .sligreen:hover {background-color:#73e819}
input:checked + .sligreen {background-color:#63d809}
input:checked + .slipurple:hover {background-color:#b441ff}
input:checked + .slipurple {background-color:#9e29f8}
input:checked + .sliorange:hover {background-color:#f89e29}
.slider {background-color:#c8c8c8}
.slider:hover {background-color:#d8d8d8}
.pgsbtn form input, .tabview, .tabview-sel p3{color:white}
.tabview-sel-s, .tabview-sel-h:hover{background-color:rgba(255,255,255,.15)}
.tabview-close{background-color:rgba(255,255,255,.15)}
.tabview-close > p5{color:#eeeeee}
.bottom_wrp > a > .ckimg{filter: brightness(1)}
.ckusrbtn:hover{background-color:rgba(255,255,255,.15)}
.reqsignin_inner{background-color:#1f1c19}
.bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:#1f1c19}
#kbShortcutMenu{background-color:rgba(24,24,24,.95)}
@supports (backdrop-filter:blur(1em)) {.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(0,0,0,.8)} #kbShortcutMenu{background-color:rgba(32,32,32,.75)}}
@supports (-webkit-backdrop-filter:blur(1em)) {.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(0,0,0,.8)} #kbShortcutMenu{background-color:rgba(32,32,32,.75)}}
}

@media (min-width:1280px) {.no_desktop{display:none!important}}
@media (max-width:1280px) {
.no_tablet{display:none!important}
.edge2edge{padding:0.5em calc( 16px + 1em );padding:0.5em max(calc(env(safe-area-inset-right) + 0.5em), calc(16px + 1em)) 0.5em max(calc(env(safe-area-inset-left) + 0.5em), calc(16px + 1em))}
.card{padding:2em calc( 16px + 1em );padding:2em max(calc(env(safe-area-inset-right) + 1em), calc(16px + 1em)) 2em max(calc(env(safe-area-inset-left) + 1em), calc(16px + 1em))}
.topbar{padding:2em calc( 16px + 1em ) calc( 0.5em - 0.08em ) calc( 16px + 1em - 0.5em );padding:max(calc(env(safe-area-inset-top) + 0.5em), 2em) max(calc(env(safe-area-inset-right) + 0.5em), calc(16px + 1em)) calc( 0.5em - 0.08em ) max(calc(env(safe-area-inset-left) + 0.5em), calc(16px + 1em))}
.tabview{margin:1em;bottom:calc(1.75em + env(safe-area-inset-bottom));left:10em;right:10em}
}

@media (max-width:950px) {
#divheadbuffer{height:5.5em;height:calc(env(safe-area-inset-bottom) + 5.5em)}
.bottom_wrp{width:calc(100% - 2em - env(safe-area-inset-right) - env(safe-area-inset-left));margin:0 calc(1em + env(safe-area-inset-right)) calc(1em + env(safe-area-inset-bottom)) calc(1em + env(safe-area-inset-left))}
.no_mobile{display:none!important}
.pgsbtn form{width:0}
}

@media (max-width:520px) {
.edge2edge{padding:0.75em;padding:0.75em max(env(safe-area-inset-right) + 0.25em, 0.75em) 0.75em max(env(safe-area-inset-left) + 0.25em, 0.75em)}
.card{padding:1em;padding:1em max(env(safe-area-inset-right) + 0.25em, 1em) 1em max(env(safe-area-inset-left) + 0.25em, 1em)}
.topbar{min-height:0;top:-3.5em;top:calc(-3.5em - env(safe-area-inset-top));border-radius:1.5em;border-bottom:none;padding:8px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px 8px;flex-flow:wrap!important;flex-padding:16px calc(16px + 0.5em);box-shadow:0 0.25em 0.5em rgba(0,0,0,0)}
.topbar + .card{margin-top:0.5em; box-shadow: 0 -0.25em 0.25em rgba(0,0,0,0.15);border-radius:1.5em;background-color: var(--bgcolor)}
.dwhdi{flex-flow:wrap;overflow-x:none}
.dwhdt{white-space:normal;flex-flow:wrap;padding:0.25em}
.dwhdt img{height:2.5em;width:2.5em;margin:0 calc(100% - 2.5em) 0.25em 0}
.dwhdto{order:0;width:100%;min-height:3.125em;padding:0 0.25em 0.375em 0.25em;padding-bottom:calc(env(safe-area-inset-top) + 0.375em)} #btn_back{order:1} .dwhda{order:2} .pgsbtn{order:3}
#topbar_loading:before{margin:0.125em}
#topbar_title, #topbar_subtitle, #topbar_inwrap_title, #topbar_inwrap_subtitle{max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
#topbar_title_wrap, #topbar_title_inwrap_secondary{max-height:unset}
#topbar_loading{position:fixed;top:1em;right:0.5em;top:calc(env(safe-area-inset-top) + 1em);right:calc(env(safe-area-inset-right) + 0.5em);border-radius:50%;backdrop-filter:blur(1em);-webkit-backdrop-filter:blur(1em)}
#topbar_title_inwarp_sec_buf{height:3.5em}
.tabview, .bottom_wrp > .tabview{position:fixed;bottom:calc(env(safe-area-inset-bottom));left:0;right:unset;z-index:10000;margin:0.35em}
.tabview:focus-within{z-index:10100}
.tabview-wrp{transition-duration:0.05s;display:block;border-radius:1em;padding:0.5em 0.5em 0 0;max-height:calc(100vh - 6.5em);overflow-y:auto}
.tabview-sel{white-space:nowrap;padding:0.5em;margin:0 0 0.5em 0.5em;width:calc(100% - 0.5em);background:none;vertical-align:middle;text-align:left}
.tabview-sel-h{display:none}
.tabview-sel-h:hover{background:transparent!important}
.tabview-sel-s{background-color:rgba(0,0,0,.05);transition-duration:0s;padding:0.75em}
.tabview-sel img{margin-right:0.6em;display:inline-block;width:auto;margin-bottom:0}
.tabview-sel-tri{display:inline-block;width:0;height:0;border-left:0.4em solid rgba(0,0,0,0);border-right:0.4em solid rgba(0,0,0,0);border-top:0.4em solid black;margin-left:0.75em;opacity:0.8}
.tabview-wrp:focus-within{background-color:white;width:auto;box-shadow:0 0.25em 0.5em rgba(0,0,0,.3);transform:scale(1.01);margin:0.65em;margin-bottom:1.5em}
.tabview-wrp:focus-within .tabview-sel{padding:0.75em}
.tabview-wrp:focus-within .tabview-sel-h{display:inline-block}
.tabview-wrp:focus-within .tabview-sel-s{background-color:rgba(0,0,0,.1)}
.tabview-wrp:focus-within .tabview-sel-tri{display:none}
.tabview-wrp:focus-within + .tabview-close{display:flex;margin-bottom:0.5em}
.ckusrbtn:focus, .ckusrbtn:focus-within{width:calc(100vw - 2em);padding:2em;border-radius:2em}
#divheadbuffer{height:4.5em;height:calc(4.5em + env(safe-area-inset-bottom))}
.bottom_wrp{padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0;width:100%;border-radius:0;width:calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left))}
.bottom_wrp > .ckimg{height:calc(100% - 1em);z-index:10050}
@media (prefers-color-scheme: dark) {
.tabview-sel-s{background-color:rgba(255,255,255,.1)}
.tabview-sel-tri{border-top:0.4em solid white}
.tabview-wrp:focus-within{background-color:#2f2c29}
.tabview-wrp:focus-within .tabview-sel-s{background-color:rgba(255,255,255,.2)}
.topbar + .card{background-color:#0f0c09}
}
}

@media (max-height:520px) {.tabview{position:relative;left:0;right:0;margin:1em 0}}

@media (max-height:380px) {.bottom_wrp{position:relative} #divheadbuffer{display:none}}

@media print {body, .content, .footer{display:block!important} #divheadbuffer, .smtbtn, .no_print, #d_loading{display:none!important} .bottom_wrp{position:relative;margin-top:1em} .dwhda{padding:0}}