/*
——————————————————————————————————
[style: theme-default4u][style: theme-BRG]

hyperphotos-css

Revisions: 
    20220901 stub, imported parts of [::photos-A-css]
    20230304 adding "bar"

See "→→" for important parts

[TOC]

————————————————————————————



% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*** GENERAL

% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*/


:root {

	/*
		ALSO SEE hyper.css !

	----------------------------------------

		Z_INDEX_CURRENT_TOP = 10000 (...........for HP objects, is increased.........)

	*/
	--Z-PDF-THUMBNAIL:	901001;
	--Z-PDF:			101001;
	--Z-OSD:			200000;
	--Z-RIPPLE:			99999;



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

    /*
    DO NOTHING
        --base: #F6F6F6;
        --blur: 2px;
        --bg-blend: multiply;
        --fg-blend: lighten;
        --bg-blend: normal;
        --fg-blend: normal;
        --foreground: cyan;
        --opacity: 1;
        --PICx: #FFF;
        --spacing: 10px;
        --mgn: 10px;

    ———————————————————————————————
    
    →→MAIN
    →→PRIMARY
    →→COLORS


    ——————————————————————————————————————
    hyperhyper "COMMON COLORS":
        [!!]
        BG ... none "inherits"
            BUT won't work for Outlines, then...
        FG ... would need jquery to set it inside, or do some voodoo
    ——————————————————————————————————————

    */

    /*
        →→DEFAULTS AND ALSO COMMON

    ----------------------------------------------------------------
        (1) These are set in code at
            →→COLOR DEFAULTS !!
            So the below don't to anything!
            In addition:
                They're part of COMMON
                So if anything set them there.
            ↓↓↓
    ----------------------------------------------------------------
    --BG: white;
    --FG: black;
    */


    /*
    ----------------------------------------------------------------
        ———DEPRECATED———
        (2) These ... were moved to "CSS_DEFAULTS" !
            ↓↓↓
    ----------------------------------------------------------------
    --ITEM_POSITION: left;
    --FILTER_GRAY: 0;
    --FILTER_BRIGHT: 1;
    --FILTER_CONTRAST: 1;
    */



    /*
    --OP0: 0.9;
    --OP1: 0.7;
    --OP2: 0.7;
    */
    --OP0: 1;
    --OP1: 1;
    --OP2: 1;

	--OSD-BG: #444;
}



/*
*** LAYOUT
*/


body {
    background: var(--BG);

    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

}


html, body, .item_div {
    margin: 0px;
    padding: 0px;
}



/*————————————————————————————————————————
*** VIEW: #TABLE-TIMLES
——————————————————————————————*/

.timle {
}

#table-timles {
    border: 2px solid black !important;
    border-collapse: collapse !important;
    padding: 3px;
}

.table-timles-td {
    border: 1px solid black !important;
    border-collapse: collapse !important;
    padding: 3px;
}


/*————————————————————————————————————————
*** VIEW: #TABLE-DIRECTORIES
——————————————————————————————*/

#table-dirs, .table-dirs-td {
    border: 2px solid black !important;
    border-collapse: collapse !important;
    padding: 3px;
}

.table-dirs-solo {
    background: cyan;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 0px;
    cursor: crosshair;
}








/*
% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*** MAIN: IMAGE CONTAINER

% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 
*/

.item_div {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--BG);
    width: 100%;
    height: 100%;

    /*
    →→
    →→
    →→FLEX
    →→CENTERING
    →→
    →→
    */
    display: flex;
    align-items: center;
    justify-content: var(--ITEM_POSITION);
}





/*
% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*** MAIN: THE IMAGE (inside container)

% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 
*/


