/* =========================================================
   CS Grăsuții România
   Editor Premium
   File: editor_premium.css
   Version: v3 FINAL TEST
========================================================= */

/* ==============================
   SCEditor Wrapper
============================== */

.sceditor-container{
	width:100% !important;
	max-width:100% !important;
	border:1px solid rgba(57,255,20,.24) !important;
	border-radius:16px !important;
	background:
		radial-gradient(circle at top left,rgba(57,255,20,.06),transparent 35%),
		linear-gradient(180deg,#0b1319 0%,#05090d 100%) !important;
	box-shadow:
		0 16px 34px rgba(0,0,0,.34),
		0 0 22px rgba(57,255,20,.07) !important;
	overflow:hidden !important;
	box-sizing:border-box !important;
	color:#dce8e0 !important;
}

/* ==============================
   Toolbar
============================== */

.sceditor-toolbar{
	position:relative;
	display:flex !important;
	flex-wrap:wrap !important;
	align-items:center !important;
	gap:6px !important;
	padding:10px 11px !important;
	border:0 !important;
	border-bottom:1px solid rgba(57,255,20,.15) !important;
	background:
		linear-gradient(180deg,rgba(13,24,30,.96),rgba(6,11,15,.96)) !important;
	box-shadow:inset 0 -1px 0 rgba(255,255,255,.025) !important;
}

.sceditor-toolbar::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(57,255,20,.65),transparent);
	opacity:.65;
	pointer-events:none;
}

.sceditor-group{
	display:inline-flex !important;
	align-items:center !important;
	gap:5px !important;
	margin:0 !important;
	padding:5px !important;
	border:1px solid rgba(255,255,255,.06) !important;
	border-radius:12px !important;
	background:rgba(255,255,255,.035) !important;
	box-shadow:inset 0 0 12px rgba(0,0,0,.18) !important;
}

.sceditor-button{
	width:30px !important;
	height:30px !important;
	margin:0 !important;
	padding:0 !important;
	border-radius:10px !important;
	border:1px solid rgba(57,255,20,.12) !important;
	background:rgba(57,255,20,.055) !important;
	box-shadow:none !important;
	transition:
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease !important;
}

.sceditor-button:hover,
.sceditor-button.active,
.sceditor-button:active{
	background:rgba(57,255,20,.16) !important;
	border-color:rgba(57,255,20,.36) !important;
	box-shadow:0 0 14px rgba(57,255,20,.12) !important;
	transform:translateY(-1px);
}

.sceditor-button.disabled{
	opacity:.38 !important;
	filter:grayscale(1) !important;
	cursor:not-allowed !important;
}

.sceditor-button div,
.sceditor-button svg,
.sceditor-button i{
	width:30px !important;
	height:30px !important;
	line-height:30px !important;
	opacity:1 !important;
	color:#dfffe3 !important;
	filter:
		brightness(2)
		contrast(1.25)
		drop-shadow(0 0 5px rgba(57,255,20,.32)) !important;
}

.sceditor-button:hover div,
.sceditor-button.active div,
.sceditor-button:active div,
.sceditor-button:hover svg,
.sceditor-button.active svg,
.sceditor-button:active svg,
.sceditor-button:hover i,
.sceditor-button.active i,
.sceditor-button:active i{
	filter:
		brightness(2.35)
		contrast(1.3)
		drop-shadow(0 0 8px rgba(57,255,20,.55)) !important;
}

/* ==============================
   Textarea / Iframe
============================== */

