﻿/*!
 * knockout-daterangepicker
 * version: 0.1.0
 * authors: Sensor Tower team
 * license: MIT
 * https://sensortower.github.io/daterangepicker
 */
.daterangepicker {
    display: none;
    position: absolute;
    background: white;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-radius: 4px;
    padding: 4px;
    font-size: 13px;
    font-family: sans-serif;
    line-height: 1.5em;
}

    .daterangepicker ul, .daterangepicker li, .daterangepicker button, .daterangepicker form {
        padding: 0;
        margin: 0;
        border: 0;
        list-style: none;
        outline: none;
    }

    .daterangepicker .controls {
        min-width: 180px;
        margin: 4px;
    }

    .daterangepicker .periods li,
    .daterangepicker .ranges li {
        margin: 0;
        padding: 4px 9px;
        margin: 0;
        background: #f5f5f5;
        color: #08c;
        cursor: pointer;
    }

        .daterangepicker .periods li:hover, .daterangepicker .periods li.active,
        .daterangepicker .ranges li:hover,
        .daterangepicker .ranges li.active {
            background: #08c;
            color: white;
        }

    .daterangepicker .periods {
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin: 0 auto 8px;
    }

        .daterangepicker .periods li:first-child {
            border-radius: 4px 0 0 4px;
        }

        .daterangepicker .periods li:last-child {
            border-radius: 0 4px 4px 0;
        }

    .daterangepicker .ranges {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

        .daterangepicker .ranges li {
            border-radius: 4px;
            margin-bottom: 8px;
            text-align: left;
        }

    .daterangepicker .custom-range-inputs {
        display: -ms-flexbox;
        display: flex;
        margin: -3px;
        margin-bottom: 5px;
    }

        .daterangepicker .custom-range-inputs input {
            min-width: 50px;
            width: 50px;
            -ms-flex: 1;
            flex: 1;
            margin: 3px;
            border-radius: 4px;
            border: 1px solid #ccc;
            height: auto;
            padding: 0.5em;
            font-size: 13px;
            color: #333;
        }

    .daterangepicker .custom-range-buttons {
        display: -ms-flexbox;
        display: flex;
        margin: -3px;
    }

        .daterangepicker .custom-range-buttons button {
            margin: 0;
            padding: 4px 9px;
            margin: 3px;
            border-radius: 4px;
            background: #f5f5f5;
            color: #08c;
        }

            .daterangepicker .custom-range-buttons button:hover {
                background: gainsboro;
            }

            .daterangepicker .custom-range-buttons button.apply-btn {
                background: #38A551;
                color: white;
            }

                .daterangepicker .custom-range-buttons button.apply-btn:hover {
                    background: #2b7f3e;
                }

    .daterangepicker .arrow-left,
    .daterangepicker .arrow-right {
        display: inline-block;
        position: relative;
        background-color: #333;
        width: 7px;
        height: 3px;
        margin-bottom: 2px;
        vertical-align: middle;
    }

        .daterangepicker .arrow-left:before,
        .daterangepicker .arrow-right:before {
            content: '';
            display: block;
            position: absolute;
            border: 5px solid transparent;
        }

    .daterangepicker .arrow-left {
        margin-left: 5px;
    }

        .daterangepicker .arrow-left:before {
            border-right-width: 6px;
            border-right-color: #333;
            transform: translate(-10px, -3.5px);
        }

    .daterangepicker .arrow-right {
        margin-right: 5px;
    }

        .daterangepicker .arrow-right:before {
            border-left-width: 6px;
            border-left-color: #333;
            transform: translate(6px, -3.5px);
        }

    .daterangepicker.orientation-right:not(.standalone):before {
        position: absolute;
        top: -7px;
        left: 9px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid rgba(0, 0, 0, 0.2);
        border-left: 7px solid transparent;
        content: '';
    }

    .daterangepicker.orientation-left:not(.standalone):before {
        position: absolute;
        top: -7px;
        right: 9px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid rgba(0, 0, 0, 0.2);
        border-left: 7px solid transparent;
        content: '';
    }

    .daterangepicker.orientation-right:not(.standalone):after {
        position: absolute;
        top: -6px;
        left: 10px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        border-left: 6px solid transparent;
        content: '';
    }

    .daterangepicker.orientation-left:not(.standalone):after {
        position: absolute;
        top: -6px;
        right: 10px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        border-left: 6px solid transparent;
        content: '';
    }

    .daterangepicker select {
        width: 100%;
        box-sizing: border-box;
        padding: 2px 7px;
        height: auto;
        font-size: 13px;
        line-height: 1.5em;
        text-align: center;
        margin: 0 2px;
    }

        .daterangepicker select.hidden {
            display: none;
        }

        .daterangepicker select.month-select {
            -ms-flex: 10;
            flex: 10;
            max-width: 75%;
        }

        .daterangepicker select.year-select {
            -ms-flex: 11;
            flex: 11;
            max-width: 75%;
        }

        .daterangepicker select.decade-select {
            -ms-flex: 11;
            flex: 11;
            max-width: 75%;
        }

.calendar {
    display: none;
    margin: 4px;
}

    .calendar .calendar-header,
    .calendar .calendar-table {
        min-width: 190px;
        margin-left: auto;
        margin-right: auto;
    }

    .calendar .calendar-title {
        margin: 0;
        padding: 4px 9px;
        margin: 0 auto;
        margin-bottom: 8px;
        text-align: center;
        display: block;
    }

    .calendar .calendar-header button {
        margin: 0;
        padding: 4px 9px;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        border-radius: 4px;
        background: transparent;
    }

        .calendar .calendar-header button:hover {
            background: #f5f5f5;
        }

    .calendar .calendar-header {
        display: -ms-flexbox;
        display: flex;
        margin: 0 6px 4px;
    }

        .calendar .calendar-header .calendar-selects {
            -ms-flex: 5;
            flex: 5;
            text-align: center;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 2px;
        }

        .calendar .calendar-header .arrow {
            -ms-flex: 1;
            flex: 1;
            text-align: center;
        }

            .calendar .calendar-header .arrow.arrow-hidden {
                visibility: hidden;
            }

    .calendar .calendar-table {
        height: 180px;
        border: 1px solid #f5f5f5;
        border-radius: 4px;
        overflow: hidden;
        padding: 5px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .calendar .calendar-table .table-row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            -ms-flex-pack: distribute;
            justify-content: space-around;
            -ms-flex: 1;
            flex: 1;
        }

            .calendar .calendar-table .table-row .table-col {
                display: -ms-flexbox;
                display: flex;
                -ms-flex: 1;
                flex: 1;
                text-align: center;
                line-height: 1;
                cursor: default;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

                .calendar .calendar-table .table-row .table-col .table-value-wrapper {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex: 1;
                    flex: 1;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .calendar .calendar-table .table-row .table-col .table-value-wrapper .table-value {
                        -ms-flex: 1;
                        flex: 1;
                    }

                .calendar .calendar-table .table-row .table-col.out-of-boundaries, .calendar .calendar-table .table-row .table-col.unavailable,
                .calendar .calendar-table .table-row .table-col .week-day.unavailable {
                    color: #bbb;
                }

                .calendar .calendar-table .table-row .table-col.in-range {
                    background: rgba(0, 136, 204, 0.1);
                }

                .calendar .calendar-table .table-row .table-col.clickable {
                    cursor: pointer;
                }

                    .calendar .calendar-table .table-row .table-col.clickable:hover .table-value-wrapper {
                        background: #eee;
                        border-radius: 4px;
                    }

                .calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper, .calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper {
                    border-radius: 4px;
                }

                    .calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper, .calendar .calendar-table .table-row .table-col.start-date .table-value-wrapper:hover, .calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper, .calendar .calendar-table .table-row .table-col.end-date .table-value-wrapper:hover {
                        background: #08c;
                        color: white;
                    }

                .calendar .calendar-table .table-row .table-col.start-date.out-of-boundaries .table-value-wrapper, .calendar .calendar-table .table-row .table-col.start-date.out-of-boundaries .table-value-wrapper:hover, .calendar .calendar-table .table-row .table-col.end-date.out-of-boundaries .table-value-wrapper, .calendar .calendar-table .table-row .table-col.end-date.out-of-boundaries .table-value-wrapper:hover {
                    background: #bbb;
                }

                .calendar .calendar-table .table-row .table-col.start-date {
                    border-radius: 4px 0 0 4px;
                }

                .calendar .calendar-table .table-row .table-col.end-date {
                    border-radius: 0 4px 4px 0;
                }

                .calendar .calendar-table .table-row .table-col .week-day {
                    -ms-flex: 1;
                    flex: 1;
                    text-align: center;
                }

            .calendar .calendar-table .table-row.weekdays .table-col {
                font-weight: bold;
            }

.daterangepicker.opened {
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.daterangepicker.expanded .calendar {
    display: block;
}

.daterangepicker.hide-periods .periods {
    display: none;
}

.daterangepicker.hide-periods .calendar .calendar-title {
    display: none;
}

.daterangepicker.standalone {
    position: static;
}

    .daterangepicker.standalone .custom-range-buttons {
        display: none;
    }

.daterangepicker.hide-weekdays .weekdays {
    display: none;
}

.daterangepicker.single {
    -ms-flex-direction: column;
    flex-direction: column;
}

    .daterangepicker.single .ranges,
    .daterangepicker.single .custom-range-inputs,
    .daterangepicker.single .custom-range-buttons,
    .daterangepicker.single .calendar .calendar-title {
        display: none;
    }

    .daterangepicker.single .controls {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .daterangepicker.single .controls .periods {
            margin-bottom: 0;
        }

    .daterangepicker.single .calendar .calendar-header {
        margin-left: 0;
        margin-right: 0;
    }

    .daterangepicker.single .calendar .calendar-table {
        border: none;
        padding: 0;
    }

    .daterangepicker.single.hide-periods .controls {
        display: none;
    }

.daterangepicker.month-period .table-col {
    font-size: 1.25em;
}

.daterangepicker.year-period .table-col {
    font-size: 1.25em;
}

.daterangepicker.quarter-period .table-col {
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 2em;
}

    .daterangepicker.quarter-period .table-col .months {
        font-size: 0.5em;
        opacity: 0.75;
    }

.daterangepicker.orientation-left:not(.single) .controls {
    -ms-flex-order: 2;
    order: 2;
}
