/* nunito-sans-regular - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/nunito-sans-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/nunito-sans-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-600 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('./fonts/nunito-sans-v8-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/nunito-sans-v8-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-700 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('./fonts/nunito-sans-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/nunito-sans-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-sans-800 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('./fonts/nunito-sans-v8-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/nunito-sans-v8-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}




* {box-sizing: border-box}
html, body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0px;
	background: #fff;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
	font-size: 1em;

	color: #3C3C3B;
	text-transform: uppercase;

	margin: 0;
	padding: 0;

	user-select: none;

}

p {margin: 0}

* { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Layout */

.container {
	display: grid;
	grid-template-areas: 
		"header header"
		"main aside"
		"footer footer";


	grid-template-columns: 70% 30%;  
	grid-template-rows: auto 1fr 0px;
	height: 100%;

 /* min-height: 100%;*/
}

.flex-container {
	display: flex;
}


header {
	grid-area: header;
	grid-row: 1;
	grid-column:  span 2;
	max-height: 100px;

	/*background-color: yellow;*/
}

main {
	grid-area: main;
	grid-row: 2;
	grid-column: 1; 

	min-height: 50%;

	/*background-color: lightblue;*/
}









aside{
	grid-area: aside;
	grid-row: 2;
	grid-column: 2; 

	overflow-y: auto;
	overflow-x: hidden;
		/*height: 100vh;*/

		min-width: 300px;

	/*background-color: blue;*/
}

footer {
	grid-area: footer;
	grid-row: 3;
	grid-column: span 2;
	max-height: 30px;

	/*background-color: #ffffff6e;
	bottom: 0px;
    position: absolute;
    width: 100%;*/
}

footer p {
	display: none;
	margin: 0;
	line-height: 25px;
	 font-size: 0.5em;
	text-align: center;
	font-weight: 400;
}



/* Works on Firefox */
aside {
	scrollbar-width: thin;
	scrollbar-color: lightgrey white;
}

/* Works on Chrome, Edge, and Safari */
aside::-webkit-scrollbar {
	width: 12px;
}

aside::-webkit-scrollbar-track {
	background: white;
}

aside::-webkit-scrollbar-thumb {
	background-color: lightgrey;
	border-radius: 20px;
	border: 3px solid white;
}

/* Decoration */



canvas:focus-visible {
	outline : none;
}

header, footer{
	
}

h1, h2 {
	display: inline-block;
	height: 25px;
	line-height: 28px;
}

h1 {	
	font-size: 1em;
	font-weight: 700;  
}

h2 {
	font-size: 0.8em;
	font-weight: 600;
	border-right: solid 4px #3C3C3B;
	padding-right: 5px;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-transform: inherit;
}


#preload {
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;

	text-align: center;
	z-index: 100;

	display: flex; 
	align-items: center; 
	justify-content: center; 
	text-align: center; 
	flex-direction: column;

	opacity: 1;


    /*display: none;*/
}

.preload-fade {
	opacity: 0 !important;
	pointer-events : none;
	transition: all 2.5s;
}

#preload p {
	margin: 20px;
	font-size: 10px;
}

#preload_logo {
	width: 230px;
	height: auto;
}

.path-filled { 
	transition: all 1s ease;
	fill-opacity: 1;
}



/* HEADER */ 
header .logo {
	flex-grow: 1;
}


header .logo img, header .logosvg svg{
	height: 63px;
    width: auto;

}

header .flex-container {
	padding: 10px;
}


#cv_header_close {
	padding-top: 14px;
	margin-left: 10px;
	cursor: pointer;

	display: none;
}



/* 3D */
#cv3d {
	width: 100%;
	height: 100%;
	
	/*background-color: blue;*/
}

 #cv3d img  {
	width : auto;
	height: 100%;
}

#views {
	width: 50px;	
	cursor: pointer;
}

#views span {
	display: inline-block;

	font-size: 0.6em;
	padding-left: 5px;
	
	

}

#views .border-bottom {
	background-color: white;
}

#views span:active, #views span:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

#views img {
	width: 25px;
}

#views span:nth-child(n + 3)  {
    margin-top: -4px;
}



