bootstrap-daterangepicker-rails 0.1.8 → 3.0.3

data/vendor/assets/stylesheets/daterangepicker-bs3.css

@@ -1,540 +1,388 @@
-//
-// A stylesheet for use with Bootstrap 3.x
-// @author: Dan Grossman http://www.dangrossman.info/
-// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
-// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
-// @website: https://www.improvely.com/
-//
-
-//
-// VARIABLES
-//
-
-//
-// Settings
-
-// The class name to contain everything within.
-$prefix-class: daterangepicker;
-$arrow-size:     7px !default;
-
-//
-// Colors
-$daterangepicker-color:                      inherit !default;
-$daterangepicker-bg-color:                   #fff !default;
-
-$daterangepicker-cell-color:                 $daterangepicker-color !default;
-$daterangepicker-cell-border-color:          transparent !default;
-$daterangepicker-cell-bg-color:              $daterangepicker-bg-color !default;
-
-$daterangepicker-cell-hover-color:           $daterangepicker-color !default;
-$daterangepicker-cell-hover-border-color:    $daterangepicker-cell-border-color !default;
-$daterangepicker-cell-hover-bg-color:        #eee !default;
-
-$daterangepicker-in-range-color:             #000 !default;
-$daterangepicker-in-range-border-color:      transparent !default;
-$daterangepicker-in-range-bg-color:          #ebf4f8 !default;
-
-$daterangepicker-active-color:               #fff !default;
-$daterangepicker-active-bg-color:            #357ebd !default;
-$daterangepicker-active-border-color:        transparent !default;
-
-$daterangepicker-unselected-color:           #999 !default;
-$daterangepicker-unselected-border-color:    transparent !default;
-$daterangepicker-unselected-bg-color:        #fff !default;
-
-//
-// daterangepicker
-$daterangepicker-width:          278px !default;
-$daterangepicker-padding:        4px !default;
-$daterangepicker-z-index:        3000 !default;
-
-$daterangepicker-border-size:    1px !default;
-$daterangepicker-border-color:   #ccc !default;
-$daterangepicker-border-radius:  4px !default;
-
-
-//
-// Calendar
-$daterangepicker-calendar-margin:              $daterangepicker-padding !default;
-$daterangepicker-calendar-bg-color:            $daterangepicker-bg-color !default;
-
-$daterangepicker-calendar-border-size:         1px !default;
-$daterangepicker-calendar-border-color:        $daterangepicker-bg-color !default;
-$daterangepicker-calendar-border-radius:       $daterangepicker-border-radius !default;
-
-//
-// Calendar Cells
-$daterangepicker-cell-size:           20px !default;
-$daterangepicker-cell-width:          $daterangepicker-cell-size !default;
-$daterangepicker-cell-height:         $daterangepicker-cell-size !default;
-
-$daterangepicker-cell-border-radius:  $daterangepicker-calendar-border-radius !default;
-$daterangepicker-cell-border-size:    1px !default;
-
-//
-// Dropdowns
-$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1 !default;
-
-//
-// Controls
-$daterangepicker-control-height:               30px !default;
-$daterangepicker-control-line-height:          $daterangepicker-control-height !default;
-$daterangepicker-control-color:                #555 !default;
-
-$daterangepicker-control-border-size:          1px !default;
-$daterangepicker-control-border-color:         #ccc !default;
-$daterangepicker-control-border-radius:        4px !default;
-
-$daterangepicker-control-active-border-size:   1px !default;
-$daterangepicker-control-active-border-color:  #08c !default;
-$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;
-
-$daterangepicker-control-disabled-color:       #ccc !default;
-
-//
-// Ranges
-$daterangepicker-ranges-color:                #08c !default;
-$daterangepicker-ranges-bg-color:             #f5f5f5 !default;
-
-$daterangepicker-ranges-border-size:          1px !default;
-$daterangepicker-ranges-border-color:         $daterangepicker-ranges-bg-color !default;
-$daterangepicker-ranges-border-radius:        $daterangepicker-border-radius !default;
-
-$daterangepicker-ranges-hover-color:          #fff !default;
-$daterangepicker-ranges-hover-bg-color:       $daterangepicker-ranges-color !default;
-$daterangepicker-ranges-hover-border-size:    $daterangepicker-ranges-border-size !default;
-$daterangepicker-ranges-hover-border-color:   $daterangepicker-ranges-hover-bg-color !default;
-$daterangepicker-ranges-hover-border-radius:  $daterangepicker-border-radius !default;
-
-$daterangepicker-ranges-active-border-size:   $daterangepicker-ranges-border-size !default;
-$daterangepicker-ranges-active-border-color:  $daterangepicker-ranges-bg-color !default;
-$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius !default;
-
-//
-// STYLESHEETS
-//
-.#{$prefix-class} {
+.daterangepicker {
   position: absolute;
-  color: $daterangepicker-color;
-  background: $daterangepicker-bg-color;
-  border-radius: $daterangepicker-border-radius;
-  width: $daterangepicker-width;
-  padding: $daterangepicker-padding;
-  margin-top: $daterangepicker-border-size;
-
-  // TODO: Should these be parameterized??
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
   top: 100px;
   left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
 
-  $arrow-prefix-size: $arrow-size;
-  $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
-
-  &:before, &:after {
-    position: absolute;
-    display: inline-block;
-
-    border-bottom-color: rgba(0, 0, 0, 0.2);
-    content: '';
-  }
-
-  &:before {
-    top: -$arrow-prefix-size;
-
-    border-right: $arrow-prefix-size solid transparent;
-    border-left: $arrow-prefix-size solid transparent;
-    border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
-  }
-
-  &:after {
-    top: -$arrow-suffix-size;
-
-    border-right: $arrow-suffix-size solid transparent;
-    border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
-    border-left: $arrow-suffix-size solid transparent;
-  }
-
-  &.opensleft {
-    &:before {
-      // TODO: Make this relative to prefix size.
-      right: $arrow-prefix-size + 2px;
-    }
-
-    &:after {
-      // TODO: Make this relative to suffix size.
-      right: $arrow-suffix-size + 4px;
-    }
-  }
-
-  &.openscenter {
-    &:before {
-      left: 0;
-      right: 0;
-      width: 0;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    &:after {
-      left: 0;
-      right: 0;
-      width: 0;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  &.opensright {
-    &:before {
-      // TODO: Make this relative to prefix size.
-      left: $arrow-prefix-size + 2px;
-    }
-
-    &:after {
-      // TODO: Make this relative to suffix size.
-      left: $arrow-suffix-size + 4px;
-    }
-  }
-
-  &.dropup {
-    margin-top: -5px;
-
-    // NOTE: Note sure why these are special-cased.
-    &:before {
-      top: initial;
-      bottom: -$arrow-prefix-size;
-      border-bottom: initial;
-      border-top: $arrow-prefix-size solid $daterangepicker-border-color;
-    }
-
-    &:after {
-      top: initial;
-      bottom:-$arrow-suffix-size;
-      border-bottom: initial;
-      border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
-    }
-  }
-
-  &.dropdown-menu {
-    max-width: none;
-    z-index: $daterangepicker-dropdown-z-index;
-  }
-
-  &.single {
-    .ranges, .calendar {
-      float: none;
-    }
-  }
-
-  /* Calendars */
-  &.show-calendar {
-    .calendar {
-      display: block;
-    }
-  }
-
-  .calendar {
-    display: none;
-    max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
-    margin: $daterangepicker-calendar-margin;
-
-    &.single {
-      .calendar-table {
-        border: none;
-      }
-    }
-
-    th, td {
-      white-space: nowrap;
-      text-align: center;
-
-      // TODO: Should this actually be hard-coded?
-      min-width: 32px;
-    }
-  }
-
-  .calendar-table {
-    border: $daterangepicker-calendar-border-size solid $daterangepicker-calendar-border-color;
-    padding: $daterangepicker-calendar-margin;
-    border-radius: $daterangepicker-calendar-border-radius;
-    background: $daterangepicker-calendar-bg-color;
-  }
-
-  table {
-    width: 100%;
-    margin: 0;
-  }
-
-  td, th {
-    text-align: center;
-    width: $daterangepicker-cell-width;
-    height: $daterangepicker-cell-height;
-    border-radius: $daterangepicker-cell-border-radius;
-    border: $daterangepicker-cell-border-size solid $daterangepicker-cell-border-color;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &.available {
-      &:hover {
-        background: $daterangepicker-cell-hover-bg-color;
-      }
-    }
-
-    &.week {
-      font-size: 80%;
-      color: #ccc;
-    }
-  }
-
-  td {
-    &.off {
-      &, &.in-range, &.start-date, &.end-date {
-        background-color: $daterangepicker-unselected-bg-color;
-        border-color: $daterangepicker-unselected-border-color;
-        color: $daterangepicker-unselected-color;
-      }
-    }
-
-    //
-    // Date Range
-    &.in-range {
-      background-color: $daterangepicker-in-range-bg-color;
-      border-color: $daterangepicker-in-range-border-color;
-      color: $daterangepicker-in-range-color;
-
-      // TODO: Should this be static or should it be parameterized?
-      border-radius: 0;
-    }
-
-    &.start-date {
-      border-radius: $daterangepicker-cell-border-radius 0 0 $daterangepicker-cell-border-radius;
-    }
-
-    &.end-date {
-      border-radius: 0 $daterangepicker-cell-border-radius $daterangepicker-cell-border-radius 0;
-    }
-
-    &.start-date.end-date {
-      border-radius: $daterangepicker-cell-border-radius;
-    }
-
-    &.active {
-      &, &:hover {
-        background-color: $daterangepicker-active-bg-color;
-        border-color: $daterangepicker-active-border-color;
-        color: $daterangepicker-active-color;
-      }
-    }
-  }
-
-  th {
-    &.month {
-      width: auto;
-    }
-  }
-
-  //
-  // Disabled Controls
-  //
-  td, option {
-    &.disabled {
-      color: #999;
-      cursor: not-allowed;
-      text-decoration: line-through;
-    }
-  }
-
-  select {
-    &.monthselect, &.yearselect {
-      font-size: 12px;
-      padding: 1px;
-      height: auto;
-      margin: 0;
-      cursor: default;
-    }
-
-    &.monthselect {
-      margin-right: 2%;
-      width: 56%;
-    }
-
-    &.yearselect {
-      width: 40%;
-    }
-
-    &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
-      width: 50px;
-      margin-bottom: 0;
-    }
-  }
-
-  //
-  // Text Input Controls (above calendar)
-  //
-  .input-mini {
-    border: $daterangepicker-control-border-size solid $daterangepicker-control-border-color;
-    border-radius: $daterangepicker-control-border-radius;
-    color: $daterangepicker-control-color;
-    height: $daterangepicker-control-line-height;
-    line-height: $daterangepicker-control-height;
-    display: block;
-    vertical-align: middle;
-
-    // TODO: Should these all be static, too??
-    margin: 0 0 5px 0;
-    padding: 0 6px 0 28px;
-    width: 100%;
-
-    &.active {
-      border: $daterangepicker-control-active-border-size solid $daterangepicker-control-active-border-color;
-      border-radius: $daterangepicker-control-active-border-radius;
-    }
-  }
-
-  .daterangepicker_input {
-    position: relative;
-
-    i {
-      position: absolute;
-
-      // NOTE: These appear to be eyeballed to me...
-      left: 8px;
-      top: 8px;
-    }
-  }
-
-  //
-  // Time Picker
-  //
-  .calendar-time {
-    text-align: center;
-    margin: 5px auto;
-    line-height: $daterangepicker-control-line-height;
-    position: relative;
-    padding-left: 28px;
-
-    select {
-      &.disabled {
-        color: $daterangepicker-control-disabled-color;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-//
-// Predefined Ranges
-//
-
-.ranges {
-  font-size: 11px;
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .calendar {
   float: none;
-  margin: 4px;
-  text-align: left;
+}
 
-  ul {
-    list-style: none;
-    margin: 0 auto;
-    padding: 0;
-    width: 100%;
-  }
-
-  li {
-    font-size: 13px;
-    background: $daterangepicker-ranges-bg-color;
-    border: $daterangepicker-ranges-border-size solid $daterangepicker-ranges-border-color;
-    border-radius: $daterangepicker-ranges-border-radius;
-    color: $daterangepicker-ranges-color;
-    padding: 3px 12px;
-    margin-bottom: 8px;
-    cursor: pointer;
-
-    &:hover {
-      background: $daterangepicker-ranges-hover-bg-color;
-      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
-      color: $daterangepicker-ranges-hover-color;
-    }
-
-    &.active {
-      background: $daterangepicker-ranges-hover-bg-color;
-      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
-      color: $daterangepicker-ranges-hover-color;
-    }
-  }
+.daterangepicker.single .drp-selected {
+  display: none;
 }
 
-/*  Larger Screen Styling */
-@media (min-width: 564px) {
-  .#{$prefix-class} {
-    width: auto;
-
-    .ranges {
-      ul {
-        width: 160px;
-      }
-    }
-
-    &.single {
-      .ranges {
-        ul {
-          width: 100%;
-        }
-      }
-
-      .calendar.left {
-        clear: none;
-      }
-
-      .ranges, .calendar {
-        float:left;
-      }
-    }
-
-    .calendar{
-      &.left {
-        clear: left;
-        margin-right: 0;
+.daterangepicker.show-calendar .calendar {
+  display: block;
+}
 
-        .calendar-table {
-          border-right: none;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
 
-      &.right {
-        margin-left: 0;
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
 
-        .calendar-table {
-          border-left: none;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      }
-    }
+.daterangepicker .calendar {
+  display: none;
+  max-width: 270px;
+}
 
-    .left .daterangepicker_input {
-      padding-right: 12px;
-    }
+.daterangepicker .calendar.left {
+  padding: 8px 0 8px 8px;
+}
 
-    .calendar.left .calendar-table {
-      padding-right: 12px;
-    }
+.daterangepicker .calendar.right {
+  padding: 8px;
+}
 
-    .ranges, .calendar {
-      float: left;
-    }
-  }
+.daterangepicker .calendar.single .calendar-table {
+  border: none;
 }
 
-@media (min-width: 730px) {
-  .#{$prefix-class} {
-    .ranges {
-      width: auto;
-      float: left;
-    }
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
 
-    .calendar.left {
-      clear: none;
-    }
-  }
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
 }
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges .calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto; }
+    .daterangepicker .ranges ul {
+      width: 140px; }
+    .daterangepicker.single .ranges ul {
+      width: 100%; }
+    .daterangepicker.single .calendar.left {
+      clear: none; }
+    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
+      float: left; }
+    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
+      float: right; }
+    .daterangepicker.ltr {
+      direction: ltr;
+      text-align: left; }
+      .daterangepicker.ltr .calendar.left {
+        clear: left;
+        margin-right: 0; }
+        .daterangepicker.ltr .calendar.left .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.ltr .calendar.right {
+        margin-left: 0; }
+        .daterangepicker.ltr .calendar.right .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.ltr .calendar.left .calendar-table {
+        padding-right: 8px; }
+      .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
+        float: left; }
+    .daterangepicker.rtl {
+      direction: rtl;
+      text-align: right; }
+      .daterangepicker.rtl .calendar.left {
+        clear: right;
+        margin-left: 0; }
+        .daterangepicker.rtl .calendar.left .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.rtl .calendar.right {
+        margin-right: 0; }
+        .daterangepicker.rtl .calendar.right .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.rtl .calendar.left .calendar-table {
+        padding-left: 12px; }
+      .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
+        text-align: right;
+        float: right; } }
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto; }
+  .daterangepicker.ltr .ranges {
+    float: left; }
+  .daterangepicker.rtl .ranges {
+    float: right; }
+  .daterangepicker .calendar.left {
+    clear: none !important; } }