.gmi-date-range-picker {
  width: 520px;
  transition: all ease-in-out 0.2s;

  @at-root &.has-time {
    width: 660px;
  }

  &__body {
    clear: both;
    overflow: hidden;

    &__header {
      font-size: 14px;
      text-align: center;
      position: relative;
      padding-bottom: 5px;
    }

    .gmi-picker-panel__body__main {
      width: 50%;
      box-sizing: border-box;
      margin: 0;
      padding: 15px;
    }
  }

  &__header--time__wrapper {
    .gmi-input {
      float: left;
      width: 50%;
      padding: 0 5px;
      box-sizing: border-box;
    }
  }

  &__header__icon-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;

    &:hover {
      color: $primaryColor;
    }
  }

  &__btn--prev {
    left: 5px;
    background: url("/images/double-arrow-left.png",true) no-repeat center center;
    background-size: 100% 100%;

    &-month {
      background: url("/images/left.png",true) no-repeat center center;
      background-size: 100% 100%;
      left: 25px;
    }
  }

  &__btn--next {
    background: url("/images/double-arrow-right.png",true) no-repeat center center;
    background-size: 100% 100%;
    right: 5px;

    &-month {
      background: url("/images/right.png",true) no-repeat center center;
      background-size: 100% 100%;
      right: 25px;
    }
  }

  .f-lt {
    float: left;
    border-right: 1px solid #d3dce6;
  }

  .f-rt {
    float: right;
  }

}