* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html *

/* override x.xhtml.ru style */
	{
	scrollbar-width: 12px;
	scrollbar-width: thin;
	scrollbar-color: #2196f3 #eceff1;
}

*::-webkit-scrollbar,
html *::-webkit-scrollbar {
	height: 12px;
	width: 12px;
	scrollbar-width: thin;
}

*::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	background: #eceff1;
}

*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	background-color: #2196f3;
	border-radius: 5px;
	border: 3px solid #eceff1;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	font-family: "Roboto Condensed";
	background-color: #eceff1;
	-webkit-tap-highlight-color: transparent !important;
	font-size: 16px;
	color: #424242;
	line-height: 1.2;
}

/*#app { padding-top: 100px; }*/

a {
	color: inherit;
}

button,
input[type="button"] {
	outline: none;
	cursor: pointer;
	color: #555;
}

.hide {
	display: none !important;
}

.notices {
	z-index: 100002 !important;
}

.errorMessage {
	width: 100%;
	position: fixed;
	padding: 16px;
	text-align: center;
	top: -1px;
	z-index: 100001;
	background: #ff7373;
	color: #fff;
	cursor: pointer;
	-moz-animation: cssAnimation 1s ease-in 10s forwards;
	-webkit-animation: cssAnimation 1s ease-in 10s forwards;
	-o-animation: cssAnimation 1s ease-in 10s forwards;
	animation: cssAnimation 1s ease-in 10s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.successMessage {
	width: 100%;
	position: fixed;
	padding: 16px;
	text-align: center;
	top: -1px;
	z-index: 100001;
	background: #1a8abf;
	color: #fff;
	cursor: pointer;
	-moz-animation: cssAnimation 1s ease-in 10s forwards;
	-webkit-animation: cssAnimation 1s ease-in 10s forwards;
	-o-animation: cssAnimation 1s ease-in 10s forwards;
	animation: cssAnimation 1s ease-in 10s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.version {
	position: absolute;
	right: 10px;
	font-size: 12px;
	color: #aaa;
	line-height: 1;
	font-weight: 300;
	width: 110px;
	text-align: right;
}

.version>span {
	position: relative;
	top: 15px;
}

@media all and (max-width: 940px) {
	.version {
		display: none;
	}
}

.wrap-loading {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 9999;
}

.wrap-loading>div,
.spinner {
	text-align: center;
	top: calc(50% - 50px);
	position: relative;
	width: 200px;
	height: 100px;
	margin: 0 auto;
	color: #fff;
}

.spinner {
	height: 180px;
}

.spinner svg {
	margin-top: 60px;
}

body {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-touch-callout: none;
	-ms-touch-action: none;
	touch-action: none;
}

input,
.sel-text {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	-khtml-user-select: text;
	-webkit-touch-callout: text;
	-ms-touch-action: text;
	touch-action: text;
}

/*img { image-rendering: -webkit-optimize-contrast; }*/

.span-link {
	cursor: pointer;
	border-bottom: 1px dashed;
}

.svg-link {
	cursor: pointer;
	margin-left: 4px;
	position: relative;
	top: 1px;
}

.svg-link svg {
	fill: #424242;
}

.custom-colors>.bc {
	margin-right: 3px !important;
}

.arrow-search {
	margin: 0 20px 0 6px;
	width: 30px;
	height: 30px;
	display: inline-block;
	top: 0;
	position: relative;
	cursor: pointer;
}

.nd[data-type="text"] *::selection,
[contenteditable]::selection {
	background-color: #596d0a61 !important;
}

.wrap-loading g,
.spinner g {
	animation: rotate 1.4s linear infinite;
	transform-origin: center;
}

.wrap-loading circle,
.spinner circle {
	animation: spin 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
	fill: none;
	stroke: #2196f3;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	stroke-linecap: square;
	stroke-width: 4;
	transform-origin: center;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(270deg);
	}
}

@keyframes spin {
	0% {
		stroke-dashoffset: 100;
	}

	50% {
		stroke-dashoffset: 20;
		transform: rotate(135deg);
	}

	100% {
		stroke-dashoffset: 100;
		transform: rotate(450deg);
	}
}

@keyframes colors {
	0% {
		stroke: #4285f4;
	}

	25% {
		stroke: #de3e35;
	}

	50% {
		stroke: #f7c223;
	}

	75% {
		stroke: #1b9a59;
	}

	100% {
		stroke: #4285f4;
	}
}

.box-context-menu .ctx-menu-container {
	box-shadow: none;
	border: none;
	background-color: #fff;
}

.box-context-menu .ctx-menu {
	padding: 0;
	border: 1px solid #999;
	border-radius: 0;
	box-shadow: none;
	min-width: 200px;
}

.box-context-menu .ctx-menu li {
	padding: 5px 10px;
	cursor: pointer;
}

/*
.box-context-menu .ctx-menu li:first-child {
	padding-top: 10px;
}

.box-context-menu .ctx-menu li:last-child {
	padding-bottom: 10px;
}
*/

.box-context-menu .ctx-menu li:hover {
	background-color: #bdbdbd;
}

/*
header {
    min-height: 40px;
    width: 100%;
    background: #ddd;
    position: fixed;
    z-index: 10000;
}
header nav {padding: 6px 10px;}*/

#topmenu {
	padding: 0px;
	background: #fff;
	top: 0;
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	min-height: 42px;
	z-index: 100000;
}

#topmenu .logo {
	position: relative;
	left: 20px;
	top: 5px;
	float: left;
	margin-right: 20px;
	width: 34px;
	height: 34px;
	cursor: pointer;
}

#topmenu nav {
	float: left;
	width: calc(100% - 60px);
	text-align: center;
	/*border: 1px solid red;*/
}

#topmenu nav>ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	position: relative;
	top: 0;
}

#topmenu nav>ul>li {
	display: inline-block;
	margin: 10px 30px 0 0;
	line-height: 1;
	font-size: 12px;
	letter-spacing: 1px;
	min-height: 28px;
	padding: 0;
}

#topmenu nav>ul>li .search {
	margin-top: 4px;
}

#topmenu nav>ul>li .star {
	font-size: 16px;
	line-height: 1;
	position: relative;
	top: 2px;
}

#topmenu nav>ul>li .star>.mdi {
	font-size: 20px;
	line-height: 1;
	color: #ffc02b;
}

#topmenu nav>ul>li .star>.text-link {
	margin-left: 4px;
}

#topmenu>ul>li:hover {
	cursor: pointer;
}

#topmenu nav>ul>li svg {
	position: absolute;
	margin-left: -20px;
	margin-top: -4px;
}

.icon>a {
	text-decoration: none;
}

.icon>a>.mdi {
	font-size: 20px;
	position: relative;
	top: 4px;
	color: #555;
	line-height: 0.3;
}

.icon a:hover>i,
.icon a:hover>span,
.link:hover>span {
	fill: #0288d1;
	color: #0288d1;
}

#pagesize {
	border-bottom: 1px dashed;
	cursor: pointer;
}

#topmenu>ul>li.dropdown {
	padding: 0;
	margin-bottom: -3px;
}

#topmenu li {
	cursor: pointer;
}

.saved-btn span {
	color: #aaa;
	cursor: no-drop;
}

.saved-btn span.active {
	color: inherit;
	cursor: pointer;
}

.markup {
	z-index: 10000;
}

.boxinfo {
	position: fixed;
	width: 200px;
	padding: 10px;
	top: 60px;
	right: 20px;
	background: #000;
	color: #13cc22;
}

.dropdown-menu {
	z-index: 1;
	position: absolute;
	display: none;
	padding: 10px 0 0 0;
	overflow: hidden;
	background: #fff;
	text-align: left;
	margin-top: 14px;
	margin-left: 0;
	border: 1px solid #e0e0e0;
	border-top: 0;
	min-width: 140px;
}

.dropdown.opened .dropdown-menu {
	display: block;
}

.dropdown-menu li {
	list-style: none;
	margin-bottom: 10px;
	padding: 0 10px;
	cursor: pointer;
}

.dropdown-menu.rows li {
	padding: 10px;
	margin-bottom: 0px;
}

.dropdown-menu.rows li:hover {
	background: #ebebeb;
}

.setka {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	opacity: 0.4;
}

/*
li.dropdown:hover .preview-disabled+.dropdown-menu,
li.dropdown:hover .preview-enabled+.dropdown-menu {
    display: block;
}
*/
.icon-copy-color {
	position: relative;
	top: 5px;
	cursor: pointer;
}

.arrow {
	font-size: 9px;
	position: relative;
	top: -1px;
	color: #555;
}

.form label.radio,
.form label.checkbox {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	color: #222;
}

.form input[type="radio"],
.form input[type="checkbox"] {
	display: none;
}

.form label:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #eceff1;
	box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
		0px 1px 0px 0px rgba(255, 255, 255, 0.8);
}

.form label.radio:before {
	border-radius: 8px;
}

.form label.checkbox:before {
	border-radius: 3px;
}

.form input[type="radio"]:checked+label.radio:before {
	content: "\25CF" !important;
	color: #616161;
	font-size: 13px;
	text-align: center;
	line-height: 14px;
	padding-left: 0.5px;
}

.form input[type="radio"]:disabled+label.radio {
	opacity: 0.7;
}

input[type="checkbox"]:checked+label.checkbox:before {
	content: "\2714" !important;
	/*25A0 fs12 ln14 0.5*/
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	font-size: 16px;
	color: #616161;
	text-align: center;
	line-height: 16px;
}

.hidden {
	display: none;
}

#edit,
#main {
	position: relative;
}

#edit {
	min-height: 100vh;
	padding-bottom: 20px;
}

#main {
	padding-top: 60px;
}

