/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 #pi_checkout_field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
  }
  
  .pi_delivery_type {
    grid-column: span 2;
  }
  
  .pi_delivery_type input[type="radio"] {
    visibility: hidden;
    display: none !important;
  }
  
  .pi_delivery_type .woocommerce-input-wrapper {
    display: flex;
  }
  
  .pi_delivery_type .woocommerce-input-wrapper label {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    margin-left:0;
    margin-right:0;
  }
  
  .pi_delivery_type .woocommerce-input-wrapper label {
    border-radius: 5px 0 0 5px;
  }
  
  .pi_delivery_type .woocommerce-input-wrapper label:last-child {
    border-radius: 0px 5px 5px 0px;
  }
  
  .pi_delivery_type .input-radio:checked + label {
    font-weight: bold;
    color: #fff;
  }
  
  .pisol-pickup-add input {
    display: none !important;
  }
  
  .pisol-pickup-add {
    width: 50%;
    padding: 10px;
  }
  
  .pisol-location {
    padding: 10px;
    background: #ccc;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
    display: block;
  }
  
  .pi_delivery_type.pi_rounded .woocommerce-input-wrapper label {
    border-radius: 5px 5px 5px 5px;
  }
  
  .pisol-location-radio:checked + label {
    background: rgba(0, 119, 255, 0.63);
    color: #fff;
  }
  
  .woocommerce-input-wrapper-new {
    width: 100%;
  }
  
  #pi_delivery_date_field{
    position: relative;
  }
  .pisol_clear_button{
    position: absolute;
    width: 10px;
    height: 10px;
    display: block;
    line-height: 10px;
    right: 20px;
    cursor:pointer;
  }
  
  /* date time approx message */
  .pisol-date-time-approx-message{
    padding:10px;
    margin-top:20px;
    margin-bottom:20px;
    border:1px solid #ccc;
    border-radius:6px;
    text-align:center;
    font-weight:bold;
  }
  
  /*
  time picker was hidden in many themes, so this fixes that issue
  Time picker hidden issue
  */
  .ui-timepicker-standard, #ui-datepicker-div{
  z-index:100000 !important;
  }
  /* End Time picker hidden issue */
  
  #pi_delivery_time_field .select2{
    width:100% !important;
  }
  
  .pi-pickup-location-dropdown-container{
    width:100%;
    padding:5px 0px;
  }
  
  .pi-pickup-location-dropdown-container select{
    width:100%;
    padding:5px;
  }

  .pi_location_row{
    display:flex;
    align-items: center;
  }

  .pi_location_left{
    width:20%;
    margin-right:10px;
  }

  #pi_delivery_type_field .woocommerce-input-wrapper .woocommerce-radio-wrapper{
    display:flex;
    width:100%;
  }

  @media (max-width:768px){
    #pi_checkout_field{
      display:block;
    }
  
    .pisol-pickup-add{
      width: 100%;
    }
  }