.xGallery {
  background-color: black;
  max-width: 100%;
  padding: 10px;
  border-radius: 7px; /* Same value as @border-radius-base from Flamingo. */
  /* Position relative is required because some of the inner elements have position absolute and the gallery container
  must be their offset parent. */
  position: relative;
  text-align: center;
  white-space: nowrap;
  /* Those width/height values can be overridden by the inline styling added with the macro parameters */
  width: 620px;
  height: 349px;
  display: grid;
  grid-template-columns: 1fr 10fr 1fr;
  grid-template-rows: 1fr 10fr 1fr;
}

.xGallery.maximized {
  height: 100% !important;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100% !important;
  border-radius: 0;
}

.xGallery .currentImage {
  grid-area: 2 / 2 / 3 / 3;
  align-self: center;
  justify-self: center;
  object-fit: scale-down;
  max-width: 100%;
  max-height: 100%;
  /* Weirdly needed so that the image would behave as expected in the grid layout in chromiums... */
  min-height: 0;
}

/* Transparent buttons that should fill the space they've been given on the grid */
.xGallery .previous, .xGallery .next,
.xGallery .maximize, .xGallery .minimize {
  background-color: transparent;
  border-color: transparent;
  width: 100%;
  height: 100%;
}

.xGallery .previous, .xGallery .next {
  color: #A0A0A0;
  font-family: courier,monospace;
  font-size: 32px;
  font-weight: 100;
  text-align: center;
}

.xGallery .previous:hover, .xGallery .next:hover {
  color: white;
}

.xGallery .previous {
  grid-area: 2 / 1 / 3 / 2;
}

.xGallery .next {
  grid-area: 2 / 3 / 3 / 4;
}

.xGallery .index {
  color: #C0C0C0;
  font-family: sans-serif;
  font-size: smaller;
  line-height: 1;
  grid-area: 3 / 1 / 4 / 2;
  align-self: end;
}

.xGallery .loading {
  background-image: url('loading.gif') !important;
}

.xGallery .maximize, .xGallery .minimize {
  height: 16px;
  opacity: .5;
  width: 16px;
  grid-area: 1 / 3 / 2 / 4;
  justify-self: end;
}

.xGallery .maximize:hover, .xGallery .minimize:hover {
  opacity: 1;
}

/* Elements on the left of the grid are left aligned */
.xGallery .index, .xGallery .previous {
  text-align: start;
}

/* Elements on the right of the grid are right aligned */
.xGallery .maximize, .xGallery .minimize, .xGallery .next {
  text-align: end;
}

.xGallery .maximize {
  background: transparent url('maximize.gif') no-repeat scroll center;
}

.xGallery .minimize {
  background: transparent url('minimize.gif') no-repeat scroll center;
}

html.maximized, html.maximized body {
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}