:host {
	--color-bg-default: transparent;
	--color-bg-secondary: #f9f9f9;
	--color-fg-default: #333;
	--color-fg-primary: #004E86;
	--color-fg-secondary: #748194;
	--color-fg-selected: #fff;
	--color-fg-muted: #9e9e9e;
	--color-fg-accent: #e63757;
	--color-btn-primary-bg: #fff;
	--color-btn-primary-fg: #6b82ff;
	--color-btn-primary-border: #6b82ff;
	--color-btn-primary-hover-bg: #6b82ff;
	--color-btn-primary-hover-fg: #fff;
	--color-btn-primary-hover-border: #6b82ff;
	--color-btn-primary-disabled-bg: #a2b0ff;
	--color-btn-primary-disabled-fg: #fff;
	--color-btn-primary-disabled-border: #a2b0ff;
	--color-btn-secondary-bg: #fff;
	--color-btn-secondary-fg: #748194;
	--color-btn-secondary-border: #748194;
	--color-btn-secondary-hover-bg: #748194;
	--color-btn-secondary-hover-fg: #fff;
	--color-btn-secondary-hover-border: #748194;
	--color-btn-secondary-disabled-bg: #b5bbc4;
	--color-btn-secondary-disabled-fg: #fff;
	--color-btn-secondary-disabled-border: #b5bbc4;
	--color-border-default: #ddd;
	--color-border-locked: #f9f9f9;
	--day-width: 40px;
	--day-height: 40px;
	--border-radius: 2px;
	--primary-color: #6b82ff;
	--secondary-color: #748194;
	--white-color: #fff;
	--black-color: #333;
	--lightgray-color: #f9f9f9;
	--gray-color: #9e9e9e;
	--red-color: #e63757
}

* {
	box-sizing: border-box
}

.container_calendar {
	border-radius: 4px;
	color: var(--color-fg-default);
	cursor: default;
	display: inline-block;
	font-family: Montserrat, -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
	font-size: .8em;
	height: 0;
	overflow: hidden;
	pointer-events: all;
	position: absolute;
	transform: scale(0);
	transform-origin: top left;
	transition: transform .3s ease-out
}

	.container_calendar.calc {
		height: auto;
		transform: none;
		transition: none;
		visibility: hidden
	}

	.container_calendar.show {
		box-shadow: 0 0 25px rgba(0,0,0,.3);
		height: auto;
		transform: scale(1)
	}

	.container_calendar.inline {
		box-shadow: 0 7px 14px 0 rgba(65,69,88,.1),0 3px 6px 0 rgba(0,0,0,.07);
		height: auto;
		left: 0;
		position: relative;
		top: 0;
		transform: scaleY(1)
	}

	.container_calendar > main {
		background-color: var(--color-bg-default)
	}

	.container_calendar > footer, .container_calendar > header {
		background-color: var(--color-bg-secondary);
		padding: 10px
	}

		.container_calendar > footer .footer-buttons {
			-moz-column-gap: 5px;
			column-gap: 5px;
			display: flex;
			justify-content: flex-end
		}

			.container_calendar > footer .footer-buttons > button {
				background-color: transparent;
				border: 1px solid transparent;
				border-radius: var(--border-radius);
				cursor: pointer;
				padding: 5px 10px
			}

				.container_calendar > footer .footer-buttons > button.apply-button {
					background-color: var(--color-btn-primary-bg);
					border-color: var(--color-btn-primary-border);
					color: var(--color-btn-primary-fg)
				}

					.container_calendar > footer .footer-buttons > button.apply-button:hover {
						background-color: var(--color-btn-primary-hover-bg);
						border-color: var(--color-btn-primary-hover-border);
						color: var(--color-btn-primary-hover-fg)
					}

					.container_calendar > footer .footer-buttons > button.apply-button:disabled {
						background-color: var(--color-btn-primary-disabled-bg);
						border-color: var(--color-btn-primary-disabled-border);
						color: var(--color-btn-primary-disabled-fg);
						cursor: default
					}

				.container_calendar > footer .footer-buttons > button.cancel-button {
					background-color: var(--color-btn-secondary-bg);
					border-color: var(--color-btn-secondary-border);
					color: var(--color-btn-secondary-fg)
				}

					.container_calendar > footer .footer-buttons > button.cancel-button:hover {
						background-color: var(--color-btn-secondary-hover-bg);
						border-color: var(--color-btn-secondary-hover-border);
						color: var(--color-btn-secondary-hover-fg)
					}

					.container_calendar > footer .footer-buttons > button.cancel-button:disabled {
						background-color: var(--color-btn-secondary-disabled-bg);
						border-color: var(--color-btn-secondary-disabled-border);
						color: var(--color-btn-secondary-disabled-fg);
						cursor: default
					}

