.img-drop, .img-drop *{
    border:0;
    margin:0;
    padding:0;
    font-family: sans-serif;
}
.img-drop > *{
    background-color: white;
}
.img-drop .drop-area{
    border:1px solid black;
    padding:32px 5px;
    text-align: center;
    margin-bottom:1em;
}
.img-drop .drop-area h2{
    margin-bottom:1em;
    color:#555;
}
.img-drop .drop-area h3{
    color:#444;
}
.img-drop .drop-area input{
    width: auto;
}
.img-drop .preview-area{
    border:1px solid black;
    min-height: 150px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    place-content: center;
    gap:6px;
    padding:6px;
    
}
.img-drop .preview-area h4{
    text-align:center;
    margin:4em 0;
}
.img-drop .preview-area > div{
    position:relative;
    display: inline-block;
    height: min-content;
}
.img-drop .preview-area > div:hover{
    cursor: pointer;
}

.img-drop .preview-area canvas{
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.img-drop .preview-area > div.file{
    background-color: #0A2463;
    padding:49px 0 25px 0;
}
.img-drop .preview-area > div.file svg.file{
    width: 64px;
    fill:hsl(30, 10%, 70%);
}
.img-drop .preview-area > div.file .name{
    position:absolute;
    top:12px;
    width: calc(100% - 90px);
    padding:0 45px;
    text-align: center;
    color:white;
    font-size: 12px;
    font-weight: bolder;
}
.img-drop .preview-area .delete-img-preview{
    position:absolute;
    top:12px;
    right: 12px;
    display: inline-block;
    background-color: red;
    color:white;
    border-radius: 50%;
    font-weight: bolder;
    font-size:18px;
    padding:4px 7px 2px 7px;
    opacity:.4;
}
.img-drop .preview-area .delete-img-preview:hover{
    cursor:pointer;
    opacity:1;
}
.img-drop .preview-area .featured-img{
    position:absolute;
    top:0px;
    left:0px;
    opacity: 0
}
.img-drop .preview-area .featured-img svg{
    width: 48px;
}
.img-drop .preview-area .featured-img path:nth-child(1){
    fill:#fecd38;
}
.img-drop .preview-area .featured-img path:nth-child(2){
    opacity:.2;
    fill:#ffffff;
}
.img-drop .preview-area .featured-img path:nth-child(3){
    opacity:.2;
}
.img-drop .preview-area > div:hover .featured-img{
    opacity: .4;
}

.img-drop .preview-area > div.featured .featured-img{
   opacity: 1;
}
.img-drop .preview-area .size-info{
    position:absolute;
    bottom: 4px;
    right: 0;
    background-color: #000A;
    color:#eee;
    padding:4px 6px;
    font-size:12px;
    font-weight: bolder;
}
.img-drop .preview-area .size-info > *{
    display:inline-block;
    vertical-align: middle;
}
.img-drop .preview-area .size-info svg{
    fill: #eee;
    width: 16px;
}