* {
	margin: 0;
	padding: 0;
	border: none;
    font-family: "Quicksand", sans-serif;
}

body {
	min-height: 100vh;
	margin: 0 24px 0;
	background-image: url("../assets/images/background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#copyright {
	width: 100%;
	padding: 0 64px 0;
	box-sizing: border-box;
	margin: 48px 0 24px;
	font-size: 14px;
	font-weight: 500;
	color: white;
	text-align: center;
}

button {
  font-family: inherit;
}

textarea {
	font-family: inherit;
}

h1 {
	margin: 32px 0;
	text-align: center;
	color: white;
}

h2 {
	width: 100%;
	margin: 12px 0 24px;
	padding: 0 48px;
	box-sizing: border-box;
	text-align: center;
	color: white;
}

h2:empty {
	display: none;
}

::-webkit-scrollbar {
  display: none;
} /* Hide scrollbar on Chrome, Edge, Safari */

html {
  scrollbar-width: none;
} /* Hide scrollbar on Firefox */

/* Gallery */
#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	align-items: center;
	color: white;
	gap: 14px;
}

.image-container {
	position: relative; /* Contains elements using position: absolute */
	width: 200px;
	height: 300px;
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.36);
}

.image-container::before {
	content: ""; /* Empty element */
    position: absolute;
	inset: 0; /* Fill entire image-container */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none; /* Allow interact with elements behind */
}

.image-box {
	width: 100%;
	height: 100%;
}

.image-box img {
    width: 100%;
	height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-title {
    width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-title p {
    width: 150px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size: 16px;
	color: white;
	text-align: center;
}

.image-info {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
    width: 100%;
	height: 64px;
	margin-top: 0;
}

.image-info button {
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.image-info button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 66%;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
}

.view-btn::before {
	background: url("../assets/images/maximize.png") no-repeat center;
}

.note-btn::before {
	background: url("../assets/images/pencil-plus.png") no-repeat center;
}

.select-btn::before {
	background: url("../assets/images/heart-plus.png") no-repeat center;
}

.image-info button:active {
	background: rgba(255, 255, 255, 0.16);
}

.view-btn {
	left: 32px;
	transform: translate(-50%, 0);
}

.note-btn {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.note-btn.has-note::before {
	background-image: url("../assets/images/pencil-solid.png");
	/* #A594F9 */
	filter: opacity(100%) brightness(0) saturate(100%) invert(69%) sepia(42%) saturate(4196%) hue-rotate(209deg) brightness(102%) contrast(95%);
}

.select-btn {
	right: 32px;
	transform: translate(50%, 0);
}

.select-btn.selected::before {
	background-image: url("../assets/images/heart-solid.png");
	/* #FF6969 */
	filter: opacity(100%) brightness(0) saturate(100%) invert(51%) sepia(64%) saturate(2255%) hue-rotate(323deg) brightness(110%) contrast(102%);
}

/* Note Popup */
#note-popup {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.54);
    z-index: 1000;
}

.note-content {
    width: 300px;
	padding: 8px;
	box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background: rgb(40, 47, 53);
    border-radius: 10px;
    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.37);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

.note-content p {
	width: 212px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: white;
	font-size: 16px;
	text-align: center;
	margin: 0;
}

.note-content textarea {
    width: 100%;
    height: 100px;
	resize: none;
	background: rgba(0, 0, 0, 0.31);
	color: white;
	box-sizing: border-box;
    padding: 7px 7px 7px 9px;
    font-size: 14px;
	outline: none;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 5px;
}

.popup-buttons {
	width: 100%;
	height: 28px;
    display: flex;
    justify-content: space-between;
}

.popup-buttons button {
	width: 60px;
	height: 100%;
    border-radius: 14px;
	padding-bottom: 2px;
	font-size: 14px;
	color: white;
	transition: background-color 0.113s ease-in-out;
    cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

#save-note {
    background: #4F75FF;
	border: 1px solid transparent;
	transform: translate(-50%, 0);
    margin-right: -28px;
}

#close-note {
    background: rgba(0, 0, 0, 0.43);
	border: 1px solid rgba(255, 255, 255, 0.33);
	transform: translate(50%, 0);
    margin-left: -28px;
}

#close-note:active {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid transparent;
}

#save-note:active {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.33);
}

/* Image Viewer */
#image-viewer {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.82);
	z-index: 1000;
}

.viewer-container {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#modal-image {
	max-width: 100vw;
	max-height: 100vh;
	position: absolute;
	transition: transform 0.21s ease-in-out;
	cursor: grab;
	user-select: none;
	user-drag: none;
    -webkit-user-drag: none;
}

#modal-image:active {
	cursor: grabbing;
}

