body, html {
	width: 100%;
	height: 100%;
	background: radial-gradient(rgb(218, 218, 218), rgb(202, 204, 210));
	background-repeat: no-repeat;
	background-size: 250% 250%;
	background-color: #DBDDDF;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


body, input, button, textarea, label {
	font-size: 14px;
	line-height: 16px;
}

input, select {
	border: 1px solid #aaa;
	outline: none;
	padding: 0 4px;
	height: 22px;
	box-shadow: none;
}

.hidden {
	display:none;
}

.loadingScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	z-index: 200;
	transition: opacity 0.5s ease;
}

.loadingScreen.disabled {
	opacity: 0;
}

.loadingScreen .panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	background-color: #353431;
	height: 31px;
	color: #bbb;
	padding: 0.5em 1.4em;
}

.zoom-in {
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

.zoom-out {
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}

.grab {
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.grabbing {
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.colorInputBlocker,
.menuInputBlocker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 300;
}

.menuInputBlocker {
	z-index: 99;
}

input::-webkit-inner-spin-button, 
input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0; 
	
}

input[type=number] {
	-moz-appearance:textfield;
}

select,
.comboSelect {
	height: 22px;
	margin: 0;
	outline: none;
	cursor:pointer;
}

.comboSelect {
	position: absolute;
	right: 0;
	width: 22px;
	padding: 0;
	top: 0;
	background-color: transparent;
	border: 0;
}

select,
.comboSelect,
select::-ms-expand {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('../assets/selectButton.png');
	background-repeat:no-repeat;
	background-position: right center;

}

select::-ms-expand {
	display: none;
}

button {
	cursor:pointer;
}


.dnone {
	display: none;
  	}
	  
	 .dnone1 {
	display: none;
  	}

	  .dnone2 {
		position: absolute;
		top: 20px;
		left: -2900px;
		display: none;
		  }

	  .animationstagerender {
	display: box;
	position: absolute;
    top: 20px;
    left: -2900px;
    width: 1920px;
	height: 1080px;
	background-color: rgb(255, 255, 255);
   	}


	  .timeline {
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 140px;
		z-index: 55;
		background-color: rgb(216, 216, 216);
		box-shadow: 0px 1px 2px 0 #494743;
	}
  
  
  #box {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: red;
    left: 122px;
    top: 120px;
  }
  


  .timeline_point {
    position: absolute;
    left: 48px;
    right: 2px;
    bottom: 5px;
    height: 133px;
    background-color: #dddddd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

  .timeline_point_intern{
    display: -webkit-box;
  

  }

  .timeline_point_neutral{
    width: 182px;
    height: 102px;
	text-align: left;
	margin-left: 1px;
    background-color: rgb(238, 238, 238);
  }


  .timeline_point_neutral{
    width: 182px;
    height: 102px;
	text-align: left;
	margin-left: 1px;
    background-color: rgb(238, 238, 238);
  }

  .timeline_point_activ {
    width: 182px;
    height: 102px;
	box-shadow: 1px 1px 7px -2px rgb(212, 144, 144);
    text-align: left;
	margin-left: 1px;
    background-color: rgb(243, 243, 243);
}

.timeline_point_activ2 {
	width: 182px;
    height: 102px;
    text-align: left;
	margin-left: 10px;
	margin-top: 7px;
  }

.bssvglogo {
	position: relative;
    left: -3px;
    top: -18px;
}


.icon {
	position: absolute;
    /* left: 170px; */
    margin-top: 17px;
    margin-left: 4px;
    width: 55px;
    height: 55px;
}

.playicon {
    position: absolute;
    /* left: 170px; */
    margin-top: 61px;
    margin-left: 4px;
    width: 54px;
    height: 54px;
	
}

.icon2 {
    position: absolute;
    /* left: 170px; */
	margin-top: 40px;
    margin-right: 20px;
	width: 55px;
	height: 55px;

}

.icon3 {
    position: relative;
    left: -5px;
    top: -5px;
}

.icon4 {
    position: relative;
    left: -49px;
    top: 24px;
}


#tp_0 {
    /* margin-left: 50px; */
    margin-right: -6px;
    margin-top: 7px;
}

#tp_1{
margin-left: 1px;
}


