$backgroundColor:var(--backgroundColor);
.range_picker{
  position: relative;
  height: 30px;
  h5{
    font-size: 16px;
  }
  .range_mode, .leftOpen_mode, .rightOpen_mode{
    overflow: hidden;
    display: grid;
    grid-template-columns: calc( 50% - 15px ) 30px calc( 50% - 15px );
    height: 50px;
  }
  .main_input_block{
    width: 100%;
    .main_input{
      width: calc(100% - 27px);
      float: left;
      margin-top:0;
    }
    .glyphicon-calendar{
      width: 26px;
      display: inline-block;
      height: 26px;
      color: #ffffff;
      float: right;
      text-align: center;
      vertical-align: middle;
      line-height: 26px;
      top: 0;
      background: $backgroundColor;
      &:hover{
        cursor: pointer;
      }
    }
    &:hover .clear_picker{
      display: block;
    }
  }
  .material_calendar{
    &.single_date_mode{
      .mat-form-field-wrapper{
        .mat-form-field-infix{
          display: none;
        }
      }
    }
  }
  .picker{
    z-index: 999;
    float: left;
    padding: 15px 20px;
    display: block;
    width:400px;
    min-height:200px;
    background: white;
    position: absolute;
    top:28px;
    -webkit-box-shadow: 2px 2px 13px 0px #777;
    -moz-box-shadow: 2px 2px 13px 0px #777;
    box-shadow: 2px 2px 13px 0px #777;
    .include_time_block{
      display: block;
      min-height: 3px;
      //height:20px;
      //margin-bottom:10px;
      label{
        //margin:0;
        background: $backgroundColor;
        color: white;
        width: calc(100% - 4px);
        line-height: 30px;
        margin: 5px 2px;
        padding-left: 10px;
        -webkit-box-shadow: 3px 3px 6px 0px #666;
        -moz-box-shadow: 3px 3px 6px 0px #666;
        box-shadow: 3px 3px 6px 0px #666;
        padding:3px 10px 3px 11px;
        &:hover{
          cursor: pointer;
        }
        input{
          float: left;
          height: 30px;
          margin-right: 7px !important;
        }
      }
    }
    .left{
      height: 50px;
      .material_calendar{
        float: left;
        //width: 45%;
        input{
          border:none;
          border-bottom: 1px solid #cccccc;
        }
        &.single_datepicker{
          width: 100%;
        }
        &.single_date_mode{
          .mat-form-field-infix{
            display: none;
          }
        }
      }
      p-calendar{
        margin-right: 28px;
      }
      .infinit{
        height: 26px;
        line-height: 26px;
        font-size: 30px;
        width: 51%;
        text-align: center;
        color: #777777;
        &.time{
          font-size:20px;
        }
      }
      &.single_mode{
        p-calendar,time-picker{
          width: 100%;
        }
      }
      &.leftOpen_mode,&.rightOpen_mode{
        p-calendar{
          width: 47%;
        }
      }
      span.dash{
        display: inline-block;
        //width: 6%;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .mat-icon-button{
        .mat-button-wrapper{
          .mat-icon{
            span.glyphicon-calendar{
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }
    .right{
      //width:35%;
      //float: right;
      margin-top: 15px;
    }
    ul.fast_picker{
      margin-bottom:0;
      padding-left:0;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      justify-content: space-around;
      & > li{
        background-color: $backgroundColor;
        list-style: none;
        display: block;
        width: 24%;
        height: 30px;
        color: white;
        vertical-align: middle;
        line-height: 30px;
        //margin-right: 1%;
        text-align: center;
        //float: left;
        -webkit-box-shadow: 3px 3px 6px 0 #666;
        -moz-box-shadow: 3px 3px 6px 0 #666;
        box-shadow: 3px 3px 6px 0 #666;
        &.active{
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
        }
        &:hover{
          cursor: pointer;
        }
        select{
          background: transparent;
          width: 100%;
          height: 100%;
          border:none;
          option{
            background: $backgroundColor;
          }
        }
      }
      &.smart_active{
        .smart_input{
          background: transparent;
          box-shadow: none;
          color: #444444;
          width: 74%;
          input{
            width: 100%;
          }
        }
        &.duration{
          margin-top:5px;
          li.smart_input{
            width: calc(100% - 22px);
            margin-right: 4px;
          }
          li.duration_buttons{
            &.glyphicon-remove{
              width: 52px;
              margin-right: 4px;
              margin-top: -1px;
            }
          }
          li:last-child{
            width: 52px;
            background-image: url("../../../assets/img/range_clock_white.png");
            background-repeat: no-repeat;
            background-size: 20px;
            background-position: center;
          }
        }
      }
      .form-group{
        float: left;
        width: 100%;
      }
    }
    ul.interval{
      padding-left:0;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      justify-content: space-around;
      & > li{
        list-style: none;
        display: block;
        width: 24%;
        height: 60px;
        color: white;
        vertical-align: bottom;
        line-height: 86px;
        //margin-right: 1%;
        text-align: center;
        //float: left;
        -webkit-box-shadow: 3px 3px 6px 0 #666;
        -moz-box-shadow: 3px 3px 6px 0 #666;
        box-shadow: 3px 3px 6px 0 #666;
        &.active{
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
        }
        &:hover{
          cursor: pointer;
        }
      }
      .range{
        background-image: url(../../../assets/img/close.png);
        background-repeat:no-repeat;
        background-position: center 20px;
        background-color: $backgroundColor;
      }
      .single{
        background-image: url(../../../assets/img/single.png);
        display: block;
        background-repeat:no-repeat;
        background-position: center 20px;
        background-color: $backgroundColor;
      }
      .leftOpen{
        background-image: url(../../../assets/img/leftOpen.png);
        display: block;
        background-repeat:no-repeat;
        background-position: center 20px;
        background-color: $backgroundColor;
      }
      .rightOpen{
        background-image: url(../../../assets/img/rightOpen.png);
        display: block;
        background-repeat:no-repeat;
        background-position: center 20px;
        background-color: $backgroundColor;
      }
    }
    button{
      background: $backgroundColor;
      color: white;
      border: 0;
      width: 24%;
      float: right;
      &.clear{
        margin-right:4px;
      }
    }
  }
  .close{
    position: absolute;
    z-index: 999999;
    right: 7px;
    top: 7px;
    font-size: 16px;
  }

}
.clear_picker{
  display: none;
  width: 20px;
  line-height: 26px;
  text-align: center;
  color: rgba(95, 95, 95, 0.6);
  height: 27px;
  margin-right: 1px;
  top: 0;
  margin-left: 1px;
  position: absolute;
  right: 27px;
  &:hover{
    cursor: pointer;
    color: rgba(55, 55, 55, 0.62);
  }
}
ul.j4care_select{
  position: relative;
  z-index: 2;
  padding:0;
  height: 30px;
  -webkit-box-shadow: 3px 3px 6px 0 #666;
  -moz-box-shadow: 3px 3px 6px 0 #666;
  box-shadow: 3px 3px 6px 0 #666;
  li{
    list-style: none;
  }
  li:not(.placeholder){
    border-top: 1px solid white;
    background: rgb(56, 83, 103);
    -webkit-box-shadow: 3px 3px 6px 0 rgba(43, 43, 43, 0.58);
    -moz-box-shadow: 3px 3px 6px 0 rgba(43, 43, 43, 0.58);
    box-shadow: 3px 3px 6px 0 rgba(43, 43, 43, 0.58);
    width: 130%;
    &:hover{
      background: rgb(48, 91, 123);
    }
  }
}
.single_date_mode .mat-form-field-wrapper .mat-form-field-infix{
  display: none !important;
}