#left-menu {
	position: fixed;
	left: 10px;
	top: 70px;
	z-index: 3000;
	display: block;
	background-color: #fff;
	padding: 0 10px;
	border: 1px solid #e0e0e0;
	min-height: 365px;
	text-align: center;
	transform-origin: left center;
}

#left-menu ul {
	padding: 0;
	list-style: none;
}

.small {
	font-size: 12px;
}

#left-menu .small {
	text-align: center;
	margin-top: 10px;
}

#left-menu>ul.zoom {
	margin-left: 4px;
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid #ddd;
}

@media all and (max-height: 800px) {
	#left-menu {
		top: -5px;
		transform: scale(0.8);
	}
}

@media all and (max-height: 600px) {
	#left-menu {
		top: -40px;
		transform: scale(0.7);
	}
}

@media all and (max-height: 400px) {
	#left-menu {
		top: -80px;
		transform: scale(0.6);
	}
}

.btn-settings {
	display: block;
	position: absolute;
	top: -31px;
	left: 0px;
	width: 26px;
	height: 26px;
	padding: 6px;
	border-radius: 50%;
	background-color: #3986bd;
	/* #0288d1;*/
	/*border: 1px solid #fff;*/
	transform: scale(-1, 1);
}

.btn-settings:hover {
	background-color: #3377a7;
}

.btn-settings svg {
	width: 100%;
	position: relative;
}

.wrap-page {
	padding-top: 20px;
	padding-bottom: 10px;
}

.box-set-page {
	position: absolute;
	padding: 0;
	width: 380px;
	margin: 0 auto;
	left: 0;
	right: 0;
}

.box-set-page button {
	margin: 0 !important;
	min-height: 33px;
}

.btn-zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	cursor: default;
	padding: 4px;
	font-size: 14px;
	border-radius: 50%;
}

.btn-zoom>span {
	position: relative;
}

.btn-zoom:nth-child(1)>span {
	top: 1px;
	left: -1px;
}

.btn-zoom:nth-child(2)>span {
	top: 0px;
}

.btn-zoom:nth-child(3)>span {
	top: -4px;
}

.btn-zoom:nth-child(4)>span {
	top: 2px;
	left: -2px;
}

.btn-zoom:hover {
	background: #eee;
}

.btn-zoom svg>g {
	fill: #ccc;
}

.btn-zoom.active svg>g {
	fill: #555;
}

.btn-zoom.inactive svg>g {
	fill: #ccc !important;
}

.btn-zoom.active {
	cursor: pointer;
}

.btn-zoom.inactive {
	cursor: default;
}

.bt-new-box {
	margin-bottom: 20px;
	cursor: pointer;
}

.bt-new-box div,
.btn-zoom div {
	padding: 10px;
	position: absolute;
	left: 70px;
	min-width: 120px;
	border: 1px solid #e0e0e0;
	color: #0288d1;
	background: #fff;
	font-size: 14px;
	display: none;
}

.bt-new-box.active .gg{
	stroke:#0288d1;
}
.bt-new-box.active .ff{
	fill:#0288d1;
}

.bt-new-box.active .title{
	color:#0288d1;
}

.bt-new-box:hover div,
.btn-zoom:hover div {
	display: inline-block;
}

#btn-undo {
	cursor: pointer;
}

#btn-redo {
	cursor: pointer;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#btn-undo.disabled,
#btn-redo.disabled {
	cursor: default;
}

#btn-undo.disabled g,
#btn-redo.disabled g {
	fill: #ccc;
}

.undo-redo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	cursor: default;
	padding: 4px;
	font-size: 14px;
}

.undo-redo .desc {
	padding: 10px;
	position: absolute;
	left: 70px;
	min-width: 120px;
	border: 1px solid #e0e0e0;
	color: #0288d1;
	background: #fff;
	font-size: 14px;
	display: none;
}

.undo-redo .cell:hover .desc {
	display: inline-block;
}

.undo-redo .cell:hover svg>g {
	fill: #0288d1;
}

#topmenu nav>ul>li.btn-zoom-top svg {
	position: relative;
	top: 0;
	margin-top: 0;
	margin-left: 0;
}

#topmenu nav>ul>li.btn-zoom-top {
	margin: 0px 15px 0px 0;
}

#topmenu nav>ul>li.btn-zoom-top.last {
	margin-right: 30px !important;
}

.bt-new-box:hover svg .gg {
	stroke: #0288d1;
}

.bt-new-box:hover svg .ff {
	fill: #0288d1;
}

.bt-new-box .title {
	display: block;
	font-size: 10px;
}

.box-btn-new-page {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px 0;
}

.box-btn-new-page>button {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 240px;
	z-index: 9999;
	margin-top: -16px;
}

.move-page {
	display: block;
	z-index: 1;
	width: 24px;
	padding: 0;
	color: #fff;
	position: absolute;
	right: 10px;
	margin-top: 50px;
}

.move-page>button {
	border: 1px solid #ccc;
	outline: none;
	padding: 4px 8px;
	cursor: pointer;
	min-height: 32px;
}

.set-btn>button {
	background-color: #eceff1;
}

.move-page-top>button {
	border: 1px solid #ccc;
	background-color: #eceff1;
	outline: none;
	padding: 4px 8px;
	cursor: pointer;
}

.move-page-top>button>svg {
	position: relative;
	top: 2px;
}

.box-set-page button.uk-button,
.box-btn-new-page button.uk-button,
.move-page-top>button {
	background: #fff;
}

.btn.disable {
	color: #999;
	pointer-events: none;
}

.set-btn,
.move-page-top {
	float: left;
}

.set-btn {
	width: 55%;
}

.move-page-top {
	width: 45%;
}

.set-btn {
	text-align: right;
}

.set-btn .uk-button {
	padding: 8px 20px !important;
}

.page-icon {
	width: 16px;
}

.arr-up {
	transform: rotate(-90deg);
	width: 15px;
}

.arr-down {
	transform: rotate(90deg);
	width: 15px;
}

.move-page button:hover svg.page-icon * {
	stroke: #199ec7;
}

.move-page button:hover .arr-up *,
.move-page button:hover .arr-down * {
	fill: #199ec7;
}

.rul_ruler_Vertical {
	display: none !important;
}

.move-page-top .btn-arr {
	position: relative;
	top: -1px;
}

.art {
	background: #fff;
	position: relative;
	margin: 0 auto;
	top: 0;
	bottom: 0;
	margin-top: 50px;
	overflow: hidden;
}

.art.active {
	box-shadow: 0px 0px 2px 0px #000;
}

.no_save::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #ef5350;
	position: absolute;
	margin-top: -1px;
	margin-left: 1px;
}

.nd {
	position: absolute;
	width: 300px;
	height: 300px;
	cursor: default;
}

.nd:hover,
.nd[data-type="text"] .ibox:hover,
.nd[data-type="table"] .itab:hover {
	outline: 1px solid red;
}

.nd[data-type="image"]:hover {
	outline: none;
}

.nd[data-type="image"]:hover {
	outline: 1px solid red;
}

.nd[data-type="figure"] {
	overflow: visible;
}

/*
.nd.drag>div {
    filter: none !important;
}*/

.nd[data-type="line"] {
	height: auto;
}

.nd[data-type="text"] {
	text-align: left;
	height: auto;
	word-wrap: break-word;
	line-height: 1.2;
	letter-spacing: 0px;
	border: 0;
	outline: 0;
	font-family: "Montserrat";
	min-height: 20px !important;
	height: auto;
	white-space: pre-line;
}

.nd.active>div.texteditor {
	cursor: default;
}

.nd[data-type="text"] .ibox {
	min-height: 20px;
}

.nd[data-type="table"] .ibox {
	min-width: 150px;
}

.nd[data-type="icon"] a {
	-webkit-text-stroke: inherit;
	text-shadow: inherit;
}

.nd .ibox,
.nd .ibox div {
	z-index: 1;
	outline: none;
	width: 100%;
	height: 100%;
	position: relative;
}

@-moz-document url-prefix() {
	#edit .ProseMirror {
		white-space: pre-wrap !important;
	}

	#edit .nd[data-type="text"] {
		white-space: pre-wrap !important;
	}
}

