/* CV Manager Styles */
/* Client layout + CV3DPlayer internal classes */

	html, body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background: #111;
		overflow: hidden;

		font-family: Arial, Helvetica, sans-serif;
	}
 
	body{
			margin:0;
			padding:0;
			width:100%;
			height:100%;
			overflow:hidden;
			font-family: Arial, Helvetica, sans-serif;
		}

	/*errors*/
	.font_error_warning {
	position: absolute;
		bottom: 20px;
		right: 20px;
		background: rgba(255, 50, 50, 0.9);
		border: 2px solid #ff0000;
		border-radius: 8px;
		padding: 12px 16px;
		color: white;
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: bold;
		display: flex;
		align-items: center;
		gap: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		z-index: 1000;
		max-width: 300px;
		animation: pulse 2s infinite;
	}

	.font_error_icon {
		font-size: 24px;
	}

	.font_error_text {
		flex: 1;
	}

	@keyframes pulse {
		0% { opacity: 0.9; }
		50% { opacity: 1; }
		100% { opacity: 0.9; }
	}
 

	/*drag drop*/

	.ui_dropzone {
		width: 100%;
		height: 100px;
		border: 3px dashed #999;
		border-radius: 8px;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 10px 0;
		cursor: pointer;
		transition: all 0.2s;
	}

	.ui_dropzone:hover,
	.ui_dropzone.dragover {
		border-color: #007bff;
		background: #eef7ff;
	}

	.ui_dropzone_icon {
		font-size: 24px;
		margin-bottom: 5px;
		color: #666;
	}

	.ui_dropzone_text {
		font-size: 14px;
		color: #333;
		margin-bottom: 2px;
	}

	.ui_dropzone_hint {
		font-size: 11px;
		color: #888;
	}


	/*save btn*/
	.ui_save{
		position:absolute;
		top:20px;
		right:20px;
		width:200px;
		z-index:1000;
		pointer-events:auto;
	}

	/* lib images */
	.ui_image_library {
		display: flex;
		gap: 8px;
		margin: 10px 0;
	}

	.ui_library_thumb {
		width: 50px;
		height: 50px;
		object-fit: cover;
		border: 2px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
		/*transition: all 0.2s;*/
	}

	.ui_library_thumb:hover {
		border-color: #007bff;
		/*transform: scale(1.05);*/
	}

	.ui_library_thumb.active {
		border-color: #007bff;
		box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
	}

	/*tabs*/

	#ui_tabs{
		display:flex;
		margin-bottom:8px;
	}

	.ui_tab{
		flex:1;
		padding:6px;
		border:0;
		cursor:pointer;
		background:#ccc;
	}

	.ui_tab.active{
		background:#999;
		font-weight:bold;
	}

	.ui_tab_content{
		display:none;
	}

	.ui_tab_content.active{
		display:block;
	}
 

	.ui_field_label {
		background: none;
		border: none;
		padding: 0;
		margin-bottom: 6px;
		font-size: 12px;
		font-weight: bold;
		color: #222;
		cursor: default;
	}


	.ui_input_label {
		background: #d8d8d8;
		color: #444;
		border: 1px solid #aaa;
		cursor: default;
		font-weight: bold;
	}

	.ui_block {
		margin-bottom: 14px;
	}

	 
	.ui_input {
		width: 100%;
		box-sizing: border-box;
		padding: 6px 8px;
		margin-bottom: 6px;
		border: 1px solid #999;
		background: #f4f4f4;
	}

	.ui_select {
		width: 100%;
		padding: 6px;
	}

	.ui_color {
		width: 100%;
		height: 34px;
		padding: 0;
		border: none;
	}

	.ui_radio_row {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}

	.ui_radio_col {
		display: flex;
		flex-direction: column;
		font-size: 12px;
	}
 
  
	#ui_overlay{
		position:absolute;
		left:75%;
		top:50%;
	 
		transform:translateY(-50%);
		background:#fff;
		padding:20px;
		border-radius:6px;
		box-shadow:0 10px 30px rgba(0,0,0,0.3);
		z-index:10;
		min-width:200px;
	}

	.ui_title {
		font-weight:bold;
		margin-bottom:10px;
	}

	.ui_button{
		display:block;
		width:100%;
		padding:10px;
		color:#000;
	}

	.ui_button:hover{
		background:#000;
		color:#fff;
	}



	#three_container{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:0;
	}
 
	#top_row {
		position: relative;
		z-index: 10;
		pointer-events: none;
	}

	#ui_container {
		left: 75%;
		pointer-events: auto;
		background: #ffffff;
	}
 
	 #fabric-wrapper {
		position: fixed; z-index: 10;
		background: transparent;
		border-style: solid;
		border-color: #bbb;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	#fabric_toggle{
		position:absolute;
		left:16px;
		bottom:16px;
		width:48px;
		height:48px;
		border-radius:50%;
		background:#666;
		color:#fff;
		font-weight:bold;
		display:flex;
		align-items:center;
		justify-content:center;
		cursor:pointer;
		z-index:20;
		user-select:none;
		transition: background 0.2s ease;
	}

	#fabric_toggle:hover{
		background:#444;
	}

 
	/* Container adapts to parent size */
	.CV3DPlayerContainer {
		width: 100%;
		height: 100%;
	}

	.cv3d-CV3D *:focus {
		outline: none;
	}

	.cv3d-CV3D textarea {
		resize: none;
	}

	.cv3d-CV3D {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		border: 0px;
		margin: 0px;
		padding: 0px;
		z-index: 2;
		background-color: #CCCCCC;
	}

	.cv3d-CV3D a {
		text-align: left;
		font-family: "Open Sans", Arial, Tahoma, sans-serif;
		font-size: 15px;
	}

	.cv3d-CV3DBG {
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #000;
	}