/** Viewer Img
 * -------------------- */

.viewer-area{
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #555;
  border-radius: 2px;
}

.viewer-area:focus-within {
    outline: 4px solid var(--visorimg-outline-color, rgba(0,0,0,.6));
    outline-offset: 1px;
    border-radius: 3px;
}

.viewer-toolbar{
    position: absolute;
    z-index: 10;
    padding-top: 3px;
    padding-left: 3px;
}
.viewer-toolbar .btn-viewer{
    width: 32px;
    height: 32px;
    padding: 2px;
    background-color: var(--visorimg-btn-bgcolor, #fff);
    border: 1px solid var(--visorimg-btn-bordercolor, #999);
    border-radius: 3px;
    cursor: pointer;
}
.viewer-toolbar .btn-viewer svg{
    display: flex;
    width: 100%;
    height: 100%;
    fill: var(--visorimg-btn-svgfill, #333);
}

.viewer-content {
  width: 100%;
  height: auto;
  transition: transform .05s linear;
  transform-origin: 0 0;
}

.viewer-content img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100px;
}