.nd p {
	-webkit-padding-before: 0px;
	margin-inline-end: 2px !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.nd p:empty {
	min-height: 19px;
}

.nd[data-type="image"]>div:first-child {
	width: 100%;
	height: 100%;
}

.nd[data-type="fon"]>.ibox {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.nd[data-type="fon"]>.ibox,
.nd[data-type="fon_color"]>.ibox,
.nd[data-type="fon_image"]>.ibox,
.nd[data-type="line"]>.ibox {
	background-color: #0277bd;
}

.ibox a {
	-webkit-text-stroke: inherit;
}

/*
.nd[data-type="text"]>.ibox {
    padding-right: 4px;
}
*/

.nd img {
	width: 100%;
	height: auto;
	position: absolute;
}

svg {
	overflow: visible;
}

.nd svg * {
	vector-effect: non-scaling-stroke;
}

/*
.st0 {
    fill: none;
    stroke: #757575;
    stroke-miterlimit: 10;
}

.st1 {
    fill: none;
    stroke: #757575;
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}
*/

[contenteditable] {
	-webkit-user-select: auto;
	user-select: text;
	z-index: 2;
}

.texteditor[contenteditable="true"]:hover,
.texteditor[contenteditable="true"]:focus,
.tedit.active,
.tedit.active:focus {
	outline: 1px solid rgba(25, 158, 199, 1) !important;
}

/* -----------for safary ------- */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	[contenteditable="true"]:focus {
		outline: none;
	}
}

/*
.ProseMirror {
    white-space: pre-line;
}
*/

:focus-visible {
	outline: none;
}

.ProseMirror-trailingBreak {
	display: inline-block;
	content: "";
	height: 15px;
	background-color: transparent;
}

.ProseMirror-selectednode {
	outline: 2px solid #0277bd;
}

.infobox {
	position: fixed;
	top: 100px;
	right: 10px;
	width: 100px;
}

/*
.nd[data-type="fon"].active > .ibox,
.nd[data-type="fon_color"].active > .ibox,
.nd[data-type="line"].active > .ibox,
.nd[data-type="table"] > .html-table,
.nd[data-type="text"].active > .ibox,
.nd.active img{
	outline: 1px solid lightskyblue;
}*/

.bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.table_test,
.itab {
	border: 1px solid #777;
	border-collapse: collapse;
	font-family: "Montserrat";
	font-size: 16px;
	color: #424242;
	width: 100%;
	position: relative;
	z-index: 1;
	border-spacing: 0;
	line-height: 1.2;
}

.text-link {
	text-decoration: underline;
	cursor: pointer;
	color: #0288d1;
}

.text-link-icon>span:first-child {
	text-decoration: underline;
	cursor: pointer;
}

.text-link-icon:hover {
	color: #0288d1;
}

.text-link-icon>span.mdi{
	font-size: 22px; position: absolute; top: -4px; margin-left: 6px;
}

.mdi.uk-link{
	font-size: 24px;
	cursor: pointer;
}
.mdi.uk-link:hover{
	color:#0288d1;
}
.uk-divider{
	border-top: 1px solid #ccc;
	margin-top: -5px;
	margin-bottom: 10px;
	height: 1px;
	width: 100%;
	position: relative;
}
.mdi-stop-circle, .mdi-stop-circle.uk-link:hover{
	color:red;
}



/* ======================== MDI ===========================  */

.mdi-icons-box {
	position: relative;
}

.mdi-icons-box .fixed-header {
	position: relative;
	top: 0;
}

.mdi-icons-box .content {
	text-align: center;
	overflow-y: scroll;
	height: 360px;
}

.mdi-icons-box .row {
	margin: 10px 0;
	padding: 0 10px;
}

.mdi-icons-box .icons {
	margin: 0;
}

.mdi-icons-box .row label {
	font-size: 12px;
	display: block;
	margin-bottom: 4px;
}

.mdi-icons-box .row input[type="text"] {
	width: 100%;
}

.mdi-icons-box .row.icons>div {
	float: left;
	width: 20%;
	text-align: center;
	vertical-align: middle;
}

.mdi-icons-box .row.icons i {
	cursor: pointer;
	font-size: 24px;
	line-height: 1.8;
}

.mdi-icons-box .row.icons i:hover {
	color: #0277bd;
}

/*
.itab{
    table-layout: fixed;
}*/

/*
.nd[data-type="table"] {
    height: auto;
}*/

.table_test tr,
.itab tr {
	vertical-align: top;
}

.table_test td p,
.itab td p {
	margin: 0;
	padding: 0;
}

.table_test thead td,
.itab thead td {
	background-color: #e7e7e7;
	font-weight: bold;
	text-align: center;
}

.tableEditor td {
	word-break: break-all;
}

.table_test td,
.itab td {
	padding: 6px;
	margin: 0;
	border: 1px solid #777;
	/*word-wrap: break-word;*/
	vertical-align: middle;
	border-collapse: collapse;
	outline: none;
	/*line-height: 1;*/
	height: 30px;
	/*word-break: break-all;*/
	word-wrap: break-word;
	word-break: break-word;
}

.itab tr {
	min-height: 40px;
}

.itab td>div {
	position: relative;
	width: 100%;
	z-index: 2;
	outline: none;
}

.itab td>img {
	position: relative;
	width: 100%;
	height: 100%;
}

.itab td.active {
	outline: 2px solid lightseagreen;
}

.table_test td input,
.itab td input {
	width: 100%;
	margin: 0;
}

.itab tr>td:first-child {
	border-left: none !important;
}

.itab tr>td:last-child {
	border-right: none !important;
}

.itab tr:nth-child(2) td {
	border-top: none !important;
}

.itab tr:last-child td {
	border-bottom: none !important;
}

.nd>.html-table {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.nd.drag {
	/*outline: 1px solid red !important;*/
	filter: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.nd.drag::after {
	content: "";
	background-color: #0278bd20;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	z-index: 1000000;
}

.nd.drag:hover {
	outline: none;
}

.nd[data-type="table"]:hover,
.nd[data-type="table"] .itab.table-editable:hover,
.nd[data-type="table"].drag {
	outline: none !important;
}

.drag>.ibox,
.drag>div:first-child {
	filter: none !important;
	box-shadow: none !important;
}

/*
.nd.drag >.html-table{
  
    */

.nd.drag>.html-table>table:first-child {
	/*background-color: rgba(0, 0, 0, 0.2) !important;*/
	/*filter: blur(3px) !important;*/
	/*padding: 2px;*/
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	/*outline: 1px solid red*/
}

.nd.drag[data-type="table"] table:first-child>tr:first-child>td {
	border-top: 0 !important;
}

/************** table editor **********************/

.marked-cell {
	outline: #04a9e0 solid 2px !important;
	/*background: url(
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAO0lEQVQoU2NkIAIwElJz4sSJ/3gVgRRYWFgwEjQJZBNWRTATYE7BUISuAKdJ6J6Bm4TNBBTr8CkAKQQA/loXYXQ1vGEAAAAASUVORK5CYII=
    )
		repeat;*/
}

.current-cell {
	outline: deepskyblue solid 2px !important;
}

[contenteditable] {
	-webkit-touch-callout: text;
	/* iOS Safari */
	-webkit-user-select: text;
	/* Chrome/Safari/Opera */
	-khtml-user-select: text;
	/* Konqueror */
	-moz-user-select: text;
	/* Firefox */
	-ms-user-select: text;
	/* Internet Explorer/Edge */
	user-select: text;
}

.unselectable {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Chrome/Safari/Opera */
	-khtml-user-select: none;
	/* Konqueror */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently
                           not supported by any browser */
}

.m-r-sm {
	margin-right: 6px;
}

.edit_table {
	width: 100%;
	table-layout: auto;
}

.table-editable {
	table-layout: fixed;
	z-index: 900;
}

/* IMPORTANT! Fits width to content */

.edit_table_wrap {
	display: inline-block;
}

.table-editable td>img,
.itab td>img {
	display: block;
	width: 100%;
	height: auto;
}

.table-editable tr td {
	border-top: 0 !important;
	vertical-align: middle;
	min-width: 50px;
	height: 30px;
}

.table-editable tr td:first-child {
	border-left: 0 !important;
}

.table-editable tr:last-child td {
	border-bottom: 0 !important;
}

.table-editable tr td:last-child {
	border-right: 0 !important;
}

.table-editor-table-container {
	padding-top: 20px;
	position: relative;
}

.table-editor-remove-cell {
	float: right;
}

.table-editor-add-cell {
	float: right;
}

.width-column-resizer {
	position: absolute !important;
	top: 0 !important;
	right: -7px !important;
	height: 12px !important;
	width: 12px !important;
	border-radius: 50%;
	margin-top: -6px !important;
	background-color: blue;
}

.width-column-resizer:hover {
	background-color: lightgray;
	cursor: col-resize;
}

.width-column-resizer-td,
.width-column-resizer-th {
	position: relative;
	border: none !important;
	border-collapse: collapse;
}

.editor-group-btn {
	min-width: 320px;
}

.editor-group-btn .uk-button {
	width: 36px;
	height: 36px;
	float: left;
	padding: 0;
	margin: 0 -1px;
	min-width: 0;
	font-size: 18px;
	line-height: 0;
	background: #f5f5f5;
}

.editor-group-btn .uk-button[disabled] {
	color: #999;
}

.red {
	color: red;
}

/******************* table editor **********************/

hr {
	border: none;
	margin: 4px 0 -1px 0;
	padding-bottom: 4px;
}

/*#bt-view{background-color:#ff2d2d;}*/

.table_test tr:first-child td {
	border-top: none;
}

.table_test tr:last-child td {
	border-bottom: none;
}

.table_test td:first-child {
	border-left: none;
}

.table_test td:last-child {
	border-right: none;
}

.table_test tr:nth-child(1) td {
	width: 200px;
	min-width: 20px;
}

/* ////////////////////////////////////////////// RANGE STYLE ////////////////////////////////////////*/

input[type="range"] {
	-webkit-appearance: none;
	margin: 10px 0;
	width: 100%;
	background: #f5f5f5;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	/*animate: 0.8s;*/
	box-shadow: 0px 0px 0px #000000;
	background: #0288d1;
	border-radius: 0px;
	border: 1px solid #aaa;
}

input[type="range"]::-webkit-slider-thumb {
	box-shadow: 0px 0px 1px #000000;
	border: 1px solid #0288d1;
	height: 16px;
	width: 16px;
	border-radius: 21px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6.5px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #0288d1;
}

input[type="range"]::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	/*animate: 0.2s;*/
	box-shadow: 0px 0px 0px #000000;
	background: #0288d1;
	border-radius: 0px;
	border: 0px solid #fff;
}

input[type="range"]::-moz-range-thumb {
	box-shadow: 0px 0px 1px #000000;
	border: 1px solid #0288d1;
	height: 16px;
	width: 16px;
	border-radius: 21px;
	background: #ffffff;
	cursor: pointer;
}

input[type="range"]::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	/*animate: 0.2s;*/
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type="range"]::-ms-fill-lower {
	background: #0288d1;
	border: 0px solid #000000;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-fill-upper {
	background: #0288d1;
	border: 0px solid #000000;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-thumb {
	box-shadow: 0px 0px 1px #000000;
	border: 1px solid #0288d1;
	height: 16px;
	width: 16px;
	border-radius: 21px;
	background: #ffffff;
	cursor: pointer;
}

input[type="range"]:focus::-ms-fill-lower {
	background: #0288d1;
}

input[type="range"]:focus::-ms-fill-upper {
	background: #0288d1;
}

/* ////////////////////////////////////////////// RANGE STYLE ////////////////////////////////////////*/

.drr {
	position: absolute;
	box-sizing: border-box;
	cursor: default;
}

.drr.dragging .drr-stick {
	display: none;
}

.drr.nd>div:first-child {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.tbox,
.ibox.texteditor {
	z-index: 2;
}

.ibox.texteditor[contenteditable="true"] {
	cursor: auto;
}

.ibox ul,
.ibox ol {
	margin-block-start: 0;
	margin-block-end: 0;
}

.drr-stick {
	box-sizing: border-box;
	position: absolute;
	font-size: 1px;
	background: #d1f4ff;
	border: 1px solid #444;
	border-radius: 50%;
	z-index: 1;
}

.drr.editor .drr-stick,
.drr.editor .btn-settings {
	display: none;
}

.drr-stick:hover {
	border-color: #000;
}

.inactive>.drr-stick {
	display: none;
}

.drr-stick-tl {
	cursor: nw-resize;
}

.drr-stick-tm {
	left: 50%;
	cursor: n-resize;
}

.drr-stick-tr {
	cursor: ne-resize;
}

.drr-stick-bl {
	cursor: sw-resize;
}

.drr-stick-bm {
	left: 50%;
	cursor: s-resize;
}

.drr-stick-br {
	cursor: se-resize;
}

.drr-stick-ml {
	top: 50%;
	cursor: w-resize;
}

.drr-stick-mr {
	top: 50%;
	cursor: e-resize;
}

.drr-stick-ro {
	left: 50%;
	cursor: pointer;
	border-radius: 50%;
	width: 20px;
}

.ro-stick-handle {
	left: 50%;
	top: -20px;
	box-sizing: border-box;
	position: absolute;
	font-size: 1px;
	background: #ffffff;
	border: 1px solid lightskyblue;
	/*box-shadow: 0 0 2px #bbb;*/
	width: 0px;
	height: 20px;
}

.inactive>.ro-stick-handle {
	display: none;
}

.drr-stick.not-resizable {
	display: none;
}

.content-active {
	border: 1px solid red;
	/*TODO*/
}

.drr.active {
	z-index: 999;
}

/*.drr.active.dragging{z-index: 1000 !important;}*/

.color-red {
	color: red;
}

.bt-close,
.bt-fullscreen {
	text-shadow: none;
	cursor: pointer;
	position: absolute;
	right: 14px;
	color: #f5f5f5;
	top: 12px;
	font-size: 20px;
}

.bt-fullscreen {
	right: 40px;
}

.modal {
	position: fixed;
	min-height: 100px;
	min-width: 200px;
	margin: 0 auto;
	z-index: 10000;
	font-size: 15px;
}

.modal-header {
	background: #3986bd;
	color: #fff;
	padding: 14px;
	position: relative;
	cursor: move;
}

.modal-body {
	background: #f5f5f5;
	color: #424242;
	position: relative;
	padding: 0;
	border: 1px solid #ccc;
	border-bottom: 0;
	overflow: auto;
}

.modal-footer {
	background: #f5f5f5;
	padding: 10px 10px 0;
	border: 1px solid #ccc;
	border-top: 0;
}

.modal-footer .btn {
	min-width: 90px;
	margin: 0 10px;
}

.modal.confirm {
	height: 100px;
	width: 270px;
	left: 0;
	right: 0;
	top: calc(50% - 50px);
}

.modal.confirm .modal-body {
	height: auto;
	min-height: 50px;
	padding: 10px;
}

.modal.confirm .modal-footer {
	padding: 10px;
	/*background: #fff;*/
	text-align: center;
}

.modal-footer button {
	cursor: pointer;
}

.modal.drr:before,
.modal.drr.active:before,
.modal.drr.selectable.inactive:hover:before {
	outline: none;
	border: 0;
}

.form-number {
	width: 50px;
	padding: 4px 6px;
	font-size: 14px;
}

.text-center {
	text-align: center;
}
.text-right{
	text-align: right;
}

.text-red {
	color: red;
}
.text-muted{
	color:#888;
}
.text-small{
	font-size: 12px;
	line-height: 1;
}
.text-italic{
	font-style: italic;
}

.box-row {
	margin-bottom: 0px;
}

.row.title label {
	font-weight: bold;
	display: block;
	text-align: center;
	border-top: 1px solid #eaeaea;
	padding-top: 10px;
	padding-bottom: 10px;
}

.box-row:after,
.grid:after {
	clear: both;
	display: table;
	content: "";
}

.box1-2 {
	width: 50%;
	float: left;
}

.box-color {
	position: relative;
}

.select-color {
	width: 20px;
	height: 20px;
	outline: 1px solid #ababab;
	background: #000000;
}

.btn {
	border: 0;
	padding: 9px;
	background: #e0e0e0;
	color: #0288d1;
	position: relative;
	margin-right: 1px;
	cursor: pointer;
	text-transform: uppercase;
	min-height: 28px;
}

.btn.red,
button.btn.red {
	color: #e57373 !important;
}

.modal-content,
.btn {
	border-radius: 0px;
}

.btn-close {
	position: absolute;
	right: 5px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 20px;
	top: 10px;
	cursor: pointer;
}

.kgradient .box-btn {
	position: relative;
	text-align: center;
	display: flex;
	align-content: center;
	justify-content: center;
}

.kgradient .box-btn>div {
	position: relative;
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	margin: 2px;
	background: linear-gradient(rgb(255, 255, 255) 0%, rgb(224, 224, 224) 100%);
	outline: 1px solid #ababab;
}

.kgradient .box-btn>div.active {
	background: #fff;
}

.kgradient .box-btn i.mdi {
	position: relative;
	top: 2px;
}

.bb {
	display: inline-block;
	width: 50px;
	height: 0;
	border-bottom-width: 5px;
	border-block-start-color: #000;
	position: relative;
	top: -2px;
}

.bb-solid {
	border-bottom-style: solid;
}

.bb-dashed {
	border-bottom-style: dashed;
}

.bb-dotted {
	border-bottom-style: dotted;
}

.bb-double {
	border-bottom-style: double;
}

.title-open-box label {
	cursor: pointer;
}

.title-open-box label>svg {
	width: 18px;
	height: 18px;
	position: relative;
	top: 4px;
	left: 2px;
}

.content-open-box {
	padding-top: 10px;
	min-height: 30px;
}

.pt10 {
	padding-top: 10px;
}

.pb10 {
	padding-bottom: 10px;
}

.setbox .modal-body {
	min-height: 310px;
}

.setbox .setform {
	width: 100%;
	padding: 10px;
	margin: 0;
	/*border: 1px solid red;*/
	position: absolute;
}

#settable .modal-body {
	height: 320px;
}

#settable .setform {
	max-height: 100%;
}

