/*-------------------------------------------
--Main grid
-------------------------------------------*/

html, body
{
	height: 100%;
}

* {
    /*outline: 1px solid red; /*debug*/
}

body {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 20px 350px;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"nav nav nav"
		"main scrollbar aside"
		"footer footer footer";
	overflow: hidden;
	font-family: calibri;
}

/* mode sans aside */
body.no-aside-files.no-aside-filters.no-aside-loading
{
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav nav"
    "main scrollbar"
    "footer footer";
}

nav#main {
	grid-area: nav;
}

nav#magicscrollbar {
	grid-area: scrollbar;
}

nav div {
	z-index: 1;
}

main {
	grid-area: main;
	min-height: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width: none;
}

img,video {
	
	background-color: lightgray;
	
}

section#fullscreen img, section#fullscreen video {
	background: none;
}

aside {
	grid-area: aside;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	box-sizing: border-box;
	padding: 10px;
}

footer {
	grid-area: footer;
}

body.no-aside-files aside#infocontent, 
body.no-aside-filters aside#advancedfilters,
body.no-aside-loading aside#loading 
{
	display: none !important;
}

aside#loading
{	
    text-align: center;
    display: grid;
    align-content: center;
}

aside#loading span
{	
    font-size: 3em;
	animation: rotation 2s linear infinite;
}

div#loading span
{
	animation: rotation 2s linear infinite;
}

main section.grid 
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 5px;
	width: 100%;
	grid-auto-rows: auto;
	min-width: 0;
	margin-bottom: 5px;
}

main section.nodate
{
	margin-bottom: 5px;
}

main section.grid div.element {
	box-sizing: border-box;
	text-align: center;
	position: relative;
	overflow: hidden;
}

main section.grid div.element :where(img,video) {
	width: 100%;
	height: 100%;
	display: block;
	object-fit:cover;
}

main section.grid div.media-container 
{
	height: 100%;
}

main section.grid div.portrait {
  grid-column: span 1; /* 1 colonne */
  grid-row: span 1;    /* 1 ligne */
}

main section.grid div.landscape {
  grid-column: span 3; /* 3 colonnes */
  grid-row: span 1;    /* 1 ligne */
}

@media (max-width: 484px) {
    main section.grid div.landscape 
	{
        grid-column: span 2;
    }
}

@media (max-width: 328px) {
    main section.grid div.landscape 
	{
        grid-column: span 1;
    }
}

main section.grid div.fullrow h2 
{
	margin: 0px;
	font-weight: normal; 
	color: #494949;
	font-size: 1.2em;
	box-sizing: border-box;
}

main section.grid div.fullrow {
    grid-column: 1 / -1;
    height: 50px;
    min-height: unset;
    align-self: start;
	
	display: flex;
    align-items: center;
	
	padding-left: 10px;
}

main section.grid div.element
{
	 height: 220px;
}

main section.grid div.element div.button-select,
main section.grid div.element div.button-restaure
{
  position: absolute;
  top: 10px;
  left: 10px;
}

main section.grid div.element div.button-restaure:hover span {
	color:green;
}

main section.grid div.element div.button-fullscreen.photo {
  position: absolute;
  top: 10px;
  left: 35px;
}

main section.grid div.element div.button-fullscreen.video {
  position: absolute;
  top: 35px;
  left: 10px;
}

main section.grid div.element div.button-fullscreen span.material-symbols-outlined {
  font-size: 15px;
}

main section.grid div.element div.button-select span.material-symbols-outlined {
  font-size: 25px;
  border-radius: 25px;
}

main section.grid div.element div.button-fullscreen:hover span {
	font-size: 25px;
	transition: font-size 0.3s ease;
}

main section.grid div.element span {
  
  line-height: 25px;
  width: 25px;
  transition: opacity 0.3s ease;
  color: rgba(255, 255, 255, 0.90);
  position: absolute;
  background-color: #00000008;
  border-radius: 25px;
}

main section.grid div.selected 
{ 
	background-color: #a8c7fa; 
	border: 15px solid #a8c7fa;
}

main section.grid div.selected.transition-on, main section#fullscreen.transition-on
{
	transition: 
		background-color 0.5s ease,
		border-color 0.5s ease;	
}

main section.grid div.selected.success, main section#fullscreen.success
{
	background-color: #a8e6b8; /*#39c463;*/
	border-color: #a8e6b8; /*#39c463*/
}	

main section.grid div.selected.delete, main section#fullscreen.delete
{
	background-color: #e04848;
	border-color: #e04848
}	

main section.untagged div.is_tagged img, main section.library div.is_not_tagged img, main section.untagged div.is_tagged video, main section.library div.is_not_tagged video
{
	opacity: 0.5
}

main section.grid div.selected :where(img,video) { border-radius: 5px; }

main section.grid div.notselected span.hover { opacity: 0; }
main section.grid div.notselected span.caseselected { opacity: 0; }
main section.grid div.notselected div.button-select:hover span.nothover { opacity: 0; }
main section.grid div.notselected div.button-select:hover span.hover { opacity: 1; }
main section.grid div.selected span.nothover { opacity: 0; }
main section.grid div.selected span.hover { opacity: 0; }
main section.grid div.selected span.caseselected {
	opacity: 1;
	background-color: white;
	color: #0b57d0;
	border-radius: 25px;
	border: 0px;
}

nav#status span.material-symbols-outlined { padding: 15px;  }
nav#status div.ux-infobox div { text-align: center;  }
nav#status > div
{
	max-height: 50%;
    overflow-y: auto;
    overflow-x: hidden;
}

div#upload-status span.material-symbols-outlined { padding: 0px; !important;  }
div#upload-status div { text-align: left !important;  }
div#error-message div { text-align: left !important; color: red; padding: 10px 0px 10px 0px; }

div#select-status div span#tag:hover, div#select-status div span#tag.fullscreen { color: #0b57d0 }
div#select-status div span#tag.green { color: green; }
div#select-status div span#delete:hover { color: #f44336 }
div#select-status div span#share:hover { color: #ffc107 }

div#select-status div div.deselectall { display: inline-block; }
div#select-status div div.deselectall span{ transition: opacity 0.3s ease; }
div#select-status div div.deselectall span.unselect { position: absolute; left: 50px; opacity: 1; }
div#select-status div div.deselectall span.select { opacity: 1; }
div#select-status div div.deselectall:hover span.select { opacity: 0; }

nav#status div.check-close span.greenhover:hover { color: green }
nav#status div.check-close span.redhover:hover { color: red }

div#flush-trash div
{
	display: flex;
    align-items: center;
}

div#uploaddrag
{
	display: flex;
}

div#uploaddrag span:not(#scrollbarspace)
{	
	color: #494949bb;
	border: 2px dashed #494949bb;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box;
    text-align: center;
}

span#uploadmedia
{
	flex: 4;
}

span#uploadjson
{
	flex: 1;
}

span#scrollbarspace	
{
	width: 50px;
}