/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
//@import "../../bootstrap/variables.less";
@import "../bootstrap/less/variables.less";

.bootstrap-datetimepicker-widget
{
    top: 0;
    left: 0;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 3000;
    border-radius: 4px;

    .btn {
        padding:6px;
    }

    &: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: 6px;
    }

    &: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: 7px;
    }

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

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

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

    .timepicker-hour, .timepicker-minute, .timepicker-second
    {
        width: 100%;
        font-weight: bold;
        font-size: 1.2em;
    }

    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;
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

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

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

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

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

        span
        {
            display: block;
            width: 47px;
            height: 54px;
            line-height: 54px;
            float: left;
            margin: 2px;
            cursor: pointer;
            border-radius: 4px;

            &: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
    {
        &.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;
        }
    }
    /*.dow {
  border-top: 1px solid #ddd !important;
  }*/
}

.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.in div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td
{
    padding: 0px !important;
}
