@font-face { font-family: 'Noto Sans'; src: url('NotoSans-Bold.ttf');}
	* {
		font-size: 13px;
		margin: 0;
		padding: 0;
		font-family: 'Noto Sans', sans-serif;
		border-collapse: collapse;
	}
	:root {
		--strong-1: rgb(5, 54, 79);
		--light-1: rgb(247, 247, 247);
		--strong-2: rgb(21, 191, 134);
		--light-2: rgb(5, 54, 79);
		--strong-3: rgb(220, 220, 220);
		--light-3: rgb(5, 54, 79);
		--strong-4: rgb(01, 171, 114);
		--light-4: rgb(240,240,240);
		--light-5: rgb(114, 114, 114);
		--strong-6: rgba(5, 54, 79, 0.85);
		--strong-8: rgba(5, 54, 79, 0.55);
		--light-6: rgba(0, 0, 0, 0.2);
		--light-7: rgba(102, 102, 102,0.1);
		--light-8: rgba(21, 191, 134,0.5);
		--light-9: rgba(114, 114, 114,0.2);
		--light-10: rgb(240, 240, 240);
		--light-11: rgb(210, 210, 210);
		--light-12: rgba(5, 54, 79, 0.3);
		--light-13: rgba(5, 54, 79, 0.1);
		--light-14: rgba(5, 54, 79, 0.05);
		--light-15: rgba(14, 14, 14, 0.8);
		--strong-7: rgb(21, 191, 134);
	  }

	/* :root {
		--strong-1: rgb(247, 247, 247);
		--light-1: rgb(9, 24, 44);
		--strong-2: rgb(0, 112, 75);
		--light-2: rgb(5, 54, 79);
		--strong-3: rgb(247, 247, 247);
		--light-3: rgb(9, 24, 44);
		--strong-4: rgb(0, 63, 42);
		--light-4: rgb(25, 44, 69);
		--light-5: rgb(25, 44, 69);
		--strong-6: rgba(93, 175, 216, 0.55);
		--light-6: rgba(145, 211, 245, 0.2);
		--light-7: rgba(102, 102, 102,0.1);
		--light-8: rgba(21, 191, 134,0.5);
	} */


	.svg-light {
		fill : var(--light-1);
		stroke : var(--strong-1);
	}

	.svg-light-fill {
		fill : var(--light-1);
		stroke : var(--light-1);
	}

	.svg-strong {
		fill : var(--strong-1);
		stroke : var(--light-1);
	}

	.svg-strong-fill {
		fill : var(--strong-1);
		stroke : var(--strong-1);
	}

	html {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	body {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		background-color: var(--light-1);
	}

	iframe {
		width: 100%;
		height: 100%;
	}

	#pageTitle{
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		color: #fff;
		width: 100%;
		background-color: var(--strong-1);
		text-align: center;
	}
	#drawContainer {
	    height: calc(100% - 40px);
		width: calc(100% - 280px);
		float: left;
	}
	#div_canvas {
		float: left;
	    height: 100%;
	    width: 100%;
		left: 0px
	}
	#viewport_3d {
		display: none;
		background-color: white;
		float: left;
	    height: 100%;
	    width: 100%;
		right: 0px;
		bottom: 0px;
	}
	#fileTab {
	    float: left;
	    border: #5f82aa solid 2px;
	    width: 280px;
	    border: medium;
		height: 100%;
	}
	#fileToolBar {
		width: 100%;
		height : 40px;
	}
	#pageHeader {
		width: 100%;
		/* background-image: url(../img/Schneider_Electric.svg.png); */
		background-position: 98% center;
		background-repeat: no-repeat;
		background-color: var(--light-1);
		background-size: auto 40px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 25px;
		color: var(--strong-1);
	}
	#editorPage {
		width: 100%;
		height: calc(100% - 80px);
		display: none;
	}
	#generatorPage {
		width: 100%;
		height: calc(100% - 80px);
		display: none;
		margin: 0;
		padding: 0;
		border: none;
	}
	#logo {
		position: absolute;
		width: 100%;
		background-image: url(../img/logo-maetz-industries2540.png);
		background-position: 1% center;
		background-repeat: no-repeat;
		background-color: transparent;
		background-size: auto 40px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 25px;
		color: var(--strong-1);
	}
	#demodiv {
		position: absolute;
		left: 290px;
		top: 15px;
		height: 22px;
		line-height: 20px;
		font-size: 14px;
		background-color: var(--strong-1);
		padding-left: 5px;
		padding-right: 5px;
		color: #f7f7f7;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	#version {
		position: absolute;
		left: 310px;
		top: 37px;
		height: 12px;
		line-height: 12px;
		font-size: 9px;
		background-color: transparent;
		padding-left: 5px;
		padding-right: 5px;
		color: var(--strong-1);
	}
	#navBar {
		position: absolute;
		height: 50px;
		left: 400px;
		/* width: 150px; */
	}
	#alarmes {
		position: absolute;
		width: calc(100% - 750px);
		height: 40px;
		left: 600px;
		line-height: 15px;
		padding: 5px;
		overflow-y: auto;
	}
	#manualUp, #manualZUp {
		 background-image: url(../img/icone-up.svg);
	}
	#manualDown, #manualZDown {
		 background-image: url(../img/icone-down.svg);
	}
	#manualLeft {
		 background-image: url(../img/icone-left.svg);
	}
	#manualRight {
		 background-image: url(../img/icone-right.svg);
	}
	
	#k,
	#rep {
	    width: 70px;
	}
	#envoyerF {
	    width: 244px;
	    height: 40px;
	    position: absolute;
	    bottom: 0px;
	    left: 10px;
	    background: var(--light-5);;
	    border: 0px;
	    color: #fff;
	    font-size: 16px;
	}
	#div_sel {
	    width: 318px;
	    border: #999 solid 1px;
	    margin-left: 0px;
	    height: 100%;
	}
	#fileNameBar {
		background: #999;
	}
	#fileName {
	    border: none;
	    padding: 3px;
	    background: #999;
		width: calc(100% - 26px);
	}
	#iconFile {
		float: left;
		padding: 5px;
	}
	#filePreview {
		display: none;
		width: calc(100% - 10px);
		height: calc(100% - 100px);
		top: 85px;
		left: 5px;
		position: absolute;
		border-radius: 5px;
		background-color: #f7f7f7;
	}
	#machineCommand {
		
		width: 100%;
		height: calc(100% - 80px);
		bottom: 0px;
		left: 0px;
		border: none;
		border-collapse: collapse;
		position: absolute;
		background-color: #f7f7f7;
	}
	#maintenancePage {
		width: 100%;
		height: calc(100% - 80px);
		bottom: 0px;
		left: 0px;
		border: none;
		border-collapse: collapse;
		position: absolute;
		background-color: #f7f7f7;
	}

	#maintenanceTable>*>*>*>tr>td {
		height : 44px;
	}
	#cancelUpload, #importUpload, #openUpload, #reverseX {
		position: absolute;
		height: 40px;
		line-height: 40px;
		width: 120px;
		bottom : 5px;
	}
	#uploadToolbar {
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 50px;
	}
	#connection {
		text-align: center;
		height: 20px;
		width: 100px;
		position: absolute;
		top: 15px;
		right: 15px;
		line-height: 20px;
	}
	#machineSend {
		height: 20px;
		width: 200px;
		float: right;
		margin: 10px;
	}
	.alarme {
		color : rgb(229,53,38);
	}
	.col33 {
		width: calc(100% / 3) !important;
	}
	.row33 {
		text-align: center;
		height: calc(100% / 3) !important;
	}
	.txtStatus, .txtStatus[act='0'] {
		color: #999;
	}
	.txtStatus[act='1'] {
		color: var(--strong-2);
	}
	.navButton {
		width: 60px;
		height: 50px;
		display: block;
		border: 0;
		float:left;
		background-color: var(--light-1);
		background-size: auto 40px;
		background-position: center;
		background-repeat: no-repeat;
	}

	.navButton>.svg-light,.navButton[act="false"]>.svg-light,.navButton>.svg-light,.navButton[act="false"]>g>.svg-light {
		fill : var(--light-1);
		stroke : var(--light-1);
	}

	.navButton>.svg-strong,.navButton[act="false"]>.svg-strong,.navButton>.svg-strong,.navButton[act="false"]>g>.svg-strong {
		fill : var(--strong-1);
		stroke : var(--strong-1);
	}

	.navButton[act="true"] {
		background-color: var(--strong-1);
	}
	
	.navButton[act="true"]>.svg-strong,.navButton[act="true"]>g>.svg-strong {
		fill : var(--light-1);
		stroke : var(--light-1);
	}

	.navButton[act="true"]>.svg-light,.navButton[act="true"]>g>.svg-light {
		fill : var(--strong-1);
		stroke : var(--strong-1);
	}

	#editeur[act="true"]>.svg-light {
		stroke : var(--light-1);
	}

	#editeur[act="true"]>.svg-strong {
		stroke : var(--strong-1);
	}

	#editeur[act="false"]>.svg-light {
		stroke : var(--strong-1);
	}

	#editeur[act="false"]>.svg-strong {
		stroke : var(--light-1);
	}

	#maintenance[act="true"]>.svg-light {
		stroke : var(--light-1);
	}

	#maintenance[act="true"]>.svg-strong {
		stroke : var(--strong-1);
	}

	#maintenance[act="false"]>.svg-light {
		stroke : var(--strong-1);
	}

	#maintenance[act="false"]>.svg-strong {
		stroke : var(--light-1);
	}
	
	.bp, .bp[act='0'] {
		position: absolute;
		height: 40px;
		width: 120px;
		bottom: 5px;
		text-align:center;
		text-decoration: none;
		color: #ffffff;
		background-color: var(--strong-1);
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		width : 50%;
		margin-left: auto;
		margin-right: auto;
		height: 50px;
	}
	.bp:hover {
		background-color: var(--strong-1);
	}
	.bp:active {
		background-color: #005A87;
	}
	.bp:hover, .bp[act='0']:hover {
		background-color: var(--strong-1) !important;
	}
	.bp[act='1'] {
		background-color: var(--strong-2) !important;
	}

	.bp[act='1']:hover {
		background-color: var(--strong-4) !important;
	}
	.bp[act='2'] {
		background-color: #E53138 !important;
	}

	.bp[act='2']:hover {
		background-color: #E53138 !important;
	}

	.homeBp {
		float: left;
		width: calc(100%  - 2px);
		height: 50px;
		margin-top: 2px;
		padding-left: 2px;
	}

	.homeBp>div {
		line-height: 50px;
	}
	
	.bpTable, .bpTable[act='0'] {
		height: 100%;
		width: 100%;
		text-align:center;
		vertical-align: middle;
		text-decoration: none;
		color: #ffffff;
		background-color: #999;
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		display: table;
	}
	.bpTable:hover, .bpTable[act='0']:hover {
		background-color: var(--strong-1)!important;
	}
	.bpTable:active, .bpTable[act='0']:active {
		background-color: var(--strong-2)!important;
	}
	.bpTable:hover, .bpTable[act='0']:hover {
		background-color: var(--strong-1) !important;
	}
	.bpTable[act='1'] {
		background-color: var(--strong-7) !important;
	}
	.bpTable[act='1']:hover {
		background-color: var(--strong-4) !important;
	}
	.bpTable[act='2'] {
		background-color: #E53138 !important;
	}
	.bpTable[act='2']:hover {
		background-color: #E53138 !important;
	}
	.bpTable[act='3'] {
		background-color: rgb(202, 133, 30) !important;
	}
	.bpTable[act='3']:hover {
		background-color: rgb(202, 133, 30) !important;
	}
	
	.bpImg, .bpImg[act='0'] {
		height: 28px;
		width: 100%;
		text-align:center;
		text-decoration: none;
		color: #ffffff;
		background-color: var(--strong-1);
		border: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		background-repeat: no-repeat;
		background-position: center; 
	}
	.bpImg:hover {
		background-color: var(--strong-1);
	}
	.bpImg:active {
		background-color: #005A87;
	}
	.bpImg:hover, .bpImg[act='0']:hover {
		background-color: var(--strong-1) !important;
	}
	.bpImg[act='1'] {
		background-color: var(--strong-2) !important;
	}
	.bpImg[act='1']:hover {
		background-color: var(--strong-4) !important;
	}
	.bpImg[act='2'] {
		background-color: #E53138 !important;
	}
	.bpImg[act='2']:hover {
		background-color: #E53138 !important;
	}
	
	.machineCtrl {
		float: left;
		width : calc((100% / 6) - 5px);
		height : 100%;
		border: none;
		margin-left : 5px;
		background-color: #fff;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.machineCtrl>.label {
		float: left;
		width : 100%;
		height : 30px;
		text-align: center;
		line-height: 30px;
	}
	.machineCtrl>.bp {
		width : calc(50% - 4px);
		float: left;
		position: relative;
		height : 30px;
		text-align: center;
		line-height: 30px;
		padding : 0;
		margin : 2px;
		
	}
	.machineCtrlStatus {
		width : 100%;
		float: left;
		position: relative;
		height : 60px;
		padding : 0;
	}
	.machineCtrlStatus>.IOstatus {
		width : calc(50% - 7px);
		float: left;
		position: relative;
		height : 30px;
		text-align: center;
		line-height: 30px;
		padding : 0;
		margin : 2px;
	}
	
	.IOstatus, .IOstatus[act='0'] {
		background-color: #EEEEEE !important;
		text-decoration: none;
		color: #999;
		border: 1px solid #999;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin-left: auto;
		margin-right: auto;
	}

	.IOstatus[act='1']{
		background-color: var(--strong-7) !important;
		color: #fff !important;
		border-color: var(--strong-7) !important;
	}
	.IOstatus[act='2']{
		background-color: #E53138 !important;
		color: #fff !important;
		border-color: #E53138 !important;
	}
	
	.IOstatus[act='3']{
		background-color: rgb(202, 133, 30) !important;
		color: #fff !important;
		border-color: rgb(202, 133, 30) !important;
	}
	#canvasMachine {
		position: absolute;
		left: 280px;
		top: 0px;
		height : calc(100% - 47px);
		width : calc(100% - 280px);
	}
	#canvasSpeed {
		position: absolute;
		left: 280px;
		top: 0px;
		height : 240px;
		width : 400px;
		background-color: #fff;
	}
	#uploadFrame {
		display : none;
		position: absolute;
		height : calc(100% - 47px);
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		z-index: 100;
	}
	#uploadProgress {
		position: absolute;
		width: 200px;
		height: 20px;
		left: calc(50% - 100px);
		top: calc(50% - 10px);
	}
	#codeVisualisation {
		position: absolute;
		left: 0px;
		top: 0px;
		height : calc(100% - 47px);
		width : 280px;
		overflow-y: hidden;
		padding: 3px;
		font-size: 18px;
		background-color: var(--light-4);
	}
	#viewport_3D_machine {
		display: none;
		position: absolute;
		right: 0px;
		top: 0px;
		height : calc(100% - 47px);
		width : calc(50% - 140px);
	}
	#commandBarSimple{
		position: absolute;
		bottom: 2px;
		width : 100%;
		/* background-color: var(--light-1); */
		table-layout: fixed;
	}

	/* #commandBarSimple>div{
		counter-increment : childsNumber 1;
	}
	#commandBarSimple>div:after{
		width : calc(100% / (counter(childsNumber)) - 2px);
		content : counter(childsNumber);
	} */

	#functionPanel {
		width: calc(100% - 350px);
		height: 100%;
		float:left;
	}
	#functionPanelAdvanced {
		width: 100%;
		height: 100%;
		float:left;
		text-align: center;
		background-color: #f7f7f7;
	}
	#functionPanel td {
		width: 20%;
	}
	#functionPanel td, #functionPanelAdvanced td {
		padding: 2px;
	}
	#manualPanel {
		width: 350px;
		height: 100%;
		float:left;
		table-layout: fixed;
	}
	#manualPanel td {
		padding: 2px;
	}
	#commandBarAdvanced {
		display:none;
		position: absolute;
		bottom: 0px;
		width : 100%;
		height: 266px;
	}
	#cancelUpload {
		left: 5px;
	}
	#reverseX {
		right: 255px;
	}
	#importUpload {
		right: 130px;
	}
	#openUpload {
		right: 5px;
	}
	#canvasPreview {
		margin: 5px;
		height : calc(100% - 300px);
		width : calc(100% - 10px);
	}
	#trLabels {
		height: 30px;
	}
	#divLayers {
		overflow: auto;
		height: 170px;
		border: 1px solid var(--strong-1);
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	#dxfLayersTable, #uploadSettingsTableSub{
		width: 100%;
	}
	#tdSettingsTableSub {
		vertical-align: top;
		width: 30%;
	}
	#tdivSettingsTableSub {
		width: 100%;
		border: 1px solid var(--strong-1);
		border-radius: 5px;
		padding-top: 2px;
		padding-bottom: 2px;
		background-color: #fff;
	}
	#uploadSettingsTableSub td:nth-of-type(even) {
		width: 80px;
		text-align: center;
	}
	#dxfLayersTable td {
		text-align: center;
		padding: 3px;
		border-right: 1px solid #fff;
	}
	#uploadSettingsTableSub tr {
		height: 30px;
	}
	#titleFileName {
		width: 100%;
		text-align: center;
		line-height: 30px;
		font-size: 16px;
		background-color: var(--strong-1);
		color: #fff;
		border-radius: 5px;
	}
	#dxfLayersTable tr:nth-of-type(odd), #uploadSettingsTableSub tr:nth-of-type(even) {
		background-color: var(--light-4);
	}
	#dxfLayersTable tr:nth-of-type(even), #uploadSettingsTableSub tr:nth-of-type(odd)  {
		background-color: #fff;
	}
	.blueBackground {
		background-color: var(--strong-1);
		color: #fff;
	}
	.tdCheckbox {
		width: 20px;
	}
	#uploadSettingsTable {
		width: calc(100% - 10px);
		left: 5px;
		height: 100px;
		bottom: 55px;
		position: absolute;
		text-align: center;
	}
	#uploadSettingsTable td{
		padding: 5px;
	}
	#machineMode {
		position: absolute;
		left: 5px;
		top: 5px;
		height: auto !important;
		width: auto !important;
		z-index: 1000;
		padding: 5px !important;
	}
	#gridDisplay {
		position: absolute;
		right: 5px;
		top: 5px;
		height: auto !important;
		width: auto !important;
		z-index: 1000;
		padding: 5px !important;
	}
	.inputValue {
		width: 100%;
		text-align:center;
		text-decoration: none;
		border: 1px solid var(--strong-1);
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		margin-left: auto;
		margin-right: auto;
		display : block;
	}

	input.inputValue[type=text], output.inputValue{
		-webkit-border-top-rigth-radius: 5px;
		-webkit-border-bottom-rigth-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.inputLabel {
		text-align: center;
		padding: 5px;
	}
	
	#etapeR {
	    width: calc(100% - 1px);
	    height: calc(100% - 40px);
	    border-right: 1px inset #999;
		overflow-y: scroll;
	    overflow-x: hidden;
		position: relative;
	}
	#etapeR>div {
		padding-left: 10px;
	}
	#etapeR>div:nth-of-type(odd) {
		background-color: var(--light-4);
	}
	.selected, #etapeR>div:nth-of-type(odd).selected {
		background-color : var(--strong-1);
		color: white;
	}
	.edition {
		background-color : var(--strong-2) !important;
		color: white;
	}
	#div_editer {
	    border-left: #999 solid 1px;
	    border-right: #999 solid 1px;
	    border-bottom: #999 solid 1px;
	    width: 318px;
	    height: 30px;
	    margin-left: 0px;
	}
	#textE {
	    position: absolute;
	    width: 250px;
	    display: none;
	    height: 24px;
	}
	#buttonE {
	    display: none;
	    position: absolute;
	    margin-left: 250px;
	    width: 60px;
	    height: 30px;
	}
	#drawToolbar {
	    width: calc(100% - 280px);
	    margin-left: 280px;
	    height: 40px;
	    background: var(--strong-2);
	    padding: 0px;
	}
	#set_option {
	    background-image: url(../img/bpvalid.svg);
	    width: 31px;
	    height: 30px;
	    position: absolute;
	    z-index: 3;
	    margin-left: -41px;
	}
	#G0 {
	    display: none;
	    position: absolute;
	    margin-left: 40px;
	    z-index: 2;
	    margin-top: 40px;
	    border: 0px;
	}
	#G1 {
	    display: none;
	    position: absolute;
	    margin-left: 40px;
	    z-index: 2;
	    margin-top: 80px;
	}
	#bezier {
	    background-image: url(../img/icone-dessin-bezier.svg);
	}
	#bezier:hover {
	    background-image: url(../img/icone-dessin-bezier.svg);
	}
	#G2 {
	    display: none;
	    position: absolute;
	    margin-left: 80px;
	    z-index: 2;
	    margin-top: 40px;
	}
	#G3 {
	    display: none;
	    position: absolute;
	    margin-left: 80px;
	    margin-top: 80px;
	    z-index: 2;
	}
	#materialSettings {
	    display: none;
	    position: absolute;
	    margin-top: 40px;
	    margin-left: 200px;
	    z-index: 2;
	    background-color: var(--strong-2);
	    border: none;
	}
	#renderSettings {
	    display: none;
	    position: absolute;
	    margin-top: 40px;
	    /* margin-left: 200px; */
	    z-index: 2;
	    background-color: var(--strong-2);
	    border: none;
	}
	#EmaiPanel {
	    display: flex;
	    position: absolute;
	    margin-top: 40px;
	    /* margin-left: 520px; */
	    z-index: 2;
	    background-color: var(--strong-2);
		border: none;
		max-height: calc(100% - 120px);
	}
	#EmaiPanel>*>*>*>*>*>.inputValue {
		width : 100px !important;
	}

	#repeatToolPanel {
	    display: none;
	    position: absolute;
	    margin-top: 40px;
	    margin-left: 520px;
	    z-index: 2;
	    background-color: var(--strong-2);
	    border: none;
	}
	#textToolPanel {
	    display: none;
	    position: absolute;
	    margin-top: 40px;
	    margin-left: 480px;
	    z-index: 2;
	    background-color: var(--strong-2);
		border: none;
	}
	#objectGenerator {
	    display: none;
	    position: absolute;
	    margin-top: 40px;
	    margin-left: 480px;
	    z-index: 2;
	    background-color: var(--strong-2);
	    border: none;
	}
	#inp_vit {
	    z-index: 2;
	}

	input[type=range] {
		height: 2em;
		color: #FFF;
		background: transparent;
		background-image: linear-gradient(to bottom, #FFF, #999, #FFF);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 25%;
		border-radius: 50%;
	  }
	  /*==============================*/
	  /* le curseur                   */
	  /*==============================*/
	  input[type=range]::-webkit-slider-thumb {
		width: 1em;
		padding: 0.25em;                                              /* largeur du bord */
		border: 1px solid #888;
		border-radius: 50%;
		box-shadow: 0 0 .5em #FFF inset;
		background: linear-gradient(#888, #FFF) content-box,          /* le centre */
					linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
	  }
	  input[type=range]::-moz-range-thumb {
		width: 1em;
		padding: 0.25em;                                              /* largeur du bord */
		border: 1px solid #888;
		border-radius: 50%;
		box-shadow: 0 0 .5em #FFF inset;
		background: linear-gradient(#888, #FFF) content-box,          /* le centre */
					linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
	  }
	  input[type=range]::-ms-thumb {
		width: 1em;
		padding: 0.25em;                                              /* largeur du bord */
		border: 1px solid #888;
		border-radius: 50%;
		box-shadow: 0 0 .5em #FFF inset;
		background: linear-gradient(#888, #FFF) content-box,          /* le centre */
					linear-gradient(-90deg, #888, #DDD) border-box;   /* le bord */
	  }
	  
	#minsl {
	    z-index: 2;
	    position: absolute;
	    font-size: 11px;
		right: 5px;
		bottom: 5px;
	}
	#valsl {
	    z-index: 1;
	    font-size: 11px;
		bottom: 5px;
		position: relative;
		bottom: 0px;
	}
	#maxsl {
	    z-index: 2;
	    position: absolute;
	    font-size: 11px;
		right: 5px;
		bottom: 5px;
	}
	#val_vitesse {
	    background: var(--strong-1);
	    border: 0px;
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    z-index: 3;
	    margin-left: 10px;
	    color: var(--strong-2);
	}
	#axe_z {
	    background-image: url(../img/axeZ.png);
	    width: 31px;
	    height: 32px;
	    float: left;
	}
	#z-choix {
	    display: none;
	    position: absolute;
	    width: 200px;
	    height: 30px;
	    margin-top: 128px;
	    margin-left: 31px;
	    z-index: 2;
	    border: #5f82aa solid 2px;
	}
	#font_z1 {
	    float: left;
	    margin-left: 20px;
	}
	#font_z2 {
	    float: right;
	    margin-right: 20px;
	}
	#z-but {
	    background-image: url(../img/bpvalid.png);
	    width: 31px;
	    height: 30px;
	    position: absolute;
	    z-index: 3;
	    margin-left: 1px;
	}
	#inp_text {
	    background-image: url(../img/bptexte.png);
	    width: 40px;
	    height: 40px;
	    float: left;
	    border: 0px;
	}
	#text-area {
	    display: none;
	    position: absolute;
	    width: 200px;
	    height: 30px;
	    margin-left: 31px;
	    z-index: 2;
	    border: #5f82aa solid 2px;
	    margin-top: 160px;
	}
	#text-input {
	    z-index: 2;
	    width: 110px;
	}
	#text-size {
	    z-index: 2;
	    width: 24px;
	}
	#but_text {
	    background-image: url(../img/bpvalid.png);
	    width: 31px;
	    height: 30px;
	    position: absolute;
	    z-index: 3;
	    margin-left: 1px;
	}
	#zoom {
	    background-image: url(../img/Zoom.jpg);
	    width: 31px;
	    height: 32px;
	    float: left;
	}
	.settingTable,
	.settingTable td,
	.settingTable th {
	    margin: 0;
	    border: none;
	    color: var(--strong-1);
		padding: 2px;
		padding-left: 5px;
		padding-right: 5px;
	}
	#longueur, #hauteur, #nbrX, #nbrY, #dimX, #dimY, #fontSize, #fontUpload {
	    width: 80px;
	}
	#textToolField {
		width: 200px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		display: block;
	}
	
	#fontName {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		height : 20px;
	}
	
	.DrawButton {
	    border: 0px;
	    width: 40px;
	    height: 40px;
	    float: left;
	    background-color: var(--strong-2) !important;
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: center;
		color: var(--light-2);
		line-height: 40px;
		text-align: center;
		font-size: 30px;
	}

	.DrawButton>*>* {
		font-size: 28.5px;
	}

	.DrawButton>.svg-strong,.DrawButton>*>.svg-strong {
		stroke : var(--strong-2);
		fill : var(--light-2);
	}

	.DrawButton>.svg-light,.DrawButton>*>.svg-light {
		stroke : var(--light-2);
		fill : var(--strong-2);
	}

	.DrawButton>.svg-strong-fill,.DrawButton>*>.svg-strong-fill {
		stroke : var(--strong-2);
		fill : var(--strong-2);
	}

	.DrawButton>.svg-light-fill,.DrawButton>*>.svg-light-fill {
		stroke : var(--light-2);
		fill : var(--light-2);
	}

	.DrawButton:hover {
	    background-color: var(--light-2) !important;
		color: var(--strong-2) !important;
		
	}
	
	.DrawButton:hover>.svg-light,.DrawButton:hover>*>.svg-light {
		fill : var(--light-2);
		stroke : var(--strong-2);
	}

	.DrawButton:hover>.svg-strong,.DrawButton:hover>*>.svg-strong {
		fill : var(--strong-2);
		stroke : var(--light-2);
	}

	.DrawButton:hover>.svg-light-fill,.DrawButton:hover>*>.svg-light-fill {
		fill : var(--strong-2);
		stroke : var(--strong-2);
	}

	.DrawButton:hover>.svg-strong-fill,.DrawButton:hover>*>.svg-strong-fill {
		fill : var(--light-2);
		stroke : var(--light-2);
	}

	.CodeButton {
		border: 0px;
	    width: 40px;
	    height: 40px;
	    float: left;
		background-color: var(--strong-3);
		color: var(--light-3);
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: center;
	}
	.CodeButton:hover {
	    background-color: var(--light-3);
		color: var(--strong-3);
	}

	.CodeButton>*>* {
		font-size: 28.5px;
	}

	.CodeButton>.svg-strong,.CodeButton>*>.svg-strong {
		stroke : var(--strong-3);
		fill : var(--light-3);
	}

	.CodeButton>.svg-light,.CodeButton>*>.svg-light {
		stroke : var(--light-3);
		fill : var(--strong-3);
	}

	.CodeButton>.svg-strong-fill,.CodeButton>*>.svg-strong-fill {
		stroke : var(--strong-3);
		fill : var(--strong-3);
	}

	.CodeButton>.svg-light-fill,.CodeButton>*>.svg-light-fill {
		stroke : var(--light-3);
		fill : var(--light-3);
	}

	.CodeButton:hover {
	    background-color: var(--light-3) !important;
		color: var(--strong-3) !important;
		
	}
	
	.CodeButton:hover>.svg-light,.CodeButton:hover>*>.svg-light {
		fill : var(--light-3);
		stroke : var(--strong-3);
	}

	.CodeButton:hover>.svg-strong,.CodeButton:hover>*>.svg-strong {
		fill : var(--strong-3);
		stroke : var(--light-3);
	}

	.CodeButton:hover>.svg-light-fill,.CodeButton:hover>*>.svg-light-fill {
		fill : var(--strong-3);
		stroke : var(--strong-3);
	}

	.CodeButton:hover>.svg-strong-fill,.CodeButton:hover>*>.svg-strong-fill {
		fill : var(--light-3);
		stroke : var(--light-3);
	}


	.inputGen {
		width: 130px;
	}
	.submit_gen {
	    width: 100%;
		background-color: var(--strong-1);
		color: #fff;
		border:0px;
		text-align: center;
		border-radius: 5px;
	}
	#correction_ep, #correction_diam {
		width: 40px;
	}
	#select_coquille, #select_jonction, #L_chevron, #H_chevron, #segNum, #epaisseur, #diam_int {
		width: 100%;
	}
	#formGen {
		width: 350px;
	}
	.customSelectNewLine {
		background-color: var(--strong-2) !important;
	}
	#ivisual {
		height: 100%; width: 100%; height: 40px;
	}
	#but_auto {
		background: var(--light-5);; border: 0px; color: #fff; font-size: 18px;
	}
	#but_auto:hover {
		background: #999;
	}
	#button_abrasive {
		float: left; width: calc(100% - 2px);  margin-top: 3px; padding-left: 2px;
	}
	#button_high_pressure {
		float: left; width: calc(100% - 2px);  margin-top: 3px; margin-left: 2px; background: var(--light-5);;
	}
	#button_low_pressure {
		float: left; width: calc(100% - 2px);  margin-top: 3px; margin-left: 2px; background: var(--light-5);;
	}
	#but_fil {
		background: var(--light-5);; border: 0px; color: #fff; font-size: 18px;
	}
	#but_fil:hover {
		background: #999;
	}
	
	#but_fonct {
		background: var(--light-5);; border: 0px; color: #fff; font-size: 18px;
	}
	#but_fonct:hover {
		background: #999;
	}

	#but_variables {
		background: var(--light-5);; border: 0px; color: #fff; font-size: 18px;
	}
	#but_variables:hover {
		background: #999;
	}

	#Positions {
		background: var(--light-5); border: 0px; color: #fff; font-size: 18px;
	}
	#Positions td {font-size: 16px;line-height: 18px;padding-left: 5px;}
	.positionTd {
		font-size: 18px;
		max-width: 70px;
		text-align: right;
		padding-right: 5px;
		table-layout:fixed;
		overflow:hidden;
		word-wrap:break-word;
		width: 50%;
	}
	#but_3 {
		width: 100%; height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px;
	}
	#groupe1 {
		display: none;
	}
	#but_auto_ok {
		width: 100%; height: 40px; line-height: 40px; background: var(--strong-7); border: 0px; color: #fff; font-size: 18px; float: left;
	}
	#but_auto_ok:hover {
		background: #e5fe3e;
	}
	#but_manuel_ok {
		width: 100%; height: 40px; line-height: 40px; background: rgb(202, 133, 30); border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_manuel_ok:hover {
		background: #ffd54a;
	}
	#but_arret_ok {
		width: 100%; height: 40px; line-height: 40px; background: #E53138; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_arret_ok:hover {
		background: #ff6369;
	}

	#groupe2 {
		display: none;
	}

	#groupe5 {
		display: none;
	}
	#but_referenc_ok {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_referenc_ok:hover {
		background: #999;
	}
	#but_retour_ok {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_retour_ok:hover {
		background: #999;
	}
	#but_annulation {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_lancement {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_act_sim {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_act_abrasive {
		width: 100%; height: 50px; line-height: 50px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left;
	}
	#reprise {
		width: 100%; height: 40px; line-height: 40px; background: var(--light-5);; border: 0px; color: #fff; font-size: 18px; float: left; margin-top: 2px;
	}
	#but_reprise {
		width: 70%; height: 30px; line-height: 30px; font-size: 18px; float: left; margin-top: 5px; margin-left: 5px;
	}
	#low_pressure {
		width: 100%; height: 50px; line-height: 50px; border: 0px; color: #fff; font-size: 18px; float: left;
	}
	#high_pressure {
		width: 100%; height: 50px; line-height: 50px; border: 0px; color: #fff; font-size: 18px; float: left;
	}
	#but_low_pressure {
		width: calc(100% - 10px); height: 40px; line-height: 40px; font-size: 18px; float: left; margin-top: 5px; margin-left: 5px; text-align: center;
	}
	#but_high_pressure {
		width: calc(100% - 10px); height: 23px; line-height: 23px; font-size: 15px; float: left; margin-top: 2px; margin-left: 5px; text-align: center; line-height: 15px;
	}
	#select_low_pressure {
		width: calc(30% - 15px); height: 40px; line-height: 40px; font-size: 18px; float: left; margin-top: 5px; margin-left: 5px; text-align: center;
	}
	#select_high_pressure {
		width: calc(100% - 10px); height: 23px; line-height: 23px; font-size: 15px; float: left; margin-top: 2px; margin-left: 5px; text-align: center; line-height: 15px;
	}
	#select_position_reprise {
		width: calc(30% - 15px); height: 30px; line-height: 30px; font-size: 18px; float: left; margin-top: 5px; margin-left: 5px; text-align: center;
	}
	#but_annulation:hover {
		background: #999;
	}
	#vitdiv {
		background: var(--light-5); border: 0px; color: #fff; font-size: 18px; padding: 5px;
	}
	#inp_vit {
		z-index:2; width: 95%;
	}