.setbox .modal-footer {
	text-align: center;
	padding: 10px;
	position: absolute;
	width: 100%;
}

.setbox .modal-footer .title label {
	font-size: 12px;
	font-weight: 300;
	border-top: none;
}

.setbox .box-icon>button {
	font-size: 20px;
	font-weight: 300;
	margin: 0 9px;
	border: none;
	background: #f5f5f5;
	outline: none;
	padding: 4px;
}

#videobox {
	top: 100px;
	width: 50%;
	left: 0;
	right: 0;
}

#videobox .modal-body {
	height: 60vh;
}

#videobox .modal-header {
	cursor: default;
}

.box-row {
	clear: both;
	width: 100%;
	position: relative;
	min-height: 30px;
	margin-bottom: 10px;
}

.box-row::after {
	display: table;
}

.box-row .row {
	clear: both;
	width: 100%;
	position: relative;
	text-align: right;
	padding-top: 4px;
}

.col-left,
.col-right {
	float: left;
	min-height: 28px;
}

.col-left {
	width: 60%;
}

.col-right {
	width: 40%;
}

.col-left i,
.col-right i {
	margin-right: 4px;
}

.col-left.color-input,
.col-right.color-input {
	width: 50%;
	min-height: 50px;
}

.col-right.color-input>label {
	margin-top: 0;
	margin-left: 30px;
	margin-bottom: 2px;
}

.col-left.color-input>label {
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 2px;
}

.col-left.color-input>.input-group>input {
	left: 0;
	right: auto;
	position: relative;
	float: left;
}

.col-left.color-input>.input-group>span {
	right: auto;
	position: relative;
	float: left;
}

.uk-hidden {
	display: none;
}

.box-row input[type="text"],
.box-row label {
	width: calc(100% - 40px);
}

input[type="text"],
input[type="number"] {
	border: 1px solid #bbb;
	padding: 0 4px 0 4px;
	height: 28px;
	outline: none;
	position: relative;
}

input[type="number"] {
	max-width: 120px;
}

input[type="text"]:read-only {
	background: #fdfdfd;
	color: #9e9e9e;
}

.modal-login input[type="text"] {
	height: auto;
}

.box-row .input-image,
.box-row .input-color,
.box-row .input-icon {
	width: 30px;
	height: 28px;
	display: inline-block;
	position: relative;
	top: 0;
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: center;
	padding: 4px;
	cursor: pointer;
}

.box-row .input-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.input-image>svg {
	fill: transparent;
	stroke: #000000;
	stroke-width: 8;
	width: 100%;
	height: 100%;
}