.sceditor-container textarea{
	width:100% !important;
	min-height:220px !important;
	padding:16px !important;
	border:0 !important;
	background:
		linear-gradient(180deg,#05090d 0%,#03070a 100%) !important;
	color:#dce8e0 !important;
	font-size:14px !important;
	line-height:1.65 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	box-shadow:none !important;
	outline:none !important;
	box-sizing:border-box !important;
	resize:vertical !important;
	caret-color:#39ff14 !important;
	scrollbar-width:thin;
	scrollbar-color:rgba(57,255,20,.65) #05090d;
}

.sceditor-container iframe{
	width:100% !important;
	border:0 !important;
	background:
		linear-gradient(180deg,#05090d 0%,#03070a 100%) !important;
	box-shadow:none !important;
}

.sceditor-container textarea:focus{
	background:
		linear-gradient(180deg,#060b10 0%,#03070a 100%) !important;
	color:#f3fff5 !important;
}

.sceditor-container textarea::selection{
	background:rgba(57,255,20,.25) !important;
	color:#fff !important;
}

/* ==============================
   Editor Scrollbar
============================== */

.sceditor-container textarea::-webkit-scrollbar{
	width:10px;
}

.sceditor-container textarea::-webkit-scrollbar-track{
	background:#05090d;
	border-left:1px solid rgba(57,255,20,.12);
}

.sceditor-container textarea::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg,rgba(57,255,20,.75),rgba(57,255,20,.28));
	border-radius:999px;
	border:2px solid #05090d;
}

.sceditor-container textarea::-webkit-scrollbar-thumb:hover{
	background:linear-gradient(180deg,rgba(57,255,20,.95),rgba(57,255,20,.42));
}

/* ==============================
   Source Mode
============================== */

.sceditor-source{
	background:#05090d !important;
	color:#dce8e0 !important;
	caret-color:#39ff14 !important;
}

.sceditor-source::selection{
	background:rgba(57,255,20,.25) !important;
	color:#fff !important;
}

/* ==============================
   Resize Grip / Bottom
============================== */

.sceditor-grip{
	background:
		linear-gradient(135deg,transparent 0 35%,rgba(57,255,20,.45) 36% 42%,transparent 43% 55%,rgba(57,255,20,.35) 56% 62%,transparent 63%) !important;
	opacity:.8 !important;
}

.sceditor-container .sceditor-resize-cover{
	background:rgba(0,0,0,.45) !important;
}

/* ==============================
   Dropdowns / Popups
============================== */

.sceditor-dropdown{
	padding:10px !important;
	border:1px solid rgba(57,255,20,.22) !important;
	border-radius:14px !important;
	background:#071016 !important;
	box-shadow:
		0 18px 38px rgba(0,0,0,.48),
		0 0 24px rgba(57,255,20,.08) !important;
	color:#dce8e0 !important;
}

.sceditor-dropdown label{
	color:#9fb1a7 !important;
	font-size:12px !important;
	font-weight:800 !important;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.sceditor-dropdown input,
.sceditor-dropdown textarea,
.sceditor-dropdown select{
	border:1px solid rgba(57,255,20,.18) !important;
	border-radius:11px !important;
	background:#05090d !important;
	color:#eaffec !important;
	padding:9px 10px !important;
	box-shadow:inset 0 0 14px rgba(0,0,0,.25) !important;
	outline:none !important;
}

.sceditor-dropdown input:focus,
.sceditor-dropdown textarea:focus,
.sceditor-dropdown select:focus{
	border-color:rgba(57,255,20,.42) !important;
	box-shadow:
		0 0 16px rgba(57,255,20,.1),
		inset 0 0 14px rgba(0,0,0,.25) !important;
}

.sceditor-dropdown .button,
.sceditor-dropdown input[type="button"],
.sceditor-dropdown input[type="submit"]{
	border-radius:999px !important;
	border:1px solid rgba(57,255,20,.3) !important;
	background:linear-gradient(180deg,rgba(57,255,20,.18),rgba(57,255,20,.06)) !important;
	color:#effff1 !important;
	font-weight:900 !important;
	text-transform:uppercase;
	box-shadow:
		0 10px 20px rgba(0,0,0,.24),
		0 0 14px rgba(57,255,20,.08) !important;
	cursor:pointer !important;
}

.sceditor-dropdown .button:hover,
.sceditor-dropdown input[type="button"]:hover,
.sceditor-dropdown input[type="submit"]:hover{
	border-color:rgba(57,255,20,.5) !important;
	background:linear-gradient(180deg,rgba(57,255,20,.26),rgba(57,255,20,.08)) !important;
	color:#fff !important;
}

/* ==============================
   Emoticons / Smilies
============================== */

.sceditor-emoticons,
.sceditor-more{
	background:#071016 !important;
	color:#dce8e0 !important;
}

.sceditor-emoticons img,
.cs-editor-smilie,
.smilie{
	display:inline-block !important;
	max-width:32px;
	max-height:32px;
	margin:4px !important;
	padding:5px !important;
	border-radius:10px !important;
	background:rgba(255,255,255,.035) !important;
	border:1px solid rgba(255,255,255,.06) !important;
	vertical-align:middle;
	transition:
		transform .16s ease,
		border-color .16s ease,
		background .16s ease,
		box-shadow .16s ease !important;
}

.sceditor-emoticons img:hover,
.cs-editor-smilie:hover,
.smilie:hover{
	transform:translateY(-1px) scale(1.08);
	background:rgba(57,255,20,.08) !important;
	border-color:rgba(57,255,20,.26) !important;
	box-shadow:0 0 14px rgba(57,255,20,.1);
}

/* ==============================
   Smilie Inserter Box
============================== */

.cs-editor-smiliebox{
	margin:16px auto 0;
	text-align:center;
}

.cs-editor-smiliebox-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:36px;
	padding:0 15px;
	border-radius:999px;
	background:
		linear-gradient(180deg,rgba(57,255,20,.16),rgba(57,255,20,.055));
	border:1px solid rgba(57,255,20,.28);
	color:#effff1 !important;
	font-size:12px;
	font-weight:900;
	text-decoration:none !important;
	text-transform:uppercase;
	letter-spacing:.04em;
	box-shadow:
		0 10px 20px rgba(0,0,0,.25),
		0 0 14px rgba(57,255,20,.08);
	transition:
		transform .18s ease,
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}

.cs-editor-smiliebox-toggle:hover{
	transform:translateY(-2px);
	background:
		linear-gradient(180deg,rgba(57,255,20,.25),rgba(57,255,20,.08));
	border-color:rgba(57,255,20,.48);
	box-shadow:
		0 14px 26px rgba(0,0,0,.34),
		0 0 20px rgba(57,255,20,.16);
}

.cs-editor-smiliebox-toggle i{
	color:#39ff14;
	filter:drop-shadow(0 0 6px rgba(57,255,20,.35));
}

.cs-editor-smiliebox-panel{
	width:190px;
	margin:16px auto 0;
	border-radius:18px;
	background:
		linear-gradient(180deg,#101922 0%,#071015 100%);
	border:1px solid rgba(57,255,20,.28);
	box-shadow:
		0 18px 38px rgba(0,0,0,.42),
		0 0 22px rgba(57,255,20,.07);
	overflow:hidden;
}

.cs-editor-smiliebox-head{
	padding:11px 12px;
	background:linear-gradient(180deg,rgba(57,255,20,.12),rgba(57,255,20,.055));
	border-bottom:1px solid rgba(57,255,20,.13);
	color:#f1fff3;
	font-size:11px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.05em;
}

.cs-editor-smiliebox-body{
	padding:10px;
}

.cs-editor-smilies-table{
	border:0 !important;
	background:transparent !important;
}

.cs-editor-smilie-row,
.cs-editor-smilie-more-row{
	border:0 !important;
	background:transparent !important;
}

.cs-editor-smilies-table td,
.cs-editor-smilie-cell,
.cs-editor-smilie-more-cell{
	padding:4px !important;
	border:0 !important;
	background:transparent !important;
	text-align:center;
}

.cs-editor-smilie-cell-empty{
	opacity:.35;
}

.cs-editor-smiliebox-footer{
	padding:10px;
	border-top:1px solid rgba(57,255,20,.1);
	background:rgba(0,0,0,.12);
}

.cs-editor-smiliebox-more{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:30px;
	padding:0 12px;
	border-radius:999px;
	background:rgba(57,255,20,.08);
	border:1px solid rgba(57,255,20,.18);
	color:#39ff14 !important;
	font-size:11px;
	font-weight:900;
	text-decoration:none !important;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.cs-editor-smiliebox-more:hover{
	background:rgba(57,255,20,.14);
	border-color:rgba(57,255,20,.32);
	color:#fff !important;
}

/* ==============================
   Attachment Icons
============================== */

.cs-editor-attachment-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	margin:0 5px 0 0;
	border-radius:9px;
	background:rgba(57,255,20,.07);
	border:1px solid rgba(57,255,20,.14);
	vertical-align:middle;
	box-shadow:0 0 12px rgba(57,255,20,.06);
}

.cs-editor-attachment-icon img{
	display:block;
	max-width:18px;
	max-height:18px;
}

/* ==============================
   Delete Attachments Button
============================== */

.cs-editor-delete-attachments{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:18px 0 6px;
	padding:14px;
	border-radius:16px;
	background:rgba(255,75,75,.055);
	border:1px solid rgba(255,75,75,.16);
	box-shadow:inset 0 0 18px rgba(0,0,0,.18);
}

.cs-editor-delete-attachments-btn{
	min-height:36px;
	padding:0 18px !important;
	border-radius:999px !important;
	border:1px solid rgba(255,75,75,.32) !important;
	background:
		linear-gradient(180deg,rgba(255,75,75,.18),rgba(255,75,75,.065)) !important;
	color:#fff !important;
	font-size:12px !important;
	font-weight:900 !important;
	text-transform:uppercase;
	letter-spacing:.04em;
	box-shadow:
		0 10px 20px rgba(0,0,0,.24),
		0 0 14px rgba(255,75,75,.09) !important;
	cursor:pointer;
	transition:
		transform .18s ease,
		border-color .18s ease,
		background .18s ease,
		box-shadow .18s ease;
}

.cs-editor-delete-attachments-btn:hover{
	transform:translateY(-2px);
	border-color:rgba(255,75,75,.52) !important;
	background:
		linear-gradient(180deg,rgba(255,75,75,.26),rgba(255,75,75,.09)) !important;
	box-shadow:
		0 14px 26px rgba(0,0,0,.34),
		0 0 20px rgba(255,75,75,.14) !important;
}

/* ==============================
   Preview Post
============================== */

.cs-editor-preview{
	margin:0 0 22px;
	border-radius:20px;
	background:
		radial-gradient(circle at top left,rgba(57,255,20,.07),transparent 34%),
		linear-gradient(180deg,#101922 0%,#071015 100%);
	border:1px solid rgba(57,255,20,.22);
	box-shadow:
		0 18px 44px rgba(0,0,0,.38),
		0 0 24px rgba(57,255,20,.07);
	overflow:hidden;
}

.cs-editor-preview-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:15px 18px;
	background:rgba(0,0,0,.18);
	border-bottom:1px solid rgba(57,255,20,.14);
}

.cs-editor-preview-title{
	color:#f1fff3;
	font-size:14px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.05em;
}

.cs-editor-preview-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:5px 10px;
	border-radius:999px;
	background:rgba(57,255,20,.09);
	border:1px solid rgba(57,255,20,.2);
	color:#39ff14;
	font-size:10px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.05em;
	box-shadow:0 0 14px rgba(57,255,20,.08);
}

.cs-editor-preview-body{
	padding:16px;
}

/* ==============================
   MyBB Editor Surroundings
============================== */

textarea[name="message"],
#message,
#signature,
#description{
	border:1px solid rgba(57,255,20,.2);
	border-radius:14px;
	background:#05090d;
	color:#dce8e0;
	box-shadow:inset 0 0 18px rgba(0,0,0,.25);
}

