/* petstores  module forms and table CSS */

#edit-submit-petstore,
#edit-button,
button[id ^='edit-button--'],
input[id ^='edit-button--'] {
  padding: .25rem .5rem;
  left: 230px;
  position: absolute;
  top: 30px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 400px) {
  #edit-submit-petstore,
    #edit-button,
    button[id ^='edit-button--'],
    input[id ^='edit-button--'] {
      top: 31px;
    }
  }

#page_note_ajax_form {
  position: relative;
}

#block-hsuspetstoresblock {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.paragraph.paragraph--type--petstore .col {
  padding: 0;
}

#block-hsuspetstoresblock a {
    word-wrap: break-word;
}

#pdata-submit,
input[id ^='pdata-submit--'] {
  margin: 1px;
  margin-bottom: 14px;
}

#edit-actions {
  clear: none !important;
}
#edit-search,
input[id ^='edit-search--'] {
  width: 220px !important;
  box-shadow: none;
  border: 1px solid black;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' transform='translate(0 0.00195312)' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M11.7422 10.3458C12.5329 9.26925 13 7.94015 13 6.50195C13 2.9121 10.0899 0.00195312 6.5 0.00195312C2.91015 0.00195312 0 2.9121 0 6.50195C0 10.0918 2.91015 13.002 6.5 13.002C7.93858 13.002 9.26801 12.5346 10.3448 11.7435L10.3439 11.7441C10.3734 11.7841 10.4062 11.8224 10.4424 11.8586L14.2929 15.7091C14.6834 16.0996 15.3166 16.0996 15.7071 15.7091C16.0976 15.3185 16.0976 14.6854 15.7071 14.2948L11.8566 10.4444C11.8204 10.4082 11.7822 10.3753 11.7422 10.3458ZM12 6.50195C12 9.53952 9.53757 12.002 6.5 12.002C3.46243 12.002 1 9.53952 1 6.50195C1 3.46439 3.46243 1.00195 6.5 1.00195C9.53757 1.00195 12 3.46439 12 6.50195Z' fill='black'/%3E%3C/svg%3E%0A");
  background-position: right 10px center;
  background-repeat: no-repeat;
}

#edit-match {
  margin-left: 420px;
  width: 200px;
}
.petstore-search-label {
  font-size: 18px;
  text-align: center;
  padding-left: 110px;
}

label[for=edit-match] {
  margin-left: 300px;
}
#edit-button,
#edit-newpetstore-link {
  width: auto !important;
  padding: .25rem .5rem;
  height: 2.5rem;
  background-color: #009ceb;
  font-weight: 700;
  font-size: 1.25rem !important;
  text-align: center !important;
  border-radius: 0.625rem !important;
}

#edit-newpetstore-link,
a[id ^='edit-newpetstore-link--'] {
  top: 30px;
  left: 320px;
  padding: .2rem .5rem !important;
  color: white;
  border-radius: .65rem;
  text-decoration: none;
  position: absolute;
  font-size: 1.25em;
  font-weight: 700;
  background: #009ceb;
}
.addnewlink {
  text-align: center;
  margin-top: -29px;
  margin-bottom: 20px;
}
#edit-add-link {
  box-shadow: inset 0 -0.125em #009ed0;
}

#isstate {
  clear: both;
  font-size: 20px;
  font-weight: 500px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: -21%;
  text-align: center;
}

@media only screen and (min-device-width: 400px) and (max-device-width:740px) {
  .petstore-search-label {
    font-size: 14px !important;
    padding-left: 15% !important;
  }

  #isstate {
    text-align: left;
    margin-left: 81px;
  }
}

/* responsive  petstore table data */
@media
(max-width: 1028px) {
  .petstore-search-label {
    padding-left: 12%;
    font-size: 15px;
    width: 94%;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    /* margin-top: 20px; */
    border: none;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    border: 1px solid #ccc;
}
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
    min-height: 40px;
  }
  td:before {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before {
    content: "Store name";
}
  td:nth-of-type(2):before {
    content: "Address";
}
  td:nth-of-type(3):before {
    content: "City";
}
  td:nth-of-type(4):before {
    content: "State";
}
  td:nth-of-type(5):before {
    content: "Zip";
}
  td:nth-of-type(6):before {
    content: "Phone";
}
  td:nth-of-type(7):before {
    content: "Website";
}
}