html,body{
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: #1e1e1e;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: .5px;
	font-family: 'Tahoma',sans-serif;
}

*{
	transition: .3s;
}

header{
	position: absolute;
	padding: 0;
	margin: 0;
	min-width: 600px;
	width: 100%;
	height: max-content;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff0a;
	box-shadow: 0px 1px 1px #ffffff20;
	z-index: 1;
	background-color: #276af3;
	background-color: #272727;
/*	background-image: linear-gradient(18deg, #000000bf, transparent);
	box-shadow: inset 2px 2px 3px #ffffff85, inset -3px -3px 3px #000000;
	border-radius: 4px 4px 2px 2px;*/
}

nav{
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: max-content;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header, .centered-header{
	list-style: none;
	padding: 0; 
	margin: 0;
	height: max-content;
	display: flex;
}

.centered-header >  li{
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
	user-select: none;
	padding: 5px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	color: #ffffff7a;
}
.header >  li, .header >  .li{
	display: flex;
	/* justify-content: center; */
	/* align-items: center; */
	transition: .3s;
	user-select: none;
	padding: 5px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	color: #ffffff7a;
}

.header >  .li{
	height: 10px;
	background-color: #276af3;
	background-image: linear-gradient(18deg, #000000bf, transparent);
	box-shadow: inset 2px 2px 3px #ffffff85, inset -3px -3px 3px #000000;
	border-radius: 4px 4px 2px 2px;
}


.header{
	position: absolute;
	flex-direction: column;
	background-color: #1e1e1eed;
	top: 41px;
	left:  calc(230px + 1px);
	/*background-color: #276af3;
	background-image: linear-gradient(18deg, #000000bf, transparent);
	box-shadow: inset 2px 2px 3px #ffffff85, inset -3px -3px 3px #000000;
	border-radius: 4px 4px 2px 2px;*/
}

.header >  li:hover, .header >  .li:hover, .centered-header >  li:hover{
	color: white;
	background-color: #0000005a;
}

.header >  li.active, .header >  li.active:active, .centered-header >  li.active, .centered-header >  li.active:active{
	color: white;
	background-color: #2196F3;
	background-color: #f41f86;
	background-color: #547fbd85;
}

.header > li{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.header > li ul{
	top: 38px;
	margin: 0;
	padding: 5px;
	width: 200px;
	list-style: none;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	background-color: #272727;
}
/*
#0000005a*/

.header > li ul li:hover, .fram li.active{
	margin: 0;
	background-color: #2396F3;
	background-color: #547fbd85;
	/*background-image: linear-gradient(18deg, #000000bf, transparent);
	box-shadow: inset 2px 2px 3px #ffffff85, inset -3px -3px 3px #000000;*/
	border-radius: 4px 4px 2px 2px;
}

.header > li ul li, .fram li{
	margin: 0;
	/*background-color: #0000005a;*/
	border-radius: 4px 4px 2px 2px;
}

.header > li div{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.header >  li:active, .centered-header >  li:active{
	color: white;
	box-shadow: inset 4px 4px 4px #ffffff20,
				inset -4px -4px 4px #ffffff20;
}
.header >  li select, .centered-header >  li select{
	cursor: pointer;
	border: none;
	outline: none;
	background-color: transparent;
	color: white 15px;
}

.header >  li select option, .centered-header >  li select option{
	color: white;
	background-color: #1e1e1e;
	outline: none;
	border: none;
	border-radius: 10px;
}

.header >  li select option:hover, .centered-header >  li select option:hover{
	color: #2196F3;
	background-color: white;
}
.fram{
	width: max-content;
	background-color: transparent;
	z-index: 1;
	/*border: 3px solid white;*/
}
.fram li{
	position: relative;
	background-color: #272727;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 30px);
	padding-bottom: 3px;
	padding-top: 3px;
	padding-left: 20px;
	padding-right: 10px;
}
.fram li div{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.fram li img{
	margin-right: 10px;
}
.header >  li .img, .centered-header >  li .img{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.header >  li .img img, .header img, .centered-header >  li .img img{
	margin: 2px;
	height: 15px;
	width: 15px;
	filter: contrast(0) brightness(4);
}

.header >  li .img img.down, .header img.down, .centered-header >  li .img img.down{
	height: 13px;
	width: 13px;
	transform: rotate(-45deg) translate(-13px, 8px);
}

.header >  li .img img.down:hover, .header img.down:hover, .centered-header >  li .img img.down:hover{
	transform: rotate(0deg) translate(-3px, 10px) scale(1.2);
}

.text .img .icon-represent{
	font-family: 'Arial', sans-serif;
	font-size: 20px;
}

.body{
	padding: 0;
	margin: 0;
	height: calc(100vh - 50px);
	/*top: 30px;*/
	display: flex;
	flex-direction: row;
}

.can{
	min-width: 400px;
	width: calc(66% - 4px);
	width: calc(100% - 460px);
	height: calc(100vh - 40px);
	background-color: #d9d9d9;
	padding: 0;
	margin: 0;
	margin-top: 40px;
	overflow: scroll;
}

.can::-webkit-scrollbar{
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 8px;
	background-color: transparent;
	margin: 0;
}

.can::-webkit-scrollbar-thumb{
	-webkit-appearance: none;
	appearance: none;
	margin: 5px;
	border-radius: 10px;
	background-color: #00060f8c;
}

canvas#canvas{
	padding: 0;
	margin: 0;
	background-color: transparent;
}

.cursor{
	position: absolute;
	display: block;
	height: 20px;
	width: 20px;
}


.left::-webkit-scrollbar, .right::-webkit-scrollbar{
	-webkit-appearance: none;
	appearance: none;
	width: 5px;
	height: 2px;
	background-color: transparent;
	margin: 0;
}

.left::-webkit-scrollbar-thumb, .right::-webkit-scrollbar-thumb{
	-webkit-appearance: none;
	appearance: none;
	margin: 5px;
	border-radius: 10px;
	background-color: #00060f8c;
}


.left, .right{
	font-size: 9px;
	min-width: 230px;
	width: 17%;
	width: 230px;
	top: 40px;
	padding: 0;
	height: calc(100vh - 40px);
	position: relative;
	background-color: #ffffff0a;
	color: #fffffff0;
	/* overflow: scroll; */
}

.right > h4, .left > h4{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 30px;
	box-shadow: 0px 1px 1px #ffffff20;
}

.right h4 span.param-mode, .left h4 span.param-mode{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	cursor: pointer;
	height: 100%;
	color: #ffffff7a;
}

.right h4 span.param-mode:hover, .left h4 span.param-mode:hover, .right h4 span.param-mode.active, .left h4 span.param-mode.active{
	background-color: #0000005a;
	color: #ffffffa3;
}

.left{
	margin-left: 0;
	margin-right: auto;
}

.left h4 .page{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.left h4 .page .down{
	height: 13px;
	filter: contrast(0) brightness(2.5);
	margin-left: 5px;
}

.left > .page-list{
	display: flex;
	flex-direction: column;
	box-shadow: 0px 1px 1px #ffffff20;
}

.left .page-row{
	display: flex;
    height: 30px;
    padding: 0 11px;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}

.left .page-row:hover{
	background-color: #0000005a;
	color: #ffffffa3;
}

.left .page-row.active{
	background-color: #547fbd85;
	color: white;
}

.list{
	list-style: none;
	padding: 0px;
	display: flex;
	flex-direction: column-reverse;
}

.list li{
	user-select: none;
	/* padding: 8px 15px; */
	padding-left: 7px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.list li .children.active, .list li .children:hover{
	background-color: #547fbd85;
	color: white;
	background-color: #276af3;
	/*background-image: linear-gradient(18deg, #000000bf, transparent);
	box-shadow: inset 2px 2px 3px #ffffff85, inset -3px -3px 3px #000000;
	*/
	background-color: #547fbd85;
	border-radius: 4px 4px 2px 2px;
}

.list li > ul{
	flex-direction: column-reverse;
	width:100%;
	margin:0;
	padding:0
}

.list li.group{
	flex-direction: column;
	padding:0;
	margin:0
}

/* .list li.group.active > .children{
	background-color: #547fbd85;
	color: white;
} */

.list li.group.n1{
	flex-direction: column;
	padding:0;
	margin:0
}

.list li.group.n2{
	flex-direction: column;
	padding:0;
	margin:0;
	padding-left: 5px
}

.list li.group:hover{
	background-color: transparent;
}

.list li .children{
	justify-content: space-between;
}

.list li img{
	width: 10px;
	filter: contrast(0) brightness(2.5);
}

.list li span{
	margin-left: 5px;
}

.list li img.lock:hover, .list li img.eye:hover{
	transform: scale(1.5);
}

.list li img.eye{
	margin-right: 5px;
	cursor: pointer;
}

.list li img.lock{
	cursor: pointer;
}

.list li img.eye{
	margin-left: 5px;
	margin-right: 5px;
}

.list li img.lock{
	margin-left: auto;
	margin-right: 5px;
}

.list li:hover img.remover{
	opacity: 1;
	cursor: pointer;
}

.list li .children{
	display: flex;
    padding: 8px 15px;
    padding-left: 10px;
    justify-content: flex-start;
    flex-direction: row;
    width: calc(100% - 20px);
    align-items: center;
}

.list li .children .down{
	margin-right: 5px;
	width: 8px;
	cursor: pointer;
}

.list li .children .down:hover{
	transform: scale(1.5);
}

.list li.open > ul{
	display: flex;
}

.list li.open > .children > .down{
	transform: rotate(-180deg);
}

.list li.close > ul{
	display: none;
}

.list li.close > .children > .down{
	transform: rotate(0deg);
}

.list li > ul > li {
	/* padding-left: 25px; */
}




.right{
	margin-right: 0;
	margin-left: auto;	
}

.right .section{
	padding: 8px 8px;
	box-shadow: 0px 1px 1px #ffffff20;
}

.section .row-header{
	margin-bottom: 2px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.row-header span{
	margin: 10px 0;
}

.row-body .row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}

.row-body .row .sh{
	cursor: pointer;
	height: 13px;
	filter: contrast(0) brightness(4);
}

.row-body input[type=color]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: transparent;
	outline: none;
	padding: 0;
	cursor: pointer;
	border: none;
}
.row-body input[type=color]::-webkit-color-swatch{
	border-radius: 2px;
	border: none;
}
.row-body input[type=color]::-moz-color-swatch{
	border-radius: 2px;
	border: none;
}

.section.selected-element-param .row-body{
	display: flex;
	flex-wrap: wrap;
} 

.frame-retail{
	margin: 10px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}

.frame-retail input, .pourcentages input{
	font-size: 9px;
	color: white;
	outline: none;
	margin-left: 5px;
	border: none;
	background-color: transparent;
	width: 40px;
}

.frame-retail input::-webkit-number{
	appearance: none;
}

.frame-retail input::-webkit-number-thumb{
	appearance: none;
}

.frame-retail span{
	cursor: e-resize;
}


.area{
	transition: none;
	position: absolute;
	display: none;
	background: transparent;
	/*color: transparent;*/
	outline: none;
	line-height: normal;
	letter-spacing: 0.48px;
	border: 1px solid blue;
	resize: none;
	/* width: max-content; */
	padding: 0;
	margin: 0;
}