:root{
	--color-weekday-bg: #ffffff;	
	--color-weekend-bg: red;
	--color-text: #000000;
	--color-weekday-text: #000000;
	--color-weekend-text: #ffffff;
	--color-month_name: #9d61bf; 
	--size-day-text: 1rem;
	--width-day_box: 25px;
	--col-gap: 2px;
	--row-gap: 2px;
	--calendar-padding: 10px;
	--box-size: calc(var(--col-gap) + var(--width-day_box));
	--box-bg-full: linear-gradient(135deg, rgba(241,117,113,1) 50%, rgba(241,117,113,1) 100%);
	--box-bg-start: linear-gradient(135deg, rgba(255,255,255,1) 50%, rgba(241,117,113,1) 100%);
	--box-bg-middle: linear-gradient(135deg, rgba(241,117,113,1) 0%, rgba(255,255,255,1) 50%, rgba(241,117,113,1) 100%);
	--box-bg-end: linear-gradient(135deg, rgba(241,117,113,1) 10%, rgba(255,255,255,1) 100%);
}

.calendar{
	max-width: 80%;
	width: auto;
	max-height:216px;
	background-color: #fff;
	border-radius: 10px;
	margin: 0 auto;
	padding: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
	display: flex;
	  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	overflow: hidden;
}



.cal_month{
	display: grid;
	grid-template-columns: var(--box-size) var(--box-size) var(--box-size) var(--box-size) var(--box-size) var(--box-size) var(--box-size);
	column-gap: var(--col-gap);
	row-gap: var(--row-gap);
	grid-auto-columns: var(--width-day_box);
	grid-auto-rows: var(--width-day_box);
	background-color:#ffffff;
	max-width: calc(7 * var(--width-day_box) + 7 * var(--col-gap) + 1 * var(--calendar-padding));
	min-height: 210px;
	min-width: 200px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: var(--calendar-padding);
	padding-right: calc(var(--calendar-padding) + var(--col-gap));
	box-shadow: 2px 1px 1px #cccccc;
	border-left:  1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-radius: 5px;
	max-height: 230px;
}

.day_box{
	background-color: var(--color-weekday-bg);
	font-size: var(--size-day-text);
	box-shadow: 1px 1px 1px #eeeeee;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-radius: 5px;
	text-align: center;
	align-content: center;
	padding: 1px;
}

.month_name{
	grid-column-start: 1;
	grid-column-end:8;
	color:#ffffff;
	background-color: var(--color-month_name);
	font-size: var(--size-day-text);
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	align-content: center;
	min-height: 25px;
}

.box-bg-full{
	 background: var(--box-bg-full);
}

.box-bg-start{
	background: var(--box-bg-start);
	text-shadow: 1px 1px 2px black;
}

.box-bg-middle{
	background: var(--box-bg-middle);
	text-shadow: 1px 1px 2px black;
}

.box-bg-end{
	background: var(--box-bg-end);
	text-shadow: 1px 1px 2px black;
}

.box-bg-w{
	background-color: #ffffff;
}
.box-bg-g{
	background-color: #999999;
	color: #ffffff;
	text-shadow: 1px 1px 1px #bbbbbb;	
}
.box-bg-r{
	background-color: rgba(241,117,113,1);
}

.box-bg-wr{
	background: linear-gradient(135deg, rgba(255,255,255,1) 43%, rgba(241,117,113,1) 57%, rgba(241,117,113,1) 100%);
	text-shadow: 1px 1px 1px #eeeeee;
	background-origin:border-box;
}
.box-bg-wg{
	background: linear-gradient(135deg, rgba(255,255,255,1) 43%, rgba(153,153,153,1) 57%, rgba(153,153,153,1) 100%);
	color: #000000;
	text-shadow: 1px 1px 1px #ffffff;	
	background-origin:border-box;	
}
.box-bg-gr{
	background: linear-gradient(135deg, rgba(153,153,153,1) 0%, rgba(153,153,153,1) 43%, rgba(255,255,255,1) 50%, rgba(241,117,113,1) 57%, rgba(241,117,113,1) 100%);
	text-shadow: 1px 1px 2px black;	
	background-origin:border-box;
}
.box-bg-rg{
	background: linear-gradient(135deg, rgba(241,117,113,1) 0%, rgba(241,117,113,1) 43%, rgba(255,255,255,1) 50%, rgba(153,153,153,1) 57%, rgba(153,153,153,1) 100%);
	text-shadow: 1px 1px 2px black;	
	background-origin:border-box;
}
.box-bg-rw{
	background: linear-gradient(135deg, rgba(241,117,113,1) 0%, rgba(241,117,113,1) 43%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%);
	text-shadow: 1px 1px 1px #eeeeee;	
	background-origin:border-box;
}
.box-bg-gw{
	background: linear-gradient(135deg, rgba(153,153,153,1) 43%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%);
	color: #000000;
	text-shadow: 1px 1px 1px #ffffff;
	background-origin:border-box;	
}

.box-bg-rwr{
	background: linear-gradient(135deg, rgba(241,117,113,1) 0%, rgba(241,117,113,1) 43%, rgba(255,255,255,1) 50%, rgba(241,117,113,1) 57%, rgba(241,117,113,1) 100%);
	text-shadow: 1px 1px 1px #eeeeee;
	background-origin:border-box;
}

.box-bg-rwg{
	background: linear-gradient(135deg, rgba(241,117,113,1) 0%, rgba(241,117,113,1) 43%, rgba(255,255,255,1) 50%, rgba(153,153,153,1) 57%, rgba(153,153,153,1) 100%);
	text-shadow: 1px 1px 1px #eeeeee;
	background-origin:border-box;
}

.box-bg-gwr{
	background: linear-gradient(135deg, rgba(153,153,153,1) 0%, rgba(153,153,153,1) 43%, rgba(255,255,255,1) 50%, rgba(241,117,113,1) 57%, rgba(241,117,113,1) 100%);
	color: #000000;
	text-shadow: 1px 1px 1px #ffffff;
	background-origin:border-box;	
}

.box-bg-gwg{
	background: linear-gradient(135deg, rgba(153,153,153,1) 0%, rgba(153,153,153,1) 43%, rgba(255,255,255,1) 50%, rgba(153,153,153,1) 57%, rgba(153,153,153,1) 100%);
	color: #000000;
	text-shadow: 1px 1px 1px #ffffff;	
	background-origin:border-box;
}