.ui-datepicker-inline.gform-theme-datepicker {
	box-shadow: none;
}

.ui-datepicker-inline.gform-legacy-datepicker {
	width: 216px;
}

/**
 * Responsive styles for Inline Datepickers.
 *
 * These styles cap the datepicker at it's native max-width of 398px. Would love to explore responsive styles for much
 * larger datepickers in the future.
 */

.gpld-inline-datepicker {
	max-width: 398px;
	width: 100%;
}

.gpld-inline-datepicker .ui-datepicker-inline .ui-datepicker-calendar {
	width: 100%;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar td,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) th {
	width: 14.28%;
	height: auto;
	position: relative;
	padding: 0;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) td:before,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) th:before {
	content: '';
	display: block;
	padding-top: 100%;
}

.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-state-default,
.gpld-inline-datepicker .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar th span {
	width: auto !important;
	height: auto !important;
	position: absolute;
	/* Goal here is to more aggressively reduce the "padding" as the width decreases. The 3px reduction achieves this
	   as the static reduction is more impactful as the value of the 15% decreases with the width. */
	top: calc( 15% - 3px );
	right: calc( 15% - 3px );
	bottom: calc( 15% - 3px );
	left: calc( 15% - 3px );
	line-height: 1;
}