/*!
 * Stylesheet for the Date Range Picker, for use with Bootstrap 2.x
 *
 * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Built for http://www.improvely.com
 */

.daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3000;
  .sl;
  position: absolute;
  padding: 5px 0 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: @white;
  text-align: left;
  .box-shadow(0px, 1px, 4px, @gray2);
}

.daterangepicker.opensleft .calendar {
  float: left;
  margin: 4px;
}

.daterangepicker.opensright .calendar {
  float: right;
  margin: 4px;
}

.daterangepicker .calendar {
  display: none;
  max-width: 250px;
}
.daterangepicker.show-calendar .calendar {
  display: block;
}

.daterangepicker .calendar.single .calendar-date {
  border: none;
}

.daterangepicker .calendar th, .daterangepicker .calendar td {
/*  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  .sl-sm;
  white-space: nowrap;
  text-align: center;
}

.daterangepicker .daterangepicker_start_input,
.daterangepicker .daterangepicker_end_input {
  label {
    text-transform: uppercase;
    .sl-sm-sb;
    float: left;
    width: 80px;
    padding-top: 8px;
  }
  input {
    float: left;
    width: 110px;
    .sl;
    color: @gray7;
    padding: 6px 8px;
    .box-shadow(none);

    &:focus {
     border-color: @gray6;
    }

    &.invalid {
      color: @imperialRed100;
      border-color: @imperialRed100;
    }
  }
  .calendar-time {
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;

    input {
      width: 80px;
    }
  }
}

.daterangepicker .calendar-date {
  padding: 4px;
  background: #fff;
}

.daterangepicker {
  position: absolute;
  background: #fff;
  top: 100px;
  left: 20px;
  padding: 4px 0;
  margin-top: 1px;
  .border-radius(0);

  .calendars {
    margin: 0 16px;
  }

  hr {
    border-top-color: @gray2;
  }

  .ranges {
    text-align: left;

    .range_inputs {
      text-align: center;

      .daterangepicker_inputs {
        > div {
          text-align: left;
          display: inline-block;
        }
      }
    }

    hr {
      margin-bottom: 12px;
      margin-top: 4px;
    }
  }
}

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

.daterangepicker td, .daterangepicker th {
  text-align: center;
  width: 15px;
  height: 15px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
}

.daterangepicker .calendar td {
  color: @gray4;
  padding: 2px 5px;

  &.off {
    color: @gray2;
    .opacity(0);
  }
  &.disabled {
    color: @gray1;
  }
  &.in-range {
    background: @persianBlue20;
    color: @black;
  }
  &.active, &.active:hover {
    background-color: @persianBlue60;
    color: @white;
  }

  &.available:hover {
    background: @persianBlue60;
    color: @white;
  }
}

.daterangepicker td.week, .daterangepicker th.week {
  color: #ccc;
  .sl-sm;
  font-size: 12px;
}

.daterangepicker th.month {
  width: auto;
  text-transform: uppercase;
  .sl-sm-sb;
}

.ui-timepicker-wrapper {
	overflow-y: auto;
	height: 150px;
	width: 6.5em;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	outline: none;
	z-index: 10001;
	margin: 0;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
	width: 11em;
}

.ui-timepicker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-timepicker-duration {
	margin-left: 5px; color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
	color: #888;
}

.ui-timepicker-list li {
/*  padding: 3px 0 3px 5px;*/
	cursor: pointer;
	white-space: nowrap;
	color: @black;
	list-style: none;
	margin: 0;
  padding: 10px 20px;
  .sl;
  color: @gray6;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
	background: #fff; color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: @gray1;
	color: @black;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: #888;
	cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	background: #f2f2f2;
}

.daterangepicker {
  .calendar {
    th {
      vertical-align: baseline;

      &.month {
        padding-bottom: 16px;
      }

      i {
        color: @persianBlue60;
      }

      &:hover {
        i {
          color: @persianBlue100;
        }
      }
    }

    &.left {
      th {
        &.next {
          pointer-events: none;
          .opacity(0);
        }
        &.prev {
          position: relative;
          left: -20px;
        }
      }
    }
    &.right {
      th {
        &.prev {
          pointer-events: none;
          .opacity(0);
        }
        &.next {
          position: relative;
          left: 20px;
        }
      }
    }
  }

  .ranges {
    float: none;
    clear: both;
    display: block;

    .cancelBtn {
      display: none;
    }

    .buttons {
      text-align: right;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
}
