body { font-family:Arial,sans-serif; background-color:rgba(209,213,238,1); margin:0px; }
button, #footer, #head3 input { font-family:Verdana, sans-serif; }

#header, #bigview, #bvclickaway, #inner-wrapper, #footer, #cross, #subcross, #left-wrapper, #right-wrapper, #uploadinfo, #bestgirl { position:fixed; }

#bestgirl { max-height:70vh; bottom:0px; right:0px; z-index:-1; }
a:link, a:visited, a:active { color:rgba(0,0,0,0.95); text-decoration:none; }
a:hover { text-decoration:underline; }
#header, #hiddenheader { background-color:rgba(238,242,255,0.9); width:100%; padding:7px 0px 7px 0px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:1px; }
#header { top:0px; z-index:1; }
#head1 { width:160px; padding:5px 12px 5px 0px; text-align:center; }
#head2 { text-align:left; width:160px; }
#head3 { text-align:center; flex-grow:1; }
#head4 { width:320px; text-align:right; padding-right:12px; }
#loading2 { position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; }
.order { display:none; }
label:hover { cursor:pointer; }
input[type="radio"] + label img { padding-left:6px; transition:opacity 0.1s linear; opacity:0.3; }
input[type="radio"] + label:hover img { opacity:0.7; }
input[type="radio"]:checked + label img { opacity:1; }
select { appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url(img/order-drop.png) no-repeat right #FFF; border:1px solid white; display:block; width:120px; font-family:Verdana; font-size:8pt; }
select:hover { background: url(img/order-drop2.png) no-repeat right #FFF; }
#head3 input { border:1px solid white; border-radius:2px; }
#head3 span { font-size:9pt; padding:0px; }
#tahcmu { padding:8px 25px 0px 0px; transition:opacity 0.1s linear; opacity:1; }
#tahcmu:hover { opacity:0.5; }
#info p { margin:2px; font-size:8pt; }
#info { float:right; }
input[type="submit"] { font-size:10pt; font-weight:bold; }
#footer, #hiddenfooter { background-color:rgba(238,242,255,0.9); width:100%; padding:7px 0px 7px 0px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#footer { bottom:0px; z-index:1; }
#header:hover, #footer:hover { background-color:rgba(238,242,255,1); box-shadow:0px 0px 5px #BBB; }
#foot4 { flex-grow:3; }
#foot1 { text-align:right; flex-grow:4; max-width:35%; overflow:hidden; }
#foot3 { flex-grow:1; text-align:center; }
#foot2 { flex-grow:2; text-align:center; font-size:10pt; }
#hiddenheader, #hiddenfooter { visibility:hidden; }

#uploadinfo { display:flex; justify-content:center; align-items:center; visibility:hidden; opacity:0; transition:visibility 0s, opacity 0.5s linear; left:0; right:0; top:0; bottom:0; margin:auto; z-index:1; background-color:rgba(255,255,255,0.95); padding:30px; }
#uploadinfo #cross2 { position:absolute; top:50px; right:50px; transition:transform 0.1s linear; }

#content { text-align:center; }
div.onefile { font-family:Arial,sans-serif; margin:0px 1px 1px 0px; display:inline-block; background-color:rgba(238,242,255,1); width:156px; }
div.onefile:hover { background-color:rgba(238,242,255,0); }
img.image { display:block; }
p.picture:hover  { cursor:pointer; }
p.picture { padding:3px; }
p.picname { font-weight:bold; font-size:9pt; }
p.picture, p.picname, p.picinfo { margin:0px; }
p.picname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
p.picname:hover { cursor:pointer; white-space:normal; overflow:visible; word-wrap:break-word; overflow-wrap:break-word; }
p.picinfo { padding-bottom: 3px; font-size:8pt; }

#bigview { display:none; background-color:rgba(0,0,0,0.9); overflow:auto; z-index:2; left:0; right:0; top:0; bottom:0; margin:auto; justify-content:center; align-items:center; }
#inner-wrapper { z-index: 4; }
#bvclickaway { z-index: 3; left:0; right:0; top:0; bottom:0; margin:auto; }
#cross { right:30px; top:30px; transition:transform 0.1s linear; transform:rotate(0deg); z-index: 6; }
#cross:hover, #cross2:hover { transform:rotate(90deg); cursor:pointer; }
#subcross { color:white; right:30px; top:57px; z-index: 6; }
#left-wrapper, #right-wrapper { height:100%; width: 5%; top: 0px; background-color: rgba(0, 0, 0, .5); margin:auto; justify-content:center; align-items:center; display:flex; z-index: 5; }
#left-wrapper:hover, #right-wrapper:hover { cursor:pointer; background-color: rgba(0, 0, 0, .2) }
#leftarrow, #rightarrow { width:40%; }
#left-wrapper { left: 0px; }
#right-wrapper { right: 0px; }
#scrtitle, #ok { color:white; font-size:10pt; }
#scrtitle { font-weight:bold; }
#scrdate { color:white; font-size:9pt; }
#screen2 { display:none; max-height:80vh; max-width:80vw; }

#bigview, #header, #footer { backdrop-filter: blur(6px); }