.drwrn, #dr .drwrn{
		
		.editor *, .player *{
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			
			font-family: "Open Sans";
			font-weight: 600;
			color: #333;
			font-size: 13px;
			
			
			
			
			input:focus, textarea:focus{
				outline: none;/*1px solid rgba(0,116,232, 1.0);*/
				border-radius: 2px;
				border-color: rgba(0,116,232, 1.0);
			}
			
			input[type="file"] {
			  appearance: none;
			  -webkit-appearance: none;
			  -moz-appearance: none;
			  cursor: pointer;
			  position: relative;
			}
			
			input[type="checkbox"] {
			  appearance: none;
			  -webkit-appearance: none;
			  -moz-appearance: none;
			  width: 18px;
			  height: 18px;
			  background-color: #aaa;
			  border-radius: 2px;
			  cursor: pointer;
			  position: relative;
			}

			input[type="checkbox"]:checked::after {
			  content: ' ';
			  background-color: #666;
			  width: 12px;
			  height: 12px;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  border-radius: 2px;
			  cursor: pointer;
			}		
			
			
			input[type="number"]::-webkit-inner-spin-button,
			input[type="number"]::-webkit-outer-spin-button {
			  -webkit-appearance: none;
			  margin: 0;
			}

			input[type="number"] {
				border: solid 1px #aaa;
			  -moz-appearance: textfield; /* For Firefox */
			}
			

			input[type="range"]
			{
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				vertical-align: middle;
				
				margin: auto 5px auto 5px;

				height: 4px;
				box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25);
				
				background-color: #fff;
				
				outline: none;
				border: 1px solid #888;
				border-radius: 3px;
			}
			input[type="range"]::-webkit-slider-thumb
			{
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;

				width: 7px;
				height: 14px;
				border: 3px solid #999;
				border-radius: 1px;
				background-color: #999;
				cursor: pointer;
				padding: 2px;
			}
			input[type="range"]::-moz-range-thumb
			{
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;

				width: 1px;
				height: 8px;
				border: 3px solid #999;
				border-radius: 1px;
				background-color: #999;
				cursor: pointer;
				padding: 2px;
			}
			
			input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:hover::-moz-range-thumb{
				border: 3px solid #666;
				background-color: #666;
			}
				
				
			
		}

		.drawrun_player_container, .drawrun_editor_container, #drflp_inner, #drfl{
			display: flex;
			
			.not_supported{
				position: absolute;
				bottom: 0px;
				z-index: 10;
				background: rgba(0,0,0,0.9);
				box-shadow: 0px 0px 60px rgba(0, 0, 0, 1);
				width: 100%;
				max-width: 500px;
				padding: 40px 30px 20px 30px;
				border-radius: 3px;
				
				.information{
					position:relative;
					.text{
						color: #fff;
						font-weight: bold;
						font-size: 16px;
						line-height: 30px;
					
					}
					.buttons{
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;				
						width: 100%;
						padding: 20px;					

						a{margin: 0px 7% 0px 7%;}
					}
				}
			}

			.player{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;				
				width: 100%;
				height: 100%;
				background: #000;
				min-height: 10px;
				pointer-events: none;
				
				&.hasAnimation{
					pointer-events: unset;
				}
									
				
				.playerInner{
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;				
					width: 100%;
					height: 100%;
					background: #000;
					min-height: 10px;
						
					overflow: hidden;
					
					
					.canvas{
						display: flex;
						background: #fff;
					}	
					
					.control_wrap{
						position: absolute;
						bottom: 0px;
						width: 100%;
						height: 45px;
						display: none;
						
						.player.hasAnimation.hasControls &{
							display: block;
						}
						
						
						.control_wrapInner{
							position: relative;
							display: flex;
							margin: 55px auto auto auto;
							opacity: 0;
							width: 80%;
							height: 40px;
							background: rgba(48,48,48,0.95);
							border-radius: 5px;
							transition: all 0.4s ease;
							transition-delay: 1.0s;
							
							.animsetListOpen &{
								/*transition: border 0.1s ease;*/
								border-radius: 5px 0px 5px 5px;
							}
							
							.control_playBtn{
								width: 76px;
								height: 100%;
								background: #3c3c3c;
								border-radius: 5px 0px 0px 5px;
								
								&:hover{
									background: #3c7290;
								}
								&::before {
									background-image: url("../img/icons.svg#uiIconPlayerPlay");
									background-position: 55% center;
								}
								&.playing::before{
									background-image: url("../img/icons.svg#uiIconPlayerStop");
									background-size: 45% 45%;
									background-position: 50% center;
								}
							}
							
							.control_soundWrap{
								display: flex;
								position: absolute;
								height: 100%;
								margin: 0px 0px 0px 85px;
								transition: all 0.15s ease;
								z-index: 10;
								
								.hasSound &:hover{
									background: #3c7290;
								}
			
								.control_soundBtn{
									width: 40px;
									height: 100%;
									
									&{
										cursor: not-allowed;
									}
									.hasSound &{
										cursor: pointer;
									}
									
									.hasSound &::before{
										background-image: url("../img/icons.svg#uiIconVolumeWhite");
										background-size: 45% 45%;
										background-position: 45% center;
									}
									&::before, .muted &::before {
										background-image: url("../img/icons.svg#uiIconVolumeMuted");
										background-size: 60% 60%;
										background-position: 60% center;
										filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2)); /* Drop shadow on hover */
									}
									
								}
								
								.control_soundBarWrap{	
									position: relative;
									padding: 0px 0px 0px 0px;
									margin: 0px 0px 0px 0px;
									height: 100%;
									width: 0px;
									width: 0px;
									opacity: 0;
									transition: all 0.15s ease;
									transition-delay: 0.1s;
									overflow: hidden;

									
									.control_soundBar{
										width: 100%;
										position: relative;
										margin: 11px 0px 8px 0px;
										background: rgba(48,48,48,0.3);
										padding: 1px;
										height: 18px;
										/*border: solid 1px rgba(48,48,48,0.4);*/
										
										.control_soundBarInner{
											height: 100%;
											background: #fff;
										}
									}
								}
								
								
								.hasSound &:hover{
									transition-delay: 0.05s;
									
									.control_soundBarWrap{
										opacity: 1;
										padding: 0px 10px 0px 0px;
										width: 120px;
										transition-delay: 0.05s;
										
										.control_soundBar{

										}
									}
								}
							}
							
							
							
							
							
							

							.control_progressBarWrap{	
								display: flex;
								height: 100%;
								position: relative;
								margin: 0px 0px 0px 57px;
								height: 100%;
								width: calc(100% - 250px);
								transition: all 0.15s ease;
								transition-delay: 0.1s;
								overflow: hidden;

								
								.control_progressBar{
									width: 100%;
									position: relative;
									margin: 11px 0px 0px 0px;
									background: rgba(48,48,48,0.5);
									padding: 2px 4px 2px 4px;
									height: 18px;
									background: #3c3c3c;
									
									.control_progressBarInner{
										height: 100%;
										background: #666666;
										transition: background 0.15s ease;
										transition-delay: 0.05s;
									}
									
									&:hover{
										.control_progressBarInner{
											background: #3c7290;
										}
									}
								}
							}

						}
						
						&:hover{
							.control_wrapInner{
								margin: 5px auto auto auto;
								opacity: 1;
								transition-delay: 0.1s;
							}
						}
						
						
						
						.control_fullscreenBtn{
							width: 40px;
							height: 100%;
							margin: 0px 0px 0px 15px;
							
							&::before{
								background-image: url("../img/icons.svg#uiButtonFullscreen");
								background-size: 80%;
								background-position: 50% center;
								transition: background 0.2s ease;
							}	
							
							&:hover::before{
								background-image: url("../img/icons.svg#uiButtonFullscreen");
								background-size: 100%;
								background-position: 50% center;
							}
						}
						
						.control_animsetBtn{
							width: 40px;
							height: 100%;
							margin: 0px 0px 0px 10px;
							
							&::before{
								background-image: url("../img/icons.svg#uiButtonAnimList");
								background-size: 70%;
								background-position: 50% center;
								transition: background 0.2s ease;
							}	
							
							&:hover::before{
							}
						}						
						
						.control_animsetWrap{
							position: absolute;
							bottom: 40px;
							right: 0px;
							height: 0px;
							padding: 5px 5px 0px 5px;
							opacity: 0;
							background: rgba(48,48,48,0.95);
							border-radius: 0px 5px 0px 0px;
							overflow: hidden;
							transition: all 0.2s ease;

							.animsetListOpen &{
								height: 185px;
								opacity: 1;
							}
							
							.control_animsetWrapInner{
								position: relative;
								display: flex;
								width: 100%;
								height: 100%;	
							}
							
							ul{
								list-style: none;
								padding: 0px;
								margin: 0px;
								
								li{
									color: #fff;
									font-family: "Open Sans";
									font-size: 16px;
									padding: 0px 10px 0px 10px;
									line-height: 22px;
									vertical-align: middle;
									border-bottom: solid 1px rgba(60,114,144,0.2);
									max-width: 150px;
									
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								li.current{
									background: #3c7290;
								}
							}
							
							.control_animObjectListWrap{
								display: flex;
								flex-direction: column; /* Stack items vertically */
								align-items: flex-end; /* Align items to the bottom */
								height: 100%; /* Ensure container has height to push items down */
								padding: 0px 5px 0px 0px;
								margin: 0px 5px 0px 0px;
								height: 100%;
								overflow-y: auto;
								
								border-right: solid 1px rgba(60,114,144,0.2);
								
								&::-webkit-scrollbar {
								  width: 20px; /* Width of the vertical scrollbar */
								  height: 20px; /* Height of the horizontal scrollbar */
								}

								&::-webkit-scrollbar-track {
								  background: rgba(0,0,0,0); /* Track background */
	
								}

								&::-webkit-scrollbar-thumb {
								  background: #3c3c3c; /* Thumb color */
								}

								&::-webkit-scrollbar-thumb:hover {
								  background: #666; /* Thumb color on hover */
								}

								/* Firefox */
								&* {
								  scrollbar-width: auto; /* Options: auto, thin, none */
								  scrollbar-color: #3c3c3c #666; /* Thumb color, Track color */
								}
							}
							
							.control_animsetListWrap{
								display: flex;
								flex-direction: column; /* Stack items vertically */
								align-items: flex-end; /* Align items to the bottom */
								height: 100%; /* Ensure container has height to push items down */
								padding: 0px 0px 0px 0px;
								height: 100%;
								overflow-y: auto;
								
								&::-webkit-scrollbar {
								  width: 20px; /* Width of the vertical scrollbar */
								  height: 20px; /* Height of the horizontal scrollbar */
								}

								&::-webkit-scrollbar-track {
								  background: rgba(0,0,0,0); /* Track background */
	
								}

								&::-webkit-scrollbar-thumb {
								  background: #3c3c3c; /* Thumb color */
								}

								&::-webkit-scrollbar-thumb:hover {
								  background: #666; /* Thumb color on hover */
								}

								/* Firefox */
								&* {
								  scrollbar-width: auto; /* Options: auto, thin, none */
								  scrollbar-color: #3c3c3c #666; /* Thumb color, Track color */
								}
							}
						}
						
						
					}
				}
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			

			.editor{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;				
				width: 100%;
				height: 100%;
				background: #000;
				min-height: 10px;
				pointer-events: none;
				
				
				&.hasAnimation{
					pointer-events: unset;
				}
									
				
				.editorInner{
					position: relative;				
					width: 100%;
					height: 100%;
					background: #eee;
					min-height: 10px;
						
					overflow: hidden;
					
					.mDrawArea{
						position: relative;				
						width: 100%;
						height: calc(100% - 75px);
						display: flex;	
						
						.mSelectionCenter{
							position: absolute;
							visibility: hidden;
							width: 24px;
							height: 24px;
							margin: -12px 0px 0px -12px;
							border-radius: 50%;
							z-index: 15;

							background-image: url("../img/icons.svg#pivotTool");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							cursor: pointer;
						}
					}
					
					.mRootSW{
						transform-origin: center center;
					}
					
					.mCGDrawFieldSW{
						transform-origin: center center;
						position: relative;
						
						.mCGDrawFieldSWInner{
							position: absolute;
							transform-origin: center center;
						}
						
						canvas{
							position: absolute;
							background: none;
							transform-origin: 0px 0px;
						}
					}
					
					
					
					.mLayerListWrap{
						display: none;
						position: absolute;
						bottom: 60px;
						left: 0px;
						background: #ddd;
						padding: 10px 10px 10px 0px;
						
						&.Active{
							display: block;
						}
						
						&::before{
							display: block;
							width: calc(100% + 5px);
							height: 40px;
							line-height: 40px;
							vertical-align: middle;
							background: #888;
							color: #fff;
							font-size: 16px;
							font-weight: bold;
							margin: -10px 0px 0px -10px;
							padding: 0px 0px 0px 15px;
							content: "Layers";
						}
						
						.playing &{
							pointer-events: none;
						}
						
						
						.mLayerList{
							position: relative;
							max-height: 50vh;
							min-height: 110px;
							overflow-y: auto;
							width: 270px;
							
							.mLayerListItem{
								display: flex;
								justify-content: center;
								align-items: center;
								width: 250px;
							
								.mLayerListItemVisHolder{
									display: flex;
									justify-content: center;
									align-items: center;
									flex-direction: column; /* Stack items vertically */
									/*align-items: flex-end;*/ /* Align items to the bottom */
									
									width: 38px;
									padding: 2px;
									
									.mLayerListItemToggleOpacity{
										width: 30px;
										height: 20px;
										font-size: 12px;
										padding: 0px 0px 0px 4px;
									}
									
									.mLayerListItemToggleVis{
										width: 24px;
										height: 24px;
										margin: 0px 0px 4px 0px;
										background-image: url("../img/icons.svg#uiIconToggleVisibility");
										background-repeat: no-repeat;
										background-size: 100%;
										background-position: center;
										cursor: pointer;
										
										&.notvis{
											opacity: 0.35;
										}
									}
										
								}
								
								.mLayerListItemCanvas{
									display: flex;
									justify-content: center;
									align-items: center;
									background: #fff;
									width: 50px;
									margin: 2px;
									pointer-events: none;
								}
								
								.mLayerListItemTitle{
									position: relative;
									display: flex;
									justify-content: center;
									align-items: center;
									width: 150px;
									padding: 2px 2px 2px 0px;
									margin: 0px 0px 0px 10px;
									font-size: 14px;
									
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									cursor: edit;
									
									input{
										cursor: unset;
										width: 100%;
										margin: 0px;
										font-size: 14px;
										padding: 2px 10px 2px 10px;
										text-align: center;
									}
								}	
								
								border-bottom: solid 1px #888;
								&.selected{
									background: #bdd0dc;
								}

							}
							
						}
						
						.mLayerCtrl{
							display: flex;
							justify-content: left;
							align-items: center;
							width: 100%;
							margin: 10px 0px 0px 0px;
							
							.mLayerAdd{
								width: 28px;
								height: 28px;
								margin: 0px 33px 0px 0px;
								background-image: url("../img/icons.svg#uiButtonAdd");
								background-repeat: no-repeat;
								background-size: 100%;
								background-position: center;
								cursor: pointer;
							}
							
							.mLayerRemove{
								width: 28px;
								height: 28px;
								margin: 0px 20px 0px 0px;
								background-image: url("../img/icons.svg#uiButtonRemove");
								background-repeat: no-repeat;
								background-size: 100%;
								background-position: center;
								cursor: pointer;
							}
						}
						
						
					}

					.mTimelineFramePreviewWrap{
						display: flex;
						bottom: 0px;
						width: calc(100% - 700px);
						min-width: 275px;
						height: 30px;
						margin: 0px 0px 0px 40px;
						
						.mPlayBtn{
							width: 60px;
							min-width: 60px;
							height: 30px;
							margin: 0px 0px 0px 0px;
							background-image: url("../img/icons.svg#uiButtonPlayWide");
							background-repeat: no-repeat;
							background-size: 100%;
							cursor: pointer;
							
							.playing &{
								background-image: url("../img/icons.svg#uiButtonStopWide");
							}
						}
						
						.mAddFrameBtn{
							width: 30px;
							min-width: 30px;
							height: 30px;
							margin: 0px 5px 0px 0px;
							background-image: url("../img/icons.svg#uiButtonAddFrame");
							background-repeat: no-repeat;
							background-size: 100%;
							cursor: pointer;
						}		
						.mRemoveFrameBtn{
							width: 30px;
							min-width: 30px;
							height: 30px;
							margin: 0px 0px 0px 0px;
							background-image: url("../img/icons.svg#uiButtonRemoveFrame");
							background-repeat: no-repeat;
							background-size: 100%;
							cursor: pointer;
						}							
						
						.mTimelineFramePreview{
							width: 100%;
							min-width: 144px;
							height: 24px;
							
							.playing &{
								pointer-events: none;
							}
							
							.FrameItem{
								width: 48px;
								height: 24px;
								margin: 0px 0px 0px 0px;
								border: solid 1px #ddd;
								background: #fff;
								opacity: 0.5;
								
								&.Active{
									border: solid 1px #0074e8;
									opacity: 1;
								}
								
								&.Empty{
									opacity: 0.2;
								}
							}
						}
					}
					
				
					.mControlPanel{
						width: 100%;
						position: relative;
						box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.3);
						zoom: 1.25;
						
						
						.mControlPanelTop{
							display: flex;
							align-items: center;	
							height: 30px;
							background: #ddd;
							width: 100%;
							position: relative;		

							input[type="number"]{
								height: 20px;
								font-size: 13px;
								padding: 0px 0px 2px 5px;
							}							
						}
						
						.mControlPanelBottom{
							display: flex;
							height: 30px;
							background: #ddd;
							width: 100%;
							position: relative;	
						}
						
						.mColorPickWrap{
							width: 50px;
							height: 100%;	
							position: relative;			
							overflow: hidden;
							
							
							.mColorPick{
								margin: -25% 0px 0px -15px;
								width: 80px;
								height: 200%;
								background: #ccc;
								padding: 0px;
								border: none;
								border-image-width: 0px;
							}
						}
						
						.mBrushPick{
							width: 100px;
							min-width: 100px;
							margin: 12px 5px 0px 5px;
						}
						.mAlphaPick{
							width: 80px;
							min-width: 80px;
							margin: 12px 5px 0px 5px;
						}	
						
						.mToggleLayersBtn{
							min-width: 30px;
							min-height: 30px;
							margin: 0px 0px 0px 5px;
							background-image: url("../img/icons.svg#uiButtonLayers");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							cursor: pointer;
						}
						
						.mFrameDuration{
							width: 40px;
							margin: 0px 10px 0px 0px;
						}
						.mFrameDurationIcon{
							min-width: 18px;
							min-height: 18px;
							margin: 0px 5px 0px 110px;
							background-image: url("../img/icons.svg#uiIconDuration");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
						}
						
						.mCurrentFrameInput{
							width: 40px;
							margin: 0px 10px 0px 0px;
						}
						.mCurrentFrameInputIcon{
							min-width: 18px;
							min-height: 18px;
							margin: 0px 5px 0px 0px;
							background-image: url("../img/icons.svg#uiIconHash");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
						}
						
						.mDefaultStroke{
							margin: 0px 0px 0px 10px;
						}
						
						.mBrushPickInput{
							margin: 0px;
							margin-left: 25px;
						}
						.mAlphaPickInput{
							margin: 0px;
							margin-left: 20px;
						}
						
						
						.mCurrentTool{
							min-width: 30px;
							min-height: 30px;
							margin: 0px 5px 0px 15px;
							background-image: url("../img/icons.svg#pencil");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							cursor: pointer;
							
							&.eraserTool{
								background-image: url("../img/icons.svg#eraser");
							}
						}
						
						.mDrawFieldOpacity{
							width: 80px;
							margin: 0px 10px 0px 0px;
						}
						.mDrawFieldOpacityIcon{
							min-width: 18px;
							min-height: 18px;
							margin: 0px 5px 0px 0px;
							background-image: url("../img/icons.svg#uiIconOpacity");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
						}	


						
						.mVolumeInput{
							width: 80px;
							margin: 0px 10px 0px 0px;
						}
						.mVolumeInputIcon{
							min-width: 30px;
							min-height: 18px;
							margin: 0px 5px 0px 10px;
							background-image: url("../img/icons.svg#uiIconVolume");
							background-repeat: no-repeat;
							background-size: 40%;
							background-position: center;
							&{
								cursor: not-allowed;
							}
							.hasSound &{
								cursor: pointer;
							}
							
							&.muted{
								background-image: url("../img/icons.svg#uiIconVolumeMuted");
								background-size: 80%;
							}
						}		
						
						.mImportSoundBtnWrap{
							position: relative;
							margin: 0px 5px 0px 30px;
							cursor: pointer;
							
							.mImportSoundBtn{
								width: 30px;
								height: 30px;
								min-width: 30px;
								min-height: 30px;
								overflow: hidden;
								cursor: pointer;
								
							}
							&::before{
								content:" ";
								width: 30px;
								height: 30px;
								position: absolute;
								left: 0px;
								top: 0px;
								background-color: #ddd;
								background-image: url("../img/icons.svg#uiButtonMusic");
								background-repeat: no-repeat;
								background-size: 100%;
								background-position: center;
								z-index: 10;
								pointer-events: none;
								cursor: pointer;
							}							
						}
						
						.mRemoveSoundBtn{
							display: none;
							min-width: 30px;
							min-height: 30px;
							margin: 0px 5px 0px 10px;
							background-image: url("../img/icons.svg#uiButtonCloseWindow");
							background-repeat: no-repeat;
							background-size: 200%;
							background-position: center;
							cursor: pointer;
							
							.hasSound &{
								display: block;
							}
						}
						
						.mSyncSoundBtn{
							display: none;
							min-width: 30px;
							min-height: 30px;
							margin: 0px 5px 0px 10px;
							background-image: url("../img/icons.svg#uiButtonMusicSync");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							opacity: 0.3;
							cursor: pointer;
							
							.hasSound &{
								display: block;
							}
							
							&.Active{
								opacity: 1;
							}
						}
						
						.mSaveBtn{
							position: absolute;
							right: 10px;
							min-width: 50px;
							min-height: 50px;
							margin: 0px 10px 0px 10px;
							background-color: #ddd;
							background-image: url("../img/icons.svg#uiButtonSave");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							cursor: pointer;
							z-index: 100;
						}
						
												
					}
					
					
					.mOverlayContainer{
						position: absolute;
						z-index: 1000;
						top: 0px;
						left: 0px;
						width: 0%;
						height: 0%;
						background: none;
						
						
						&.Active{
							width: 100%;
							height: 100%;
						}
						
						.mGenericOverlay{
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;	
							width: 100%;
							height: 100%;
							background: rgba(0,0,0,0.75);
							box-shadow: inset 0px 8px 55px rgba(0, 0, 0, 0.75);
							
							.ModalGeneric{
								display: block;
								position: relative;
								width: 320px;
								min-height: 250px;
								padding: 30px 20px 30px 20px;
								background: #ddd;
								box-shadow: 0px 8px 45px rgba(0, 0, 0, 0.75);
								
								.Wrap{
									margin: 10px 0px 10px 0px;
								}
								
								input[type="text"]{
									width: 280px;
									height: 22px;
									font-size: 13px;
									font-weight: 500;
									margin: 0px 0px 0px 0px;
									padding: 5px 10px 5px 10px;
								}
								textarea{
									width: 280px;
									min-width: 280px;
									max-width: 280px;
									height: 150px;
									font-size: 13px;
									font-weight: 500;
									line-height: 18px;
									padding: 5px 10px 5px 10px;
									margin: 0px 0px 5px 0px;
								}
								
								.Header{
									position: relative;
									height: 30px;
									background: #ccc;
									font-size: 14px;
									padding: 7px 0px 5px 45px;
									margin: -30px -20px 0px -20px;
									
									&::before{
										position: absolute;
										display: block;
										content:"";
										min-width: 20px;
										min-height: 20px;
										margin: -2px 0px 0px -25px;
										background-image: url("../img/icons.svg#uiIconInfo");
										background-repeat: no-repeat;
										background-size: 100%;
										background-position: center;
									}
									
									.Close{
										position: absolute;
										top: 0px;
										right: 8px;
										min-width: 50px;
										min-height: 30px;
										margin: 0px 0px 0px 0px;
										background-image: url("../img/icons.svg#uiButtonCloseWindow");
										background-repeat: no-repeat;
										background-size: 120%;
										background-position: center;
										cursor: pointer;
									}
								}
								
								.H2{
									font-size: 13px;
									color: #666;
									pointer-events: none;
									margin: 10px 0px 1px 0px;
								}
								
								.ID{
									padding: 0px 10px 0px 10px;
									font-size: 13px;
									width: 120px;
								}
								
								.Publish{
									margin: 5px 0px 0px 5px;
									
									&::before{
										display: block;
										content: "Publish";
										font-size: 13px;
										margin: 3px 0px 0px 22px;
									}
								}
								
								.DownloadBtn{
									/*position: absolute;
									top: 0px;
									right: 8px;*/
									min-width: 120px;
									width: 120px;
									min-height: 30px;
									margin: 10px 0px 0px 0px;
									background-image: url("../img/icons.svg#uiButtonDownload");
									background-repeat: no-repeat;
									background-size: 100%;
									background-position: center;
									cursor: pointer;
								}
								
								.SaveBtn{
									position: absolute;
									right: 16px;
									min-width: 68px;
									width: 68px;
									min-height: 68px;
									margin: -62px 0px 0px 0px;
									background-image: url("../img/icons.svg#uiButtonSave");
									background-repeat: no-repeat;
									background-size: 100%;
									background-position: center;
									cursor: pointer;
								}
							}
						}
					}
	
				}
			}			
			
			
			
			
			
			
			
			
			
			
			

			.loading{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;				
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.75);
				box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25);
				/*pointer-events: none;*/
				z-index: 1000;
				
				.loadingProgressWrap{
					position: relative;
					width: 60%;
					height: 16px;
					padding: 3px 5px 3px 5px;
					border-radius: 3px;
					background: #3c3c3c;
					box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
					
					.loadingProgress{
						width: 0%;
						height: 10px;
						background: #3c7290;
					}
					.loadingProgressExtra{
						display: none;
						position: absolute;
						top: 2.5px;
						width: 100%;
						color: #fff;
						font-family: "Open Sans";
						font-size: 14px;
						line-height: 12px;
						font-weight: bold;
						text-align: center;
						vertical-align: middle;
						text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
					}
				}
			}
		}

		
		ul li{
			cursor: pointer;
		}	
		
		.btn{
			position: relative;
			transition: filter 0.35s ease; /* Added transition for smooth effect */
			cursor: pointer;
		}
		.btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/*background-image: url("../img/icons.svg#uiIconPlayerPlay");*/
			background-size: 50% 50%;
			background-repeat: no-repeat;
			background-position: center;	
			transition: inherit;	
		}
		.btn:hover{
			/*filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25));*/
		}	
		.btn:hover::before{
			filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6)); /* Drop shadow on hover */
		}		
		
		
		
		
		.closeBtn{
			width: 100px;
			height: 100px;
			background: #3C7290;
		}
		.closeBtn::before {
			background-image: url("../img/icons.svg#uiIconPlayerPlay");
			background-position: 55% center;
		}	
		.closeBtn:hover{
		}
		.closeBtn:hover::before{
		}	
		
		
		.downloadBtn{
			width: 300px;
			height: 58px;
		}
		.downloadBtn::before{
			background-image: url("../img/icons.svg#uiButtonDownload");
			background-size: 100%;
			background-position: center;		
		}	
		
	}