/*
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
*/



.guideman-titlepage {
  position: absolute;
  z-index: 2;
  background: #111;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
}

#titlepage-area {
  position: relative;
  font-size: 10rem;
  vertical-align: middle;
  text-align: center;
  width: 60%;
  margin: auto;
  top: 10rem;
  color: #488;
  font-weight: bold;
}

.guide-status {
  display: none; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  z-index: 1000;
  opacity: .2;
}

.guide-pause {
  position: relative;
  z-index: 1000;
  width: 10rem;
  height: 10rem;
  left: 45%;
  top: 40%;  
}


.guide-pause i {
  font-size: 10rem;
  padding: 2rem;
  position: relative;
  background: #848;
  color: #fff;
  border: 1rem solid #d45;
  border-radius: 1rem 1rem 1rem 1rem;
  z-index: 10;
}

.btn.disabled {
  pointer-events: none;
}

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

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

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

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

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

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

.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;
}

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

}

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

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

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

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

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

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

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

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

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

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

.guideman-textbox {
  position: absolute;  
  height: 8rem;
  bottom: 0;
  right: 0;
  left: 0;    
  padding: 0;
  opacity: .7;
  z-index: 1;
  background: #234;
}

.guideman-textbox:hover {
  opacity: 1;
}

.guideman-text {
  position: relative;
  color: #f3a;  
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  width: 100%;
  height: 100%;
}


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

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

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

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



.guideman-preview:hover .guideman-control,
.guideWrapper:hover .guideman-control {
  display: block;      
}

.guideman-preview:hover .guideman-header,
.guideWrapper:hover .guideman-header {
  opacity: 1; 
}

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

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


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

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

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

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

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

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

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

.guideWrapper .guideman-wrapper {
  overflow: auto !important;
  position: relative;  
}

.guideWrapper .guideman-image {
  position: relative;  
  overflow: auto;
  height: 100%;
  width: auto;
}

.guideWrapper .guideman-select {
  padding: 4rem 1.5rem;
}

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

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

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

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