| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 | .daterangepicker {  position: absolute;  color: inherit;  background-color: #fff;  border-radius: 4px;  width: 278px;  padding: 4px;  margin-top: 1px;  top: 100px;  left: 20px;  /* Calendars */ }  .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.dropup {    margin-top: -5px; }    .daterangepicker.dropup:before {      top: initial;      bottom: -7px;      border-bottom: initial;      border-top: 7px solid #ccc; }    .daterangepicker.dropup:after {      top: initial;      bottom: -6px;      border-bottom: initial;      border-top: 6px solid #fff; }  .daterangepicker.dropdown-menu {    max-width: none;    z-index: 3001; }  .daterangepicker.single .ranges, .daterangepicker.single .calendar {    float: none; }  .daterangepicker.show-calendar .calendar {    display: block; }  .daterangepicker .calendar {    display: none;    max-width: 270px;    margin: 4px; }    .daterangepicker .calendar.single .calendar-table {      border: none; }    .daterangepicker .calendar th, .daterangepicker .calendar td {      white-space: nowrap;      text-align: center;      min-width: 32px; }  .daterangepicker .calendar-table {    border: 1px solid #fff;    padding: 4px;    border-radius: 4px;    background-color: #fff; }  .daterangepicker table {    width: 100%;    margin: 0; }  .daterangepicker td, .daterangepicker th {    text-align: center;    width: 20px;    height: 20px;    border-radius: 4px;    border: 1px solid transparent;    white-space: nowrap;    cursor: pointer; }    .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; }  .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-bottom: 0; }  .daterangepicker .input-mini {    border: 1px solid #ccc;    border-radius: 4px;    color: #555;    height: 30px;    line-height: 30px;    display: block;    vertical-align: middle;    margin: 0 0 5px 0;    padding: 0 6px 0 28px;    width: 100%; }    .daterangepicker .input-mini.active {      border: 1px solid #08c;      border-radius: 4px; }  .daterangepicker .daterangepicker_input {    position: relative; }    .daterangepicker .daterangepicker_input i {      position: absolute;      left: 8px;      top: 8px; }  .daterangepicker.rtl .input-mini {    padding-right: 28px;    padding-left: 6px; }  .daterangepicker.rtl .daterangepicker_input i {    left: auto;    right: 8px; }  .daterangepicker .calendar-time {    text-align: center;    margin: 5px auto;    line-height: 30px;    position: relative;    padding-left: 28px; }    .daterangepicker .calendar-time select.disabled {      color: #ccc;      cursor: not-allowed; }.ranges {  font-size: 11px;  float: none;  margin: 4px;  text-align: left; }  .ranges ul {    list-style: none;    margin: 0 auto;    padding: 0;    width: 100%; }  .ranges li {    font-size: 13px;    background-color: #f5f5f5;    border: 1px solid #f5f5f5;    border-radius: 4px;    color: #08c;    padding: 3px 12px;    margin-bottom: 8px;    cursor: pointer; }    .ranges li:hover {      background-color: #08c;      border: 1px solid #08c;      color: #fff; }    .ranges li.active {      background-color: #08c;      border: 1px solid #08c;      color: #fff; }/*  Larger Screen Styling */@media (min-width: 564px) {  .daterangepicker {    width: auto; }    .daterangepicker .ranges ul {      width: 160px; }    .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 .left .daterangepicker_input {        padding-right: 12px; }      .daterangepicker.ltr .calendar.left .calendar-table {        padding-right: 12px; }      .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 .left .daterangepicker_input {        padding-left: 12px; }      .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; } }
 |