.grid-1 {
	grid-template-columns: repeat(1,1fr)
}

.grid-2 {
	grid-template-columns: repeat(2,1fr)
}

.grid-3 {
	grid-template-columns: repeat(3,1fr)
}

.grid-4 {
	grid-template-columns: repeat(4,1fr)
}

.grid-5 {
	grid-template-columns: repeat(5,1fr)
}

.grid-6 {
	grid-template-columns: repeat(6,1fr)
}

.grid-7 {
	grid-template-columns: repeat(7,1fr)
}

.grid-8 {
	grid-template-columns: repeat(8,1fr)
}

.grid-9 {
	grid-template-columns: repeat(9,1fr)
}

.grid-10 {
	grid-template-columns: repeat(10,1fr)
}

.grid-11 {
	grid-template-columns: repeat(11,1fr)
}

.grid-12 {
	grid-template-columns: repeat(12,1fr)
}

.calendars {
	display: grid
}

	.calendars:not(.grid-1) .calendar > .header .month-name {
		order: 2;
		text-align: center;
	}

	.calendars:not(.grid-1) .calendar > .header .previous-button {
		order: 1;
		visibility: hidden
	}

	.calendars:not(.grid-1) .calendar > .header .next-button {
		order: 3;
		visibility: hidden
	}

	.calendars:not(.grid-1) .calendar:first-child > .header .previous-button, .calendars:not(.grid-1) .calendar:last-child > .header .next-button {
		visibility: visible
	}

.calendar {
	padding: 10px
}

	.calendar > .header {
		align-items: center;
		-moz-column-gap: 5px;
		column-gap: 5px;
		display: flex;
		justify-content: space-between;
		padding: 10px
	}

		.calendar > .header .month-name {
			flex: 1;
			font-size: 15px;
			font-weight: 500
		}

			.calendar > .header .month-name::before {
				content: "";
				display: block;
				width: 30px;
				height: 30px;
				background-image: url('/assets/icons/sol.svg');
				background-size: cover;
			}

			.calendar > .header .month-name > span {
				font-weight: 700
			}

		.calendar > .header button {
			align-items: center;
			background-color: transparent;
			border: 1px solid transparent;
			border-radius: 2px;
			color: var(--color-btn-secondary-fg);
			cursor: pointer;
			display: flex;
			justify-content: center;
			padding: 4px 7px
		}

			.calendar > .header button:hover {
				background-color: var(--color-bg-secondary)
			}

				.calendar > .header button:hover > img, .calendar > .header button:hover > svg {
					fill: var(--color-fg-primary);
					color: var(--color-fg-primary)
				}

			.calendar > .header button > img, .calendar > .header button > svg {
				fill: var(--color-btn-secondary-fg);
				color: var(--color-btn-secondary-fg);
				pointer-events: none;
				transform: scale(.7)
			}

	.calendar > .daynames-row, .calendar > .days-grid {
		display: grid;
		grid-template-columns: repeat(7,1fr);
		row-gap: 2px
	}

		.calendar > .daynames-row > .day, .calendar > .daynames-row > .dayname, .calendar > .days-grid > .day, .calendar > .days-grid > .dayname {
			align-items: center;
			cursor: default;
			display: flex;
			flex-direction: column;
			font-size: 13px;
			justify-content: center
		}

		.calendar > .daynames-row > .dayname {
			color: var(--color-fg-muted);
			font-size: 12px;
			padding: 5px 0
		}

		.calendar > .days-grid > .day {
			border: 1px solid transparent;
			border-radius: 2px;
			height: var(--day-height);
			max-height: var(--day-height);
			max-width: var(--day-width);
			min-height: var(--day-height);
			min-width: var(--day-width);
			padding: 10px 0;
			width: var(--day-width)
		}

			.calendar > .days-grid > .day:hover {
				/*border: 1px solid var(--color-fg-primary);*/
				border: 1px solid var(--color-bg-locked);
				border-radius: 25px;
				color: var(--color-bg-partial-locked)
			}

			.calendar > .days-grid > .day.today {
				color: var(--color-fg-accent)
			}

			.calendar > .days-grid > .day.selected {
				background-color: var(--color-fg-primary);
				color: var(--color-fg-selected)
			}

