*{
	margin:0px;
	padding:0px;
}
:root {
	--black-1: #2C2C2C;
	--black-2: #1E1E1E;
	--black-3: #8E8E8E;
	--blue: #0C8CE9;
}
body {
	top: 0px !important;
	font-family: "Inter", "Segoe UI", "Roboto", sans-serif;
	user-select: none;
	background-color: var(--black-2); 
}

.cursor-pointer {
	cursor: pointer;
}
.section-edit-btn {
	position: absolute;
	top: 10px;
	right: 2px;
	background-color: #0000008a;
	color: #fff;
	padding: 6px 10px 10px 11px;
	border-radius: 50px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 8px 10px rgba(0,0,0,0.4);
	z-index: 1;
}
.colour-edit-btn {
	position: absolute;
	top: 10px;
	right: 43px;
	background-color: #0000008a;
	color: #fff;
	padding:6px;
	border-radius: 50px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 8px 10px rgb(0, 0, 0, 0.40);
	z-index:1;
}
.section-edit-btn:hover {
	background-color:black;
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75) );
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
}
.modal-content{
	border-radius:20px !important;
	background-color:var(--black-2);
	border:1px solid lightgray;
	overflow:hidden;
}
.modal-header {
	background-color: var(--black-1);
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:8px 20px;
}
.modal-title{
	font-size:17px;
	font-weight:400;
}