#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:fullscreen{
	width:100vw;
	height:100vh;
	min-width:100vw;
	min-height:100vh;
	left:0;
	margin:0 !important;
	border-width:0;
	background:#000;
}

#pw-canvas-wrapper.pw-fs-fallback{
	position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	min-width:100vw;
	min-height:100vh;
	margin:0 !important;
	border-width:0;
	z-index:99999;
	background:#000;
}

#pw-canvas-wrapper:fullscreen #pw-minimap,
#pw-canvas-wrapper.pw-fs-fallback #pw-minimap{
	pointer-events:auto;
}

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

/* 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-canvas-wrapper #pw-top-upload{
	position:absolute;
	top: 0;
	right: 142px;
	z-index: 9;
	pointer-events:auto;
	background-color: rgba(0,0,0,0.6);
}

#pw-top-upload .pw-top-upload-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 66px;
	height: 56px;
	cursor:pointer;
	color: #fff;
	background: transparent;
}

#pw-top-upload .pw-top-upload-btn:hover{
	background:rgba(0,0,0,0.8);
}

#pw-top-upload .pw-top-upload-btn svg{
	width: 32px;
	height: 32px;
	color: #fff;
	fill: #fff;
	display: block;
	position: absolute;
}

/* help modal */
#pw-help{
	position: absolute;
	top: 0;
	right: 208px;
	align-items:center;
	padding: 12px 17px;
	background: rgba(0,0,0,0.6);
	margin-left:8px;
	border:0;
	cursor:pointer;
	color: #fff;
	z-index: 9;
}

#pw-help:hover{
	background:rgba(0,0,0,0.8);
}

#pw-help svg{
	display:block;
	width: 42px;
	height: 32px;
	color:#fff;
	fill:#fff;
}

#pw-help-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:99999;
}

#pw-help-modal.is-open{
	display:block;
}

#pw-help-modal .pw-help-overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
}

#pw-help-modal .pw-help-dialog{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	width: 80dvw;
	max-width: 960px;
	max-height: calc(100dvh - 200px);
	overflow: auto;
	background: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	min-height: 50dvh;
	color:#fff;
	text-align: center;
}

#pw-help-modal #pw-help-close{
	position:absolute;
	right: 10px;
	top: 10px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color:#fff;
}

/* snapshot button */
#pw-snapshot{
	position: absolute;
	top: 0;
	right: 66px;
	align-items:center;
	padding: 12px 17px;
	background: rgba(0,0,0,0.6);
	margin-left:8px;
	border:0;
	cursor:pointer;
	color: #fff;
	z-index: 9;
}

#pw-snapshot:hover{
	background:rgba(0,0,0,0.8);
}

#pw-snapshot svg{
	display:block;
	color:#fff;
	fill:#fff;
}

#pw-snapshot .fil0,
#pw-snapshot .fil1{
	fill:#fff;
}

/* fullscreen button */
#pw-fullscreen{
	position: absolute;
	top: 0;
	right: 0;
	align-items:center;
	padding: 12px 17px;
	background: rgba(0,0,0,0.6);
	margin-left:8px;
	border:0;
	cursor:pointer;
	color: #fff;
	z-index: 9;
}

#pw-fullscreen:hover{
	background: rgba(0,0,0,0.8);
}

#pw-fullscreen svg{
	display:block;
	color:#fff;
	fill:#fff;
}

#pw-fullscreen .fil0,
#pw-fullscreen .fil1{
	fill:#fff;
}

#pw-canvas-wrapper #pw-fullscreen .fullscreenicon{
	display:inline;
}
#pw-canvas-wrapper:fullscreen #pw-fullscreen .fullscreenicon, #pw-canvas-wrapper.pw-fs-fallback #pw-fullscreen .fullscreenicon{
	display:none;
}
#pw-canvas-wrapper #pw-fullscreen .exiticon{
	display:none;
}
#pw-canvas-wrapper:fullscreen #pw-fullscreen .exiticon, #pw-canvas-wrapper.pw-fs-fallback #pw-fullscreen .exiticon{
	display:inline;
}

#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;
	z-index: 999999999999999999999999999999999999999999999999999;
}

#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;
	padding: 8px;
	-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;
}

/* Invite Modal */
#pw-invite-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:99999;
}