/*
—————————————————————————————————————————————————————————————————————————————————————————————————————————————
—————————————————————————————————————————————————————————————————————————————————————————————————————————————

DON'T DO NOTHING / DISABLED / NOT A PART OF THE SAUCE

    vertical-align: middle;
    height: auto;
    image-orientation: from-image;
    justify-content: right;
    align-items: right;
    float: right;
    background-color: yellow;
    margin: var(--mgn) 0 var(--mgn) 0px !important;
    display: flex;
    padding: var(--spacing);
    overflow: hidden;
    flex: 1 1 100%;
    height: 70%;
    mix-blend-mode: var(--bg-blend);
    filter: contrast(1) blur(var(--blur));
    max-width: 100%;
    max-height: 100%;
    position: relative;
    transform-origin: 60% 80%;
    opacity: var(--opacity);


—————————————————————————————————————————————————————————————————————————————————————————————————————————————

COULD BE INTERESTING TO SWIWEL THESE AROUND A BIT

    img:hover {
        filter: brightness(150%);
        filter: contrast(150%);
        transition: transform 0.3s, filter 1s ease-in-out;
        z-index: 654321 !important;
    }


—————————————————————————————————————————————————————————————————————————————————————————————————————————————

ALSO DOES NOTHING
    img::before {
        background-color: var(--foreground);
        bottom: 0;
        content: '';
        height: 100%;
        left: 0;
        mix-blend-mode: var(--fg-blend);
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 1;
    }



—————————————————————————————————————————————————————————————————————————————————————————————————————————————

SOME NOTES ON PARAMETERS

    aspect-ratio
        LOOK INTO IT    
    
    object-fit
        VERY IMPORTANT!


        See: https://www.w3schools.com/css/css3_object-fit.asp

            """
            fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
            contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
            cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
            none - The image is not resized
            scale-down - the image is scaled down to the smallest version of none or contain
            """

        ALSO:
            * needs 'width' and/ height'
                see https://stackoverflow.com/questions/34247337/object-fit-not-affecting-images
            * ###

        —————————————————————————————————
        object-fit: cover;
        object-fit: none;
        object-fit: contain;
        object-fit: scale-down;



################ more interesting

resize: both !important;



—————————————————————————————————————————————————————————————————————————————————————————————————————————————
—————————————————————————————————————————————————————————————————————————————————————————————————————————————


↓↓↓
PHOTO / IMAGE
↓↓↓
*/

.i_pic {

    /*
    Think this one finally worked, thanks!
    https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
    */

    position: absolute;
    top: 0;
    bottom: 0;

    margin: auto;
    max-width: 100%;
    background-color: none;

    /*
    →→IMAGE BORDER
    */
    border: none;
    border: 4px solid var(--FG);

    /*

    →→MAX HEIGHT & MAX WIDTH
    →→RIGHT FLOAT / MARGIN

    ↓↓↓

        MOVED TO .JS
            IT'S GOOD TO HAVE IT DYNAMIC
            AND CONFIGURABLE FROM WITHIN THE APP

    ↑↑↑
    
    right: 5vh;
    */
    max-height: 98vh;
    max-width: 98vw;

    margin-left: 10px;
    margin-right: 10px;

    /*
    ——————————— trying to center —————————————————————————
    
    →→FLEX (2)
    
        * Here, only the container matters.
        
        * justify-content: left
            is a legit option
            [!!] →toggle!
    
    
    →→PHOTO POSITION
    
    align-items: left; ####does nothing
    */
    display: flex;
    /*
    justify-content: var(--ITEM_POSITION);
    ####### don't do nothing, parent does this
    */


    /*
    →→GRAYSCALE
    →→MONOCHROME
    
    [!!**] SPEED— Make sure this is not slowing down when "disabled" !

    */
    filter: grayscale(var(--FILTER_GRAY)) brightness(var(--FILTER_BRIGHT)) contrast(var(--FILTER_CONTRAST)) invert(var(--FILTER_INVERT));
}


.i_pic_big {
    width: 100% !important;
}



/*
@media screen and (max-width:1000px) {
    #pic {
        right: 1vh;
    }
    ###
    ###
    ### IF REBUILDING CAREFUL WITH '#' VS '.' !
    ###
    ###
}
*/



