div.popup { 
	position: fixed;
	top: 100px;
	left: 50%;
	margin-left: -22%;
	width: 45%;
	max-width: 600px;
	height: 250px;
	border: 1px solid #000000;
	background: #FFFFFF;
	z-index: 10;
	#border-top: 5px solid #000000;
}
div.popup h1 { 
	margin: 10px;
}
div.popup h2 { 
	margin: 8px;
}
div.popup p { 
	margin: 8px;
}
div.popup ul { 
	margin: 8px;
}
div.popup p.submit { 
	text-align: center;
}
div#popup_appointment_loading {
	text-align: center;
}

@media only screen and (max-width: 1023px), only screen and (max-device-width : 1023px) { /* RED */
	div.popup { 
		#border-top:5px solid #FF0000;
		width: 55%;
		margin-left: -27%;
	}
}
@media only screen and (max-width: 950px), only screen and (max-device-width : 950px) { /* GREEN */
	div.popup { 
		#border-top:5px solid #00FF00;
		width: 65%;
		margin-left: -32%;
	}
}
@media only screen and (max-width: 736px), only screen and (max-device-width : 736px) { /* BLUE */
	div.popup { 
		#border-top:5px solid #0000FF;
		width: 80%;
		margin-left: -40%;
		
	}
}
@media only screen and (max-width: 600px), only screen and (max-device-width : 600px) { /* CYAN */
	div.popup { 
		#border-top:5px solid #00FFFF;
		width: 90%;
		margin-left: -45%;
	}
}
@media only screen and (max-width: 430px), only screen and (max-device-width : 430px) { /* YELLOW */
	div.popup { 
		#border-top:5px solid #FFFF00; 
		width: 98%; 
		left: 0px;
		margin: 0px;
	}
}