:root {
	--border-animation-angle: 0turn;
}
.modal-form{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.7);
	justify-content: center;
	align-items: center;
    z-index: 50;
}
.modal-form__wrapper{
	padding: 40px;
	background-color: transparent;
    background-image: linear-gradient(180deg,#041208 0%,#0C0C0C 100%);
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 20px;
	position: relative;
}
.modal-form__wrapper::after{
	pointer-events: none;
   content: "";
   position: absolute;
   inset: calc(1px * -1);
   left: 0;
   top: 0;
   border-radius: inherit;
   border: solid transparent;
   border-width: 1px;
   animation: borderRotate 7s linear infinite;
   background: conic-gradient(from var(--border-animation-angle), transparent 88%, #52fe7d73, #52fe7d73 100%, transparent) border-box;
   background-clip: border-box;
   background-origin: border-box;
   mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(97% - 1px), rgba(0, 0, 0, 0)) content-box, radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(2% - 1px), #000) border-box;
   -webkit-mask-composite: destination-in;
   mask-composite: intersect; 
   width: 100%;
   height: 100%;
}
@keyframes borderRotate{
	 100% {
	    --border-animation-angle: 1turn;
	}
}
    
.modal-form input, .modal-form textarea{
	border-style: solid !important;
    border-width: 2px 2px 2px 2px !important;
    border-color: #161d15 !important;	
    background-color: #080808 !important;
}
.modal-form input:focus, .modal-form textarea:focus{
   border-color: #39A751 !important;
}
.modal-form button{
	background-color: #39A751 !important;
}
@media(max-width: 767px){
	.modal-form__wrapper{
		padding: 40px 20px 20px 20px;
	}
}
.modal-form__close{
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}
.modal-form__close svg *{
	transition: .4s;
}
.modal-form__close:hover svg *{
	stroke: #39A751;
}