/*
————————————————————————————————————————————————————
    20230330 1949
    HAVE
        * COPIED FROM .i_pic above
        * roughly edited
    DO
        [!!**] abstract common, etc


→→INSERT

————————————————————————————————————————————————————
*/
.i_insert {
    position: absolute;
    top: 0;
    bottom: 0;

    margin: auto;
    max-width: 100%;
    background-color: none;

    /*
    →→IMAGE BORDER
    */
    border: 4px solid var(--FG);
    border: none;

    /*

    →→MAX HEIGHT & MAX WIDTH
    →→RIGHT FLOAT / MARGIN

    ↓↓↓

        MOVED TO .JS
            IT'S GOOD TO HAVE IT DYNAMIC
            AND CONFIGURABLE FROM WITHIN THE APP

    ↑↑↑
    
    right: 5vh;
    */
    max-height: 98vh;
    max-width: 98vw;


    /*
    ——————————— trying to center —————————————————————————
    
    →→FLEX 3

        * Seems to need to be on both here
            (otherwise just HORIZONTAL)

        * OK
    
    */
    display: flex;
    align-items: center;
    justify-content: center;
}



.i_insert_desc {
    font-style: italic;
    color: var(--FG);
    font-size: 1.2em;
    letter-spacing: 1.5px;
}



/*
% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*** UPPER ( @ top left )

% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 
*/

/*
--------------------------------------------------------------------------------------------------------------------------------
*/

/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ move, reorg these
*/

.osd_upper {
	width: fit-content;
	min-width: 0; /* Prevents the dot artifact */
}


.osd {
	background: var(--OSD-BG) !important;
	border-radius: 10px;
	padding: 6px;
	margin: 6px;
}



/*
--------------------------------------------------------------------------------------------------------------------------------
*/
#upper {
	width: fit-content;
	min-width: 0; /* Prevents the dot artifact */

    display: block;
    font-size: 2.4em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
  
    border: none;
    margin: none;
    padding: none;
    background: transparent !important;

    position: fixed !important;
    top: 5%;


    /*
    right: 5%;
    */

    left: var(--OSD_LEFT);
    right: var(--OSD_RIGHT);


    z-index: var(--Z-OSD);
    color: var(--FG) !important;

    -webkit-text-stroke: 1px var(--BG) !important;
    -webkit-text-fill-color: var(--FG) !important;
}

/*------------------------------------*/

#upper_counter:empty {
	display: none !important;
}
#upper_counter {
    font-size: 0.8em;
    letter-spacing: -1px;
    font-weight: bold;
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
}
#upper_counter_mini:empty {
	display: none !important;
}
#upper_counter_mini {
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: -0px;
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
}

#upper_videotime:empty {
  display: none !important;
}
#upper_videotime {
	background: none !important;
    font-size: 0.8em;
    letter-spacing: 0px;
}


#upper_statement:empty {
  display: none !important;
}
#upper_statement {
    font-size: 1.6em;
    margin-top: 0.6em;



    /*----------------------------------------------------------------------*/
    /*
    font-style: italic;
    -webkit-text-stroke: 2px var(--BG) !important;
    -webkit-text-fill-color: var(--FG) !important;

    -webkit-text-stroke: 2px var(--FG) !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke: none !important;
    -webkit-text-fill-color: none !important;
    */

    /*
    →→STATEMENT COLOR INVERSION
    Choose one!

    Also, text-shadow & text-stroke together seems to look best!

    —————————
    —————————
    */

	/*
    -webkit-text-fill-color: var(--FG) !important;
    -webkit-text-stroke: 1px var(--BG) !important;
    text-shadow: -1px -1px 0 var(--BG), 1px -1px 0 var(--BG), -1px 1px 0 var(--BG), 1px 1px 0 var(--BG);
    */

	/*
    -webkit-text-fill-color: var(--BG) !important;
    -webkit-text-stroke: 1px var(--FG) !important;
    text-shadow: -1px -1px 0 var(--FG), 1px -1px 0 var(--FG), -1px 1px 0 var(--FG), 1px 1px 0 var(--FG);
    */

    -webkit-text-stroke: none !important;
    -webkit-text-fill-color: none !important;
    text-shadow: none !important;
    background: none !important;
    
    /*----------------------------------------------------------------------*/


    letter-spacing: -1px;
    letter-spacing: 0px;
    
    /*
    color: #000 !important;

  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  */

}
.upper_statement_insert {
    font-size: 1.2em;
    letter-spacing: 6px;
}
#upper_statement_extra {
    font-size: 0.4em;
    background: none !important;
}
#upper_statement_extra:empty {
  display: none !important;
}






