:root{
  /* imgvisu */

  /*--imgvisuBlack: #10181FFF;*/
  --imgvisuBlack: #000;
  --imgvisu-width: 100px;
}

body {
}

.imgvisu-wrapper{
  margin:0 ! important;
}

#imgvisu-main {
  margin:0 ! important;
  outline:var(--out);
  background-color:var(--imgvisuBlack);
  overflow:hidden;
  width:auto;
  height: calc( 100vh - var(--common-header-height)*2  );
  width: 100%;
  top:calc( 73px);
  user-select: none;
}
#imgvisu-main,
#imgvisu-main * {
  box-sizing:border-box;
}

#imgvisu-col-wrapper {
  display:inline-flex;
  transform-origin: center;
}

.imgvisu-col {
  flex-shrink: 0;
  display: flex;
  vertical-align:bottom;
  flex-direction: column-reverse;
  /* Script this */
  margin:calc(var(--imgvisu-width) / 2);
}

.imgvisu-col-content {
  display: flex;
  flex-wrap: wrap;
}

.imgvisu-item {
  display:block;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--imgvisu-width);
  height:var(--imgvisu-width);
  cursor:pointer;
}

.imgvisu-item.far:hover {
  background-color:var(--white) !important;
}

.imgvisu-item img {
  width:calc(var(--imgvisu-width) * 0.9);
  height:calc(var(--imgvisu-width) * 0.9);
  object-fit:contain;
  /*transition:opacity 0.5s;*/
}
.imgvisu-item .no-img {
  background-color:var(--site_color);
  width:calc(var(--imgvisu-width) * 0.8);
  height:calc(var(--imgvisu-width) * 0.6);
}

.imgvisu-item:not(:has(.no-img)):hover {
  background-color:var(--white) !important;
}

.imgvisu-item:has(.no-img):hover .no-img {
  background-color:var(--white) !important;
}

.imgvisu-col-label {
  display:inline-block;
  width:max-content;
  color:var(--white);
  transform-origin:top left;
  font: var(--asap-1);
}

/* Controls */

.imgVisuControlsWrapper {
  position : fixed;
  top : 0px;
  right: 0px;
  max-height:100vh;
  overflow-y:auto;
  background-color: #000B;
  color:#FFF;
  z-index:8;
}

.imgVisuControlsWrapper select {
  border:none;
  outline:solid 1px #fff4;
  background-color: #0000;
  color:#FFF;
}

.imgVisuControlsWrapper option {
  background-color: #000A;
  color:#FFF;
}

/* item preview */

.itemName {
  margin-top:calc(var(--spacing) * .5);
  display:none;
  padding-bottom:calc(var(--spacing) * .5);
  margin-bottom:calc(var(--spacing) * 1);
  border-bottom: solid 2px var(--bleu);
}

.itemLink {
  color:#fff;
  outline:solid 1px #fff;
  border-radius:200px;
  text-decoration:none;
  display:none;
}
.itemLink:hover {
  background-color:#fff;
  cursor:pointer;
  color:#000;
}

.itemImg {
  margin-top:calc(var(--s2) * 1);
  display:block;
  width:100%;
  max-height:400px;
  object-fit: contain;
  display:none;
  padding-bottom:calc(var(--spacing) * 1);
  margin-bottom:calc(var(--spacing) * 1 - 2px);
  border-bottom: solid 2px var(--bleu);
}

.labelInfo {
  transition:opacity 0.5s;
}

/* Imgvisu message */

.imgvisuMessageWrapper {
  position:fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #000A;
  z-index:7;
}

.imgvisuMessageContent {
  background-color: #fff;
  width: 640px;
  max-width: 100%;
  padding:1rem;
  margin:1rem;
  border: var(--out);
}

footer {
  position: fixed;
  width:100%;
  bottom: 0;
  z-index: 8;
  background-color: #fff;
}

.closeMessage {
  display: inline-block;
  border-radius:200px;
  outline: var(--out);
  padding: var(--s2);
  padding-left: calc(var(--s2) * 2);
  padding-right: calc(var(--s2) * 2);
  margin-top: calc(var(--s2) * 2);
}

.closeMessage:hover {
  color: #fff;
  background-color: #000;
  cursor:pointer;
}

/*

EXEPTIONS

*/

footer {
  position:initial !important;
}

/*

 FROM ITEM BROWSE

*/

.browse-controls {
    margin-top: var(--spacing);
}

.label-value-container {
    display: flex;
    gap: var(--spacing);
    border-top: 2px solid;
    border-bottom: 2px solid;
    margin-top: -2px;
    padding: calc(.5 * var(--spacing)) 0px;
}
.label-value-container .label { width: 100px; }
.label-value-container .value { flex: 1; }

/* pagination */

.row-count {
    position: absolute;
    top: var(--spacing);
    right: var(--spacing);
    font-family: "asap_condensed";
    font-size: .9rem;
}
.pagination-buttons { display: flex; gap: calc(.5 * var(--spacing)); }
.pagination-buttons img { width: var(--picto-width); }
.next img {
    transform: scaleX(-1.0);
}
.pagination-buttons .inactive {
    opacity: .5;
}

/* sort selector */
select {
    background-color: transparent;
    border: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    font-weight: bold !important;
    width: 100%;
    color: var(--bleu);
}
button[type="submit"] {
    background: unset;
    cursor: pointer;
}

/* bulk export */
.exporter {
  background: none;
  font-weight:bold;
  border:solid 2px;
  display:inline-block;
  height:calc(var(--picto-width));
  line-height: calc(var(--picto-width) - 4px);
  padding-left:6px;
  padding-right:6px;
  border-radius: 8px;
  vertical-align:bottom;
  box-sizing:border-box;
  margin:0.125rem;
}

.exporter:hover {
  background-color:var(--bleu);
  color:var(--beige);
  border-color:var(--bleu);
  cursor: pointer;
}