/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-Nov-2021, 11:01:47 AM
    Author     : mtoromani
*/

.cutom_autocomplete {
  position: relative;
  display: inline-block;
}

#edit-field-membership-address-informa-0-address .cutom_autocomplete,
#edit-field-donor-address-0-address .cutom_autocomplete {
  float: left;
}
#edit-payment-information-billing-information-address-0-address .cutom_autocomplete {
  float: left;
  width: 100%!important;
}
@media screen and (min-width:416px) and (max-width:915px) {
  #edit-field-membership-address-informa-0-address .cutom_autocomplete,
  #edit-field-membership-address-informa-0-address .cutom_autocomplete {
    float: left;
    width: 100%;
    margin-right: 0;
    }
}
@media screen and (min-width:1024px) and (max-width:1180px) {
  #edit-field-membership-address-informa-0-address .cutom_autocomplete {
      float: left;
      width: 100%;
      margin-right: 0;
  }
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  overflow: auto;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}


.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}


input.cutom_autocomplete {
  background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise.svg);
  background-repeat: no-repeat;
  background-position: 100% center; 
  background-size: 24px 24px;
  
}


input.cutom_autocomplete.cutom_autocomplete-loading {
  animation: changeicon .35s infinite;
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
 
 

}
@keyframes changeicon{
   0%,100%  {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise1.svg);}
   25% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise2.svg);}
   50% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise3.svg);}
   75% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise4.svg);}
   
}
/*order information form */
#edit-join-checkout-flow-membership-options,
#edit-join-checkout-flow-additional-details,
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-given-name,
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-family-name {
    float: left;
    width: 48%;
}
#edit-join-checkout-flow-membership-options,
#donor_form_template .field--name-field-donor-first-name,
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-given-name {
    margin-right: 4%;
}
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-family-name,
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-postal-code {
  margin-right: 0;
}

@media screen and (max-width:416px) {
  #edit-join-checkout-flow-membership-options,
  #edit-join-checkout-flow-additional-details {
    float: left;
    width: 100%;
  }
  #edit-join-checkout-flow-membership-options {
    margin-right: 0;
  }
}
@media screen and (min-width:416px) and (max-width:915px) {
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-locality,
#edit-payment-information-billing-information .form-item-payment-information-billing-information-address-0-address-administrative-area {
 width: 30%;
}
  #edit-join-checkout-flow-membership-options,
  #edit-join-checkout-flow-additional-details {
    float: left;
    width: 100%;
    margin-bottom: 15px;
  }
  #edit-join-checkout-flow-membership-options {
    margin-right: 0;
  }
}

/* end of order info*/
/* order summary */
#commerce-checkout-flow-join-checkout-flow .layout-region-checkout-secondary {
  border: 1px solid #ddd;
  border-radius: 4px;
}
#commerce-checkout-flow-join-checkout-flow .layout-region-checkout-secondary  h3 {
  background-color: #f5f5f5;
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
#checkout-order-summary-custom {
  padding: 10px;
}
#checkout-order-summary-custom .order-item-custom .item-info-custom {
float: left;
width: 85%;
}
#checkout-order-summary-custom .order-item-custom .item-price-custom {
float: left;
width: 15%;
}
#checkout-order-summary-custom .order-totals-custom {
  border-top: 1px solid #ddd;
  float: left;
  width: 100%;
  padding-top: 10px;
}
#checkout-order-summary-custom .order-total-line__subtotal,
#checkout-order-summary-custom .order-total-line__total {
  float: left;
  width: 100%;
}
#checkout-order-summary-custom .order-total-line__total {
  margin-bottom: 15px;
}
@media screen and (max-width:416px) {
  #commerce-checkout-flow-join-checkout-flow .layout-region-checkout-secondary {
    float: left;
    width: 100%;
    margin-bottom: 15px;
  }
}
@media screen and (min-width:416px) {
    #edit-field-membership-address-informa-0-address .form-item-field-membership-address-informa-0-address-address-line1 {
      width: 48%;
      margin-bottom: 1em;/*Bootstrap 5 apdate change Dec 30, 2022*/
    }
    #edit-field-membership-address-informa-0-address .form-item-field-membership-address-informa-0-address-address-line1 .address-line1 {
     width: 100%;
    }
}
/* end of order summary */