imgviewer
{
    display: none;
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgb(0,0,0);
    z-index:999999999999;
    transition: opacity 0.5 ease;
}

imgviewer ui
{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 1;
}

imgviewer imgGallery
{
  display:block;
  height:80px;
  width:100%;
  overflow-y:hidden;
  overflow-x:auto;
  white-space: nowrap;

  background: rgba(75,75,75,0.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

imgviewer imgGallery img{
  height:60px;
  width:60px;
  object-fit: cover;
  margin:10px;
  
}


imgviewer .quit{
    display: block;
    position: absolute;
    right:0;
    top:0;
    padding:27px;
    width:75px;
    height:75px;
    box-sizing: border-box;
    filter:brightness(1);
    z-index:99;
    transition: filter ease 0.3s;
}

imgviewer .quit:hover{
    filter:brightness(0.7);
    transition: filter ease 0.3s;
}

imgviewer .quit:active{
    filter:brightness(0.3);
    transition: filter ease 0.2s;
}

imgviewer .main{
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity ease 0.3s;
}



imgviewer img.spinner
{
    display: block;
    position: absolute;
    top:calc(40% + 35px);
    left:calc(50% - 35px);
    width:70px;
    height:70px;
    object-fit: contain;
    opacity: 1;

    animation-name: loading_spinner;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: loading_spinner;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


imgviewer img.error{
    display: none;
    position: absolute;
    top:calc(40% + 35px);
    left:calc(50% - 35px);
    width:70px;
    height:70px;
    object-fit: contain;
    opacity: 1;
}

@keyframes loading_spinner
{
  0%{
    transform: rotate(0);
  }
  100%
  {
    transform: rotate(360deg);
  }
}


@-webkit-keyframes loading_spinner
{
  0%{
    transform: rotate(0);
  }
  100%
  {
    transform: rotate(360deg);
  }
}