/* Классы календаря для новых виджетов и АРМов*/

.clwidget-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
/*z-index: calc(var(--z-index) + 13);*/
  display: none;
  opacity: 0;
  user-select: none;
  transition: .3s;
  background: rgba(0, 0, 0, 0.6);
  cursor: default;
}
.cl_calendar {
  box-sizing: border-box;
  margin: auto;
  background: var(--basic-bg-clr);
  border-radius: var(--b-rad);
  position: absolute;
  font-family: var(--f-family);
  font-weight: var(--f-weight);
  font-size: var(--f-size);
  line-height: 1.3;
  overflow: hidden;
}
.cl_calendar * {font-family: var(--f-family);}
.cl_calendar_head {
  width: 100%;
  height: auto;
  background: var(--clr-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl_calendar_text {
  float: none;
  padding: var(--sp-s) var(--sp-m);
  width: auto;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  line-height: 2;
  font-weight: var(--f-bold);
  color: var(--clr-white);
  cursor: default;
}
/*.cl_calendar.nolegend {height: 225px;}*/
.cl_calendar_back, .cl_calendar_next {
  box-sizing: border-box;
  position: relative;
  float: none;
  height: 28px;
  width: 28px;
  text-align: center;
/*border: var(--border);*/
  border-radius: var(--b-rad);
  background: var(--clr-primary);
  border-color: var(--btn-border-clr);
  color: var(--clr-white);
  font-size: var(--f-size-inpt);
  line-height: var(--f-size);
  margin: var(--sp-s);
/*padding: var(--sp-m);*/
  text-transform: uppercase;
  cursor: pointer;
  text-overflow: ellipsis;
}
.cl_calendar_back:after, .cl_calendar_next:after {
  content: '';
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  box-shadow: none;
  position: absolute;
  border-radius: var(--b-rad);
  background-color: transparent;
  cursor: pointer;
}
.cl_calendar_back:after, .cl_calendar_next:after {
  background-repeat: no-repeat;
  background-position: center;
}
.cl_calendar_back:active:after, .cl_calendar_next:active:after {background-color: var(--clr-primary);}
.cl_calendar_back:after {background-image: url(../img/arrow_left_w.png);}
.cl_calendar_next:after {background-image: url(../img/arrow_right_w.png);}
.cl_calendar_back[disabled="1"]:after {background-image: url(../img/arrow_left_w.png);}
.cl_calendar_next[disabled="1"]:after {background-image: url(../img/arrow_right_w.png);}
.cl_calendar_back[disabled="1"], .cl_calendar_next[disabled="1"] {cursor: default;}
.cl_calendar_back[disabled="1"]:after, .cl_calendar_next[disabled="1"]:after {
  cursor: default;
  background-color: var(--clr-disabled);
}
.cl_calendar_area {
  width: auto;
  height: auto;
  background: var(--clr-white);
  padding: var(--sp-m);
  box-sizing: border-box;
  display: flex;
}
.cl_calendar_month {
  width: auto;
  height: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.cl_calendar_month + .cl_calendar_month {margin-left: var(--sp-l);}
.cl_calendar_month_name {
  width: auto;
  margin: 0 0 var(--sp-s) 0;
  background: transparent;
  font-weight: var(--f-bold);
  color: var(--clr-default);
  cursor: default;
  text-align: center;
}
.cl_calendar_month_week {
  width: auto;
  height: 16px;
  font-size: var(--f-size);
  border-bottom: var(--border);
  border-color: var(--clr-secondary);
  margin-bottom: var(--sp-s);
  display: flex;
}
.cl_calendar_month_week div {
  height: auto;
  color: var(--clr-default);
  line-height: .9;
  font-size: var(--f-size);
}
.cl_calendar_month_days {
  width: auto;
  height: auto;
  float: left;
  color: var(--clr-disabled);
}
.cl_calendar_month_days_week {
  width: 100%;
  height: auto;
}
.cl_calendar_month_day {
  float: left;
  width: 25px;
  height: auto;
  font-size: var(--f-size);
  border: var(--border);
  border-color: transparent;
  border-radius: var(--b-rad);
  box-sizing: border-box;
  cursor: default;
  text-align: center;
  line-height: 1.4;
}
div.cl_calendar_cur_day {
  color: var(--clr-white);
  background: var(--clr-primary);
  font-weight: var(--f-bold);
}
div.cl_calendar_cur_day.cl_calendar_period,
div.cl_calendar_cur_day.cl_calendar_preselect,
div.cl_calendar_cur_day.cl_calendar_period.cl_calendar_preselect {
  background: var(--clr-primary);
}
div.cl_calendar_today {
  color: var(--clr-primary);
  font-weight: var(--f-bold);
  border: var(--border);
  border-color: var(--clr-primary);
  border-radius: var(--b-rad);
  line-height: 1.4;
}
div.cl_calendar_today.cl_calendar_cur_day {
  border: var(--border);
  border-color: var(--clr-primary);
  color: var(--clr-white);
}
.cl_calendar_month_day_inaccessible {
  position: relative;
  cursor: default;
}
.cl_calendar_month_day_inaccessible:before {
  content: '';
  height: 50%;
  width: 65%;
  border-bottom: var(--border);
  border-color: var(--clr-default);
  position: absolute;
  left: 25%;
  right: 0;
  margin: auto;
  transform: rotate(30deg);
}
.cl_calendar_month_day_active.cl_calendar_month_day_inaccessible:before {
  border-bottom: var(--border);
  border-color: var(--clr-default);
}
.cl_calendar_month_day_active.cl_calendar_month_day_inaccessible:hover {
	background: none;
	color: var(--clr-default);
	cursor: default;
}
.cl_calendar_month_day_active {color: var(--clr-default);}
div.cl_calendar_month_day_active:hover, div.cl_calendar_dt2 {
  color: var(--clr-white);
  background: var(--clr-secondary);
  cursor: pointer;
}
div.cl_calendar_dt2 {font-weight: var(--f-bold);}
div.cl_calendar_period {background: rgba(38, 145, 217, 0.2);}
div.cl_calendar_preselect {background: rgba(38, 145, 217, 0.2);}
div.cl_calendar_period.cl_calendar_preselect {background: rgba(38, 145, 217, 0.4);}


.cl_hotel_free_calendar div.cl_calendar_month_day:hover { background: rgba(38, 145, 217, 0.1);}

.cl_calendar_legend {
  width: auto;
  text-align: center;
  font-size: var(--f-size-inpt);
  background: var(--clr-disabled);
  height: 28px;
  line-height: 28px;
}

/* развернутые календари */
.clBooking-insite > .cl_calendar {display: none;}
.clBookShowCaledar.clBooking-insite > .cl_calendar {
	display: block;
	position: relative;
	background: none;
	width: 100%;
	margin-top: var(--sp-m);
	float: left;
	height: 193px;
}
.clBookShowCaledar .cl_calendar_month + .cl_calendar_month {
	margin-left: var(--sp-m);
	margin-top: 0;
}
.clBookShowCaledar .cl_calendar_head {
	background: none;
	position: absolute;
	height: 28px;
	padding: 0 var(--sp-m);
	box-sizing: border-box;
}
.clBookShowCaledar .cl_calendar_month {background: none;}
.clBookShowCaledar .cl_calendar_month_name {background: none;}
.clBookShowCaledar .cl_calendar_area {
	background: none;
	padding: 0 var(--sp-m) 0;
}
.clBookShowCaledar .cl_calendar_legend {background: none;}
.clBookShowCaledar .cl_calendar_month_week div, .clBookShowCaledar .cl_calendar_month_name,
.clBookShowCaledar .cl_calendar_month_day_active, .clBookShowCaledar .cl_calendar_month_days,
.clBookShowCaledar .cl_calendar_text {color: var(--clr-white) !important;} /* цвет текста формы */
.clBookShowCaledar div.cl_calendar_today {
	color: var(--clr-white) !important; /* цвет текста формы */
	border: var(--border); border-color: var(--clr-white) !important;
}
.clBookShowCaledar .cl_calendar_month_day_active.cl_calendar_month_day_inaccessible:before {
	border-bottom: var(--border); border-color:  var(--clr-white) !important; /* цвет текста формы */
}
.clBookShowCaledar .cl_calendar_month_day {opacity: 0.5;}
.clBookShowCaledar .cl_calendar_month_day_active, .clBookShowCaledar .cl_calendar_month_week .cl_calendar_month_day {opacity: 1;}
.clBookShowCaledar .cl_calendar_back, .clBookShowCaledar .cl_calendar_next {
	background: none;
	border-width: 1px;
	width: 26px;
	height: 26px;
}
.clBookShowCaledar .cl_calendar_back:after, .clBookShowCaledar .cl_calendar_next:after {
	box-shadow: none;
	width: 100%;
	height: 100%;
	background-color: #f27921;
	color: var(--clr-white) !important; /* цвет фона и текста кнопки действия */
}
.clBookShowCaledar .cl_calendar_back[disabled="1"]:after, .clBookShowCaledar .cl_calendar_next[disabled="1"]:after {
	background-color: #efefef;
	color: #000000 !important; /* цвет фона и текста кнопки Назад */
}
.clBookShowCaledar .cl_calendar_text {
	line-height: 26px;
	padding: 0;
	width: calc(100% - 52px);
	-webkit-width: calc(100% - 52px);
	-moz-width: calc(100% - 52px);
}
.clBookShowCaledar .cl_calendar_month_name {
	line-height: 24px;
	height: 26px;
	margin: 0;
}
.clBookShowCaledar.clBooking-insite .clBookCalendIn .dataico.butDate {display: none;}
.clBookShowCaledar.clBooking-insite .clBooking-calend-legend.clBooking-color-input-text {display: none;}
.clBookShowCaledar .cl_calendar_legend {box-sizing: border-box;}

@media screen and (max-width:720px)  {
	.cl_calendar {
    position: fixed !important;
    top: 25px;
    left: 0;
    right: 0;
    bottom: auto;
  }
	.clBookShowCaledar.clBooking-insite > .cl_calendar {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}
}

@media screen and (max-width:480px) and (min-height:440px)  {
	.cl_calendar {
		width: 195px;
		height: 425px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.cl_calendar.nolegend {height: 395px;}
	.cl_calendar_area {
		padding: var(--sp-m) var(--sp-m) 7px;
		flex-direction: column;
	}
	.cl_calendar_month_day {width: 25px;}
	.cl_calendar_month + .cl_calendar_month {
		margin-left: 0;
		margin-top: 7px;
	}
	.cl_calendar_legend {
		font-size: 11px;
		line-height: 13px;
		padding: var(--sp-s);
		box-sizing: border-box;
		height: 35px;
	}
	.clBookShowCaledar .cl_calendar_legend {
		font-size: 12px;
		height: 28px;
		line-height: 28px;
		padding: 0;
	}
}

@media screen and (max-width:640px) and (max-height:440px) {
  .cl_calendar {
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  }
}

@media screen and (max-width:480px) and (max-height:440px) {
	.cl_calendar.nolegend {height: 225px;}
	.cl_calendar_month_day {width: 21px;}
	.cl_calendar_month + .cl_calendar_month {
		margin-left: var(--sp-m);
		margin-top: 0;
	}
	.cl_calendar_legend {
		font-size: 11px;
		line-height: 1;
		padding: var(--sp-s);
		box-sizing: border-box;
		height: auto;
	}
}