.depot-postcode-lookup__dialog{
position: fixed;
top: var(--wp-admin--admin-bar--height, 0);
right: 0px;
bottom: 0px;
z-index: 1001;
min-width: 30%;
background-color: #fff;
transition: all 400ms ease-in-out;
transform: translate3d(100%, 0px, 0px);
font-size: 14px;
}
.depot-postcode-lookup.is-open .depot-postcode-lookup__dialog {
transform: translate3d(0px, 0px, 0px);
}
button.depot-postcode-lookup__close {
position: absolute;
top: 50%;
right: 0px;
background: none;
border: none;
font-size: 32px;
cursor: pointer;
transform: translateY(-50%);
line-height: 1;
padding: 20px 32px;
color: #415465;
}
.depot-postcode-lookup .depot-postcode-lookup__overlay {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0);
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: all 400ms ease-in-out;
pointer-events: none;
}
.depot-postcode-lookup.is-open .depot-postcode-lookup__overlay {
opacity: 1;
pointer-events: auto;
}
div#depot-postcode-lookup-1 {
height: 100%;
}
.depot-postcode-lookup__list {
list-style: none;
padding: 0;
margin: 0;
}
.depot-postcode-lookup__list li {
padding: 12px 24px;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 12px;
background-color: #fff;
font-size: 14px;
} .depot-postcode-lookup__item .depot-postcode-lookup__name {
font-size: 18px;
margin: 0;
color: #415465;
}
.depot-postcode-lookup__address {
margin-bottom:8px;
color: #415465;
opacity: 0.8;
font-style: normal;
}
.depot-postcode-lookup__time-directions {
display: flex;
justify-content: space-between;
margin: 12px 0px;
align-items: flex-end;
}
.depot-postcode-lookup__today-hours, .depot-postcode-lookup__telephone {
opacity: 0.8;
color: #415479;
font-weight: 600;
}
.depot-postcode-lookup__distance.tag {
padding: 4px 8px;
background: #cff0ff;
width: fit-content;
border-radius: 4px;
font-weight: 600;
color: #598297;
}
.depot-postcode-lookup__list-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.depot-postcode-lookup__body {
padding: 12px 16px;
background: #f3faff;
overflow-y: auto;
height: calc(100% - 161px);
}
.depot-postcode-lookup__contact a {
display: block;
padding: 8px 24px;
border-radius: 4px;
flex: calc(50% - 12px);
text-align: center;
background: #415465d1;
color: #fff;
font-weight: 500;
}
a.email {
background: none;
color: #415465;
border: thin solid #415465;
opacity: 0.8;
}
.depot-postcode-lookup__contact a:hover {
background: #415465;
color: #fff;
opacity: 1;
}
.depot-postcode-lookup i{
margin-right: 4px;
}
.depot-postcode-lookup__header-title {
padding: 12px 20px;
position: relative;
}
.depot-postcode-lookup__title {
font-size:18px;
color: #415465;
}
.depot-postcode-lookup__subtitle {
font-size: 14px;
color: #415465;
opacity: 0.8;
margin-top: 4px;
}
.depot-postcode-lookup__form {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
padding: 20px;
border-top: thin solid #e5e5e5;
border-bottom: thin solid #e5e5e5;
background: #f3faff;
}
.depot-postcode-lookup__input-wrapper {
position: relative;
flex: 100%;
background: #fff;
}
.depot-postcode-lookup__input-wrapper i {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 18px;
color: #787878;
}
.depot-postcode-lookup input.depot-postcode-lookup__input,
.depot-postcode-lookup input.depot-postcode-lookup__input::placeholder {
color: #787878 !important;
font-weight: 400;
}
input:-webkit-autofill,
input:autofill {
-webkit-background-clip: text !important;
background-clip: text !important;
color: #787878 !important;
-webkit-text-fill-color: #787878 !important;
}
.depot-postcode-lookup input.depot-postcode-lookup__input {
flex: 1;
padding: 12px 24px;
padding-left: 32px;
border: 1px solid #ccc;
border-radius: 5px !important;
width: 100%;
font-weight: 500;
background: #fff;
}
.depot-postcode-lookup__contact{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 12px;
margin: 8px 0;
}
.depot-postcode-lookup__item a.button {
padding: 12px 12px;
text-align: center;
font-weight: 500;
border: thin solid #2980b9;
border-radius: 4px;
background: none;
color: #2980b9;
width: 100%;
}
.depot-postcode-lookup__item a.button:hover {
background: #2980b9;
color: #fff;
}
.depot-postcode-lookup__button {
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
min-width: 150px;
font-size: 14px;
}
.depot-postcode-lookup__button:hover {
background-color: #005177;
}  
.depot-postcode-lookup__form label {
flex: 100%;
}
.depot-postcode-lookup__feedback {
padding: 4px 0px;
margin-bottom: 4px;
}
.footer-links {
display: flex;
justify-content: space-around;
align-items: center;
}
.footer-links a {
text-decoration: none;
color: #616161;
}
.depot-postcode-lookup__trigger i{
margin-right: 4px;
}
a.depot-postcode-lookup__trigger {
display: block;
padding: 12px 8px;
text-align: center;
font-weight: 600;
width: 100%;
border-top: thin solid #e1e1e1;
color: #415465;
margin-top: 4px;
}
button.depot-postcode-lookup__trigger {
display: block;
background: #657482;
padding: 12px 8px;
text-align: center;
font-weight: 600;
border-radius: 4px;
color: #fff;
opacity: 0.8;
width: 100%;
border: none;
}
button.depot-postcode-lookup__trigger:hover {
opacity: 1;
background: #2980b9;
}