.ldrs-main-container, .ldrs-container {
    display: flex;
    justify-content: center;
}

.ldrs-container {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: .5rem;
    border-radius: 4px;
    margin: 1rem;
}

.ldrs-container>* {
    margin: 5px;
}

.ldrs-input-container {
    display: flex;
    flex-direction: column;
}

.ldrs-button {
    border: 0;
    padding: .2rem 1rem;
    background: -webkit-gradient(linear, left top, right top, from(#767676), to(#ababab));
    background: linear-gradient(90deg, #767676 0%, #ababab 100%);
    color: white;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 1px 3px rgba(0, 114, 255, 0.12), 0 1px 2px rgba(0, 215, 255, 0.24);
    font-size: 1.2rem;
}

.ldrs-theme-blue .ldrs-button {
    background: -webkit-gradient(linear, left top, right top, from(#0072ff), to(#00d4ff));
    background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
    border: 1px solid #0072ff;
}

.ldrs-theme-red .ldrs-button {
    background: -webkit-gradient(linear, left top, right top, from(#f44336), to(#fc6b60));
    background: linear-gradient(90deg, #f44336 0%, #fc6b60 100%);
    border: 1px solid #f44336;
}

.ldrs-theme-purple .ldrs-button {
    background: -webkit-gradient(linear, left top, right top, from(#9c27b0), to(#c54eda));
    background: linear-gradient(90deg, #9c27b0 0%, #c54eda 100%);
    border: 1px solid #9c27b0;
}

.ldrs-theme-pink .ldrs-button {
    background: -webkit-gradient(linear, left top, right top, from(#e91e63), to(#fa528a));
    background: linear-gradient(90deg, #e91e63 0%, #fa528a 100%);
    border: 1px solid #e91e63;
}

.ldrs-theme-green .ldrs-button {
    background: -webkit-gradient(linear, left top, right top, from(#4caf50), to(#80e984));
    background: linear-gradient(90deg, #4caf50 0%, #80e984 100%);
    border: 1px solid #4caf50;
}

.ldrs-button:hover, .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(86, 86, 86, 0.25), 0 10px 10px rgba(130, 130, 130, 0.22);
}

.ldrs-theme-blue .ldrs-button:hover, .ldrs-theme-blue .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(0, 114, 255, 0.25), 0 10px 10px rgba(0, 215, 255, 0.22);
}

.ldrs-theme-red .ldrs-button:hover, .ldrs-theme-red .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(244, 67, 54, 0.25), 0 10px 10px rgba(255, 107, 96, 0.22);
}

.ldrs-theme-purple .ldrs-button:hover, .ldrs-theme-purple .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(156, 39, 176, 0.25), 0 10px 10px rgba(203, 81, 255, 0.22);
}

.ldrs-theme-pink .ldrs-button:hover, .ldrs-theme-pink .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(233, 30, 99, 0.25), 0 10px 10px rgba(250, 82, 138, 0.22);
}

.ldrs-theme-green .ldrs-button:hover, .ldrs-theme-green .ldrs-button:focus {
    box-shadow: 0 14px 28px rgba(76, 175, 80, 0.25), 0 10px 10px rgba(128, 233, 132, 0.22);
}

/* .ldrs-input {
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    padding: 0;
    height: 25px;
    cursor: pointer;
    outline: none !important;
    box-shadow: none;
    font-size: 1.2rem;
    max-width: 130px;
} */

.ldrs-input-container label {
    font-size: .8rem;
}

.ldrs-input:hover, .ldrs-input:focus {
    border-color: #808080;
}

.ldrs-theme-blue .ldrs-input-container label {
    color: #0072ff;
}

.ldrs-theme-red .ldrs-input-container label {
    color: #f44336;
}

.ldrs-theme-purple .ldrs-input-container label {
    color: #9c27b0;
}

.ldrs-theme-pink .ldrs-input-container label {
    color: #e91e63;
}

.ldrs-theme-green .ldrs-input-container label {
    color: #4caf50;
}

.ldrs-theme-blue .ldrs-input:hover, .ldrs-theme-blue .ldrs-input:focus {
    border-image-source: linear-gradient(to right, #0072ff, #00d4ff);
    border-image-slice: 1;
}

.ldrs-theme-red .ldrs-input:hover, .ldrs-theme-red .ldrs-input:focus {
    border-image-source: linear-gradient(to right, #f44336, #fc6b60);
    border-image-slice: 1;
}

.ldrs-theme-purple .ldrs-input:hover, .ldrs-theme-purple .ldrs-input:focus {
    border-image-source: linear-gradient(to right, #9c27b0, #c54eda);
    border-image-slice: 1;
}

.ldrs-theme-pink .ldrs-input:hover, .ldrs-theme-pink .ldrs-input:focus {
    border-image-source: linear-gradient(to right, #e91e63, #fa528a);
    border-image-slice: 1;
}

.ldrs-theme-green .ldrs-input:hover, .ldrs-theme-green .ldrs-input:focus {
    border-image-source: linear-gradient(to right, #4caf50, #80e984);
    border-image-slice: 1;
}

.ldrs-button svg {
    display: none;
}

.ldrs-calendar-container {
    border-radius: 4px;
}

.ldrs-calendar-desktop-mode {
    position: absolute;
    max-width: 100%;
    min-width: 500px;
    min-height: 300px;
    display: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border: 1px solid;
    background-color: #fff;
}

.ldrs-calendar-mobile-mode {
    position: fixed;
    width: 100vw;
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 15;
    display: none;
}

@keyframes openCalendarbottom {
    from {
        opacity: 0;
        bottom: 100px;
    }
    to {
        opacity: 1;
        bottom: 110px;
    }
}

@keyframes openCalendartop {
    from {
        opacity: 0;
        top: 100px;
    }
    to {
        opacity: 1;
        top: 110px;
    }
}

.ldrs-calendar-container-open.ldrs-calendar-position-bottom, .ldrs-calendar-container-open.ldrs-calendar-position-top {
    opacity: 0;
    animation-duration: .4s;
    animation-fill-mode: forwards;
}

.ldrs-calendar-container-open.ldrs-calendar-position-bottom {
    animation-name: openCalendarbottom;
}

.ldrs-calendar-container-open.ldrs-calendar-position-top {
    animation-name: openCalendartop;
}

.ldrs-calendar-container-open.ldrs-calendar-mobile-mode {
    display: flex;
}

.ldrs-calendar-position-bottom {
    bottom: 100px;
}

.ldrs-calendar-position-top {
    top: 100px;
}

.ldrs-theme-blue .ldrs-calendar-desktop-mode {
    box-shadow: 0 3px 6px rgba(1, 52, 115, 0.16), 0 3px 6px rgba(1, 90, 108, 0.23);
    border-color: #01337154;
}

.ldrs-theme-red .ldrs-calendar-desktop-mode {
    box-shadow: 0 3px 6px rgba(132, 37, 30, 0.16), 0 3px 6px rgba(113, 47, 42, 0.23);
    border-color: #75201a51;
}

.ldrs-theme-purple .ldrs-calendar-desktop-mode {
    box-shadow: 0 3px 6px rgba(82, 21, 93, 0.16), 0 3px 6px rgba(72, 28, 91, 0.23);
    border-color: #52145d6c;
}

.ldrs-theme-pink .ldrs-calendar-desktop-mode {
    box-shadow: 0 3px 6px rgba(233, 30, 99, 0.16), 0 3px 6px rgba(250, 82, 138, 0.23);
    border-color: #71103066;
}

.ldrs-theme-green .ldrs-calendar-desktop-mode {
    box-shadow: 0 3px 6px rgba(76, 175, 80, 0.16), 0 3px 6px rgba(128, 233, 132, 0.23);
    border-color: #71103066;
}

.ldrs-calendar-container-open.ldrs-calendar-desktop-mode {
    display: initial;
}

.ldrs-calendar {
    padding: 1rem;
    display: grid;
    grid-template: "_ _ _ btnClose" "btnPrev title title btnNext" "calendar1 calendar1 calendar2 calendar2";
    grid-template-columns: 2.5rem 1fr 1fr 2.5rem;
    grid-template-rows: auto 2.5rem 1fr;
    grid-gap: 15px;
}

.ldrs-btn-calendar-prev {
    grid-area: btnPrev;
}

.ldrs-btn-calendar-next {
    grid-area: btnNext;
}

.ldrs-calendar-title {
    grid-area: title;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ldrs-calendar-dates-1 {
    grid-area: calendar1;
}

.ldrs-calendar-dates-2 {
    grid-area: calendar2;
}

.ldrs-btn-calendar-close {
    grid-area: btnClose;
    margin-bottom: 2rem;
    display: none;
}

.ldrs-calendar-dates-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(2.7rem, 1fr));
}

.ldrs-calendar-dates-label {
    text-align: center;
    margin-bottom: 1rem;
}

.ldrs-calendar-dates-month {
    text-align: center;
    padding-bottom: 1rem;
}

.ldrs-day {
    min-height: 2.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
}

.ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled), .ldrs-day.ldrs-available-end-date-active {
    position: relative;
    cursor: pointer;
    z-index: 2;
}

.ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled)::after, 
.ldrs-day.ldrs-available-end-date.ldrs-available-end-date-active:not(.ldrs-day-disabled, .ldrs-day-active-last):hover::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    z-index: -1;
}

.ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover, .ldrs-day.ldrs-available-end-date-active:not(.ldrs-day-disabled):hover {
    color: #fff;
}

.ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-day.ldrs-available-end-date-active:not(.ldrs-day-disabled):hover::after {
    background: -webkit-gradient(linear, left top, right top, from(#767676), to(#ababab));
    background: linear-gradient(90deg, #767676 0%, #ababab 100%);
}

.ldrs-theme-blue .ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-theme-blue .ldrs-day.ldrs-available-end-date-active:hover::after {
    background: #0072ff;
}

.ldrs-theme-red .ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-theme-red .ldrs-day.ldrs-available-end-date-active:hover::after {
    background: #f44336;
}

.ldrs-theme-purple .ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-theme-purple .ldrs-day.ldrs-available-end-date-active:hover::after {
    background: #9c27b0;
}

.ldrs-theme-pink .ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-theme-pink .ldrs-day.ldrs-available-end-date-active:hover::after {
    background: #e91e63;
}

.ldrs-theme-green .ldrs-day:not(.ldrs-blank, .ldrs-day-locked, .ldrs-day-disabled):hover::after, .ldrs-theme-green .ldrs-day.ldrs-available-end-date-active:hover::after {
    background: #4caf50;
}

.ldrs-btn-calendar {
    cursor: pointer;
}

.ldrs-btn-calendar {
    background: transparent;
    border: 0;
}

.ldrs-btn-calendar svg {
    position: relative;
    width: 60%;
    fill: rgb(71, 71, 71);
}

.ldrs-btn-calendar:active:not(:disabled) svg {
    fill: rgb(157, 157, 157);
}

/* .ldrs-btn-calendar-next svg {
    left: .7rem;
}

.ldrs-btn-calendar-prev svg {
    right: .7rem;
} */

.ldrs-btn-calendar:disabled, .ldrs-btn-calendar[disabled] {
    opacity: 0.1;
    cursor: initial;
}

.ldrs-day-locked {
    position: relative;
}

.ldrs-day-locked:not(.ldrs-day-active-last, .ldrs-available-end-date-active) {
    color: #504444b8;
}

.ldrs-day-locked:not(.ldrs-available-end-date-active, .ldrs-day-active-last-end)::before, .ldrs-day-locked.ldrs-day-disabled::before {
    content: "";
    height: calc(100% - 12px);
    width: 3px;
    background-color: #00000042;
    z-index: -1;
    position: absolute;
    left: calc(50% - 1px);
    transform: rotate(45deg);
}

.ldrs-day-locked:not(.ldrs-available-end-date-active):after, .ldrs-day-locked.ldrs-day-disabled::after {
    content: "";
    height: calc(100% - 12px);
    width: 3px;
    background-color: #00000042;
    z-index: -1;
    position: absolute;
    left: calc(50% - 1px);
    transform: rotate(-45deg);
}

.ldrs-day-disabled {
    color: #ab949473;
}

.ldrs-day.ldrs-day-active-first:not(.ldrs-day-disabled), .ldrs-day-active-last:not(.ldrs-day-disabled) {
    color: #fff;
}

.ldrs-day.ldrs-day-active-first::after, .ldrs-day.ldrs-day-active-last::after {
    background-color: #221818;
    width: 97%;
    height: 97%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.ldrs-theme-blue .ldrs-day.ldrs-day-active-first::after, .ldrs-theme-blue .ldrs-day.ldrs-day-active-last::after {
    background-color: #0072ff;
}

.ldrs-theme-red .ldrs-day.ldrs-day-active-first::after, .ldrs-theme-red .ldrs-day.ldrs-day-active-last::after {
    background-color: #f44336;
}

.ldrs-theme-purple .ldrs-day.ldrs-day-active-first::after, .ldrs-theme-purple .ldrs-day.ldrs-day-active-last::after {
    background-color: #9c27b0;
}

.ldrs-theme-pink .ldrs-day.ldrs-day-active-first::after, .ldrs-theme-pink .ldrs-day.ldrs-day-active-last::after {
    background-color: #e91e63;
}

.ldrs-theme-green .ldrs-day.ldrs-day-active-first::after, .ldrs-theme-green .ldrs-day.ldrs-day-active-last::after {
    background-color: #4caf50;
}

.ldrs-day-locked.ldrs-day-active-last::after {
    content: "";
    position: absolute;
    transform: rotate(0deg);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
}

.ldrs-day-active-last-end::before, .ldrs-day-in-range::before, .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-day-active-last-end)::before {
    content: "";
    position: absolute;
    left: 0;
    background: #221818b0;
    height: calc(100% - .7rem);
    z-index: -1;
}

.ldrs-theme-blue .ldrs-day-active-last-end::before, .ldrs-theme-blue .ldrs-day-in-range::before, .ldrs-theme-blue .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-theme-blue .ldrs-day-active-last-end)::before {
    background: #0073ffb1;
}

.ldrs-theme-red .ldrs-day-active-last-end::before, .ldrs-theme-red .ldrs-day-in-range::before, .ldrs-theme-red .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-theme-red .ldrs-day-active-last-end)::before {
    background: #f443369c;
}

.ldrs-theme-purple .ldrs-day-active-last-end::before, .ldrs-theme-purple .ldrs-day-in-range::before, .ldrs-theme-purple .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-theme-purple .ldrs-day-active-last-end)::before {
    background: #c54eda;
}

.ldrs-theme-pink .ldrs-day-active-last-end::before, .ldrs-theme-pink .ldrs-day-in-range::before, .ldrs-theme-pink .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-theme-pink .ldrs-day-active-last-end)::before {
    background: #fa528aa7;
}

.ldrs-theme-green .ldrs-day-active-last-end::before, .ldrs-theme-green .ldrs-day-in-range::before, .ldrs-theme-green .ldrs-day-in-range-focus:not(.ldrs-day-active-first, .ldrs-theme-green .ldrs-day-active-last-end)::before {
    background: #80e983;
}

.ldrs-day-active-first-start::before, .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    content: "";
    position: absolute;
    right: 0;
    background: #221818b0;
    height: calc(100% - .7rem);
    width: 50%;
    z-index: -1;
}

.ldrs-theme-blue .ldrs-day-active-first-start::before, .ldrs-theme-blue .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    background: #0073ffb1;
}

.ldrs-theme-red .ldrs-day-active-first-start::before, .ldrs-theme-red .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    background: #f443369c;
}

.ldrs-theme-purple .ldrs-day-active-first-start::before, .ldrs-theme-purple .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    background: #9b27b0b3;
}

.ldrs-theme-pink .ldrs-day-active-first-start::before, .ldrs-theme-pink .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    background: #fa528aa7;
}

.ldrs-theme-green .ldrs-day-active-first-start::before, .ldrs-theme-green .ldrs-day-active-first.ldrs-day-in-range-focus::before {
    background: #80e983;
}

.ldrs-day-in-range::before, .ldrs-day-in-range-focus::before {
    width: 100%;
}

.ldrs-day-active-last-end:not(.ldrs-day-in-range-focus)::before, .ldrs-day-in-range-focus:hover::before {
    width: 50%;
}

.ldrs-day-in-range, .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-theme-blue .ldrs-day-in-range, .ldrs-theme-blue .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-theme-red .ldrs-day-in-range, .ldrs-theme-red .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-theme-purple .ldrs-day-in-range, .ldrs-theme-purple .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-theme-pink .ldrs-day-in-range, .ldrs-theme-pink .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-theme-green .ldrs-day-in-range, .ldrs-theme-green .ldrs-day-in-range-focus {
    color: #ffffff96;
}

.ldrs-day-in-range-focus-inside:hover::before {
    width: 100% !important;
}

@media (max-width: 670px) {
    .ldrs-button {
        padding: .2rem .8rem;
    }
    .ldrs-button span {
        display: none;
    }
    .ldrs-button svg {
        fill: #fff;
        width: 30px;
        display: initial;
    }
    .ldrs-calendar-position-bottom {
        bottom: 0;
    }
    .ldrs-calendar-position-top {
        top: 0;
    }
    .ldrs-btn-calendar-close {
        display: initial;
    }
}

@media (max-width: 650px) {
    .ldrs-calendar .ldrs-calendar-dates-1 {
        width: 100%;
        max-width: 20rem;
        margin: 0 auto;
    }
    .ldrs-calendar .ldrs-calendar-dates-2 {
        display: none;
    }
    .ldrs-btn-calendar-prev, .ldrs-btn-calendar-next {
        height: 3rem;
        width: 3rem;
        margin: auto 0;
    }
    .ldrs-calendar {
        width: 100%;
        grid-template: "_ _ _ btnClose" "btnPrev title title btnNext" "calendar1 calendar1 calendar1 calendar1" !important;
        grid-template-columns: 2.5rem 1fr 1fr 2.5rem !important;
    }
}

@media (max-width: 400px) {
    .ldrs-calendar {
        width: 100%;
        grid-template: "_ _ _ btnClose" "btnPrev title title btnNext" "calendar1 calendar1 calendar1 calendar1" !important;
        grid-template-columns: 2.5rem 1fr 1fr 2.5rem !important;
        padding: 0;
    }
}