/* BORDERS */ 
.border-bottom-bg {
	background-image: linear-gradient(#3C3C3B, #3C3C3B);
	background-size: 0% 5px;
	background-position: 0 calc(100% + 1px);
	background-repeat: no-repeat;
	transition: all 0.4s;
}

.animate-border-bottom-bg{
	 background-size: 100% 5px; 
}


.teinte .border-bottom-bg, .section.border-bottom-bg {
	background-position: 50% 100%;
	padding-bottom: 5px;
}



/* UI */

.ui {
	/*overflow-x: hidden;*/
	width: 100%;
	white-space: nowrap;


}

.steps {
	display: inline-block;
	width: 100%;
	vertical-align: top;

	padding: 0 10px;
}

#step2 {
	/*display : none;*/
	font-size: 0.8em;
		font-weight: 800;
}

.lame {
	margin-bottom: 15px;
	cursor: pointer;
}

.lame-button-container {
	display: flex;
}

.lame-button-container .arrow-right, .lame-button-container .arrow-left {
	    display: none;
}


.lame-nb {
	font-weight: 800;
	
	font-size: 0.8em;
}

.border-bottom {
	border-bottom: solid 4px #3C3C3B;
}

.lame-value {
	flex-grow: 1;
	text-transform: initial;
	font-style: italic;
	font-size: 0.8em;
	text-align: right;

	color: #9b9b9a;
}

.lame-value-complete {
	color: #3C3C3B;
	transition: all 0.4s;
}


.lame-content {
	text-align: center;
}

.section, .teinte, .lame .title {
	font-size: 0.7em;
}

.title {
	text-transform: initial;
}

.lame-content .title {
	margin : 1em 0px;
}


/* section */

.section-container {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	column-gap: 10px;
	padding-bottom: 5px;
}
.section{
	flex-basis: 40px;
	
}

.section-icon {
	/*border: solid 1px #3C3C3B;
	margin: 0 auto;*/
}

.section-icon-22x20 {
	/*width: 20px;
	height: 22px;*/
}

.section-icon-42-20 {
	/*width: 20px;
	height: 42px;*/
}

.section-container p {
	margin: 0px;
}



/* teintes */

.teintes-container {
	display: flex;
	flex-wrap: wrap;
}

.teinte {
	width: 82px;
	
}

.lame .teinte .zoom-icon {
	width: 10px;
	display: block;
	margin: 0 auto;
	margin-bottom : 2px;
}

.lame .teinte .teinte-thumb {
	width: 40px;
	height: 60px;
}

.teintes-container .teinte-name  {
	margin-top: 2px;
	margin-bottom: 2px;
}
	
.step-1-sticky {
	position: sticky;
	bottom: -1px;
	background-color: yellow;
	text-align: center;

background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5293679971988796) 49%, rgba(255,255,255,0) 100%);
}

.arrow-down{
	transform: rotate(270deg);
}

/*
* FORM
*/

/* devis */
#btn_devis_container {
	margin-top: 20px;
}

.btn_devis-alert {
	display: none;
}

#btn_devis_container .border-bottom-bg-loader {
	/*background: rgb(60,60,59);*/
	background-image: linear-gradient(90deg, rgba(60,60,59,1) 0%, rgba(60,60,59,1) 0%, rgba(60,60,59,0.50) 0%, rgba(60,60,59,0.51) 100%);
	background-size: 100% 5px !important;
	background-repeat: no-repeat !important;
	background-position: 0 calc(100% + 1px) !important;
	padding-bottom: 5px;
	transition: background-image 1s;

	color: #A2A0A5;
}

#btn_devis_container .border-bottom-bg-loader.complete {
	color: #3C3C3B;
	transition: color 0.3s;
}

.btn_devis {
	font-weight: 800;
	font-size : 0.8em;
}

.form-devis .form-title {
	margin-bottom: 15px;
}

.form-devis .border-bottom  {
	border: 0;
	border-bottom: solid 4px #3C3C3B;
	outline: 0;
}

.form-devis li .border-bottom  {
	border-bottom: solid 2px #3C3C3B;
}

.form-devis .border-bottom-right   {
	outline: 0;
		border: 0;
	border-bottom: solid 2px #3C3C3B;
	border-right: solid 2px #3C3C3B;
	margin-top: 25px;

}

.flex-outer,
.flex-inner {
	list-style-type: none;
	padding: 0;
}

