.status { display:none; width:100%; padding: 7px 20px; text-align: center; text-transform: uppercase }
.status.fail { border:1px solid crimson; color: crimson; background-color: lightpink; }
.status.success { border:1px solid limegreen; color: limegreen; background-color: azure; }

.preselection { border-radius: 5px; background-color: #f0f0f0; }
.preselection ul { max-height: 250px; overflow: auto; padding:25px; list-style-type: none }
.preselection ul li { padding: 7px; color: #2d2d2d }
.preselection ul li:hover { border-radius: 3px; background-color: #2d2d2d; color: #f0f0f0 }
.preselection .close { float:right; padding: 10px; font-weight: 700; cursor: default }

#displayarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
}
.slot, .imager, .deleter { width:250px; height:150px; }
.slot { position:relative; }
.imager, .deleter { position:absolute; top:0; left:0; }
.imager { background-size: cover; }
.deleter { text-align: center; background-color: rgba(255,255,255,.5); font-size:6em; font-weight: 700; color: black; }
.slot .deleter { display:none }
.slot:hover .deleter { display:block }