@import url('//webfontworld.github.io/score/SCoreDream.css');

* { border: 0; box-sizing: BORDER-BOX; margin: 0; outline: 0; padding: 0; -webkit-overflow-scrolling: touch; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

.ui.brand,
.ui.brand-simple { background-repeat: no-repeat; background-size: 100% auto; color: transparent; display: inline-block; height: 1em; line-height: 1em; overflow: hidden; user-select: none; }
.ui.brand { background-image: url('./image/brand.png?rev=2'); width: 1.12867em }
.ui.brand-simple { background-image: url('./image/brand-simple.png'); height: .45em; }

.ui.icon { background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; font-style: normal; height: 1em; width: 1em }
.ui.icon.coin { background-image: url('./image/icon-coin.png'); }
.ui.icon.droplet { background-image: url('./image/icon-droplet.png?rev=2'); }
.ui.icon.bear-payment { background-image: url('./image/icon-bear-payment.png'); width: 1.10901em }
.ui.icon.bear-surprise { background-image: url('./image/icon-bear-surprise.png'); width: .55890em }
.ui.icon.bear-cheerup { background-image: url('./image/icon-bear-cheerup.png'); width: .74533em }
.ui.icon.faucet { background-image: url('./image/icon-faucet.png'); width: .67097em }
.ui.icon.mobile-bill { background-image: url('./image/icon-mobile-bill.png'); }
.ui.icon.mobile-qr { background-image: url('./image/icon-mobile-qr.png'); }
.ui.icon.notification { background-image: url('./image/icon-notification.png'); }
.ui.icon.ticket { background-image: url('./image/icon-ticket.png'); width: .95653em }
.ui.icon.user { background-image: url('./image/icon-user.png?rev=2'); width: 1em }
.ui.icon.pro { background-image: url('./image/icon-pro.png'); width: 1em }
.ui.icon.fa:after { content: ''; display: block; font-family: 'Font Awesome 6 Free'; font-weight: 900 }
.ui.icon.fa.twater:after { content: '\e006' }
.ui.icon.fa.wwater:after { content: '\f496' }
.ui.icon.fa.electricity:after { content: '\e55b' }
.ui.icon.fa.gas:after { content: '\f46a' }

.ui.alert { background: #e3f7fc; border: 1px solid #8ed9f6; border-radius: .5em; font-size: .8em; padding: 1em 1em 1em 3em; position: relative; }
.ui.alert::before { align-items: center; border: 2px solid; border-radius: 50%; color: #0087fd; content: 'i'; display: flex; font-size: .8em; font-weight: 900; height: 1.5em; justify-content: center; left: 1em; line-height: 1em; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 1.5em; }

.ui.button { background: linear-gradient(to right, #62cff4, #00bafa, #00a2ff, #0087fd, #2c67f2); border-radius: 3em; box-shadow: .25em .25em .5em rgba(0, 186, 250, .5); color: #fff; cursor: pointer; font-weight: 600; display: inline-block; line-height: 1em; margin: .5em; overflow: hidden; padding: 1em 2em; text-decoration: none; vertical-align: middle }
.ui.button.wide { display: block; margin: 0; padding-left: 0; padding-right: 0; text-align: center }
.ui.button.hollow { background: none; box-shadow: none; color: #00a2ff; }
.ui.button.disabled { box-shadow: none; opacity: .5 }
.ui.button.negative { background: linear-gradient(to right, #eee, #ddd); box-shadow: none; color: #aaa }

.ui.button.has-icon { padding: 1em; text-align: left }
.ui.button.has-icon > I { display: inline-block; margin-right: 1em }

.ui.colgroup {  }
.ui.colgroup > .ui.row { border-collapse: separate; border-spacing: 0; display: table; table-layout: fixed; width: 100% }
.ui.colgroup > .ui.row > .ui.col { display: table-cell }
.ui.colgroup > .ui.row > .ui.col.left { text-align: left }
.ui.colgroup > .ui.row > .ui.col.center { text-align: center }
.ui.colgroup > .ui.row > .ui.col.right { text-align: right }
.ui.colgroup.auto > .ui.row { table-layout: auto }
.ui.colgroup.bottom > .ui.row > .ui.col { vertical-align: bottom }
.ui.colgroup.middle > .ui.row > .ui.col { vertical-align: middle }
.ui.colgroup.top > .ui.row > .ui.col { vertical-align: top }
.ui.colgroup.p01 { margin-left: -.1em; margin-right: -.1em }
.ui.colgroup.p02 { margin-left: -.2em; margin-right: -.2em }
.ui.colgroup.p05 { margin-left: -.5em; margin-right: -.5em }
.ui.colgroup.p1  { margin-left: -1em; margin-right: -1em }
.ui.colgroup.p2  { margin-left: -2em; margin-right: -2em }
.ui.colgroup.p3  { margin-left: -3em; margin-right: -3em }
.ui.colgroup.p4  { margin-left: -4em; margin-right: -4em }
.ui.colgroup.p5 { margin-left: -5em; margin-right: -5em }
.ui.colgroup.p01 > .ui.row { border-spacing: .1em 0; margin: .1em 0 }
.ui.colgroup.p025 > .ui.row { border-spacing: .25em 0; margin: .25em 0 }
.ui.colgroup.p05 > .ui.row { border-spacing: .5em 0; margin: .5em 0 }
.ui.colgroup.p1 > .ui.row { border-spacing: 1em 0; margin: 1em 0 }
.ui.colgroup.p2 > .ui.row { border-spacing: 2em 0; margin: 2em 0 }
.ui.colgroup.p3 > .ui.row { border-spacing: 3em 0; margin: 3em 0 }
.ui.colgroup.p4 > .ui.row { border-spacing: 4em 0; margin: 4em 0 }
.ui.colgroup.p5 > .ui.row { border-spacing: 5em 0; margin: 5em 0 }

.ui.channel { margin: auto -1em; }
.ui.channel > .ui.channel-item { background-color: #fff; margin: 0; margin-bottom: 1px }
.ui.channel > .ui.channel-item > DL > DT > A { cursor: pointer; display: block; padding: 1em 2em 1em 1em; position: relative; white-space: nowrap }
.ui.channel > .ui.channel-item > DL > DT > A > H3 { font-size: 1em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ui.channel > .ui.channel-item > DL > DT > A > H3 > SPAN { color: #0087fd; display: inlline-block; font-weight: 300 }
.ui.channel > .ui.channel-item > DL > DT > A > H3 > SPAN::after { content: ']' }
.ui.channel > .ui.channel-item > DL > DT > A > H3 > SPAN::before { content: '[' }
.ui.channel > .ui.channel-item > DL > DT > A > EM { color: #888; display: block; font-size: .9em; font-style: normal; font-weight: 300; margin-top: .5em; }
.ui.channel > .ui.channel-item > DL > DT > A > EM::before { background-color: #0087fd; border-radius: 50%; content: ''; display: inline-block; font-size: .5em; height: 1em; margin-right: .5em; vertical-align: .25em; width: 1em }
.ui.channel > .ui.channel-item > DL > DT > A > I { color: #aaa; position: absolute; right: 1em; top: 2em; transition: all 500ms ease-in-out; }
.ui.channel > .ui.channel-item > DL > DD { display: none; padding: 0 1em 1em }
.ui.channel > .ui.channel-item > DL > DD > P { background-color: #f7f7f7; border-radius: .5em; margin: 0; overflow: hidden; padding: 1em }
.ui.channel > .ui.channel-item.opened { margin-bottom: 1em }
.ui.channel > .ui.channel-item.opened > DL > DD { display: block }
.ui.channel > .ui.channel-item.opened > DL > DT > A > I { color: #0087fd; transform: rotateZ(180deg); }
.ui.channel > .ui.channel-item > DL > DT > A.read > EM::before { display: none }

.ui.form.radio { align-items: center; display: flex }
.ui.form.radio > DIV { flex-grow: 1 }
.ui.form.radio > FIELDSET { cursor: pointer; display: block; font-size: 2em; filter: grayscale(); padding: .5em 0; position: relative; transition: all 500ms ease-in-out; }
.ui.form.radio > FIELDSET::after,
.ui.form.radio > FIELDSET::before { content: ''; display: block; }
.ui.form.radio > FIELDSET::before { background-color: rgba(0, 135, 253, .2); border-radius: 1em; height: 1em; width: 2em }
.ui.form.radio > FIELDSET::after { background-color: rgba(0, 135, 253, 1); border-radius: 50%; font-size: .7em; height: 1em; left: 50%; position: absolute; top: 50%; transform: translate(-120%, -50%); transition: all 500ms ease-in-out; width: 1em }
.ui.form.radio > FIELDSET > INPUT { left: -10000px; position: absolute; }
.ui.form.radio > FIELDSET.checked { filter: none; }
.ui.form.radio > FIELDSET.checked::after { transform: translate(20%, -50%); }

HR.ui { background-color: #ccc; border: 0; display: block; height: 1px; margin: 2em 0 }
HR.ui.hollow { background: none }

LABEL.ui { font-weight: 600; margin: 2em 0; overflow: hidden; position: relative }
LABEL.ui { display: block; }
LABEL.ui:before,
LABEL.ui:after { bottom: 0; content: ''; display: block; position: absolute; z-index: 1 }
LABEL.ui:before { background-color: rgba(0, 0, 0, .2); height: 1px; width: 100% }
LABEL.ui:after { background: linear-gradient(to right, #62cff4, #00bafa, #00a2ff, #0087fd, #2c67f2); transition: all 500ms ease-in-out; background-color: #fff; height: 2px; left: -1px; width: 1px }
LABEL.ui:hover:after { left: 0; width: 100% }
LABEL.ui > INPUT,
LABEL.ui > SELECT { background: none; display: block; height: 3em; line-height: 1em; margin-top: .5em; width: 100% }
LABEL.ui > INPUT[type=file] {  }
LABEL.ui > INPUT:read-only { color: #888 }
LABEL.ui > SELECT > OPTION {  }
LABEL.ui.textarea::after,
LABEL.ui.textarea::before { display: none }
LABEL.ui.textarea > TEXTAREA { background: none; border: 1px solid rgba(0, 0, 0, .2); display: block; height: 10em; margin-top: .5em; padding: 1em; width: 100% }
LABEL.ui.has-icon { position: relative }
LABEL.ui.has-icon > I { bottom: 1em; color: #888; position: absolute; right: 0 }
LABEL.ui.has-icon > INPUT { padding-right: 2em }
FIELDSET.ui { display: block; position: relative; width: 100% }
FIELDSET.ui > LEGEND { left: 0; position: absolute; top: 50%; transform: translateY(-50%); }
FIELDSET.ui > LABEL { cursor: pointer; overflow: hidden; position: absolute; right: 0 }
FIELDSET.ui > LABEL > INPUT { left: -10000px; position: absolute }
FIELDSET.ui > LABEL > DIV { background-color: rgba(0, 0, 0, .1); border-radius: 3em; display: block; width: 3em; }
FIELDSET.ui > LABEL > DIV:after { background-color: #fff; border-radius: 50%; display: block; height: 1em; width: 1em }
FIELDSET.ui > LABEL > INPUT:checked+DIV {  }

SECTION > UL { margin: 1em -1em; }
SECTION > UL > LI { background-color: #fff; margin-bottom: 1px }
SECTION > UL > LI > A { align-items: center; cursor: pointer; display: flex; font-size: .9em; gap: .5em; line-height: 1em; padding: 1.5em 2em; width: 100% }
SECTION > UL > LI > A > DIV { font-size: 1.25em; text-align: center; width: 2em }
SECTION > UL > LI > A > DIV > I {  }
SECTION > UL > LI > A > SPAN { display: block; flex-grow: 1; }
SECTION > UL > LI > .fn.Logout { color: #cc0000 }
SECTION > UL > LI > .ui.form.radio { padding: 0 2em }

UL.ui { border-top: 1px solid #eee; margin: 2em 0 }
UL.ui > LI { display: flex; justify-content: space-between; margin: 2em 0 }
UL.ui > LI > .ui.title { font-weight: 600 }
UL.ui > LI > .ui.title > .ui.subtitle { color: #888; font-size: .9em; font-weight: 300 }
UL.ui > LI > .ui.value { color: #fff; font-weight: 600 }

.ui-datepicker { background-color: #FFF; box-shadow: 0 0 1em RGBA(0, 0, 0, .2); display: NONE }
.ui-datepicker-header { padding: 1.5em 2em; position: RELATIVE }
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next { border: 1px SOLID #DDD; border-radius: .25em; color: #222; cursor: POINTER; padding: .5em 1em; position: ABSOLUTE; top: 1em }
.ui-datepicker-header .ui-datepicker-prev { left: 1em }
.ui-datepicker-header .ui-datepicker-next { right: 1em }
.ui-datepicker-header .ui-datepicker-title { color: #222; font-size: 1.15em; font-weight: 600; text-align: CENTER }
.ui-datepicker-calendar { border-collapse: COLLAPSE; border-spacing: 0; width: 100% }
.ui-datepicker-calendar THEAD TR TH { background-color: #FFF; padding-bottom: 1em }
.ui-datepicker-calendar THEAD TR TH SPAN { color: #aaa }
.ui-datepicker-calendar TBODY TR TD {  }
.ui-datepicker-calendar .ui-state-disabled .ui-state-default { color: #DDD }
.ui-datepicker-calendar .ui-state-default { border-radius: 50%; color: #444; display: BLOCK; line-height: 1em; margin: 0 AUTO; padding: 1em 0; text-align: CENTER; text-decoration: none; position: RELATIVE; width: 3em }
.ui-datepicker-calendar .ui-datepicker-today .ui-state-default { border: 1px solid; font-weight: 600 }
.ui-datepicker-calendar .ui-state-default.hasdata:before { background-color: #fff; border-radius: 50%; top: .5em; content: ''; display: BLOCK; font-size: .33em; font-weight: 600; height: 1em; left: 50%; line-height: 1em; margin-left: -.5em; overflow: HIDDEN; position: ABSOLUTE; text-align: CENTER; width: 1em }
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default,
.ui-datepicker-calendar .ui-state-default.selected { background-color: #222; color: #FFF; font-weight: 600 }
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default:before,
.ui-datepicker-calendar .ui-state-default.selected.hasdata:before { background-color: #FFF; z-index: 1 }
.ui-datepicker-year { color: #222; font-size: 1em; font-weight: 600 }
.ui-datepicker-year > OPTION { background-color: #222; color: #fff }

.ui.logo { background-image: url('./image/brand.png'); background-position: center; background-size: cover; display: inline-block; font-size: 2.5em; height: 1em; overflow: hidden; width: 1em }
.ui.logo.side { background-image: url('./image/brand-side.png'); }

.ui.empty { background-color: #fff; border-radius: .5em; margin: 1em 0; padding: 2em 0; text-align: center; }
.ui.empty > I { color: #eee; display: block; font-size: 8em; margin: 0 auto }
.ui.empty > P { font-size: .8em; margin: 1em 0 0; opacity: .5 }

IFRAME#ifAction { height: 1px; left: -10000px; position: absolute; width: 1px }

.init, A, BODY, BUTTON, INPUT, SELECT, TABLE, TEXTAREA { color: #222; font-family: 'SCoreDream'; font-size: 1em; font-weight: 400; letter-spacing: -.035em; line-height: 1.35em }

A { text-decoration: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 194, 223, .2); }
UL, LI { list-style: none }
FOOTER, HEADER, MAIN { display: block }

HTML, BODY { background: transparent; min-height: 100%; min-width: 100%; max-width: 100%; overflow-x: hidden; position: absolute }

BODY { background-color: #f7f7f7; font-size: 11pt; }

BODY.is-member { padding-bottom: 5em }

MAIN { height: 100%; overflow-y: auto; padding: 2em 1em }
MAIN > HEADER { margin-bottom: 2em }
MAIN H1 { font-size: 1.5em; font-weight: 900; letter-spacing: -.05em; line-height: 1em; margin: 2em 0 1em }
MAIN H2 { font-size: 1.25em; font-weight: 900; letter-spacing: -.05em; line-height: 1em; margin: 2em 0 1em }
MAIN P { color: #888; line-height: 1.5em; margin: 1em 0 2em }

BODY > DIV#dvHeader { align-items: center; background-color: rgba(247, 247, 247, .5); backdrop-filter: blur(.5em); display: flex; padding-right: .5em; position: fixed; white-space: nowrap; width: 100%; z-index: 5 }
BODY > DIV#dvHeader > H1 { font-size: 2em }
BODY > DIV#dvHeader > H1 > A,
BODY > DIV#dvHeader > H1 > A > I { display: block }
BODY > DIV#dvHeader > H1 > A { padding: .5em }
BODY > DIV#dvHeader > DIV { background-color: #fff; border-radius: 2em; box-shadow: .1em .1em .3em rgba(0, 0, 0, .1); flex-grow: 1; overflow: hidden; position: relative }
BODY > DIV#dvHeader > DIV > FORM { display: block }
BODY > DIV#dvHeader > DIV > FORM > INPUT { display: block; font-weight: 600; line-height: 1em; padding: .75em 3em .75em 1.5em; width: 100% }
BODY > DIV#dvHeader > DIV > FORM > INPUT::placeholder { color: #aaa; font-weight: 400; line-height: 1em }
BODY > DIV#dvHeader > DIV > FORM > BUTTON { background: none; color: #aaa; cursor: pointer; display: block; padding: 1em; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
BODY > DIV#dvHeader > BUTTON { background: none; cursor: pointer; display: block; padding: 1.2em 0 .8em; position: relative; text-align: center; width: 3em }
BODY > DIV#dvHeader > BUTTON > I { margin: 0 auto }

@keyframes animation-notification-shake {
    0%,
    100% { opacity: 1 }
    0% { transform: rotateZ(0); }
    3% { transform: rotateZ(30deg); }
    6% { transform: rotateZ(-30deg); }
    9% { transform: rotateZ(15deg); }
    12% { transform: rotateZ(-15deg); }
    15% { transform: rotateZ(8deg); }
    18% { transform: rotateZ(-8deg); }
    21% { transform: rotateZ(0); }
}

BODY > DIV#dvHeader > BUTTON > I { display: block; font-size: 1.25em }
BODY > DIV#dvHeader > BUTTON > SPAN { color: #888; font-size: .66em }
BODY > DIV#dvHeader > BUTTON > EM { background-color: #ff9900; border: 2px solid #fff; border-radius: 50%; box-sizing: content-box; color: #fff; display: none; font-size: .66em; font-style: normal; font-weight: 900; line-height: 1em; overflow: hidden; padding: .3em 0; position: absolute; right: 1.25em; text-align: center; top: .75em; white-space: nowrap; width: 1.6em }

BODY > DIV#dvHeader > BUTTON.has-notification > I { animation: animation-notification-shake 2s infinite linear; }
BODY > DIV#dvHeader > BUTTON.has-notification > EM { display: block }

MAIN > HEADER > H1 { line-height: 1.34em; margin: 0; padding-right: 3em }
MAIN > HEADER > H1 > A { cursor: pointer; display: none; font-size: .75em; left: -1em; padding: 1em; position: absolute; top: 50%; transform: translateY(-50%) }
MAIN > HEADER > H1 > A > .ui.icon { display: block }
MAIN > HEADER > H1 > .ui.logo { display: block; font-size: 4em; margin-bottom: .2em }

MAIN { height: 100%; left: 0; overflow-x: hidden; position: absolute; top: 0; transition: all 500ms cubic-bezier(1, 0, 0, 1); width: 100%; z-index: 5 }
main#mainContent { padding-bottom: 8em; padding-top: 5em }
MAIN.mainFragment { background-color: rgba(247, 247, 247, .9); backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); left: 100% }
MAIN.mainFragment.opened { box-shadow: 0 0 1em rgba(0, 0, 0, .1); left: 0 }

MAIN.mainFragment > HEADER > H1,
MAIN > HEADER.has-back > H1 { font-size: 1em; padding-left: 2em; position: relative; }
MAIN.mainFragment > HEADER > H1 > A,
MAIN > HEADER.has-back > H1 > A { display: block; font-size: 1em }
MAIN.mainFragment > HEADER > H1 { margin-bottom: 4em }

MAIN.scrolled > HEADER {  }
MAIN.scrolled > HEADER > H1 { background-color: rgba(0, 0, 0, .2); backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); color: #fff; font-size: 1em; margin-left: -1em; padding: 1.5em; position: fixed; text-align: center; top: 0; width: 100%; z-index: 5 }
MAIN.scrolled > HEADER > H1 > A { font-size: 1.25em; left: 0 }
MAIN.scrolled > HEADER > P { display: none }
MAIN.scrolled > HEADER.has-control > H1 > .ui.button { font-size: 1.25em; left: auto; margin: 0; padding: .5em; right: .5em; top: 50%; transform: translateY(-50%) }
MAIN.scrolled > HEADER.has-control > H1 > .ui.button > SPAN { display: none }

MAIN.mainFragment.theme-dark { background-color: #222 }
MAIN.mainFragment.theme-dark > HEADER > H1 { color: #fff }
MAIN.mainFragment.theme-dark > HEADER > H1 > A > .ui.icon { filter: invert(1) }
MAIN.mainFragment.theme-dark.scrolled > HEADER > H1 { background-color: rgba(0, 0, 0, .75) }
MAIN.mainFragment.theme-dark .ui.button.negative { background-color: #444; color: #fff }

MAIN > SECTION {  }

FOOTER { bottom: 0; position: fixed; width: 100%; z-index: 5 }
FOOTER > NAV > UL { align-items: end; background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); border-top: 1px solid #eee; display: flex }
FOOTER > NAV > UL > LI { flex-basis: 0; flex-grow: 1; -opacity: .2; }
FOOTER > NAV > UL > LI > A { color: #bbb; cursor: pointer; display: block; font-weight: 400; padding: .75em 0; text-align: center; text-decoration: none; }
FOOTER > NAV > UL > LI > A > I { font-size: 1.25em }
FOOTER > NAV > UL > LI > A > SPAN { display: block; font-size: .66em; line-height: 1em; margin-top: .5em; text-align: center }
FOOTER > NAV > UL > LI.selected { opacity: 1 }
FOOTER > NAV > UL > LI.selected > A { color: #00a2ff; }

.ui.controls { display: flex; gap: .5em; margin-top: 4em }
.ui.controls > .ui.button { display: block; flex-basis: 0; flex-grow: 1; margin: 0; text-align: center }
.ui.controls.vertical { display: block; gap: 0 }
.ui.controls.vertical > .ui.button { flex: none; margin: 1em 0; width: 100% }

.ui.box,
.ui.empty,
.ui.panel { background-color: #fff; backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); border-radius: .5em; box-shadow: .1em .1em .3em rgba(0, 0, 0, .1); display: block; margin: 1em 0; overflow: hidden; padding: 1.2em; position: relative }
.ui.panel > .ui.panel-detail,
.ui.panel > .ui.panel-icon { position: absolute }
.ui.panel > .ui.panel-detail { color: #0087fd; font-size: .8em; right: 2em; text-align: center; top: 50%; transform: translateY(-50%) }
.ui.panel > .ui.panel-detail > I { font-size: 1.2em }
.ui.panel > .ui.panel-icon { left: 2.5em; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ui.panel > .ui.panel-icon > * { display: block; font-size: 3em }
.ui.panel > .ui.panel-icon > .fa-solid,
.ui.panel > .ui.panel-icon > .fa { color: #ccc; font-size: 1.5em }
.ui.panel > .ui.panel-subject { font-weight: 600 }
.ui.panel > .ui.panel-description { font-size: .8em; margin-top: .25em; opacity: .5; word-break: keep-all }
.ui.panel.has-icon { padding-left: 5em }
.ui.panel.positive { background: linear-gradient(to right, #62cff4, #00bafa, #00a2ff, #0087fd, #2c67f2); box-shadow: .25em .25em .5em rgba(0, 186, 250, .5); color: #fff }
.ui.panel.positive > .ui.panel-icon > * { color: #fff }
.ui.panel.positive > .ui.panel-detail { color: #fff }

.ui.indicator { align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 100 }
.ui.indicator > DIV { text-align: center }
.ui.indicator > DIV > I { color: #0087fd; display: block; font-size: 2em; margin-bottom: .5em }

.fn.QrGenerator > IMG { display: block; margin: 0 auto; width: 100% }
.fn.QrGenerator > P { font-size: .8em; margin: 0 }
.fn.QrGenerator > P > STRONG { color: #fff; font-size: 1.25em; font-weight: 600 }

.fn.Fragment { cursor: pointer }

.swiper-pagination { bottom: 0 !important }
.swiper-pagination-bullet { background: #0087fd; }
.swiper-pagination-bullet-active { background: linear-gradient(to right, #62cff4, #00bafa, #00a2ff, #0087fd, #2c67f2); border-radius: 1em; width: 2em }