/* Container */
.rdp
{
	float: left;
	position: absolute;
	background: #ffffff;
	width: 450px;
}

.stat
{
	background: #eeeeee;
	position: absolute;
	right: 0px;
	width: 250px;
	height: 598px;
}

.stat_hdr
{
	display: grid;
	grid-template-rows: 23px;
	grid-template-columns: 240px;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: #999999;
	color: #ffffff;
	margin: 2px;
}

.stat_in1
{
	width: 100%;
	border: 0px;
	padding: 0px;
	text-align: right;
	background: #fed969;
	outline: none;
}

.stat_in2
{
	width: 100%;
	border: 0px;
	padding: 0px;
	text-align: right;
	background: #fed969;
	outline: none;
	font-size: 12px;
}

.stat_inv
{
	border: 1px solid red;
	padding: 0px;
	text-align: right;
	background: #e95327;
	outline: none;
	font-size: 12px;
}

.sft_edit
{
	width: 100%;
	border: 0px;
	padding: 0px;
	text-align: center;
	outline: none;
	font-size: 24px !important;
	background: #fed969;
}

#entry_list
{
	list-style-type: none; 
	margin: 5px;
	padding: 0px;
}

.shift_edit_cll
{
	width: 100px;
	text-align: center;
	font-size: 18px !important;
	margin: 3px;
	white-space:pre;
	border: 1px solid white;
	-webkit-box-shadow: 1px 1px 4px 0px #ffffff; 
	box-shadow: 1px 1px 4px 0px #ffffff;
}

.shift_edit_cll:hover
{
	border: 1px solid black;
	-webkit-box-shadow: 1px 1px 4px 0px #000000; 
	box-shadow: 1px 1px 4px 0px #000000;
	cursor: pointer;
}

#rollout
{
	border: 1px solid black;
	position: absolute;
	left: 50px;
	top: -50px;
	display: grid;
	grid-template-rows: 20px;
	grid-template-columns: 20px 20px 20px 20px 20px 20px 20px;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	z-index: 90;
	background: white;
	opacity: 1.0;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8); 
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8);
}

