/*zijbalk*/
.zijbalk 									{position:fixed; width:90px; left:0px; top:235px; height:100%; background-color:#7a1e64;}
.zijbalk-text 						{color:#fff; padding-top:2px; font-size:10px; text-transform:uppercase;}
.zijbalk-keuzes 					{position:fixed; width:270px; left:90px; top:235px; height:100%; background-color:#ece0ea;}
#divKeuzeAanwijzer 				{position:absolute; width:13px; left:90px; top:90px; height:100%;}
#divBannerOntwerpmodule 	{position:absolute; width:100%; left:0px; top:0px; height:90px;}
#divTopMenuOntwerpmodule 	{position:absolute; width:100%; left:365px; top:90px; height:50px; }
@media (max-width: 750px) {
	.zijbalk {width:50px; top:80px;}
	.zijbalk-text {font-size:6px;}
	.zijbalk-keuzes {left:50px; top:80px;}
	#divKeuzeAanwijzer {left:50px; top:80px;}
	#divBannerOntwerpmodule {height:80px;}
	#divTopMenuOntwerpmodule {top:80px;}
}

.input-wrap 		{position:relative; display:inline-block;}
.width-input 		{width:55px; padding-right:18px;}
.input-suffix 	{position:absolute; right:6px; top:18px; transform:translateY(-50%); color:#8c8c8c; font-size:12px; pointer-events:none; user-select:none;}

#werkvlak				{position:relative; width:500px; height:500px; background:#fff;}
#werkvlak, .text-box, .image-box 	{touch-action:manipulation;}

/* Moveable altijd erboven */
.moveable-control-box {
  z-index: 5000 !important;
}

/*knoppen*/
.editor-toolbar {display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px; background:#f6f7f9; border-bottom:1px solid #dcdcdc;}
.editor-toolbar button {height:34px; padding:0 12px; border-radius:5px; border:1px solid #cfcfcf; background:#ffffff; font-size:13px; cursor: pointer; transition: background 0.15s, border-color 0.15s;}
.editor-toolbar button:hover 	{background:#f0f0f0;}
.editor-toolbar button:active {background:#e6e6e6;}

/* toolbars ontwerpmodule */
.top-toolbar 				{background-color:#ee749f; padding:8px 12px; display:flex; align-items:center; justify-content:space-between;}
.toolbar-left 			{display:flex; gap:6px;}
.toolbar-right 			{display:flex;}
.toolbar-btn 				{background:transparent; border:none; color:white; font-size:18px; padding:0; margin:6px 8px; border-radius:6px; cursor:pointer;}
.toolbar-btn:hover 	{background-color:rgba(0, 0, 0, 0.20);}
.preview-btn 				{display:flex; align-items:center; gap:8px; background-color:#95c11f; color:white; border:none;border-radius:6px; padding:8px 14px; font-size:14px; font-weight:500; cursor:pointer;}
.preview-btn img 		{height:22px;}
.preview-btn:hover 	{background-color:#7a264f;}
.tooltip 						{position:fixed; background:#575756; color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease; transform:translateY(-4px); z-index:9999;}
.text-toolbar 						{background-color:#ffffff; color:#000000; max-height:0; overflow:hidden; transition:max-height 0.2s ease;}
.text-toolbar.visible 		{max-height:120px; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2); padding-top:5px; overflow:visible;}
.img-toolbar 							{background-color:#ffffff; color:#000000; max-height:0; overflow:hidden; transition:max-height 0.2s ease;}
.img-toolbar.visible 			{max-height:60px; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2); padding-top:5px; overflow:visible;}
.toolbar-separator 				{display:inline-block; width:1px; height:20px;  margin-top:6px; border-left:1px dashed #565657; vertical-align:top;}

.divSelect 								{position:relative; height:34px; border-top:1px dashed #565657; background:#fff; cursor:pointer; user-select:none;}
.divSelect-value 					{padding: 6px 30px 6px 10px; font-size:13px; line-height:20px; white-space:nowrap; overflow:hidden;}
.divSelect-arrow 					{position:absolute; right:10px; top:50%; width:10px; height:10px; border-right:2px solid #555; border-bottom:2px solid #555; transform:translateY(-50%) rotate(45deg); pointer-events:none;}
.divSelect-options 				{position:absolute; top:100%; left:-1px; right:-1px; max-height:220px; overflow-y:auto; border:1px solid #aaa; background:#fff; z-index:9999;}
.divSelect-options.hidden {display:none;}
.divSelect-option 				{padding:6px 10px; font-size:13px;}
.divSelect-option:hover 	{background:#eaeaea;}


#formatSelect 					{height:34px; border-radius:5px; border:1px solid #cfcfcf; padding:0 8px; font-size:13px;}
.btn-group 							{display:flex;}
.btn-group button 			{border-radius:0;}
.btn-group button:first-child {border-radius:5px 0 0 5px;}
.btn-group button:last-child 	{border-radius:0 5px 5px 0;}
.btn-group button.active 			{background:#4a90e2; color:#fff;}


/* === TEXT OBJECT === */
.text-box 			{position:absolute; min-width:120px; height:auto; border:1px dashed #4a90e2; background:rgba(0,0,0,0.02); display:table; text-align:center;}
.text-content 	{padding:0px; font-size:32px; outline:none; cursor:move; user-select:none; white-space:pre-wrap; min-height:1em; line-height:90%; display:table-cell; vertical-align:middle;}
.text-content 	{-webkit-user-select:text; -webkit-touch-callout:default;}	
.text-box:focus-within .text-content {cursor:text; user-select:text;}
.text-content * {font-size:inherit !important; font-family:inherit !important; color:inherit !important; line-height:inherit !important;}
.text-content div,
.text-content p {display:inline; margin:0; padding:0;}

/* === IMAGE OBJECT === */
.image-box 			{position:absolute; width:200px; height:150px; border:1px dashed #a5a5a5; background:rgba(0,0,0,0.001); cursor:move;}
.image-box img 	{width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none;}

.hidden 				{display:none;}
.ColorBlotch 		{border:1px solid #cbcbcb; display:inline-block; width:30px; height:25px; margin:5px; cursor:pointer;}
.ColorBlotchS 	{border:1px solid #cbcbcb; display:inline-block; width:20px; height:20px; margin:1px; cursor:pointer;}


@font-face {font-family: "CArial"; src:url("../fonts/arial.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CArialBlack"; src:url("../fonts/ariblk.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CBauhaus"; src:url("../fonts/bauhaus.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CBankgothic"; src:url("../fonts/Bank Gothic Medium BT.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CComicSans"; src:url("../fonts/comic.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CCooper"; src:url("../fonts/COOPERM.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CCooperBlack"; src:url("../fonts/COOPBL.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CCopperPlate"; src:url("../fonts/Copperplate.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CCourier"; src:url("../fonts/cour.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CEurostile"; src:url("../fonts/Eurostile.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CFutura"; src:url("../fonts/FUTURAM.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CIntercity"; src:url("../fonts/Intercity.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CKids"; src:url("../fonts/Kids.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CSpinCycle"; src:url("../fonts/SpinCycle.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CSlipstream"; src:url("../fonts/Slipstream_LET_Plain.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CTimes"; src:url("../fonts/times.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CTrebuchet"; src:url("../fonts/TREBUC.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: "CVerdana"; src:url("../fonts/VERDANA0.ttf") format("truetype"); font-display: swap;}