#pw-canvas-wrapper {
	width: 90vw;
    height: 80vh;
    min-width: 90vw;
    min-height: 80vh;
    position: relative;
	overflow: hidden;
	background: #ccc;
    left: 50%;
    margin-left: -45vw !important;
    margin-top: 5vh;
    padding: 0;
	touch-action: none;
	border: 20px solid transparent; /* narrow thickness */
	border-image-source: url('../img/wood-frame.png');
	border-image-slice: 20;
	border-image-repeat: repeat;
	border-image-width: 20px;
	touch-action: none;
	--pw-ui-scale:1;
}

#pw-canvas {
	position: absolute;
	top: 0;
	left: 0;
	background: url('../img/cork.png');
}

#pw-canvas-wrapper #pw-status-banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 12px;
}

/* upload */
#pw-upload-overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.25);
	cursor: pointer;
	user-select: none;
}

#pw-upload-overlay .pw-upload-prompt {
	font: 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #fff;
	background: rgba(0,0,0,.55);
	padding: 10px 14px;
	border-radius: 8px;
	opacity: .0;
	transition: opacity .15s linear;
}

#pw-upload-overlay.pw-banned .pw-upload-prompt{
	opacity:.65;
	cursor:not-allowed;
}

#pw-canvas-wrapper:hover #pw-upload-overlay, 
#pw-canvas-wrapper:focus-within #pw-upload-overlay,
#pw-canvas-wrapper:hover #pw-upload-overlay .pw-upload-prompt,
#pw-canvas-wrapper:focus-within #pw-upload-overlay .pw-upload-prompt{
	display:flex;
	opacity: 1;
}
#pw-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 3000px;
	height: 3000px;
	transform-origin: 0 0;
}

#pw-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../img/cork.png');
	background-position: center;
}

#pw-items {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

#pw-items .pw-item {
	position: absolute;
	user-select: none;
	touch-action: none;
	pointer-events: auto;
	cursor: grab;
}

#pw-items .pw-item::after {
	content: url('../img/pin.png');
	width: 26px;
	height: 28px;
	display: block;
	position: absolute;
	top: -14px;
	left: calc(50% - 13px);
}

#pw-items .pw-item .pw-actions{
	position:absolute;
	top: 10px;
	right: 10px;
	display:none;
	gap: 0;
	z-index:5;
	transform:scale(var(--pw-ui-scale));
	transform-origin:top right;
}

#pw-items .pw-item.pw-dragging .pw-actions{
	transform:scale(calc(var(--pw-ui-scale)*1.02));
	-ms-transform:scale(calc(var(--pw-ui-scale)*1.02));
	-webkit-transform:scale(calc(var(--pw-ui-scale)*1.02));
	top: 9px;
	right:8px;
}

#pw-items .pw-item.pw-photo-own:hover .pw-actions{
	display:flex;
}

#pw-items .pw-item .pw-action{
	width:28px;
	height:28px;
	border:0;
	background:rgba(0,0,0,.6);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	cursor:pointer;
	user-select:none;
}

#pw-items .pw-item .pw-action svg{
	width:16px;
	height:16px;
	display:block;
}

#pw-items .pw-item .pw-photo {
	background-color: #fff;
	max-width: 300px;
	max-height: 300px;
	user-select: none;
	touch-action: none;
	pointer-events: auto;
	border: 10px solid #fff;
	-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.30);
	box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.30);
}

#pw-items .pw-item.pw-dragging{
	cursor:grabbing;
	position: relative;
	z-index: 99999999999999;
}

#pw-items .pw-item.pw-dragging .pw-photo{
	transform: scale(1.02);
	-ms-transform: scale(1.02);
	-webkit-transform: scale(1.02);
	-webkit-box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.30);
	box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.30)
}

#pw-items .pw-item.pw-dragging::after {
	opacity:0;
}