/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 21, 2020, 11:26:46 PM
    Author     : Jeff
*/

#slideShow {
  display: none;
  position: fixed;
  background: #333;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;    
}

.slideShowWrapper {
  position: absolute;
  height: 100%;
  width: 100%;
}

.slideshow-title {
  display: inline-flex;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding: 1rem;
}

.slideShowWrapper .title {
  color: #ddd;
  font-size: 2rem;      
}

.slideshow-controls {
  display: inline-flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;    
}

.slideshow-btn {
  display: block;
  font-size: 2rem !important;    
  color: #ddd;
  padding: 1rem;
}

.slideshow-btn:hover {
  box-shadow: 0 0 .1rem #ddd !important;
}

.slideshow-btn i:hover {    
  color: #fff !important;        
}

.viewportWrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 4rem;
}

.imgViewport {
  margin: 0 auto;
  height: 100%;
  width: auto;    
}

.file-caption .file-caption-name {
  margin-left: 2rem !important;    
}

#FileManager {
  width: 90rem;

  height: 50rem;
}

#kvFileinputModal {
  z-index: 12000;
}

.fileman-browser {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;    

}

.fileman-preview {
  position: relative;  
  display: inline-flex;    
  margin: .2rem;
  box-shadow: 0 0 .1rem #aaa;
}

.fileman-preview.browser {
  width: auto;
  display: block;
}

#Images-viewer {
  position: relative;
  height: 99%;
}

#Images-viewer .fileman-preview.browser {
  height: 100%;
}

#Images-viewer img {
  height: 100%;
}

.fileman-wrapper {
  top: 0;
  padding: 0;
  height: 100%;
  /*! width: 100%; */
  text-align: center;  
}

.fileman-preview a {
  height: 2rem;
}

.fileman-image {
  height: 14rem;
  width: auto;
  vertical-align: middle;
  display: block;
  margin: auto;
}

.fileman-header {
  position: absolute;  
  height: 2rem;
  top: 0;
  right: 0;
  left: 0;    
  padding: 0;
  opacity: .6;
  z-index: 1;
}

.fileman-title {
  color: #789;
  background: #fff;
  text-align: center;
  font-weight: bold;
  width: 100%;
}


.fileman-control {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 12;  
  background: #fff;
}

.fileman-control .btn {
  background: #fff;
  color: #666;  
}

.fileman-control .btn:hover,
.fileman-select .btn:hover {
  color: #00AEEF;  
}

.fileman-select {
  position: absolute;
  z-index: 210;
  bottom: 2rem;
  right: 0;
  margin: .5rem;
  opacity: .2;
}



.fileman-preview:hover .fileman-control,
.slideShowWrapper:hover .fileman-control {
  display: block;      
}

.fileman-preview:hover .fileman-header,
.slideShowWrapper:hover .fileman-header {
  opacity: 1; 
}

.fileman-preview:hover .fileman-select {
  opacity: 1;
  background: #fff;
}

.fileman-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  z-index: 1;
}

.fileman-nav .btn {
  position: absolute;
  background: none;
  color: #555;
  font-size: 3rem;
  z-index: 1000;
  padding: 4rem;  
}

.fileman-nav .btn:hover {
  color: #56C0E8;  
  box-shadow: 0 0 .5rem #294440;
  background: #48484880;
}

.fileman-nav .btn[data-action=zoomin] {
  left: 0;
  top: 3rem;
}

.fileman-nav .btn[data-action=zoomout] {
  left: 12rem;
  top: 3rem;
}

.fileman-nav .btn[data-action=prev] {
  left: 0;
  top: 45%;
}

.fileman-nav .btn[data-action=next] {
  right: 0;
  top: 45%;
}

.fileman-nav .btn[data-action=close] {
  right: 0;
  top: 3rem;
}

.slideShowWrapper .fileman-wrapper {
  overflow: auto !important;
  position: relative;  
}

.slideShowWrapper .fileman-image {
  position: relative;  
  overflow: auto;
  height: 100%;
  width: auto;
}

.slideShowWrapper .fileman-select {
  padding: 4rem 1.5rem;
}

.fileman-select:hover {
  opacity: 1;
}

.slideShowWrapper .fileman-control,
.slideShowWrapper .fileman-header > * {
  background: #222;
  height: 3rem;  
  font-size: 1.5rem;
}

.fileman-preview.selected {
  box-shadow: 0 0 1rem #2e7b99;
}

.fileman-preview.selected .fileman-select {
  opacity: 1;
}