.form{
/*
height:45em; */
position:relative;
}
ul{
padding: 0.5em;
}

.personal, .contact, .postal, .guidance{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify; -ms-flex-pack:justify;justify-content:space-between;font-size:1em;
background-color:#E5E8F1;margin:1em 0.5em 1em 0.5em; padding:0.5em;}

/*.personal{text-align:left;float:left;clear:both;padding: 0.5em;}


.postal{
position: relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
background-color:#E5E8F1;
margin:1em 0em 1em 0em;

}
*/
fieldset {
	max-width:100%;
	-webkit-margin-start: 2px;
	margin-inline-start: 2px;
	-webkit-margin-end: 2px;
	margin-inline-end: 2px;
	-webkit-padding-before: 0.35em;
	padding-block-start: 0.35em;
	-webkit-padding-start: 0.75em;
	padding-inline-start: 0.75em;
	-webkit-padding-end: 0.75em;
	padding-inline-end: 0.75em;
	-webkit-padding-after: 0.625em;
	padding-block-end: 0.625em;
	min-inline-size: -webkit-min-content;
	min-inline-size: -moz-min-content;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-color: threedface;
	-webkit-border-image: initial;
	-o-border-image: initial;
	border-image: initial;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}
legend {
    border-width: 2px;
    border-style: groove;
    border-color: blue;
	padding:.5em;
}
.holder{
display: flex;
position:relative;

}
#title,#name,#surname,#maiden,#gender,#recipient,#member,#year,#endYear,#updateNew,#arrivalTime,#special,#phone,#staff,#mobile,#email,#emailchk, #email_message_txt, 
#address1,#address2,#address3,#town,#county,#postCode,#country,#recipient{
padding-left:10px;
text-align:left;
}
#recipient {
    display: flex;
    justify-content: space-around;
	align-items: center;
}




.ErrMsgEnvelope, .ActionMsgEnvelope, .InfoMsgEnvelope{
position:fixed; 
left:-22em;
top:5em; 
width:22em; 
padding:1em;

z-index:99;
animation-name:slideOutToRight;
animation-duration:5s;
animation-timing-function:ease-out;
animation-delay:0.5s;
animation-iteration-count:infinites;
animation-play-state:running;
animation-fill-mode:backwards;
animation-direction:normal;

}
.ErrMsgEnvelope:hover, .ActionMsgEnvelope:hover, .InfoMsgEnvelope:hover{
padding:1em; 
margin-left:2em;
transition-property: transform;
transition-duration:0s;
transition-delay:0s;
transition-timing-function:ease;
transform: translate(22em, 0em);
}


.ActionMsgEnvelope{background-color:#ffff00; color:#0000FF;top:6em;}
.InfoMsgEnvelope{background-color:#0000ff;color:#CCCCCC;top:7em;}

.DebugMsgEnvelope{
position:fixed; 
top:5em; 
width:22em; 
padding:1em;
background-color:#00ffff;
right:2em;
z-index:90;
}
.ErrMsgEnvelope{background-color:#FF0000; color:#FFFF00;}


#personal_container {
position:relative;
max-width:100%;
/*max-height:440px;*/
}
#personal{
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#personal, #address, #telephone, #email_form, #password, #ready, #rank, #checkBoxes {
background-color:#E5E8F1;
}
.formIpBoxRqd{
position:relative;
margin-left:1%;
margin-right:1%;
font-size:1em;
background-color:#FFFFFF;
border-color:#e8e2db;
border-style:solid;
border-width:thin;
border-radius: 0.3125em;
color:#333333;
width:44%;
height:3.375em;
float:left;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
vertical-align:top;
margin-top: 0.5%;
margin-bottom: 0.5%;
}
#checkBoxes_container {
position:relative;
top:-440px;
width:350px;
left:360px;
height:440px;
display:block;
}
#checkBoxes{
position:relative;
height:440px;
padding:5px;
padding-top:5px;
}
.checkBoxes{
font-size:medium;
}
#telephone_container {
position:relative;
width:85%;
top:40px;
margin-left:auto;
margin-right:auto;
height:75px;
}
#telephone{
position:relative;
height:75px;
padding:0px 10px 15px 10px;
}
.telephone{
font-size:medium;
}
.number{display: inline;}
#email_container {
position:relative;
width:85%;
height:75px;
top:65px;
margin-left:auto;
margin-right:auto;
}
#email_form{
position:relative;
height:75px;
padding:0px 10px 15px 10px;
}
.email_form{
font-size:medium;
}
#ready_container {
position:relative;
float:left;
clear: left;
margin: 1em;
}
#ready{
position:relative;
width:130px;
height:40px;
}
.ready{
position:relative;
width:130px;
height:40px;
text-align:center;
background-color:#4489fe;
font-size:medium;
}
#dayOfMonth{
margin:0px 0px 0px 5px;
}
#month{
margin:0px 0px 0px 0px;
}
#year{
margin:0px 5px 0px 0px;
}
#gender{
margin:0px 0px 0px 5px;
border-color:none;
border-style:solid;
border-width:thin;
}
#age{
margin:0px 0px 0px 5px;
}
#piSub{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
position:relative;
width:230px;
height:70px;
left:480px;
top:-73px;
vertical-align:top;
}
.categories{
position:relative;
display:inline-block;
}
.category{
font-size:16px;
color:#333333;
padding-bottom:5px;
}
.catHead{
position:relative;
display:inline-block;
font-size:16px;
color:#333333;
padding-bottom:5px;
}
.checkbox{
position:relative;
display:inline-block;
font-size:16px;
}
.imageAddress{
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
z-index: 10;
max-width: 370px;
}
img.imageAddress{
max-width:100%;
}
.boldTitle{
position:relative;
display: inline-block;
color:#000000;
font-weight:bold;
height:30px;
vertical-align:middle;
padding-top:20px;
padding: 0.5em;
}
.address{
position:relative;
padding:0px;
color:#999999;
}
.randomiser{
display:inline;
float:left;
padding: 0.5em;
}
.formSchedule{
position:relative;
max-width:1030px;
/*	height:470px; */
margin-left:auto;
margin-right:auto;
display:block;
}
.formContainerDouble{
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
max-width: 100%;
float:left;
}
.formContainer{
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
max-width: 370px;
float:left;
padding:0px;
margin: 25px 10px 10px 10px;
}
.columnCont{margin:0.5em;}
@media only screen and (max-width:1024px) {.formIpBox, .formIpBoxRqd{width:94%;}}
@media only screen and (max-width:769px) {
.formSchedule{max-width:370px; max-height:1020px;}
.formContainerDouble{max-width: 100%;}
.formIpBox, .formIpBoxRqd{margin-top:0.4em; }
} 
@media only screen and (max-width: 380px)  {
.formSchedule{max-width:370px;height:990px;}
.formContainerDouble{max-width: 370px; height: 680px; }
.formContainer{max-width: 370px;}
}
@media only screen and (max-width: 320px)  {
.formSchedule{width:380px; height:990px;}
.formContainerDouble{height: auto;}
}