/* form style */


/* nested fieldset */
#registerform fieldset, #registerformDatesInOut fieldset{
	float:left;
	width:270px;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.register-columns{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	align-items:flex-start;
	width:100%;
}

.register-columns fieldset{
	float:none;
	flex:1 1 420px;
	min-width:320px;
	max-width:100%;
	width:auto;
	margin:0;
	margin-bottom:20px;
}

.register-columns .register-column{
	float:none;
	width:auto;
}

@media (max-width: 768px){
	.register-columns{
		flex-direction:column;
	}
	.register-column{
		max-width:100%;
	}
}



/* input field */
#registerform input, #registerformDatesInOut input{
	border:4px solid #ffffff;
	background-color:transparent;
	margin-bottom:12px;
	margin-top:-4px;
	margin-left:4px;
	padding-right:5px;
	padding-left:5px;
	height:24px;
	width:190px;
	color:#000000;
	z-index:1;
	font-size:12px;
	float:left;
	position:relative;
	font: bold 1.1em "Trebuchet MS", Sans-Serif;
	-o-border-radius: 8px;
	-icab-border-radius: 8px;
	-khtml-border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}
#registerform input:hover , #registerformDatesInOut  input:hover { 
color:#ffffff;
background-color:#00ff00;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#registerform input:focus, #registerformDatesInOut input:focus{ color:#ffffff; background-color:#ff0099;}
#registerform input:active, #registerformDatesInOut input:active{ background-color:#00ff00; }
.clear {
	clear:both;
	height:0px;		
}

#registerform input#submit, #registerformDatesInOut input#submit{
text-align: center; font-size: 16px; padding: 1px 5px 0px 5px; border:2px solid #000000; color: #ffffff; background: #ff0099; text-decoration: none;
    height:30px;
    cursor:pointer;
    padding-bottom:4px;
    width: auto;
    float:right;
	-o-border-radius: 5px;
	-icab-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
	}
#registerform input#submit:hover, #registerformDatesInOut  input#submit:hover { color: #000000; background: #00ff00; }

/* form field input ERROR POP-UP POP-IN message */
.error {
	z-index:2;
	position:relative;
	height:auto;
	background-color:#FF0099;
	font-size:11px;
	padding:4px 10px;
	color:#111;
	display:none;
	margin-top:10px;
	margin-left:-168px;
	-o-border-radius: 15px;
	-icab-border-radius: 15px;
	-khtml-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 5px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}

.error em {
	z-index:2;
	border: 1.1em solid;
	border-color: transparent transparent #ff0099;
	display:block;
	height:0;
	left:20px;
	top:-18px;
	position:absolute;
	width:0;
}
.error p {
	margin:0;		
}

.label {
    clear: both;
    font: bold 1em "Trebuchet MS", Sans-Serif;
	display: block;
	float:left;
	position:relative;
	font-size:14px;
	color:#49E9FF;
	background-color:#ffffff;
	padding: 0px 5px 0px 5px;
	left:-7px;
    z-index:2;
	margin: 0px 30px 1px 20px;
	width: auto;
    min-width: 90px;
	-o-border-radius-topleft: 5px;
	-icab-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
	-o-border-radius-topright: 5px;
	-icab-border-radius-topright: 5px;
	-khtml-border-radius-topright: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}

.privacy {
    float: right;
    position:relative;
    z-index:2;
    text-align:left;
   	width: 60px;
    color:#ffffff;
}

.terms {
	float:left;
	position:relative;
	width:200px;
	white-space: nowrap;
	background-color:#000000;
	color:#ffffff;
	font-weight:bold;
	left:5px;
	top:3px;
	-o-border-radius: 5px;
	-icab-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}

.simplePassMeter {
  border: 0px solid #000000;
  background-color: #f3f3f3;
  font: bold 1em "Trebuchet MS", Sans-Serif;
  font-size: 0.7em;
  padding: 1px 5px 0 5px;
  margin-top:12px;
  margin-left:-360px;
  width: 150px;
  z-index:3;
  	-o-border-radius: 8px;
	-icab-border-radius: 8px;
	-khtml-border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}
.meterFail { border: 0px solid #111; background-color: #ff0099; }
.meterWarn { border: 0px solid #111; background-color: #FF4000; }
.meterGood { border: 0px solid #111; background-color: #9ae600; }
.meterExcel { border: 0px solid #111; background-color: #05df72; }
.simplePassMeterBar { background-color: #ddd; }
.meterFail .simplePassMeterProgress  { background-color: #5B0094; }
.meterWarn .simplePassMeterProgress  { background-color: #FFF700; }
.meterGood .simplePassMeterProgress  { background-color: #C68DD9; }
.meterExcel .simplePassMeterProgress { background-color: #00D8D9; }
.simplePassMeter p { margin:0; }
.simplePassMeterIcon { height: 17px; width: 17px; float: left; }
.meterFail .simplePassMeterIcon,
.meterWarn .simplePassMeterIcon,
.meterGood .simplePassMeterIcon,
.meterExcel .simplePassMeterIcon {
  background-image: url('images/autocomplete_symbols.png');
  background-repeat: no-repeat;
}
.meterExcel .simplePassMeterIcon { background-position: 0 0; } 
.meterFail .simplePassMeterIcon { background-position: 0 -17px; } 
.meterGood .simplePassMeterIcon { background-position: 0 -34px; } 
.meterWarn .simplePassMeterIcon { background-position: 0 -51px; } 
.simplePassMeterText { margin-left: 2px; font-size: 24px !important; }

#preview-area {
	position:relative;
	padding:10px;
	float:left;
	z-index:9999;
	background-color:#59DDFF;
	font-size:14px;
	font-weight:bold;
	width:auto;
	color: #ffffff;
    line-height: 1.3em;
    border: 3px solid #ffffff;
  	-o-border-radius: 15px;
	-icab-border-radius: 15px;
	-khtml-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	behavior: url(internet_explorer_rounded_borders_radius.htc);
}

/* Datepicker custom colors */
.ui-datepicker td a,
.ui-datepicker td span {
	background-color: #16D0FF !important;
}
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev:hover {
	background-color: limegreen !important;
}
.ui-datepicker .ui-state-active {
	background-color: #ff0099 !important;
}
.ui-datepicker .ui-state-hover {
	background-color: limegreen !important;
}