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

html[data-darkmode="true"],
[data-darkmode="true"] body{
	background			: #111;
	color				: #888;
}

[data-darkmode="true"] section.body-tab{
	border-left		: solid 1px #333;
    box-shadow		: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	background		: #111;
}


[data-darkmode="true"] .background-grey {
    background: #111;
}


/*--------------------------------------------*/
/**/
[data-darkmode="true"] input,
[data-darkmode="true"] textarea,
[data-darkmode="true"] select{
	border				: solid 1px #555;
	background			: #111;
}
[data-darkmode="true"] button{
	color				: #888;
	background-color	: #333;
	border				: none;
}
[data-darkmode="true"] button:hover, [data-darkmode="true"] button:focus {
    background-color	: #333;
	color				: #999;
}
[data-darkmode="true"] button:disabled,
[data-darkmode="true"] button:disabled:hover, 
[data-darkmode="true"] button:disabled:focus{
	color				: #555;
	background-color	: #333;
	border				: none;
}

/*--------------------------------------------*/
/**/
[data-darkmode="true"] button.btn-action{
	background-color	: #025060;
	color				: #999;
}
[data-darkmode="true"] button.btn-action:hover{
	background-color	: #126070;
}
[data-darkmode="true"] button.btn-action:disabled,
[data-darkmode="true"] button.btn-action:disabled:hover{
	color				: #555;
	background-color	: #333;
	border				: none;
}

/*--------------------------------------------*/
/**/
[data-darkmode="true"] button.btn-submit{
	background-color	: #026050;
	color				: #AAA;
}
[data-darkmode="true"] button.btn-submit:hover{
	background-color	: #127060;
}


[data-darkmode="true"] button.btn-submit:disabled,
[data-darkmode="true"] button.btn-submit:disabled:hover{
	color				: #555;
	background-color	: #333;
	border				: none;
}

/*--------------------------------------------*/
/**/
[data-darkmode="true"] button.btn-warning{
	border					: solid 1px #500714;
	background-color		: #510916;
	color					: #999;
}
[data-darkmode="true"] button.btn-warning:hover{
	background-color		: #601724;
}
[data-darkmode="true"] button.btn-warning:disabled,
[data-darkmode="true"] button.btn-warning:disabled:hover{
	color					: #555;
	background-color		: #333;
	border					: none;
}


/*--------------------------------------------*/
/**/
[data-darkmode="true"] .title{
	color		: #CCB001;
	transition	: all 0.3s ease;
}

[data-darkmode="true"] input,
[data-darkmode="true"] select,
[data-darkmode="true"] textarea{
	*background	: #111;
	color		: #777;
}

[data-darkmode="true"] img{
	filter: brightness(0.8);
}


[data-darkmode="true"] .popup-container{
	background-color	: rgba(20, 20, 20, 0.5);
	backdrop-filter		: blur(2px);
}
[data-darkmode="true"] .popup-box{
	color				: #777;
	background-color	: #222;
    box-shadow			: 0 0px 5px 0px rgba(0, 0, 0, 0.2);
}
[data-darkmode="true"] .popup-header-closeBtn{
	background			: transparent;
	color				: #777;
}



/*--------------------------------------------*/
/*--------------------------------------------*/
/* Basic Layout */
[data-darkmode="true"] .left-container{
	background			: #222;
}


/*--------------------------------------------*/
/* Left Panel */
[data-darkmode="true"] .panel-left .pagetitle-container{
	background-color	: rgba(20, 20, 20, 0.5);
	border-bottom		: solid 1px #333;
    border-left			: solid 1px #333;
    border-right		: solid 1px #333;
}
[data-darkmode="true"] .panel-left .main-pagetitle{
	color				: #999;
}
[data-darkmode="true"] .navigation-left-item .navigation-left-item-expand{
	color				: #444;
}

[data-darkmode="true"] .navigation-left-bottom{
	border-top			: solid 1px #444;
}

/*--------------------------------------------*/
/* Right Panel */
[data-darkmode="true"] .searchbar-container{
	color		: #777;
	background	: #333;
}