﻿body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox { width: 90vw; min-width: 1000px; border-radius: 24px; outline: none; background: #fff; font-weight: normal; text-align: center; line-height: 0; position: absolute; left: 5vw !important; right: 5vw !important; z-index: 10000;}
.lightbox a img { border: none;}

.lb-outerContainer {
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}
.lb-outerContainer:after { content: ""; display: table; clear: both;}

.lb-loader { width: 100%; height: 25%; text-align: center; line-height: 0; position: absolute; top: 43%; left: 0;}
.lb-cancel { width: 32px; height: 32px; margin: 0 auto; display: block;}
.lb-nav { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
.lb-container > .nav { left: 0;}
.lb-nav a { outline: none;}

.lb-dataContainer {
  width: 100%;
  padding-top: 5px;
  margin: 0 auto;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  *zoom: 1;
}

.lb-dataContainer.top { padding: 0; margin: 0 auto 20px;}
.lb-data .lb-close { width: 60px; height: 60px; border-radius: 60px; background: #D8DCE0; position: absolute; top: 40px; right: 40px; opacity: 1; cursor: pointer; z-index: 99999;}
.lb-data .lb-close::before,
.lb-data .lb-close::after  { content: ''; width: 20px; height: 2px; position: absolute; top: calc(50% - 1px); left: calc(50% - 10px); background: #000;}
.lb-data .lb-close::before { transform: rotate(45deg);}
.lb-data .lb-close::after  { transform: rotate(-45deg);}

.lb-outerContainer .lb-container { width: 88vh; height: 88vh; margin: 0 auto;}
.lb-outerContainer .lb-container .lb-image { max-width: 88vh; max-height: 88vh; border-radius: 24px; width: auto; height: auto; border: 4px solid white; display: block;}

.lb-outerContainer .lb-nav a.lb-prev { width: 30vw; height: 100%; display: block; position: absolute; top: 0; left: 0; opacity: 1.0; cursor: pointer;}
.lb-outerContainer .lb-nav a.lb-next { width: 30vw; height: 100%; display: block; position: absolute; top: 0; right: 0; opacity: 1.0; cursor: pointer;}
.lb-outerContainer .lb-nav a.lb-prev::before { display: none;}
.lb-outerContainer .lb-nav a.lb-next::before { display: none;}
.lb-outerContainer .lb-nav a.lb-prev::after  { content: ''; width: 33px; height: 93px; background: url("../img/usr/icon/ico_goods_prev.png") center center no-repeat; position: absolute; left: 40px; bottom: calc(50% - 46.5px); display: block;}
.lb-outerContainer .lb-nav a.lb-next::after  { content: ''; width: 33px; height: 93px; background: url("../img/usr/icon/ico_goods_next.png") center center no-repeat; position: absolute; right: 40px; bottom: calc(50% - 46.5px); display: block;}

.lb-dataContainer.bottom { height: 20px;}
.lb-dataContainer.bottom .lb-data { width: auto !important; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; right: 0;}
.lb-dataContainer.bottom .lb-data .lb-details { width: 100%; float: none; text-align: center;}
.lb-dataContainer.bottom .lb-number { width: 70px; height: 32px; padding: 0; border-radius: 32px; font-size: 16px; line-height: 32px; color: #443F3D; background: #D8DCE0; display: inline-block; position: relative; top: -40px;}

.lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; display: none;}
.lb-data .lb-caption a { color: #4ae;}