/*
% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 

*** DOWNER ( @ bottom left )

% % % % % % % % % % % % % % % % % % % % % % % % 

 % % % % % % % % % % % % % % % % % % % % % % % % 
*/


.osd_downer {
}


#downer {
    padding: 9px;
    margin: 9px;

    font-size: 1.6em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;

    /*
    ...........the IDEA TO HAVE A "90s MTV" style box...... [!]
    background: var(--BG);
    padding: 5%;
    opacity: 0.9;
    */

    /*
    →→TEXT SHADOW / OUTLINE
    */
    -webkit-text-stroke: 1px var(--BG) !important;
    -webkit-text-fill-color: var(--FG) !important;

    position: fixed !important;
    bottom: 5%;

    /*
    right: 5%;
    */
    left: var(--OSD_LEFT);
    right: var(--OSD_RIGHT);

    z-index: var(--Z-OSD);
    
    display: block;
    /*
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    */
    min-width: 0;
    
    max-width: 100%;
}

#downer_index {
    font-size: 0.8em;
    -webkit-text-stroke: none !important;
    -webkit-text-fill-color: none !important;

    /*
    (A)
    background: var(--BG) !important;
    */
    /*
    (B)
    border: 1px solid var(--FG);
    */
    /*
    (C)
    */
    border: 1px solid var(--BG);
}

#downer_path {
    -webkit-text-stroke: none !important;
    -webkit-text-fill-color: none !important;
    font-size: 0.8em;
	background: none !important;
}


/*——————————————————————————————————————*/
/*——————————————————————————————————————*/

#downer_insert:empty {
  display: none !important;
}
#downer_insert {
    background: var(--FG) !important;
    color: var(--BG) !important;
    font-size: 0.8em;
    letter-spacing: 3px;
    
    /*
    padding-top: 3px;
    padding-right: 1px;
    padding-left: 5px;
    */

    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
}




/*——————————————————————————————————————*/
/*——————————————————————————————————————*/

#downer_datum {
    font-size: 1.0em;
    letter-spacing: -2px;

    /*
    -webkit-text-stroke: 2px var(--BG) !important;
    */
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
}

/*---------------------------------------------------*/
		#downer_datum_mini {
		/*
		    font-size: 0.7em;
		    opacity: 0.8;
		    opacity: 1;
		*/
		}
		#t_Y {
		    opacity: var(--OP1);
		}
		#t_M {
		    opacity: var(--OP1);
		}
		#t_D {
		    font-size: 0.6em;
		    opacity: var(--OP2);
		}
		#t_h {
		    opacity: var(--OP1);
		}
		#t_m {
		    opacity: var(--OP1);
		}
		#t_s {
		    font-size: 0.6em;
		    opacity: var(--OP2);
		}

		.t_Y_changed {
		    border-bottom: 10px double var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_M_changed {
		    border-bottom: 8px solid var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_D_changed {
		    border-bottom: 6px solid var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_h_changed {
		    border-bottom: 4px solid var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_h_changed_big {
		    border-bottom: 6px dotted var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_m_changed {
		    border-bottom: 2px solid var(--FG);
		    opacity: var(--OP0) !important;
		}
		.t_s_changed {
		    border-bottom: 2px solid var(--FG);
		    opacity: var(--OP0) !important;
		}



/*——————————————————————————————————————*/
/*——————————————————————————————————————*/

#downer_extras:empty {
	display: none !important;
}
#downer_extras {
	/*
	width: 80% !important;
	width: fit-content;
	min-width: 50%;
	min-width: 0;
	*/
	display: block !important;

    letter-spacing: -1px;
    font-size: 1.0em;
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
    
	/* FORCES ONE LINE, NO GOOD FOR MOBILE */
	/*
    white-space: nowrap;
    */
    white-space: normal;
    word-break: break-word;
}

/*----------------------*/

#downer_extras_small:empty {
	display: none !important;
}
#downer_extras_small {
    font-size: 0.6em;
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);
}

