.daterange {
    position: relative;
    box-shadow: 0 1px 1px 0 rgba(85, 95, 110, 0.2);
    border-radius: 4px;
    margin-top: 2rem;
}

.daterange * {
    box-sizing: border-box;
}

.daterange div,
.daterange li,
.daterange span,
.daterange ul {
    margin: 0;
    padding: 0;
    border: 0;
}

.daterange ul {
    list-style: none;
}

.daterange.dr-active {
    z-index: 10;
}

.daterange .dr-input {
    display: flex;
    border: 1px solid #d4d8e3;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    z-index: 5;
    overflow: hidden;
    height: 46px;
}

.daterange .dr-input:hover {
    border-color: #646464;
}

.daterange .dr-input.dr-active {
    box-shadow: 0 0 0 3px rgba(138, 138, 138, 0.3);
    border-color: #646464;
}

.daterange .dr-input .dr-dates {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem 0 0.75rem;
    min-width: calc(100% - 35px);
}

.daterange .dr-input .dr-dates .dr-date {
    font-size: 0.9375rem;
    padding: 0.65625rem 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: 0;
    font-size: 1.5rem;
    letter-spacing: -.025rem;
    color: #333;
}

.daterange .dr-input .dr-dates .dr-date.dr-active,
.daterange .dr-input .dr-dates .dr-date:focus,
.daterange .dr-input .dr-dates .dr-date:hover {
    /* color: #2693d5; */
    font-weight: bold;
    cursor: pointer;
}

.daterange .dr-input .dr-dates .dr-date:empty:after {
    content: attr(placeholder);
    color: #9ba3a7;
}

.daterange .dr-input .dr-dates .dr-dates-dash {
    color: #9ba3a7;
    padding: 0 10px;
    flex-grow: 0;
    font-weight: 600;
}

.daterange .dr-input .dr-presets {
    width: 3rem;
    border-left: 1px solid #d4d8e3;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.daterange .dr-input .dr-presets.dr-active,
.daterange .dr-input .dr-presets:hover {
    border-color: #2693d5;
    box-shadow: inset 0 2px 3px #ebf1f4;
}

.daterange .dr-input .dr-presets.dr-active .dr-preset-bar,
.daterange .dr-input .dr-presets:hover .dr-preset-bar {
    background-color: #2693d5;
}

.daterange .dr-input .dr-presets .dr-preset-bar {
    height: 2px;
    background-color: #d4d8e3;
    margin: 1px 0 1px 25%;
}

.daterange .dr-input .dr-presets .dr-preset-bar:nth-child(1) {
    width: 50%;
}

.daterange .dr-input .dr-presets .dr-preset-bar:nth-child(2) {
    width: 40%;
}

.daterange .dr-input .dr-presets .dr-preset-bar:nth-child(3) {
    width: 30%;
}

.daterange .dr-selections {
    position: absolute;
}

.daterange .dr-selections .dr-calendar {
    background-color: #fff;
    font-size: 0.9375rem;
    box-shadow: 0 0 5px #d4d8e3;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    z-index: 4;
    padding-top: 5px;
    top: -5px;
    left: 4px;
    transition: width 0.2s;
    min-width: 210px;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(195, 202, 205, 0.5);
    border-radius: 5px;
    height: 1.5625rem;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i {
    color: #d4d8e3;
    position: relative;
    top: -1px;
    cursor: pointer;
    font-size: 0.75rem;
    height: 100%;
    width: 20px;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i:hover:after,
.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i:hover:before {
    background-color: #2693d5;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i.dr-disabled {
    pointer-events: none;
    opacity: 0;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i:after,
.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 2px;
    background-color: #d4d8e3;
    border-radius: 1px;
    left: 50%;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i.dr-left:before {
    top: calc(50% - 2px);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i.dr-left:after {
    top: calc(50% + 2px);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i.dr-right:before {
    top: calc(50% - 2px);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-switcher i.dr-right:after {
    top: calc(50% + 2px);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-month-switcher {
    width: 100%;
    margin-right: 0.375rem;
}

.daterange .dr-selections .dr-calendar .dr-range-switcher .dr-year-switcher {
    min-width: 80px;
}

.daterange .dr-selections .dr-calendar .dr-days-of-week-list {
    display: flex;
    background-color: #e3e3e3;
    font-size: 0.625rem;
    color: #9ba3a7;
    padding: 0.3125rem 0;
    border: 1px solid rgba(195, 202, 205, 0.5);
    border-left: none;
    border-right: none;
}

.daterange .dr-selections .dr-calendar .dr-days-of-week-list .dr-day-of-week {
    width: calc(100% / 7);
    text-align: center;
    font-size: 1rem;
}

.daterange .dr-selections .dr-calendar .dr-day-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.25rem;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-day {
    padding: 0.3125rem;
    text-align: center;
    width: calc(100% / 7);
    cursor: pointer;
    color: #4f565c;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-day.dr-hover:not(.dr-current) {
    background-color: #ebf1f4 !important;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-day.dr-hover-before {
    border-left: 2px solid #6f6f6f !important;
    border-radius: 2px 0 0 2px;
    padding-left: 0.1875rem !important;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-day.dr-hover-after {
    border-right: 2px solid #6f6f6f !important;
    border-radius: 0 2px 2px 0;
    padding-right: 0.1875rem !important;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-end,
.daterange .dr-selections .dr-calendar .dr-day-list .dr-selected,
.daterange .dr-selections .dr-calendar .dr-day-list .dr-start {
    background-color: #ebf1f4;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-maybe {
    background-color: #ebf1f4 !important;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-fade {
    color: #d4d8e3;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-start {
    border-left: 2px solid #6f6f6f;
    border-radius: 2px 0 0 2px;
    padding-left: 0.1875rem;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-end {
    border-right: 2px solid #6f6f6f;
    border-radius: 0 2px 2px 0;
    padding-right: 0.1875rem;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-current {
    /* color: #2693d5 !important; */
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.daterange .dr-selections .dr-calendar .dr-day-list .dr-outside {
    pointer-events: none;
    cursor: default;
    color: rgba(195, 202, 205, 0.5);
}

.daterange .dr-selections .dr-preset-list {
    background-color: #fff;
    color: #2693d5;
    font-size: 0.9375rem;
    box-shadow: 0 0 5px #d4d8e3;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    z-index: 4;
    padding-top: 5px;
    top: -5px;
    left: 4px;
    width: 100%;
    min-width: 290px;
}

.daterange .dr-selections .dr-list-item {
    display: flex;
    align-items: flex-end;
    padding: .5rem 1.5rem;
    border-bottom: 1px solid #ebf1f4;
    cursor: pointer;
    white-space: nowrap;
    font-size: 1.25rem;
}

.daterange .dr-selections .dr-list-item:hover {
    background-color: #ebf1f4;
}

.daterange .dr-selections .dr-list-item .dr-item-aside {
    color: #9ba3a7;
    font-size: 1rem;
    margin-left: auto;
    position: relative;
    top: -1px;
}

.daterange--single .dr-input {
    cursor: text;
}

.daterange--single .dr-input .dr-dates {
    padding: 0;
    min-width: 160px;
    width: 100%;
}

.daterange--single .dr-input .dr-dates .dr-date {
    width: 100%;
    padding: 0.65625rem 0.75rem;
    text-align: left;
    color: #4f565c;
}