gemini-datepicker/dist/css/jquery.datepicker.css

A full-featured datepicker jquery plugin.

.gmi-date-picker {
  width: 254px;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s; }
  .gmi-date-picker.has-time {
    width: 324px; }
  .gmi-date-picker__header__icon-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 3px 0;
    float: right;
    cursor: pointer;
    color: #475669 !important; }
    .gmi-date-picker__header__icon-btn:hover {
      color: #038cd6; }
  .gmi-date-picker[data-role='year'] .gmi-date-picker__header__label--year:hover {
    color: #475669 !important;
    cursor: default; }

.gmi-picker-panel {
  line-height: 20px;
  color: #475669;
  background-color: #fff;
  border: 1px solid #d3dce6;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 5px #ccc;
          box-shadow: 0 2px 5px #ccc;
  margin: 5px 0;
  z-index: 2008; }
  .gmi-picker-panel span {
    color: #475669;
    font-size: 14px;
    padding: 0 3px;
    cursor: pointer; }
    .gmi-picker-panel span:first-child {
      padding-left: 0; }
    .gmi-picker-panel span:hover {
      color: #038cd6;
      text-decoration: none; }
  .gmi-picker-panel__body {
    width: 100%;
    height: 100%; }
  .gmi-picker-panel__body__header {
    line-height: 22px;
    padding: 12px 20px 5px; }
    .gmi-picker-panel__body__header span[class^=gmi-date-picker__header__label--] {
      color: #475669 !important; }
      .gmi-picker-panel__body__header span[class^=gmi-date-picker__header__label--]:hover {
        color: #038cd6 !important; }
  .gmi-picker-panel .gmi-year-picker__header, .gmi-picker-panel .gmi-month-picker__header {
    padding-bottom: 10px; }
  .gmi-picker-panel__body__header--time {
    padding: 8px;
    border-bottom: 1px solid #d3dce6;
    min-height: 30px; }
    .gmi-picker-panel__body__header--time__wrapper {
      width: 50%;
      float: left;
      padding: 0 5px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .gmi-picker-panel__body__header--time__wrapper .gmi-input {
        width: 100%;
        display: inline-block; }
        .gmi-picker-panel__body__header--time__wrapper .gmi-input__inner {
          width: 100%;
          height: 30px;
          -webkit-appearance: none;
          -moz-appearance: none;
          border-radius: 2px;
          border: 1px solid #bfcbd9;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          color: #1f2d3d;
          display: block;
          line-height: 1;
          outline: none;
          padding: 3px 10px;
          font-size: 13px;
          -webkit-transition: border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); }
          .gmi-picker-panel__body__header--time__wrapper .gmi-input__inner:hover {
            border: 1px solid #038cd6; }
      .gmi-picker-panel__body__header--time__wrapper .gmi-time-picker--wrapper {
        position: relative;
        zoom: 1; }
  .gmi-picker-panel__btn--prev {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABKElEQVRYR+2W/61BQRCFPxVQgg7o4NEBFXgqoIRXAhWgAjpAB3SghPcqIEdmEjZcuxsvN5KdP++v8805s5PboOZq1KxPASgOFAc+2oEWsLA9MgZ+c3ZKrgNtYA10TfQA9HMgcgAkugXkgDpXyYkTMAQEE12pAKH40pS+DUIxyIloiBQAF9c7EtwEberaDDinQMQCDKxDPd+r6FCQuxSIGAC39++FuBviEE2bEY/p4Vy8AkgVT4aoAnDxI6AINOUppaOqOelUOfEMQMM0ASSuzLOWjB1VzYQgpsA87OARgDIbvUHctbQvHELf9t1xvR8CuPjebM/tPGxUEIrjC7iDuAVw21d2zlPyjn3WG1QUiuTOgR/L7HrjH0uNylnplZ/S4kBxoDhQvwMXBcA9IYMw4zYAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 100% 100%; }
  .gmi-picker-panel__btn--next {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOElEQVRYR+2U0VHDMBAFNxVAB9ABKSGUQAVABZAO6CBQAVBB6ABKgA4oIVQAszMSI0ywfbEz5kP681i697TvTjMmXrOJ9akGKoFK4F8RuAEOgOWe34ZbYAOo9+Md8McV8ABc7smEtc+BO+C6acDvvOEFOEtOx/ByCKyBBfAIXOSi23ogm3gFTkcwofgzMG+KbyOQjYlnBQw1UYp/Yy+Rtk2BmO6TCeN4D2ZxnLB7c3tKsr9W1xhmE3atcUikz1JU7BL4U7wtglIkaqK3eF8D7rOok/HZQSKLS1bjT124uiIoz5cmxNosrqCNa03HrVdcEQMlCV/MMtsc00dEPBJBk4S3PypeTKclLL6rAc/Z3fbESXL2lm7utIRWNIKyuCbybBtBWHwIgdAt2zYPITCKiWqgEqgEJifwBe9kPSFgrTUbAAAAAElFTkSuQmCC) no-repeat center center;
    background-size: 100% 100%;
    margin-left: 15px; }
  .gmi-picker-panel__body__main {
    min-width: 224px;
    padding: 0 15px 15px; }
  .gmi-picker-panel table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0; }
  .gmi-picker-panel .gmi-date-table {
    font-size: 12px !important;
    min-width: 224px;
    -webkit-user-select: none; }
    .gmi-picker-panel .gmi-date-table th {
      padding: 5px;
      color: #8492a6;
      font-size: 12px !important;
      font-weight: 400;
      text-align: center; }
    .gmi-picker-panel .gmi-date-table td {
      width: 32px;
      height: 32px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      vertical-align: middle;
      font-size: 12px !important;
      color: #475669; }
      .gmi-picker-panel .gmi-date-table td.today {
        color: #038cd6; }
      .gmi-picker-panel .gmi-date-table td.current {
        background-color: #038cd6;
        color: #fff; }
      .gmi-picker-panel .gmi-date-table td.disabled {
        background-color: #f5f5f5;
        opacity: 1;
        cursor: not-allowed;
        color: #ddd; }
        .gmi-picker-panel .gmi-date-table td.disabled:hover {
          background-color: #f5f5f5 !important; }
      .gmi-picker-panel .gmi-date-table td.available:not(.current):hover {
        background-color: #e5e9f2; }
      .gmi-picker-panel .gmi-date-table td.next-month, .gmi-picker-panel .gmi-date-table td.prev-month {
        color: #ddd; }
      .gmi-picker-panel .gmi-date-table td.in-range {
        background-color: #c2dcef; }
        .gmi-picker-panel .gmi-date-table td.in-range:hover {
          background-color: #c2dcef !important; }
      .gmi-picker-panel .gmi-date-table td.start-date, .gmi-picker-panel .gmi-date-table td.end-date {
        background-color: #038cd6;
        color: #fff; }
        .gmi-picker-panel .gmi-date-table td.start-date:hover, .gmi-picker-panel .gmi-date-table td.end-date:hover {
          background-color: #038cd6 !important; }
  .gmi-picker-panel .gmi-year-table, .gmi-picker-panel .gmi-month-table {
    font-size: 12px !important;
    min-width: 224px;
    -webkit-user-select: none; }
    .gmi-picker-panel .gmi-year-table td, .gmi-picker-panel .gmi-month-table td {
      padding: 22px 3px;
      vertical-align: middle; }
      .gmi-picker-panel .gmi-year-table td .cell, .gmi-picker-panel .gmi-month-table td .cell {
        height: 32px;
        display: block;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        font-size: 12px !important;
        color: #475669 !important; }
        .gmi-picker-panel .gmi-year-table td .cell:not(.current):hover, .gmi-picker-panel .gmi-month-table td .cell:not(.current):hover {
          background-color: #e5e9f2; }
      .gmi-picker-panel .gmi-year-table td.current .cell, .gmi-picker-panel .gmi-month-table td.current .cell {
        background-color: #038cd6 !important;
        color: #fff !important; }
      .gmi-picker-panel .gmi-year-table td.disabled .cell, .gmi-picker-panel .gmi-month-table td.disabled .cell {
        background-color: #f5f5f5;
        opacity: 1;
        cursor: not-allowed;
        color: #ddd !important; }
        .gmi-picker-panel .gmi-year-table td.disabled .cell:hover, .gmi-picker-panel .gmi-month-table td.disabled .cell:hover {
          background-color: #f5f5f5 !important; }
  .gmi-picker-panel__footer {
    padding: 0 8px;
    border-top: 1px solid #d3dce6;
    text-align: right;
    background-color: #fff; }
    .gmi-picker-panel__footer .gmi-picker-panel__link-btn {
      display: inline-block;
      color: #038cd6;
      padding: 10px 5px; }
      .gmi-picker-panel__footer .gmi-picker-panel__link-btn--default {
        color: #8391a5; }
      .gmi-picker-panel__footer .gmi-picker-panel__link-btn--primary {
        color: #038cd6; }
      .gmi-picker-panel__footer .gmi-picker-panel__link-btn:hover {
        text-decoration: none; }
      .gmi-picker-panel__footer .gmi-picker-panel__link-btn.disabled {
        color: #ccc;
        cursor: not-allowed; }
  .gmi-picker-panel.placement-left-bottom {
    -ms-transform-origin: 0 bottom !important;
    -webkit-transform-origin: 0 bottom !important;
            transform-origin: 0 bottom !important; }
  .gmi-picker-panel.placement-center-bottom {
    -ms-transform-origin: 50% bottom !important;
    -webkit-transform-origin: 50% bottom !important;
            transform-origin: 50% bottom !important; }
  .gmi-picker-panel.placement-right-bottom {
    -ms-transform-origin: 100% bottom !important;
    -webkit-transform-origin: 100% bottom !important;
            transform-origin: 100% bottom !important; }

.gmi-date-range-picker {
  width: 520px;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s; }
  .gmi-date-range-picker.has-time {
    width: 660px; }
  .gmi-date-range-picker__body {
    clear: both;
    overflow: hidden; }
    .gmi-date-range-picker__body__header {
      font-size: 14px;
      text-align: center;
      position: relative;
      padding-bottom: 5px; }
    .gmi-date-range-picker__body .gmi-picker-panel__body__main {
      width: 50%;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      margin: 0;
      padding: 15px; }
  .gmi-date-range-picker__header--time__wrapper .gmi-input {
    float: left;
    width: 50%;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .gmi-date-range-picker__header__icon-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 16px;
    height: 16px; }
    .gmi-date-range-picker__header__icon-btn:hover {
      color: #038cd6; }
  .gmi-date-range-picker__btn--prev {
    left: 5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABHklEQVRYR8XXuw3CMBCA4TsaRAWjwAYYJqBBpCNlYB6UEqiQ2AElI2QERmCCGBkUkSiJ48edoaEx/J8iRb5DIPikt2yZRCI3+avTPZurc8etKNQ3mvxIdya9PfaAeAaQl2S3jnVnVRxLmX3CEhdJJJ5egF8cAKSMk2h96QNUcQSYSQnXQ7Taez0BirgzgCruBKCMWwOo41YAjrgxgCtuBOCMDwK441pAiHgvIFS8ExAy3gKEjjcA/4h7AUZlmQPgVAIUkzGKeCNeLld74zq2fQoUiNY8EBrROZCERPRORKEQ2pEsBGJwJuRGDALUq8WJMAJwIowBXAgrAAfCGkCNcAJQIpwBVAgvQB1R3/d0++H3AlO75GjuvZxWIZ/1/A1dhe0wdsJuuwAAAABJRU5ErkJggg==) no-repeat center center;
    background-size: 100% 100%; }
    .gmi-date-range-picker__btn--prev-month {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAr0lEQVRYR8XVsRECMQxEUbk1aAIiIISCiI+ILmjNzAWkjFb6O3YD/8nJjlj8xuJ+WADP92cbIy5zxutxPlz/HYkDlPgOQwFqHAVU4higGkcAnXgb0I23AES8DKDiJQAZlwF0XAI44mmAK54COOMSIGJu99PxRs93aox+v+BApAD71S5EGuBCSAAHQgbQiBKARJQBFKIFIBBtQBeBADoIDFBFoIAKAgeoCAtAWczlgC8d87YhVW+y5wAAAABJRU5ErkJggg==) no-repeat center center;
      background-size: 100% 100%;
      left: 25px; }
  .gmi-date-range-picker__btn--next {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABLUlEQVRYR8XXsRGCMBQG4PdcQEbQCXQDT1kCKrWESodRSrHizsYJFDbRLdQmzyOcHByKeWgSGpq8+z9S5CcIlh/M86PktMjfge/GHM/mkI5RiHnouWvOXHUt7o6pc3+IKwD2gWjJQWyTc4YIEwCKA89ddkHIHci/pCdExkUUeMoAYNQVIQE2ESXAFqIGsIFoAEwj3gJMIj4CTCFaASYQXwG6EUoAnQhlgC4EC6ADwQaU7Ym4k2c44TDwp1eVIoqSdABIl2KuKD42oKhgShHA4bRnXly3h5wbE8E+9GfyF4AF+Hc4C6AjXBmgK1wJoDP8K0B3eCvARPhHgKnwtwCT4Q2A6fAawEZ4CbAVLgH/uBlVz3aVUqqu+flu2BNiEXjuihv8Ws8qo64hbXPWAU9Lh/8w7QLSzwAAAABJRU5ErkJggg==) no-repeat center center;
    background-size: 100% 100%;
    right: 5px; }
    .gmi-date-range-picker__btn--next-month {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAx0lEQVRYR8XXvQ3CMBBA4fMGjITCElCFlDBQ2oQqZTaAtaAySkGL7+ed4t5+n1z45CI7r7JzX5qAcXnOpUgvUufb+TTQ4CZgC2YiVIBMhBqQhTABMhBmAI1wAUiEG0AhQgACEQZEEQgggsAAXgQK8CBwgBWRCqhVHvdLd/03QXHAb3Jq4hsMBVjjKMATxwDeOAKIxMOAaDwEIOJuABV3Aci4GUDHTYCMuBqQFW8CpvV1eH/qKiJH7dtu/bqhs8Aab96A50Drni+AWrkh0KGJCQAAAABJRU5ErkJggg==) no-repeat center center;
      background-size: 100% 100%;
      right: 25px; }
  .gmi-date-range-picker .f-lt {
    float: left;
    border-right: 1px solid #d3dce6; }
  .gmi-date-range-picker .f-rt {
    float: right; }

.gmi-time-panel {
  margin: 5px 0;
  color: #475669;
  background-color: #fff;
  border: 1px solid #d1dbe5;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  -webkit-transform-origin: center top 0;
      -ms-transform-origin: center top 0;
          transform-origin: center top 0;
  z-index: 2011;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none; }
  .gmi-time-panel__body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; }
    .gmi-time-panel__body:before {
      content: ":";
      padding-left: 33.33333%;
      top: 50%;
      color: #fff;
      position: absolute;
      font-size: 14px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      line-height: 16px;
      background-color: #039cef;
      height: 32px;
      left: 0;
      right: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding-top: 6px;
      text-align: left; }
    .gmi-time-panel__body:after {
      content: ":";
      top: 50%;
      color: #fff;
      position: absolute;
      font-size: 14px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      line-height: 16px;
      background-color: #039cef;
      height: 32px;
      left: 66.66667%;
      right: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding-top: 6px;
      text-align: left; }
    .gmi-time-panel__body__item {
      width: 33.33%;
      height: 100%;
      overflow: hidden;
      position: relative;
      z-index: 1;
      float: left;
      text-align: center; }
      .gmi-time-panel__body__item--spinner {
        width: 100%;
        max-height: 192px; }
        .gmi-time-panel__body__item--spinner:before {
          content: " ";
          display: block;
          width: 100%;
          height: 80px; }
        .gmi-time-panel__body__item--spinner:after {
          content: " ";
          display: block;
          width: 100%;
          height: 80px; }
        .gmi-time-panel__body__item--spinner__item {
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          cursor: pointer; }
          .gmi-time-panel__body__item--spinner__item.active {
            color: #fff; }
            .gmi-time-panel__body__item--spinner__item.active:hover {
              cursor: default; }
          .gmi-time-panel__body__item--spinner__item.disabled {
            color: #cecece;
            cursor: not-allowed; }

.picker-show {
  animation: showPanel 0.2s ease-in-out;
  -webkit-animation: showPanel 0.2s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

.picker-hide {
  animation: hidePanel 0.2s ease-in-out;
  -webkit-animation: hidePanel 0.2s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

@-webkit-keyframes showPanel {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    -ms-transform: scale(0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -ms-transform: scale(1, 1); } }

@-webkit-keyframes hidePanel {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -ms-transform: scale(1, 1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    -ms-transform: scale(0, 0); } }