/*-------------------*/

#downer_geo:empty {
  display: none !important;
}
#downer_geo a {
	text-decoration: none;
}
#downer_geo {
    letter-spacing: -1px;
    font-size: 0.6em;
    -webkit-text-stroke: var(--BG);
    -webkit-text-fill-color: var(--BG);

	margin-top: 14px;
	vertical-align: top; /* or middle, bottom */

	/* Reduce line-height */
	/*
	line-height: 1;
	*/
}


/*——————————————————————————————————————*/
/*——————————————————————————————————————*/


#osd_book_overtitle:empty {
	display: none !important;
}
#osd_book_overtitle {
	font-size: 80%;
	font-weight: normal;
	word-break: break-all; /* Force breaking */
}
#osd_book_title {
/*
  display: inline-block;
  width: 100%;
*/

/*  
  white-space: normal;
  word-break: break-all;
*/
 
	/*
	width: fit-content;

	width: 80% !important;
    white-space: nowrap;
    */
}
#osd_book_pages:empty {
	display: none !important;
}
#osd_book_pages {
	/*
	width: 80% !important;
    white-space: nowrap;
*/
	width: fit-content;
}



/*
——————————————————————————————————————

COPIED FROM HYPERMAPS
JUST PUT TO COMMON CSS :)
$$$$$$$$$$$[e]

↓
↓update to be fullscreen
↓


——————————————————————————————————————
*/


/*————————————————————————
*** ANIMATION: LOADING 2
via https://loading.io/css/
——————————————————*/


:root {
	/*
	--SPLASHf: yellow;
	--SPLASHb: teal;
	*/
	--SPLASHf: white;
	--SPLASHb: black;
	--SPLASHx: 55px;
	--SPLASHopacity: 1;
}

.lds-ripple {
  display: inline-block;
  position: absolute;
  width: 100vmin;
  height: 100vmin;
  background: var(--SPLASHb);
  opacity: var(--SPLASHopacity);
  z-index: var(--Z-RIPPLE);
  overflow: hidden;
}

.lds-ripple div {
  position: absolute;
  border: var(--SPLASHx) solid var(--SPLASHf);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 10s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -1s;
}

@keyframes lds-ripple {
  0% {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  4.9% {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  5% {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    top: 50%;
    left: 50%;
    width: 100vmin;
    height: 100vmin;
    opacity: 0;
    transform: translate(-50%, -50%);
  }

}



/*
——————————————————————————————————————

→→NEW
	aka (NEW)++((NEW))

↓↓↓

——————————————————————————————————————
*/


#pdf-viewer {
	z-index: var(--Z-PDF);
/*
	position: absolute;
	width: auto;
	height: 95%;
*/
	position: relative;

/*
	width: 100vw;
	height: 100vh;
	max-width: 90vh;
	max-height: 90vh;
*/
	width: 98vw;
	height: 98vh;

	overflow: auto;
	
/*
	opacity: 0.4;
	transition: opacity 1s ease;
*/

	transition: filter 1s ease;
}


#pdf-thumbnail {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: var(--Z-PDF-THUMBNAIL);
	pointer-events: none;
}

#pdf-thumbnail canvas {
	border: 2px solid #ccc;
	background: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}



/*
--------------------------------------------------------------------------------------------------------------------------------
*/