.flex-outer {
	max-width: 800px;
	margin: 0 auto;
	margin-top : 20px;
}

.flex-outer li,
.flex-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.flex-inner {
	padding: 0 8px;
	justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
	margin-bottom: 10px;
}

.flex-outer li label,
.flex-outer li p {
	padding: 0px;
	/*font-weight: 600;*/
	/*letter-spacing: .09em;*/
	text-transform: uppercase;
}

.flex-outer > li > label,
.flex-outer li p {
	flex: 1 0 296px;
	max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
	flex: 1 0 220px;
}

.flex-outer li p {
	margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
	margin: margin: 0 0 5px 0;
	/*border: none;*/
	max-width: 250px;
}

.flex-outer li button {
	/*margin-left: auto;*/
	padding: 8px 16px;
	border: none;
	background: #333;
	color: #f2f2f2;
	text-transform: uppercase;
	letter-spacing: .09em;
	border-radius: 2px;
}

.flex-inner li {
	width: 100px;
}

.form-devis .checkbox-label {
	text-transform : initial;
	font-weight: 600;
	margin-bottom: 5px;
}

.form-devis .checkbox {
	margin-top: 20px;
	max-width: 471px;

}





.rgpd {
	font-size: 0.7em;
	white-space: normal;
}

.btn-container {
	width: 100%;
	text-align: left;
	margin-top: 20px;
	max-width: 470px;
}

.btn-container.get-pdf {
	text-align: left;
}

.btn-container.send-mail {
	
}

.border-full {
	border: solid 2px #3C3C3B;
}

.btn_send {
	padding: 10px 35px;
}

.icon-send {
	position: relative;
	top: 2px;
	width: 13px;
	left: 5px;
}

#btn_back_container {
	margin-top: 40px;
	/*text-align: center;*/
}

.btn_back.border-bottom {
	border-bottom: solid 2px #3C3C3B;
}


.ui-state-highlight {
	border-bottom: solid 2px #f5b3b3 !important;
}

.form-devis li .border-bottom.ui-state-error {
	border-bottom: solid 2px #f93535 ;
	transition: border 0.3s;
}

.form-devis li .border-bottom {

	transition: border 0.3s;
}

.validateTips {
	text-transform: initial;
    color: #f93535;
    border: 0;
    text-align: center;

    max-width: 470px;
    margin-top: 20px;
    font-weight: 600;
    white-space: normal;


}

.validateTips.complete {
    color: #3C3C3B;
}

.g-recaptcha {
    max-width: 400px;
    margin: 0 auto;
}

.btn-container.get-pdf.inactive {
	color: #ccc;
}

@keyframes get-pdf {
    0% {
        background-color: #ffffff;
        color: #3C3C3B;
    }
    25% {
        background-color: #3C3C3B;
        color: white;
    }
    75% {
        background-color: #ffffff;
         color: #3C3C3B;
    }
    100% {
        background-color: #3C3C3B;
        color: white;
    }
}

.get-pdf .btn_send.border-full {
	color: #ccc;
	background: #3C3C3B;
	color: white;
	/*transition: color 1s;
	transition: background 1s;

	animation-name: get-pdf;
    animation-duration: 2500ms;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;*/
}



.get-pdf.inactive .btn_send.border-full {
	color: unset;
	color: #3C3C3B;
	border: solid 2px #ccc;
	background: unset;
	background: white;

	/* -webkit-animation-name: get-pdf;
    -webkit-animation-duration: 2500ms;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: ease-in-out;*/

}

.btn_send.border-full:hover {
	opacity: 0.9;
}




/*
* MAIN GRID 
*/

:root {
	--columns: 12;
}

main {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	grid-template-rows:  100% ;
	grid-template-rows: 1fr 15px;
}

#cv3d {
	grid-column-start: 1;
	grid-column-end: span var(--columns);
	grid-row-start: 1;
	grid-row-end: 3;
}

#views {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;

	align-self: center;

	z-index: 2;
}

.main-footer {
	font-size: 0.5em;
    text-align: center;
    font-weight: 400;
    
    grid-column-start: 1;
    grid-column-end: span var(--columns);
    grid-row-start: 2;
    grid-row-end: 3;
    
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #ffffffb5;
}

