/*  Calendar  */
.periods-list {margin: 0}
.calendars .available {
	border-left: solid 2rem var(--primary-color);
	padding-left: var(--small-gap);
}
.calendars .not-available {
	border-left: solid 2rem #e6e6e6;
	padding-left: var(--small-gap);
}
#calendar .ui-widget.ui-widget-content {
	width: 100%;
}
#calendar .date-available a {
	background-color : var(--primary-color) !important;
	background-image :none !important;
	color: White !important;
	font-weight:bold !important;
	cursor: default;
	border: 1px solid var(--primary-color);
}
#calendar .ui-state-default {
	background-image :none !important;
	background-color : #e6e6e6 !important;
	color: var(--text-color) !important;
	cursor: default;
	border: 1px solid #e6e6e6;
}
.calendar-wrap-show
{
	display:block;
}
.calendar-wrap-hide
{
	display: none;
}
#form-ad > div > div#calendar-wrap {
    width: 100%;
}
#calendar-wrap input
{
	width: 20%;
}
#calendar-wrap .period  div
{
	display: inline-flex;
	width: 20%;
}
#calendar-wrap .period  div input {
	width: 100%;
}
#calendar-wrap button
{
	display: inline-flex;
    appearance: none;
	color: #FFFFFF;
	text-align: center;
	border-radius: 4px;
    margin: 0;
	text-decoration: none;
	font-size: 0.95em;
	padding: 10px;
	border: none;
	outline: 0;
    cursor: pointer;
}
#calendar-wrap .insert-period {
	background: var(--primary-color);
}
#calendar-wrap .cal_period_remove
{
	background: var(--error-text-color);
	margin-left: 5px;
}
#calendar-wrap [data-calendar="item"]:last-of-type .cal_period_remove {
	display: none;
}
#calendar-wrap button:hover
{
	opacity: 0.8;
}
#calendar-wrap div > p.p-success, #calendar-wrap div > p.warning, #calendar-wrap div > p.p-error {
	text-align: left;
}
#calendar-periods {position: relative;}
.admin #calendar-periods {
	margin-bottom: 10px;
}
#calendar-wrap .data-unit {
	position: static;
	display: flex;
	align-items: center;
	min-width: 15px;
	margin-left: 5px;
}
.internal-body #calendar-wrap .data-unit {
	font-size: 0.8em;
}
.body-internal-body #calendar-periods li {
	margin-bottom: 10px;
	padding-right: 10px;
}
.block-calendar {
	display: flex;
	justify-content: space-between;
}
.block-calendar .date-list-calendar {
	flex: 0 0 40%;
}
.block-calendar .date-list-calendar > li {
	margin: 0 auto 7px auto;
	font-family: var(--font-family-light);
}
.block-calendar .date-list-calendar > li:last-child {
	margin-bottom: 0;
}
.block-calendar .date-calendar {
	flex: 0 0 60%;
}
.block-calendar .date-calendar > div {
	width: 70%;
	margin: auto;
}
.block-calendar .date-calendar .ui-widget.ui-widget-content {
	width: 100%;
}
.block-calendar .cal-available {
	border-left: solid 34px var(--primary-color);
	line-height: 24px;
	padding-left: 7px;
	margin: 12px 0 4px 0;
}
.block-calendar .cal-not-available {
	border-left: solid 34px var(--border-color);
	line-height: 24px;
	padding-left: 7px;
	margin: 10px 0 4px 0;
}
#cal-show .date-available a
{
	background-color : var(--primary-color) !important;
	background-image :none !important;
	color: White !important;
	font-weight:bold !important;
	cursor: default;
	border: 1px solid var(--primary-color);
}
#cal-show .ui-state-default
{
	background-image :none !important;
	background-color : var(--border-color) !important;
	color: White !important;
	cursor: default;
	border: 1px solid var(--border-color);
}
@media (max-width: 1180px) {
	.block-calendar .date-list-calendar > li {
		text-align: left;
	}
}
@media (max-width: 1024px) {
	.body-internal-body #calendar-wrap div.div-form > div {
		text-align: left;
	}
	.body-internal-body #calendar-wrap input {
		width: 100%;
		margin-bottom: 24px;
		padding-right: 34px;
	}
	.body-internal-body #calendar-wrap .period  div {
		position: relative;
		display: flex;
		width: 100%;
	}
	.body-internal-body #calendar-wrap .data-unit {
		right: 10px;
		left: auto;
		top: 0;
		width: auto;
		height: 42px;
		position: absolute;
		font-size: 0.85em;
	}
	#calendar-wrap .cal_period_remove {
		margin-left: 0;
	}
}
@media (max-width: 930px)
{
	#calendar-wrap input {
		width: 100%;
		padding-right: 34px;
	}
	#calendar-wrap .period  div {
		position: relative;
		display: flex;
		width: 100%;
	}
	#calendar-wrap button {
		margin: 10px 0 20px;
	}
	#calendar-wrap .data-unit {
		right: 10px;
		left: auto;
		top: 0;
		position: absolute;
		font-size: 0.85em;
	}
	#calendar-wrap .cal_period_remove {
		margin-left: 0;
	}
	.block-calendar .date-calendar,
	.block-calendar .date-list-calendar {
		flex: 0 0 50%;
	}
	.block-calendar .date-calendar > div {
		width: 90%;
		margin: auto 0 auto auto
	}
}
@media (max-width: 650px) {
	.block-calendar {
		flex-direction: column;
	}
	.block-calendar .date-list-calendar {
		margin-bottom: 20px;

	}
	.block-calendar .date-calendar > div {
		width: 70%;
		margin: auto;
	}
}