* {
	margin: 0;
	padding: 0;
}

textarea { resize: none }
input:focus, textarea:focus {
	outline: none;
}
input:invalid {
    box-shadow: none;
}

img, [ctrl=button], [ctrl=dropdown], [ctrl=upload], [ctrl=progress] {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html { height: 100%; }
html.rtl {
	direction: rtl;
}

html, body {
	box-sizing: border-box;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}


/**************************************************************
	SVG
**************************************************************/

.svg_wrapper {
	position: relative;
	display: inline-block;
}
svg {
	width: 100%;
	height: 100%;
}
.svg_defs { display: none; }



/**************************************************************
	Useful classes
**************************************************************/

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

.full_size.fixed { position: fixed; }

.one_line, .one_line_tooltip {
	overflow: hidden;
	text-overflow: ellipsis;
}
@media screen and (min-width: 800px) {
.one_line, .one_line_tooltip {
	white-space: nowrap;
}
}

.invisible { visibility: hidden; }
.rotate_180:not(.svg_wrapper), .svg_wrapper.rotate_180 svg,
.rotate_180_ltr, .rtl .rotate_180_rtl { transform: rotate(180deg); }
.rtl .rotate_180_ltr { transform: rotate(0); }

body:not(.mobile_device) .on_mobile { display: none; }
body.mobile_device .on_non_mobile { display: none; }

.circular { border-radius: 50%; }

.including_float {
	overflow: hidden;
}


/**************************************************************
	Centerer
**************************************************************/

.horizontal_centerer { text-align: center; }
.horizontal_centerer > div { display: inline-block; }
.horizontal_centerer > img { max-width: 100%; }

.vertical_centerer::before {
    display: inline-block;
    visibility: hidden;
    width: 0;
    height: 100%;
    content: " ";
    vertical-align: middle;
}
.vertical_centerer>* {
	vertical-align: middle;
}
.vertical_centerer>img { max-height: 100%; }


/**************************************************************
	UI Controls
**************************************************************/

/* Buttons */

[ctrl=button] {
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}
[ctrl=button][data-svg] {
	display: inline-block;
}

/* Radio Buttons / Checkboxes */

.cb_radio_ctrl {
	cursor: pointer;
}
.cb_radio_ctrl > * { vertical-align: middle; }
.cb_radio_ctrl .svg_wrapper {
	box-sizing: border-box;
	display: inline-block;
}
/*.cb_radio_ctrl svg {
	stroke: #000;
	fill: #000;
}*/

/* Slider */

[ctrl=slider] {
	position: relative;
	height: 18px;
	cursor: pointer;
}
.ui_slider_frame {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: 116px;
	border: 1px solid #57c7d9;
	border-radius: 9px;
}
.ui_slider {
	position: absolute;
	top: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
}

/* Progress Bar */

[ctrl=progress] {
	position: relative;
}

.progress_text, .progress_bar {
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
}

.progress_text {
	text-align: center;
}

/* Textboxes */

[ctrl=textbox] input, [ctrl=textbox] textarea {
	border: none;
	width: 100%;
	height: 100%;
	line-height: 150%;
	text-align: left;
}
.rtl [ctrl=textbox] input, [ctrl=textbox] textarea {
	text-align: right;
}
[ctrl=textbox] input[type=number], [ctrl=textbox] input[type=password], [ctrl=textbox] input[type=email],
[ctrl=textbox] input[type=url], [ctrl=textbox] input[type=tel], [ctrl=textbox] input[type=date] {
	direction: ltr;
	text-align: left;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Dropdowns */

[ctrl=dropdown] .input_container {
	cursor: pointer;
	box-sizing: border-box;
	text-align: left;
}
.rtl [ctrl=dropdown] .input_container {
	text-align: right;
}

/* Upload Buttons */

[ctrl^=upload] {
	position: relative;
	overflow: hidden;
}
[ctrl^=upload] input {
	position: absolute;
	left: 0; width: 100%;
	top: 0; height: 100%;
}
[ctrl^=upload] input {
	opacity: 0;
	font-size: 200px;
	cursor: pointer;
}
[ctrl^=upload] input:disabled {
	cursor: not-allowed;
}

.dragdrop_zone {
	display: none;
}
.dragdrop_zone.active {
	display: block;
	position: fixed;
	right: 10px;
	left: 10px;
	top: 10px;
	bottom: 10px;
	/*height: calc(100% - 20px);*/

	z-index: 200000;
	background: #d9fffe;
	border: 3px dashed #119995;
	font-size: 30px;
	color: #000;
	line-height: 90vh;
	text-align: center;
}


/* Disabled */

[ctrl].disabled, [ctrl] .cb_radio_ctrl.disabled { cursor: default; }


/**************************************************************
	Scrollers
**************************************************************/

[ctrl=kinetic] {
	position: relative;
	overflow: hidden;
}

[ctrl=scrollable] {
	position: relative;
	height: 100%;
}

.scroll_container {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	/* -moz- (Firefox): */
	overflow: -moz-scrollbars-none;
	scrollbar-width: none;
    /* -ms- (Internet Explorer +10): */
    -ms-overflow-style: none;
}
.scroll_container::-webkit-scrollbar {
   /* -webkit- (Chrome, Safari, newer versions of Opera): */
	width: 0 !important
}

.track {
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: -10px;
	z-index: 100000;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.8s ease, width 0.2s ease, left 0.2s ease;
}
.rtl .track {
	right: auto;
	left: -10px;
}
[ctrl=scrollable]:hover .track {
	opacity: 1;
}

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
	.scroll_container {
		overflow: scroll;
	}
	.track {
		display: none;
	}
}


/******/

[ctrl=scroller] {
	position: relative;
	height: 100%;
}
.scrollable {
	position: relative;
	height: 100%;
	overflow: hidden;
}
[ctrl=scroller]:hover .track {
	opacity: 1;
}
.carriage {
	position: absolute;
	left: 0;
	width: 100%;
}


/**************************************************************
	Pages
**************************************************************/

[ctrl=sheet] {
	display: none;
	width: 100%;
	height: calc(100% - 70px);
	overflow-x: hidden;
	white-space: nowrap;
	font-size: 0;
}

[ctrl=sbpg],.sbpg {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	vertical-align: top;
	white-space: normal;
}

[ctrl=sheet].no_overflow .sbpg {
	overflow: hidden;
}


/**************************************************************
	Tooltip
**************************************************************/

#tooltip {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	top: 0;
	left: 100px;
	transition: visibility 0s linear 2.0s, opacity 2.0s ease;
}
#tooltip.fast_drain {
	transition: visibility 0s linear 0.2s, opacity 0.2s ease;
}
#tooltip.shown {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s linear 0s, opacity 0.4s ease;
}


