/* Icon */
@font-face {
  font-family: 'exif';
  src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTAAAAC8AAAAYGNtYXAXUNKTAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZmEQpYcAAAF4AAABBGhlYWQSEEtWAAACfAAAADZoaGVhB2wDxgAAArQAAAAkaG10eAoAAFYAAALYAAAAFGxvY2EAKACWAAAC7AAAAAxtYXhwAAoAQgAAAvgAAAAgbmFtZZlKCfsAAAMYAAABhnBvc3QAAwAAAAAEoAAAACAAAwMAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6Qb//f//AAH/4xb+AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAEAFYAAQOqA1UAAwAfADsAPwAAATUzFQMyNz4BNzY1NCcuAScmIyIHDgEHBhUUFx4BFxYTMhceARcWFRQHDgEHBiMiJy4BJyY1NDc+ATc2ExEzEQHWVCpGPz5dGxsbG10+PkdGPz5dGxsbG10+PkdYTk5zIiEhInNOTVlYTk5zIiEhInNOTS9UAitWVv4qGxtdPj5HRj4/XRsbGxtdPz5GRz4+XRsbAwAiIXRNTlhZTU50ISEhIXROTVlYTk10ISL9gAEA/wAAAAEAAAABAAC1WGwJXw889QALBAAAAAAA16QDggAAAADXpAOCAAAAAAOqA1UAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA6oAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAVgAAAAAACgAUAB4AggABAAAABQBAAAQAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Fixes for lightgallery */
.lg-outer{
	background-color: #1f1f21;
}
.lg-outer .lg-inner{
	display: flex;
	flex-direction: row-reverse;
}
.lg-outer .lg-inner .lg-item{
	width: calc(100vw - 120px);
	height: calc(100vh - 85px);
	inset: 0;
	margin: auto;
}
.lg-outer .lg-inner:has(.exif-visible) .lg-item{
	inset: initial;
	margin: initial;
    top: 40px;
	left: 60px;
	width: calc(100vw - 450px);
}
.lg {
    width: auto !important;
    border-right: 0.167em solid #666;
}

.lg-info:after {
    content: "\e906";
}

.lg-sub-html {
    position: absolute;
}
.lg-toolbar {
    z-index: 1082;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: transparent;
}
.lg-toolbar .lg-info {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'exif' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  padding-top: 0.5em;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Main plugin */
.lg-exif {
    color: #ccc;
    padding: 1em;
    height: calc(100vh - 85px);
    width: 290px;
    margin-right: 0;
    background-color: #1f1f21;
    transition: all 0.25s;
	margin-right: -350px;
	position: relative;
	top: 40px;
    bottom: 45px;
    display: flex;
    align-items: center;
    padding: 0;
}

/* Contenedor que tendrá el scrollbar */
.lg-exif .content {
    width: 100%;
    max-height:  calc(100vh - 155px);
    overflow: auto; /* Habilita el scroll */
    position: relative;
}
  
/* Estilo del scrollbar */
.lg-exif .content::-webkit-scrollbar {
width: 10px; /* Ancho del scrollbar vertical */
height: 10px; /* Alto del scrollbar horizontal */
}

.lg-exif .content::-webkit-scrollbar-thumb {
background-color: transparent; /* Inicialmente invisible */
border-radius: 5px; /* Bordes redondeados */
transition: background-color 0.3s ease; /* Suaviza la aparición */
}

/* Fondo del scrollbar */
.lg-exif .content::-webkit-scrollbar-track {
background-color: transparent; /* Opcional: oculta el track */
}

/* Hover sobre el contenedor muestra el scrollbar */
.lg-exif .content:hover::-webkit-scrollbar-thumb {
background-color: #555; /* Color visible cuando se hace hover */
}

/* Hover sobre el thumb cambia su color */
.lg-exif .content:hover::-webkit-scrollbar-thumb:hover {
background-color: #777; /* Color más claro al hacer hover en el thumb */
}
.lg-exif.exif-visible {
    margin-right: 60px;
}

.lg-exif h3 {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lg-exif h3 span{
    font-variation-settings:
    'FILL' 1,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
    font-size: 18px;
}
.lg-exif p{
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}
.lg-exif p span.label{
    width: 120px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #8f919c;
    text-align: left;
    padding: 0;
}
.lg-exif p span.value{
    width: 165px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    text-align: left;
    text-wrap: wrap;
}
.lg-exif .lg-hide {
    float: right;
    color: #999;
    font-size: 1.375em;
    margin-top: -0.333em;
    cursor: pointer;
}

.lg-exif .lg-hide:hover {
    color: white;
}

.lg-exif .lg-hide:after {
    content: "\e070";
}

.lg-exif hr {
    clear: both;
    border-color: #ccc;
}
.toggle-additional {
    margin-top: 15px;
    color: #8f919c;
    background-color: transparent;
    width: 100%;
    border: none;
    text-transform: uppercase;
    font-size: 12px;
}
.toggle-additional:hover {
    color: #c7c7cf;
}


@media (max-width: 767px) {
    .lg-outer .lg-inner .lg-item {
        width: 100vw;
        height: calc(100vh - 40px);
        inset: 40px 0 0 0;
        margin: auto;
    }    
    .lg-exif {
        position: absolute;
        top: initial;
        left: 0;
        right: 0;
        bottom: -40vh;
        margin-right: 0 !important;
        width: 100vw;
        height: 40vh;
        justify-content: center;
    }
    .lg-exif.exif-visible{
        bottom: 0;
    }
    .lg-exif .content {
        width: 285px;
        max-height: calc(40vh - 20px);
    }
    .lg-outer .lg-inner:has(.exif-visible) .lg-item {
        inset: initial;
        margin: initial;
        top: 40px;
        left: 0;
        width: 100vw;
        height: calc(60vh - 40px);
    }    
}


@media (max-width: 992px) {
    .lg-outer .lg-inner .lg-item {
        width: 100vw;
        height: calc(100vh - 40px);
        inset: 40px 0 0 0;
        margin: auto;
    }    
    .lg-exif {
        position: absolute;
        top: initial;
        left: 0;
        right: 0;
        bottom: -40vh;
        margin-right: 0 !important;
        width: 100vw;
        height: 40vh;
        justify-content: center;
    }
    .lg-exif.exif-visible{
        bottom: 0;
    }
    .lg-exif .content {
        width: 285px;
        max-height: calc(40vh - 20px);
    }
    .lg-outer .lg-inner:has(.exif-visible) .lg-item {
        inset: initial;
        margin: initial;
        top: 40px;
        left: 0;
        width: 100vw;
        height: calc(60vh - 40px);
    }    
}