.pi-dtt-date-time-location-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    position: relative;
    margin-top:50px;
}

.pi-dtt-section-title{
    grid-column: span 2;
    
}

.pi-dtt-type-picker-container {
    grid-column: span 2;
}

.pi-dtt-location-container{
    grid-column: span 2;
}

@media(max-width: 768px){
    .pi-dtt-date-container, .pi-dtt-time-container{
        grid-column: span 2;
    }
}

/* Pickup location */
#pickup_location{
    display:flex;
    flex-wrap:wrap;
}

.pisol-pickup-add {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.pisol-pickup-add input {
    display: none !important;
}

.pisol-location-radio:checked + label {
    background: rgba(0, 119, 255, 0.63);
    color: #fff;
}

.pisol-location {
    padding: 10px;
    background: #ccc;
    border-radius: 10px;
    width: 100% !important;
    cursor: pointer;
    display: block !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
}

.pi_location_left{
    margin-right:10px;
}

.pi-required-field{
    color:red;
    font-size:12px;
}
  
/* end */

/* processing */

body.pi-dtt-processing button.wc-block-components-checkout-place-order-button{
    pointer-events: none;
    opacity:0.5;
}

body.pi-dtt-processing .wc-block-checkout__payment-method .wc-block-components-checkout-step__container{
    pointer-events: none;
    opacity:0.5;
}

body.pi-dtt-processing .wp-block-woocommerce-checkout-order-summary-block{
    pointer-events: none;
    opacity:0.4;
}

body.pi-dtt-processing .pi-dtt-date-time-location-container{
    pointer-events: none;
    opacity:0.5;
}

body.pi-dtt-processing .pi-dtt-date-time-location-container:after{
    animation: spinner__animation 1s linear infinite;
    backface-visibility: hidden;
    border: .2em solid;
    border-left: .2em solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    content: " ";
    height: 1em;
    left: 50%;
    margin: -.5em 0 0 -.5em;
    position: absolute;
    top: 50%;
    transform: translateZ(0) scale(.5);
    transform-origin: 50% 50%;
    width: 1em
}
/* end */

/* Type */
.pi-dtt-type-container{
    display:flex;
}

.pi-dtt-type-label-container input{
    display:none;
}

.pi-dtt-type-label-container label{
    background: rgba(204,204,204);
    color: #000;
    width:100%;
    display:block;
}

.pi-dtt-type-label-container input:checked + label{
    background: rgba(0,0,0);
    color: #fff;
}

.pi-dtt-type-label-container input:disabled + label{
    opacity:0.4;
    cursor:default !important;
}

.pi-dtt-type-label-container input:not(:checked) + label{
    cursor:pointer;
}

.pi-dtt-type-container .pi-dtt-type-label-container{
    flex: 1;
}

.pi-delivery-type-label{
    padding:10px;
    text-align:center;
}

.pi-dtt-type-label-container:first-child label{
    border-radius: 10px 0 0 10px;
}

.pi-dtt-type-label-container:last-child label{
    border-radius: 0 10px 10px 0;
}

.pi-dtt-type-label-container:only-child label {
    border-radius: 10px; /* Fully rounded corners */
}

/* end */

/* Date and time */
.pi-dtt-date-picker-container, .pi-dtt-time-picker-container{
    flex:1;
}

.pi-dtt-form-field{
    width:100%;
    padding:10px;
    box-sizing: border-box;
}

.pi-dtt-date-picker-wrapper{
    position:relative;
}

#pi_clear_delivery_date{
    display:block !important;
    width:20px;
    height:20px;
    background:none !important;
    padding:0 !important;
    color:#000 !important;
    position:absolute;
    right:10px;
    top:calc(50% - 10px);
    border:none;
}

/** Extra message */
.pisol-date-time-approx-message{
    grid-column: span 2;
    padding:10px;
    margin-top:20px;
    margin-bottom:20px;
    border:1px solid #ccc;
    border-radius:6px;
    text-align:center;
}

.pi-dtt-no-location{
    padding:10px;
    margin-top:20px;
    margin-bottom:20px;
    border:1px solid #ccc;
    border-radius:6px;
    text-align:center;
    background:#f00;
    color:#fff;
}