/**************************************************************
	Dialogs
**************************************************************/

.behind_popup { display: none; }

.popup_background, .popup_wrapper {
	display: none;
	position: fixed;
    z-index: 100000;
	top: 0; left: 0; right: 0; bottom: 0;
}

.menu_background, [ctrl=menu], .field_menu {
	display: none;
	z-index: 100000;
}
[ctrl=menu], .field_menu {
	display: none;
	position: fixed;
	border-radius: 8px;
	/* box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.56); */
	box-shadow: 0px -1px 9px 1px #444;
	overflow: hidden;
}

.menu_header {
	height: 24px;
	padding: 10px 0 10px 18px;
	background-color: #363e6b;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
}
.rtl .menu_header { padding: 10px 18px 10px 0; }
.ltr .menu_header span { margin-right: 50px; }
.rtl .menu_header span { margin-left: 50px; }
.menu_header .popup_close { margin: 5px 10px; }

[ctrl=menu] [ctrl=scrollable], [ctrl=menu] [ctrl=scrollable]>.scroll_container {
	background: #c8ceec;
	max-height: calc(100vh - 90px);
}

.centering .menu_line { text-align: center; }


/**************************************************************
	Image Editor
**************************************************************/

.image_editor_circle {
	position: absolute;
	width: 18px;
	height: 18px;
}


@media screen and (min-width: 760px), screen and (min-device-width: 760px) {

body {
	/* max-width: 740px; */
	overflow: auto;
}

}

@media screen and (min-width: 1000px), screen and (min-device-width: 1000px) {

body {
	/* max-width: 980px; */
}

}