body
{
	overflow: hidden;
	background-color: #21282F;
	color: white;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.homePage
{
	text-align: center;
	margin: 25px;
	background-color: #BCBCBC;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
}

.pagination
{
	margin: 0;
	padding: 0;
	margin-top: 2px;
}

.nav-separator
{
	width: 2px;
}

#alertContainer .alertMessage
{
	background-color: #4a7492;
	border: 4px solid #8596a7;
	z-index: 99999;
	min-height: 100px;
	overflow: hidden;
	display: none;
	max-width: 100%;
	position: absolute;
	transition: background 2s ease;
}

#alertContainer
{
	position: absolute;
	margin-top: 50px;
	width: 100%;
	height: 100%;
}

#alertContainer .alertMessage p
{
	padding: 10px;
	font-size: 0.9rem;
}

#alertContainer .alertMessage .alertProgress
{
	width: 0%;
	height: 5px;
	background-color: white;
	opacity: 0.3;
	transition: width 0.5s ease-in;
}

#confirmationContainer
{
	z-index: 99999;
	width: 100%;
	overflow: auto;
	
	position: absolute;
	top: 0;
	pointer-events: none;
	
	height: 100vh;
	display: flex;
	align-items: center;
}

#confirmationContainer .confirmContent
{
	width: 400px;
	max-width: 100%;
	border: 3px solid #4a7492;
	margin: auto;
	z-index:  99999;
	pointer-events: auto;
	text-align: center;
	padding: 10px;
	border-radius: 4px;
	animation: appearIn 0.2s;
}

#confirmationContainer p
{
	font-size: 90%;
}

.userlistStatus
{
	font-weight: normal;
}

.movable
{
	position: relative;
	cursor: move;
	
	touch-action: none;
}

.movable img
{
	position: absolute;
	top: 0px;
	left: 0px;
	
	touch-action: none;
}

#sidebarCollapse
{
	color: black;
}

.sidebarCollapseIcon
{
	color: white;
	cursor: pointer;
}

#colorBox
{
	position: absolute;
	bottom: 0px;
	height: 60px;
}

#colorBox .exchange
{
	position: absolute;
	left: 29px;
	z-index: 3;
	width: 16px;
	height: 16px;
}

#colorBox .color
{
	width: 25px;
	height: 25px;
	display: block;
	border: 1px solid white;
	outline: 1px solid black !important;
	transition: all 0.25s;
}

#colorBox .primary
{
	position: absolute;
	top: 8px;
	left: 2px;
	background-color: black;
	z-index: 2;
}

#colorBox .secondary
{
	position: absolute;
	top: 25px;
	left: 18px;
	background-color: white;
	z-index: 1;
}

.fmBubble
{
	cursor: pointer;
	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
  
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.presetBubble
{
	width: 22px;
	height: 22px;
	font-size: 11px;
	line-height: 22px;
	border-radius: 25px;
	border: 1px solid white;
	background-color: white;
	display: block;
	float: left;
	text-align: center;
	margin-right: 3px;
	margin-bottom: 3px;
	color: #333333;
	transition: all 1s;
}

.colorBubble
{
	width: 24px;
	height: 24px;
	border-radius: 24px;
	border: 1px solid #777777;
	background-color: white;
	display: block;
	float: left;
	margin-right: 4px;
	margin-bottom: 1px;
	transition: all 1s;
}

#colorbubbles .colorBubble
{
	width: 20px;
	height: 20px;
}

.colorbox
{
	width: 20px;
	height: 20px;
	display: block;
	background-color: #FFFFFF;
	border: 1px solid gray;
	border-radius: 5px;
}

.brushIcon
{
	width: 25px;
	font-size: 14px;
}

.noborder
{
	border: 0;
	border-radius: 0;
}

.sidebar-secondary-bg
{
	background-color: transparent;
}

.topNavbar .dropdown-menu
{
	border: 1px solid #353F58;
	background-color: #4A7492;
}

#previewList .dropdown-menu
{
	font-size: 0.9rem;
	margin: 0;
	padding: 5px 0px;
}

.topNavbar .dropdown-item
{
	background-color: #4A7492;
}

.navbar-collapse
{
	overflow-y: hidden;
}

.headerBox
{
	flex: 1;
	line-height: 35px;
	overflow-x: hidden;
	border-radius: 4px;
}

.headerTable
{
	max-height: 60px;
}

#headerTitle
{
	font-size: 0.85rem;
	height: 30px;
	line-height: 30px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#headerTitle .msgCategory
{
	background-color: #ddb2d4;
	font-size: 80%;
	display: inline-block;
	padding: 0px 5px;
	border-radius: 4px 0px 0px 4px;
	color: #682c2c;
	margin-right: 10px;
}

#headerTitle .chatDataUri
{
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	line-height: 18px;
	overflow: hidden;
	text-indent: -9999px;
	color: transparent;
	position: relative;
}

#headerTitle .chatDataUri img,
#headerTitle .chatDataUri > *
{
	display: none !important;
}

#headerTitle .chatDataUri::before
{
	content: "🖼️";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 14px;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}

#headerTitle .chatDataUri:hover::before
{
	opacity: 0.9; /* slight visual cue on hover */
}

#headerTitle .msgLine
{
	display: inline-block;
}

#headerTitle .chatThumb
{
	display: none;
}

#headerTitle .msgFrom
{
	float: left;
	display: inline-block;
}

#headerTitle .msgCategory.msgCategoryPM
{
	background-color: #D6B147;
	color: #333;
}

#headerTitle .msgCategory.msgCategoryEVENT
{
	background-color: #888;
	color: #333;
}

#headerTitle .msgCategory.msgCategoryMOTD
{
	background-color: #6dd56d;
	color: #464646;
}

#headerTitle .msgCategory.msgCategoryPUBLICROOM,
#headerTitle .msgCategory.msgCategorySTAFFROOM
{
	background-color: #7f7f85;
	color: #2d2d2d;
}

#headerTitle .msgCategory.msgCategoryGM
{
	background-color: #db90dd;
	color: #262626;
}

#topbar .navbar
{
	height: 38px;
}

#topbarProgress
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	display: none;
}

.conversationBox
{
	user-select: text;
}

.chatBox
{
	user-select: text;
}

.chatBox p
{
	font-size: 14px;
	color: white;
}

.fullscreen
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.blockscreen
{
	opacity: 0.5;
	pointer-events: auto;
	background-color: black;
	
	transition: background-color 0.5s ease;
}

.blockwelcome
{
	background: url(../../images/bg.png) repeat;
	animation: moveBG 40s linear infinite;
}

@keyframes moveBG
{
	0% { background-position: 0 0; }
	100%  { background-position: 0 450px; }
}


.blockwelcome:after
{
	content: "FlockMod";
	font-size: 300%;
	font-weight: bold;
	padding: 20px;
	color: #999999;
}

.blockConfirmation
{
	pointer-events: auto !important;
	height: 100vh;
}

.bgConfirmation
{
	background: rgba(0, 0, 0, 0.5);
}

.topNavbar
{
	border-bottom: 2px solid transparent;
	color: white;
}

.topbarButtons
{
	padding-left: 10px;
}

.bottomNavbar
{
	border-top: 2px solid transparent;
	color: #464646;
	overflow: hidden;
}

.sidebarNavbar
{
	border-top: 2px solid transparent;
	color: #464646;
}

.navbar .container
{
	z-index: 99999;
}

.navbar-brand
{
	overflow: hidden;
}

.navbar-light .navbar-brand
{
	color: white;
}

.navbar-toggler-icon
{
	color: white;
}

.navbar-toggler-left
{
	left: 0;
}

.nav-link
{
	color: white;
}

.sidebarTools
{
	width: 45px;
	height: 100%;
}

.sidebarAdvanced
{
	width: 242px;
	float: right;
	margin-top: 5px;
	padding-right: 3px;
	height: 100%;
}

.sidebarOptions
{
	text-align: right;
	font-size: 0.8rem;
	margin-bottom: 2px;
}

a,
a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}

.toolbar
{
	width: 100%;
	height: 100%;
}

.toolbar .btn
{
	padding: 0px !important;
	margin: 0px !important;
	height: 50px;
	line-height: 50px;
	border: 0px;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.optionBG
{
	background-color: transparent;
	padding-top: 3px;
	padding-bottom: 0px;
	overflow: auto;
}

.layerPreview
{
	font-size: 90%;
	margin-bottom: 3px;
	border-left: 4px solid transparent;
}

.layerPreview img
{
	background-color: #EEEEEE;
	background-image: linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC), linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	
	float: left;
	border: 0;
	
	width: auto;
	height: 40px;
	margin-right: 5px;
}

.layerPreviewOverlay
{
	position: absolute;
	top: 2px;
	left: 25px;
	font-size: 1.5rem;
	opacity: 0.95;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: none;
	pointer-events: none;
}

.layerPreview .layerButton:active
{
	border-color: transparent;
}

.layerPreview .btn.disabled
{
	border-color: transparent;
}

.layerPreview .layerButton:active
{
	border-color: transparent;
}

#DrawingArea
{
	background-color: #666666;
}

.mainContentArea
{
	width: 100%;
	height: calc(100vh - 76px);
	overflow: hidden;
	position: relative;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	touch-action: none;
}

.BoardPosition
{
	position: absolute;
	top: 0;
	left: 0;
}

.boardContainer
{
	transform-origin: center center;
	position: absolute;
	display: none;
	overflow: hidden;
	outline: 3px solid #505050;
	touch-action: none;
}

.board
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	
	pointer-events: none;
	touch-action: none;
	backface-visibility: hidden;
}

