/* IMG-BOX */
#img_box img{max-width:90vw;max-height:90vh;width:auto !important;height:auto !important;}

/* scrollbar *
#photos ::-webkit-scrollbar {width: 10px; height: 10px;}
#photos ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius:10px;}
#photos ::-webkit-scrollbar-thumb {background:#444;border-radius:10px;}
#iphotos ::-webkit-scrollbar-thumb:hover {background: #222;}
*/

/* used for edit title toggle */
.control-me {display:none;clear:both;}
#toggle:checked ~ .control-me {display:block;}
#toggle {position: absolute; top: -100px;}
.toggle {float: right; font-size: 0.7em;color:darkred;}
.toggle,.editmode{border-radius: 5px;padding: 4px;}	

.deleted{color:darkred;}
.notapproved{color:blue;}
.mixitup-control-active{background-color:rgb(0,255,0,1) !important;}
h1.dele::before {
    content: "deleted";
    font-size: 0.5rem;
    color: darkred;
}
h1.need::before {
    content: "unapproved";
    font-size: 0.5rem;
    color: blue;
}
/*******  COLORS  ********
#photos{background-color:transparent !important;}
.crumbs,.title,.controls,.counts{background-color:transparent;}
.crumbs .enclose,.controls .enclose{background-color:transparent;}
#imagelist{background-color:transparent;}

.msg { background-color:rgb(255,255,255,0.5);}
.title h1 { background-color: rgb(255,255,255,0.5);}
.toggle,.editmode { background-color: rgb(255,255,255,0.5);}
.enclose {background-color: rgb(255,255,255,0.5);}
#imagelist li {background-color: rgb(255,255,255,0.5);}
#imagelist .normal { background-color: rgb(255,255,255,0.5); }
#imagelist p, #imagelist h1 {background-color: rgb(255,255,255,0.5);}

#photos button{background-color: rgb(255,255,255,0.5);}
#photos .actions button {background-color: rgb(0,255,0,1);}
.actions {background-color:rgb(255,255,255,0.5);}
.editmode{color: darkred;}

#photos button:hover{
    box-shadow: 0px 0px 5px darkgray;
    background-color: rgb(0,255,0,0.5);
}

#photos button{box-shadow:0px 0px 5px gray;}
#imagelist li {box-shadow: 5px 5px 5px #888;}
#imagelist .sel {box-shadow: 0px 0px 10px green;}
#imagelist .hilite {box-shadow: 0px 0px 10px yellow;}
#photos .actions {box-shadow:0px 0px 20px gray;}
*/

#imagelist .norm { background-color: rgb(255,255,255,0.3); }
#imagelist .hilite {background-color:rgb(255,255,0,0.3);}
#imagelist .sel {background-color:rgb(0,255,0,0.3);}
#imagelist .del { background-color: rgb(255,0,0,0.3); }
#imagelist .ned { background-color: rgb(0,255,255,0.3); }

/*  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #cccc99 10%, #eee 80%) repeat scroll 0 0; */
/* #form_box {background-color: rgb(255,255,255,1);} */

/********  FONTS  ********/
#photos{font-family: auto; }
#photos .title h1 {font-size:2.5rem;}
#photos .title h1 .subtitle{font-size:0.5em;}
#photos .crumbs{font-size: 0.8em;}
#photos .controls{font-size: 0.9em;}
#photos .counts{font-size: 0.9rem;}
#imagelist .comments {font-size: 0.6em;}
#imagelist h1, #imagelist h1 {font-size:1.2em;}
#imagelist .bottom-right, #imagelist .bottom-left {font-size: 0.8em;}

/* ICONS *
#photos .icon { font-size: 1em; }
#photos .icon span { display:none; font-size:0.5em; }
#photos .edit::before{
    font-family: "Font Awesome 6 Free"; 
	font-weight: 900;
    content:"\f013";
}
#photos .listing::before{
    font-family: "Font Awesome 6 Free"; 
	font-weight: 900;
    content:"\f03a";
}
#photos .slideshow::before{
    font-family: "Font Awesome 6 Free"; 
	font-weight: 900;
    content:"\f04b";
}
#photos .remove::before{
    font-family: "Font Awesome 6 Free"; 
	font-weight: 900;
    content:"\f2ed";
}
#photos .menu::before{
    font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
    content:"\f0c9";
}
#photos .play::before{
    font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: "\f04b";
}    
#photos .fullscreen::before{
    font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
    content:"\f047";
}
*/

#photos {text-align: left; width: 100%; line-height: normal;}
#photos p{line-height:normal;}
.title{display: flow-root;}
.title h1,.enclose,.msg{width: auto;}
.editbutton{float: right;}

.actions {padding:1px;}

.title h1,.enclose{margin: 0; padding: 4px; border-radius: 5px;}
.title,.controls,.crumbs,.counts,.msg,.actions,#imagelist{margin: 2px; padding: 4px; border-radius: 5px;}
button{border-radius: 5px;}
#selcount {display: inline-block; padding: 0 0 0 15px; }


/* scroll msg */
#photos .msg {
	list-style-type:none;
	max-height: 5em;
	overflow-y:scroll;
}
/* actions fixed to bottom of screen */
.actions {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
    margin: 10px;
}

