/*  Calendar      */
.default {
	.pignose-calendar {
		width: 100%;
		max-width: 100%;
		font-size: 100%;
		margin: 0 auto;
		background-color: $white;
		box-shadow: none;
		.pignose-calendar-top {
			padding: 3em 0;
			position: $pos-rel;
			overflow: hidden;
			background-color: $white;
			.pignose-calendar-top-date {
				position: $pos-abs;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 3em 0;
				text-align: $align-center;
				text-transform: $transform-upper;
				box-sizing: border-box;
				-o-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			.pignose-calendar-top-year {
				display: inline-block;
				text-align: $align-center;
				color: #3232b7;
				font-size: 22px;
				font-weight: 600;
			}
			.pignose-calendar-top-month {
				display: inline-block;
				text-align: $align-center;
				font-weight: 600;
				color: #3232b7;
				font-size: 22px;
				border-bottom: solid 1px #fff;
			}
			.pignose-calendar-top-nav {
				display: inline-block;
				width: 2.3em;
				height: 2.3em;
				position: $pos-rel;
				z-index: 5;
				text-decoration: none;
				border-radius: 50%;
				.pignose-calendar-top-value {
					display: inline-block;
					color: $color_106;
					font-size: 115%;
					font-weight: 600;
					vertical-align: middle;
					margin-top: -10px;
				}
				.pignose-calendar-top-icon {
					font-size: 18px;
					top: 4px;
					position: $pos-rel;
					color: $color_38;
					vertical-align: middle;
				}
			}
			.pignose-calendar-top-nav.pignose-calendar-top-prev {
				.pignose-calendar-top-icon {
					left: 8px;
				}
				float: left;
				margin-left: 0.6em;
				.pignose-calendar-top-value {
					margin-left: .2em;
				}
			}
			.pignose-calendar-top-nav.pignose-calendar-top-next {
				.pignose-calendar-top-icon {
					left: 10px;
				}
				float: right;
				margin-right: 0.6em;
				.pignose-calendar-top-value {
					margin-right: .2em;
				}
			}
		}
		.pignose-calendar-header {
			overflow: hidden;
			color: $color_76;
			background-color: $color_none;
			margin-top: 18px;
			margin-bottom: 32px;
			padding: 0 25px;
			font-size: 18px;
			.pignose-calendar-week {
				float: left;
				width: 14.28%;
				height: 2.5em;
				text-align: $align-center;
				line-height: 2.5em;
				font-size: 115%;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				&:last-child {
					width: 14.32%;
				}
			}
			.pignose-calendar-week.pignose-calendar-week-sun {
				color: $color_105;
			}
			.pignose-calendar-week.pignose-calendar-week-sat {
				color: $color_105;
			}
		}
		.pignose-calendar-body {
			height: 100%;
			padding: 0 25px;
			.pignose-calendar-row {
				overflow: hidden;
			}
		}
	}
	.pignose-calendar-week.pignose-calendar-week-su {
		color: $color_57;
	}
	.pignose-calendar-unit {
		float: left;
		display: block;
		height: 4.6em;
		width: 14.28%;
		text-align: $align-center;
		line-height: 2.8em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		.pignose-calendar-button-schedule-container {
			line-height: .5em;
			.pignose-calendar-button-schedule-pin {
				display: inline-block;
				background-color: $color_106;
				width: .5em;
				height: .5em;
				border-radius: 50%;
				margin-right: .2em;
				&:last-child {
					margin-right: 0;
				}
			}
		}
		a {
			display: inline-block;
			width: 2.5em;
			height: 2.5em;
			border-radius: 6px;
			color: $additional-color-11;
			font-size: 18px;
			line-height: 2.5em;
			margin-top: 8px;
			text-align: $align-center;
			text-decoration: none;
			-webkit-transition: background-color .3s ease, color .3s ease;
			-moz-transition: background-color .3s ease, color .3s ease;
			transition: background-color .3s ease, color .3s ease;
			&:active {
				background-color: $color_108;
			}
			&:hover {
				background-color: $color_56;
				color: $white;
				font-weight: 600;
			}
		}
		&:last-child {
			width: 14.32%;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-su {
		a {
			color: $light-dark;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-disabled {
		a {
			opacity: .5;
			background-color: $color_101;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-range {
		a {
			background-color: $color_98;
			border-radius: 0;
			width: 100%;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-disabled {
		a {
			color: $color_104;
			background-color: $color_102;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-range-first {
		a {
			border-top-left-radius: 1.2em;
			border-bottom-left-radius: 1.2em;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-range-last {
		a {
			border-top-right-radius: 1.2em;
			border-bottom-right-radius: 1.2em;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-active {
		a {
			color: $additional-color-11 !important;
			border-radius: 6px;
			box-shadow: 0px 0px 25px 1px rgba(113, 106, 202, 0.2);
			position: $pos-rel;
			&:hover {
				background-color: $color_none;
			}
			&:before {
				content: '';
				position: $pos-abs;
				background-color: #3232b7;
				padding: 3px;
				border-radius: 50%;
				bottom: 4px;
				left: 11px;
			}
			&:after {
				content: '';
				position: $pos-abs;
				background-color: $info;
				padding: 3px;
				border-radius: 50%;
				bottom: 4px;
				right: 11px;
			}
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-sun {
		a {
			color: $gray;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-sat {
		a {
			color: $gray;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-active.pignose-calendar-unit-sun {
		a {
			color: $white;
		}
	}
	.pignose-calendar-unit.pignose-calendar-unit-active.pignose-calendar-unit-sat {
		a {
			color: $white;
		}
	}
	.pignose-calendar-wrapper {
		display: none;
		position: $pos-fix;
		width: 80%;
		max-width: 360px;
		top: 50%;
		left: 50%;
		border-radius: 2px;
		z-index: 50001;
		overflow: hidden;
		-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 1);
		-moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 1);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 1);
		-webkit-transform: translate3d(0, 160px, 0);
		-moz-transform: translate3d(0, 160px, 0);
		transform: translate3d(0, 160px, 0);
		opacity: 0;
		-webkit-transition: opacity .3s ease, transform .5s ease-out, -webkit-transform .5s ease-out;
		-moz-transition: opacity .3s ease, transform .5s ease-out, -webkit-transform .5s ease-out;
		transition: opacity .3s ease, transform .5s ease-out, -webkit-transform .5s ease-out;
		.pignose-calendar {
			max-width: auto;
			width: 100%;
			border: none;
			.pignose-calendar-button-group {
				border-top: 1px solid #e2e2e2;
				overflow: hidden;
				.pignose-calendar-button {
					width: 50%;
					display: block;
					float: left;
					height: 3.2em;
					text-align: $align-center;
					line-height: 3.2em;
					color: $color_43;
					font-weight: 600;
					text-decoration: none;
					-webkit-transition: background-color .3s ease;
					-moz-transition: background-color .3s ease;
					transition: background-color .3s ease;
					box-sizing: border-box;
					-o-box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					&:hover {
						background-color: $color_98;
					}
				}
				.pignose-calendar-button-apply {
					color: $white;
					background-color: $color_109;
					&:hover {
						background-color: $color_110;
					}
				}
			}
		}
	}
	.pignose-calendar-wrapper.pignose-calendar-wrapper-active {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.pignose-calendar-wrapper-overlay {
		background-color: $black;
		opacity: 0;
		-webkit-transition: opacity .3s ease;
		-moz-transition: opacity .3s ease;
		transition: opacity .3s ease;
		position: $pos-fix;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 50000;
	}
	.pignose-calendar-wrapper-overlay.pignose-calendar-wrapper-overlay-active {
		opacity: .7;
	}
}
.pignose-calendar.pignose-calendar-default {
	.pignose-calendar-body {
		.pignose-calendar-row {
			.pignose-calendar-unit.pignose-calendar-unit-toggle-active {
				a {
					color: $color_103 !important;
				}
			}
		}
	}
}
.pignose-calendar.pignose-calendar-reverse {
	.pignose-calendar-body {
		.pignose-calendar-row {
			.pignose-calendar-unit.pignose-calendar-unit-toggle-inactive {
				a {
					color: $color_103 !important;
				}
			}
		}
	}
}