#chat { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; }

#chat h2 { border-bottom: 1px solid #6690D0; font-size: 18px; line-height: 1em; margin: 0 0 10px; padding: 0; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }

@-webkit-keyframes rotating {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@keyframes rotating {
	from { -transform: rotate(0deg); -moz-transform: rotate(0deg); }
	to { -transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

.dialogBackground { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; background: none repeat scroll 0 0 rgba(0,0,0,0.4); position: absolute; z-index: 1000; left: 0; top: 0; right: 0; bottom: 0; align-content: center; align-items: center; justify-content: center; }
.dialog { background: none repeat scroll 0 0 #FFFFFF; border-radius: 10px 10px 10px 10px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); overflow: hidden; }
.dialog div.title { background: #6690D0; color: white; font-size: 18px; padding: 5px 10px; line-height: 1em; }
.dialog div.title div.close { background: url("img/iconClose.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: 16px 16px; cursor: pointer; float: right; height: 16px; width: 16px; }

.rotating { -webkit-animation-name: rotating; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: rotating; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; }

.unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

a.button { background-color: #6690D0; border: 1px solid #FFFFFF; border-radius: 3px 3px 3px 3px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); color: #FFFFFF; cursor: pointer; display: block; font-family: arial,sans-serif; font-size: 14px; font-weight: bold; height: 28px; line-height: 28px; margin: 0; padding: 0 5px; text-align: center; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
a.button:hover { background-color: #5680C0; }

a.buttonDisabled { background-color: #CCCCCC; cursor: default; }
a.buttonDisabled:hover { background-color: #CCCCCC; }


div.startPage { }
div.startPage div.logotype { background: rgba(0, 0, 0, 0) url("img/logotype.png") no-repeat scroll 0 0; height: 120px; margin: 20px auto 25px; width: 415px; }
div.startPage div.loginRow { align-content: center; align-items: flex-start; display: flex; justify-content: center; margin-bottom: 18px; }
div.startPage div.loginRow div.register { margin-left: 20px; }
div.startPage div.loginRow div.register h2 { color: #ffffff; }
div.startPage div.loginRow div.register a { background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); border: 5px solid #000000; border-radius: 10px; display: flex; flex-direction: column; padding: 10px 20px; text-decoration: none; box-shadow: 1px 1px 20px rgba(255, 255, 50, 0.4); }
div.startPage div.loginRow div.register a span.main { color: #ffffff; font-size: 35px; font-weight: bold; letter-spacing: 3px; text-align: center; text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); }
div.startPage div.loginRow div.register a span.sub { color: #000000; font-size: 14px; margin-top: 10px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
div.startPage div.loginRow div.register a:hover { background: #fceabb; background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); }


div.loginBox { background: #ffffff none repeat scroll 0 0; border-radius: 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); width: 297px; }
div.loginBox div.loginBoxContent { padding: 10px; }
div.loginBox div.loginBoxContent h2 { }
div.loginBox div.loginBoxContent div.row { margin-bottom: 5px; clear: both; }
div.loginBox div.loginBoxContent div.row label { display: block; float: left; height: 28px; line-height: 28px; width: 80px; }
div.loginBox div.loginBoxContent div.row input { width: 185px; }
div.loginBox div.loginBoxContent div.row input[type=checkbox] { float: left; margin: 5px 0 0; width: 20px; }
div.loginBox div.loginBoxContent div.row label.checkbox { height: auto; line-height: 1em; margin-top: 6px; width: auto; }
div.loginBox div.loginBoxContent div.row p { font-size: 12px; line-height: 14px; margin: 5px 10px 0 10px; text-align: left; }
div.loginBox div.loginBoxContent div.row a.link { display: inline-block; margin-bottom: 5px; margin-left: 80px; margin-top: 0; }
div.loginBox div.loginBoxContent div.submitRow { margin-bottom: 5px; }
div.loginBox div.loginBoxContent div.submitRow a.loginButton { }
div.loginBox div.loginBoxContent div.submitRow a.loginFreeButton { background-color: #D09066; }
div.loginBox div.loginBoxContent div.submitRow a.loginFreeButton:hover { background-color: #C08056; }


div.freeBox { background: #ffffff none repeat scroll 0 0; border-radius: 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); }
div.freeBox div.loginFreeBoxContent { padding: 10px; width: 278px; }
div.freeBox div.loginFreeBoxContent h2 { }
div.freeBox div.loginFreeBoxContent div.row { margin-bottom: 5px; }
div.freeBox div.loginFreeBoxContent div.row label { display: block; float: left; height: 28px; line-height: 28px; width: 80px; }
div.freeBox div.loginFreeBoxContent div.row input { width: 185px; }
div.freeBox div.loginFreeBoxContent div.row p { font-size: 12px; line-height: 14px; margin: 10px 10px 10px 80px; text-align: left; }
div.freeBox div.loginFreeBoxContent div.row a.link { display: inline-block; margin-bottom: 5px; margin-left: 80px; margin-top: 5px; }
div.freeBox div.loginFreeBoxContent div.submitRow { }
div.freeBox div.loginFreeBoxContent div.submitRow a.loginButton { }


div.startingBox { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.startingBox div.dialog { width: 400px; }
div.startingBox div.message { display: flex; }
div.startingBox div.message div.icon { float: left; height: 64px; margin: 10px; width: 64px; align-self: flex-start; background: url(Img/iconLoading.png) no-repeat center center; }
div.startingBox div.message div.error { background: url(Img/MessageBoxError.png) no-repeat left top; }
div.startingBox div.message div.description { align-self: center; flex: 1 1 0; line-height: 1.4em; margin: 10px 10px 10px 0; }
div.startingBox div.message div.description ul { margin: 0; padding: 0; }
div.startingBox div.message div.description li { list-style: none outside none; margin: 0 0 5px; padding: 0; }
div.startingBox div.message div.description li span { background-position: left center; background-repeat: no-repeat; display: inline-block; float: right; min-height: 16px; padding-left: 20px; }
div.startingBox div.message div.description li span.ok { background-image: url(Img/iconDoneOk.png); }
div.startingBox div.message div.description li span.ko { background-image: url(Img/iconDoneKo.png); }
div.startingBox div.message div.description li span.none { display: none; }
div.startingBox div.buttons { clear: both; float: left; height: 30px; margin-bottom: 10px; padding-top: 0; text-align: center; width: 100%; }
div.startingBox div.buttons a { margin: 0 5px; display: inline-block; width: 100px; }


div.channelInviteDialog { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }


div.dialog { max-width: 500px; }
div.dialog div.message { display: flex; }
div.dialog div.message div.icon { float: left; height: 64px; margin: 10px; width: 64px; }
div.dialog div.message div.description { align-self: center; flex: 1 1 0; line-height: 1.4em; margin: 10px; }
div.dialog div.input { align-content: center; display: flex; margin: 0 10px 15px; }
div.dialog div.input label { align-self: center; margin-right: 10px; text-align: right; width: 100px; }
div.dialog div.input select { flex: 1 1 0; }
div.dialog div.input input { flex: 1 1 0; }
div.dialog div.buttons { clear: both; float: left; height: 30px; margin-bottom: 10px; padding-top: 0; text-align: center; width: 100%; }
div.dialog div.buttons a { margin: 0 5px; display: inline-block; width: 100px; }
div.dialog div.scroll { border-bottom: 1px solid #6690d0; border-radius: 10px 10px 0 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset; height: 300px; margin: 10px; overflow-x: hidden; overflow-y: auto; padding: 10px; width: 400px; }
div.dialog h2 { margin-top: 10px; }
div.dialog div.row { display: flex; }
div.dialog div.row div.label { align-self: center; margin-bottom: 10px; margin-right: 10px; text-align: right; width: 90px; }
div.dialog div.row div.input { flex: 1 1 0; margin: 0 0 10px; }
div.dialog div.row div.input input[type=radio] { margin: 0 5px 0 0; }
div.dialog div.row div.input input[type=checkbox] { margin: 0 5px 0 0; }
div.dialog div.row div.input input[type=text] { }
div.dialog div.row div.input textarea { box-sizing: border-box; height: 100px; max-height: 200px; max-width: 100%; min-height: 2em; min-width: 100%; resize: vertical; width: 100%; overflow-y: scroll; overflow-x: hidden; }
div.dialog div.row div.input input[type=file] { width: 150px; }
div.dialog div.row div.input label { align-self: center; margin: 0; width: auto; }
div.dialog div.row div.rows { align-items: flex-start; flex-direction: column; }
div.dialog div.row div.rows div.item { align-items: center; display: flex; margin-bottom: 5px; }


div.messageBox { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.messageBox div.message div.icon { float: left; height: 64px; margin: 10px; width: 64px; align-self: flex-start; }
div.messageBox div.message div.error { background: url(Img/MessageBoxError.png) no-repeat left top; }
div.messageBox div.message div.info { background: url(Img/MessageBoxInfo.png) no-repeat left top; }
div.messageBox div.message div.ok { background: url(Img/MessageBoxOk.png) no-repeat left top; }
div.messageBox div.message div.question { background: url(Img/MessageBoxQuestion.png) no-repeat left top; }


div.channelPasswordDialog { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.channelPasswordDialog div.message div.icon { background: url("Img/channelPasswordDialog.png") no-repeat scroll left top / 64px 64px rgba(0, 0, 0, 0); }


div.ignoreUserDialog { }
div.ignoreUserDialog div.dialog { width: 400px; }
div.ignoreUserDialog div.dialog div.form { margin: 10px; }
div.ignoreUserDialog div.dialog div.form div.row { display: flex; justify-content: center; }
div.ignoreUserDialog div.dialog div.form div.row div.label { align-self: center; margin-bottom: 5px; width: 160px; }
div.ignoreUserDialog div.dialog div.form div.row div.label label { }
div.ignoreUserDialog div.dialog div.form div.row div.input { flex: 1 1 0; margin: 0; }
div.ignoreUserDialog div.dialog div.form div.row div.input input[type=text] { margin-bottom: 5px; }
div.ignoreUserDialog div.dialog div.form div.row div.input select { }
div.ignoreUserDialog div.dialog div.form div.row div.input a.button { margin-bottom: 5px; width: 100%; }
div.ignoreUserDialog div.dialog div.form div.row div.input input.loading { color: #808080; }
div.ignoreUserDialog div.dialog div.form div.row div.input input.error { color: #ff0000; }
div.ignoreUserDialog div.dialog div.form div.row div.input input.ok { color: #009900; font-weight: bold; }


div.channelInviteDialog { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.channelInviteDialog div.message div.icon { background: url("Img/dialogInvite.png") no-repeat scroll left top / 64px 64px rgba(0, 0, 0, 0); }
div.channelInviteDialog div.message div.description span.nick { font-weight: bold; }
div.channelInviteDialog div.message div.description span.channel { font-weight: bold; }


div.channelKickDialog { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.channelKickDialog div.message div.icon { background: url("Img/dialogKick.png") no-repeat scroll left top / 64px 64px rgba(0, 0, 0, 0); }
div.channelKickDialog div.message div.description span.nick { font-weight: bold; }
div.channelKickDialog div.message div.description span.channel { font-weight: bold; }


div.channelBanDialog { background: none repeat scroll 0 0 rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1000; }
div.channelBanDialog div.dialog { width: 500px; }
div.channelBanDialog div.message div.icon { background: url("Img/dialogBan.png") no-repeat scroll left top / 64px 64px rgba(0, 0, 0, 0); }
div.channelBanDialog div.time { display: flex; flex: 1 1 0; margin-right: -10px; }
div.channelBanDialog div.time div.column { display: flex; flex: 1 1 0; flex-direction: column; margin-right: 10px; }
div.channelBanDialog div.time div.column label { align-self: flex-start; margin: 0; text-align: left; width: auto; }
div.channelBanDialog div.time div.column input { box-sizing: border-box; flex: 0 0 auto; height: 2em; text-align: center; width: 100%; }

input[type=text].loading { background-image: url("Img/loading.gif"); background-position: right 5px center; background-repeat: no-repeat; background-size: 15px 15px; }
input[type=text].loadedKo { border: 1px solid #ff0000; }
input[type=text].loadedOk { color: #008000; font-weight: bold; }


div.sayImageDialog { }
div.sayImageDialog div.imagePreview { margin: 10px; text-align: center; }
div.sayImageDialog div.imagePreview img { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); max-height: 300px; max-width: 400px; text-align: center; border-radius: 3px; }
div.sayImageDialog div.warning { color: #505050; font-size: 12px; line-height: 1.2em; margin: 0 10px 10px; }


div.sayAudioDialog { }
div.sayAudioDialog div.dialog { width: 300px; }
div.sayAudioDialog div.message div.icon { background: url("Img/dialogSayAudio.gif") no-repeat scroll left top / 64px 64px rgba(0, 0, 0, 0); }
div.sayAudioDialog div.message div.description { }
div.sayAudioDialog div.message div.description p { }
div.sayAudioDialog div.message div.description div.counter { text-align: center; }
div.sayAudioDialog div.message div.description div.counter span.seconds { display: inline-block; font-size: 40px; font-weight: bold; font-family: Consolas; }
div.sayAudioDialog div.message div.description div.counter span.fracSeconds { display: inline-block; font-size: 25px; font-weight: normal; font-family: Consolas; }


div.channelListBanDialog { }
div.channelListBanDialog div.dialog { max-width: 500px; }
div.channelListBanDialog div.list { overflow-x: auto; overflow-y: auto; margin: 10px; max-height: 300px; min-height: 100px; }
div.channelListBanDialog table { box-sizing: border-box; }
div.channelListBanDialog table thead { background: #a0a0a0 none repeat scroll 0 0; }
div.channelListBanDialog table thead th { color: #ffffff; padding: 5px 10px; width: 100%; vertical-align: middle; }
div.channelListBanDialog table tbody { }
div.channelListBanDialog table tbody tr { }
div.channelListBanDialog table tbody tr td { vertical-align: middle; border-bottom: 1px dotted #808080; border-right: 1px dotted #a0a0a0; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; white-space: nowrap; }
div.channelListBanDialog table tbody tr td:last-child { border-right: none; }
div.channelListBanDialog table tbody tr:last-child td { border-bottom: none; }
div.channelListBanDialog table tbody tr div.modeIp { background: rgba(0, 0, 0, 0) url("img/banIP.png") no-repeat scroll 0 0 / 16px 16px; height: 16px; width: 16px; display: inline-block; }
div.channelListBanDialog table tbody tr div.modeAccount { background: rgba(0, 0, 0, 0) url("img/banAccount.png") no-repeat scroll 0 0 / 16px 16px; height: 16px; width: 16px; display: inline-block; }
div.channelListBanDialog table tbody tr:hover { background-color: #E0E0E0; }
div.channelListBanDialog table tbody tr td div.description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
div.channelListBanDialog table tbody tr td a.button { background: #6690d0 url("img/iconClose.png") no-repeat scroll center center / 12px 12px; display: inline-block; height: 16px; margin-right: 2px; padding: 0; width: 16px; }

div.channelUserCustomPermitsDialog { }
div.channelUserCustomPermitsDialog div.dialog { width: 500px; }
div.channelUserCustomPermitsDialog div.dialog div.form { align-items: flex-end; display: flex; margin: 10px 10px 0; }
div.channelUserCustomPermitsDialog div.dialog div.form div.input { display: flex; flex: 1 0 0px; flex-direction: column; margin: 0 10px 0 0; height: 45px; }
div.channelUserCustomPermitsDialog div.dialog div.form div.input label { align-self: flex-start; margin: 0; text-align: left; width: auto; }
div.channelUserCustomPermitsDialog div.dialog div.form div.input input { box-sizing: border-box; width: 100%; height: 19px; }
div.channelUserCustomPermitsDialog div.dialog div.form div.input select { flex: 0 0 auto; margin: 0; width: 100%; height: 29px; padding: 0; }
div.channelUserCustomPermitsDialog div.dialog div.form a.create { display: block; height: 29px; }
div.channelUserCustomPermitsDialog div.list { overflow-x: auto; overflow-y: auto; margin: 10px; max-height: 300px; min-height: 100px; }
div.channelUserCustomPermitsDialog table { box-sizing: border-box; }
div.channelUserCustomPermitsDialog table thead { background: #a0a0a0 none repeat scroll 0 0; }
div.channelUserCustomPermitsDialog table thead th { color: #ffffff; padding: 5px 10px; width: 100%; vertical-align: middle; }
div.channelUserCustomPermitsDialog table tbody { }
div.channelUserCustomPermitsDialog table tbody tr { }
div.channelUserCustomPermitsDialog table tbody tr td { vertical-align: middle; border-bottom: 1px dotted #808080; border-right: 1px dotted #a0a0a0; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; white-space: nowrap; }
div.channelUserCustomPermitsDialog table tbody tr td:last-child { border-right: none; }
div.channelUserCustomPermitsDialog table tbody tr:last-child td { border-bottom: none; }
div.channelUserCustomPermitsDialog table tbody tr:hover { background-color: #E0E0E0; }
div.channelUserCustomPermitsDialog table tbody tr td a.button { background: #6690d0 url("img/iconClose.png") no-repeat scroll center center / 12px 12px; display: inline-block; height: 16px; margin-right: 2px; padding: 0; width: 16px; }

div.channelUserGroupsDialog { }
div.channelUserGroupsDialog div.dialog { width: 500px; }
div.channelUserGroupsDialog div.dialog div.form { align-items: flex-end; display: flex; margin: 10px 10px 0; }
div.channelUserGroupsDialog div.dialog div.form div.input { display: flex; flex: 1 0 0px; flex-direction: column; margin: 0 10px 0 0; height: 45px; }
div.channelUserGroupsDialog div.dialog div.form div.input label { align-self: flex-start; margin: 0; text-align: left; width: auto; }
div.channelUserGroupsDialog div.dialog div.form div.input input { box-sizing: border-box; width: 100%; height: 19px; }
div.channelUserGroupsDialog div.dialog div.form div.input select { flex: 0 0 auto; margin: 0; width: 100%; height: 29px; padding: 0; }
div.channelUserGroupsDialog div.dialog div.form a.create { display: block; height: 29px; }
div.channelUserGroupsDialog div.list { overflow-x: auto; overflow-y: auto; margin: 10px; max-height: 300px; min-height: 100px; }
div.channelUserGroupsDialog table { box-sizing: border-box; }
div.channelUserGroupsDialog table thead { background: #a0a0a0 none repeat scroll 0 0; }
div.channelUserGroupsDialog table thead th { color: #ffffff; padding: 5px 10px; width: 100%; vertical-align: middle; }
div.channelUserGroupsDialog table tbody { }
div.channelUserGroupsDialog table tbody tr { }
div.channelUserGroupsDialog table tbody tr td { vertical-align: middle; border-bottom: 1px dotted #808080; border-right: 1px dotted #a0a0a0; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; white-space: nowrap; }
div.channelUserGroupsDialog table tbody tr td:last-child { border-right: none; }
div.channelUserGroupsDialog table tbody tr:last-child td { border-bottom: none; }
div.channelUserGroupsDialog table tbody tr img { width: 20px; vertical-align: middle; margin: 0 5px 0 0; }
div.channelUserGroupsDialog table tbody tr:hover { background-color: #E0E0E0; }
div.channelUserGroupsDialog table tbody tr td a.button { background: #6690d0 url("img/iconClose.png") no-repeat scroll center center / 12px 12px; display: inline-block; height: 16px; margin-right: 2px; padding: 0; width: 16px; }



div.imageInput { }
div.imageInput div.preview { background: rgba(0, 0, 0, 0) url("img/backgroundTransparent.png") repeat scroll 0 0; border: 2px solid #6690d0; border-radius: 5px; float: left; height: 100px; overflow: hidden; position: relative; width: 100px; }
div.imageInput div.preview a.close { background: url("img/iconClose.png") no-repeat scroll center center / 16px 16px #6690d0; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); height: 16px; padding: 3px; position: absolute; right: 0; top: 0; width: 16px; display: none; cursor: pointer; }
div.imageInput div.preview:hover a.close { display: block; }
div.imageInput div.preview img { position: absolute; }
div.imageInput a.change { float: left; margin-left: 10px; margin-top: 35px; width: 100px; }
div.imageInput input[type=file] { display: none; }


div.progressDialog { }
div.progressDialog div.progressContainer { background: #f8f8f8 none repeat scroll 0 0; border: 1px solid #ffffff; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); height: 30px; margin: 10px; overflow: hidden; position: relative; width: 300px; }
div.progressDialog div.progressContainer div.progressValue { background: #66d090 none repeat scroll 0 0; border-radius: 4px; bottom: 0; box-shadow: 1px -1px 5px rgba(255, 255, 255, 0.5) inset; left: 0; position: absolute; right: 0%; top: 0; }
div.progressDialog div.progressContainer div.progressText { font-size: 14px; left: 0; margin-top: -7px; position: absolute; right: 0; text-align: center; top: 50%; }


div.mainSection { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
div.mainSection div.header { height: 40px; left: 0; position: absolute; right: 0; top: 0; }
div.mainSection div.header div.logotype { background: transparent url("Img/logotype.png") no-repeat scroll 0 0 / 138px 40px; float: left; height: 40px; width: 138px; }
div.mainSection div.header div.currentNick { color: #ffffff; float: left; font-size: 16px; margin-left: 15px; margin-top: 10px; }
div.mainSection div.header div.currentNick span { font-size: 14px; }
div.mainSection div.header div.currentNick span.nick { font-size: 16px; }
div.mainSection div.header div.links { color: #ffffff; float: right; font-size: 14px; font-weight: bold; margin-right: 10px; margin-top: 12px; }
div.mainSection div.header div.links a { color: #FFFFFF; text-decoration: none; cursor: pointer; }
div.mainSection div.header div.links a:hover { text-decoration: underline; }
div.mainSection div.body { background: none repeat scroll 0 0 #FFFFFF; bottom: 20px; left: 0; position: absolute; right: 0; top: 40px; }
div.mainSection div.body div.menu { bottom: 0; left: 0; padding: 5px; position: absolute; top: 0; width: 200px; }
div.mainSection div.body div.menu div.menuSection { background: none repeat scroll 0 0 #6690D0; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; margin-bottom: 5px; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; }
div.mainSection div.body div.menu div.selected { background: none repeat scroll 0 0 #FFD000; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); color: #000000; }
div.mainSection div.body div.bodySections { bottom: 0; left: 210px; position: absolute; right: 0; top: 0; padding: 5px; }
div.mainSection div.body div.bodySections div.bodyContent { bottom: 5px; left: 5px; position: absolute; right: 5px; top: 5px; }
div.mainSection div.body div.player { bottom: 0; height: 57px; margin: 5px; position: absolute; width: 200px; }
div.mainSection div.body div.player div.info { height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.mainSection div.body div.player div.controls { height: 32px; position: relative; }
div.mainSection div.body div.player div.controls div.play { background: url("img/playerPlay.png") no-repeat scroll 0 0 / 32px 32px #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 32px; width: 32px; }
div.mainSection div.body div.player div.controls div.stop { background: url("img/playerStop.png") no-repeat scroll 0 0 / 32px 32px #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 32px; width: 32px; }
div.mainSection div.body div.player div.controls div.info { background: url("img/playerInfo.png") no-repeat scroll 0 0 / 32px 32px #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 32px; width: 32px; margin-left: 5px; }
div.mainSection div.body div.player div.controls div.volume { float: right; height: 32px; overflow: hidden; position: relative; width: 64px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
div.mainSection div.body div.player div.controls div.volume div.background { background: url("img/playerVolumeBackground.png") no-repeat scroll 0 0 / 64px auto rgba(0, 0, 0, 0); border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: right; height: 32px; left: 0; overflow: hidden; position: relative; top: 0; width: 64px; }
div.mainSection div.body div.player div.controls div.volume div.current { background: url("img/playerVolume.png") no-repeat scroll 0 0 / 64px 32px rgba(0, 0, 0, 0); float: left; height: 32px; left: 0; overflow: hidden; position: absolute; top: 0; width: 64px; }
div.mainSection div.body div.player div.controls div.volume div.label { color: #808080; font-size: 10px; left: 0; position: absolute; top: 0; }
div.mainSection div.body div.player div.controls div.metadata { background: none repeat scroll 0 0 #ffffff; border-radius: 5px; bottom: 0; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); padding: 10px; position: absolute; right: 0; width: 150px; }
div.mainSection div.body div.player div.controls div.metadata img { background: none repeat scroll 0 0 #f0f0f0; border: 1px solid #ffffff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; height: auto; margin: 0; width: 150px; }
div.mainSection div.body div.player div.controls div.metadata div.title { background: none repeat scroll 0 0 #e8e8e8; border: 1px solid #6690d0; border-radius: 3px; box-sizing: padding-box; margin: 5px 0 0; max-height: 45px; overflow: hidden; padding: 5px; width: 148px; }
div.mainSection div.body div.player div.controls div.metadata div.author { background: none repeat scroll 0 0 #e8e8e8; border: 1px solid #6690d0; border-radius: 3px; box-sizing: padding-box; margin: 5px 0 0; max-height: 45px; overflow: hidden; padding: 5px; width: 148px; }
div.mainSection div.body div.player div.controls div.metadata div.album { background: none repeat scroll 0 0 #e8e8e8; border: 1px solid #6690d0; border-radius: 3px; box-sizing: padding-box; margin: 5px 0 0; max-height: 45px; overflow: hidden; padding: 5px; width: 148px; }
div.mainSection div.foot { bottom: 0; height: 20px; left: 0; position: absolute; right: 0; }


div.header div.tools { float: right; margin-right: 5px; margin-top: 5px; display: flex; }
div.header .tool { display: block; width: 30px; height: 30px; background: #6690D0; border-radius: 5px; margin-left: 5px; cursor: pointer; }
div.header div.tools .userCustomPermits { background: url("Img/iconUserCustomPermits.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .userGroups { background: url("Img/iconUserGroups.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .shoutCast { background: url("Img/iconShoutCast.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .ignore { background: url("Img/iconIgnoreUsers.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .ban { background: url("Img/iconBan.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .listBan { background: url("Img/iconListBan.png") no-repeat scroll center center / 24px 24px; }
div.header div.tools .search { float: right; width: auto; margin: 0 0 0 5px; }
div.header div.tools .search input { background: url("Img/iconSearch.png") no-repeat scroll 135px center #FFFFFF; padding-right: 30px; width: 125px; }
div.header .tool:hover { box-shadow: 1px 1px 5px rgba(0,0,0,0.3); background-color: #FFFFFF !important; }


div.listChannelsSection { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background-color: #FFFFFF; }
div.listChannelsSection div.header { background: none repeat scroll 0 0 #6690D0; border-radius: 5px 5px 5px 5px; height: 40px; left: 0; position: absolute; right: 0; top: 0; overflow: hidden; }
div.listChannelsSection div.header div.channelsCount { color: #FFFFFF; float: left; font-size: 15px; height: 40px; line-height: 40px; margin-left: 10px; }


div.listChannelsSection div.body { background: none repeat scroll 0 0 #FFFFFF; bottom: 0; left: 0; position: absolute; right: 0; top: 45px; }
div.listChannelsSection div.body div.categoriesTree { border: 1px solid #6690D0; border-radius: 5px 5px 5px 5px; bottom: 0; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1) inset; left: 0; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; width: 200px; padding: 5px; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem { margin: 2px 0; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info { }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a { background: none repeat scroll 0 0 #6690D0; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); color: #FFFFFF; cursor: pointer; display: block; overflow: hidden; padding: 5px 10px 5px 6px; text-overflow: ellipsis; vertical-align: text-top; white-space: nowrap; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a:hover { background: none repeat scroll 0 0 #FFD000; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); color: #000000; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a.selected { background-color: #FFD000; color: #000000; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a span.decorator { display: inline-block; width: 9px; height: 6px; margin-bottom: 2px; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a.open span.decorator { background: url(Img/expanderIcon.png) no-repeat 0 0 transparent; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a.close span.decorator { background: url(Img/expanderIcon.png) no-repeat 0 -7px transparent; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a span.name { font-size: 14px; font-weight: bold; white-space: nowrap; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.subCategories { border-radius: 0 0 5px 5px; margin-bottom: 10px; margin-left: 10px; padding-left: 5px; }
div.listChannelsSection div.body div.categoriesTree div.categoryItem div.info a.loading { background-image: url("Img/loading.gif"); background-position: right 5px center; background-repeat: no-repeat; background-size: 15px 15px; }


div.channelList { border: 1px solid #6690D0; border-radius: 5px 5px 5px 5px; bottom: 0; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1) inset; left: 217px; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0; top: 0; }
div.channelList div.noChannels { background: none repeat scroll 0 0 #FFFFD0; border: 1px solid #B0B0B0; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #808080; font-size: 16px; margin: 10px; padding: 5px 10px; }
div.channelList div.container { display: flex; flex-direction: column; }
div.channelList div.channelItem { background: rgba(102, 144, 208, 0.3) none repeat scroll 0 0; border: 3px solid #6690d0; border-radius: 10px; cursor: pointer; display: flex; flex: 1 1 65px; height: 65px; margin: 5px; padding: 5px; }
div.channelList div.channelItem div.image { background: #ffffff none repeat scroll 0 0 / 64px 64px; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); height: 64px; overflow: hidden; width: 64px; }
div.channelList div.channelItem div.data { display: flex; flex: 1 1 0; flex-direction: column; margin: 0 0 0 10px; overflow: hidden; }
div.channelList div.channelItem div.properties { height: 12px; right: 5px; white-space: nowrap; }
div.channelList div.channelItem div.properties div.usersInside { background: url("Img/iconAttributesUsers.png") no-repeat scroll 0 0 transparent; color: #333333; float: right; font-size: 13px; font-weight: bold; height: 12px; line-height: 13px; margin-right: 5px; padding-left: 16px; }
div.channelList div.channelItem div.properties div.invitationRequired { background: url("Img/iconAttributesInvitations.png") no-repeat scroll 0 0 transparent; float: right; height: 12px; margin-right: 2px; width: 12px; }
div.channelList div.channelItem div.properties div.passwordRequired { background: url("Img/iconAttributesPassword.png") no-repeat scroll 0 0 transparent; float: right; height: 12px; margin-right: 2px; width: 12px; }
div.channelList div.channelItem div.properties div.spamControl { background: url("Img/iconAttributesSpam.png") no-repeat scroll 0 0 transparent; float: right; height: 12px; margin-right: 2px; width: 12px; }
div.channelList div.channelItem div.properties div.allowRadio { background: url("Img/iconAttributesRadio.png") no-repeat scroll 0 0 transparent; float: right; height: 12px; margin-right: 2px; width: 12px; }
div.channelList div.channelItem div.name { color: #000000; font-size: 18px; font-weight: bold; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.channelList div.channelItem div.topic { color: #333333; font-size: 13px; line-height: 16px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }


div.channelSectionMenu { border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); height: 26px; margin-bottom: 5px; position: relative; cursor: pointer; }
div.channelSectionMenu div.icon { height: 20px; left: 5px; position: absolute; top: 3px; width: 20px; }
div.channelSectionMenu div.withoutRead { background: rgba(0, 0, 0, 0) url("img/iconChannelSay.gif") no-repeat scroll 0 0 / 20px 20px; }
div.channelSectionMenu div.name { color: #000000; font-size: 16px; height: 26px; left: 30px; line-height: 26px; position: absolute; right: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
div.channelSectionMenu div.close { background: url("img/iconClose.png") no-repeat scroll center center / 8px 8px #e04000; border-radius: 10px; bottom: 0; color: #ffffff; font-family: arial; font-size: 8px; font-weight: normal; height: 12px; line-height: 12px; margin-top: -6px; position: absolute; right: 5px; text-align: center; top: 50%; width: 12px; opacity: 0; transition: opacity 0.5s; }
div.channelSectionMenu:hover div.close { opacity: 1; transition: opacity 0.5s; }
div.channelSectionMenu:hover div.close:hover { background-color: #E01010; background-size: 10px 10px; width: 14px; height: 14px; margin-top: -7px; right: 4px; }

div.resizeW { background: #FFFFFF; position: absolute; left: -6px; top: 0px; bottom: 0px; width: 5px; cursor: ew-resize; }
div.resizeH { background: #FFFFFF; height: 5px; left: 0; position: absolute; right: 0; top: -5px; cursor: ns-resize; }
div.resizeH2 { background: #FFFFFF; bottom: -6px; height: 5px; left: 0; position: absolute; right: 0; cursor: ns-resize; }

div.resizingMoving { background: #808080; }

div.channelSection { }
div.channelSection div.header { background: none repeat scroll 0 0 #6690D0; border-radius: 5px 5px 5px 5px; height: 40px; left: 0; position: absolute; right: 0; top: 0; }
div.channelSection div.header div.topic { color: #FFFFFF; float: left; font-size: 15px; height: 40px; line-height: 40px; margin-left: 10px; }
div.channelSection div.header div.channelProperties { background: rgba(0, 0, 0, 0) url("Img/iconChannelProperties.png") no-repeat scroll center center / 24px 24px; float: left; margin-top: 5px; }
div.channelSection div.header div.channelProperties:hover { filter: invert(100%); background-color: #000000 !important; }


div.channelSection div.body { background: #ffffff none repeat scroll 0 0; bottom: 0; display: flex; left: 0; position: absolute; right: 0; top: 45px; }

div.channelSection div.body div.main { display: flex; flex: 1 1 0; flex-direction: column; }
div.channelSection div.body div.main div.application { border: 1px solid #6690d0; border-radius: 5px; display: none; height: 50%; margin-bottom: 5px; position: relative; }
div.channelSection div.body div.main div.application canvas { border-radius: 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); image-rendering: optimizeSpeed; /* Older versions of FF          */ image-rendering: -moz-crisp-edges; /* FF 6.0+                       */ image-rendering: -webkit-optimize-contrast; /* Safari                        */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: pixelated; /* Awesome future-browsers       */ -ms-interpolation-mode: nearest-neighbor; /* IE                            */ }

div.channelSection div.body div.main div.conversation { border: 1px solid #6690d0; border-radius: 5px; flex: 1 1 0; line-height: 1.3em; overflow: hidden; position: relative; }
div.channelSection div.body div.main div.conversation div.backgroundImage { background-position: 50% 50%; background-size: 100% auto; bottom: 0; left: 0; opacity: 0.3; position: absolute; right: 0; top: 0; }
div.channelSection div.body div.main div.conversation div.conversationContainer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-x: hidden; overflow-y: scroll; padding: 10px; }
div.channelSection div.body div.main div.conversation div.conversationContainer div.description { background: none repeat scroll 0 0 rgba(102, 144, 208, 0.5); border: 5px solid #6690d0; border-radius: 20px; font-size: 1.1em; line-height: 1.4em; margin: 0 0 10px 0; padding: 10px; }
div.channelSection div.body div.main div.conversation div.conversationContainer div.description hr { border: solid 0 transparent; border-bottom: solid 2px #000000; margin: 5px 0px; }
div.channelSection div.body div.main div.conversation div.conversationContainer div.description a { color: inherit; font-size: inherit; text-decoration: underline; cursor: pointer; }
div.channelSection div.body div.main div.conversation div.conversationContainer div.description a:visited { color: rgba(0,0,0,0.6); }
div.channelSection div.body div.main div.conversation div.conversationContainer col.column1 { min-width: 50px; }
div.channelSection div.body div.main div.conversation div.conversationContainer col.column2 { width: 100%; }
div.channelSection div.body div.main div.conversation .system { color: #808080 !important; }
div.channelSection div.body div.main div.conversation div.nick { margin: 0 0.5em 0.5em 0; text-align: right; font-weight: bold; font-family: inherit; }
div.channelSection div.body div.main div.conversation td { font-family: inherit; }
div.channelSection div.body div.main div.conversation div.say { margin: 0 0 0.5em 0; font-family: inherit; }
div.channelSection div.body div.main div.conversation div.say img.emoticon { max-height: 3em; max-width: 10em; }
div.channelSection div.body div.main div.conversation div.sayImage { }
div.channelSection div.body div.main div.conversation div.sayImage div.box { background: none repeat scroll 0 0 #ffffff; border: 2px solid #6690d0; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); display: block; float: left; min-height: 22px; min-width: 40px; overflow: hidden; position: relative; width: auto; }
div.channelSection div.body div.main div.conversation div.sayImage div.box div.top { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); height: 22px; left: 0; position: absolute; right: 0; top: 0; opacity: 0; transition: 0.5s ease-in-out; }
div.channelSection div.body div.main div.conversation div.sayImage div.box:hover div.top { opacity: 1; transition: 0.5s ease-in-out; }
div.channelSection div.body div.main div.conversation div.sayImage div.box a span.uploading { background: url("img/loading.gif") no-repeat scroll right 10px center / 32px auto rgba(0, 0, 0, 0.8); bottom: 0; color: #ffffff; display: block; font-size: 1.5em; left: 0; padding: 15px; position: absolute; right: 0; }
div.channelSection div.body div.main div.conversation div.sayImage div.box div.top a.close { background: url("img/iconClose.png") no-repeat scroll center center / 8px 8px #e04000; border-radius: 10px; color: #ffffff; height: 16px; position: absolute; right: 5px; text-align: center; top: 3px; width: 16px; }
div.channelSection div.body div.main div.conversation div.sayImage div.box img { border: medium none; display: block; margin: 0; border-radius: 5px; max-height: 300px; }

div.channelSection div.body div.main div.conversation div.buzz { color: #808080; margin: 0 0 0.5em 0; }
div.channelSection div.body div.main div.conversation div.kick { color: #808080; margin: 0 0 0.5em 0; }
div.channelSection div.body div.main div.conversation div.ban { color: #808080; margin: 0 0 0.5em 0; }
div.channelSection div.body div.main div.conversation div.shoutCast { color: #808080; margin: 0 0 0.5em 0; }


div.channelSection div.body div.main div.conversation div.sayAudio { }
div.channelSection div.body div.main div.conversation div.sayAudio div.play { background: url("img/playerPlay.png") no-repeat scroll 0 0 / 32px 32px #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 32px; width: 32px; margin-top: 5px; margin-right: 5px; }
div.channelSection div.body div.main div.conversation div.sayAudio div.stop { background: url("img/playerStop.png") no-repeat scroll 0 0 / 32px 32px #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 32px; width: 32px; margin-top: 5px; margin-right: 5px; }
div.channelSection div.body div.main div.conversation div.sayAudio svg { background: #5f85bf; background: -moz-linear-gradient(top, #5f85bf 0%, #4c6b99 50%, #5f85bf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5f85bf), color-stop(50%,#4c6b99), color-stop(100%,#5f85bf)); background: -webkit-linear-gradient(top, #5f85bf 0%,#4c6b99 50%,#5f85bf 100%); background: -o-linear-gradient(top, #5f85bf 0%,#4c6b99 50%,#5f85bf 100%); background: -ms-linear-gradient(top, #5f85bf 0%,#4c6b99 50%,#5f85bf 100%); background: linear-gradient(to bottom, #5f85bf 0%,#4c6b99 50%,#5f85bf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f85bf', endColorstr='#5f85bf',GradientType=0 ); border: 5px solid #6690d0; border-radius: 5px; height: 32px; width: 250px; }
div.channelSection div.body div.main div.conversation div.sayAudio audio { display: none; }

div.channelSection div.body div.main div.controls { height: 90px; box-sizing: border-box; margin-top: 5px; position: relative; }
div.channelSection div.body div.main div.controls div.say { bottom: 35px; left: 0; position: absolute; right: 0; top: 0; }
div.channelSection div.body div.main div.controls div.say input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; }
div.channelSection div.body div.main div.controls div.tools { bottom: 0; height: 30px; left: 0; position: absolute; right: 0; }

div.channelSection div.body div.main div.controls div.tools div.tool { background: none repeat scroll 0 0 #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; height: 30px; margin-right: 5px; width: 30px; cursor: pointer; }
div.channelSection div.body div.main div.controls div.tools div.font { background: url(Img/iconChangeFont.png) no-repeat center center #6690d0; background-size: 24px 24px; }
div.channelSection div.body div.main div.controls div.tools div.emoticon { background: url(Img/iconInsertEmoticon.png) no-repeat center center #6690d0; background-size: 24px 24px; }
div.channelSection div.body div.main div.controls div.tools div.buzz { background: url(Img/iconSendBuzz.png) no-repeat center center #6690d0; background-size: 24px 24px; }
div.channelSection div.body div.main div.controls div.tools div.image { background: url(Img/iconSendImage.png) no-repeat center center #6690d0; background-size: 30px 30px; }
div.channelSection div.body div.main div.controls div.tools div.audio { background: url(Img/iconSayAudioOff.png) no-repeat center center #6690d0; background-size: 24px 24px; }
div.channelSection div.body div.main div.controls div.tools div.audioRecording { background-image: url(Img/iconSayAudioRecording.png); background-size: 24px 24px; }
div.channelSection div.body div.main div.controls div.tools div.disabled { background-color: #CCC; cursor: default; -webkit-filter: grayscale(100%); filter: grayscale(100%); }



div.channelSection div.body div.usersInside { border: 1px solid #6690d0; border-radius: 5px; box-sizing: border-box; display: flex; flex-flow: column nowrap; margin-left: 5px; position: relative; width: 240px; }
div.channelSection div.body div.usersInside div.scroll { flex: 1 1 0; overflow-x: hidden; overflow-y: scroll; padding: 5px; }
div.channelSection div.body div.usersInside div.scroll div.row { background: none repeat scroll 0 0 #AAC0E0; border-radius: 5px; display: flex; padding: 5px; cursor: pointer; margin-bottom: 2px; }
div.channelSection div.body div.usersInside div.scroll div.row div.nick { align-self: center; flex: 1 1 0; font-family: Arial; font-size: 18px; height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.channelSection div.body div.usersInside div.scroll div.row div.radio { background: url("Img/iconShoutCast.png") no-repeat scroll 0 0 / 24px 24px transparent; height: 24px; margin-right: 5px; width: 24px; }
div.channelSection div.body div.usersInside div.scroll div.row div.webcam { background: url("Img/iconWebcam.png") no-repeat scroll 0 0 / 24px 24px transparent; height: 24px; margin-right: 5px; width: 24px; }
div.channelSection div.body div.usersInside div.scroll div.row div.userGroup { background: none no-repeat scroll 0 0 / 24px 24px transparent; height: 24px; width: 24px; }
div.channelSection div.body div.usersInside div.scroll div.me div.row { background: #6690D0; }
div.channelSection div.body div.usersInside div.scroll div.row div.nickRegistered { font-weight: bold; color: #000000; }
div.channelSection div.body div.usersInside div.myWebcamHolder { }

div.insertEmoticonDialog { }
div.insertEmoticonDialog div.list { align-content: flex-start; align-items: center; display: flex; flex-flow: row wrap; height: 300px; justify-content: space-around; margin: 10px; overflow-x: hidden; overflow-y: auto; width: 480px; }
div.insertEmoticonDialog div.list div.emoticon { background-color: #FFFFFF; align-items: center; border-radius: 5px; justify-content: center; overflow: hidden; padding: 3px; text-align: center; cursor: pointer; transition: 0.2s ease-in-out; }
div.insertEmoticonDialog div.list div.emoticon:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); transform: scale(1.5); z-index: 1; }
div.insertEmoticonDialog div.list div.emoticon img { max-height: 50px; max-width: 60px; }


div.changeFontDialog { }
div.changeFontDialog .dialog { width: 640px; }
div.changeFontDialog div.form { display: flex; flex-direction: column; height: 180px; padding: 10px; }
div.changeFontDialog div.form div.row1 { display: flex; flex-direction: row; padding: 0 0 10px; }
div.changeFontDialog div.form div.row2 { display: flex; }
div.changeFontDialog div.form div.row3 { display: flex; justify-content: flex-end; }
div.changeFontDialog div.form div.row1 div.column1 { display: flex; flex: 3 1 0; flex-direction: column; margin-right: 10px; }
div.changeFontDialog div.form div.row1 div.column2 { display: flex; flex: 2 1 0; flex-direction: column; margin-right: 10px; }
div.changeFontDialog div.form div.row1 div.column3 { display: flex; flex: 1 1 0; flex-direction: column; }
div.changeFontDialog div.form div.row1 div.row1 { font-weight: bold; padding: 0 0 5px; }
div.changeFontDialog div.form div.row1 div.row2 { }
div.changeFontDialog div.form div.row1 div.row2 select { font-size: 2em; height: 45px; margin: 0; width: 100%; }
div.changeFontDialog div.form div.row2 div.column1 { flex: 1 1 0; }
div.changeFontDialog div.form div.row2 div.column1 div.row1 { align-items: center; font-weight: bold; }
div.changeFontDialog div.form div.row2 div.column1 div.row1 div.column1 { }
div.changeFontDialog div.form div.row2 div.column1 div.row1 div.column2 { border: medium none; box-shadow: none; flex: 2 1 0; height: auto; margin: 0; padding: 0; }
div.changeFontDialog div.form div.row2 div.column2 { border: 1px solid #6690d0; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); flex: 2 1 0; height: 60px; margin-bottom: 10px; overflow: hidden; padding: 5px; overflow-y: auto; line-height: 1.3em; }
div.changeFontDialog div.form div.row3 a.ok { margin: 0 0 0 10px; }
div.changeFontDialog div.form div.row3 a.cancel { margin: 0 0 0 10px; }


div.popupWindow { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }


div.userActions { background: none repeat scroll 0 0 #ffffff; border: 1px solid #6690d0; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); float: left; padding: 10px; position: absolute; }
div.userActions div.item { background: none repeat scroll 0 0 #CCC; border-radius: 3px; color: #000000; margin: 5px 0; padding: 5px; cursor: pointer; text-align: center; }
div.userActions div.item:hover { background: none repeat scroll 0 0 #6690d0; color: #ffffff; }
div.userActions div.item:first-child { margin-top: 0; }
div.userActions div.item:last-child { margin-bottom: 0; }


div.shoutCastStreamIdDialog { }
div.shoutCastStreamIdDialog .dialog { width: 400px; }
div.shoutCastStreamIdDialog div.form { padding-bottom: 10px; }
div.shoutCastStreamIdDialog div.form p { margin: 10px; }
div.shoutCastStreamIdDialog div.form dl { }
div.shoutCastStreamIdDialog div.form dl dt { clear: both; float: left; font-size: 14px; font-weight: bold; line-height: 25px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; text-align: right; width: 120px; }
div.shoutCastStreamIdDialog div.form dl dd { border: 1px solid #6690d0; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1) inset; float: left; font-size: 16px; font-weight: bold; margin-bottom: 5px; padding: 5px 10px; text-align: center; width: 140px; cursor: pointer; }


div.userCardWindow { background: none repeat scroll 0 0 #ffffff; border: 1px solid #6690d0; border-radius: 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); left: 0; padding: 10px 10px 5px; position: absolute; top: 0; }
div.userCardWindow div.row { clear: both; display: flex; flex-direction: row; width: 290px; position: relative; }
div.userCardWindow div.row div.genre { background: url("img/iconUserCardGenre0.png") no-repeat scroll 0 0 / 32px 32px rgba(0, 0, 0, 0); float: left; height: 32px; width: 32px; }
div.userCardWindow div.row div.genre0 { }
div.userCardWindow div.row div.genre1 { background-image: url("img/iconUserCardGenre1.png"); }
div.userCardWindow div.row div.genre2 { background-image: url("img/iconUserCardGenre2.png"); }
div.userCardWindow div.row div.nick { flex: 1 1 0; flex: 1 1 0; font-size: 18px; line-height: 32px; margin-bottom: 5px; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; }
div.userCardWindow div.row div.nickRegistered { color: #808080; text-align: center; width: 60px; }
div.userCardWindow div.row div.nick_registered { color: #000000; font-style: normal; font-weight: bold; }
div.userCardWindow div.row div.nick_unregistered { color: #808080; font-style: italic; font-weight: normal; }
div.userCardWindow div.row div.image { flex: 1 1 0; height: 200px; margin-bottom: 5px; margin-left: 90px; text-align: center; width: 200px; }
div.userCardWindow div.row div.image img { }
div.userCardWindow div.row div.label { width: 90px; }
div.userCardWindow div.row div.value { background: none repeat scroll 0 0 rgba(102, 144, 208, 0.5); border-radius: 5px; flex: 1 1 0; margin-bottom: 5px; padding: 5px 10px; }


div.webcamPreview { height: 100% !important; width: 100% !important; }
div.myWebcam { }
div.myWebcam div.bar { background: #6690d0 none repeat scroll 0 0; border-radius: 5px; display: flex; margin: 5px; }
div.myWebcam div.bar div.title { color: #ffffff; flex: 1 1 0; font-weight: bold; padding: 5px; align-self: center; }
div.myWebcam div.bar div.toggleButton { align-self: center; background: transparent url("Img/iconWebcam.png") no-repeat scroll center center / 16px 16px; border-radius: 3px; display: block; height: 16px; margin: 3px; padding: 2px; width: 16px; cursor: pointer; }
div.myWebcam div.bar div.toggleButton:hover { background-color: #ffffff; }
div.myWebcam div.form { display: flex; margin: 5px; }
div.myWebcam div.form div.window { background: #ffFFFF none repeat scroll 0 0; flex: 1 1 0; height: 120px; }
div.myWebcam div.form div.window div.preview { }
div.myWebcam div.form div.window div.preview canvas { /*object-fit: cover; object-position: center;*/ }
div.myWebcam div.form div.window div.preview video { height: 100% !important; width: 100% !important; }
div.myWebcam div.form div.window div.listUsers { height: 100%; overflow-x: hidden; overflow-y: auto; }
div.myWebcam div.form div.window div.listUsers div.row { display: flex; height: 16px; margin-bottom: 5px; }
div.myWebcam div.form div.window div.listUsers div.row div.nick { flex: 1 1 0; height: 16px; line-height: 16px; }
div.myWebcam div.form div.window div.listUsers div.row div.delete { background: #6690d0 url("img/iconClose.png") no-repeat scroll center center / 12px 12px; border-radius: 3px; height: 16px; margin: 0 5px; width: 16px; }
div.myWebcam div.form div.options { width: 55px; }
div.myWebcam div.form div.options div.buttonViewers { background: transparent url("Img/iconWebcamViewews.png") no-repeat scroll 5px center / 16px 16px; border-radius: 5px; height: 16px; line-height: 16px; margin-bottom: 5px; margin-left: 5px; padding: 2px 5px 2px 2px; text-align: right; cursor: pointer; }
div.myWebcam div.form div.options div.buttonIgnored { background: transparent url("Img/iconWebcamDenied.png") no-repeat scroll 5px center / 16px 16px; border-radius: 5px; height: 16px; line-height: 16px; margin-bottom: 5px; margin-left: 5px; padding: 2px 5px 2px 2px; text-align: right; cursor: pointer; }
div.myWebcam div.form div.options div.buttonPrivacy { border-radius: 5px; height: 16px; line-height: 16px; margin-bottom: 5px; margin-left: 5px; padding: 2px 5px 2px 2px; text-align: right; cursor: pointer; }
div.myWebcam div.form div.options div.privacyOn { background: transparent url("Img/iconWebcamPrivacy.png") no-repeat scroll 5px center / 16px 16px; }
div.myWebcam div.form div.options div.privacyOff { background: transparent url("Img/iconWebcamPrivacyOff.png") no-repeat scroll 5px center / 16px 16px; }
div.myWebcam div.form div.options div.selected { background-color: #6690d0; }
div.myWebcam div.form div.options div span { }
div.myWebcam div.form div.options div:hover { background-color: #6690d0; }
div.myWebcam div.off { display: none; }
div.myWebcam div.on { display: flex; }


div.webcamRequest { }
div.webcamRequest div.message { }
div.webcamRequest div.message div.icon { background: url(Img/channelWebcam.png) no-repeat 0 0 / 64px 64px transparent; width: 64px; height: 64px; }
div.webcamRequest div.message div.details { margin: 10px 10px 0; }
div.webcamRequest div.message div.details div.row { display: flex; margin: 10px 0; }
div.webcamRequest div.message div.details div.row div.nick { flex: 2 1 0; font-size: 17px; font-weight: bold; }
div.webcamRequest div.message div.details div.row div.nickRegistered { background: #e0e0e0 none repeat scroll 0 0; border: 1px solid #a0a0a0; border-radius: 4px; color: #505050; font-size: 11px; line-height: 14px; padding: 2px 5px; text-align: center; width: auto; margin-left: 10px; }
div.webcamRequest div.message div.details div.row div.nickUnregistered { background: #ffc0c0 none repeat scroll 0 0; border: 1px solid #dd6060; border-radius: 4px; color: #880000; font-size: 11px; line-height: 14px; margin-left: 10px; padding: 2px 5px; text-align: center; width: auto; }
div.webcamRequest div.message div.details div.row div.timeout { background: transparent url("img/iconClock.png") no-repeat scroll left center / 20px auto; font-size: 14px; font-weight: bold; line-height: 20px; margin-left: 10px; padding-left: 25px; text-align: left; width: 35px; }
div.webcamRequest div.message div.details div.buttons { }
div.webcamRequest div.message div.details div.buttons a.button { white-space: nowrap; width: auto; }


div.webcamPlayer { background: #ffffff none repeat scroll 0 0; border: 2px solid #6690d0; border-radius: 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); left: 50px; position: absolute; top: 50px; z-index: 1; overflow: hidden; }
div.webcamPlayer div.title { background: #6690d0 none repeat scroll 0 0; display: flex; height: 18px; padding: 5px 10px; }
div.webcamPlayer div.title span.nick { background: #6690d0; border-radius: 10px 0 0; color: #ffffff; cursor: pointer; display: block; flex: 1 1 0; font-size: 18px; font-weight: bold; line-height: 28px; margin-bottom: -5px; margin-left: -12px; margin-top: -7px; padding-left: 10px; }
div.webcamPlayer div.title a.zoomIn { background: url(Img/iconZoomIn.png) no-repeat 0 0 /16px 16px transparent; width: 16px; height: 16px; display: block; margin-left: 5px; }
div.webcamPlayer div.title a.zoomOut { background: url(Img/iconZoomOut.png) no-repeat 0 0 /16px 16px transparent; width: 16px; height: 16px; display: block; margin-left: 5px; }
div.webcamPlayer div.title a.close { background: rgba(0, 0, 0, 0) url("img/iconClose.png") no-repeat scroll 0 0 / 16px 16px; height: 16px; width: 16px; margin-left: 5px; }
div.webcamPlayer div.body { border-radius: 0 0 3px 3px; height: 240px; overflow: hidden; position: relative; width: 320px; }
div.webcamPlayer div.body canvas { background: #000000 none repeat scroll 0 0; left: 0; position: absolute; top: 0; }
div.webcamPlayer div.body div.message { background: #f0f0f0 none repeat scroll 0 0; box-sizing: border-box; font-size: 25px; height: 100%; left: 0; line-height: 30px; padding: 10px; position: absolute; text-align: center; top: 0; width: 100%; }


div.findUserDialog { }
div.findUserDialog div.message { margin: 10px; }
div.findUserDialog div.list { border: 1px solid #6690d0; border-radius: 5px; height: 200px; margin: 10px; overflow-x: hidden; overflow-y: auto; padding: 5px; }
div.findUserDialog div.list div.item { background: #6690d0 none repeat scroll 0 0; border-radius: 5px; color: #202020; font-family: arial; font-size: 18px; line-height: 24px; margin-bottom: 5px; padding: 5px; }
div.findUserDialog div.list div.item:hover { background-color: #ffd000; }
div.findUserDialog div.list div.state0 { }
div.findUserDialog div.list div.state1 { opacity: 0.5; }
div.findUserDialog div.list div.state2 { opacity: 0.5; }
div.findUserDialog div.list div.registered { font-weight: bold; color: #000000; }


div.whoisDialog { }
div.whoisDialog div.dialog { width: 500px; }
div.whoisDialog div.info { display: flex; margin: 10px; }
div.whoisDialog div.info div.details { flex: 1 1 0; display: flex; flex-direction: column; }
div.whoisDialog div.info div.details div.row { display: flex; flex: 1 1 0; }
div.whoisDialog div.info div.details div.row div.label { margin: 0; padding: 0; width: 90px; }
div.whoisDialog div.info div.details div.row div.value { align-self: center; flex: 1 1 0; font-family: arial; font-size: 20px; margin-left: 10px; }
div.whoisDialog div.info div.tools { }
div.whoisDialog div.info div.tools a { }
div.whoisDialog div.channelList { bottom: 0; height: 200px; left: 0; position: relative; right: 0; margin: 10px; }


div.editEmoticonPackDialog { }
div.editEmoticonPackDialog div.dialog { width: 550px; }
div.editEmoticonPackDialog div.form { display: flex; }
div.editEmoticonPackDialog div.form div.list { background: #f8f8f8 none repeat scroll 0 0; border: 1px solid #6690d0; border-radius: 5px; flex: 1 1 0; height: 300px; margin: 10px; overflow-x: hidden; overflow-y: scroll; }
div.editEmoticonPackDialog div.form div.list div.item { background: #FFFFFF none repeat scroll 0 0; border-radius: 5px; display: flex; margin: 2px; padding: 3px; cursor: pointer; }
div.editEmoticonPackDialog div.form div.list div.item:hover { background: #ffDEB3 none repeat scroll 0 0; }
div.editEmoticonPackDialog div.form div.list div.itemSelected { background: #ff9000 none repeat scroll 0 0; }
div.editEmoticonPackDialog div.form div.list div.item div.image { background: rgba(0, 0, 0, 0) url("img/backgroundTransparent.png") repeat scroll 0 0; border: 2px solid #6690d0; border-radius: 3px; display: flex; height: 32px; padding: 2px; width: 32px; }
div.editEmoticonPackDialog div.form div.list div.item div.image img { max-height: 32px; max-width: 32px; }
div.editEmoticonPackDialog div.form div.list div.item div.launcher { align-self: center; margin: 0 0 0 10px; }
div.editEmoticonPackDialog div.form div.editor { margin: 10px 10px 10px 0; }
div.editEmoticonPackDialog div.form div.editor div.row { }
div.editEmoticonPackDialog div.form div.editor div.actions { margin-bottom: 10px; }
div.editEmoticonPackDialog div.form div.editor div.actions a.button { }
div.editEmoticonPackDialog div.form div.editor div.preview { margin-bottom: 10px; }
div.editEmoticonPackDialog div.form div.editor div.row div.label { width: 60px; }
div.editEmoticonPackDialog div.form div.editor div.row div.input { }
div.editEmoticonPackDialog div.form div.editor div.row div.input input { }
div.editEmoticonPackDialog div.form div.editor div.row a.save { margin: 0 auto; }