.box-row .input-group span,
.box-row .input-group input {
	position: absolute;
	right: 0;
}

.box-row .input-icon {
	font-size: 23px;
	padding: 1px 0 0 0;
}

.box-row .input-group input {
	width: 80px;
	right: 29px;
}

.box-row button {
	border: 1px solid #aaa;
	border-radius: 0;
	position: relative;
	outline: none;
	background: #efefef;
}

.box-row button:hover {
	color: #0288d1;
}

.box-row button[disabled] {
	color: #888;
	cursor: default;
}

.box-row button[disabled]:hover {
	color: #888;
	cursor: default;
}

.input-group button,
.box-row .grid-row button,
.btn-group button {
	width: 28px;
	height: 28px;
}

.btn-group button {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}

.box-row button.btn {
	width: 98%;
	font-size: 12px;
	text-transform: none;
	line-height: 1;
	padding: 4px;
}

.btn-group.last {
	margin-top: 20px;
	text-align: center;
}

.btn-group.center {
	text-align: center;
}

.btn-icon {
	padding: 0;
	font-size: 20px;
	line-height: 1;
	text-align: center;
}

.btn-icon i {
	margin-right: 0;
}

.grid-row button[disabled] {
	color: #ccc;
}

.grid-row .input-group {
	position: relative;
}

.box-row.last {
	margin-bottom: 40px;
}

.grid.btn-group {
	text-align: center;
	margin: 10px 0;
}

.grid.btn-group button {
	padding: 0;
	margin: 0 0 0 10px;
}

.grid.btn-group button:first-child {
	margin-left: 0;
}

.grid-row button.active,
.col-right button.active {
	background: #ddd;
}

.grid-row label {
	margin-right: 10px;
	margin-top: 4px;
	display: inline-block;
}

.col-right label {
	margin-right: 0;
}

.setbox label.checkbox {
	display: inline;
	cursor: pointer;
	position: relative;
	margin-right: 15px;
	margin-left: 0;
	padding: 0 0 0 20px;
}

.box-row input[type="checkbox"] {
	display: none;
}

.box-row input[type="checkbox"]+label.checkbox:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	position: absolute;
	border-radius: 2px;
	left: 0;
	bottom: 1px;
	color: #3986bd;
	background-color: #eceff1;
	box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
		0px 1px 0px 0px rgba(255, 255, 255, 0.8);
}

.box-row input[type="checkbox"]:checked+label.checkbox:before,
.box-row label.checkbox.active:before {
	content: "\2714" !important;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	font-size: 16px;
	color: #616161;
	text-align: center;
	line-height: 16px;
}

.box-row .box-input-group {
	display: inline-block;
	width: 85px;
	height: 28px;
	position: relative;
	top: 1px;
}

.input-row {
	min-height: 30px;
}

.input-row .box-input-group .input-group {
	float: left;
}

.input-row .box-input-group .input-group:last-child {
	float: right;
}

.input-row .box-input-group {
	width: calc(100% + 5px);
}

.box-input-group .input-group {
	position: absolute;
	right: 6px;
}

.box-input-group .input-group:first-child {
	z-index: 1;
}

@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.box-input-group .input-group {
			top: 11px;
		}
	}
}

.grid-row {
	margin-bottom: 6px;
}

.box-palitra.palitra {
	width: 288px !important;
	min-height: 347px;
	position: absolute;
	background: #fff;
	padding: 40px 10px 10px 18px;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0 auto;
}

.box-palitra #box-selcolor {
	position: absolute;
	top: 85px;
	z-index: 100;
}

.box-palitra.palitra input[type="color"] {
	width: 30px;
	height: 30px;
}

.box-palitra .bc {
	width: 20px;
	height: 20px;
	float: left;
	margin: 1px 1px 0 0;
	filter: none;
}

.box-palitra .bc.active,
.box-palitra .bc:hover {
	/*filter: drop-shadow(0px 0px 3px black);*/
	outline: 1px solid red;
}

.box-palitra .new-color {
	clear: both;
	padding: 10px 0;
	text-align: left;
}

.box-palitra .new-color>div {
	display: inline-block;
	position: relative;
}

.box-palitra .new-color>div>* {
	float: left;
}

.box-palitra .new-color>div:first-child {
	top: 0;
	margin-right: 10px;
}

.box-palitra .new-color>input {
	margin-left: 10px;
}

.box-palitra .select-color {
	position: relative;
}

.box-palitra .new-color .btn {
	padding: 0 4px;
	height: 22px;
	font-size: 13px;
	min-height: 10px;
}

.box-palitra .span-link {
	cursor: pointer;
	border-bottom: 1px dashed;
}

.box-palitra .row {
	margin-bottom: 10px;
}

.kshadow .row {
	margin-top: 6px;
}

.kshadow .box-direction {
	width: 110px;
	display: inline-block;
}

.kshadow .box-direction:after {
	clear: both;
	display: table;
	content: "";
}

.kshadow .btn-direction {
	padding: 4px 5px;
	margin-right: 4px;
	margin-bottom: 4px;
	float: left;
	display: block;
	outline: none;
	border: 1px solid #777;
}

.kshadow .btn-direction.active {
	background: #fff !important;
}

.kshadow .btn-direction.active:nth-child(1) {
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(2) {
	border-top: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(3) {
	border-right: 1px solid #000;
	border-top: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(4) {
	border-left: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(5) {
	border: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(6) {
	border-right: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(7) {
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(8) {
	border-bottom: 1px solid #000;
}

.kshadow .btn-direction.active:nth-child(9) {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

.kselect {
	min-width: 70px;
	max-width: 300px;
	border: 1px solid #a9a9a9;
	position: relative;
	font-size: 14px;
	display: inline-block;
	font-weight: 400;
	text-align: left;
}

.kselect .kselect-box {
	width: 100%;
	padding: 2px 6px;
	height: 26px;
	overflow: hidden;
	background: #fff;
}

.kselect .kselect-box span {
	display: inline-block;
}

.kselect .kselect-box span:first-child {
	right: auto;
}

.kselect .kselect-text {
	width: calc(100% - 18px);
	position: relative;
	top: 4px;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1.2;
}

.kselect .kselect-arrow {
	width: 12px;
	position: absolute;
	top: -6px;
	right: -5px;
}

.kselect .kselect-arrow svg {
	position: absolute;
	top: 8px;
	right: 6px;
	width: 14px;
}

.kselect .kselect-option {
	list-style: none;
	padding: 0;
	margin: 11px 0 6px -1px;
	position: absolute;
	background-color: #fff;
	z-index: 100;
	border: 1px solid #a9a9a9;
	top: 16px;
	border-top: none;
	overflow-y: auto;
	overflow-x: hidden;
}

.kselect .kselect-option li {
	padding: 4px 6px;
}

.kselect .kselect-option li:hover {
	background-color: #e0e0e0;
}

.box-color {
	position: relative;
}

.box-color .select-color {
	width: 20px;
	height: 20px;
	outline: 1px solid #ababab;
	background: #000000;
}

.box-color .palitra {
	width: 272px;
	position: absolute;
	background: #fff;
	padding: 10px;
	top: 25px;
	left: -136px;
	box-shadow: 3px 3px 15px #777;
	z-index: 100;
}

.box-color .palitra input[type="color"] {
	width: 30px;
	height: 30px;
}

.box-color .bc {
	width: 20px;
	height: 20px;
	float: left;
	margin: 1px 1px 0 0;
	filter: none;
}

.box-color .bc.active {
	filter: drop-shadow(0px 0px 3px black);
}

.box-color .new-color {
	clear: both;
}

.box-color .new-color>input {
	margin-left: 10px;
}

.box-color .span-link {
	cursor: pointer;
	border-bottom: 1px dashed;
}

.modal .box-images {
	position: absolute;
	width: calc(100% - 30px);
	border: 1px solid red;
}

.modal.confirm .modal-body {
	text-align: center;
}

.modal.confirm .uk-button,
.modal.confirm .uk-button.red,
.uk-button {
	padding: 10px 20px;
	margin: 0px 10px;
	border: 1px solid #ccc;
	background: #ddd;
	text-transform: none;
	min-width: 100px;
	font-size: 12px;
	letter-spacing: 2px;
	color: #555;
	outline: none;
}

.modal.confirm .uk-button:hover,
.uk-button:hover {
	color: #0277bd;
}

.modal.confirm .uk-button.red:hover,
.uk-button.red:hover {
	color: #e57373;
}

.tableEditor .red {
	color: #e57373;
}

.btn-no,
.modal.confirm .uk-button.btn-no {
	color: #e57373;
}

div[data-src][src*="data:image"] {
	background: rgba(0, 0, 0, 1);
}

#lib-image .ovrl,
.box-photoeditor .ovrl {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}

#lib-image .box-modal,
.box-photoeditor .box-modal {
	font-size: 15px;
	background-color: #f5f5f5;
	z-index: 10001;
	padding: 0;
	padding-bottom: 10px;
	border: 0;
	min-height: 300px;
	position: fixed;
	width: 675px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 46px;
	color: #000;
}

.input-modal .modal-body>.row.grid {
	padding: 0;
}

.input-modal .modal-body>.row {
	text-align: left;
	margin-bottom: 20px;
	padding: 0 10px;
}

.input-modal .modal-body>.row.text-center {
	text-align: center;
}

.input-modal .grid>.col2 {
	float: left;
	width: 50%;
	padding: 0 10px;
}

.input-modal .grid>.col3 {
	float: left;
	width: 33.3%;
	padding: 0 10px;
}

.input-modal .grid>.col3>input {
	width: 100%;
}

.input-modal input[type="radio"]:checked+label.radio:before {
	content: "\25CF" !important;
	color: #3986bd;
	font-size: 13px;
	text-align: center;
	line-height: 14px;
	padding-left: 1px;
}

.input-modal .kselect {
	max-width: 340px;
}

.input-modal .modal.confirm button:disabled {
	background: #eaeaea;
	color: #aaa;
}

#lib-image .modal-body,
.box-photoeditor .modal-body {
	height: auto;
	max-height: 100vh;
	position: relative;
	padding: 0;
	overflow: visible;
}

.box-photoeditor .modal-body {
	max-height: 100%;
	overflow: auto;
	padding: 0 10px 20px 10px;
}

#lib-image .box-link {
	position: relative;
	width: 100%;
	background: #fff;
	padding: 15px;
}

#lib-image .modal-body .box-message {
	margin-top: 10px;
	padding: 0 15px 10px;
	color: #777;
	letter-spacing: 1px;
}

#lib-image .linki {
	position: relative;
}

#lib-image .linki>span {
	font-size: 16px;
	color: #0288d1;
}

#lib-image .linki>span>span {
	padding-bottom: 4px;
	cursor: pointer;
}

#lib-image .linki>span.uk-active>span {
	color: #424242;
	text-transform: uppercase;
	/*border-bottom: 2px solid #0288d1*/
}

#lib-image .box-search {
	display: inline-block;
	padding-left: 10px;
	/*float: right;*/
}

#lib-image .box-search input[type="text"] {
	width: 240px;
	margin-right: 12px;
	padding: 6px;
	font-size: 14px;
	margin-top: -5px;
}

