.calendar-popup.open {
    display: block;
}

.calendar-popup {
    display: none;
    background-color: #fff;
    border: 1px solid #cdd3d3;
    border-radius: 8px;
    padding: 4px 16px 0 16px;
    position: absolute;
    width: 300px;
    left: calc(50% - 150px);
    /*top: 342px;*/

    @media only screen and (max-width: 991px) {
        width: 264px;
        left: calc(50% - 132px);
    }

    .month-and-year {
        align-items: center;
        display: flex;
        text-align: center;
        height: 60px;

        h4 {
            font-size: 16px;
            line-height: 28px;
            font-weight: 600;
            width: 100%;
        }
    }

    .button {
        background-color: transparent;
        border: none;
        font-weight: bold;
        outline: none;
        position: absolute;
        top: 15px;
        border: 0;
        min-height: 24px;
        min-width: 24px;
        height: 24px;
        width: 24px;
        padding: 0;

        &:hover,
        &:active,
        &:focus {
            cursor: pointer;
            background: none;
            border: 0 none;
        }

        &.prev {
            left: 15px;
        }

        &.next {
            right: 15px;
        }
    }

    table {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0;
        width: 100%;
        margin-top: 10px;

        tr {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 0;

            th,
            td {
                text-align: center;
                padding: 8px 5px 8px 5px;
            }
        }

        .day {
            &:hover {
                cursor: pointer;
                color: #7abd94;
                background-color: #f3f9f5;
            }
            &.selected {
                cursor: pointer;
                color: #ffffff;
                background-color: #006729;
            }
        }

        .day,
        .disabled {
            &:first-child,
            &.first-date {
                border-radius: 4px 0 0 4px;
            }

            &:last-child,
            &.stop-date {
                border-radius: 0 4px 4px 0;
            }

            &.mediumdate,
            &.mediumdate:hover {
                cursor: default;
                color: inherit;
                border: none;
                background: #DAEDE1;
            }

            &.lowdate,
            &.lowdate:hover  {
                cursor: default;
                color: inherit;
                border: 1px solid #7ABD94;
                border-radius: 4px 0 0 4px;
                background-color: white;
            }

            &.highdate,
            &.highdate:hover {
                background: #006729;
                color: white;
            }
        }

        .disabled {
            color: #cdd3d3;
        }
    }
}

.calendar-widget {
    table {
        .day {
            &:hover {
                cursor: default;
                color: inherit;
                background-color: white;
            }
        }
    }
}