html {
	--webbg: #fff;
	--text: #262626;
	--bg: #eef3f5;
	--whiteorblack: #eff3f5;
	--white: #eff3f5;
	--black: #262626;
	--line: #d8d8dd;
	--sectioncolor: #000099;
	--sectioncolor2: #3399ff;
	--sectioncolor3: #66ccff;
	--invert: none;
	--displayDark: none;
	--displayLight: block;
	--hoverbg: transparent;
	--hoverBrightness: brightness(95%);
	--hoverBrightness2: brightness(120%);
	--prevMonthDay: rgba(38, 38, 38, 0.25);
	--disabledDay: rgba(38, 38, 38, 0.1);
	--dayHover: rgba(238, 243, 245, 0.4);
	--radius-M: 8px;
	--radius-XL: 16px;
}

html.dark-theme {
	--webbg: #141414;
	--text: #eff3f5;
	--bg: #202124;
	--whiteorblack: #262626;
	--line: #717c8e;
	--invert: invert(0.95) hue-rotate(180deg);
	--displayDark: block !important;
	--displayLight: none !important;
	--hoverbg: #3a3e46;
	--prevMonthDay: rgba(231, 231, 231, 0.25);
	--disabledDay: rgba(231, 231, 231, 0.1);
	--dayHover: var(--bg);
}

body {
	background: var(--webbg);
}
.bg {
	background: var(--bg) !important;
}
div {
	box-sizing: border-box !important;
}
a {
	text-decoration: none;
}
b {
	font-weight: 600;
}
.invert {
	filter: var(--invert);
}
.dark {
	display: var(--displayDark) !important;
}
.light {
	display: var(--displayLight) !important;
}
.l {
	text-align: left !important;
}
.c {
	text-align: center !important;
}
.r {
	text-align: right !important;
}

* {
	-webkit-font-smoothing: grayscale;
	-moz-osx-font-smoothing: grayscale;
	font-family: "GT Eesti", "Arial", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: var(--text);
	margin: 0;
}

/* -- title bar -- */

.title--container {
	display: flex;
	justify-content: space-between;
	align-items: end;
	background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
	background-size: 4px 4px;
	background-repeat: repeat-x;
	background-position: bottom left;
	padding-bottom: 12px;
}

.title--container .title--container__title {
	display: flex;
	align-items: end;
	gap: 6px;
}

.title--container .title--container__title span {
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
}

span.str-ph {
	display: none;
}

.title--container__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	height: 32px;
	background: var(--bg);
	cursor: pointer;
	border-radius: var(--radius-M);
}

.title--container__button span {
	font-weight: 600;
	font-size: 14px;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.title--container__button:hover {
	background: var(--hoverbg);
}

/* -- content -- */

.wrapper {
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
	margin-top: 14px;
}

/* -- date strip -- */

.wrapper--date-strip {
	overflow: hidden;
	max-height: 9999px;
	width: 100%;
	height: 59px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wrapper--date-strip .date-strip {
	width: calc(100% - 70px);
}

.wrapper--date-strip .swiper {
	width: 100%;
	height: 100%;
}

.wrapper--date-strip .swiper-slide {
	width: 59px !important;
}

.wrapper--date-strip .button-left,
.wrapper--date-strip .button-right,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	background: var(--sectioncolor);
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: var(--radius-M);
	background-image: url("button-arrow.svg");
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.dark-theme .wrapper--date-strip .button-left,
.dark-theme .wrapper--date-strip .button-right,
.dark-theme .flatpickr-months .flatpickr-prev-month,
.dark-theme .flatpickr-months .flatpickr-next-month {
	background-image: url("button-arrow-dark.svg");
}

.wrapper--date-strip .button-right,
.flatpickr-months .flatpickr-next-month {
	transform: rotate(180deg);
	left: auto;
	right: 0;
}

.wrapper--date-strip .button-left:hover,
.wrapper--date-strip .button-right:hover {
	filter: var(--hoverBrightness2);
}

.wrapper--date-strip .date-button {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 59px;
	min-width: 59px;
	height: 59px;
	justify-content: center;
	cursor: pointer;
}

.wrapper--date-strip .date-button div {
	text-align: center;
	line-height: 1;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.wrapper--date-strip .date-button div:nth-of-type(1) {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 57px;
	height: 57px;
	border-radius: var(--radius-XL);
	background: transparent;
	z-index: -1;
}

.wrapper--date-strip .date-button:hover div:nth-of-type(1) {
	background: var(--bg);
	opacity: 0.4;
}

.wrapper--date-strip .date-button div:nth-of-type(2) {
	color: var(--sectioncolor);
	font-size: 12px;
	font-weight: 600;
}

.wrapper--date-strip .date-button div:nth-of-type(3) {
	font-size: 18px;
	font-weight: 700;
	margin-top: 2px;
	margin-bottom: 2px;
}

.wrapper--date-strip .date-button div:nth-of-type(4) {
	font-size: 11px;
}

.wrapper--date-strip .active {
	pointer-events: none;
}

.wrapper--date-strip .active .date-button div:nth-of-type(1) {
	background: var(--bg);
}

.wrapper--date-strip .inactive {
	pointer-events: none;
	opacity: 0.15;
}

.wrapper--date-strip .swiper-button-disabled {
	opacity: 0.15;
	pointer-events: none;
}

/* -- calendar -- */

.wrapper--calendar {
	overflow: hidden;
	max-height: 0;
	text-align: center;
	width: 100%;
	margin-top: -5px;
}

.wrapper--calendar input {
	display: none;
}

.wrapper--calendar .flatpickr-wrapper {
	margin: 0 auto 2px auto;
}

.wrapper--calendar .flatpickr-calendar {
	box-shadow: none;
	background: transparent;
	width: 100%;
}

.wrapper--calendar .flatpickr-calendar .flatpickr-day.selected {
	pointer-events: none;
}

.wrapper--calendar .flatpickr-calendar .calendar-link {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 50%;
}

.wrapper--calendar .flatpickr-calendar .flatpickr-disabled a {
	pointer-events: none;
}

@media only screen and (max-width: 499px) {
	span.str-ph {
		display: inline;
	}
	span.str-dt {
		display: none;
	}

	.title--container {
		align-items: center;
		gap: 10px;
	}
	.title--container .title--container__title span {
		font-size: 20px;
	}

	.title--container .title--container__title svg {
		width: 21px;
		height: 21px;
		min-width: 21px;
	}

	.title--container__button {
		width: 115px;
		height: 30px;
	}
}

@media only screen and (max-width: 350px) {
	.title--container .title--container__title svg {
		display: none;
	}
}