.toolbar {
	position: fixed;
	padding: 14px 5px 8px 8px;
	top: 28px;
	left:0px;
	width: 76px;
	background-color: #fff;
	border-radius: 0 5px 5px 0;
	z-index: 60;
	max-height: calc(100% - 200px);
	box-shadow: 0px 1px 7px -3px #717171;
	overflow-y: auto;
	overflow-x: hidden;
}

.toolsContainer {
	margin-top: -13px;
}

.toolbarSection {
	position: relative;
	margin-bottom: 20px;
}


.toolbarSection.extraSpace {
	margin-bottom: 30px;
}

.toolbarSection:last-child {
	margin-bottom: 0;	
}


.tool {
	position: relative;
	display:inline-block;
	background-color: #fff;
	line-height: 0;
	text-align: center;
	font-size: 0;
	padding: 0;
	width: 28px;
	height: 28px;
	margin: 0 0 2px 0;
	cursor:pointer;
	border-radius: 3px;
	overflow: hidden;
	background-repeat:no-repeat;
	background-size: 28px;
}

.tool:hover,
.tool.active {
	background-color: #ddd8e0;
}


.colorContainer {
	height: 60px;
}

.colorContainer input {
	display:none;
}

.colorSwitchButton {
	position: absolute;
	display:block;
	width: 20px;
	height: 20px;
	padding: 0;
	cursor:pointer;
	right: 3px;
	top: 0px;
	background-image: url(../assets/icon_switchColor.svg);
	background-size: 16px;
	background-repeat:no-repeat;
	background-position: 2px;
}


.toolbarLabel {
	top: -18px;
	position: absolute;
	color: rgb(78, 78, 78);
	font-size: 0.85em;
	display:block;
	margin-bottom: 3px;
}

.opacityInput {
	width: 100%;
}


.blendModeSelect {
	width: 100%;
	padding: 0;
}

.strokeInput {
	width: 100%;
}

.strokeButtons {
	position: absolute;
	top: 0;
	right: 0;
	display:inline-block;
	height: 22px;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	line-height: 0;
}


.inputHelper {
	border: 0;
	background-color: transparent;
	margin: 0 0 1px 0;
	width: 21px;
	height: 10px;
	text-align: center;
	padding: 0;
	display:block;
	line-height: 0;
	outline:none;
}


.statusBar {
	position: fixed;
	top: 0;
	right: 0;
	background-color: white;
	border-radius: 3px 0 0 0;
	margin: 0;
	padding: 5px;
	height: 33px;
	z-index: 60;
}

.statusBarSection {
	position: relative;
	display:inline-block;
	margin-left: 1em;
}

.selectionTypeLabel {
	color: rgb(85, 85, 85);
}

.selectionTypeLabel:not(.none) {
	color: #009dec;
}

.zoomInput {
	width: 60px;
}




.toolOptionPanel {
	position: absolute;
    bottom: 23px;
    right: 2px;
    background-color: #fff;
    padding: 7px 4px 0px 4px;
    border-radius: 0 0 3px 3px;
    z-index: 135;
}

.toolOptionPanel .options {
	margin: 0.6em 0 0 0;
	clear:both;
}

.toolOptionPanel .option-section {
	position: relative;
}

.toolOptionPanel .option-section:after {
	content: "";
	display:table;
	clear:both;
	margin-bottom: 0.4em;
}

.toolOptionPanel .titleSection {
	margin-top: 1em;
}

.toolOptionPanel h3 {
	font-size: 0.85em;
	margin: -7px -10px 6px -10px;
	padding: 5px 10px;
	cursor: move;
	color: #999;
	display:inline;
}

.toolOptionPanel h4 {
	font-size: 0.85em;
}

.toolOptionPanel input[type=number] {
	width: 40px;
	margin: 0;
}

.toolOptionPanel input[type=checkbox] {
	margin: 0;
}

.toolOptionPanel input[type=text] {
	width: 100px;
}

.toolOptionPanel input[type=file] {
	width: 87px;
	border: none;
	opacity: 0;
}

.toolOptionPanel label {
	margin-right: 10px;
	display:block;
	float:left;
	line-height: 1.8;
}

.toolOptionPanel label,
.toolOptionPanel input,
.toolOptionPanel select,
.toolOptionPanel button {
	font-size: 0.85em;
}