#lib-image .box-search button {
	padding: 5px 26px;
	font-size: 14px;
}

#lib-image .box-files {
	height: 270px;
	overflow: auto;
	margin-left: 5px;
	margin-top: 7px;
}

#lib-image .box-files .box {
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
	margin: 10px 10px 20px 10px;
	background: #eee;
}

#lib-image .box-files .box.figure {
	background: #fff;
}

#lib-image .box-files .box .photo {
	width: 100%;
	height: 100%;
	/*background-position: 50% 50%;
    background-size: cover;*/
	background-color: #fff;
	cursor: pointer;
}

#lib-image .box-files .box .photo.active {
	border: 2px solid #0288d1;
}

#lib-image .box-files .box .action {
	text-align: center;
	padding: 3px 0;
}

#lib-image .box-files .box .action img {
	cursor: pointer;
	opacity: 0.7;
}

#lib-image .box-files .box .action img:hover {
	opacity: 1;
}

#lib-image .box-action {
	position: relative;
	top: -5px;
	padding: 0;
	float: right;
	min-width: 100px;
	text-align: right;
}

#lib-image .box-action>img {
	margin-left: 10px;
}

#lib-image .box-action>button {
	margin-left: 10px;
	font-size: 12px;
	text-transform: none;
	letter-spacing: 1px;
	padding: 2px 10px;
	border: 1px solid #ccc;
}

.bt-sel-image {
	float: left;
}

.bt-edit-image,
.bt-update-image {
	float: left;
	margin-left: 15%;
	transform: scale(-1, 1);
}

.bt-del-image {
	float: right;
}

#lib-image .box-files .box .action::after {
	clear: both;
	content: "";
	display: table;
}

.bt-copyright {
	float: left;
	margin-left: 5px;
}

.bt-sel-image,
.bt-edit-image,
.bt-del-image,
.bt-update-image,
.bt-copyright {
	cursor: pointer;
	opacity: 0.8;
}

.bt-sel-image:hover,
.bt-edit-image:hover,
.bt-del-image:hover,
.bt-update-image:hover,
.bt-copyright:hover {
	opacity: 1;
}

#lib-image .modal-footer,
.box-photoeditor .modal-footer {
	min-height: 36px;
	border: none;
}

#lib-image .modal-footer .box-message {
	padding: 0 5px 15px;
	color: #777;
	font-size: 12px;
	letter-spacing: 1px;
	position: absolute;
	width: 300px;
	text-align: left;
	line-height: 1.4;
	margin-left: 0;
	margin-top: -2px;
}

#lib-image .box-btn {
	padding: 0 5px 10px;
	text-align: right;
	margin-right: 12px;
}

#lib-image .box-btn .btn {
	text-transform: none;
	margin: 0 10px 0 0;
	padding: 8px 20px;
	border: 1px solid #ccc;
}

#lib-image .box-btn .btn:last-child {
	margin: 0;
}

#lib-image .box-btn .btn,
.box-sizes {
	letter-spacing: 1px;
	font-size: 12px;
}

#lib-image .box-sizes {
	color: #777;
}

#lib-image .box-sizes div:first-child {
	float: left;
	margin-left: 5px;
}

#lib-image .box-sizes div:nth-child(2) {
	float: right;
	margin-right: 15px;
}

.clearfix {
	clear: both;
	display: table;
}

#lib-image .libimage-alert-modal .box-modal,
.box-photoeditor .libimage-alert-modal .box-modal {
	background-color: #fff;
	z-index: 10002;
	padding: 0;
	border: 0;
	min-height: 150px;
	position: fixed;
	width: 250px;
	top: calc(50% - 200px);
	color: #000;
	-webkit-box-shadow: 0 0 6px #444;
	box-shadow: 0 0 6px #444;
	font-size: 15px;
}

#lib-image .libimage-alert-modal .modal-header,
.box-photoeditor .libimage-alert-modal .modal-header {
	letter-spacing: 0;
	text-align: center;
	cursor: auto;
}

#lib-image .libimage-alert-modal .modal-body,
.box-photoeditor .libimage-alert-modal .modal-body {
	height: auto;
	max-height: 100vh;
	position: relative;
	padding: 15px;
	overflow: visible;
	text-align: center;
	color: #666;
}

#lib-image .libimage-alert-modal .modal-footer,
.box-photoeditor .libimage-alert-modal .modal-footer {
	padding: 0 15px 15px;
	color: #777;
	font-size: 12px;
	letter-spacing: 1px;
	position: relative;
}

#lib-image .libimage-alert-modal .box-modal .box-btn,
.box-photoeditor .libimage-alert-modal .box-modal .box-btn {
	text-align: center;
	padding: 0;
	margin: 0;
}

#lib-image .libimage-alert-modal .box-modal .box-btn .btn,
.box-photoeditor .libimage-alert-modal .box-modal .box-btn .btn {
	min-width: 85px;
	margin: 0 10px;
}

#lib-image .libimage-alert-modal .box-modal .btn.error,
.box-photoeditor .libimage-alert-modal .box-modal .btn.error {
	color: #e57373;
}

.wrap-modal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 9999;
}

.modal-login {
	position: fixed;
	top: 0;
	z-index: 100001;
	background: #fff;
	line-height: 1.5;
	width: 100%;
}

.modal-login div {
	font-size: 15px;
	line-height: normal;
}

.modal-login title {
	background-color: red;
}

.modal-login .small {
	font-size: 12px;
	line-height: normal;
}

.modal-login .box-form {
	width: 400px;
	height: 530px;
	box-shadow: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 4px;
	padding: 6px;
}

.modal-login .box-form .h3 {
	margin: auto;
	background-color: #199ec7;
	color: #fff;
	font-size: 18px;
	text-align: center;
	height: 36px;
	padding-top: 6px;
	line-height: 25px;
}

.modal-login .form-reg {
	top: 20%;
}

.modal-login .form-login {
	top: 20%;
}

.modal-login .form-content {
	padding: 0 20px 20px 20px;
	color: #424242;
	height: 410px;
	overflow: hidden;
}

.modal-login .form-content>div:first-child {
	margin-top: 2px;
}

.modal-login .form-content .row {
	margin-top: 15px;
}

.modal-login .form-content .row small,
.form-content .row label {
	display: block;
	margin-bottom: 3px;
}

.modal-login .row.small {
	margin-top: 10px;
}

.modal-login .form-content .row small {
	margin-top: 4px;
}

.modal-login .form-content input[type="text"],
.modal-login .form-content input[type="password"] {
	outline: none;
	padding: 12px;
	border: 1px solid #ddd;
	color: #757575;
	font-size: 17px;
	background: #fff;
	-webkit-appearance: none;
	width: 100%;
}

.modal-login .form-content input[type="checkbox"] {
	border: 1px solid #25bb6d;
	width: 16px;
	height: 16px;
	color: #25bb6d;
	position: relative;
	top: 4px;
}

.modal-login button {
	outline: 0;
	cursor: pointer;
}

.modal-login .text-link {
	color: #0288d1;
	text-decoration: underline;
	cursor: pointer;
}

.modal-login a {
	color: #0288d1;
}

.modal-login .w-button-green,
.modal-login .w-button-red {
	margin: 20px 10px 0;
	font-size: 15px;
	border-radius: 3px;
	line-height: 30px;
	border: 1px solid #bbb;
	background: #e0e0e0;
	color: #0288d1;
	letter-spacing: 1px;
	padding: 6px 10px;
	width: 40%;
}

.modal-login .w-button-red {
	background: #e0e0e0;
	color: #e57373;
}

.modal-login .w-button-green.active,
.modal-login .w-button-red.active {
	margin: 20px 0 0 0;
	width: 100%;
}

.modal-login .w-button-green.active {
	background: #0277bd;
	color: #fff;
	border: 1px solid #0277bd;
}

.modal-login .w-button-green:hover,
.modal-login .w-button-red:hover {
	background: #bdbdbd;
}

.modal-login .w-button-green.active:hover {
	background: #00609a;
}

.modal-login i.fa {
	margin-right: 10px;
}

.modal-login button>i.fa {
	display: none;
}

.modal-login button[disabled="disabled"]>i.fa {
	display: inline-block;
}