textarea[name="message"]:focus,
#message:focus,
#signature:focus,
#description:focus{
	border-color:rgba(57,255,20,.42);
	box-shadow:
		0 0 18px rgba(57,255,20,.1),
		inset 0 0 18px rgba(0,0,0,.25);
	outline:none;
}

/* ==============================
   Stock Buttons Cleanup
============================== */

input.button,
button.button,
.button,
input[type="submit"],
input[type="button"]{
	border-radius:999px !important;
	border:1px solid rgba(57,255,20,.32) !important;
	background:
		linear-gradient(180deg,rgba(57,255,20,.18),rgba(57,255,20,.065)) !important;
	color:#effff1 !important;
	font-size:12px !important;
	font-weight:900 !important;
	text-transform:uppercase;
	letter-spacing:.035em;
	box-shadow:
		0 10px 20px rgba(0,0,0,.25),
		0 0 14px rgba(57,255,20,.09) !important;
	cursor:pointer !important;
	transition:
		transform .18s ease,
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease !important;
}

input.button:hover,
button.button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
	transform:translateY(-2px);
	border-color:rgba(57,255,20,.52) !important;
	background:
		linear-gradient(180deg,rgba(57,255,20,.28),rgba(57,255,20,.09)) !important;
	color:#fff !important;
	box-shadow:
		0 14px 26px rgba(0,0,0,.34),
		0 0 20px rgba(57,255,20,.16) !important;
}