.mix {position:relative; width:auto;}
.mix:before {content: '';}
.editphoto{height: 90% !important;}
#imagelist {margin:0;padding:0;text-align:justify;}
#imagelist li {
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  margin: 2px 2px 4px;
  min-width: 232px;
  min-height: 200px;
  padding: 2px 4px;
  vertical-align: top;
  border-radius: 6px;
}
#imagelist li, #imagelist li>span{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
}
#imagelist li>span{
    max-height: none !important;
    overflow-x: hidden !important;
}    
#imagelist .button-title{
	display: block;
    text-overflow: ellipsis;
}
span.viewer {
    display: block;
    width: 94%;
    height: 78%;
    cursor: pointer;
    margin: auto;
}
#imagelist .viewer{
    display: block;
    width: 94%;
    height: 68%;
/*    border: 1px solid black; */
    margin: auto;
    cursor: pointer;
}

#imagelist li {max-width: 99%; /* 1 col */}
@media only screen and (min-width: 480px) {
  /* For tablets: 2 cols */
	#imagelist li {max-width: 48% !important;}
}
@media only screen and (min-width: 720px) {
  /* For desktop: 3 cols */
	#imagelist li {max-width: 32% !important;}
}
@media only screen and (min-width: 930px) {
  /* For desktop: 4 cols */
	#imagelist li {max-width: 24% !important;}
}
@media only screen and (min-width: 1199px) {
  /* For desktop: 5 cols */
	#imagelist li {max-width: 19% !important;}
}
@media only screen and (min-width: 1439px) {
  /* For desktop: 6 cols */
	#imagelist li {max-width: 15% !important;}
}

.openbutton{
    width: 32% !important;
    font-size: 0.8em;
}
.photo div, .photo li { background-size:contain !important; }
.photo li span { background-size:contain !important; background-position: center; background-repeat: no-repeat;}

.norm, .ned, .del, .sel, .hilite{ text-decoration:none; color:#111; height:97%; display:block; width:97%; position:absolute; }
#imagelist li p { margin:0; padding:0; }
#imagelist li p, #imagelist li h1 { height:1.3em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-radius: 4px; }
#imagelist li h1 { text-transform: unset; margin: 0;}

#imagelist .bottom-right, #imagelist .bottom-left {position:absolute; bottom:2px; max-width:48%; padding:2px;}
#imagelist .bottom-right {right:2px; text-align:right;}
#imagelist .bottom-left {left:2px;}

.bottom-right:hover, .bottom-left:hover{
    width:98% !important;
    height:50% !important;
    overflow:visible !important;
	overflow-y:scroll !important;
	background-color:white !important;
	max-width: 100% !important;
	text-overflow: unset !important;
}
#imagelist div button, #imagelist li button {
    width: 100%;
    padding: 5px 2px 15px;
}
#imagelist .comments {
    text-overflow: ellipsis;
    white-space: nowrap;
}    
#imagelist .comments:hover {height:auto; overflow:visible; white-space:break-spaces;}

#imagelist input {
  float: left;
  position: relative;
  top: 0px;
}


/* not needed?
#imagelist .imgtools {
	position: absolute;
    bottom: 0px;
    display: flex;
}
#imagelist div img {
  display: block;
  height: 100%;
  max-height: 100px;
  margin: 0 auto;
}
#imagelist div.row1, #imagelist div.hilite, #imagelist div.sel {padding:4px;min-height:75px;}
*/


/*
.top-left {
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 2.5px;
  padding: 2px;
}
*/

/* old?
#ItemList { margin:0; padding:0; }
#ItemList li a { text-decoration:none; color:#111; }
#ItemList li p { margin:0; padding:0; }
#ItemList li p, #ItemList li h1 { height:1.3em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; background-color: rgb(255,255,255,0.5); border-radius: 4px; }
#ItemList li .directions { height:auto; overflow:unset; white-space:unset; }
#ItemList li.Item { vertical-align:top; }
#ItemList .MixItemText { padding:5px 0 4px 5px; } 
#ItemList li .location { font-size:0.9em; }
#ItemList li .location a { font-weight:bold; }
#ItemList li .nickname { font-size:0.9em; }
#ItemList li .links { font-size:0.9em; }
#ItemList li .links a { font-weight:bold; }
#ItemList li .updated { height:auto; font-size:0.9em; }
#ItemList li .updated img {  }
#ItemList li h1 { font-size:1.2em; margin:0; }
#ItemList li h1 { text-transform: unset; }
#ItemList li img.album { vertical-align:top; }
#ItemList li.center { text-align:center; }
#ItemList .trail-item p, #ItemList .trail-item h1 { height:auto; text-overflow:unset; overflow:unset; white-space:unset; }
*/

/*
#form_box {
    position: absolute;
    top: 0;
	bottom: 0;
    width: 100%;
    height: 100%;
}
#form_box form{
    width: 100%;
    margin: 20px auto;
	padding: 5px;
}
.BK{background-color:white;}
#imagelist .row1 {background-color:rgb(255,255,255,0.5);}
#imagelist div span, #imagelist div span {font-size: 0.5em;}
*/