// Mixins
// --------------------------

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

//Variables
@white: #fff;

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

  &.dropdown-menu {
    max-width: none;
  }

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

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

    .ranges, .calendar {
      float: left;
      margin: 4px;
    }    
  }

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

    :after {
      position: absolute;
      top: -6px;
      left: 10px;
      display: inline-block;
      *display: inline;
      *zoom:1;
      border-right: 6px solid transparent;
      border-bottom: 6px solid @white;
      border-left: 6px solid transparent;
      content: '';
    }

    .ranges, .calendar {
      float: right;
      margin: 4px;
    }
  }

  .ranges {
    width: 160px;
    text-align: left;

    .range_inputs>div {
      float: left;
      
      &:nth-child(2){
        padding-left: 11px;
      }
    }

    label {
      color: #333;
      font-size: 11px;
      line-height: 11px;
      margin-bottom: 0px;
      text-transform: uppercase;
      text-shadow: 1px 1px 0 @white;
    }

    input {
      font-size: 11px;
      padding: 0px;
      margin: 0;
      background-color: @white;
      border: medium none;
      box-shadow: none;
      cursor: default;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      font-size: 11px;
      line-height: 13px;
      background: #f5f5f5;
      border: 1px solid #f5f5f5;
      color: #08c;
      padding: 3px 12px;
      margin-bottom: 4px;
      .border-radius(5px);
      cursor: pointer;

      &.active, &:hover {
        background: #08c;
        border: 1px solid #08c;
        color: @white;
      }

    }
  }

  .calendar {
    display: none;
    max-width: 230px;
    border: 1px solid #ddd;
    padding: 4px;
    .border-radius(4px);
    background: @white;
    
    th, td {
      white-space: nowrap;
      text-align: center;
    }
  }

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

  td, th {
    text-align: center;
    width: 20px;
    height: 20px;
    font-size: 11px;
    .border-radius(4px);
    cursor: pointer;
    white-space: nowrap;
    padding: 1px 2px;

    &.available:hover {
      background: #eee;
    }

    &.week {
      font-size: 80%;
      color: #ccc;
    }

  }
  
  td {
    &.off, &.disabled{
      color: #999;
    }

    &.in-range {
      background: #ebf4f8;
      .border-radius(0px);
    }

    &.active, &.active:hover{
      background-color: #006dcc;
      background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
      background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
      background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
      background-image: -o-linear-gradient(top, #0088cc, #0044cc);
      background-image: linear-gradient(top, #0088cc, #0044cc);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
      border-color: #0044cc #0044cc #002a80;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      color: @white;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

  }

  select {
    &.monthselect, &.yearselect {
      font-size: 12px;
      padding: 1px;
      height: auto;
      margin: 0;
      cursor: default;
    }

    &.monthselect {
      margin-right: 2%;
      width: 56%;
    }

    &.yearselect {
      width: 40%;
    }

  }  

}