.toolOptionPanel input,
.toolOptionPanel select {
	text-align: right;
	display:inline-block;
	float:right;
}

.toolOptionPanel .option-section button {
	width: 100%;
}

.toolOptionPanel .toolOptionResetButton {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 9px;
	right: 10px;
	text-align: center;
	padding: 1px;
	line-height: 0;
}

.toolOptionPanel .note,
.toolOptionPanel .warning {
	margin: 1em 0 0 0;
	color: #888;
	font-size: 0.85em;
	max-width: 180px;
}

.toolOptionPanel .warning {
	color: #e4141b;
}

.toolOptionPanel .option-section .fontImportFakeButton {
	position: absolute;
	width: 80px;
	right: 0;
	pointer-events: none;
}



.appNav {
    position: fixed;
    top: 0;
    right: 0;
    height: 33px;
    width: 175px;
    z-index: 100;
}

.forw {
    margin-top: -5px;
    margin-left: -14px;
    margin-bottom: 5px;
}

.back {
    margin-top: -5px;
    margin-left: 19px;
    margin-bottom: 5px;
}

.appNav>.topMenu {
	position: relative;
	background-color: rgb(241, 240, 240);
	border-radius: 0 0 0 5px;
	height: 33px;
	
}

.appNav .topMenu .burgerButton {
	margin-top: 2px;
	height: 12px;
	width: 12px;
}

.appNav .topMenu .burgerButton line {
	stroke: #bbb;
}

.appNav .topMenu li:hover .burgerButton line {
	stroke: rgb(134, 134, 134);
}

.appNav .topMenu>li {
	float:left;
	position: relative;
	box-sizing: border-box;
	height: 30px;
	padding: 7px 14px;
	cursor:default;
	white-space: nowrap;
	background-color: #F5F5F5;
	color: #444444;
}

.appNav .topMenu>li.empty {
	color: rgb(70, 70, 70);
}


.appNav .topMenu>li:not(.empty).active,
.appNav .topMenu>li:not(.empty):hover {
	color: rgb(48, 48, 48);
}

.appNav li.halfWidth {
	display:inline-block;
	width: 49%;
}

.appNav li.halfWidth.left {
	border-right: 1px solid #555;
}

.appNav .subMenu {
	display:none;
	position: absolute;
	z-index: -1;
	top: 30px;
    left: 0px;
	background-color: #F5F5F5;
	
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.082);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overflow-x: hidden;
	min-width: 200px;
}

.appNav .subMenu>li {
	position: relative;
	padding: 10px 20px;
	color: #353431;
	cursor: default;
}

.appNav .subMenu>li:last-child {
	padding-bottom: 14px;
	
}

.appNav .subMenu>li:not(.title):hover {
	background-color: #eeeeee;
	color: rgb(44, 44, 44);
}

.appNav .subMenu>li.title {
	color: #888;
	font-size: 0.7em;
}

.appNav .subMenu>li.title:not(:first-child) {
	border-top: 1px solid rgba(85, 85, 85, 0.397);
	margin-top: 1em;
}

.appNav .subMenu>li>.note {
	color: #888;
	font-size: 0.85em;
	display:inline-block;
	margin-left: 1em;
}

.appNav li.space {
	margin: 0;
	padding: 0;
	height: 0;
	border: 0;
	}

.appNav li:first-of-type.space {
	display:none;
}

.appNav a {
	color: inherit;
	text-decoration: none;
	cursor:default;
}

.fileUploadInput,
.fileURLInput {
	position: absolute;
	left: 0;
	top: 0;
	width: 180px;
	height: 35px;
	opacity: 0;
}


/* sub sub menu */

.subSubMenu {
	display:none;
	position: relative;
	margin: 6px 10px;
}

.subSubMenu.active {
	display:block;
	color: inherit;
}
.appNav .subMenu>li:hover .subSubMenu {
	color: rgb(82, 82, 82);
}

.subSubMenu>li {
	position: relative;
	padding: 6px 0;
}

.subSubMenu>li:hover {
	color: rgb(80, 80, 80);
}



/* document settings panel */

.documentSettingsContainer {
	position: absolute;
	top: 65px;
	left: 80px;
	width: 400px;
	height: 300px;
	padding: 10px;
	background-color: #ddd;
}