.cv-love {
	width: 7px;
	height: 7px;
}


/*
*  Position the .navi element to span all columns
*/
#main_overlay {

	grid-column-start: var(--columns);
	grid-column-end: span 1;
	grid-row-start: 1;
	/*place-self: center;*/
	/*grid-template-rows: 40px;*/
	
	z-index: 2;
	/*background-color: yellow;*/
}



/*
* OVERLAY 
*/

/*
* VIEWS
*/


/*
* ZOOM CONTAINER
*/

.zoom-container {
	position: relative;

	grid-column: 12;
	grid-row: 1;
	z-index: 2;

	border-bottom: solid 4px #3C3C3B;
	border-top: solid 4px #3C3C3B;
	border-left: solid 4px #3C3C3B;

	z-index: 3;

	display : none;
}

 .zoom-img {
	height: 100%;
}




/* Responsive */

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

	.container {
	 grid-template-columns: 1fr 0.6fr;
	}



}

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

	.container {
	 grid-template-columns: 1fr 0.8fr;
	}

}


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

	header .flex-container {
	    padding: 5px;
	}

	h1, h2 {
		font-size : .7em;
	}

	header .logo img, header .logosvg svg{
		height: 40px;
		width: auto;
	
	}

	.step-1-sticky {
		display : none !important;
	}

	.container {
		grid-template-areas:
				"header"
				"main"
				"aside"
				"footer";
		grid-template-columns: 100%;
		grid-template-rows: 50px 1fr 150px 30px;
	}

	.container-step2 {
		grid-template-areas:
				"header"
				"main"
				"aside"
				"footer";
		grid-template-columns: 100%;		
		grid-template-rows: 50px 20% 1fr 0px;
	}

	main {
		grid-column: span 2;
	}

	aside {
		grid-column: span 2;
		grid-row: 3;

		overflow-y: hidden;
	}

	aside.responsive-step2 {
		overflow-y: scroll;
	}

	footer {
		grid-row: 4;
		grid-column: span 2;
		display: none;
	}

	.main-footer {display: none;}

		/* 3D */
	#cv3d {

		/*max-height: 600px;*/

	}

	.container-step2 #views {
		display: none;
	}

	#views {
	    width: 30px;	   
	}

	#views span {
	    font-size: 0.4em;
	}

	#views img {
		width: 15px;
	}

	.ui {
		/*overflow-x: hidden;*/
	}

	#step1 {
		/*width: 2000%;*/
		margin-left : 00px;
		/*overflow-x: scroll;*/
	}

	#step2 {
		display:none;
		font-size: 0.6em;
	}

	.lame {
		display: inline-block;
		width: 100vw;
		margin-bottom: 0px;
	}

	.lame-button-container {
			display: flex;
	    justify-content: center;
	    gap: 10px;
	   /* width: 100vw;*/
	}

	.lame-button-container .arrow-left, .lame-button-container  .arrow-right {
		    display: inline-block;
	}

	.arrow-right {
		    transform: scaleX(-1);
	}



	.animate-border-bottom-bg {
	    background-size: 100% 3px;
	}

	.border-bottom-bg {
	    background-size: 0% 3px;
	}

	.lame-content {
		display: grid !important;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    grid-template-areas:
        "title-section title-teinte"
        "section teintes";
    column-gap: 15px;
		overflow-x: scroll;

		padding: 0 10px;
	}

	.title-section {
		grid-area : title-section;
	}

	.title-teinte {
		grid-area : title-teinte;
	}

	.section-container {
		grid-area : section;
	}

 	.teintes-container {
		grid-area : teintes;
	}

	.lame-content .title {
   		margin: 3px 0px;
	}

	.lame-nb.border-bottom {
		border: 0;
	}

	.lame-content .title {
		 display: inline-block;
		 text-align: left;
	}

	.section-container, .teintes-container {
		display: flex;
    
    justify-content: center;
    column-gap: 1px;
    padding-bottom: 5px;
    flex-wrap: nowrap;
	}

 	.teintes-container {
	 	align-items:	flex-start;
	}

 	.section-container {
	 align-items:	center;
	 column-gap: 10px;
	}

	.lame-nb.border-bottom {
		border: 0;
	}

	.lame-value {
		flex-grow: 0;
		text-transform: uppercase;
		font-style: normal ;
	}

	.teinte {
	width: 77px;
	
	}

		.lame .teinte .teinte-thumb {
	    width: 40px;
	    height: 60px;
	}

	.teintes-container .teinte-name {

	     margin-bottom: 0px; 
	         padding-bottom: 0px;
	}

	.lame-content .selected {
		font-weight: 800;
	}

	.zoom-container {
		position: static;
		grid-column: 2/11;
		border-right: solid 4px #3C3C3B;
		height: 100% !important;

	}

	.zoom-img {
		height: 100%;
	    width: 100%;
	}


	#btn_devis_container {
	  margin-top: 0px;
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  bottom: 0px;

	  width: 100%;
	  /*display: none;*/
	}

	#btn_devis_container .border-bottom-bg-loader {
		width: 100%;
		padding-top: 7px;
		background-size: 100% 100% !important;
		color: #F6EFE6;
	}

	#btn_devis_container .border-bottom-bg-loader {
		background-image:linear-gradient(90deg, rgb(222, 190, 151) 0%, rgb(222, 190, 151) 0%, rgb(230, 216, 199) 0%, rgb(230, 216, 199) 100%);
		color: #F6EFE6;
	}

	.btn_devis-alert {
		color: #7c7265;
		font-size: 0.7em;
	}

	.btn_devis.border-bottom-bg-loader.complete {
		background-image: unset !important;
		background-color: #e6d8c7;
	}



	/*
	* FORM
	*/
	.flex-outer > li > label, .flex-outer li p {
	    flex: 1 0 auto;
	    max-width: initial; 
	}

	.flex-outer > li > label + *, .flex-inner {
	    flex: 0 1 auto;
	}

}