.viewer-title {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	z-index: 1000;
	pointer-events: none;
}

.viewer-title p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.viewer-title .name {
	max-width: 260px;
	font-weight: 500;
	pointer-events: auto;
}

.viewer-title .index {
	min-width: 50px;
	height: 24px;
	padding: 0 8px 1px;
    box-sizing: border-box;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.22);
	display: flex;
	justify-content: center;
	align-items: center;
}

.viewer-header {
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100px;
	top: 0;
	z-index: 1000;
	pointer-events: none;
}

.viewer-header span {
	width: 32px;
	height: 32px;
	background-size: 91%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

.close-btn {
	background: url("../assets/images/x.png") no-repeat center;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	transform: translate(50%, 0);
	margin-left: 8px;
}

.external-btn {
	background: url("../assets/images/external-link.png") no-repeat center;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	transform: translate(-50%, 0);
	margin-right: 8px;
}

.viewer-navigator {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 64px;
	z-index: 1000;
	pointer-events: none;
}

.viewer-navigator button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	position: relative;
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.viewer-navigator button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 66%;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	pointer-events: auto;
}

.viewer-navigator button:disabled::before {
	filter: opacity(21%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
}

.viewer-navigator button:active {
	background: rgba(255, 255, 255, 0.16);
}

.viewer-navigator button:disabled {
	pointer-events: none;
}

.next-btn::before {
	background: url("../assets/images/chevron-right.png") no-repeat center;
}

.prev-btn::before {
	background: url("../assets/images/chevron-left.png") no-repeat center;
}

.next-btn {
	transform: translate(-50%, 0);
	margin-right: -8px;
}

.prev-btn {
	transform: translate(50%, 0);
	margin-left: -8px;
}

.viewer-footer {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 100%;
	height: 72px;
	bottom: 0;
	z-index: 1000;
	pointer-events: none;
}

.viewer-footer button {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	position: relative;
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
	transform: translate(0, -12px);
}

.viewer-footer button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 75%;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	pointer-events: auto;
}

.viewer-footer button:disabled::before {
	filter: opacity(21%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
}

.viewer-footer button:active {
	background: rgba(255, 255, 255, 0.16);
}

.viewer-footer button:disabled {
	pointer-events: none;
}

.zoom-in-btn::before {
	background: url("../assets/images/zoom-in.png") no-repeat center;
}

.zoom-out-btn::before {
	background: url("../assets/images/zoom-out.png") no-repeat center;
}

.reset-view-btn::before {
	background: url("../assets/images/zoom-reset.png") no-repeat center;
}

.allow-toggle-view ~ .viewer-footer .reset-view-btn::before {
	background-image: url("../assets/images/zoom-replace.png");
}

.download-btn::before {
	background: url("../assets/images/download.png") no-repeat center;
}

#zoom-info {
	width: 72px;
	height: 32px;
	border-radius: 16px;
    font-size: 20px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
    transform: translate(0, -12px); /* Bottom offset */
	background: rgba(0, 0, 0, 0.22);
	display: flex;
	justify-content: center;
	align-items: center;	
}

.viewer-info {
	width: 100%;
	height: 64px;
	position: absolute;
	bottom: 72px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.viewer-info button {
	width: 40px;
	height: 40px;
	position: relative;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.viewer-info button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 66%;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
}


.viewer-info button:active {
	background: rgba(255, 255, 255, 0.16);
}

.note::before {
	background: url("../assets/images/pencil-plus.png") no-repeat center;
}

.select::before {
	background: url("../assets/images/heart-plus.png") no-repeat center;
}

.note.has-note::before {
	background-image: url("../assets/images/pencil-solid.png");
	/* #A594F9 */
	filter: opacity(100%) brightness(0) saturate(100%) invert(69%) sepia(42%) saturate(4196%) hue-rotate(209deg) brightness(102%) contrast(95%);
}

.select.selected::before {
	background-image: url("../assets/images/heart-solid.png");
	/* #FF6969 */
	filter: opacity(100%) brightness(0) saturate(100%) invert(51%) sepia(64%) saturate(2255%) hue-rotate(323deg) brightness(110%) contrast(102%);
}

/* Bottom Bar */
#bottom-bar {
    position: fixed;
	width: 90vw;
    max-width: 296px;
    height: 64px;
    border-radius: 32px;
	background: rgb(40, 47, 53);
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 0);
	transform-origin: left center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.37);
	transition: 0.26s ease-in-out;
	z-index: 999;
}

#image-viewer.visible ~ #bottom-bar {
	opacity: 0;
	bottom: -72px !important;
}

#bottom-bar button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	position: relative;
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

#bottom-bar button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 66%;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	pointer-events: auto;
}

