/*/////////////////////////////////////////////////////////////////////////////
// Version 1.1 Signed by Sid @ BENTO on 2025-09-27 T 14:31:51 -06:00
// Authentication (do not edit) $TKAAW4ft$
///////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2025 by Sid Paral. All rights reserved
//
// Permission to use, copy, modify, and distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
//
///////////////////////////////////////////////////////////////////////////////
//
// hroch-illu.css
//
/////////////////////////////////////////////////////////////////////////////*/

:root						{
								--illu-album-padding:			0.5rem;
								--illu-album-icon-height:		1.2rem;
								--illu-album-rim-radius:		0.25rem;
								--illu-album-capt-size:			0.8rem;
								--illu-album-rim-size:			1px;
								--illu-album-rim-color:			#000;
								--illu-album-htext-color:		#CCC;
								--illu-album-hback-color:		#333;
								/* following values get applied to LiteBox */
								--illu-album-lbx-veil-blur:		0px;
								--illu-album-lbx-veil-color:	rgba(0,0,0,0.7);
								--illu-album-lbx-border-line:	0px;
								--illu-album-lbx-border-color:	#FFF;
								--illu-album-lbx-brim-radius:	50%;
								/* required variable containing the suffixes of above variables for LiteBox update */
								--illu-album-lbx-varlist:		veil-blur, veil-color, border-line, border-color, brim-radius;
							}

/*///////////////////////////////////////////////////////////////////////////*/

.illu-row,
.illu-col,
.illu						{	position:						relative;
								text-align:						center;
								display:						flex;
								flex-wrap:						nowrap;
								flex-direction:					column;
								justify-content:				flex-start;
								align-items:					center;
							}
.illu.right					{
								float:							right;
								padding:						var(--illu-album-padding);
								padding-right:					0px;
							}
.illu.left					{
								float:							left;
								padding:						var(--illu-album-padding);
								padding-left:					0px;
							}
.illu-col.right,
.illu-row.right,
.illu.right					{	text-align:						right;			}
.illu-col.left,
.illu-row.left,
.illu.left					{	text-align:						left;			}
.illu-capt					{	font-style:						italic;
								font-size:						var(--illu-album-capt-size);
								width:							0px;
								min-width:						100%;
							}
.illu-thumb					{	border:							var(--illu-album-rim-size) solid var(--illu-album-rim-color);
								border-radius:					var(--illu-album-rim-radius);
								display:						block;
							}
.illu-icon					{
								width:							calc(var(--illu-album-icon-height) + 0.5rem);
								height:							calc(var(--illu-album-icon-height) + 0.5rem);
								background-color:				rgba(100%, 100%, 100%, 0.7);
								background-image:				url('data:image/svg+xml;utf8,<svg id="SVGRoot" width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect y="4" width="16" height="10"/><path d="m8 4h4" fill="none" stroke="%23000" stroke-linecap="round" stroke-width="4"/><g><circle cx="2.125" cy="6.0" r="1" fill="%23fff"/><circle cx="10" cy="9" r="3.5" fill="%23000" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="3" idth="2" height="1" fill="%23000"/></g></svg>');
								background-repeat:				no-repeat;
								background-size:				var(--illu-album-icon-height) var(--illu-album-icon-height);
								background-position:			center center;
								border-radius:					50%;
								position:						absolute;
								z-index:						1;
								top:							var(--illu-album-padding);
								left:							var(--illu-album-padding);;
								cursor:							pointer;
								display:						block;
							}
.illu.left .illu-icon		{	left:							auto;
								right:							var(--illu-album-padding);
							}
.illu-link .illu-icon		{	opacity:						0;
								transition:						opacity 0.25s ease-in-out;
							}
.illu-link:hover .illu-icon,
.illu-link:focus .illu-icon	{	opacity:						1;				}
.illu-link					{	position:						relative;
								display:						block;
							}
.illu-row					{
								flex-direction:					row;
								justify-content:				normal;
								align-items:					flex-start;
								gap:							var(--illu-album-padding);
							}

.album-list					{
								display:						flex;
								flex-direction:					row;
								flex-wrap:						wrap;
								justify-content:				center;
								align-items:					center;
								gap:							var(--illu-album-padding);
							}