@media screen and (max-width: 344px) {
	.flex-outer > li > label, .flex-outer li p {
	    flex: 1 0 125px;
	    max-width: initial;
	}
}



/* helpers */

.cv-hidden {
	display : none
}



/* cursors */

.rotate-cursor {
	cursor: url("img/cursors/svg/cursor-orbit.svg") 10 10, auto;
}

.pointer-cursor {
	cursor: pointer;
}

.auto-cursor {
	cursor: auto;
}

.cursor01 {
	cursor: url("img/cursors/svg/cursor01.svg") 10 10, auto;
}

.cursor02 {
	cursor: url("img/cursors/svg/cursor02.svg") 10 10, auto;
}

.cursor03 {
	cursor: url("img/cursors/svg/cursor03.svg") 10 10, auto;
}

.cursor04 {
	cursor: url("img/cursors/svg/cursor04.svg") 10 10, auto;
}

.cursor05 {
	cursor: url("img/cursors/svg/cursor05.svg") 10 10, auto;
}

.cursor06 {
	cursor: url("img/cursors/svg/cursor06.svg") 10 10, auto;
}

.cursor07 {
	cursor: url("img/cursors/svg/cursor07.svg") 10 10, auto;
}

.cursor08 {
	cursor: url("img/cursors/svg/cursor08.svg") 10 10, auto;
}

.cursor09 {
	cursor: url("img/cursors/svg/cursor09.svg") 10 10, auto;
}


.cursor10 {
	cursor: url("img/cursors/svg/cursor10.svg") 10 10, auto;
}

.cursor11 {
	cursor: url("img/cursors/svg/cursor11.svg") 10 10, auto;
}

.cursor12 {
	cursor: url("img/cursors/svg/cursor12.svg") 10 10, auto;
}




/* checkbox */

.control {
   
    display: block;
    position: relative;
    padding-left: 30px;

    padding-top: 3px;
    cursor: pointer;
    
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 0px solid #000000;
    border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #3C3C3B;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}



.dat-cv {
	background-color: #e8e8e8;
    text-align: center;
}

.dat-cv img {
	width: 120px;
    height: 100%;
}

/*
.lil-gui {
	--background-color: #f6f6f6;
	--text-color: #3d3d3d;
	--title-background-color: #efefef;
	--title-text-color: #3d3d3d;
	--widget-color: #eaeaea;
	--hover-color: #f0f0f0;
	--focus-color: #fafafa;
	--number-color: #07aacf;
	--string-color: #8da300;
}
*/