.modal-login .modal-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 200px;
	width: 460px;
}

.modal-login .box-modal {
	width: 400px;
	height: auto;
	position: absolute;
	background-color: #fff;
	z-index: 1000;
	border-radius: 4px;
}

.modal-login .box-title {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.modal-login .box-modal .box-title.error {
	background-color: #e57373;
}

.modal-login .box-modal .row {
	margin-top: 15px;
}

.modal-login .box-modal .row-btn {
	margin-top: 20px;
	text-align: center;
}

.modal-login .box-modal .box-title {
	margin: 0;
	background-color: #199ec7;
	color: #fff;
	font-size: 18px;
	text-align: center;
	height: 44px;
	padding-top: 6px;
	line-height: 32px;
}

.modal-login .box-modal .box-content {
	padding: 10px 20px 20px;
	text-align: center;
	line-height: normal;
}

.modal-login .socicon {
	margin-top: 20px;
}

.modal-login .socicon>div {
	outline: 0;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 10px;
}

.modal-login .form-footer {
	position: relative;
	margin: 0;
}

.modal-login .box-lang {
	width: 140px;
	position: relative;
	margin: 0 auto;
}

/*
.modal-login .box-lang>div>div {
    padding-top: 23px !important;
}
*/

main #select-lang .selection {
	position: relative;
	top: -4px;
}

main #select-lang .selection img,
main #select-lang .listContainer img {
	position: relative;
	top: 4px;
	margin-right: 5px;
}

/*
.modal-login .socicon .btn-vk {
    background-image: url("../img/login/icon-vk.svg");
}

.modal-login .socicon .btn-google {
    background-image: url("../img/login/icon-google.svg");
}

.modal-login .socicon .btn-ya {
    background-image: url("../img/login/icon-ya.svg");
}

.modal-login .socicon .btn-fb {
    background-image: url("../img/login/icon-fb.svg");
}
*/

.modal-login .pagetitle {
	font-size: 20px;
	width: 100%;
	margin: 0;
	margin-top: 40px;
	max-height: 100px;
}

.modal-login #box-change-lang {
	position: fixed;
	bottom: 50px;
	left: 10px;
	font-size: 16px;
	width: 400px;
}

.modal-login #box-change-lang label {
	margin-right: 6px;
	margin-bottom: 4px;
}

.modal-login #box-change-lang select {
	padding: 4px 12px;
}

.modal-login .title-browser {
	margin-top: 20px;
	font-size: 14px;
	text-align: center;
	color: #757575;
}

.modal-login .icon-browser {
	text-align: center;
	margin-top: 10px;
}

.modal-login .icon-browser img {
	max-width: 24px;
	margin: 0 10px;
}

.modal-login .noscript {
	position: relative;
	top: 20vh;
	font-size: 20px;
	padding: 10px;
	border: 2px solid red;
}

.modal-login .mail-big {
	font-size: 20px;
	line-height: 3;
	color: #0288d1;
}

.modal-login .errorMessage,
.successMessage {
	position: fixed;
	width: 100%;
	padding: 10px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #199ec7;
}

.modal-login .uk-tab {
	padding: 0;
	margin: 0;
	height: 57px;
}

.modal-login .uk-tab:before {
	content: "";
	display: table;
}

.modal-login .uk-tab>li {
	float: left;
	position: relative;
	margin-bottom: -1px;
	margin-top: 0;
	width: 100%;
	text-align: center;
	display: none;
}

.modal-login .uk-tab>li>a {
	position: relative;
	display: block;
	padding: 20px 0;
	font-size: 17px;
	cursor: pointer;
	color: #0288d1;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 1px;
}

.modal-login .uk-tab>li.active {
	/*margin-top: 0;*/
	display: inline;
}

.modal-login .uk-tab>li.active>a {
	background: #fff;
	color: #424242;
	border-width: 0;
	cursor: default;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
}

.modal-login #wraper {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0;
}

.modal-login #black-fon {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
}

.modal-login #box-change-lang label {
	color: #fff;
}

.modal-login .box-form {
	background-color: #fff;
}

.modal-login .text-center {
	text-align: center;
}

@media screen and (max-width: 767px) {

	*,
	html,
	body,
	div {
		font-size: 12px;
		line-height: 1;
	}

	#app {
		width: 100%;
	}

	.pagetitle {
		font-size: 16px;
		width: 90%;
		margin-left: 5%;
	}

	.box-form {
		top: 30%;
		left: 5%;
		width: 90%;
		margin-left: 0;
	}

	.form-reg {
		top: 5%;
	}

	.form-login {
		top: 5%;
	}

	.box-form .h3 {
		font-size: 16px;
	}
}

/*FOTOEDITOR*/

input[type="file"] {
	display: none;
}

.cropper-action {
	width: 70%;
	padding: 10px 0;
	text-align: center;
}

.cropper-action .btn {
	margin: 0 6px;
	padding: 4px;
	font-size: 18px;
}

.cropper-action .btn:first-child {
	margin-left: 0;
}

.cropper-content {
	display: flex;
	justify-content: space-between;
}

.cropper-area {
	width: 70%;
	position: relative;
}

.cropper-area .loading {
	width: 100%;
	margin: 0 auto;
	position: absolute;
}

.preview-area {
	width: 30%;
	position: relative;
	max-width: 400px;
}

.preview-area p {
	font-size: 1.25rem;
	margin: 0;
	margin-bottom: 1rem;
}

.preview-area p:last-of-type {
	margin-top: 1rem;
}

.preview-area .btns {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
}

.preview {
	width: 100%;
	/*height: calc(372px * (9 / 16));*/
	height: 200px;
	overflow: hidden;
	border: 1px solid #ddd;
	margin: 0 auto;
}

.crop-placeholder {
	width: 100%;
	height: 200px;
	background: #ccc;
}

.cropped-image img {
	max-width: 100%;
}

/**********************************************/

@media screen and (max-width: 1400px) {}

@media screen and (max-width: 767px) and (orientation: landscape) {}

@media screen and (max-width: 767px) and (orientation: portrait) {}

.modal-login .error_browser {
	display: none;
	margin: 0;
	padding: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	z-index: 9999;
}

.modal-login .error_browser div {
	text-align: center;
	margin-top: 100px;
}

.modal-login #boxFlash {
	position: relative;
	top: 0;
	-moz-animation: cssAnimation 0s ease-in 7s forwards;
	/* Firefox */
	-webkit-animation: cssAnimation 0s ease-in 7s forwards;
	/* Safari and Chrome */
	-o-animation: cssAnimation 0s ease-in 7s forwards;
	/* Opera */
	animation: cssAnimation 0s ease-in 7s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes cssAnimation {
	to {
		top: -50px;
	}
}

@-webkit-keyframes cssAnimation {
	to {
		top: -50px;
	}
}

/*!
 * Cropper.js v1.5.11
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2021-02-17T11:53:21.992Z
 */

.cropper-container {
	direction: ltr;
	font-size: 0;
	line-height: 0;
	position: relative;
}

.cropper-container img {
	display: block;
	height: 100%;
	image-orientation: 0deg;
	max-height: none !important;
	max-width: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
	overflow: hidden;
}

.cropper-drag-box {
	background-color: #fff;
	opacity: 0;
}

.cropper-modal {
	background-color: #000;
	opacity: 0.5;
}

.cropper-view-box {
	display: block;
	height: 100%;
	outline: 1px solid #39f;
	outline-color: rgba(51, 153, 255, 0.75);
	overflow: hidden;
	width: 100%;
}

.cropper-dashed {
	border: 0 dashed #eee;
	display: block;
	opacity: 0.5;
	position: absolute;
}

.cropper-dashed.dashed-h {
	border-bottom-width: 1px;
	border-top-width: 1px;
	height: calc(100% / 3);
	left: 0;
	top: calc(100% / 3);
	width: 100%;
}

.cropper-dashed.dashed-v {
	border-left-width: 1px;
	border-right-width: 1px;
	height: 100%;
	left: calc(100% / 3);
	top: 0;
	width: calc(100% / 3);
}

.cropper-center {
	display: block;
	height: 0;
	left: 50%;
	opacity: 0.75;
	position: absolute;
	top: 50%;
	width: 0;
}

.cropper-center::before,
.cropper-center::after {
	background-color: #eee;
	content: " ";
	display: block;
	position: absolute;
}

.cropper-center::before {
	height: 1px;
	left: -3px;
	top: 0;
	width: 7px;
}

.cropper-center::after {
	height: 7px;
	left: 0;
	top: -3px;
	width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
	display: block;
	height: 100%;
	opacity: 0.1;
	position: absolute;
	width: 100%;
}

.cropper-face {
	background-color: #fff;
	left: 0;
	top: 0;
}

.cropper-line {
	background-color: #39f;
}

.cropper-line.line-e {
	cursor: ew-resize;
	right: -3px;
	top: 0;
	width: 5px;
}

.cropper-line.line-n {
	cursor: ns-resize;
	height: 5px;
	left: 0;
	top: -3px;
}

.cropper-line.line-w {
	cursor: ew-resize;
	left: -3px;
	top: 0;
	width: 5px;
}

.cropper-line.line-s {
	bottom: -3px;
	cursor: ns-resize;
	height: 5px;
	left: 0;
}

.cropper-point {
	background-color: #39f;
	height: 5px;
	opacity: 0.75;
	width: 5px;
}

.cropper-point.point-e {
	cursor: ew-resize;
	margin-top: -3px;
	right: -3px;
	top: 50%;
}

.cropper-point.point-n {
	cursor: ns-resize;
	left: 50%;
	margin-left: -3px;
	top: -3px;
}

