html {
  font-family: calibri;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  margin: 0px;
  
  
}

/* form{ */
	/* background: white; */
	/* color: black; */
	display: flex;
	/* flex-direction: column; */
	/* align-items: center; */
/* } */

body{
	background-color: gray;
	
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}




h1,h2{
	text-align: center;
	
}

h3{
	margin: 8px;
}


.box{
	border-top: #d3d3d3 solid 1px;
	width: 100%;
	/* margin: 32px; */
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.basic_details{
	/* width: min-content; */
	
	padding: 16px;
	display: grid;

}

.field{
	margin: 8px;
}





.dropdowns{
	display: flex;
	flex-direction: row;
	display: grid;
	grid-template-columns: auto auto;
}

select{
	padding: 4px;
	border-radius: 5px;
	border: #d3d3d3 solid 1px;
}

#gender{
	grid-row-start: 2;
	
}

.optional{
	font-size: 12px;
	grid-column-start: 2;
	margin-bottom: 0px;
}

.rank{
	margin-top: 0px;
}



input{
	border: #d3d3d3 solid 1px;
	border-radius: 5px;
	padding: 8px;
}

.academic{
	border-top: solid #d3d3d3 1px;
	padding: 16px;
	width: min-content;
}


.plan{
	margin: 8px;
	padding: 8px;
}

#payment_types{
	margin: 16px;
}

.summary{
	border-top: #d3d3d3 solid 1px;
	width: 100%;
	/* margin: 32px; */
	padding: 8px;
	display: flex;
	flex-direction: column;
	algin-items: flex-start;
	justify-content: flex-start;
	
}

.summary-payment{
	margin: 8px;
	color: #a32231;
	font-size: 16px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

.summary-conditions{
	font-size: 14px;
	margin: 8px;
}

.summary-notes{
	font-weight: 900;
}

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}

.submit{
	margin: 24px;
}

input[type=submit] {
  padding: 8px 64px;
  background: #a32231;
  border: 2px white solid;
  color: #fff;
}

input[type=submit]:hover{
	/* font-weight: bold; */
	padding: 8px 64px;
	border: black 2px solid;
	background: yellow;
	color: black;
	cursor: pointer;
}

#loader {
	
	display: none;
	position: fixed;
	top: 50%;
	left: 45%;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}