قالب:تقويم شهري مقابل/style.css

.d-calendar {
	margin: 0.6em 0.6em 0.6em 0;
	direction: rtl;
	float:left;
	clear:left;
	overflow-x: auto;
	overflow-y: hidden;
}

.d-calendar > div {
	min-width: 20em;
	border: 0.1em solid #CBCFD3;
}

.d-calendar-navigation {
	background-color: #F8F9FA;;
	border-radius: 6px 6px 0 0;
	font-weight: bold;
	position:relative;
}

.d-calendar-navigation .d-calendar-title {
	text-align: center;
}

.d-calendar-navigation .d-calendar-prev, .d-calendar-navigation .d-calendar-next {
	text-decoration: none;
	height: 24px;
	opacity: 0.9;
	position: absolute;
	top: 4px;
	width: 24px;
}

.d-calendar-navigation .d-calendar-prev {
	background-position: 0 0;
	right: 4px;
}

.d-calendar-navigation .d-calendar-next {
	background-position: -24px 0;
	left: 4px;
}

.d-calendar .d-calendar-navigation .d-calendar-prev:hover, .d-calendar .d-calendar-navigation .d-calendar-next:hover {
	opacity: 1;
}

.d-calendar ul {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	list-style: none;
	margin: 0;
  	padding:0;
}

.d-calendar li {
	margin: 0;
	padding: 0 0.2em;
	background-color: #EEEEEE;
	border: 1px solid #D8DCDF;
	color: #004276;
}

.d-calendar-days {
	background-color: #EEEEEE;
}

.d-calendar .d-calendar-days a {
	display: inline-block;
	font-weight: normal;
	opacity: 0.7;
	text-align: right;
	text-decoration: none;
}

.d-calendar .d-calendar-days li:hover {
	background-color: #F6F6F6;
	border: 1px solid #CDD5DA;
	color: #111111;
}

.d-calendar .d-calendar-current a {
	font-weight: bold;
	opacity: 1;
}

.d-calendar .d-calendar-today a {
	background-color: #FBF8EE;
	border: 1px solid #FCD3A1;
	color: #444444;
	font-weight: bold;
	opacity: 1;
}

.d-calendar-gregorian,.d-calendar-julian,.d-calendar-western {
	text-align: left;
	float: left;
}

.d-calendar .d-calendar-hijri {
	text-align: right;
	direction: rtl;
	float: right;
}

.d-calendar-sub {
	font-size: 65%;
	margin-top:-0.6em;
	margin-bottom:-0.1em;
}

.d-calendar-days li .d-calendar-sub-h {
	visibility: hidden;
	background-color: #e3e3e3;
	color: #fff;
	text-align: center;
	border: 1px solid #0785E3;
	border-radius: 3px;
	padding: 0px 6px;
	position: absolute;
	z-index: 1;
	font-size: 0.90em;
	display:block;
}

.d-calendar-days li:hover .d-calendar-sub-h {
  visibility: visible;
}



.d-calendar-weekday li {
	border:2px solid #cecece;
	background-color:#cecece;
	text-align:center;
	font-size:0.86em;
}

@media all and (max-width: 720px) {
	.d-calendar {
		display: block;
		box-sizing: border-box;
		margin-right:0;
		float:none;
		clear:none;
		width:100% !important;
	}
}