/*!
 * Datetimepicker for Bootstrap v3
//! version : 3.0.3
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    border-radius: @border-radius-base;

    &.timepicker-sbs {
        width: 600px;
    }

    &.bottom {
        &:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: rgba(0,0,0,.2);
            position: absolute;
            top: -7px;
            left: 7px;
        }

        &:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid white;
            position: absolute;
            top: -6px;
            left: 8px;
        }
    }

    &.top {
        &:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid #ccc;
            border-top-color: rgba(0,0,0,.2);
            position: absolute;
            bottom: -7px;
            left: 6px;
        }

        &:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid white;
            position: absolute;
            bottom: -6px;
            left: 7px;
        }
    }

    & .dow {
        width: 14.2857%;
    }

    &.pull-right {
        &:before {
            left: auto;
            right: 6px;
        }

        &:after {
            left: auto;
            right: 7px;
        }
    }

    >ul {
        list-style-type: none;
        margin: 0;
    }

    a[data-action] {
      padding: 6px 0;
    }

    .timepicker-hour, .timepicker-minute, .timepicker-second {
        width: 54px;
        font-weight: bold;
        font-size: 1.2em;
        margin: 0;
    }

    button[data-action] {
      padding: 6px;
    }

    table[data-hour-format="12"] .separator {
        width: 4px;
        padding: 0;
        margin: 0;
    }

    .datepicker > div {
        display: none;
    }

    .picker-switch {
        text-align: center;
    }

    table {
        width: 100%;
        margin: 0;
    }

    td,
    th {
        text-align: center;
        border-radius: @border-radius-base;
    }

    td {
        height: 54px;
        line-height: 54px;
        width: 54px;

        &.cw
        {
            font-size: 10px;
            height: 20px;
            line-height: 20px;
            color: @gray-light;
        }

        &.day
        {
            height: 20px;
            line-height: 20px;
            width: 20px;
        }

        &.day:hover,
        &.hour:hover,
        &.minute:hover,
        &.second:hover {
            background: @gray-lighter;
            cursor: pointer;
        }

        &.old,
        &.new {
            color: @gray-light;
        }

        &.today {
            position: relative;

            &:before {
                content: '';
                display: inline-block;
                border-left: 7px solid transparent;
                border-bottom: 7px solid @btn-primary-bg;
                border-top-color: rgba(0, 0, 0, 0.2);
                position: absolute;
                bottom: 4px;
                right: 4px;
            }
        }

        &.active,
        &.active:hover {
            background-color: @btn-primary-bg;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
        }

            &.active.today:before {
                border-bottom-color: #fff;
            }

        &.disabled,
        &.disabled:hover {
            background: none;
            color: @gray-light;
            cursor: not-allowed;
        }

        span {
            display: inline-block;
            width: 54px;
            height: 54px;
            line-height: 54px;
            margin: 2px 1.5px;
            cursor: pointer;
            border-radius: @border-radius-base;

            &:hover {
                background: @gray-lighter;
            }

            &.active {
                background-color: @btn-primary-bg;
                color: #fff;
                text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            }

            &.old {
                color: @gray-light;
            }

            &.disabled,
            &.disabled:hover {
                background: none;
                color: @gray-light;
                cursor: not-allowed;
            }
        }
    }

    th {
        height: 20px;
        line-height: 20px;
        width: 20px;

        &.picker-switch {
            width: 145px;
        }

        &.next,
        &.prev {
            font-size: @font-size-base * 1.5;
        }

        &.disabled,
        &.disabled:hover {
            background: none;
            color: @gray-light;
            cursor: not-allowed;
        }
    }

    thead tr:first-child th {
        cursor: pointer;

        &:hover {
            background: @gray-lighter;
        }
    }
}

.input-group {
    &.date {
        .input-group-addon span {
            display: block;
            cursor: pointer;
            width: 16px;
            height: 16px;
        }
    }
}

.bootstrap-datetimepicker-widget.left-oriented {
    &:before {
        left: auto;
        right: 6px;
    }

    &:after {
        left: auto;
        right: 7px;
    }
}

.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td {
    padding: 0px !important;
}

@media screen and (max-width: 767px) {
    .bootstrap-datetimepicker-widget.timepicker-sbs {
        width: 283px;
    }
}