.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;
}

.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;
background-color: #fff;
border-radius: 0.5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgba(var(--brand-primary-pure), var(--tw-border-opacity));
--tw-border-opacity: 0.5;
--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

.asd__datepicker-header,
.asd__keyboard-shortcuts-trigger-wrapper {
position: relative;
}

.asd__keyboard-shortcuts-trigger {
background-color: transparent;
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
font: inherit;
border-width: 26px 33px 0 0;
border-top: 26px solid transparent;
border-right: 33px solid rgb(var(--brand-primary-pure));
}

.asd__keyboard-shortcuts-trigger span {
color: #fff;
position: absolute;
bottom: 0;
right: -28px;
}

.asd__keyboard-shortcuts-show {
display: block !important;
}

.asd__keyboard-shortcuts-close {
background-color: transparent;
border: none;
position: absolute;
top: 7px;
right: 5px;
padding: 5px;
z-index: 2;
cursor: pointer;
}

.asd__keyboard-shortcuts-menu {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
overflow: auto;
background: #fff;
border: 1px solid #dbdbdb;
border-image: initial;
border-radius: 2px;
padding: 22px;
margin: 33px;
text-align: left;
}

.asd__keyboard-shortcuts-title {
font-size: 16px;
font-weight: 700;
margin: 0;
}

.asd__keyboard-shortcuts-list {
list-style: none;
margin: 6px 0;
padding: 0;
white-space: normal;
}

.asd__keyboard-shortcuts-symbol {
font-family: monospace;
font-size: 12px;
text-transform: uppercase;
background: #f2f2f2;
padding: 2px 6px;
margin-right: 4px;
}

.asd__change-month-button {
position: absolute;
top: 12px;
z-index: 1;
background: #fff;
}

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

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

.asd__change-month-button > button {
background-color: #fff;
border: 1px solid #e4e7e7;
border-radius: 3px;
padding: 4px 8px;
cursor: pointer;
}

.asd__change-month-button > button:hover {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgba(var(--neutral-dark-down), var(--tw-border-opacity));
}

.asd__change-month-button > button > svg {
height: 19px;
width: 19px;
fill: #82888a;
}

.asd__days-legend {
position: absolute;
top: 50px;
left: 10px;
padding: 0 10px;
}

.asd__day-title {
display: inline-block;
width: 14.28571%;
text-align: center;
margin-bottom: 4px;
font-size: 0.8em;
margin-left: -1px;
--tw-text-opacity: 1;
color: rgba(var(--neutral-dark-deep), var(--tw-text-opacity));
}

.asd__month-table {
border-collapse: collapse;
border-spacing: 0;
background: #fff;
width: 100%;
max-width: 100%;
}

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

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

.asd__month-name {
font-size: 1.3em;
text-align: center;
margin: 0 0 30px;
line-height: 1.4em;
font-weight: 700;
}

.asd__month-year-select {
-webkit-appearance: none;
border: none;
background-color: inherit;
cursor: pointer;
color: blue;
font-size: inherit;
font-weight: inherit;
padding: 0;
}

.asd__month-year-select::-ms-expand {
display: none;
}

.asd__day {
line-height: 38px;
height: 38px;
padding: 0;
overflow: hidden;
}

.asd__day--enabled {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgba(var(--brand-primary-pure), var(--tw-border-opacity));
--tw-border-opacity: 0.3;
}

.asd__day--enabled:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--brand-primary-pure), var(--tw-bg-opacity));
--tw-bg-opacity: 0.3;
}

.asd__day--enabled:focus {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}

.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;
-webkit-user-select: none;
        user-select: none;
font-size: 15px;
font-weight: inherit;
padding: 0;
}

.asd__action-buttons {
min-height: 50px;
padding-top: 10px;
margin-bottom: 12px;
}

.asd__action-buttons button {
display: block;
position: relative;
background: transparent;
border: none;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}

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

.asd__action-buttons button:first-child {
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: 15px !important;
text-align: center;
height: 50px;
}

.asd__mobile-header h3 {
font-size: 20px;
margin: 0;
}

.asd__mobile-only {
display: none;
}

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

.asd__mobile-close {
border: none;
position: absolute;
top: 7px;
right: 5px;
padding: 5px;
z-index: 2;
cursor: pointer;
}

.asd__mobile-close__icon {
position: relative;
font-size: 1.6em;
font-weight: 700;
padding: 0;
}