.album-entry				{	position:						relative;			}
.album-hold					{
								font-size:						0.7rem;
								color:							var(--illu-album-htext-color);
								background-color:				var(--illu-album-hback-color);
								border-radius:					var(--illu-album-rim-radius);
								border:							var(--illu-album-rim-size) solid var(--illu-album-rim-color);
								box-sizing:						content-box;
								text-align:						center;
								display:						flex;
								flex-direction:					column;
								flex-wrap:						nowrap;
								justify-content:				center;
								align-items:					center;
								overflow:						hidden;
							}
.album-hold.failed			{
								color:							#FFF;
								background-image:				url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m10.5 12.33c-2.6473 1.6562-6.5244 0.10014-7.2977-2.9224-0.38587-1.2947-0.21286-2.7407 0.46762-3.9077zm5-4.3301a7.5 7.5 0 0 1-7.5 7.5 7.5 7.5 0 0 1-7.5-7.5 7.5 7.5 0 0 1 7.5-7.5 7.5 7.5 0 0 1 7.5 7.5zm-10-4.3301c2.6473-1.6562 6.5244-0.10014 7.2977 2.9224 0.38588 1.2947 0.21286 2.7407-0.46762 3.9077z" fill="none" stroke="%23404040" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></svg>');
								background-size:				auto 50%;
								background-position:			center center;
								background-repeat:				no-repeat;
							}
.album-hold.failed > div	{
								color:							#FFF;
								background-color:				rgba(0,0,0,0);
								filter:							drop-shadow(+1px +1px 3px #000)
																drop-shadow(+1px -1px 3px #000)
																drop-shadow(-1px -1px 3px #000)
																drop-shadow(-1px +1px 3px #000);
							}
.album-thumb				{
								border-radius:					var(--illu-album-rim-radius);
								border:							var(--illu-album-rim-size) solid var(--illu-album-rim-color);
								opacity:						1.0;
								display:						block;
								transition:						opacity 0.25s ease-in-out;
							}
.album-thumb.loading		{
								position:						absolute;
								z-index:						-1;
								left:							0px;
								top:							0px;
								opacity:						0.0;
							}
.album-thumb-patience		{
								position:						absolute;
								z-index:						1;
								right:							var(--illu-album-padding);
								bottom:							var(--illu-album-padding);
								transform:						translate(-50%, -50%);
								width:							3rem;
								height:							3rem;
								background-image:				url('data:image/svg+xml;charset=utf8,<svg id=\"SVGRoot\" width=\"16px\" height=\"16px\" version=\"1.1\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke-width=\".2\"><g stroke=\"%23fff\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(18,8,8)\" fill=\"%23fff\" stroke=\"%23000\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(36,8,8)\" stroke=\"%23fff\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(54,8,8)\" fill=\"%23fff\" stroke=\"%23000\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(72,8,8)\" stroke=\"%23fff\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(90,8,8)\" fill=\"%23fff\" stroke=\"%23000\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(108,8,8)\" stroke=\"%23fff\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(126,8,8)\" fill=\"%23fff\" stroke=\"%23000\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(144,8,8)\" stroke=\"%23fff\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g><g transform=\"rotate(162,8,8)\" fill=\"%23fff\" stroke=\"%23000\"><circle cx=\"8\" cy=\"1\" r=\".9\"/><circle cx=\"8\" cy=\"15\" r=\".9\"/></g></g></svg>');
								background-position:			center center;
								background-size:				contain;
								background-repeat:				no-repeat;
							}

.album-spinner				{	animation:						_album-rotate-right 12s linear infinite;	}
.album-spinner.left,
.left .album-spinner		{	animation:						_album-rotate-left 12s linear infinite;		}

@keyframes _album-rotate-right
							{
								0% 		{ transform:			rotate(0deg); 			}
								100%	{ transform:			rotate(360deg); 		}
							}
@keyframes _album-rotate-left
							{
								0% 		{ transform:			rotate(0deg); 			}
								100%	{ transform:			rotate(-360deg); 		}
							}

.clear						{	clear:							both;			}
.clear.left					{	clear:							left;			}
.clear.right				{	clear:							right;			}

.clickable					{	cursor:							pointer;
							}
.hidden						{	display:						none;			}

/*///////////////////////////////////////////////////////////////////////////*/