com.phloxui/styles/component/editor/CalendarView.less

PhloxUI Ng2+ Framework

.ua-chrome {
	.phx-calendar-view {
		>.header {
			.left {
				.switch {
					margin-top: @CALENDAR_HEADER_SWITCH_MARGIN_TOP_WINDOW !important;
				}
			}
		}
	}
}

.phx-calendar-view {
	height: 100%;
	width: 100%;
	cursor: default;

	-webkit-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Firefox < 16 */
        -ms-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Internet Explorer */
         -o-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Opera < 12.1 */
            animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION;

	&.hide {
		display: none;
	}

	>.header{
		height: @CALENDAR_VIEW_HEADER_HEIGHT;
		width: 100%;
		position: absolute;
		z-index: 2;

		>.wrapper{
			width: 100%;
			height: 100%;
			position: relative;
			border-bottom: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

			>.row {
				height: 100%;
			}

			// header left
			.left {
				padding-left: 0;
				padding-right: 0;
				height: 100%;

				>.center-wrapper {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;

					>div {
						width: 100%;
						position: relative;

						>.switch-container {
							width: @CALENDAR_HEADER_SWITCH_CONTAINER_WIDTH;
							position: absolute;
							top: 0;
							z-index: 2;
							height: 100%;

							.phx-switch {
								margin: 0;
								margin-left: @CALENDAR_HEADER_SWITCH_MARGIN_LEFT;

								>label{
										margin-top: -5pt;
								}

								// edit switch size
								& input.toggle + label {
									height: @CALENDAR_HEADER_SWITCH_HEIGHT;
									width: @CALENDAR_HEADER_SWITCH_WIDTH;
								}

								& input.toggle + label:before {
									height: @CALENDAR_HEADER_SWITCH_HEIGHT;
									width: @CALENDAR_HEADER_SWITCH_HEIGHT;
								}

								& input.toggle + label:after {
									height: @CALENDAR_HEADER_SWITCH_HEIGHT;
									width: @CALENDAR_HEADER_SWITCH_HEIGHT;
								}

								& input.toggle:checked + label:before {
									width: @CALENDAR_HEADER_SWITCH_WIDTH;
								}

								& input.toggle:checked + label:after {
									left: @CALENDAR_HEADER_SWITCH_AFTER_TOGGLE_LEFT;
								}
							}
						}

						>.dropdown-container {
							position: absolute;
							width: @CALENDAR_HEADER_LIST_BOX_WIDTH;
							padding-left: @CALENDAR_HEADER_SWITCH_CONTAINER_WIDTH;
							top: 0;
							margin-top: -10pt;

							/** start div **/
							>div{
								position: relative;
								width: 100%;
								height: 100%;

								&.show{
									// border-left: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR; // open if u want to use border here
								}

								.component-dropdown {
									>.dropdown {
										>.label {
											.FC2();
											>button {
												>div {
													height: @CALENDAR_HEADER_LIST_BOX_HEIGHT;
												}
											}
										}
									}
								}
							}
							/** end div **/
						}

					}
				}
			}

			// header right
			.right{
				padding-left: 0;
				padding-right: 0;
				height: 100%;

				>.center-wrapper {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;

					>div {
						width: 100%;
					}
				}
			}

			// header center
			.center{
				padding-left: 0;
				padding-right: 0;
				padding-top: @CALENDAR_VIEW_HEADER_PADDING_TOP;
				padding-bottom: @CALENDAR_VIEW_HEADER_PADDING_TOP;
				height: 100%;
				text-align: center;

				>.center-wrapper {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;

					>.border-wrapper {
						border-left: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
						border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
						width: 100%;

						> div{
							width: 100%;

							> * > div:first-child {
								width: 20%;
								cursor:pointer;
							}

							> * > div:nth-child(2) {
								width: 50%;
								cursor:pointer;
							}

							> * > div:last-child {
								width: 20%;
								cursor:pointer;
							}

							> * > div {
								display: inline-block;
							}
						}
					}
				}
			}

			.left-angle, .right-angle{
				color: extract(@CLR_0, 1);
			}
		}
	}

	.row{
		margin-left: 0;
		margin-right: 0;

		> div{
			padding-left: 0;
			padding-right: 0;
		}
	}

	.day-label{
		.FC1();
		color: @CLR_FIXED_FONT;
		text-align: center;
	}

	>.body{
		height: @CALENDAR_VIEW_BODY_HEIGHT;
		width: 100%;
		padding-top: @CALENDAR_VIEW_HEADER_HEIGHT;
		position: absolute;

		>.wrapper {
			position: relative;
			width: 100%;
			height: 100%;

			> div{
				display: none;

				&.active{
					display: block;
				}
			}

			.month-view{
				position: relative;
				width: 100%;
				height: 100%;

				>.day-header-wrapper {
					position: absolute;
					z-index: 1;
					width: 100%;

					>.day-header{
						background-color: extract(@CLR_1, 8);
						height: @CALENDAR_VIEW_DAY_MONTH_HEADER_HEIGHT;
						position: relative;

						>.row {
							height: 100%;
							display: flex;
							align-items: center;
						}
					}
				}

				>.container-wrapper {
					position: absolute;
					padding-top:  @CALENDAR_VIEW_DAY_MONTH_HEADER_HEIGHT;
					width: 100%;
					height: 100%;

					>.container{
						height: 100%;
						width: 100%;
						padding-left: 0;
						padding-right: 0;
						position: relative;

						>.row-container{
							width: 100%;
							height: 100%;
							position: absolute;

							>.row{
								height: @CALENDAR_VIEW_DAY_MONTH_HEIGHT;
							}
						}

						.entry-wrapper{
					        position: absolute;
					        top: 0;
					        width: @CALENDAR_VIEW_DAY_MONTH_ENTRY_WIDTH;
							height: @CALENDAR_VIEW_DAY_MONTH_ENTRY_HEIGHT; // do not remove this line of code
							padding-top: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;
							padding-bottom: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;

							>.entry{
								position: relative;
								width: 99%;
								height: 100%;

								&.sub-entry{
									border-radius: @CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS 0 0 @CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS;

									>.content-wrapper{
										padding-left: 0;
									}
								}

								&.continue{
									border-radius: 0 @CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS @CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS 0;
								}

								&.sub-entry.continue{
									border-radius: @CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS;
								}
							}

							&.dragging{
								>.entry{
									&.sub-entry{
									 	display: none;
									}
								}
							}
					    }
					}
				}

				.more-entry-wrapper{
					position: absolute;
				    top: 0;
				    width: @CALENDAR_VIEW_DAY_MONTH_ENTRY_WIDTH;
					height: @CALENDAR_VIEW_DAY_MONTH_ENTRY_HEIGHT;
					padding-top: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;
					padding-bottom: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;

					>.more-entry{
						position: relative;
						width: 100%;
						height: 100%;
						text-align: center;
						color: @CLR_BRAND;
					}
				}

				.temp-entry-wrapper{
					position: absolute;
				    top: 0;
				    width: @CALENDAR_VIEW_DAY_MONTH_ENTRY_WIDTH;
					height: @CALENDAR_VIEW_DAY_MONTH_ENTRY_HEIGHT; // do not swipe or remove this line
					padding-top: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;
					padding-bottom: @CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING;
					display: none;
					z-index: 1;

					>.temp-entry{
						position: relative;
						width: 100%;
						height: 100%;
					}
				}

				.temp-row-container{
					width: 100%;
					height: @CALENDAR_VIEW_DAY_MONTH_HEIGHT; // do not swipe or remove this line
					position: absolute;

					>.temp-row{
						height: 100%;
					}
				}

				.popover-wrapper{
					position: relative;
					display: inline-block;

					&.more{
						.phx-calendar-entry-popover {
							height: 180pt;
						}
					}
				}
				// end month view
			}

			.day-view{
				>.left{
					width: 100%;
					height: 100%;
					position: absolute;
					padding-right: 220pt;

					>.wrapper {
						width: 100%;
						height: 100%;
						position: relative;
						overflow-y: auto;
					}
				}

				>.right{
					background-color: extract(@CLR_1, 8);
					width: @CALENDAR_VIEW_DAY_RIGHT_PANEL_WIDTH;
					height: 100%;
					overflow-y: hidden;
					position: absolute;
					right: 0;

					>.wrapper {
						width: 100%;
						height: 100%;
						position: relative;

						>.mini-calendar{
							margin-top: 20%;
						}
					}
				}

				.header{
					width: 100%;
				}

				.timeline{
					height: 90%;

					>.title{
						float: left;
						width: @CALENDAR_VIEW_DAY_LEFT_TIME_PANEL_WIDTH;
						border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;

						>.row{
							height: @CALENDAR_VIEW_DAY_ROW_HEIGHT;
							text-align: center;

							> div{
								.FC0();
								width: 100%;
							}
						}
					}

					>.content{
						width: 100%;
						padding-left: @CALENDAR_VIEW_DAY_LEFT_TIME_PANEL_WIDTH;
						position: absolute;

						>.wrapper {
							width: 100%;
							position: relative;
							overflow-x: hidden;

						}

						.row{
							height: @CALENDAR_VIEW_DAY_ROW_HEIGHT;
							border-bottom: @CALENDAR_VIEW_DAY_ROW_BORDER_WIDTH solid @CLR_BORDER_COLOR;
							position: relative;
							margin-left: @CALENDAR_VIEW_DAY_ROW_PADDING_LEFT;
							margin-right: @CALENDAR_VIEW_DAY_ROW_PADDING_RIGHT;

							> div{
								width: 100%;
								height: 100%;
								position: absolute;
							}

							.line{
								height: 50%;
								border-bottom: @CALENDAR_VIEW_DAY_ROW_BORDER_WIDTH dashed @CLR_BORDER_COLOR;
							}
						}

						.entry {
							height: @CALENDAR_VIEW_DAY_ROW_HEIGHT;
							box-shadow: @CALENDAR_VIEW_DAY_ENTRY_SHADOW;
						}

						.entry-content{
							position: absolute;
							overflow-x: auto;
							overflow-y: hidden;
							height: 100%;
							width: 100%;
							top: 0;
						}

						.popover-wrapper{
							position: absolute;
							top: 0;
						}
					}
					// end content

					.day-drop-content{
						width: 100%;
						height: 100%;

						>.day-drop{
							height: @CALENDAR_VIEW_DAY_ROW_HEIGHT;
						}
					}
					// end daydrop
				}
			}
		}
	}

	.popover-wrapper {
	    &.blue {
	        .phx-calendar-entry-popover {
	            .container-after {
	                border-color: transparent transparent transparent @CLR_BRAND_HUE_LEFT;
	            }
	            .container-before {
	                border-color: transparent transparent transparent @CLR_BRAND_HUE_LEFT;
	            }
	            &.left {
	                .container-after {
	                    border-color: transparent @CLR_BRAND_HUE_LEFT transparent transparent;
	                }
	                .container-before {
	                    border-color: transparent @CLR_BRAND_HUE_LEFT transparent transparent;
	                }
	            }
	        }
	    }
	}

	.mini-calendar{
		height: @CALENDAR_VIEW_MINI_CALENDAR_HEIGHT;
		margin-left: 10pt;
		margin-right: 10pt;

		>.month-label{
			.FC2();
			text-align: right;
			height: 20%;
		}

		>.day-container{
			height: 80%;

			>div:first-child{
				height: @CALENDAR_VIEW_MINI_CALENDAR_NUMBER_DIV_HEIGHT;
			}

			>div:last-child{

				.row {
					height: @CALENDAR_VIEW_MINI_CALENDAR_NUMBER_DIV_HEIGHT;

					> div {
						height: 100%;
					}
				}

				.content-wrapper{
					width: 100%;
					height: 100%;
					position: relative;

					>.content:first-child{
						z-index: 1;

						.selected{
							background-color: @CLR_BRAND;
							border-radius: 50%;
							width: @CALENDAR_VIEW_MINI_CALENDAR_NUMBER_DIV_HEIGHT;
							height: @CALENDAR_VIEW_MINI_CALENDAR_NUMBER_DIV_HEIGHT;
							z-index: 1;
							margin: 0 auto;
						}
					}

					>.content:last-child{
						z-index: 2;

						.number-label{
							.FC0();
							text-align: center;
							height: 100%;

							&.today{
								border-bottom: @CALENDAR_VIEW_MINI_CALENDAR_TODAY_BORDER solid @CLR_BRAND_HUE_LEFT;
							}

							&.selected{
								color: extract(@CLR_1, 9);
							}
						}
					}

					>.content{
						width: 100%;
						height:100%;
						position: absolute;
					}
				}

			}
		}
	}

	.week-view {
			position: relative;
			width: 100%;
			height: 100%;

	    >.left {
	        float: left;
	        width: 80%;
	        height: 100%;
	        overflow: hidden;
					position: relative;

	        >.header{
						height: @CALENDAR_VIEW_WEEK_HEADER_HEIGHT;
						width: 100%;

			    	>.content{
			            width: 100%;
			            height: 100%;
		            	position: absolute;
			            text-align: center;
			            padding-left: @CALENDAR_VIEW_WEEK_TITLE_WIDTH;

			            >.row {
										height: @CALENDAR_VIEW_WEEK_HEADER_HEIGHT;
			            	background-color: hsv(18, 0%, 99%);
										// border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR; // if open select will get a problem
										border-left: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;

			            	div[class^="col-"] {
							    		border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
											height: 100%;

											>div {
												border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
											}
										}

										.selected{
											border-top: @CALENDAR_VIEW_SELECTED_BORDER_THICKNESS solid @CLR_BRAND;
											border-left: @CALENDAR_VIEW_SELECTED_BORDER_THICKNESS solid @CLR_BRAND;
											border-right: @CALENDAR_VIEW_SELECTED_BORDER_THICKNESS solid @CLR_BRAND;
										}

										.today{
											background-color: extract(@CLR_1, 7);
										}

										>.row {
											height: 100%;
										}
			            }
			    	}
		    }
	    }

	    >.right {
	        float: left;
	        width: 20%;
	        height: 100%;
	        overflow-y: hidden;
					position: relative;

	        >.header{
						height: @CALENDAR_VIEW_WEEK_HEADER_HEIGHT;
						width: 100%;
						position: absolute;

						>.wrapper {
							position: relative;
							width: 100%;
							height: 100%;
							z-index: 2;
		        	color: @CLR_FIXED_FONT;
							border-bottom: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

							> div{
								float: left;
								height: 100%;
							}

							> div:first-child{
								width: 10%;
								text-align: right;
							}
							> div:last-child{
								width: 10%;
							}
							> div:nth-child(2){
								width: 80%;
								text-align: center;
								padding-left: 5pt;
								padding-right: 5pt;

								.week-label{
									.FC1();
								}
							}
						}
	        }

	        >.tab{
						position: absolute;
						width: 100%;
						height: 100%;
						padding-top: @CALENDAR_VIEW_WEEK_HEADER_HEIGHT;

						>.wrapper {
							position: relative;
							width: 100%;
							height: 100%;

		        	.phlox-tabpane{
								phlox-tab {
									>.table-wrapper {
										width: 100%;
									}
								}

								.tab-group {
									height: 100%;

									>.tab-label {
										height: 100%;
									}
								}

								.phlox-tab{
									padding-left: 0;
									padding-right: 0;
									width: 50%;
									margin: 0 auto;

									>.tab-name {
										padding-right: 0;
									}
								}

		        		.tab-label{
		        			width: 50%;

									&.active {
										background-color: hsv(18, 0%, 99%);
									}
		        		}
		        	}
						}
	        }
	    }

	    .timeline {
	        height: 90%;
	        overflow-y: auto;
	        position: relative;

	        .timeline-wrapper{
	        	position: relative;
	        	display: table;
	        	width: 100%;
	        	height: 100%;

	        	>.title {
		            float: left;
		            width: @CALENDAR_VIEW_WEEK_TITLE_WIDTH;

		            >.row {
		                height: @CALENDAR_VIEW_WEEK_ROW_HEIGHT;
		                text-align: center;
		                > div {
												.FC0();
		                    width: 100%;
		                }
		            }
		        }

		        >.content {
		            width: 100%;
		            height: 100%;
		            position: absolute;
		            text-align: center;
		            padding-left: @CALENDAR_VIEW_WEEK_TITLE_WIDTH;
		            overflow-x: hidden;

		            .line{
									width: 100%;
									height: 50%;
									position: absolute;
									top: 0;
									border-bottom: @CALENDAR_VIEW_DAY_ROW_BORDER_WIDTH dashed @CLR_BORDER_COLOR;
								}

		            >.row {
		                height: @CALENDAR_VIEW_WEEK_ROW_HEIGHT;
		                border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
										border-left: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		                position: relative;

		                > div {
		                    height: 100%;
		                }

		                div[class^="col-"] {
						    			border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
											border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
											height: 100%;
										}

										.today{
											background-color: extract(@CLR_1, 7);
										}

										.selected{
											border-left: @CALENDAR_VIEW_SELECTED_BORDER_THICKNESS solid @CLR_BRAND;
											border-right: @CALENDAR_VIEW_SELECTED_BORDER_THICKNESS solid @CLR_BRAND;
										}
		            }
		        }

		        .entry-content{
		        		width: 100%;
		            height: 100%;
		            position: absolute;
		            padding-left: @CALENDAR_VIEW_WEEK_TITLE_WIDTH;
		            overflow: hidden;
		            top: 0;

		            >.wrapper{
		            	position:relative;
		            	width: 100%;
		            	height: 100%;
		            }

		            .entry-wrapper{
		            	position: absolute;
		            	width: 14.285714285714285714285714285714%;
		            	padding-left: @CALENDAR_VIEW_WEEK_ENTRY_PADDING;
		            	padding-right: @CALENDAR_VIEW_WEEK_ENTRY_PADDING;

		            	>.wrapper{
		            		position: relative;
		            		width: 100%;
		            		height: 100%;
		            	}
		            }

		            .entry{
		            	width: 100%;
		            	height: 100%;
									box-shadow: @CALENDAR_VIEW_DAY_ENTRY_SHADOW;
		            }
		        }
	        }
	        // end timeline wrapper

	        .popover-wrapper{
						position: relative;
						display: inline-block;
					}
	    }

	    .time-indecator{
	    	width: 14.285714285714285714285714285714%;
	    }

			.entry {

			    >.content-wrapper{

			    	>.content{
				        >div {
				            overflow: hidden;
										white-space: nowrap;
				        }
			    	}
			    }

			}
	}

	.agenda-view {
	    .left {
					width: 100%;
	        height: 100%;
	        position: absolute;
					padding-right: @CALENDAR_VIEW_AGENDA_RIGHT_PANEL_WIDTH;

					>.wrapper {
						width: 100%;
						height: 100%;
						position: relative;
						overflow-y: auto;
					}
	    }

	    .right {
	        background-color: extract(@CLR_1, 8);
	        width: @CALENDAR_VIEW_AGENDA_RIGHT_PANEL_WIDTH;
	        height: 100%;
					position: absolute;
					right: 0;

					>.wrapper {
						width: 100%;
		        height: 100%;
		        overflow-y: hidden;

						>.mini-calendar {
		            margin-top: 20%;
		        }
					}
	    }

	    .date-label{
				font-size: 120%;
			}

			.number-label{
				&.disable{
					color: extract(@CLR_S, 6);
				}
			}

	    .timeline {
	        height: 100%;
	        overflow-y: hidden;
					position: relative;

					>.header-wrapper {
						position: absolute;
						width: 100%;
						height: @CALENDAR_VIEW_AGENDA__TIMELINE_HEADER_HEIGHT;

						>.header {
		           height: 100%;
							 width: 100%;
		           border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		           position: relative;

		           // as title
		           >div:first-child{
		           		float: left;
		           		width: 30%;
		           		padding-left: 20pt;
		           		height: 100%;
		           }

		           // as bullets
		           >div:last-child{
		           		float: left;
		           		width: 70%;
		           		text-align: right;
		           		padding-right: 20pt;
		           		height: 100%;

		           		.circle-bullet{
		           			display: inline-block;
		           			font-size: 150%;
		           		}
		           }
		        }
					}

					>.content-wrapper {
						position: absolute;
						width: 100%;
						height: 100%;
						padding-top: @CALENDAR_VIEW_AGENDA__TIMELINE_HEADER_HEIGHT;

						>.content {
		            height: 100%;
								width: 100%;
		            border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		            overflow-y: auto;
								position: relative;

		            >.day-content{
		            	border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		            	padding-left: 10pt;
			           	padding-right: 10pt;
			           	padding-bottom: 5pt;
			           	padding-top: 5pt;

		            	>.row-container{

			            	>.row{
			            		height: 30pt;
			            		margin-top: 5pt;
											position: relative;

			            		&:first-child{
			            			margin-top: 0;
			            		}

			            		// day group
			            		>div:first-child{
			            			position: absolute;
			            			height: 100%;
			            			width: @CALENDAR_VIEW_AGENDA_ROW_DAY_LABEL_WIDTH;

												>.wrapper {
													position: relative;
													text-align: right;
													width: 100%;
													height: 100%;

													>div{
				            				height: 50%;
				            			}

				            			.time-label{
														.FC0();
				            				color: extract(@CLR_0, 1);
				            				padding-right: 10pt;
				            				height: 100%;
				            				font-weight: 500;
				            			}
												}
			            		}

			            		// time group
			            		>div:nth-child(2){
			            			height: 100%;
			            			width: @CALENDAR_VIEW_AGENDA_ROW_TIME_LABEL_WIDTH;
												position: absolute;
												left: @CALENDAR_VIEW_AGENDA_ROW_DAY_LABEL_WIDTH;

												.wrapper {
													position: relative;
													text-align: center;
													width: 100%;
													height: 100%;
				            			background-color: extract(@CLR_1, 8);

													>div{
				            				height: 50%;
				            			}

				            			.time-label{
														.FC0();
				            				color: extract(@CLR_0, 1);
				            				height: 100%;
				            			}
												}
			            		}

			            		// information group
			            		>div:last-child{
			            			height: 100%;
			            			width: 100%;
												padding-left: @CALENDAR_VIEW_AGENDA_ROW_TIME_LABEL_WIDTH + @CALENDAR_VIEW_AGENDA_ROW_DAY_LABEL_WIDTH;

												>.wrapper {
													position: relative;
													background-color: extract(@CLR_1, 8);
													height: 100%;
				            			width: 100%;

													>div{
				            				float: left;
				            				height: 100%;
				            			}

				            			>div:first-child {
												    width: 5%;
												    text-align: center;
													}

				            			>div:nth-child(2) {
													    width: 30%;
													}

													>div:nth-child(3) {
													    width: 40%;
													    font-size: 130%;
													}

													>div:last-child {
													    width: 25%;
													    text-align: right;
													    padding-right: 5pt;
													}

													.bullet-group{
															> div{
																display: inline-block;
															}
													}

													.title{
														.FC1();
														color: @CLR_FIXED_FONT;
													}

													.description{
														.FC0();
														color: extract(@CLR_S, 6);
														font-size: smaller;
													}
												}

			            		}

			            	}
			            }
		            }
		        }
					}
	    }
	}

	.day{
		border-right: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		border-top: @CALENDAR_VIEW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		height: 100%;

		&.highlight{
			background-color: @CLR_BRAND_HUE_LEFT;
		}

		&.disable{
			background-color: extract(@CLR_1, 8);
		}

		&.today{
			background-color: extract(@CLR_1, 8);
		}

		&.selected{
			border-width: 1.5pt;
			border-color: @CLR_BRAND;
			border-style: solid;
			background-color: extract(@CLR_1, 8);
		}

		.number-label{
			.FC0();
			text-align: right;
			padding-right: @CALENDAR_VIEW_MONTH_NUMBER_PADDING;
		}
	}

	/* calendar entry popover */
	.phx-calendar-entry-popover {
		display: none;
		width: @CALENDAR_ENTRY_POPOVER_WIDTH;
		height: @CALENDAR_ENTRY_POPOVER_HEIGHT;

		>.container-wrapper{
			width: 100%;
		    height: 100%;
		    position: relative;
		}
		/* end container wrapper */

		.container {
		    width: 100%;
		    height: 100%;
		    background: extract(@CLR_1, 9);
		    border: @CALENDAR_ENTRY_POPOVER_BORDER;
		    position: relative;
		    padding-left: 0;
		    padding-right: 0;
		    box-shadow: @CALENDAR_ENTRY_POPOVER_BOX_SHADOW;

		    >.wrapper{
				background-color: extract(@CLR_1, 8);
				position: relative;
				width: 100%;
				height: 100%;

				.content-wrapper{
					width: 100%;
					height: 100%;
					padding-right: @CALENDAR_ENTRY_POPOVER_PADDING_BG;
					position: absolute;

					>.content{
						background-color: extract(@CLR_1, 9);
						width: 100%;
						height: 100%;
						position: relative;
						overflow-y: auto;
					}
				}

				.top-bg{
					background-color: @CLR_BRAND;
					width: 100%;
					height: @CALENDAR_ENTRY_POPOVER_BG_HILIGHT_HEIGHT;
					position: absolute;
					top: 0;
				}
			}
			/* end wrapper */
		}

		.container-after,
		.container-before {
		    content: '';
		    display: block;
		    position: absolute;
		    left: 100%;
		    width: 0;
		    height: 0;
		    border-style: solid;
		}

		.container-after {
		    top: 10pt;
		    border-color: transparent transparent transparent extract(@CLR_1, 9);
		    border-width: 8pt;
		    left: -13pt;
		}

		.container-before {
		    top: 9pt;
		    border-color: transparent transparent transparent @CLR_BORDER_COLOR;
		    border-width: 9pt;
		    left: -16pt;
		}

		&.left {
			.container {
				>.wrapper {

			    }
			}
			.container-after,
			.container-before {
			    right: 100%;
			}

			.container-after {
			    border-color:  transparent extract(@CLR_1, 9) transparent transparent;
			}

			.container-before {
			    border-color:  transparent @CLR_BORDER_COLOR transparent transparent;
			}
		}

		&.right {
			.container {
				>.wrapper {
			    	.content-wrapper{
				    	padding-left: @CALENDAR_ENTRY_POPOVER_PADDING_BG;
				    	padding-right: 0;
				    }
			    }
			}
			.container-after,
			.container-before {

			}
			.container-after {
				left: auto;
			    right: -14pt;
			}

			.container-before {
				left: auto;
			    right: -17pt;
			}

			>.container-wrapper{

			}
		}

		&.show{
			display: block;
		}
	}

	.header-btn {
		.FC1();
		color: extract(@CLR_S, 6);
		width: 100%;
		height: 100%;
		text-align: center;
		position: relative;
		display: inline-block;
		cursor:pointer;

		&.active{
			color: extract(@CLR_BRAND_HUE, 3);
		}
	}

	.calendar-label{
		.FC1();
		color: extract(@CLR_0, 1);
	}

	.entry {
	    background-color: @CLR_BRAND;
	    position: absolute;
	    width: @CALENDAR_VIEW_ENTRY_WIDTH;
	    top: 0;
			box-shadow: @CALENDAR_VIEW_DAY_ENTRY_SHADOW;

	    &.dirty{
	    	font-style: italic;
	    }

	    >.content-wrapper{
	    	width: 100%;
				height: 100%;
	    	padding-left: @CALENDAR_VIEW_ENTRY_LINE_WIDTH;

	    	>.content{
		        background-color: hsv(18, 0, 99%);
		        height: 100%;
		        width: 100%;
		        padding-left: 5pt;
		        overflow: hidden;
		        word-wrap: break-word;

		        >div {
		            height: 50%;

								&:first-child {
									.FC1B();
								}

								&:last-child {
									.FC0();
								}
		        }
	    	}
	    }

	}

	// dragging
	.dragging{
		opacity: 0.5;
		z-index: 2;
	}

	// more coding here
	.time-indecator{
		background-color: red;
		position: absolute;
		top: 0;
		width: 100%;
		height: 2pt;
	}
	// end
}