[data-theme="dark"] {
  --background-color	: #3F3F3F;
  --text-color			: #ddd;
}

html[data-theme="dark"],
[data-theme="dark"] body{
	background	: #111;
}

[data-theme="dark"] input, textarea, select{
	border: solid 1px #777;
}

[data-theme="dark"] button{
	color: #ddd;
	background-color: #555;
}
[data-theme="dark"] button:hover, [data-theme="dark"] button:focus {
    background-color: #333;
}
[data-theme="dark"] button:disabled {
	background-color: #555;
}

[data-theme="dark"] .main-container select,
[data-theme="dark"] .main-container input,
[data-theme="dark"] .popup_container select,
[data-theme="dark"] .popup_container input,
[data-theme="dark"] .main-container textarea,
[data-theme="dark"] .popup_container textarea{
	background-color: #333;
	border: solid 1px #777;
}


[data-theme="dark"] .title{
	color		: #CCB001;
	transition	: all 0.3s ease;
}

[data-theme="dark"] input, [data-theme="dark"] textarea{
	background	: #222;
}

[data-theme="dark"] .btn-yellow{
	background	: #CCB001;
	color		: #000;
	border-bottom	: solid 3px #AA9000;
}
[data-theme="dark"] .btn-yellow:hover{
	background	: #FFE446;
	border-bottom	: solid 3px #EEC224;
}


[data-theme="dark"] .body_container{
	background	: #222;
	transition	: background 0.3s ease;
}

[data-theme="dark"] .separator{
	border-top			: solid 3px #BBA100;
	border-bottom		: solid 2px #BB9000;
	transition			: all 0.3s ease;
}