.modal
{
	font-size:var(--default-font-size); /* reset for modal */
	position:fixed;
	overflow: hidden;
	background-color: #fff;
	text-align: left;
	z-index: 9999 !important;
	top: 50%;
    left:50%;
	animation-name:modal-open;
	animation-duration:.25s;
	animation-fill-mode:forwards;
	/* default */
	width:650px;
}

.modal-out{
	opacity:0;
	animation-fill-mode:forwards;
	/*animation-direction:reverse;*/
	animation-name:modal-close;
	animation-duration:.25s;
}

@keyframes modal-zoom {
    0%   {transform:scale(0.94) translate(-53%, -53%); opacity:0}
    100% {transform:scale(1.0) translate(-50%, -50%); opacity:100}
}

@keyframes modal-open {
    0%   {transform:scale(0.94) translate(-53%, -53%); opacity:0}
    100% {transform:scale(1.0) translate(-50%, -50%); opacity:100}
}

@keyframes modal-close {
	0% 	 {transform:scale(1.0) translate(-50%, -50%); opacity:100}
	100% {transform:scale(0.94) translate(-53%, -53%); opacity:0}
}

.modal .title-panel{
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
	align-items:center;
}

.modal .title-panel .title{
	display:inline-block;
}

.modal .title-panel .jworx-icon-button-x{
}
.modal .title-panel .jworx-icon-button-x:hover{
}

.modal .title-panel .close{
	display: inline-block;
    vertical-align: middle;
    width: 40px;
    opacity: .7;
    cursor: pointer;
    /*background-image: url(images/modal-x.png);*/
    height: 40px;
    background-size: cover;
	background-color:transparent;
	transition:all .25s;
}

.modal .title-panel .close:hover{
    opacity: .8;
    background-color: rgba(255,255,255,.3);
    border-radius: 100px;
}

.modal .content-panel{}