@media (max-width: 480px) {
	.container_calendar:not(.inline) {
		transform: scaleY(0) !important;
		transform-origin: bottom center !important
	}

		.container_calendar:not(.inline).show {
			bottom: 0 !important;
			left: 0 !important;
			position: fixed !important;
			right: 0 !important;
			top: auto !important;
			transform: scaleY(1) !important
		}

	.container_calendar {
		width: 100%
	}

	.calendars {
		grid-template-columns: repeat(1,1fr)
	}

		.calendars .calendar {
			box-sizing: border-box;
			width: 100%
		}

			.calendars .calendar:nth-child(n+2) {
				display: none
			}

			.calendars .calendar > .days-grid > .day {
				height: auto;
				max-height: unset;
				max-width: unset;
				min-height: unset;
				min-width: unset;
				width: auto
			}

			.calendars .calendar > .header:not(.no-next-month) .next-button {
				visibility: visible
			}
}

:host {
	--color-fg-locked: white;
	--color-bg-locked: #004E86;
	--color-fg-partial-locked: black;
	--color-bg-partial-locked: #d5dbff;
	--color-fg-activitat: black;
	--color-bg-activitat: orange;
	--color-bg-unavailable: transparent;
	--color-fg-not-available: #bbbbbb;
}

.container_calendar.lock-plugin .calendars .calendar:first-child > .header.no-previous-month .previous-button, .container_calendar.lock-plugin .calendars .calendar:last-child > .header.no-next-month .next-button {
	visibility: hidden
}

.container_calendar.lock-plugin .calendar > .days-grid > .day.not-available {
	background-color: var(--color-bg-unavailable);
	/*color: var(--color-fg-locked);*/
	color: var(--color-fg-not-available);
	font-style: italic;
	pointer-events: none
}

.container_calendar.lock-plugin .calendar > .days-grid > .day.locked {
	background-color: transparent;
	border: 1px solid var(--color-border-locked);
	color: var(--color-fg-locked);
	pointer-events: none
}

	.container_calendar.lock-plugin .calendar > .days-grid > .day.locked:not(.start):not(.end) {
		/*Didac*/
		background-image: none;
		background-color: var(--color-bg-locked);
		border-radius: 20px;
		font-style: italic
	}

.container_calendar.lock-plugin .calendar > .days-grid > .day.partial-locked {
	background-color: transparent;
	border: 1px solid var(--color-border-locked);
	color: var(--color-fg-partial-locked);
	pointer-events: none
}

	.container_calendar.lock-plugin .calendar > .days-grid > .day.partial-locked:not(.start):not(.end) {
		/*Didac*/
		background-image: none;
		background-color: var(--color-bg-partial-locked);
		border-radius: 20px;
		font-style: italic
	}

.container_calendar.lock-plugin .calendar > .days-grid > .day.activitat {
	background-color: transparent;
	border: 1px solid var(--color-border-locked);
	color: var(--color-fg-activitat);
	pointer-events: none
}

	.container_calendar.lock-plugin .calendar > .days-grid > .day.activitat:not(.start):not(.end) {
		/*Didac*/
		background-image: none;
		background-color: var(--color-bg-activitat);
		border-radius: 20px;
		font-style: italic
	}

.container_calendar.lock-plugin .preset-plugin-container > button:disabled {
	color: var(--color-fg-locked);
	pointer-events: none
}

.container_calendar.preset-plugin > main {
	display: flex
}

	.container_calendar.preset-plugin > main.preset-left {
		flex-direction: row-reverse
	}

	.container_calendar.preset-plugin > main.preset-right {
		flex-direction: row
	}

		.container_calendar.preset-plugin > main.preset-left .preset-plugin-container, .container_calendar.preset-plugin > main.preset-right .preset-plugin-container {
			flex-direction: column;
			width: 130px
		}

	.container_calendar.preset-plugin > main.preset-top {
		flex-direction: column-reverse
	}

	.container_calendar.preset-plugin > main.preset-bottom {
		flex-direction: column
	}

		.container_calendar.preset-plugin > main.preset-bottom .preset-plugin-container, .container_calendar.preset-plugin > main.preset-top .preset-plugin-container {
			flex-direction: row
		}

