#wecard { /* means it's a signup page /1/ or /2/  etc */
font-size:17px;
font-family:Arial, Helvetica, sans-serif;
color: #000000;
padding:10px; /* also acts as bodyPad */
} 
#wecard p, #wecard td, #wecard li {
line-height:1.5; 
}

div.emptySquare {
display:inline-block;
width:11px;
height:12px;
overflow:hidden;
background:transparent;
border-top:1px solid #1286CB;
border-bottom:1px solid #1286CB;
border-left:2px solid #1286CB;
border-right:2px solid #1286CB; 
font-size:12px; /* contains   (or checkmark on mobile) */
line-height:1 !important; 
color:#1286CB;
font-weight:bold;
margin:0 5px 0 2px; 
}  
div.inline {
display:inline-block; 
}


/* for page 2 */
.circle2 {  
  width: 80px;
  height: 80px; 
  border-radius: 50%;  
  background: #ffffff;
  margin-right:-3px;
}
.circle2 div {
display:table-cell; 
padding:0 5px 0 5px;
}
.circle2 div p { 
color: #000000;  
text-align: center;
font-size:11px;
font-weight:bold;
} 
.visit2font {
font-size:15px;
white-space:nowrap;
}
.visit2font.smaller {
font-size:14px;
white-space:nowrap;
} 
.secondVisitChoice {
margin-bottom:4px;
}
.secondVisitChoice:last-child {
margin-bottom:0;
}

