/* The full-page overlay */
.loader-overlay {
    position: fixed; /* Sit on top of the page content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Make sure it's on top */
    backdrop-filter: blur(3px); /* Optional: a nice blur effect on the content behind */
}

/* The spinning circle */
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light grey border */
    /* border-top: 5px solid #3498db; */
    border-top: 5px solid #555;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* The animation */
}

/* The spinning animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

header > nav {
	background:linear-gradient(90deg,rgba(43, 43, 43, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

#editor-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	backdrop-filter: blur(3px);
}

.editor-container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap:10px 5px;
	align-items: center;
	font-size:12px;
	background-color:white;
	padding:10px 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.editor-input {
	width: 100%;
	min-width:300px;
	max-width:300px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family:Reddit;
}
.closeEditorBtn {
	position:absolute;
	/* color:rgba(0,0,0,0.5); */
	color:white;
	font-size:26px;
	line-height:18px;
	transition:.2s ease-out;
	cursor:pointer;
	font-weight:bold;
	user-select:none;
}
.closeEditorBtn:hover {
	/* color:#741010; */
	color:#e40000;
	text-shadow: 0 0 5px rgba(255,255,255,1);
}