.cropper-point.point-w {
	cursor: ew-resize;
	left: -3px;
	margin-top: -3px;
	top: 50%;
}

.cropper-point.point-s {
	bottom: -3px;
	cursor: s-resize;
	left: 50%;
	margin-left: -3px;
}

.cropper-point.point-ne {
	cursor: nesw-resize;
	right: -3px;
	top: -3px;
}

.cropper-point.point-nw {
	cursor: nwse-resize;
	left: -3px;
	top: -3px;
}

.cropper-point.point-sw {
	bottom: -3px;
	cursor: nesw-resize;
	left: -3px;
}

.cropper-point.point-se {
	bottom: -3px;
	cursor: nwse-resize;
	height: 20px;
	opacity: 1;
	right: -3px;
	width: 20px;
}

@media (min-width: 768px) {
	.cropper-point.point-se {
		height: 15px;
		width: 15px;
	}
}

@media (min-width: 992px) {
	.cropper-point.point-se {
		height: 10px;
		width: 10px;
	}
}

@media (min-width: 1200px) {
	.cropper-point.point-se {
		height: 5px;
		opacity: 0.75;
		width: 5px;
	}
}

.cropper-point.point-se::before {
	background-color: #39f;
	bottom: -50%;
	content: " ";
	display: block;
	height: 200%;
	opacity: 0;
	position: absolute;
	right: -50%;
	width: 200%;
}

.cropper-invisible {
	opacity: 0;
}

.cropper-bg {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
	display: block;
	height: 0;
	position: absolute;
	width: 0;
}

.cropper-hidden {
	display: none !important;
}

.cropper-move {
	cursor: move;
}

.cropper-crop {
	cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
	cursor: not-allowed;
}

/*----------------- alert modal ---------------*/

.box-modal-alert>.modal {
	top: calc(50% - 200px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 300px;
	z-index: 10001;
}

.box-modal-alert .photos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.box-modal-alert .photos>div {
	max-width: 100px;
	height: 100px;
	flex-grow: 1;
}

.box-modal-alert .photos>div img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	vertical-align: middle;
}

.box-modal-alert .modal-header {
	cursor: auto;
}

.box-modal-alert .modal-header.error {
	background-color: "#e57373";
}

.box-modal-alert .modal-body {
	padding: 10px 15px;
}

.box-modal-alert .modal-footer {
	padding: 10px 15px;
}

.box-modal-alert .box-btn {
	text-align: center;
}

.box-modal-alert .box-btn button {
	background-color: #ddd;
	text-transform: none;
	min-width: 100px;
	font-size: 12px;
	letter-spacing: 2px;
	padding: 0 20px;
	color: #0277bd;
	margin: 0 6px;
	border: none;
	overflow: visible;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	line-height: 38px;
	text-align: center;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	transition-property: color, background-color, border-color;
}

.box-modal-alert .box-btn button.error {
	color: #e57373;
}

.box-modal-alert .box-btn button.disabled {
	background-color: #eee;
	color: #999;
	cursor: auto;
}

/*-----------------------//alert modal------------------*/

.emogi {
	padding: 8px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	line-height: 1.8;
}

.ibox .ap {
	/*zoom:0.7;*/
	transform: scale(0.7);
	margin: 0 4px -6px;
}

.btn.emogi {
	width: 30px !important;
	height: 30px !important;
	font-size: 20px !important;
	padding: 0 !important;
}

.btn.emogi~a {
	margin-left: 10px;
	top: 5px;
	position: relative;
}

.btn.emogi .ap {
	/*zoom:0.85;*/
	transform: scale(0.8);
	position: relative;
	margin: 0;
	top: -2px;
	left: -2px;
}

/* ======================== generator image ======================= */

.box-generator.disabled {
	pointer-events: none;
	filter: brightness(0.9);
}
.box-generator .box-row button.btn{
	min-width: 130px;
}

.box-generator .box-row {
	margin-bottom: 10px;
	color: #616161;
}

.box-generator .select-label {
	font-size: 12px;
}

.box-generator .link-text {
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}

.box-generator .box-row>div>textarea {
	width: 100%;
	border: 1px solid #ccc;
	font-family: inherit;
	padding: 10px;
}

.box-generator .section{
	border: 1px solid #ccc;
	padding: 10px;
}

.box-generator .sel-style {
	width: 100px;
	cursor: pointer;
}

.box-generator .margin-top {
	margin-top: 20px;
}

.box-generator .margin-large-top {
	margin-top: 40px;
}

.box-generator .sel-style>div {
	text-align: center;
}

.box-img {
	width: 100px;
	overflow: hidden;
}

.box-generator .switcher {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.box-generator .switcher-item {
	flex-grow: 1;
	text-align: center;
	padding: 6px 4px;
	background-color: #eceff1;
	cursor: pointer;
	margin: 0;
	transition: background-color 0.3s;
	color: #616161;
}

.box-generator .switcher-item svg {
	fill: #616161;
}

.box-generator .switcher-item:hover {
	background-color: #ddd;
	/* немного темнее при наведении */
}

.box-generator .switcher-item.active {
	background-color: #fff;
	/* светло-синий для активного таба */
	color: #0288d1;
	font-weight: bold;
}

.box-generator .switcher-item.active svg {
	fill: #0288d1;
}

.box-generator .switcher-item a>.icon-svg {
	position: relative;
	left: -4px;
	top: 2px;
}

.box-generator .examples {
	display: flex;
	width: 100%;
	gap: 4px;
	/* Отступ между элементами */
}

.box-generator .examples .image {
	/*flex: 1; 
	aspect-ratio: 1/1;
	 */
	width:70px;
	height:70px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.box-generator .examples .image.active {
	border: 2px solid #0288d1;
}

.ovrl.modal-style, .ovrl.modal-price{
	z-index: 100000;
}

.box-modal-style{
	width: 726px !important;
	height: 500px !important;
	top: 65px !important;
	background-color: #fff !important;
}

.box-modal-style .modal-body {
	padding: 20px !important;
	background-color: #fff !important;
}

.box-modal-style .style-images {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
	align-items: flex-start;
	row-gap: 0;
	height: auto !important;
	min-height: 100px !important;
}

.box-modal-style .style-images>div {
	height: auto;
	margin-bottom: 15px;
}

.style-images::after {
	content: "";
	width: 100%;
	height: 4px;
}

.box-modal-style .style-images>div.active img {
	border: 2px solid #0288d1;
}

.box-modal-style .style-images small {
	display: block;
	text-align: center;
	padding: 4px 0;
	font-size: 12px;
	width: 100px;
}



.box-generator .text-sale-generator {
	font-size: 12px;
	margin-bottom: 4px;
}

.box-generator .text-sale-generator .text-link {
	text-decoration: underline;
	cursor: pointer;
	color: #0288d1;
}

.box-alert-modal .wrap-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rbga(0, 0, 0, 0.4);
	z-index: 1;
}

.form-new-table .desc {
	margin: 15px 0;
}

.form-new-table label {
	display: block;
}

.form-new-table>div {
	display: flex;
	gap: 10px;
	/* отступ между элементами */
	justify-content: center;
}

.form-new-table .item {
	width: 110px;
}

.form-new-table .item>input {
	width: 100%;
}

.form-danger{
	border: 1px solid red !important;
}

.box-modal-price {
	width: 600px !important;
	min-height: 300px !important;
	height: auto !important;
	top: 65px !important;
	background-color: #fff !important;
}

.box-modal-price .modal-body .row {
	display: block;
	margin-bottom: 10px;
	min-height: 30px;
	width: 100%;
}

.row-flex, .row .row-flex{
	display: flex;
	gap:15px;
	align-items: center;

}
.box-modal-price .row-flex{
	display: flex !important;
	margin-top: 40px;
}
.row-flex .col{
	min-width: 100px;
}
.row-flex .col.pay-desc{
	width: 80%;
	color:#777;
}
.row-flex .col.pay-btn{
	text-align: right;
}

.box-modal-price .modal-body>div {
	min-height: 100px !important;
	display: block !important;
	background: #fff;
	padding: 10px;
}
table.price{
	width: 100%;
	border: none;
}
table.price th{
	text-align: center;
	vertical-align: bottom;
    font-weight: 400;
    color: #999;
    text-transform: uppercase;
	padding: 10px 12px;
	border: none;
}
table.price th:first-child, table.price td:first-child{
	text-align: left;
}

table.price td{
	padding: 10px 12px;
	cursor: pointer;
	border: none;
}

table.price td:nth-child(2), table.price td:nth-child(3){
	width: 160px;
	text-align: center;
}

table.price th:last-child, table.price td:last-child{
	text-align: center;
}

table.price tr{
	cursor: pointer;
}

table.price tbody tr:hover, table.price tbody tr.active{
	background-color: #fff7dc;
}

div[id^="cp-scrollable-"] {
	position: absolute !important;
}

/* ==================== VOTE =====================*/

.modal-vote .modal {
	width: 400px;
	top: 60px;
}

.modal-vote .modal-body {
	min-height: 300px;
}

.form-vote {
	position: relative;
	text-align: center;
}

.form-vote .row>label {
	font-size: 14px;
	display: block;
}

.form-vote .row {
	margin: 10px 0;
}

.form-vote .input-star {
	cursor: pointer;
	font-size: 52px;
	color: #777;
}

.form-vote .input-star .mdi.active {
	color: #ffc02b;
}

.form-vote .input-star .mdi.mdi-star {
	color: #ffc02b;
}

.form-vote textarea {
	width: 100%;
	border: 1px solid #ccc;
}

.form-vote textarea.error {
	border: 1px solid red;
}

.form-vote .desc {
	color: #777;
}

.modal-vote .modal-footer .btn {
	padding: 10px 30px;
}