nx-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	--border: 1px solid darkgreen;
	outline: none;
	resize: both;
	box-shadow: 0 0 4px 0 darkgreen;
}

dialog {
	width: calc(100% - 50px);
	height: calc(100% - 50px);
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border: 1px solid darkgreen;
	outline: none;
	resize: both;
	box-shadow: 0 0 4px 0 darkgreen;

	div.head .rect1, div.head .rect2, div.head .rect3 {
		display: none;
		width: 50px;
		height: 100%;
	}

	div.head .rect1 {
		background-color: red;
	}
	div.head .rect2 {
		background-color: darkgreen;
	}
	div.head .rect3 {
		background-color: olive;
	}

	div.head {
		display: flex;
		align-items: center;
		--height: 30px;
		background-color: darkgreen;
		padding: 4px;
		cursor: move;
	}
	div.head:hover {
		filter: brightness(110%);
	}

	div.head span {
		font-size: 12px;
		position: relative;
	}

	div.head span.title {
		color: #ddd;
		margin-left: 4px;
		font-weight: bold;
		white-space: nowrap;
	}

	div.head span.sub-title {
		color: #ccc;
		margin-left: 8px;
		font-style: italic;
		width: 100%;
	}

	div.head form {
		margin: 0;
	}
	div.head button {
		margin-right: 4px;
		background-color: transparent;
		border: none;
		color: #ccc;
		font-size: x-small;
	}
	div.head button:hover {
		cursor: pointer;
	}

	div.contents {
		display: flex;
		width: 100%;
		height: 100%;
		border: 1px solid darkgreen;
		background: white;
	}
	div.left {
		position: relative;
		width: 16px;
		height: 100%;
		background-color: #ddd;
		display: none;
	}

	div.left span {
		writing-mode: vertical-rl;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		color: #ccc;
		font-weight: 700;
		width: 100%;
		height: 100%;
		margin-left: 3px;
		margin-top: 3px;
	}
	div.close2 {
		display: none;
		position: absolute;
		right: 0;
		top: 3px;
		cursor: pointer;
		color: #666;
	}
	div.close2 svg:hover {
		color: #999;
	}

	div.body {
		display: flex;
		width: 100%;
		height: unset;
		--border: 3px solid #999;
		--border-top: none;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	ng-sphere.icon {
		margin-left: 8px;
	}

	buttons {
		display: flex;
		--position: absolute;
		--right: 4px;
	}

	ng-sphere {
		display: flex;
		position: relative;
		--width: 16px;
		--height: 16px;
		cursor: pointer;
		margin-right: 4px;
	}
	ng-sphere:hover {
		filter: brightness(90%);
	}
	ng-sphere:active {
		filter: brightness(80%);
	}

	ng-sphere:hover::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	ng-sphere.apply:hover::after {
		background-size: 14px 14px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><polyline points="2.5,7 6,10 11,3" style="fill:none;stroke:white;stroke-width:2px;" /></svg>');
	}

	ng-sphere.reset:hover::after {
		background-size: 12px 12px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true"><path d="M10 5h5V0"></path><path d="M15 8a6.957 6.957 0 0 1-7 7 6.957 6.957 0 0 1-7-7 6.957 6.957 0 0 1 7-7 6.87 6.87 0 0 1 6.3 4"></path></svg>');
	}

	ng-sphere.close:hover::after {
		background-size: 12px 12px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true" viewBox="0 0 16 16"><path d="M2 2l12 12M14 2L2 14"></path></svg>');
	}
}




@keyframes runIn {
	0% {
		transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
	}
	70% {
		transform:translateX(30px) skewX(0deg) scaleX(.9);
	}
	100% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
}
@keyframes runOut {
	0% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
	30% {
		transform:translateX(-30px) skewX(-5deg) scaleX(.9);
	}
	100% {
		transform:translateX(1500px) skewX(30deg) scaleX(1.3);
	}
}

:host(.run) {
	dialog {
		transform:translateX(-1500px);
		animation: runIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		transform:translateX(-1500px);
		animation: runOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}

:host(.reverseRun) {
	dialog {
		transform:translateX(-1500px);
		animation: reverseRunIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		transform:translateX(-1500px);
		animation: reverseRunOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes reverseRunIn {
	0% {
		transform:translateX(1500px) skewX(-30deg) scaleX(1.3);
	}
	70% {
		transform:translateX(-40px) skewX(0deg) scaleX(.9);
	}
	100% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
}
@keyframes reverseRunOut {
	0% {
		transform:translateX(0px) skewX(0deg) scaleX(1);
	}
	30% {
		transform:translateX(30px) skewX(5deg) scaleX(.9);
	}
	100% {
		transform:translateX(-1500px) skewX(-30deg) scaleX(1.3);
	}
}


:host(.moveUp) {
	dialog {
		animation: moveUpIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		animation: moveUpOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes moveUpIn {
	0% {
		transform:scale(.5) translateY(1000px);
		opacity:0;
	}
	100% {
		transform:scale(1) translateY(0px);
		opacity:1;
	}
}
@keyframes moveUpOut {
	0% {
		transform:scale(1) translateY(0px);
		opacity:1;
	}
	100% {
		transform:scale(.5) translateY(1000px);
		opacity:0;
	}
}

:host(.moveDown) {
	dialog {
		animation: moveDownIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		animation: moveDownOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes moveDownIn {
	0% {
		transform:scale(.8) translateY(-1000px);
		opacity:0;
	}
	100% {
		transform:scale(1) translateY(0px);
		opacity:1;
	}
}
@keyframes moveDownOut {
	0% {
		transform:scale(1) translateY(0px);
		opacity:1;
	}
	100% {
		transform:scale(.8) translateY(-1000px);
		opacity:0;
	}
}


:host(.zoom) {
	dialog {
		animation: zoomIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes zoomIn {
	0% {
		transform:scale(0);
	}
	100% {
		transform:scale(1);
	}
}

@keyframes zoomOut {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(0);
	}
}

:host(.fade) {
	dialog {
		animation: fadeIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		animation: fadeOut 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

:host(.shake) {
	dialog {
		animation: shake 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		animation: runOut 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}
@keyframes shake {
	0%, 100% { transform: translate(0, 0); opacity: 1; }
	10%, 30%, 50%, 70%, 90% { transform: translate(-3px, -3px); opacity: 0.8; }
	20%, 40%, 60%, 80% { transform: translate(3px, 3px); opacity: 0.8; }
}



/**
:host(.unfold) {
	dialog {
		transform:translateX(-1500px);
		animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
	dialog.out {
		transform:translateX(-1500px);
		animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	}
}*/


@keyframes unfoldIn {
	0% {
		transform:scaleY(.005) scaleX(0);
	}
	50% {
		transform:scaleY(.005) scaleX(1);
	}
	100% {
		transform:scaleY(1) scaleX(1);
	}
}

@keyframes unfoldOut {
	0% {
		transform:scaleY(1) scaleX(1);
	}
	50% {
		transform:scaleY(.005) scaleX(1);
	}
	100% {
		transform:scaleY(.005) scaleX(0);
	}
}






@keyframes scaleBack {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(.85);
	}
}

@keyframes scaleForward {
	0% {
		transform:scale(.85);
	}
	100% {
		transform:scale(1);
	}
}

@keyframes quickScaleDown {
	0% {
		transform:scale(1);
	}
	99.9% {
		transform:scale(1);
	}
	100% {
		transform:scale(0);
	}
}

@keyframes slideUpLarge {
	0% {
		transform:translateY(0%);
	}
	100% {
		transform:translateY(-100%);
	}
}

@keyframes slideDownLarge {
	0% {
		transform:translateY(-100%);
	}
	100% {
		transform:translateY(0%);
	}
}


@keyframes moveDown {
	0% {
		transform:translateY(0px);
	}
	100% {
		transform:translateY(150px);
	}
}


@keyframes blowUp {
	0% {
		transform:scale(0);
	}
	100% {
		transform:scale(1);
	}
}

@keyframes blowUpOut {
	0% {
		transform:scale(1);
		opacity:1;
	}
	100% {
		transform:scale(0);
		opacity:0;
	}
}



@keyframes sketchIn {
	0% {
		stroke-dashoffset: 778;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes sketchOut {
	0% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 778;
	}
}

@keyframes modalFadeIn {
	0% {
		background-color:transparent;
	}
	100% {
		background-color:white;
	}
}

@keyframes modalFadeOut {
	0% {
		background-color:white;
	}
	100% {
		background-color:transparent;
	}
}

@keyframes modalContentFadeIn {
	0% {
		opacity:0;
		top:-20px;
	}
	100% {
		opacity:1;
		top:0;
	}
}

@keyframes modalContentFadeOut {
	0% {
		opacity:1;
		top:0px;
	}
	100% {
		opacity:0;
		top:-20px;
	}
}

@keyframes bondJamesBond {
	0% {
		transform:translateX(1000px);
	}
	80% {
		transform:translateX(0px);
		border-radius:75px;
		height:75px;
		width:75px;
	}
	90% {
		border-radius:3px;
		height:182px;
		width:247px;
	}
	100% {
		border-radius:3px;
		height:162px;
		width:227px;
	}
}

@keyframes killShot {
	0% {
		transform:translateY(0) rotate(0deg);
		opacity:1;
	}
	100% {
		transform:translateY(300px) rotate(45deg);
		opacity:0;
	}
}

@keyframes fadeToRed {
	0% {
		background-color:rgba(black,.6);
	}
	100% {
		background-color:rgba(red,.8);
	}
}

@keyframes slowFade {
	0% {
		opacity:1;
	}
	99.9% {
		opacity:0;
		transform:scale(1);
	}
	100% {
		transform:scale(0);
	}
}