#bottom-bar button:active {
	background: rgba(255, 255, 255, 0.16);
}

.clipboard-btn::before {
	background: url("../assets/images/clipboard.png") no-repeat center;
}

.request-btn::before {
	background: url("../assets/images/share-2.png") no-repeat center;
}

.clipboard-btn {
	transform: translate(50%, 0);
	margin-left: -16px;
}

.request-btn {
	transform: translate(-50%, 0);
	margin-right: -16px;
}

.select-info {
    width: 48px;
    font-size: 20px;
    color: white;
    text-align: center;
}

/* Global display styles & animations */
.hidden {
    display: none !important;
}

.visible {
	animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.no-transition {
	transition: none !important;
}

.temporary-hidden {
	opacity: 0;
	scale: 0.6;
	bottom: -72px !important;
}

@keyframes swipeIn {
	from {
		opacity: 0;
		transform: translate(0, -100%); !important;
	}
	to {
		opacity: 1;
		transform: translate(0, 0); !important;
	}
}

@keyframes swipeOut {
	from {
		opacity: 1;
		transform: translate(0, 0); !important;
	}
	to {
		opacity: 0;
		transform: translate(0, -100%); !important;
	}
}

.swipe-out {
	animation: swipeOut 0.3s ease-out forwards !important;
}

/* Notification Center */
#noti-center {
	width: 100vw;
    height: 100vh;
	padding-top: 16px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
	gap: 4px;
	pointer-events: none;
}

.toast-noti {
	width: 90vw;
	max-width: 296px;
	height: 48px;
	border-radius: 24px;
	background: rgb(40, 47, 53);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.37);
	animation: swipeIn 0.3s ease-out forwards;
}

.toast-noti span {
    width: 32px;
    height: 32px;
	background-size: 78%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

.toast-noti p {
	text-align: center;
    font-size: 16px;
    color: white;
}

.toast-icon {
	background: url("../assets/images/alert-square-rounded.png") no-repeat center;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	transform: translate(50%, 0);
	margin-left: -4px;
}

.toast-close {
	background: url("../assets/images/x.png") no-repeat center;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	transform: translate(-50%, 0);
    margin-right: -4px;
}

.confirm-dialog {
	width: 300px;
	padding: 10px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgb(40, 47, 53);
	border-radius: 10px;
	box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.37);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	pointer-events: auto;
	animation: fadeIn 0.3s ease-out forwards;
}

#noti-center.dialog::before {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
	top: 0;
	left: 0;
    background: rgba(0, 0, 0, 0.54);
    z-index: -1;
	animation: fadeIn 0.3s ease-out forwards;
}

.dialog-title {
	max-width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
}

.message-viewer {
	width: 100%;
	min-height: 100px;
	max-height: 150px;
	padding: 7px 7px 7px 9px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.31);
	color: white;
	font-size: 14px;
	border: 1px solid rgba(255, 255, 255, 0.23);
	border-radius: 5px;
	overflow: auto;
	white-space: pre-wrap;
}

.button-container {
	width: 100%;
	height: 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.button-container button {
	width: 64px;
	height: 100%;
	border-radius: 14px;
	font-size: 13px;
	color: white;
	transition: background-color 0.113s ease-in-out;
    cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dialog-confirm {
	background: #4F75FF;
	border: 1px solid transparent;
	transform: translate(-50%, 0);
	margin-right: -32px;
}

.dialog-close {
	background: rgba(0, 0, 0, 0.43);
	border: 1px solid rgba(255, 255, 255, 0.33);
	transform: translate(50%, 0);
	margin-left: -32px;
}

.dialog-confirm:active {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.33);
}

.dialog-close:active {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid transparent;
}

/* URL Input Prompt */
#url-input-prompt {
	width: 100%;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

#url-input-prompt p {
	font-size: 16px;
	font-weight: 500;
}

#url-input {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 28px;
	padding-right: 56px;
	box-sizing: border-box;
	background: rgb(40, 47, 53);
	box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.37);
	font-size: 16px;
	color: white;
	text-indent: 24px;
	white-space: nowrap;
	text-overflow: ellipsis;
	outline: none;
}

.search-bar {
	position: relative;
	width: 75vw;
	max-width: 400px;
	height: 56px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.search-bar button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: relative;
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: background-color 0.113s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.search-bar button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 66% !important;
	filter: opacity(82%) brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(271deg) brightness(116%) contrast(100%);
	pointer-events: auto;
}

.search-bar button:active {
	background: rgba(255, 255, 255, 0.16);
}

#proceed-btn::before {
	background: url("../assets/images/arrow-right.png") no-repeat center;
}

#proceed-btn {
	transform: translate(-50%, 0);
	margin-right: -20px;
}