.canvasGrid
{
	position: absolute;
	left: 0;
	top: 0;
	
	z-index: 25;
}

.canvasOnion
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 8;
}

.slate
{
	position: absolute;
	left: 0;
	top: 0;
	
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transform: translateZ(0);
	
	touch-action: none;
}

.CanvasContainer
{
	position: relative;
	top: 0;
	left: 0;
	transform: translateZ(0);
}

.CursorContainer
{
	position: relative;
	z-index: 25;
	width: 100%;
	pointer-events: none;
	transform: translateZ(0);
}

.cursor
{
	position: absolute;
	pointer-events: none;
	width: 100%;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.cursor .pointer
{
	pointer-events: none;
	filter: invert(100%);
	position: absolute;
	top: 0;
	left: 0;
}

.cursor .pointerCircle
{
	border-radius: 50%;
	border: 1px solid #777777;
}

.cursor .pointerSquare
{
	border-radius: 0;
	border: 1px solid #777777;
}

.cursor .pointerInvisible
{
	border: 0;
}

.cursor .pointerCrosshair
{
	border-radius: 50%;
	border: 1px solid #777777;
	
	width: 1px;
	height: 100px;
	position: relative;
}

.cursor .pointerCross
{
	border: 0;
	
	width: 1px;
	height: 100px;
	position: relative;
}

.cursor .pointerCrosshair:before, .cursor .pointerCrosshair:after,
.cursor .pointerCross:before, .cursor .pointerCross:after
{
	content: "";
	position: absolute;
	z-index: -1;
	background-color: #777777;
}

.cursor .pointerCrosshair:before,
.cursor .pointerCross:before
{
	left: 50%;
	width: 1px;
	height: 100%;
}

.cursor .pointerCrosshair:after,
.cursor .pointerCross:after
{
	top: 50%;
	height: 1px;
	width: 100%;
}

.cursor .pointerDot
{
	border: 0;
	
	width: 1px;
	height: 100px;
	position: relative;
}

.cursor .pointerDot:before, .cursor .pointerDot:after
{
	content: "";
	position: absolute;
	z-index: -1;
	background-color: #777777;
}

.cursor .pointerDot:before
{
	left: calc(50% - 2px);
	top: calc(50% - 2px);
	height: 4px;
	width: 4px;
	border-radius: 50%;
}

.cursor .pointerLabel
{
	font-size: 10px;
	color: #777777;
	
	position: absolute;
	filter: invert(100%);
	
	pointer-events: none;
}

.cursor .textfield
{
	position: absolute;
	width: 100%;
	pointer-events: none;
	max-width: 720px;
	min-height: 9px;
	overflow: visible;
	white-space: nowrap;
}

.cursor .textfield i
{
	animation: blinker 3s linear infinite;
	mix-blend-mode: difference;
	font-family: 'Rubik';
	font-size: 70%;
	font-style: normal;
}

.disabledCursor
{
	font-size: 10px;
	color: gray;
	font-family: 'Rubik';
}

@keyframes blinker
{
	0% { opacity: 1; }
	50% { opacity: 0.3; }
	100% { opacity: 1; }
}

.fullHeight
{
	height: 100%;
}

.inverted
{
	filter: invert(100%);
}

#userlist tr > td:first-child
{
	width: 90px;
	min-width: 90px;
}

#userlist tr td
{
	font-size: 72%;
	padding-right: 0;
	cursor: pointer;
	vertical-align: middle;
}

.noMouseInteraction
{
	pointer-events: none !important;
	touch-action: none !important;
}

.btn i, .btn.far, .btn.fas, .btn span
{
	pointer-events: none !important;
	touch-action: none !important;
}

.noResize
{
	pointer-events: none;
	touch-action: none;
	cursor: default;
}

#dialogContainer
{
	z-index: 1000;
	width: 100%;
	height: 100%;
	pointer-events: none;
	padding: 0px;
	margin: 0px;
	font-size: 0.8rem;
}

.dialog-secondary-bg
{
	background-color: #dbdce0;
	color: black;
}

.dialogTitlebar
{
	height: 37px;
	line-height: 37px;
	
	overflow: hidden;
	z-index: 2;
	padding: 0px;
	margin: 0px;
	
	transition: background-color 0.5s ease;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	touch-action: none;
}

.dialogTitlebar.inactive
{
	cursor: auto !important;
}

.dialogMaximized
{
	top: 0px !important;
	left: 0px !important;
	width: 0px !important;
	height: 0px !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: 100% !important;
}

.dialogTitle
{
	border: 0;
	color: white;
	font-size: 0.9rem;
	overflow: auto;
	
	padding-bottom: .25rem;
	padding-left: .75rem;
	
	touch-action: none;
}

.dialogModal
{
	background-color: rgb(0, 0, 0, 0.5);
	pointer-events: auto;
}

.dialogTitle a
{
	color: white;
}

select
{
	cursor: pointer;
}

.dialog input,
.dialog textarea,
.dialog select
{
	border: 1px solid transparent;
}

.dialog input:focus,
.dialog textarea:focus,
.dialog select:focus
{
	border: 1px solid transparent;
}

.dialogTitle select
{
	border: 0;
	background-color: transparent;
}

.dialogTitle select:hover, .dialogTitle select:active, .dialogTitle select:focus
{
	border: 0;
	background-color: #29425C;
}

.dialog .form-wrapper
{
	border: 1px solid transparent;
}

.dialogSize.dsBar
{
	border: 2px solid #8596a7;
	z-index: 10004;
}

.dialogSize.dsCorner
{
	background-color: #8596a7;
	z-index: 10005;
	
	width: 5px;
	height: 5px;
}

.sbTop
{
	position: absolute;
	top: -5px;
	left: 0px;
	right: 0px;
	cursor: n-resize;
}

.sbBottom
{
	position: absolute;
	bottom: -5px;
	left: 0px;
	right: 0px;
	cursor: s-resize;
}

.sbLeft
{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -5px;
	cursor: w-resize;
}

.sbRight
{
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: -5px;
	cursor: e-resize;
}

.sbTopLeft
{
	position: absolute;
	top: -5px;
	left: -5px;
	
	cursor: nw-resize;
}

.sbTopRight
{
	position: absolute;
	top: -5px;
	right: -5px;
	
	cursor: ne-resize;
}

.sbBottomLeft
{
	position: absolute;
	bottom: -5px;
	left: -5px;
	
	cursor: sw-resize;
}

.sbBottomRight
{
	position: absolute;
	bottom: -5px;
	right: -5px;
	
	cursor: se-resize;
}

.dialogTitleButtons
{
	float: right;
}

.dialogTitleButtons a
{
	border: 0px;
	border-radius: 0px;
}

.dialog
{
	border: 1px solid transparent;
	z-index:  99999;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	
	position: absolute;
	top: 0px;
	left: 0px;
}

.nav-text
{
	padding: .5rem;
	display: block;
	font-weight: 300;
}

.txtScale, .txtRotation
{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#presetsBox
{
	text-align: center;
	padding-top: 10px;
	padding-left: 5px;
	margin-bottom: 10px;
}

#presetsBox p
{
	font-size: 60%;
	width: 100%;
	margin-top: 5px;
	clear: both;
}

#undoPreview > .slate
{
	z-index: 10;
}

.previewCanvas
{
	transform: scale(0.5, 0.5);
	transform-origin: top left;
	cursor: crosshair;
}

.previewBox
{
	margin: auto;
	max-width: 100%;
	overflow: hidden;
}

.optionTitle
{
	width: 40%;
	padding-left: 6px;
	float: left;
	font-size: 70%;
	line-height: 25px;
}

.optionField
{
	width: 55%;
	float: left;
}

#sidebar table td
{
	padding: 3px;
	border: 0;
}

.disabledLink i
{
	color: gray;
}

.disabledLink
{
	color: gray;
	pointer-events: none;
}

.noOverflow
{
	overflow: hidden;
}

.flippedHorizontally
{
	transform: scaleX(-1);
}

#loadingContainer
{
	background-color: #1f2d37;
	
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	
	z-index: 11111;
}

.strikeThrough
{
	text-decoration: line-through;
}

.inputOption
{
	height: 25px;
	background-color: #2E4057;
	color: white;
	border: 1px solid gray;
	width: 100%;
}

.darkInput
{
	border: 1px solid transparent !important;
	background-color: #49555B;
	color: white;
	border-color: #49555B;
}

.floatingToolbar
{
	position: absolute;
	left: 0px;
	top: -100px;
	border: 1px solid #CCCCCC;
	padding: 5px;
	color: black;
	pointer-events: auto;
	background-color: #e6e3e3;
	opacity: 0.9;
	border-radius: 4px;
	display: none;
	z-index: -2;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.floatingToolbar a
{
	margin: 2px;
	font-size: 80%;
	padding: 5px;
}

.customTooltip
{
	border-radius: 5px;
	border: 1px solid #464646;
	background-color: #CCCCCC;
	font-size: 85%;
	color: #464646;
	min-height: 25px;
	min-width: 25px;
	padding: 4px 10px;
	pointer-events: none;
	z-index: 100000;
	opacity: 0.95;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	position: absolute;
	left: 0px;
	top: 0px;
}

.loadingSpinner
{
	display: flex;
	align-items: center;
	background-color: black;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10003;
	opacity: 0.5;
}

.pixelArt
{
	position: absolute;
	top: 0;
	left: 0;
	touch-action: none;
	outline: 2px solid #505050;
}

.brushPreview
{
	width: 280px;
	height: 280px;
	padding: 15px;
}

.brushPreview canvas
{
	transform: translateZ(0);
}

.keepingAspectRatio .sizeController
{
	outline: 1px solid #999898;
}

.sizeController
{
	width: calc(15px / var(--ui-scale));
	height: calc(15px / var(--ui-scale));
	outline: 1px solid #404040;
	background-color: #CCCCCC;
	transform: translate(-50%, -50%);
	
	position: absolute;
	top: 0px;
	left: 0px;
}

.rotationController
{
	width: calc(15px / var(--ui-scale));
	height: calc(15px / var(--ui-scale));
	outline: 1px solid white;
	border-radius: 50%;
	background-color: #f2b416;
	transform: translate(-50%, -50%);
	
	position: absolute;
	top: 0px;
	left: 0px;
}

.virtualCursor
{
	position: absolute;
	top: 0px;
	left: 0px;
	pointer-events: none;
	z-index: 1000000;
	transform: translate(0, -50%);
}

.cursorCenter
{
	transform: translate(-50%, -50%);
}

.cursorComment
{
	font-size: 70%;
	color: gray;
	margin-left: 10px;
}

.homePage img
{
	width: 500px;
}

.scrollbarBackground
{
	width: 20px;
	position: absolute;
	right: 0;
	top: 0;
	left: auto;
	height: auto;
	bottom: 0;
}

.scrollbarThumb
{
	width: 20px;
	height: 20px;
	
	position: absolute;
	right: 0;
	top: 0px;
}

.dialog .col-form-label
{
	color: white;
}

.sidemenu
{
	padding: 0px;
	margin: 0px;
}

.sidemenu li
{
	padding: 0px;
	margin: 0px;
	cursor: pointer;
}

.sidemenu li a
{
	display: block;
	width: 100%;
	padding: 15px;
	margin: 2px;
	color: white;
}

.submodal
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2;
	overflow: auto;
}

.submodal .subcontent
{
	width: 100%;
	margin: auto;
	overflow: auto;
}

.modalBorder
{
	border-top: 2px solid #3f4851;
	border-bottom: 2px solid #3f4851;
}

.verticalAlign
{
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

.bottomButtons
{
	padding: 10px 0px 0px 0px;
	margin: 0px;
	width: 100%;
	float: left;
	overflow: hidden;
	text-align: right;
}

.bottomFixed
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
}

.fixedHeader2 th
{
	text-align: center;
}

.smallCheckbox > .simpleBox
{
	width: 22px;
	height: 22px;
}

.resizeBorder
{
	position: absolute;
	border: 1px dashed #7B7B7B;
	outline: 1px dashed #CCCCCC;
	z-index: 100000;
	top: -10px;
	left: -10px;
}

.dialogProcessing
{
	pointer-events: none;
	touch-action: none;
}

.smallDate
{
	color: #AAAAAA;
	font-size: 70%;
}

.bigIcon
{
	font-size: 200%;
	margin-right: 10px;
}

.invisible
{
	visibility: hidden;
	transition: all 2s;
}

.tableContainer
{
	overflow: hidden;
}

.thumb
{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 90px;
  width: auto;
}

.roomBox
{
	margin-top: 10px;
	font-size: 90%;
}

.descriptionBox
{
	float: left;
	width: 100%;
}

.typeBox
{
	float: right;
	width: 20%;
	text-align: right;
	font-weight: 500;
}

.nameBox
{
	float: left;
	width: 80%;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
}

.thumbBox
{
	position: relative;
	width: auto;
	height: 90px;
	margin: auto;
}

.roomDescription
{
	overflow-y: auto;
}

.roomDescription a:hover
{
	text-decoration: underline;
}

.roomThumb
{
	padding-left: 15px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	float: right;
	width: 50%;
}

.roomThumb > div
{
	padding: 10px;
	width: 100%;
}

.roomBox
{
	overflow: auto;
	padding: 5px;
	margin: 0;
}

#roomList
{
	width: 50%;
}

.toolbarSeparator
{
	margin-right: 14px;
	pointer-events: none;
	touch-action: none;
}

.params
{
	width: 200px;
	font-size: 90%;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.paramRow
{
	width: 200px;
	overflow: hidden;
	float: left;
}

.paramRow .paramName
{
	float: left;
	width: 80px;
}

.paramRow .paramValue
{
	float: left;
	width: 115px;
	text-align: center;
	background-color: #898989;
	border-radius: 4px;
	border: 1px solid #ABABAB;
	color: white;
}

.darkButton
{
	color: #CCCCCC;
	border-radius: 6px 0px 0px 6px;
	background-color: #49555B;
	border-color: #49555B;
	cursor: handpoint;
}

/* CHAT */

.chatWarning
{
	width: 100%;
	margin-left: 1rem;
	padding: 5px;
	margin-right: 1rem;
	font-weight: bold;
	font-size: 80%;
	color: gray;
}

.channelTitle
{
	overflow: hidden;
	cursor: pointer;
	padding: 0px;
	margin-top: 5px;
	padding-right: 5px;
	height: 45px;
	border-left: 12px solid transparent;
}

.channelTitle.locked:hover
{
	cursor: default;
}

.channelCaption
{
	padding: .75rem;
	float: left;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 75%;
}

.chatBar
{
	overflow: auto;
}

.channelClose
{
	background-color: transparent;
	width: 25px;
	text-align: center;
	float: right;
	height: 100%;
	padding-top: .75rem;
}

.channelIcons
{
	float: right;
	height: 100%;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.channelIcons i
{
	padding-right: 5px;
}

#chatTitle
{
	padding-bottom: 5px;
	border-bottom: 1px solid gray;
	font-weight: 400;
}

.chatTitleButton
{
	float: right;
	text-align: right;
	width: 50px;
	overflow: hidden;
}

.chatBox .chatBlock
{
	margin-bottom: 5px;
}

.chatBox .flagIcon
{
	width: 24px;
	height: 24px;
}

.chatBox .msgUsername
{
	font-weight: bold;
	padding-left: 50px;
}

.chatBox .msgTime
{
	color: gray;
	font-size: 75%;
	font-weight: 500;
	position: absolute;
	width: 50px;
	margin-top: 4px;
	overflow: hidden;
}

.chatBox .msgText
{
	padding-left: 50px;
	word-wrap: break-word;
	min-height: 15px;
}

.btn-customlink
{
	border: 1px solid transparent;
}

.newEmoji
{
	cursor: pointer;
}

.fieldRemove
{
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;
	height: 14px;
	margin: auto;
	font-size: 14px;
	cursor: pointer;
	color: #e16161;
}

.sub-title
{
	font-size: 1.1rem;
	font-weight: 400;
}

.fakeInput
{
	background-color: #414D59;
	border: 1px solid #495561;
	color: white;
}

kbd
{
	color: #000000;
	background-color: #d1d9df;
	user-select: none;
}

.capacityBar
{
	height: 30px;
}

.capacityBar > div
{
	background-color: #3aa8d4;
}

.layerPreviewContent .btn
{
	line-height: 2.2em;
}

.layerPreviewImg
{
	position: relative;
}

.rankGM
{
	font-weight: bold;
	color: #FF66FF;
}

.blocked
{
	text-decoration: line-through;
}

.rankRO
{
	font-weight: bold;
	color: #FDA561;
}

.rankLM
{
	font-weight: bold;
	color: #5EA5E8;
}

.rankFM
{
	font-weight: bold;
	color: #79FBEE;
}

.rankRM
{
	font-weight: bold;
	color: #5CE063;
}

.rankTU
{
	font-weight: bold;
	color: #FFE3CC;
}

.rankRU, .rankUU
{
	color: #FFE3CC;
}

.sidebarBlock
{
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	z-index: 10;
	opacity: 0.7;
	
	transition: all 1s ease;
}

.previewThumb
{
	padding: 0px !important;
	overflow: hidden;
}

.userlistIcon
{
	margin-right: 2px;
	float: left;
}

.helpButton
{
	cursor: help;
}

.subheader
{
	float: right;
	overflow: hidden;
	margin-bottom: 5px;
	text-align: right;
}

.subheader label
{
	font-size: 90%;
	margin-right: 10px;
}

.transparentBg
{
	background-color: #EEEEEE;
	background-image: linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC), linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC);
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
}

#chatMessages a
{
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

#chatMessages a:hover
{
	text-decoration: underline;
}

#dropArea
{
	font-size: 200%;
	text-align: center;
	border: 3px solid transparent;
	transition: all 0.5s;
}

#dropArea:before
{
	content: "";
	display: block;
	height: 40%;
	overflow: visible;
}

#tabletMenu
{
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	z-index:  99998;
	background-color: #697277;
	overflow: hidden;
	border: 2px solid #24326c;
	user-select: none;
	display: none;
}

#tabletMenu a
{
	cursor: crosshair;
}

.dialogContentArea.os-host:not(.os-host-scrollbar-vertical-hidden)
{
	padding-right: 0.9rem !important;
}

.cursor:not(.myself) > .uploadCanvasPreview
{
	border: 2px dashed #777777;
	margin: 4px;
	opacity: 0.8;
	text-align: center;
	color: #777777;
	overflow: hidden;
	font-size: 10px;
}

.uploadCanvasPreview:before
{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.cursor.myself > .uploadCanvasPreview
{
	display: none;
}

.cursor.uploading > .pointer
{
	display: none !important;
}

.cursor.uploading > .pointerLabel
{
	display: none !important;
}

.shortMenu
{
	text-align: center !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#loadingContainer .fa,
#loadingContainer .fas,
#loadingContainer .far,
#loadingContainer .svg-inline--fa,
.dialogLoader .fa,
.dialogLoader .fas,
.dialogLoader .far,
.dialogLoader .svg-inline--fa
{
	margin: 0 auto;
	display: block;
}

.noPixelSmoothing
{
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

#colorWheelBox
{
	position: relative;
	height: 100%;
}

.colorWheelComponent .colorSwitch
{
	position: absolute;
	top: 5px;
	left: 5px;
}

.colorWheelComponent .colorSwitch:hover
{
	cursor: pointer;
	opacity: 0.8;
}

#colorWheelBox .optionTitle
{
	text-align: right;
	padding-right: 10px;
}

.newColorWheel .fmWheel
{
	margin: auto !important;
}

.form-group
{
	margin-bottom: 0.5rem;
}

.transparentBG
{
	background-color: #EEEEEE;
	background-image: linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC), linear-gradient(45deg, #CCCCCC 25%, transparent 25%, transparent 75%, #CCCCCC 75%, #CCCCCC);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
}

.designerTools .btn
{
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 0px;
}

.designerTools .btn:hover
{
	border: 1px solid transparent;
}

.brush
{
	border: 5px solid transparent;
	overflow: hiddden;
}

.brush.selected
{
	border: 5px solid transparent;
}

.sidebarOptions a
{
	padding: 2px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 0.7rem;
}

.sidebarOptions p
{
	font-size: 0.8rem;
	text-align: center;
	clear: both;
}

iframe
{
	border: 0;
}

.topWarning
{
	position: absolute;
	top: 50px;
	left: 10px;
	z-index: 9999;
}

.leftSidebar .topWarning
{
	left: unset;
	right: 10px;
}

.bottomWarning
{
	position: absolute;
	bottom: 50px;
	left: 10px;
	z-index: 9999;
}

.leftSidebar .bottomWarning
{
	left: unset;
	right: 10px;
}

.warningItem
{
	padding: 10px;
	border-radius: 4px;
	color: white;
	font-size: 0.8rem;
	background-color: rgba(0, 0, 0, 0.4);
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.inlineLink
{
	text-decoration: underline;
}

.inlineLink:hover
{
	text-decoration: none;
}

.reverseInlineLink
{
	text-decoration: none;
}

.reverseInlineLink:hover
{
	text-decoration: underline;
}

.designerPointer
{
	border: 1px solid gray;
	transform: translate(-50%, -50%) translateZ(0);
	border-radius: 50%;
	z-index: 1000;
}

.scrollNotBottom:not(.scrollNoOverflow)::after
{
	pointer-events: none;
	content: " ";
	height: 100px;
	bottom: 0px;
	width: 100%;
	display: inline-block;
	position: absolute;
}

.dialog .scrollNotBottom:not(.scrollNoOverflow)::after
{
	height: 100px;
}

.containerSidebar .scrollNotBottom:not(.scrollNoOverflow)::after
{
	height: 40px;
}

.animationPreviewFrame
{
	min-width: 100%;
}

fieldset
{
	padding: 0px 15px 10px 15px;
	border: 2px solid transparent;
	border-radius: 5px;
	margin-top: 10px;
}

legend
{
	font-size: 0.9rem;
	width: auto;
	padding: 0px 5px;
	text-align: left;
	margin: 0;
	position: relative;
	top: -11px;
}

#animationBox
{
	font-size: 0.8rem;
}

.animationTable td.selected
{
	border-radius: 5px;
	background-color: white;
}

#animationBox .btn
{
	padding: 2px 10px;
}

.offlineMessage
{
	padding: 10px 5px;
}

.offlineOwn
{
	text-align: right;
}

.offlineOwn .offlineTime
{
	float: left;
}

.offlineMsg
{
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 10px;
	margin-left: 0px;
	margin-right: 40px;
	margin-bottom: 5px;
	overflow: auto;
	word-break: break-word;
}

.offlineOwn .offlineMsg
{
	background-color: rgba(0, 0, 0, 0.1);
	margin-left: 40px;
	margin-right: 0px;
}

.offlineTime
{
	font-size: 0.6rem;
	color: gray;
	padding: 5px;
	float:right;
}

.offlineOwn .offlineDelete
{
	float: left;
}

.offlineDelete
{
	float: right;
	margin-top: 4px;
	margin-right: 0px;
}

.offlineOwn .offlineDelete
{
	margin-right: 4px;
	margin-left: 0px;
}

.commentSidebar .offlineAuthor
{
	padding: 2px 5px;
}

.commentSidebar .offlineAuthor:hover
{
	text-decoration: underline;
	cursor: pointer;
}

/* Messenger */

.messengerUser
{
	overflow: hidden;
	cursor: pointer;
	margin-top: 5px;
	border-left: 12px solid transparent;
	padding: .50rem .75rem;
	float: left;
	width: 100%;
	text-overflow: ellipsis;
}

.messengerSideBar
{
	overflow: auto;
}

#messengerConversation a
{
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

#messengerConversation a:hover
{
	text-decoration: underline;
}

.messengerBadges
{
	float: right;
}

#conversationTitle
{
	padding-bottom: 5px;
	border-bottom: 1px solid gray;
	font-weight: 400;
}

.chatEmoji
{
	font-size: 150%;
}

.chatTag
{
	cursor: auto;
}

.chatTagYou
{
	font-weight: 500;
}

.textLabel
{
	font-family: "Rubik", sans-serif;
	font-weight: 400;
	font-size: .75rem;
	line-height: .75rem;
	letter-spacing: 0.03rem;
	border: 2px solid transparent;
	border-radius: 0.35rem;
	padding: .75rem 1rem;
}

#galleryPages
{
	padding-top: 10px;
	float: right;
}

#profileGallery
{
	border: 1px solid transparent;
	border-radius: 4px;
}

#profileGallery img
{
	outline: 2px solid gray;
	margin: 6px;
	display: inline-block;
	cursor: pointer;
}

.galleryImageContainer
{
	position: relative;
	display: inline-block;
}

.galleryImageOverlay
{
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(89, 85, 113, 0.8);
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	text-align: right;
	pointer-events: none;
	max-width: calc(100% - 20px);
}

.overlayItem
{
	display: inline-block;
	margin-left: 5px;
}

.overlayItem:first-child
{
	margin-left: 0;
}

.overlayItem i
{
	margin-right: 2px;
}

.commentArea .offlineMessage
{
	padding: 5px;
}

.commentArea .offlineMsg
{
	margin-right: 5px;
}

.commentArea .offlineDelete
{
	margin-left: 4px;
	margin-top: 0px;
}

.commentArea .noComments
{
	font-size: 85%;
	padding: 10px;
}

.imageTags .badge
{
	margin: 2px;
}

#imageOwner:hover .ownerUsername,
.clickableGalleryTag:hover
{
	cursor: pointer;
	opacity: 0.7;
}

.leftSide
{
	float: left;
	width: 200px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.rightSide
{
	float: right;
	height: 100%;
	width: calc(100% - 200px);
}

.withoutSidebar .leftSide
{
	display: none;
}

.withoutSidebar .rightSide
{
	width: 100% !important;
}

.noTextButton span
{
	display: none;
}

.withoutComments .commentSidebar
{
	display: none;
}

.withoutComments .imageMainArea
{
	width: 100% !important;
}

.imageMainArea
{
	width: 70%;
	height: 100%;
	padding: 0px;
}

.commentSidebar
{
	width: 30%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.05);
	padding: 0px 5px;
}

.selectableText
{
	user-select: text !important;
}

.fontIncrease,
.fontDecrease
{
	opacity: 0.6;
	padding: 0px 2px;
}

.fontIncrease:hover,
.fontDecrease:hover
{
	opacity: 1;
}

.prohibitedShortcut
{
	color: #f03f3f !important;
}

.prohibitedShortcut kbd
{
	background-color: #f03f3f !important;
	color: white !important;
}

::-webkit-scrollbar
{
	height: 8px;
	width: 8px;
}

.currentlyUndoing 
{
	margin-bottom: 5px;
	font-size: 80%;
	font-style: italic;
}

.selectedLayerOption.disabled
{
	color: gray;
}

.badgeAdultsRoom
{
	background-color: #ea6a6a;
}

#profileGallery .noImages
{
	padding: 20px;
	font-size: 150%;
}

.gallerySidebar
{
	text-align: center;
	font-size: 125%;
}

#imagePreviewContainer
{
	position: absolute;
	bottom: 65px;
	margin-left: 50px;
	height: 150px;
	width: auto;
}

#imagePreviewContainer button
{
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: red;
	color: white;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

#imagePreviewContainer button:hover
{
	opacity: 0.7;
}

#imagePreviewContainer .chatImagePreview,
#imagePreviewContainer .chatImagePreview img
{
	width: 100%;
	height: 100%;
}

#imagePreviewContainer .chatImagePreview
{
	border: 1px solid #777777;
	background-color: rgba(0, 0, 0, 0.25);
}

.chatDataUri
{
	max-width: 200px;
	max-height: 200px;
	border: 1px solid #ccc;
}

.chatDataUri:hover
{
	cursor: pointer;
	opacity: 0.8;
}

#undoBox
{
	overflow: hidden;
}

#undoContent .toolbar .active
{
	background-color: red;
}

#previewDiv .toolbar .active
{
	background-color: red;
}