.preset-plugin-container {
	background-color: var(--color-bg-secondary);
	display: flex;
	justify-content: space-between;
	padding: 10px
}

	.preset-plugin-container > button {
		background-color: var(--color-bg-default);
		border: 1px solid transparent;
		border-radius: 4px;
		color: var(--color-fg-default);
		padding: 5px
	}

		.preset-plugin-container > button:hover {
			border: 1px solid var(--color-fg-primary);
			color: var(--color-fg-primary);
			cursor: pointer
		}

:host {
	--color-bg-inrange: #d5dbff;
	--color-bg-tooltip: #fff;
	--color-fg-tooltip: #333
}

.range-plugin-tooltip {
	background-color: var(--color-bg-tooltip);
	border-radius: var(--border-radius);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	color: var(--color-fg-tooltip);
	font-size: 12px;
	margin-top: -4px;
	padding: 4px 8px;
	pointer-events: none;
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	z-index: 1
}

	.range-plugin-tooltip:before {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid rgba(0,0,0,.12);
		bottom: -5px;
		content: "";
		left: calc(50% - 5px);
		position: absolute
	}

	.range-plugin-tooltip:after {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid var(--color-bg-tooltip);
		bottom: -4px;
		content: "";
		left: calc(50% - 4px);
		position: absolute
	}

.container_calendar.range-plugin .calendar > .days-grid > .day {
	position: relative
}

	.container_calendar.range-plugin .calendar > .days-grid > .day.in-range:last-of-type {
		border-bottom-right-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius)
	}

	.container_calendar.range-plugin .calendar > .days-grid > .day.in-range {
		background-color: var(--color-bg-inrange);
		border-radius: 0
	}

	.container_calendar.range-plugin .calendar > .days-grid > .day.end, .container_calendar.range-plugin .calendar > .days-grid > .day.start {
		background-color: var(--color-fg-primary);
		color: var(--color-fg-selected)
	}

	.container_calendar.range-plugin .calendar > .days-grid > .day.start {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
	}

		.container_calendar.range-plugin .calendar > .days-grid > .day.start:after {
			border: 8px solid transparent;
			border-left: 8px solid var(--color-fg-primary);
			content: "";
			pointer-events: none;
			position: absolute;
			right: -14px;
			z-index: 1
		}

		.container_calendar.range-plugin .calendar > .days-grid > .day.start.flipped {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: var(--border-radius);
			border-top-left-radius: 0;
			border-top-right-radius: var(--border-radius)
		}

			.container_calendar.range-plugin .calendar > .days-grid > .day.start.flipped:after {
				border-left-color: transparent;
				border-right-color: var(--color-fg-primary);
				left: -14px;
				right: auto
			}

	.container_calendar.range-plugin .calendar > .days-grid > .day.end {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		border-bottom-right-radius: 25px;
		border-top-right-radius: 25px;
	}

		.container_calendar.range-plugin .calendar > .days-grid > .day.end:after {
			border: 8px solid transparent;
			border-right: 8px solid var(--color-fg-primary);
			content: "";
			left: -14px;
			pointer-events: none;
			position: absolute;
			z-index: 1
		}

		.container_calendar.range-plugin .calendar > .days-grid > .day.end.flipped {
			border-bottom-left-radius: var(--border-radius);
			border-bottom-right-radius: 0;
			border-top-left-radius: var(--border-radius);
			border-top-right-radius: 0
		}

			.container_calendar.range-plugin .calendar > .days-grid > .day.end.flipped:after {
				border-left-color: var(--color-fg-primary);
				border-right-color: transparent;
				left: auto;
				right: -14px
			}

	.container_calendar.range-plugin .calendar > .days-grid > .day.start.end {
		border-radius: var(--border-radius)
	}

		.container_calendar.range-plugin .calendar > .days-grid > .day.start.end:after {
			content: none
		}

.container_calendar.range-plugin .calendar > .days-grid > div:not(.day) + .day.in-range {
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius)
}

.container_calendar.range-plugin .calendar > .days-grid > div:nth-child(7n).in-range {
	border-bottom-right-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius)
}

.container_calendar.range-plugin .calendar > .days-grid > div:nth-child(7n+1).in-range {
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius)
}

