body {
  font: normal 1.2em Arial,sansserif;
  width: 90%;
  margin: 1em auto;
}

#itemBox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1em 0em;
}

.item {
    position: relative;
    width: 110px;
    height: 110px;
    border: 1px solid #999;
    touch-action: manipulation;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.delete {
    position: absolute;
    top: 0px;
    right: 0px;
    background: red;
    color: white;
    border: none;
    cursor: pointer;
}

.imgIdx {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2em;
    text-align: center;
    background: darkgray;
    color: white;
    border: none;
    cursor: default;
}

.fileLabel {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 98%; 
    text-align: center;
    background: darkgray;
    color: white;
    border: none;
    cursor: default;
}

.info { font-size: smaller; color: blue; background-color: LightGray; }
.warning { font-weight: bold; color: red; background-color: LightGray; }
.error { font-weight: bold; color: black; background-color: red; }
.borderRounded { border-radius: 0.3em; }   
.smaller { font-size: smaller; }

.options { 
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
.options .fs { 
    font-size: smaller; 
    color: DarkBlue; 
    background-color: LightGray; 
  }

@media all and (min-width: 40em) {
  .item {
    width: 170px;
    height: 170px;
  }
}
@media all and (min-width: 60em) {
  .item {
    width: 220px;
    height: 220px;
  }
}