.overlay{position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: rgba(0 0 0 / 50%); display: flex; align-items: center; justify-content: center; cursor: pointer;}

.dialog{display: flex; background-color: #fff; align-items: center; padding: 50px; border-radius: 20px; column-gap: 100px; row-gap: 50px; cursor: initial; max-height: 90vh; box-sizing: border-box; overflow: auto;}
.dialog p{margin: 0;}
.dialog .side{display: flex; flex-direction: column; row-gap: 20px;}
.dialog .btn{background-image: linear-gradient(180deg, #8f9092, #141414); color: #fff; padding: 15px 0; text-align: center; font-size: 1.3em; text-decoration: none; border-radius: 100vw; font-weight: bold; cursor: pointer;}
.dialog .btn.hollow{background-image: none; border: 3px solid #58595b; color: #58595b;}

.dialog#registerCard{flex-direction: column; align-items: start; row-gap: 20px;}
.dialog#registerCard form{display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 20px; row-gap: 20px; width: 100%;	}
.dialog#registerCard form input{padding: 15px; border-radius: 10px; border: 1px solid #58595b; font: inherit; color: #58595b; box-sizing: border-box;}
.dialog#registerCard form input.span-4{grid-column: span 4;}
.dialog#registerCard form input.span-3{grid-column: span 3;}
.dialog#registerCard form input.span-2{grid-column: span 2;}
.dialog#registerCard form input.span-1{grid-column: span 1;}
.dialog#registerCard form button{border: 0; grid-column: 3 / span 2;}
.heading_message{font-size: 2em; color: #790000}

@media(max-width: 425px){
	
	.dialog{flex-direction: column;}
	.dialog .side{text-align: center;}
	
	.dialog#registerCard form{grid-template-columns: 1fr;}
	.dialog#registerCard form :is(input, button){grid-column: 1 !important; width: 100%;}
	
}