.cwsGalleryImage {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}

.cwsGalleryImage img {
  opacity: 0;
  transition: opacity 1s;
}

.cwsGalleryImage img[ready="true"] {
  opacity: 1;
}

.cwsGalleryImages {
  font-size: 0;
}

.cwsGalleryHoverSettings {
  position: absolute;
  color: red;
  font-size: 10px;
  right: 0;
  display: none;
  cursor: pointer;
}

.cwsGalleryHoverSettings {
  position: absolute;
  color: Blue;
  font-size: 10px;
  left: 0;
  display: none;
  cursor: pointer;
}

.cwsGalleryImageDown {
  bottom: 0;
}

.cwsImageWrapper {
  position: relative;
  display: inline-block;
}

.cwsImageWrapper:hover .cwsGalleryHoverSettings {
  display: inline;
  background-color: #dddddddd;
  border-radius: 2px;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  position: absolute;
  width: 140px;
  height: 101px;
  z-index: 100;
  margin: 0 auto;
  transform: translate(0px, -70px);
}

.cwsGalleryHoverSettings::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #dddddddd;
  bottom: -20px;
  position: absolute;
  right: 60px;
}

.cwsSlideShow {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #000;
  z-index: 100;
}

.cswSlideShowImage {
  max-width: 80%;
  max-height: 80%;
  /* margin: 0 auto; */
  display: block;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

#cswSlideShowImage {
  opacity: 0;
  transition: opacity 1s;
}

#cswSlideShowImage[ready="true"] {
  opacity: 1;
}

#cwsSlideShowPrevious {
  position: fixed;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#cwSlideShowNext {
  position: fixed;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 20;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#cwCloseButton {
  width: 40px;
  display: inline-block;
  right: 40px;
  top: 40px;
  z-index: 30;
  position: fixed;
  background-color: #22222222;
  /* color: red; */
  cursor: pointer;
}

.close-x {
  stroke: #999;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 5;
  padding: 20px;
  transition: stroke 0.5s, stroke-linecap 1s;
}

#cwCloseButton:hover .close-x {
  stroke: #fff;
  stroke-linecap: square;
}

.cwsSettings.components-panel {
  border: 0px;
}

.imageDesriptionWrapperHover {
  position: absolute;
  bottom: 0;
  display: inline-block;
  left: 0;
  /* height: 20px; */
  width: 100%;
  /* background-color: #4c474791;
  color: #fff; */
  padding: 3px;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: Roboto;
  font-size: 10px;
}

.cwsGalleryImage:hover .imageDesriptionWrapperHover {
  opacity: 1;
}

.imageDimensionWrapperHover {
  display: inline;
  position: relative;
  z-index: 9;
  /* width: 30px; */
  /* height: 20px; */
  float: right;
}

.imageTitleWrapperHover {
  text-align: center;
  font-weight: bolder;
  font-size: 13px;
}

.imageSizeWrapperHover {
  display: inline;
}

*[disablecontecxtmenu='true'] {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}