.container_calendar.preset-plugin main {
	display: grid
}

	.container_calendar.preset-plugin main.preset-left > .calendars, .container_calendar.preset-plugin main.preset-top > .calendars {
		order: 2
	}

	.container_calendar.preset-plugin main.preset-left > .preset-plugin-container, .container_calendar.preset-plugin main.preset-top > .preset-plugin-container {
		order: 1
	}

	.container_calendar.preset-plugin main.preset-left, .container_calendar.preset-plugin main.preset-right {
		grid-template-columns: auto auto
	}

		.container_calendar.preset-plugin main.preset-left .preset-plugin-container, .container_calendar.preset-plugin main.preset-right .preset-plugin-container {
			grid-row: span 2;
			width: 130px
		}

	.container_calendar.preset-plugin main.preset-bottom > .preset-plugin-container {
		order: 4
	}

	.container_calendar.preset-plugin main.preset-bottom, .container_calendar.preset-plugin main.preset-top {
		grid-template-columns: auto
	}

	.container_calendar.preset-plugin main > .time-plugin-container {
		order: 3
	}

.container_calendar > main:not([class*=preset-]) {
	flex-direction: column
}

.time-plugin-container {
	background-color: var(--color-bg-secondary);
	border-bottom: 1px solid var(--color-border-default);
	display: flex;
	justify-content: space-around;
	padding: 10px
}

	.time-plugin-container input[type=time] {
		font-size: 18px
	}

	.time-plugin-container input[type=time], .time-plugin-container select {
		background-color: var(--color-bg-default);
		border: 1px solid transparent;
		border-radius: 4px;
		color: var(--color-fg-default)
	}

	.time-plugin-container select {
		margin: 0 3px
	}

.container_calendar.amp-plugin .calendars .calendar > .header .month-name {
	align-items: center;
	-moz-column-gap: 5px;
	column-gap: 5px;
	display: flex;
	justify-content: center
}

	.container_calendar.amp-plugin .calendars .calendar > .header .month-name select {
		border: none;
		font-size: 14px;
		padding: 3px;
		text-transform: capitalize;
		background: none;
		font-size:16px;
	}

		.container_calendar.amp-plugin .calendars .calendar > .header .month-name select.month-name--dropdown {
			font-weight: 500;
			
		}

.container_calendar.amp-plugin .calendars .calendar > .header .reset-button {
	order: 4
}

.container_calendar.amp-plugin .calendars.calendars:not(.grid-1) .calendar > .header .reset-button {
	visibility: hidden
}

.container_calendar.amp-plugin .calendars.calendars:not(.grid-1) .calendar:last-child > .header .reset-button {
	visibility: visible
}

.container_calendar.amp-plugin.week-numbers .calendar > .daynames-row, .container_calendar.amp-plugin.week-numbers .calendar > .days-grid {
	grid-template-columns: 30px repeat(7,1fr)
}

	.container_calendar.amp-plugin.week-numbers .calendar > .daynames-row .wnum-header, .container_calendar.amp-plugin.week-numbers .calendar > .daynames-row .wnum-item, .container_calendar.amp-plugin.week-numbers .calendar > .days-grid .wnum-header, .container_calendar.amp-plugin.week-numbers .calendar > .days-grid .wnum-item {
		align-items: center;
		color: var(--color-fg-muted);
		display: flex;
		font-size: 12px;
		justify-content: center
	}

.container_calendar[data-theme=dark] {
	--color-bg-default: #22272e;
	--color-bg-secondary: #2d333b;
	--color-bg-inrange: #2c542e;
	--color-bg-locked: #ec775c;
	--color-bg-unavailable: #545d68;
	--color-bg-tooltip: #9e9e9e;
	--color-fg-default: #adbac7;
	--color-fg-primary: #46954a;
	--color-fg-secondary: #202122;
	--color-fg-muted: #9e9e9e;
	--color-fg-accent: #ec775c;
	--color-fg-locked: #9e9e9e;
	--color-btn-primary-bg: #2d333b;
	--color-btn-primary-fg: #46954a;
	--color-btn-primary-border: #46954a;
	--color-btn-primary-hover-bg: #46954a;
	--color-btn-primary-hover-fg: #fff;
	--color-btn-primary-hover-border: #46954a;
	--color-btn-secondary-bg: #2d333b;
	--color-btn-secondary-fg: #adbac7;
	--color-btn-secondary-border: #adbac7;
	--color-btn-secondary-hover-bg: #adbac7;
	--color-btn-secondary-hover-fg: #202122;
	--color-btn-secondary-hover-border: #adbac7;
	--color-border-default: #373e47;
	--color-border-locked: #2d333b
}

@media (max-width: 1117px){
	.container_calendar.inline {
    top: -25px;
	}
}
@media (max-width: 991px){
	.container_calendar.inline {
    top: 0px;
	}
}