#pw-invite-modal.is-open{
	display:block;
}

#pw-invite-modal .pw-invite-overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
}

#pw-invite-modal .pw-invite-dialog{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#111;
	border-radius:8px;
	box-shadow:0 12px 32px rgba(0,0,0,0.5);
	max-width:520px;
	width:90vw;
	overflow:hidden;
}

#pw-invite-modal .pw-invite-body{
	padding: 14px 20px 10px 20px;
	background:#222;
	color:#fff;
}

#pw-invite-modal .pw-invite-body h2{
	margin:0 0 8px 0;
	font-size:20px;
	font-weight:500;
}

#pw-invite-modal .pw-invite-body p{
	margin:0 0 12px 0;
	opacity:0.9;
}

#pw-invite-modal #pw-invite-email{
	width:100%;
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,0.15);
	background:#111;
	color:#fff;
	padding:10px 12px;
	border-radius:6px;
	outline:none;
}

#pw-invite-modal #pw-invite-status{
	margin-top:10px;
	min-height:18px;
	opacity:0.9;
}

#pw-invite-modal .pw-invite-actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	padding: 16px 20px;
	background:#222;
}

#pw-invite-modal #pw-invite-close{
	position:absolute;
	top: 12px;
	right: 12px;
	background: rgba(0,0,0,0.6);
	border:0;
	color:#fff;
	font-size: 22px;
	line-height:1;
	cursor:pointer;
	border-radius: 61px;
	width: 32px;
	height: 32px;
	padding: 0 0 3px 0;
}

#pw-items .pw-item.pw-invite-highlight{
	outline:3px solid rgba(255,255,255,0.85);
	outline-offset:6px;
}

/* Select2 invite field */
#pw-invite-modal .select2-container{
	width:100%!important;
	max-width:100%;
	line-height:56px;
	vertical-align:top;
	text-align:left;
}

#pw-invite-modal .select2-container .select2-results{
	display:none!important;
}

#pw-invite-modal .select2-container--default .select2-selection--multiple{
	min-height:44px;
	border:1px solid rgba(255,255,255,0.15)!important;
	border-radius:6px;
	background:#111;
	box-shadow:none;
	padding:4px 6px;
}

#pw-invite-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	margin:0;
	padding:0;
}

#pw-invite-modal .select2-search.select2-search--inline{
	width:100%!important;
	display:block;
	height: 34px;
	position: relative;
}

#pw-invite-modal .select2-container--default .select2-selection--multiple .select2-search__field{
	margin:0;
	padding:0;
	font-size:16px;
	line-height:24px;
	height:24px;
	color:#fff;
	position: fixed;
	bottom: 126px;
}

#pw-invite-modal .select2-container--default .select2-selection--multiple .select2-selection__choice{
	background:#222;
	border:1px solid rgba(255,255,255,0.15);
	border-radius:6px;
	padding:2px 6px 2px 26px;
	margin:0;
	font-size:16px;
	line-height:20px;
	color:#fff;
}

#pw-invite-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	color:#fff;
	margin-right:6px;
}

#pw-invite-modal .select2-container--default.select2-container--focus .select2-selection--multiple{
	border-color:rgba(255,255,255,0.45)!important;
}



/* Snapshot Modal */
#snap-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:99999;
}

#snap-modal h2{
	color:#fff;
	font-size: 20px;
	padding: 10px 0 0 0;
	font-weight: 500;
}

#snap-modal.is-open{
	display:block;
}

#snap-modal .snap-overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
}

#snap-modal .snap-dialog{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#111;
	border-radius:8px;
	box-shadow:0 12px 32px rgba(0,0,0,0.5);
	max-width:90vw;
	max-height:90vh;
	overflow:hidden;
}

#snap-modal .snap-body{
	padding: 8px 20px 0 20px;
	background:#222;
}

#snap-modal #snap-preview{
	display:block;
	max-width:86vw;
	max-height:64vh;
	height:auto;
	width:auto;
}

#snap-modal .snap-actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	padding: 20px;
	background: #222;
}

#snap-modal .btn{
	background:#444;
	color:#fff;
	border:0;
	padding:6px 10px;
	border-radius:4px;
	cursor:pointer;
}

#snap-modal .btn-primary{
	background:#21B306;
}

