.calendar {
	font-size: 14px;
	width: 285px;
	cursor: default;
	background: white;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

	.calendar .date-grid {
		padding: 5px;
	}
	.calendar .header-button,
	.calendar .setting-button,
	.calendar .weekday-row div,
	.calendar .date-grid div {
		display: inline-block;
		text-align: center;
		height: 30px;
		line-height: 30px;
	}

	.calendar .weekday-row div,
	.calendar .date-grid div {
		vertical-align: middle;
	}

	.calendar .header-row {
		padding: 5px;
	}

		.calendar .header-row *,
		.calendar .setting-button,
		.calendar .date-grid .normal-date {
			cursor: pointer;
		}

	.calendar .header-button:active,
	.calendar .header-button.active:active {
		color: #259;
		background: #ccf;
	}

	.calendar .header-button.active {
		color: #fff;
		background: #47b;
	}

	.calendar .setting-button:active,
	.calendar .setting-button.active:active {
		color: #2b7;
		background: #cfc;
	}

	.calendar .setting-button.active {
		color: #fff;
		background: #4d9;
	}

	.calendar .setting-button.disabled {
		color: #777;
		background: #1a6;
		pointer-events: none;
	}

	.calendar .month-field,
	.calendar .year-field {
		font-size: 14px;
		text-align: center;
		text-align-last: center;
		border: 1px solid #ced4da;
		background-color: #f6f6f7;
		border-radius: 4px;
		height: 24px;
	}

	.calendar ._year-field {
		border: 1px solid #ced4da;
		background-color: #f6f6f7;
		border-radius: 4px;
	}

	.calendar .month-field {
		width: 50%;
		margin-right: 12px;
	}

		.calendar .month-field::-ms-expand {
			display: none;
		}

	.calendar .year-field {
		width: calc(50% - 57px);
	}

	.calendar .header-button {
		width: 18px;
		font-size: 16px;
		font-weight: bold;
	}

	.calendar .setting-button {
		width: 40px;
	}

	.calendar .weekday-row div,
	.calendar .date-grid .excluded-date {
		width: 40px;
	}

	.calendar .date-grid .normal-date {
		width: 30px;
		height: 24px;
		line-height: 24px;
		margin: 3px 5px;
	}

	.calendar .normal-date {
		color: #555;
	}

	.calendar .friday-date {
		color: #292;
	}

	.calendar .sunday-date {
		color: #c22;
	}

	.calendar .date-grid .excluded-date {
		font-size: .9em;
		color: #aaa;
	}

	.calendar .date-grid .normal-date:active {
		color: #fff;
		background: #0a2948;
		-moz-box-shadow: 0 0 1px #000;
		-webkit-box-shadow: 0 0 1px #000;
		box-shadow: 0 0 1px #000;
	}

	.calendar .date-grid .current-date,
	.calendar .date-grid .specialz-date,
	.calendar .date-grid .selected-date {
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
		box-shadow: 0 1px 3px rgba(0,0,0,.5);
	}

	.calendar .date-grid .current-date {
		color: #fff;
		background: #f31;
	}

	.calendar .date-grid .specialz-date {
		color: #fff;
		background: #2b7;
	}

	.calendar .date-grid .selected-date {
		color: #000;
		background: #ffc30d;
	}

/* custom CSS*/

#gregorianCal .month-field, #gregorianCal .month-field option:checked {
	text-align: left;
}

#hijriCal .month-field, #hijriCal option:checked {
	text-align: right;
}

.calendar .date-grid .current-date {
	color: black;
	background: #f6f6f6;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	line-height: 22px;
}

.calendar .date-grid .selected-date {
	color: #fff;
	background: #f5b335;
	border: 1px solid #f5b335;
	border-radius: 4px;
	box-shadow: 0 1px 3px #ffc00017;
	line-height: 22px;
}

.calendar .header-row .header-button {
	border: 1px solid transparent;
	background-color: inherit;
	border-radius: 4px;
	height: 24px;
	margin: 5px 2px;
	vertical-align: unset;
	line-height: 18px;
	color: inherit;
	font-size: 18px;
	padding: 0;
}

	.calendar .header-row .header-button:hover,
	.calendar .header-row .header-button:focus {
		border: 1px solid #ced4da;
		background-color: #f6f6f7;
		border-radius: 4px;
		height: 24px;
		margin: 5px 2px;
		vertical-align: unset;
		line-height: 18px;
		color: black;
		font-size: 18px;
		padding: 0;
	}

.CalendarInnerContainer {
	position: absolute;
	z-index: 10002;
	top: -265px;
}