.rollout_hdr
{
	font-size: 10px;
	height: 100%;
	display: flex;
	margin: 1px;
	background: #cccccc;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.rollout_cll
{
	font-size: 12px;
	display: flex;
	margin: 1px;
	background: #cccccc;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	white-space:pre;
	height: 16px;
}

.apply_rdp
{
	display: grid;
	grid-template-rows: 25px;
	grid-template-columns: 90px 60px 95px;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	outline: none;
}

#apply_date
{
	margin: 2px;
	padding: 4px;
	width: 70px;
	height: 18px;
	outline: none;
	border: 1px solid #c5c5c5;
}

#apply_week
{
	width: 20px;
	outline: none;
}

#apply_start
{
	width: 80px;
	height: 27px;
	padding: 0px;
	background: #ffffff;
}

#data_open
{
	width: 80px;
	height: 27px;
	padding: 0px;
	background: #ffffff;
}

#data_save
{
	width: 80px;
	height: 27px;
	padding: 0px;
	background: #ffffff;
}

#rdpOpen
{
	display: none;
	opacity: 0.0;
}

input.stat_in1:focus, input.stat_in1:active, input.stat_in2:focus, input.stat_in2:active
{
	border: 1px solid black;	
	background: #fec306;
}

.stat_sep
{
	display: grid;
	grid-template-rows: 13px;
	grid-template-columns: 240px;
}

.stat_row
{
	display: grid;
	grid-template-rows: 25px;
	grid-template-columns: 150px 40px 50px;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_subrow
{
	display: grid;
	grid-template-rows: 18px;
	grid-template-columns: 150px 40px 50px;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_ttl
{
	margin: 2px;
	font-size: 14px;
	text-align: right;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_lbl
{
	margin: 2px;
	font-size: 11px;
	text-align: left;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_sub
{
	margin: 2px;
	font-size: 9px;
	text-align: right;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_val
{
	background: #dddddd;
	margin: 2px;
	font-size: 14px;
	text-align: right;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_subval
{
	background: #dddddd;
	margin: 2px;
	font-size: 12px;
	text-align: right;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.stat_unit
{
	margin: 2px;
	font-size: 8px;
	text-align: left;
	vertical-align: middle;
}

.highlight
{
	border: 2px solid #eeeeee !important;
    	animation: highlighting 2s infinite;
}

@keyframes highlighting
{
    	0%   { opacity: 1.0; }
    	50%  { opacity: 0.5; }
    	100% { opacity: 1.0; }
}

.markdays
{
	color: #ff0000 !important;
	stroke: red;
	stroke-width: 1 !important;
    	animation: marking 2s infinite;
}

@keyframes marking
{
    	0%   { opacity: 1.0; }
    	50%  { opacity: 0.5; }
    	100% { opacity: 1.0; }
}

.marktwt
{
	color: #ff0000 !important;
    	animation: twtmarking 2s infinite;
}

@keyframes twtmarking
{
    	0%   { opacity: 1.0; }
    	50%  { opacity: 0.2; }
    	100% { opacity: 1.0; }
}

/* Generic row with 8 columns */
.rdp_row
{
	display: grid;
	grid-template-rows: 25px;
	grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px;
}

/* Entire weeks row */
.rdp_roww
{
	display: grid;
	grid-template-rows: 25px;
	grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 25px;
}

/* Cell for column header (section and weekdays) */
.rdp_day_hdr
{
	display: flex;
	margin: 2px;
	background: #999999;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

/* Generic cell */
.rdp_cll
{
	font-size: 12px;
	display: flex;
	margin: 2px;
	background: #eeeeee;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

#rdp_shifts
{
	height: 350px;
}

/* Shift cell */
.rdp_shift
{
	cursor: move;
}


/* Cell for row header (weeks) */
.rdp_week
{
	display: flex;
	margin: 2px;
	background: #cccccc;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	cursor: move;
}

/* Cell for add button */
#rdp_add
{
	background: none;
	border: 0;
	margin: 4px;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

/* Cell for del button */
.rdp_del
{
	background: none !important;
	border: 0 !important;
	margin: 4px;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
}

/* Cell for sum header */
.rdp_sum
{
	display: flex;
	margin: 2px;
	background: #eeeeee;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	cursor: move;
}

/* Shifttype FREI */
.rdp_sft0
{
	background: #eeeeee;
	color: #000000;
	font: bold 14px Arial, Helvetica, sans-serif;
}

/* Shifttype FRUEH */
.rdp_sft1
{
	background: #418ab3;
	color: #ffffff;
	font: bold 14px Arial, Helvetica, sans-serif;
}


/* Shifttype MITTE */
.rdp_sft2
{
	background: #f69200;
	color: #222222;
	font: bold 14px Arial, Helvetica, sans-serif;
}

/* Shifttype SPAET */
.rdp_sft3
{
	background: #fec306;
	color: #222222;
	font: bold 14px Arial, Helvetica, sans-serif;
}

/* Shifttype NACHT */
.rdp_sft4
{
	background: #838383;
	color: #ffffff;
	font: bold 14px Arial, Helvetica, sans-serif;
}

/* Shifttype OFFEN */
.rdp_sft5
{
	background: #a6b727;
	color: #222222;
	font: bold 14px Arial, Helvetica, sans-serif;
}

.rdp_sft6
{
	background: #a6b727;
	color: #222222;
	font: bold 14px Arial, Helvetica, sans-serif;
}

.ui-draggable-dragging
{
	width: 50px;
	height: 25px;
	border: 1px solid black;
	z-index: 50;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8); 
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8);
}

.ui-droppable-hover
{
	border: 1px solid black !important;
}

.ui-sortable-helper
{
	border: 1px solid black;
	background: #ffffff;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8); 
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.8);
}

#rdp-helper
{
	position: relative;
	left: 30px;
}

.arrow-left 
{
	position: relative;
	left: -10px;
	top: 0px;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid red; 
}