#snap-modal #snap-close{
	position:absolute;
	top: 14px;
	right: 16px;
	background:transparent;
	border:0;
	color:#fff;
	font-size: 22px;
	line-height:1;
	cursor:pointer;
	background: rgba(0,0,0,0.6);
	border-radius: 61px;
	width: 32px;
	height: 32px;
	padding: 0 0 3px 0;
}

/* Picture-in-Picture */
#pw-minimap {
	position: absolute;
	box-sizing: content-box;
	right: 0;
	top: 62px;
	border: 5px solid #333;
	z-index: 25;
	pointer-events: none;
	background: url('../img/cork.png');
	background-size: 200px;
	width: 274px;
	max-width: 40dvw;
	opacity: 0;
	transition: opacity .15s;
}
#pw-minimap.pw-minimap-moving {
	opacity: 1;
}
#pw-minimap.pw-minimap-visible {
	opacity: 1;
	pointer-events: auto;
}
#pw-minimap .pw-mini-close{
	position:absolute;
	top:4px;
	right:4px;
	width:32px;
	height:32px;
	padding:0 3px 4px 3px;
	font-size:22px;
	line-height:0;
	text-align:center;
	border:0;
	border-radius:50%;
	background:#000;
	color:#fff;
	opacity:.75;
	cursor:pointer;
	z-index:9;
}
#pw-minimap .pw-mini-close:hover{
	opacity:1;
}

/* Responsive */
@media only screen and (max-width: 1086px) {
	#pw-canvas-wrapper #pw-status-banner {
		text-align: left;
		padding-left: 16px;
	}
}

@media only screen and (max-width: 880px) {
	#pw-canvas-wrapper #pw-status-banner {
		padding-right: 216px;
		height: 78px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn, #pw-canvas-wrapper #pw-snapshot, #pw-canvas-wrapper #pw-fullscreen, #pw-canvas-wrapper #pw-help{
		height: 78px;
	}
}

@media only screen and (max-width: 590px) {
	#pw-canvas-wrapper #pw-status-banner {
		padding-right: 180px;
		font-size: 16px;
	}
	#pw-canvas-wrapper #pw-snapshot{
		width: 54px;
		align-items: center;
		display: flex;
		padding: 12px;
		right: 56px;
	}
	#pw-canvas-wrapper #pw-snapshot svg{
		width: 32px;
		align-self: center;
	}
	#pw-canvas-wrapper #pw-top-upload{
		right: 110px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn{
		width: 54px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn svg{
		width: 26px;
	}
	#pw-canvas-wrapper #pw-fullscreen svg{
		width:22px;
	}
	#pw-canvas-wrapper #pw-top-upload{
		right: 110px;
	}
	#pw-canvas-wrapper #pw-help{
		right: 164px
	}
	#pw-canvas-wrapper #pw-help svg{
		width: 26px;
		align-self: center;
	}
}

@media only screen and (max-width: 530px){
	#pw-canvas-wrapper #pw-status-banner {
		padding: 7px 135px 7px 7px;
		font-size: 14px;
		height: 62px;
		line-height: 16px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn, #pw-canvas-wrapper #pw-snapshot, #pw-canvas-wrapper #pw-fullscreen, #pw-canvas-wrapper #pw-help{
		height: 62px;
		padding: 10px;
	}
	#pw-canvas-wrapper #pw-snapshot{
		right: 42px;
		width: 44px;
	}
	#pw-canvas-wrapper #pw-snapshot svg{
		width: 24px;
		align-self: center;
	}
	#pw-canvas-wrapper #pw-top-upload{
		width: 42px;
		right: 86px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn svg{
		width: 22px;
		position: relative;
		left: -4px;
	}
	#pw-canvas-wrapper #pw-help{
		right: 128px
	}
	#pw-canvas-wrapper #pw-help svg{
		width: 20px;
		align-self: center;
	}
}

@media only screen and (max-width: 354px){
	
	#pw-canvas-wrapper #pw-status-banner {
		height: 70px;
		line-height: 14px;
	}
	#pw-canvas-wrapper #pw-top-upload .pw-top-upload-btn, #pw-canvas-wrapper #pw-snapshot, #pw-canvas-wrapper #pw-fullscreen,#pw-canvas-wrapper #pw-help{
		height: 70px;
	}
}