:root
{
 --emote-height: 96px;
}
body.busy
{
 cursor: wait !important;
}
body.busy *
{
 pointer-events: none;
}
body.advanced div[data-id="wizEasy"]
{
 display: none;
}
body:not(.advanced) div[data-id="wizAdvanced"]
{
 display: none;
}
#goEasy,
#goAdvanced
{
 position: absolute;
 top: 0;
 width: 16em;
 right: calc(50% - 8em);
 text-align: center;
 font-size: 130%;
}

.rowPrimary
{
 font-family: sans-serif;
 --angle: 23deg;
 --font-size: 28px;
 height: calc(var(--font-size) + 13px);
}
.rowPrimary .tab
{
 font-size: var(--font-size);
 height: calc(var(--font-size) + 6px);
 padding-top: 6px;
}
.rowPrimary .tabSpace
{
 height: calc(var(--font-size) + 12px);
}
.rowPrimary .tabSpace.selTab,
.rowPrimary .tabPost
{
 height: calc(var(--font-size) + 13px);
}
.rowPrimary .tab.alert
{
 color: #FF0000;
 animation: tabGlow 2s forwards;
}
@keyframes tabGlow
{
 0%
 {
  color: unset;
 }
 25%
 {
  color: #FF0000;
 }
 50%
 {
  color: unset;
 }
 75%
 {
  color: #FF0000;
 }
 100%
 {
  color: unset;
 }
}
.rowSecondary
{
 border-left: 1px solid var(--border);
 border-right: 1px solid var(--border);
 padding-top: 12px;
 --angle: 28deg;
 --font-size: 24px;
 height: calc(var(--font-size) + 9px);
}
.rowSecondary .tab
{
 font-size: var(--font-size);
 height: calc(var(--font-size) + 6px);
 padding-top: 2px;
}
.rowSecondary .tabSpace
{
 height: calc(var(--font-size) + 8px);
}
.rowSecondary .tabSpace.selTab,
.rowSecondary .tabPre,
.rowSecondary .tabPost
{
 height: calc(var(--font-size) + 9px);
}
.rowSecondary .tabPre,
.rowSecondary .tabPost
{
 min-width: 16px;
}
.rowSecondary .tabPre
{
 width: 16px;
}
.rowTertiary
{
 border-left: 1px solid var(--border);
 border-right: 1px solid var(--border);
 padding-top: 12px;
 --angle: 32deg;
 --font-size: 20px;
 height: calc(var(--font-size) + 9px);
}
.rowTertiary .tab
{
 font-size: var(--font-size);
 height: calc(var(--font-size) + 6px);
 padding-top: 2px;
}
.rowTertiary .tabSpace
{
 height: calc(var(--font-size) + 8px);
}
.rowTertiary .tabSpace.selTab,
.rowTertiary .tabPre,
.rowTertiary .tabPost
{
 height: calc(var(--font-size) + 9px);
}
.rowTertiary .tabPre,
.rowTertiary .tabPost
{
 min-width: 32px;
}
.rowTertiary .tabPre
{
 width: 32px;
}
.rowContent
{
 font-family: sans-serif;
 --angle: 32deg;
 --font-size: 20px;
 height: calc(var(--font-size) + 9px);
}
.rowContent .tab
{
 font-size: var(--font-size);
 height: calc(var(--font-size) + 6px);
 padding-top: 2px;
}
.rowContent .tabSpace
{
 height: calc(var(--font-size) + 8px);
}
.rowContent .tabSpace.selTab,
.rowContent .tabPre,
.rowContent .tabPost
{
 height: calc(var(--font-size) + 9px);
}
.rowContent .tabPre,
.rowContent .tabPost
{
 min-width: 32px;
}
.rowContent .tabPre
{
 width: 32px;
}
.rowNav .tabSpace.tabFirst
{
 border-top-color: transparent;
 background-image: linear-gradient(calc(90deg + var(--angle)), transparent 0%, transparent 45%, var(--border) 49%, var(--border) 51%, var(--unsel) 55%, var(--unsel) 100%);
}
.rowNav .tabSpace.tabLast
{
 border-top-color: transparent;
 background-image: linear-gradient(calc(90deg - var(--angle)), var(--unsel) 0%, var(--unsel) 45%, var(--border) 49%, var(--border) 51%, transparent 55%, transparent 100%);
}
.rowNav
{
 font-family: sans-serif;
 white-space: nowrap;
 display: flex;
}
.rowNav .tab
{
 white-space: nowrap;
 text-overflow: ellipsis;
 background-color: var(--unsel);
 padding-left: 15px;
 padding-right: 15px;
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 vertical-align: top;
 background-repeat: no-repeat;
 text-align: center;
 overflow: hidden;
 cursor: pointer;
}
.rowNav .tabSpace
{
 background-color: transparent;
 width: 20px;
 vertical-align: top;
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 background-repeat: no-repeat;
 background-image: linear-gradient(calc(90deg + var(--angle)), var(--unsel) 0%, var(--unsel) 45%, var(--border) 49%, var(--border) 51%, var(--unsel) 55%, var(--unsel) 100%);
}
.rowNav .tab.selTab ~ .tabSpace:not(.tabLast)
{
 background-image: linear-gradient(calc(90deg - var(--angle)), var(--unsel) 0%, var(--unsel) 45%, var(--border) 49%, var(--border) 51%, var(--unsel) 55%, var(--unsel) 100%);
}
.rowNav .tab.selTab
{
 max-width: unset;
 background-color: var(--sel);
 border-bottom-color: var(--sel);
 cursor: default;
}
.rowNav .tab.selTab + .tabSpace.selTab
{
 background-image: linear-gradient(calc(90deg - var(--angle)), var(--sel) 0%, var(--sel) 45%, var(--border) 49%, var(--border) 51%, var(--unsel) 55%, var(--unsel) 100%);
 border-bottom-color: var(--sel);
}
.rowNav .tab:not(.selTab) + .tabSpace.selTab
{
 background-image: linear-gradient(calc(90deg + var(--angle)), var(--unsel) 0%, var(--unsel) 45%, var(--border) 49%, var(--border) 51%, var(--sel) 55%, var(--sel) 100%);
 border-bottom-color: var(--sel);
}
.rowNav .tabSpace.selTab.tabFirst
{
 border-top-color: transparent;
 background-image: linear-gradient(calc(90deg + var(--angle)), transparent 0%, transparent 45%, var(--border) 49%, var(--border) 51%, var(--sel) 55%, var(--sel) 100%);
 border-bottom-color: var(--sel);
}
.rowNav .tab.selTab + .tabSpace.selTab.tabLast
{
 border-top-color: transparent;
 background-image: linear-gradient(calc(90deg - var(--angle)), var(--sel) 0%, var(--sel) 45%, var(--border) 49%, var(--border) 51%, transparent 55%, transparent 100%);
 border-bottom-color: var(--sel);
}
.rowNav .tabPre,
.rowNav .tabPost
{
 border-bottom: 1px solid var(--border);
}
.rowNav .tabPost
{
 flex-grow: 1;
}

