/**
 * The date and time popup component css objects.
 *
 * @author		ivo.fortes@maria-design.pt
 * @date		2019-04-24
 * @version		1.0
 */
/* Popup panel. */
.maria_design-component-datetime_popup {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2;
	color: #000000;
	width: 280px;
	font-family: Arial, Verdana;
	font-size: 12px;
	border-radius: 10px;
}

.maria_design-component-datetime_popup table {
	border-collapse: collapse;
	background-color: #ffffff;
	border: none;
	width: 100%;
}

.maria_design-component-datetime_popup th {
	padding: 5px;
	width: 14%;
	color: #ffffff;
	background-color: #282627;
	text-align: center;
}

.maria_design-component-datetime_popup td {
	padding: 4px 0 4px 0;
	color: #000000;
	cursor: pointer;
	text-align: center;
	background: #f4f4f4;
}

.maria_design-component-datetime_popup td:hover {
	background-color: #cccccc;
}

.maria_design-component-datetime_popup .active_cell {
	background-color: #aa0000;
	color: #ffffff;
}

.maria_design-component-datetime_popup .active_cell:hover {
	background-color: #333333;
}


/* Header panel. */
.maria_design-component-datetime_popup>.header_panel td {
	padding: 5px 0 5px 0;
	color: #ffffff;
	font-weight: bold;
	background-color: #555555;
	border-bottom: none;
}

.maria_design-component-datetime_popup>.header_panel td:hover {
	background-color: #999999;
}


/* Days panel. */
.maria_design-component-datetime_popup>.days_panel {
	display: none;
}


/* Months panel. */
.maria_design-component-datetime_popup>.months_panel {
	display: none;
}

.maria_design-component-datetime_popup>.months_panel td {
	width: 33%;
	height: 30px;
}


/* Years panel. */
.maria_design-component-datetime_popup>.years_panel {
	display: none;
}

.maria_design-component-datetime_popup>.years_panel td {
	width: 20%;
}


/* Time panel. */
.maria_design-component-datetime_popup>.time_panel {
	display: none;
	background-color: #666666;
	border: #333333 1px solid;
}

.maria_design-component-datetime_popup>.time_panel canvas {
	cursor: pointer;
}


/* Footer panel. */
.maria_design-component-datetime_popup>.footer_panel {
	float: right;
	width: 30%;
}

.maria_design-component-datetime_popup>.footer_panel button {
	margin: 0;
	width: 100%;
	padding: 4px 0 4px 0;
	color: #ffffff;
	background-color: #aa0000;
	border: none;
	border-top: none;
	outline: none;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

.maria_design-component-datetime_popup>.footer_panel button:hover {
	background-color: #999999;
}