/* norm */
.bodyThird {
width:33%;
float:left;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.bodyThirdLast {
width:34%;
float:left;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.bodyTwoThirds { 
width:66%;
float:left;
margin:0 !important;
padding:0 !important;
}
/* it's in the header.css
.bodyHalf {
width:50%;
float:left;
margin: 0 !important;
padding:0 !important;
border:0 !important;
} */
.bodyHalfEvenOnMobile { /* not overridden on mobile */
width:50%;
float:left;
margin: 0 !important;
padding:0 !important;
border:0 !important;
}
/* it's in the header.css
.bodyFourth {
width:25%;
float:left;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
} */
.bodyThreeFourths {
width:75%;
float:left;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
}
.bodyQuarter {
width:25%;
float:left;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
}  
.bodyPad {
padding:20px;
}
.bodyPadSmall {
padding:10px;
}
.bodyPadTiny {
padding:5px;
}
/* displays only on mobile version */
.mobileOnly {
display:none;
}  
#container {
clear:both;
width:100%;
overflow:auto; 
}



.impact {
font-family:Impact,sans-serif;
letter-spacing:2px;
}
.blockCenter{margin:0 auto 0 auto;}
.blockLeft{float:left;}
.blockRight{float:right;}
.nobr{white-space:nowrap;}
.nodisp{display:none;}
.textCenter{text-align:center;}
.textLeft{text-align:left;}
.textRight{text-align:right;}
.bold{font-weight:bold;}
.blue {color:#0000FF;}
.white{color:#ffffff;}
.red{color:red;}
.darkred{color:#c00000;}
.black{color:#000000;}
.nonbold{font-weight:normal;}
.smaller { font-size:smaller; }
.larger{font-size:larger;}
.em {font-style:italic;}
.nound{text-decoration:none;}
.hand{cursor:pointer;} 
.small {font-size: 13px;}
.smaller {font-size: 13px;}
.tiny {font-size: 11px;}  
.data{color:#1F4B87;}



.checkbox{ /* css for html code: ☑ */
color:#1286CB;
font-size:21px;
font-weight:bold;
margin-right:5px;
line-height:1;
}

TABLE {border-collapse:collapse}
FORM {margin:0}
HR {
margin:8px 0 8px 0;
border-top: 1px solid #aaaaaa;
}

table.tableSmallChart {
border:2px solid #6DD0F6;
background:#F1FBFD;
}
table.tableSmallChart tr td {
font-size:smaller;
vertical-align:top;
}
table.tableSmallChart tr:first-child {
background-color:#B6E8FB;
}
table.tableSmallChart tr:first-child td {
font-size:smaller;
font-weight:bold;
vertical-align:bottom;
} 
div wecard table.formTable tr td {
vertical-align:top;
padding:5px;
}

.columnbg {
border: 1px solid #6DD0F6;
background:#CDF1FD;
}
.columnbg.agree {
background:#FAF2E0; /* light gold */
}

#measureSpace {
width:100%; /* for measuring store space */
border-bottom:1px solid transparent;
}
#storeSpace { /* width adjusted by js */
margin:0 auto 0 auto; 
width:960px;
}
.oneStoreSpace {
float:left;
width:320px; /* can be adjusted by js */
}
.secondVisitType {
margin-top:15px; 
}

/* forms */ 
.formTitle {  
margin:9px 0 2px 0;
font-weight:bold;
line-height:1;
}
.formField { 
display:block;
margin:0;
padding:0;
} 
.formLeftMarginRight {
float:left;
margin-right:15px;
}
.formLeftMarginRight:last-child {
margin-right:0;
}
.formBox {
border: 1px solid #dddddd;
background:#E5F7FD;
padding:5px;
-moz-border-radius:5px; 
border-radius:5px;
}
div.formErr {
display:table-cell;
overflow-x:hidden;   
border:1px solid transparent; /* yes keep this, it turns red on error */
padding: 0 2px 1px 0px !important;
text-align:left;
line-height:1.1 !important;
} 
span.formErr{
color:red;
font-size:14px !important;
line-height:1.1 !important;
}
/* keeps empty table-cells .formErr open and height */ 
span.formErr::before { 
  content: " ";
  white-space: pre;
}
INPUT[type=text],
INPUT[type=password],
INPUT[type=email],
INPUT[type=tel],
TEXTAREA,
SELECT  {  
	line-height:1.1 !important;
	border:1px solid #010101;
	background:white;
	padding:5px;
	font-size: 15px;
	color: blue;
	font-family:Arial, Helvetica, sans-serif;
	border-radius:6px;
	-moz-border-radius:6px;
	width:96%;	
	display:block;
	margin-bottom:0; 
} 
TEXTAREA {
	resize:none;
	overflow: auto;
}
SELECT {
	padding:4px;
	width:auto;
	max-width:250px;
}
INPUT.halfsize,
TEXTAREA.halfsize {
width:150px;
}
INPUT.quartersize,
TEXTAREA.quartersize {
width:80px;
}
div.agreement { 
background-color:#f7f7f7;
text-align:center;
padding:3px;
 }
INPUT[type=text].agreement,
TEXTAREA.agreement {
background-color:#FFE5E5; /*PINK */
text-transform:uppercase; 
}
div#submitButton {
text-align:center;
font-weight:bold;
font-size:19px;
color:green;
}
INPUT.button, 
INPUT[type=submit] { 
	border:1px solid #aaaaaa;
	background:#F6EB14;
	padding:6px;
	font-size:19px;
	font-weight:bold;
	color: #000000;
	border-radius:6px;
	-moz-border-radius:6px;
	cursor:pointer;
} 
INPUT.button.small, 
INPUT[type=submit].small { 
	padding:4px;
	font-size:17px; 
	border-radius:4px;
	-moz-border-radius:4px;
}
.redButton {
	border:1px solid #EE3527;
	background:#EE3527;
	padding:6px;
	font-size:19px;
	font-weight:bold;
	color: #ffffff;
	border-radius:6px;
	-moz-border-radius:6px;
	cursor:pointer;
	text-align:center;
}
h1  {
	text-align:center;
	margin:0 0 10px 0;
	font-size: 25px; 
	color:#2CA0E8;
} 
h2  {
	margin:5px 0 0px 0;
	font-size: 20px; 
} 


#liftToPrint {
	width:600px;
} 

.err {  
	margin: 5px auto 5px auto;
	padding:3px;
	width:60%;  
	overflow-x:hidden;
	border:1px dashed red;
	background:#FFFFC0;
	font-size:13px;
	color:red;
	text-align:center;
	
}
.msg {
	margin: 5px auto 5px auto;
	padding:3px;
	width:60%;  
	overflow-x:hidden;
	background:#FFFFC0;
	border:1px solid blue;
	font-size:13px;
	color:blue;
	text-align:center;
} 

 

/* ripple */
.ripple-radio-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative; 
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25px !important;
  width: 25px !important;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8; /* light gray */ 
  border: none;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 2; /* when changing to absolute below, it covers the checkbox area and puts css graphics over the top orig: 1000 */
  border:1px solid #07C9F3;
}
.ripple-radio-checkbox:hover {
  background: #9faab7; /* darker gray */
}
.ripple-radio-checkbox:checked {
  background: #3DC0E1; /* light blue */ 
}
.ripple-radio-checkbox:checked::before {
  height: 25px !important;
  width: 25px !important;
  position: absolute;
  content: '✔'; /* utf-8 for checkmark */
  display: inline-block;
  font-size: 20.66667px !important;
  text-align: center;
  line-height: 25px !important;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif !important;
}
.ripple-radio-checkbox:checked::after { 
  background: #3DC0E1;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
} 
.ripple-radio-checkbox.radio.topmargin { 
   top: 8px;  
} 
.ripple-radio-checkbox.checkbox.topmargin {
   top: 13.33333px;  
} 
.ripple-radio-checkbox.radio {
  border-radius: 50%;
}
.ripple-radio-checkbox.radio::after {
  border-radius: 50%;
} 
/* now for a smaller checkbox, same thing as above but for smaller boxes */ 
.ripple-radio-checkbox-sm {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative; 
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 17px !important;
  width: 17px !important;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8; /* light gray */ 
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.1rem;
  outline: none;
  position: relative;
  z-index: 2; /* when changing to absolute below, it covers the checkbox area and puts css graphics over the top orig: 1000 */
  border:1px solid #07C9F3;
  padding:0 !important;
}
.ripple-radio-checkbox-sm:hover {
  background: #9faab7; /* darker gray */
}
.ripple-radio-checkbox-sm:checked {
  background: #3DC0E1; /* light blue */ 
}
.ripple-radio-checkbox-sm:checked::before {
  height: 17px !important;
  width: 17px !important;
  position: absolute;
  content: '✔'; /* utf-8 for checkmark */
  display: inline-block;
  font-size: 12.4px !important;
  text-align: center;
  line-height: 17px !important;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif !important;
}
.ripple-radio-checkbox-sm:checked::after { 
  background: #3DC0E1;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
} 
.ripple-radio-checkbox-sm.radio.topmargin { 
   top: 5px;  
} 
.ripple-radio-checkbox-sm.checkbox.topmargin {
   top: 7.9999px;  
} 
.ripple-radio-checkbox-sm.radio {
  border-radius: 50%;
}
.ripple-radio-checkbox-sm.radio::after {
  border-radius: 50%;
}


/* links */
a {
color:#007DA6;
text-decoration:underline;
}
a:hover {
color:#0000FF;
text-decoration:none;
}
.lookLikeLink{
cursor:pointer;
color:#007DA6;
text-decoration:underline;
}
.lookLikeLink:hover { 
color:#0000FF;
text-decoration:none;
}