#download {
    /* position: absolute; */
    margin-left: 12px;
    margin-right: 5px;
    z-index: 550;
    color: #9a9a9a;
    text-decoration: none;
}


#remove_frame {
	display: none;
}

/* LoadingScreen */

.loadingscreenfull {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 290;
	background: radial-gradient(rgb(202, 204, 210), rgb(218, 218, 218));
	background-repeat: no-repeat;
	background-size: 180% 180%;
	background-color: #DBDDDF;
	opacity: 1;
	transition: all 0.9s ease-in-out;
}

.dnone2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 290;
	opacity: 0;
	transition: all 0.9s ease-in-out;
}


.filmsvg{
margin-left: 30px;
  }


.loding{
	margin-top: 45px;
	margin-left: 50px;
	width:165px;
	height:165px;
	box-sizing:border-box;
	border-radius:50%;
	border-top:10px solid #e99a24;
	position:relative;
	animation:a1 5s linear infinite;
	z-index: 4000;
  }
  
  .loding:before,.loding:after{
	content:'';
	width:165px;
	height:165px;
	position:absolute;
	left:0;
	top:-10px;
	box-sizing:border-box;
	border-radius:50%;
  }
  .loding:before{
	border-top:10px solid #fd4646;
	transform:rotate(120deg);
  }
  .loding:after{
	border-top:10px solid #3a7aa5;
	transform:rotate(240deg);
  }
  
  .loding span{
	text-align:center;
	width:165px;
	height:165px;
	position:absolute;
	line-height:200px;
	color:#fff;
	animation:a2 5s linear infinite;
  }
  
  @keyframes a1{
	to{
	  transform:rotate(360deg);
	}
  }
  
  @keyframes a2{
	to{
	  transform:rotate(-360deg);
	}
  }

 
  .rendering{
	text-align:left;
	position:absolute;
	top: 58px;
	left: 63px;
	min-height: 138px;
	line-height: 3ex;
	color:rgb(70, 68, 68);
	background-color:  rgb(235, 235, 235);
	padding-left: 197px;
	padding-right: 50px;
	border-radius: 12px;
	font-size: 3em;
  }

  .slider {
	-webkit-appearance: none;
    position: relative;
    width: 160px;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.6;
    -webkit-transition: .2s;
    transition: opacity .2s;
	border-radius: 7px;
    top: -6px;
    left: -174px;
  }
  
  .slider:hover {
	opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 8px;
	height: 8px;
	background: rgb(131, 131, 131);
	border-radius: 4px;
	cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
	width: 8px;
	height: 8px;
	background: rgb(131, 131, 131);
	border-radius: 4px;
	cursor: pointer;
  }


  .timeline_point_holder {
    margin-top: 7px;
	width: 182px;
	height: 102px;
    margin-left: 10px;
    box-shadow: 1px 0px 3px -1px rgba(61, 61, 61, 0.596);;
}



.showduration {
    position: relative;
    top: -177px;
    left: 10px;
    color: #8e8e8e;
}


	 .easing {
		width: 101px;
		height: 23px;
		position: relative;
		top: -105px;
		left: 57px;
		color: #8e8e8e;
		background-color: #d8d7d7;
		border: 0px;
	}


	.saveicon {
		width: 25px;
		height: 53px;
		position: relative;
		top: -128px;
		left: 158px;
		background-color: #d8d7d7;
		border-bottom-left-radius: 9px;
		border: 0px;
	}


	.paperCanvasbox {
		z-index: 25;
	}

	.paperCanvasbox_activ {
		z-index: 35;
	}

	.paperCanvasbox_full {
		position: fixed;
			top: 0px;
			left: 0px;
			   width: 100%;
			height: 100%;
			background-color: rgb(255, 255, 255);
			pointer-events: none;
			transition: all 0.2s ease-in-out;
	}


	.add_img2 {
		opacity: 0;
		margin-left: -120px;
	}

	.thevidfile {
		position: fixed;
			top: 0px;
			left: 0px;
			z-index: 100;
	}

	.thevidfile2 {
		position: fixed;
			top: 0px;
			left: 200px;
			z-index: 100;
	}


	.awesome2 {
		object-fit: cover;
	}