#ph_custom_field_result {
width: 350px;
display: flex;
flex-wrap: wrap; }
.thumbnail-item {
width: 24%; padding: 3px; box-sizing: border-box; }
.thumbnail-item img {
width: 100%; height: auto; margin: 0 !important;
}
.thumbnail-item.selected {
border: 2px solid #0073aa; border-radius: 5px;
}
.thumbnail-item .quantity-overlay {
font-size: 12px;
line-height: 1.5;
text-align: center;
width: auto;
}
.thumbnail-item .overlay {
transform: translate(0%, -200%); display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5); color: white;
font-size: 20px;
font-weight: bold;
z-index: 10;
margin-bottom: -35px;
}
.thumbnail-item img {
transition: filter 0.5s ease; }
#ph_custom_field_search{
margin: 5px;
background-color: var(--wp--preset--color--contrast);
border-radius: .33rem;
border-color: var(--wp--preset--color--contrast);
border-width: 0;
color: var(--wp--preset--color--base);
font-family: inherit;
font-size: var(--wp--preset--font-size--small);
font-style: normal;
font-weight: 500;
line-height: inherit;
padding-top: 0.6rem;
padding-right: 1rem;
padding-bottom: 0.6rem;
padding-left: 1rem;
text-decoration: none;
}
.lds-ellipsis,
.lds-ellipsis div {
box-sizing: border-box;
}
.lds-ellipsis {
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33.33333px;
width: 13.33333px;
height: 13.33333px;
border-radius: 50%;
background: currentColor;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}