/*
Dark.css
Auteur : Nicolas Desmarets
Copyright (c) 2019 Lockee.fr
*/
html {
	background: #202020;
	color: #DFDFDF;
}

.content{
	border-image-source: url("../imgs/content-dark.png");
}

.content:before{
	background-image: url("../imgs/corner-dark.png");
}

#close-dark{
	display: inline;
}
	
#close-light{
	display:none;	
}
	
.dark{
	display:initial;
}
	
.light{
	display: none;
}
	
h1, h2, h3, a {
	color: #DFDFDF;
}
	
textarea {
    background: #202020;
    color: #64B5F6;
    border-color: #DFDFDF;
}
	
textarea::placeholder{
	color: #323232;
}
	
.codeentry {
	background: #202020;
    color: #64B5F6;
	border-color: #DFDFDF;
}
	
.codeentry::placeholder {
	color: #323232;
}
	
#wrongcode {
	background: #E57373;
	color: #202020;
}
	
.delete {
	background: #323232;
}
	
.cancel {
	background: #E57373;
	color: #202020;
}
	
.confirm {
	background: #81C784;
	color: #202020;
}
	
#contentI #inputimagecontainer, #contentS #inputsoundcontainer {
	background: #64B5F6;
}
	
#contentI #inputimagelabel, #contentS #inputsoundlabel {
	color: #202020;
}

.menu-button {
	background: #64B5F6;
	color: #202020;
}
	
.menu-tab {
	background: #64B5F6;
}
	
.disabled {
	background: #323232;
	color: #DFDFDF;
}
	
.enabled {
	background: #64B5F6;
	color: #202020;
}
	
.touch {
	background: #64B5F6;
	color: #202020;
}

.mini {
	color: #202020;
	background: #DFDFDF;
}
	
#play, #position, #address {
	background: #DFDFDF;
	color: #202020;
}
	
#errors, #errors a {
	color: #E57373;
}
	
.controls {
	border-color: #DFDFDF;
}
	
.img-controls {
	background-position-x: right;
}
	
.social{
	background-position-x: right;
}
	
.qrscan {
	background: #323232;
}
	
.buttonscan {
	background: #A9A9A9;
	color: #202020;
}
	
.faq li.q {
	background: #323232;
	border-left-color: #FDFDFD;
	box-shadow: 0px 0px 2px #323232;
}
	
.piano-key .white{
	background: #FDFDFD;
	color: #272727;
	border-color: #272727;
}

.piano-key .black{
	background: #202020;
	color: #DFDFDF;
	border-color: #202020;
}

.key:active, .key.active {
	background: #64B5F6;
}
	
.onoff, .onoff div, .on {
	border-color: #DFDFDF;	
}
	
.on{
	background: #64B5F6;
	color: #202020;
}
	
.oos-switch {
	border-color: #A9A9A9;
}

.oos-inner:before {
	background: #64B5F6;
	color: #202020;
}

.oos-inner:after {
	background: #323232;
	color: #A9A9A9;
}
	
svg.schema g.lock-actives circle {
	fill: #64B5F6;
}
	
svg.schema g.lock-dots circle {
	fill: #DFDFDF;
}

svg.schema g.lock-lines line {
	stroke: #64B5F6;
}

svg.schema g.lock-arrows path {
	stroke: #202020;
}

#dropzone.active{
	border-color: #64B5F6;
}
.button{
	background: #64B5F6;
	color: #202020;
}
#btnApiStart, .start{
	background-color: #81C784;
}
#btnApiCancel, .stop{
	background-color: #E57373;
}
#btnApiReset {
	background-color: #E0E0E0;
}
#dropzone, #title-files, #files li,  {
	border-color: #DFDFDF;
}
#files button{
    border-color: transparent;
    color: #202020;
}
.progress{
	background-color: #323232;
}
.progress-bar{
	background-color: #64B5F6;
    color: #202020;
}
.bg-error{
	background-color: #E57373;	
}
.bg-warning{
	background-color: #FF6748;	
}
.bg-success{
	background-color: #81C784;	
}
.text-error{
	color: #E57373;
}
.text-warning{
	color: #FF6748;
}
.text-success{
	color: #81C784;
}

input[type="checkbox"].lock:checked:before {
	border-color: #202020;	
}

input[type="checkbox"].lock:after {
    border-color: #DFDFDF;
}

input[type="checkbox"].lock:checked:after {
    background-color: #64B5F6;
}

.R{
	background: #D32F2F;
	color: #FDFDFD;
	border:solid 1px #999;
}
.O{
	background: #F57C00;
	color: #FDFDFD;
	border:solid 1px #999;
}
.J{
	background: #FBC02D;
	color: #FDFDFD;
	border:solid 1px #999;
}
.P{
	background: #7B1FA2;
	color: #FDFDFD;
	border:solid 1px #999;
}
.B{
	background: #1976D2;
	color: #FDFDFD;
	border:solid 1px #999;
}
.V{
	background: #388E3C;
	color: #FDFDFD;
	border:solid 1px #999;
}
.N{
	background: #000000;
	color: #FDFDFD;
	border:solid 1px #999;
}
.G{
	background: #757575;
	color: #FDFDFD;
	border:solid 1px #999;
}
.W{
	background: #FFFFFF;
	color: #CACACA;
	border:solid 1px #999;
}
.M{
	background: #6D4C41;
	color: #FDFDFD;
	border:solid 1px #999;
}
.K{
	background: #F06292;
	color: #FDFDFD;
	border:solid 1px #999;
}
.I{
	background: #303F9F;
	color: #FDFDFD;
	border:solid 1px #999;
}