/************************************/
/*** Date picker                  ***/
/************************************/

record-picker {
	display: inline-block;
	margin: 0.2em;
	vertical-align: middle;
}

.record-picker-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: inline-grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;	
}

.record-picker-input { 
	width: 100%; 
	margin: 0 !important; 
	background: var(--input-backgnd); 
}

.record-picker-input.undefined {
	color: var(--global-border-color);
}

.record-picker-input.disabled {
	color: var(--disabled-color);
	background-color: var(--inactive-backgnd);
}

.record-picker-popup {
	position: fixed;
	left: 50%;
	top: 50%;
 	transform: translate(-50%, -50%);
 	height: 30em;
 	max-width: 95%;
 	max-height: 95%;
	overflow: auto;
	padding: 0.5em 0.7em 0 0.7em;
}

.record-picker-popup:empty {
	display: none;
} 

.record-picker-letterheader {
	padding: 0.2em 0.5em;
	font-size: 120%;
	font-weight: bold;
	background: var(--gray-backgnd);
}

.record-picker-cellcontainer {
	display: grid;
	grid-column-gap: 0.2em;
	grid-row-gap: 0.2em;
	margin: 0.3em 0 0.7em 0;
}

.record-picker-cell {
	display: inline-block;
	padding: 0.2em 0.5em;
	border: 1px dashed transparent;
	border-radius: var(--widget-border-radius);
}

.record-picker-cell:active {
	background: var(--selected-backgnd);
	color: var(--selected-color);
}

.record-picker-cell.preselected {
	border-color: var(--global-border-color);
}

.record-picker-cell .recorddescription-columns {
	color: var(--global-border-color);
}

.record-picker-cell:active .recorddescription-columns {
	color: var(--selected-color);
}