.asd__wrapper {

	/*Default Styles*/
	--change-month-border-color-hover: var(--gray-900);
	--default-border-color: var(--white);
	--default-bg-color: var(--white-ff);
	--default-bg-color-hover:  var(--primary-color-500);
	--default-text-color-hover:  var(--gray-100);
	
	/*Selected & In Range Styles*/
	--selected-in-range-bg-color: var(--orange-d5);
	--in-range-bg-color: var(--blue-86);
	--in-range-border-color: var(--white);
	--in-range-text-color: var(--blue-002);
	
	/*Disabled Styles*/
	--disabled-bg-color: var(--gray-300);
	--disabled-text-color: var(--gray-700);
	
	--color-button-border: var(--white);
	--color-button-hover: var(--orange-d5);
	--color-button-bg: var(--white);
	--color-nav-button: var(--white);
} 

.asd__fade-enter-active,
.asd__fade-leave-active {transition: all 0.2s ease; }

.asd__fade-enter,
.asd__fade-leave-active { opacity: 0; }

.asd__list-complete-enter,
.asd__list-complete-leave-to {
	opacity: 0;
	transform: translateY(30px); 
}

.asd__list-complete-leave-active {
	position: absolute;
	visibility: hidden; 
}

*,
*:after,
*:before { box-sizing: border-box; }

.datepicker-trigger {
	position: relative;
	overflow: visible;
}

.asd__wrapper {
	border: 1px solid rgba(0, 0, 0, 0.2);
	white-space: nowrap;
	text-align: center;
	overflow: hidden;
	border: none; 
}

.asd__wrapper--full-screen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: none;
	z-index: 100; 
}

.asd__inner-wrapper {
	transition: all 0.3s ease;
	position: relative;
}

.asd__datepicker-header { position: relative; }

.asd__change-month-button {
	position: absolute;
	top: 0;
	z-index: 10;
	background: transparent;
}

.asd__change-month-button--previous {
	left: 0;
	padding-left: 0; 
}

.asd__change-month-button--next {
	right: 0;
	padding-right: 0; 
}

.asd__change-month-button--previous img,
.asd__change-month-button--next img {
	width: 19px;
	height: 19px;
}

.asd__change-month-button > button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--color-button-border);
	border-radius: 3px;
	border-radius: var(--rounded-sm);
	padding: var(--space-1) var(--space-2);
	height: 34px;
	cursor: pointer; 
}

@media (hover: hover) {
	.asd__change-month-button > button:hover { 
		border: 1px solid var(--color-button-hover);
	}
}

.asd__change-month-button > button > svg {
	height: 19px;
	width: 19px;
	fill: var(--color-nav-button);
}

.asd__days-legend {
	position: absolute;	
	top: 35px;
	padding: 0;
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
}

.asd__day-title {
	display: inline-block;
	text-align: center;
	flex-grow: 1;
	width: 100%;
	margin-bottom: var(--space-1);
	color: rgba(0, 0, 0, 0.7);
	font-size: var(--text-sm);
	text-align: center;
}

.asd__month-table {
	border-collapse: collapse;
	border-spacing: 0;
	background: var(--color-button-bg);
	width: 100%;
	max-width: 100%;
}

.asd__month table {
	background: inherit;
	margin-bottom: auto;
	border: none;
}

.asd__month table tr.even,
.asd__month table tr.alt,
.asd__month table tr:nth-of-type(even) { background: inherit;}

.asd__day--disabled button,
.asd__day--empty button { 
	background-color: var(--color-button-bg);
}

.asd__wrapper button {
	font-family: inherit;
	margin: auto;
	background-color: inherit;
	color : inherit;
}

.asd__action-buttons button { 
	outline: none;
}

.asd__wrapper button:hover, 
.asd__wrapper button:focus-visible, 
.asd__wrapper .button:hover, 
.asd__wrapper .button:focus-visible {
	color: inherit;
	background-color: transparent;
}

.asd__month button { line-height: inherit; }

.asd__month {
	transition: all 0.3s ease;
	display: inline-block;
	padding: 0; 
}

.asd__month--hidden {
	height: 275px;
	visibility: hidden; 
}

.asd__month-name {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--text-xl);
	text-align: center;
	margin: 0 0 30px;
	line-height: var(--leading-snug);
	font-weight: bold; 
	height: 35px;
}

.asd__month-name span {
	padding: 0 var(--space-1);
}

.asd__day {
	line-height: var(--leading-loose);
	height: 30px;
	padding: 0;
	overflow: hidden; 
}

.asd__day--enabled:not(.asd__day--in-range, .asd__day--selected) {
	border: 1px solid var(--default-border-color);
	background: var(--default-bg-color);
}

.asd__day--in-range button.asd__day-button,
.asd__day--selected  button.asd__day-button {
	font-weight: bold;
}

.asd__day--in-range {
	background: var(--in-range-bg-color) !important;
}

.asd__day--selected {
	background: var(--selected-in-range-bg-color) !important;
}

.asd__day--selected,
.asd__day--in-range {
	border: 1px double var(--in-range-border-color)!important;
	color: var(--in-range-text-color) !important;
}

.asd__day--enabled {
	border: 1px solid var(--color-button-border); 
}

.asd__day--enabled:hover { 
	background-color: var(--color-button-hover); 
}

.asd__day--disabled, .asd__day--empty { opacity: 0.5; }

.asd__day--disabled button, .asd__day--empty button { cursor: default; }

.asd__day--empty { border: none; }

.asd__day--disabled:hover { background-color: transparent; }

.asd__day-button {
	background: transparent;
	width: 100%;
	height: 100%;
	border: none;
	cursor: pointer;
	color: inherit;
	text-align: center;
	user-select: none;
	font-size: var(--text-base);
	font-weight: inherit;
	padding: 0; 
}

.asd__action-buttons {
	min-height: 50px;
	padding-top: var(--space-2)
}

.asd__action-buttons button {
	display: block;
	position: relative;
	background: transparent;
	border: none;
	font-weight: bold;
	font-size: var(--text-base);
	cursor: pointer;
}

.asd__action-buttons button:hover { text-decoration: underline; }

.asd__action-buttons button:nth-child(1) {
	float: left;
	left: 15px;
}

.asd__action-buttons button:nth-child(2) {
	float: right;
	right: 15px; 
}

.asd__mobile-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	position: relative;
	padding: var(--space-4) !important;
	text-align: center;
	height: 50px; 
}

.asd__mobile-header h3 {
	font-size: var(--text-xl);
	margin: 0; 
}

.asd__mobile-only { display: none; }

@media (max-width: 600px) {
	.asd__mobile-only { display: block; }
}

.asd__mobile-close {
	position: absolute;
	top: 7px;
	right: 5px;
	padding: var(--space-1);
	z-index: 100;
	cursor: pointer; 
}

.asd__mobile-close__icon {
	position: relative;
	font-size: var(--text-2xl);
	font-weight: bold;
	padding: 0;
}