/* ==============================
   Edit Post Stock Panels Cleanup
============================== */

.tborder,
.tfixed,
.no-bs{
	background:
		radial-gradient(circle at top left,rgba(57,255,20,.045),transparent 34%),
		linear-gradient(180deg,#101922 0%,#071015 100%) !important;
	border:1px solid rgba(57,255,20,.18) !important;
	border-radius:18px !important;
	box-shadow:
		0 16px 34px rgba(0,0,0,.32),
		0 0 20px rgba(57,255,20,.055) !important;
	overflow:hidden;
}

.thead{
	background:
		linear-gradient(180deg,rgba(57,255,20,.12),rgba(57,255,20,.045)) !important;
	border-bottom:1px solid rgba(57,255,20,.14) !important;
	color:#f1fff3 !important;
	font-weight:900 !important;
}

.trow1,
.trow2{
	background:rgba(5,10,14,.72) !important;
	border-color:rgba(255,255,255,.055) !important;
	color:#dce8e0 !important;
}

.trow1 strong,
.trow2 strong,
.trow1 label,
.trow2 label{
	color:#f1fff3 !important;
}

input.textbox,
.textbox,
select,
textarea{
	border:1px solid rgba(57,255,20,.22) !important;
	border-radius:12px !important;
	background:#05090d !important;
	color:#eaffec !important;
	box-shadow:inset 0 0 14px rgba(0,0,0,.25) !important;
	outline:none !important;
}

input.textbox:focus,
.textbox:focus,
select:focus,
textarea:focus{
	border-color:rgba(57,255,20,.46) !important;
	box-shadow:
		0 0 16px rgba(57,255,20,.11),
		inset 0 0 14px rgba(0,0,0,.25) !important;
}

input[type="radio"],
input[type="checkbox"]{
	accent-color:#39ff14;
}

/* ==============================
   Responsive
============================== */

@media (max-width:768px){

	.sceditor-toolbar{
		padding:8px !important;
		gap:5px !important;
	}

	.sceditor-group{
		padding:4px !important;
		gap:4px !important;
		border-radius:10px !important;
	}

	.sceditor-button{
		width:28px !important;
		height:28px !important;
		border-radius:9px !important;
	}

	.sceditor-button div,
	.sceditor-button svg,
	.sceditor-button i{
		width:28px !important;
		height:28px !important;
		line-height:28px !important;
	}

	.sceditor-container textarea{
		min-height:190px !important;
		font-size:13px !important;
		padding:14px !important;
	}

	.cs-editor-preview-head{
		padding:13px 14px;
	}

	.cs-editor-preview-body{
		padding:12px;
	}

}

@media (max-width:480px){

	.sceditor-toolbar{
		max-height:170px;
		overflow-y:auto;
		padding-right:10px !important;
	}

	.sceditor-button{
		width:27px !important;
		height:27px !important;
	}

	.sceditor-button div,
	.sceditor-button svg,
	.sceditor-button i{
		width:27px !important;
		height:27px !important;
		line-height:27px !important;
	}

	.sceditor-container textarea{
		min-height:170px !important;
	}

	.cs-editor-smiliebox-panel{
		width:100%;
		max-width:220px;
	}

	input.button,
	button.button,
	.button,
	input[type="submit"],
	input[type="button"]{
		min-height:34px;
		padding:0 13px !important;
		font-size:11px !important;
	}

}