body {
	margin: 0;
}

.mainWrapper {
	--fontSize: 20px;
	font-size: var(--fontSize);
	font-family: sans-serif;
	/* display: flex; */
	flex-direction: column;
	align-items: center;
}


.headerComponent {
	background-color: #606060;
	color: #ffffff;
	padding: 5px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.headerComponent .menuItem {
	font-size: 1.1em;
	margin: 0 5px;
	/* border: 1px solid red; */
}

.headerComponent a {
	color: #ffffff;
}

.dayNotesComponent {
	font-size: var(--fontSize);
	/* border: 1px solid green;	 */
	box-sizing: border-box;
	padding: 0.3em;
	max-width: 30em;
	width: 100%;
	/* margin-top: 1em; */
	margin-left: auto;
	margin-right: auto;
}

.dayNotesComponent .rusDateAndAddButton {
	font-size: 1em;
	display: flex;
	/* border: 1px solid red; */
	margin-bottom: 0.5em;
}

.dayNotesComponent .rusDateAndAddButton .rusDate {
	font-size: 1.3em;
	/* border: 1px solid green; */
}

.dayNotesComponent .rusDateAndAddButton .addNoteButton {
	font-size: 1em;
	margin-left: auto;
	padding: 2px 8px;
}

.dayNotesComponent .notesList .oneNote {
	border: 1px solid #858575;
	background-color: #f0f0f0;
	margin: 0 4px 10px 0;
	padding: calc(var(--fontSize) * 0.3);
	box-shadow: 2px 2px 3px #d5d5d5;
	word-break: break-word;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.dayNotesComponent .notesList .smallDate {
	font-size: 1.3em;
	margin-top: 1em;
}

.dayNotesComponent .notesList .smallDate:first-child {
	margin-top: 0;
}

.dayNotesComponent .notesList .oneNote .controls {
	position: relative;
	top: calc(var(--fontSize) * -0.3);
	right: calc(var(--fontSize) * -0.3);
	/* border: 1px solid red; */
	float: right;
	display: flex;
	box-sizing: border-box;
}

.dayNotesComponent .notesList .oneNote .controls .edit {
	overflow: hidden;
	/* border: 1px solid green; */
	font-size: 1.2em;
	margin-right: 0.35em;
	user-select: none;
}

.dayNotesComponent .notesList .oneNote .controls .delete {
	user-select: none;
	/* border: 1px solid green; */
}

.dayNotesComponent .notesList .oneNote .controls .delete .trashBin {
	width: 1em;
	/* border: 1px solid red; */
	margin-top: 0.3em;
}

.dayNotesComponent .notesList .oneNote .deleteNoteDialog {
	text-align: center;
	box-sizing: border-box;
	background-color: #fefef7;
	border: 1px solid #858585;
	padding: 8px;
}

.dayNotesComponent .notesList .oneNote .deleteNoteDialog .question {
	margin-bottom: 0.4em;
}

.dayNotesComponent .notesList .oneNote .deleteNoteDialog button {
	font-size: 1em;
	margin: 0 1em;
	padding: 2px 20px;
}


.editNoteFormComponentWrapper{
	--fontSize: 20px;
	overflow: hidden;
	margin: 4px 0;
	padding: 8px;
	box-sizing: border-box;
	width: 100%;
	/* border: 1px solid green; */
	display: block;
}

.editNoteFormComponent {
	font-size: var(--fontSize);
	border: 1px solid #858585;
	background-color: #fefef7;
	box-sizing: border-box;
	padding: 8px;
	overflow: hidden;
	display: block;
}

.editNoteFormComponent .inputText {
	width: 100%;
	box-sizing: border-box;
	font-size: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.editNoteFormComponent button {
	font-size: 1em;
	margin-right: 1em;
	padding: 2px 8px;
}

.editNoteFormComponent .changeDateBlock {
		/* border: 1px solid grey; */
		margin-bottom: 0.8em;
}

.editNoteFormComponent .changeDateBlock .date {
	font-size: 1em;
	width: 2.8em;
	height: 1.3em;
	box-sizing: border-box;
	margin-right: 0.2em;
}

.editNoteFormComponent .changeDateBlock .month {
	font-size: 1em;
	width: 6em;
	height: 1.3em;
	box-sizing: border-box;
	margin-right: 0.2em;
}

.editNoteFormComponent .changeDateBlock .year {
	font-size: 1em;
	width: 4.2em;
	height: 1.3em;
	box-sizing: border-box;
}

.calendarWrapper {
	--fontSize: 30px;
	font-size: var(--fontSize);
	font-family: sans-serif;
	text-align: center;
	/* border: 1px solid red; */
	display: flex;
	flex-direction: column;
	margin-bottom: 0.3em;
}


.calendarWrapper .arrowsAndMonth {
	/* border: 1px solid black; */
	display: flex;
	justify-content: center;
	font-size: 1.3em;
	margin-bottom: 4px;
}

.calendarWrapper .arrowsAndMonth .monthAndDate {
	color: #242424;
	width: calc(var(--fontSize) * 10);
	overflow: hidden;
	/* border: 1px solid red; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendarWrapper .arrowsAndMonth .arrow {
	user-select: none;
	font-size: 1.5em;
	/* border: 1px solid red; */
}

.calendarWrapper .arrow.withShadow {
	text-shadow: 0px 0px 2px #308030;
}

	
.calendarWrapper .arrow.left {
	margin-right: 10px;
}

.calendarWrapper .arrow.right {
	margin-left: 10px;
}

.calendar {
	--dayBlockSize: calc(var(--fontSize) * 1.3333);
	font-size: var(--fontSize);
	border: 1px solid #d7d7d7;
	display: inline-block;
	margin: 0 auto;
	padding: 10px;
	background-color: #fafaf7;
	/* user-select: none; */
}

.calendar .calendarWeek {
	display: flex;
	padding: 0;
	margin: calc(var(--fontSize) / 2) 0;
}

.calendar .calendarWeek.weekDayNames {
	margin-bottom: 0;
}

.calendar .calendarWeek:first-child {
	margin-top: 0;
}

.calendar.withDayNames .calendarWeek:nth-child(2) {
	margin-top: 4px;
}

.calendar .calendarWeek:last-child {
	margin-bottom: 0;
}


.calendar .calendarWeek .calendarDay,
.calendar .calendarWeek .dayName {
	--paddingSize: calc(var(--fontSize) / 5);
	--borderSize: 1px;
	position: relative;
	display: block;
	font-size: var(--fontSize);
	border-radius: 3px;
	width: calc(var(--dayBlockSize) + var(--paddingSize)*2);
	height: calc(var(--dayBlockSize) + var(--paddingSize)*2);
	text-align: center;
	line-height: var(--dayBlockSize);
	overflow: hidden;
	white-space: nowrap;
	padding: var(--paddingSize);
	background-color: #fefefc;
	margin: 0 calc(var(--fontSize) / 4);
	box-shadow: 2px 2px 4px 0px #959595;
	color: #101010;
	border: var(--borderSize) solid #626262;
	box-sizing: border-box;
	user-select: none;
}

.calendar .calendarWeek .dayName {
	border: 1px solid transparent;
	box-shadow: none;
	background-color: transparent;
	font-size: calc(var(--fontSize) * 0.6);
	line-height: calc(var(--dayBlockSize) * 0.6);
	height: calc(var(--dayBlockSize) * 0.6);
	padding-top: 0;
	padding-bottom: 0;
}


.calendar .calendarWeek .calendarDay.today {
	color: #000000;
	background-color: #b0f0b0;
}

.calendar .calendarWeek .calendarDay.selected::before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 2px solid #606060;
}

.calendar .calendarWeek .calendarDay:first-child, .calendar .calendarWeek .dayName:first-child {
	margin-left: 0;
}

.calendar .calendarWeek .calendarDay:last-child, .calendar .calendarWeek .dayName:last-child {
	margin-right: 0;
}

.calendar .calendarWeek .calendarDay.adjacentMonth {
	color: #878787;
	background-color: #f8f8f8;
	border: 1px solid #a6a6a6;
	box-shadow: 2px 2px 4px 0px #b5b5b5;
}

.calendar .calendarWeek .calendarDay.hasNotes {
	text-decoration: underline;
	text-decoration-thickness: calc(var(--fontSize) / 15);
	text-underline-offset: 2px;
}


.allNotesText {
	/* border: 1px solid red; */
	padding: 0.3em;
	box-sizing: border-box;
	max-width: 30em;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


.about {
	max-width: 30em;
	width: 100%;
	padding: 0.4em;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.slide-enter-from {
	max-height: 0;
}

.slide-enter-to {
	transition: max-height 0.2s ease 0s;
	max-height: 300px;
}

.slide-leave-to {
	max-height: 0;
	transition: max-height 0.1s ease 0s;
}

.slide-leave-from {
	max-height: 130px;
}



@media screen and (max-width: 510px) {
	.calendarWrapper {
		--fontSize: 28px;
	}

	.calendar .calendarWeek .calendarDay.hasNotes {
		text-decoration-thickness: calc(var(--fontSize) / 8);
	}
}


@media screen and (max-width: 475px) {
	.calendarWrapper {
		--fontSize: 27px;
	}
}


@media screen and (max-width: 460px) {
	.calendarWrapper {
		--fontSize: 26px;
	}

	.dayNotesComponent .rusDateAndAddButton .rusDate {
		font-size: 1.1em;
	}

	.dayNotesComponent .rusDateAndAddButton .addNoteButton {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 455px) {
	.calendarWrapper {
		--fontSize: 25px;
	}
}

@media screen and (max-width: 430px) {
	.calendarWrapper {
		--fontSize: 23px;
	}

	.dayNotesComponent .rusDateAndAddButton .rusDate {
		font-size: 1.0em;
	}

	.dayNotesComponent .rusDateAndAddButton .addNoteButton {
		font-size: 0.7em;
	}
}

@media screen and (max-width: 400px) {
	.calendarWrapper {
		--fontSize: 22px;
	}
}

@media screen and (max-width: 380px) {
	.calendarWrapper {
		--fontSize: 20px;
	}
}

@media screen and (max-width: 350px) {
	.calendarWrapper {
		--fontSize: 19px;
	}
}

@media screen and (max-width: 340px) {
	.calendarWrapper {
		--fontSize: 18px;
	}
}

@media screen and (max-width: 330px) {
	.calendarWrapper {
		--fontSize: 16px;
	}
}