div[data-id="wizEasy"]
{
 text-align: center;
}
#pgEasy
{
 text-align: left;
 display: inline-block;
 transition: opacity linear 1s;
}
#pgEasy .pgContent
{
 border: 0;
}

#goAdvanced
{
 transition: opacity linear 1s;
}
#pgEasy.loading,
#pgEasy.loading + #goAdvanced
{
 opacity: 0.25;
 cursor: wait !important;
}
#pgEasy.loading > *,
#pgEasy.loading + #goAdvanced
{
 pointer-events: none;
}
.pg
{
 display: none;
 width: 100%;
}
.pgContent
{
 display: flex;
 width: calc(100% - 34px);
 padding: 1em 16px 12px;
 border-left: 1px solid var(--border);
 border-right: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 column-gap: 1em;
 justify-content: space-evenly;
 align-content: start;
 align-items: stretch;
 flex-wrap: nowrap;
}
.preBox
{
 display: inline-block;
 flex: 2;
 background-color: transparent;
 min-width: 6em;
}
.preBox .pgList
{
 position: relative;
 top: -1.3em;
 text-align: center;
 z-index: 2;
}
.preBox .preview
{
 border: 1px solid black;
 background-color: transparent;
 box-shadow: inset 0 0 6px #808080;
 margin-top: 1.25em;
 aspect-ratio: 16/9;
 width: 100%;
 display: flex;
}
.preBlack .preBox .preview
{
 background-color: #000000;
 box-shadow: inset 0 0 6px #FFFFFF;
}
.preWhite .preBox .preview
{
 background-color: #FFFFFF;
 box-shadow: inset 0 0 6px #000000;
}
.prePhoto .preBox .preview
{
 background-image: url(/images/scenery.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 background-color: #FFFFFF;
 box-shadow: inset 0 0 6px #000000;
}
.vidCamera
{
 display: none;
 width: 100%;
 height: 100%;
 position: absolute;
 object-fit: cover;
}
.preCamera .preBox .preview
{
 position: relative;
 background: transparent;
 box-shadow: inset 0 0 6px #000000;
}
.preCamera .preBox .preview iframe
{
 z-index: 1;
}
.preCamera .preBox .preview .vidCamera
{
 display: inline-block;
 z-index: 0;
}
#pre141 .preview,
#pre221 .preview
{
 background-image: url(/images/access.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}
.preBox .preview iframe
{
 width: 100%;
 height: auto;
 aspect-ratio: 16/9;
 border: 0;
 margin: 0;
 padding: 0;
}


#auth
{
 position: absolute;
 right: 1em;
 top: 0.5em;
 height: 2em;
}
#auth img, #rowAuth img
{
 cursor: pointer;
 filter: grayscale(1);
 transition: padding 0.1s linear;
 padding-top: 0.25em;
 padding-bottom: 0em;
 margin-left: 1em;
 width: 1.75em;
 vertical-align: middle;
}
#auth img:hover, #rowAuth img:hover
{
 padding-top: 0em;
 padding-bottom: 0.25em;
}
#auth img.connected, #rowAuth img.connected
{
 filter: grayscale(0);
}
#import
{
 position: absolute;
 right: 1em;
 top: 6em;
}
#import #valNotice
{
 visibility: hidden;
 height: 2.5em;
 position: absolute;
 z-index: -1;
 margin-left: 2em;
}

#dropzone
{
	box-sizing: border-box;
	display: none;
	position: fixed;
 left: 11px;
 top: 11px;
 bottom: 11px;
 right: 11px;
 z-index: 99999;
	background: #60A7DCCC;
	outline: 11px dashed #60A7DC;
 text-align: center;
}
#dropzone span
{
 display: inline-block;
 font-size: 10vh;
 line-height: 10vh;
 color: #FFFFFF;
 font-family: sans-serif;
 text-shadow: 3px 3px 4px #000000;
 margin-top: 38vh;
}
#dropzone > *
{
 pointer-events: none;
}

.pEmoji
{
 width: 56px;
 height: 56px;
 padding: 3px;
 margin: 8px 0.25em 0;
 border: 2px solid;
 border-top-color: #FFFFFF;
 border-left-color: #FFFFFF;
 border-bottom-color: #000000;
 border-right-color: #000000;
 outline: 1px solid #000000;
 background-color: rgba(255,255,255,0.2);
 border-radius: 8px;
 -moz-outline-radius: 8px;
 display: inline-block;
 position: relative;
}
.pEmoji.throbber
{
 --old-emoji: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2C23a9.63%2C9.63%2C0%2C0%2C1-8-9.5%2C9.51%2C9.51%2C0%2C0%2C1%2C6.79-9.1A1.66%2C1.66%2C0%2C0%2C0%2C12%2C2.81h0a1.67%2C1.67%2C0%2C0%2C0-1.94-1.64A11%2C11%2C0%2C0%2C0%2C12%2C23Z%22%20fill%3D%22deepskyblue%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20dur%3D%220.75s%22%20values%3D%220%2012%2012%3B360%2012%2012%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
 --new-emoji: var(--old-emoji);
}
.pEmoji.off
{
 filter: grayscale(1);
}
.pEmoji.sel
{
 padding: 5px 1px 1px 5px;
 border-top-color: #000000;
 border-left-color: #000000;
 border-bottom-color: #FFFFFF;
 border-right-color: #FFFFFF;
 outline: 1px solid #000000;
 background-color: rgba(0,0,0,0.2);
}
.pEmoji::before
{
 content: '';
 top: 3px;
 left: 3px;
 bottom: 3px;
 right: 3px;
 position: absolute;
 opacity: 1;
 z-index: 10;
 background-image: var(--old-emoji);
 background-size: 56px 56px;
 background-repeat: no-repeat;
}
.pEmoji::after
{
 content: '';
 top: 3px;
 left: 3px;
 bottom: 3px;
 right: 3px;
 position: absolute;
 opacity: 0;
 z-index: 9;
 background-image: var(--new-emoji);
 background-size: 56px 56px;
 background-repeat: no-repeat;
}
.pEmoji.sel::before,
.pEmoji.sel::after
{
 top: 5px;
 left: 5px;
 bottom: 1px;
 right: 1px;
}
.pEmoji.fades::before,
.pEmoji.fades::after
{
 transition: opacity 3s ease-in-out;
}
.pEmoji.fadeOut::before
{
 opacity: 0;
}
.pEmoji.fadeOut::after
{
 opacity: 1;
}
.easyThirdParty
{
 display: inline-block;
 text-align: center;
 margin-left: 4vw;
 margin-right: 4vw;
}
.easyThirdParty .pEmoji
{
 --new-emoji: var(--old-emoji);
}
.easyThirdParty .pEmoji:not(.sel) + br + span
{
 color: #808080;
}

#chkFFZ + label,
#chkBTTV + label,
#chk7TV + label
{
 min-width: 6em;
 display: inline-block;
 margin-right: 2em;
}
#prioFFZup, #prioFFZdown,
#prioBTTVup,#prioBTTVdown,
#prio7TVup, #prio7TVdown
{
 cursor: pointer;
}

/*
textarea
{
 height: 1em;
 transition: height linear 0.25s;
}
textarea:focus
{
 height: 4em;
}
*/
textarea
{
 height: 4em;
}

.options
{
 flex: 3;
}

.options table
{
 width: 100%;
 margin-top: 10px;
}
.options tbody
{
 width: 100%;
}
.lstAll
{
 position: relative;
 margin-bottom: 2px;
}
.lstAll button
{
 position: absolute;
 right: 0.5em;
 font-size: 45%;
 border-radius: 1.22em;
 vertical-align: top;
 visibility: hidden;
 font-size: 45%;
}
.lstAll:hover input[type="checkbox"]:not([disabled]) ~ button
{
 visibility: visible;
}
.label
{
 padding-left: 0.25em;
 width: 13%;
 white-space: nowrap;
 vertical-align: top;
}
.cmdGen button
{
 font-size: 50%;
 border-radius: 1.22em;
 vertical-align: top;
 width: 2.2em;
 text-align: center;
}
.sublabel
{
 text-align: right;
}
.input
{
 width: 87%;
 vertical-align: top;
 white-space: nowrap;
}
.input label button
{
 font-size: 50%;
 border-radius: 1.22em;
 vertical-align: top;
}
.input .listRow label button
{
 float: right;
 visibility: hidden;
 margin-left: 2em;
}
.input .listRow:hover input[type="checkbox"]:not([disabled]) + label button
{
 visibility: visible;
}
input[type="range"].fraction
{
 transform: rotate(180deg);
}
.badge
{
 vertical-align: text-top;
 width: 18px;
 height: 18px;
}
span.badge
{
 display: inline-block;
 font-size: 14px;
}
span.badge svg
{
 margin: 2px;
}
.verifiedBadge
{
 border-radius: 2px;
 background-color: #0040D0;
}
.followerBadge
{
 border-radius: 2px;
 background-color: #00DB84;
}

td.override
{
 vertical-align: top;
 padding: 4px;
 white-space:nowrap;
 position: relative;
}
td.override input[type="text"]
{
 max-width: 19em;
}
.overrider
{
 display: none;
 position: absolute;
 top: 0;
 right: 0;
 padding-top: 4px;
 padding-right: 4px;
}
[data-overridden="true"] ~ .overrider
{
 display: unset;
}
.overrider .overrideCheck,
.overrider .overrideEmoji
{
 display: inline-block;
 width: 18px;
 text-align: center;
 font-size: 14px;
 position: absolute;
 left: 0;
}
.overrider .overrideCheck > input
{
 opacity: 0;
}
.overrider:hover .overrideCheck > input,
.overrider .overrideCheck > input:focus
{
 opacity: 1;
}
.overrider:hover .overrideEmoji
{
 opacity: 0;
}
.overrider .overrideCheck input[type="checkbox"]
{
 vertical-align: bottom;
}
.overrider label
{
 margin-left: 24px;
}

.desc
{
 font-size: 80%;
 font-style: italic;
 padding-left: 1em;
 border: 1px solid;
 border-top: 0;
 border-radius: 0 0 1em 1em;
}
.listBox
{
 max-height: 8em;
 overflow-y: scroll;
 display: inline-block;
 border: 1px inset;
}
.listRow
{
 white-space: nowrap;
}
.listRow img
{
 vertical-align: text-top;
 width: 18px;
 height: 18px;
}
.listRow:hover
{
 background-color: rgba(128, 128, 128, 0.5);
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label,
input[type="range"]:disabled + span,
label.disabled
{
 opacity: 0.5;
}
.indent
{
 margin-left: 1em;
}
.indent2
{
 margin-left: 2em;
}
#navSubs
{
 text-align: center;
}
tr.t1, tr.t2, tr.t3, tr.tP
{
 display: none;
}
.t1 + .t1 > td:first-child,
.t2 + .t2 > td:first-child,
.t3 + .t3 > td:first-child,
.tP + .tP > td:first-child
{
 border-left: 1px solid var(--border);
}
.t1 + .t1 > td:last-child,
.t2 + .t2 > td:last-child,
.t3 + .t3 > td:last-child,
.tP + .tP > td:last-child
{
 border-right: 1px solid var(--border);
}
.tP:last-child > td
{
 border-bottom: 1px solid var(--border);
}
.buttonComplete
{
 text-align: center;
}
.spacerParent
{
 display: flex;
 justify-content: space-between;
}

.brands
{
 display: inline-block;
 width: 42px;
 height: 1em;
 background-size: 12px;
 background-repeat: no-repeat;
 vertical-align: bottom;
}
.brands.t
{
 background-image: url(/Tools/Twitch/favicon-16x16.png);
 background-position: left center;
}
.brands.yt
{
 background-image: url(/images/yt.png);
 background-position: left center;
}
.brands.k
{
 background-image: url(/images/kick.png);
 background-position: left center;
}
.brands.t.yt
{
 background-image: url(/Tools/Twitch/favicon-16x16.png), url(/images/yt.png);
 background-position: left center, center center;
}
.brands.t.k
{
 background-image: url(/Tools/Twitch/favicon-16x16.png), url(/images/kick.png);
 background-position: left center, center center;
}
.brands.yt.k
{
 background-image: url(/images/yt.png), url(/images/kick.png);
 background-position: left center, center center;
}
.brands.t.yt.k
{
 background-image: url(/Tools/Twitch/favicon-16x16.png), url(/images/yt.png), url(/images/kick.png);
 background-position: left center, center center, right center;
}

.kickAble
{
 color: #53FC19;
}

.accessWarningBox
{
 text-align: center;
 vertical-align: top;
 font-size: 80%;
}
.accessWarning
{
 font-size: 80%;
 vertical-align: top;
 cursor: default;
 font-family: 'TossFace', sans-serif !important;
}

.lightbox
{
 background-color: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#lightboxV
{
 z-index: 49;
}
#lightboxR
{
 z-index: 99;
}
#lightboxK
{
 z-index: 199;
}
#lightboxP
{
 z-index: 299;
}
#lightboxF
{
 z-index: 99;
}
#lightboxI
{
 z-index: 199;
}
.dialogHeader
{
 font-size: 110%;
 font-weight: bold;
 text-align: center;
 margin-bottom: 0.5em;
}

.dialogSubHeader
{
 font-size: 105%;
 font-weight: bold;
 margin-top: 0.25em;
 margin-bottom: 0.25em;
 text-indent: 3em;
}
.dialogSubHeader::before,
.dialogSubHeader::after
{
 background-image: linear-gradient(to right, transparent 0%, #8c8b8b 10%, #8c8b8b 90%, transparent 100%);
 content: "";
 display: inline-block;
 height: 2px;
 position: relative;
 vertical-align: middle;
 width: 100%;
}
.dialogSubHeader::before
{
 right: 0.5em;
 margin-left: -100%;
}
.dialogSubHeader::after
{
 left: 0.5em;
 margin-right: -100%;
}

.dialogButtons
{
 margin-top: 0.5em;
 text-align: center;
}
#dlgKappa
{
 z-index: 200;
 position: fixed;
 top: 5em;
 left: calc(50% - 7.5em);
 width: 15em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
#lstKappa
{
 width: 100%;
}
#lstKappa .listRow
{
 position: relative;
}
#lstKappa .listRow button
{
 position: absolute;
 right: 0.5em;
 font-size: 45%;
 border-radius: 1.22em;
 vertical-align: top;
 visibility: hidden;
}
#lstKappa .listRow:hover input[type="checkbox"]:not([disabled]) ~ button
{
 visibility: visible;
}

#dlgKappaPrefs
{
 z-index: 300;
 position: fixed;
 top: 5em;
 left: calc(50% - 12em);
 width: 24em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
#dlgKappaPrefs table.options
{
 width: 100%;
}
#dlgKappaPrefs table.options td.input div
{
 font-size: 85%;
 margin-bottom: 1em;
}
#dlgKappaPrefs table.options td.input div.listBox
{
 font-size: unset;
 margin-bottom: 0;
 max-height: 4.3em;
}
#dlgKappaPrefs table.options td.input div.listRow
{
 margin-bottom: 0;
}
#dlgKappaPrefs ul
{
 margin-top: 0;
 font-size: 80%;
}

#dlgRange
{
 z-index: 100;
 position: fixed;
 top: 5em;
 left: 10%;
 width: 80%;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
.rdBar
{
 width: 100%;
 height: 4em;
 border: 0;
 margin-bottom: 1em;
}
.rdScrollable
{
 width: 100%;
 max-height: 20em;;
 overflow-y: auto;
 border: 1px solid;
}
.rdTable
{
 width: 100%;
}
.rdTable th
{
 border-bottom: 1px solid;
 border-left: 1px solid;
}
.rdTable th:first-child
{
 border-left: 0;
}
.rdTable th.colIDBox
{
 width: 34px;
}
.rdTable th.colRange
{
 width: 10em;
}
.rdTable th.colRemove
{
 width: 3em;
}
.rdTable tr td:not(:first-child) button
{
 visibility: hidden;
}
.rdTable tr td input[type="number"]
{
 width: 3em;
 background-color: transparent;
 border: 0;
 font: inherit;
 color: inherit;
}
.rdTable tr td input[type="number"]:first-child
{
 text-align: right;
}
.rdTable tr td:nth-child(3) button
{
 font-size: 50%;
 border-radius: 1.22em;
 margin-left: 2em;
 vertical-align: top;
}
.rdTable tr:hover td:not(:first-child) button
{
 visibility: visible;
}
.rdTable td .idBox
{
 width: 32px;
 height: 32px;
 border: 1px solid;
}
.rdTable td:first-child button
{
 width: 32px;
 height: 32px;
 margin: 1px;
 padding: 0;
 text-align: center;
}
.rowHead
{
 position: sticky;
 top: 0;
}

tr.selStyle
{
 outline: 1px solid #FFFF00;
}

.hide
{
 visibility: hidden !important;
}
.showBlock
{
 display: block !important;
}
.showTR
{
 display: table-row !important;
}
.removed
{
 display: none !important;
}

#dlgCommand
{
 z-index: 100;
 position: fixed;
 top: 5em;
 left: calc(50% - 9.5em);
 width: 19em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
 overflow: hidden;
}
#dlgCommand table
{
 width: 100%;
}
#dlgCommand table button
{
 height: 1.5em;
 line-height: 0;
 padding: 0 0.5em;
}

#lstCommands
{
 width: 100%;
 aspect-ratio: 16/5;
 max-height: unset;
 user-select: none;
}
#lstCommands .listRow
{
 display: flex;
}
#lstCommands .listRow > span
{
 display: inline-block;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 padding: 0 0.25em;
}
#lstCommands .listRow .colName
{
 flex: 2;
}
#lstCommands .listRow .colAccess
{
 flex: 1;
}
#lstCommands .listRow .colAction
{
 flex: 4;
}
#lstCommands .listRow .colButtons
{
 text-overflow: unset;
 text-align: right;
}
#lstCommands .listRow .colButtons .cmdEdit, 
#lstCommands .listRow .colButtons .cmdDelete
{
 cursor: pointer;
 opacity: 0.5;
 filter: grayscale(1);
 font-family: 'TossFace', sans-serif !important;
}
#lstCommands .listRow .colButtons .cmdEdit:hover, 
#lstCommands .listRow .colButtons .cmdDelete:hover
{
 opacity: 1;
 filter: grayscale(0);
}

#dlgAccess
{
 z-index: 300;
 position: fixed;
 top: 5em;
 left: calc(50% - 6em);
 width: 12em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
#dlgAccess input[type="checkbox"]
{
 vertical-align: top;
}

#dlgFallback
{
 z-index: 100;
 position: fixed;
 top: 5em;
 left: calc(50% - 10em);
 width: 20em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
#dlgFallback .defaultEmote
{
 display: inline-block;
 height: 64px;
 width: auto;
 border: 1px solid;
 padding: 4px;
 position: relative;
 margin-right: 2px;
 margin-bottom: 2px;
}
#dlgFallback .defaultEmote img
{
 height: 64px;
 width: auto;
}
#dlgFallback .defaultEmote #cmdDefaultEmoteAdd
{
 display: inline-block;
 height: 64px;
 width: 64px;
}
#dlgFallback .defaultEmote #cmdDefaultEmoteAdd svg
{
 height: 60px;
 width: 60px;
 padding: 2px;
}
#dlgFallback .defaultEmote #cmdDefaultEmoteAdd:hover svg
{
 height: 64px;
 width: 64px;
 padding: 0;
}
#dlgFallback .defaultEmote .defaultRemove
{
 display: inline-block;
 width: 18px;
 height: 18px;
 position: absolute;
 top: 2px;
 right: 2px;
}
#dlgFallback .defaultEmote .defaultRemove svg
{
 width: 16px;
 height: 16px;
 padding: 1px;
}
#dlgFallback .defaultEmote .defaultRemove:hover svg
{
 width: 18px;
 height: 18px;
 padding: 0;
}

#dlgImage
{
 z-index: 200;
 position: fixed;
 top: 5em;
 left: calc(50% - 8em);
 width: 16em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
 white-space: nowrap;
}
#dlgImage #pctImagePreview
{
 display: block;
 background-color: lightgray;
 box-shadow: 1px 1px 3px gray;
 margin-left: auto;
 margin-right: auto;
 height: 64px;
 width: auto;
}
#dlgImage #lblImageError
{
 display: block;
 color: #FF0000;
 text-align: center;
 font-family: monospace;
 font-size: 80%;
}
#dlgImage #txtImageFile
{
 width: 14em;
}

#vidNotice
{
 visibility: hidden;
 height: 2.5em;
 position: absolute;
 z-index: -1;
 margin-left: 2em;
}
#dlgVideo
{
 z-index: 50;
 position: fixed;
 top: 3vh;
 left: max(0px, calc((100vw - 144vh) / 2));
 width: 144vh;
 max-width: 95%;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
 text-align: center;
}
#dlgVideo iframe
{
 width: 142vh;
 max-width: 95%;
 height: 80vh;
}

#dlgImportLogin
{
 z-index: 50;
 position: fixed;
 top: 5em;
 left: calc(50% - 10em);
 width: 20em;
 border: 1px solid;
 box-shadow: 2px 2px 3px;
 padding: 0.5em;
 border-radius: 0.25em;
 background-color: inherit;
}
#dlgImportLogin .importGroup
{
 margin-top: 1em;
}
#dlgImportLogin .importGroup .importError
{
 display: block;
 margin-bottom: 0.5em;
}
#dlgImportLogin .importGroup .importError img
{
 height: 1em;
 vertical-align: text-bottom;
 padding-left: 0.5em;
 padding-right: 0.25em;
}
#dlgImportLogin .importGroup .importError + button
{
 margin-left: calc(100% - 11em);
}
#dlgImportLogin .importGroup:not(.resolved) .importError img
{
 filter: grayscale(1);
 opacity: 0.5;
}
#dlgImportLogin .importGroup:not(.pending) .importError
{
 text-decoration: line-through;
}
#dlgImportLogin .importGroup:not(.pending) button
{
 visibility: hidden;
}

#tbl511
{
	border-spacing: 0;
}
tr:not(.trSurvey) + tr.trSurvey td:first-child
{
	border-top: 1px dashed #000000;
	border-left: 1px dashed #000000;
	background-color: #E0FFFF;
}
tr:not(.trSurvey) + tr.trSurvey td:last-child
{
	border-top: 1px dashed #000000;
	border-right: 1px dashed #000000;
	background-color: #E0FFFF;
	border-top-right-radius: 32px;
}
tr:not(.trSurvey) + tr.trSurvey + tr.trSurvey td:first-child
{
	border-bottom: 1px dashed #000000;
	border-left: 1px dashed #000000;
	background-color: #E0FFFF;
	border-bottom-left-radius: 32px;
}
tr:not(.trSurvey) + tr.trSurvey + tr.trSurvey td:last-child
{
	border-bottom: 1px dashed #000000;
	border-right: 1px dashed #000000;
	background-color: #E0FFFF;
	border-bottom-right-radius: 32px;
}
tr:not(.trSurvey) + tr.trSurvey,
tr:not(.trSurvey) + tr.trSurvey + tr.trSurvey
{
	color: #000000;
}
.lbimg
{
 cursor: pointer;
}
#divLB
{
 z-index: 10;
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.6);
 overflow: hidden;
}
#imgLB
{
 image-rendering: auto;
 position: absolute;
 padding: 0;
 max-width: 1440px;
}
#lblLB
{
 position: absolute;
 text-align: center;
 color: #FFFFFF;
 text-shadow: 1px 1px 4px #000000;
 font-family: sans-serif;
 font-size: 150%;
 font-weight: bold;
}

@media only screen and (max-width: 1410px)
{
 #goEasy,
 #goAdvanced
 {
  right: 0;
 }
 .pg .pgContent
 {
  flex-direction: column-reverse;
 }
 #pre141 .preview, #pre221 .preview
 {
  display: none;
 }
}
@media only screen and (max-width: 915px)
{
 #goEasy,
 #goAdvanced
 {
  text-align: right;
 }
 #auth
 {
  position: unset;
  text-align: right;
  margin-bottom: 0.5em;
 }
 #import
 {
  position: unset;
  text-align: center;
  margin-bottom: 1em;
 }
 .rowPrimary
 {
  --angle: 28deg;
  --font-size: 20px;
 }
 .rowSecondary
 {
  --angle: 35deg;
  --font-size: 19px;
 }
 .rowTertiary
 {
  --angle: 38deg;
  --font-size: 16px;
 }
 .rowNav .tab
 {
  padding-left: 12px;
  padding-right: 12px;
 }
}
@media only screen and (max-width: 750px)
{
 h1
 {
  margin-top: 1.3em;
 }
 .rowPrimary
 {
  --angle: 36deg;
  --font-size: 14px;
 }
 .rowSecondary
 {
  --angle: 43deg;
  --font-size: 12px;
 }
 .rowTertiary
 {
  --angle: 47deg;
  --font-size: 10px;
 }
 .rowNav .tab
 {
  padding-left: 8px;
  padding-right: 8px;
 }
}
@media only screen and (max-width: 680px)
{
 .pg .pgContent
 {
  font-size: 90%;
 }
 .pg .pgContent input[type=checkbox]
 {
  height: 12px;
  vertical-align: middle;
 }
 .badge
 {
  width: 16px;
  height: 16px;
 }
}
@media only screen and (max-width: 620px)
{
 .pg .pgContent
 {
  font-size: 80%;
 }
 .pg .pgContent input[type=checkbox]
 {
  height: 11px;
 }
 .badge,
 .listBox .listRow img
 {
  width: 18px;
  height: 18px;
 }
 span.badge
 {
  font-size: 14px;
 }
 .badge svg
 {
  width: 14px;
  height: 14px;
 }
}
@media only screen and (max-width: 561px)
{
 .pg .pgContent
 {
  font-size: 70%;
 }
 .pg .pgContent input[type=checkbox]
 {
  height: 10px;
 }
 .badge,
 .listBox .listRow img
 {
  width: 16px;
  height: 16px;
 }
 span.badge
 {
  font-size: 12px;
 }
 .badge svg
 {
  width: 12px;
  height: 12px;
 }
}
@media only screen and (max-width: 550px)
{
 .rowPrimary
 {
  --angle: 36deg;
  --font-size: 10px;
 }
 .rowSecondary
 {
  --angle: 43deg;
  --font-size: 9px;
 }
 .rowTertiary
 {
  --angle: 47deg;
  --font-size: 8px;
 }
 .rowNav .tab
 {
  padding-left: 4px;
  padding-right: 4px;
 }
}
@media only screen and (max-width: 502px)
{
 .pg .pgContent
 {
  font-size: 60%;
 }
 .pg .pgContent input[type=checkbox]
 {
  height: 9px;
 }
 .badge,
 .listBox .listRow img
 {
  width: 14px;
  height: 14px;
 }
 span.badge
 {
  font-size: 10px;
 }
 .badge svg
 {
  width: 10px;
  height: 10px;
 }
}
@media only screen and (max-width: 440px)
{
 .rowPrimary
 {
  --angle: 44deg;
  --font-size: 8px;
 }
 .rowSecondary
 {
  --angle: 52deg;
  --font-size: 7px;
 }
 .rowTertiary
 {
  --angle: 54deg;
  --font-size: 6px;
 }
 .rowNav .tab
 {
  padding-left: 2px;
  padding-right: 2px;
 }
 .pg .pgContent
 {
  font-size: 50%;
 }
 .pg .pgContent input[type=checkbox]
 {
  height: 8px;
 }
 .badge,
 .listBox .listRow img
 {
  width: 12px;
  height: 12px;
 }
 span.badge
 {
  font-size: 8px;
 }
 .badge svg
 {
  width: 8px;
  height: 8px;
 }
}

.bFont
{
 width: 262px;
 height: 95px;
 padding: 3px;
 margin: 8px 0.25em 0;
 border: 2px solid;
 border-top-color: #FFFFFF;
 border-left-color: #FFFFFF;
 border-bottom-color: #000000;
 border-right-color: #000000;
 outline: 1px solid #000000;
 background-color: rgba(255,255,255,0.2);
 border-radius: 8px;
 display: inline-block;
 position: relative;
}
.bFont.off
{
 filter: grayscale(1);
}
.bFont.sel
{
 /* padding: 5px 1px 1px 5px; */
 border-top-color: #000000;
 border-left-color: #000000;
 border-bottom-color: #FFFFFF;
 border-right-color: #FFFFFF;
 outline: 1px solid #000000;
 background-color: rgba(0,0,0,0.2);
}
.bFont .fTitle
{
 display: block;
 font-size: 125%;
 margin-bottom: 0.1em;
 text-align: center;
}
.bFont .bPre
{
 display: block;
 border: 1px solid #808080;
 width: 250px;
 height: 48px;
 margin-left: auto;
 margin-right: auto;
}