/* Modern Narrow Sign Up Form ~ Now Responsive! */

body {
	background-color: #E8E8E8;
	margin: 0;
	padding: 0;
}
a {
	cursor: pointer;
	color: darkblue;
}
::placeholder {
    text-transform: none;
}

#container {
	width: 210px;
	font-family: arial;
	font-weight: normal;
	font-size: 14px;
	background: #fff url(https://app.greenrope.com/img/joinback/images/modern_form_bkgd.gif) repeat-x bottom;
	border: solid 2px #cccccc;
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 10px;
	margin-bottom: 20px !important;
	padding: 20px;
}

#container ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.formRow {
	padding: 5px;
	display: block;
	text-align: left !important;
	margin: 0px;
	clear: both;
}

.fieldName {
	margin: 0px 10px 0px 0px;
	padding: 0px;
	line-height: 26px;
	float: left;
	clear: both;
	width: 170px;
	font-size: 14px;
	font-weight: normal;
	background-color: transparent;
	text-align: left;
	vertical-align: top;
}

.inputTextField, .object_Contact, #captchaInput, .rightElement {
	border-top: 1px solid #7c7c7c;
	border-left: 1px solid #c3c3c3;
	border-right: 1px solid #c3c3c3;
	border-bottom: 1px solid #ddd;
	background: #fff url(https://app.greenrope.com/img/joinback/images/modern_form_input_bkgd.gif) repeat-x top;
	font-family: arial;
	font-size: 14px;
	font-weight: normal;
	padding: 5px;
	vertical-align: middle;
	position: relative;
	width: 190px;
	margin: 0px;
	box-sizing: border-box;
	font-size: 18px;
}

#captchaInput {
	margin-bottom: 10px;
}

#formSubmit{
	border-color: #3C71EA;
	background: #4A79EF;
	color:#ffffff;
	font-size: 15px;
	font-weight: bold;
	padding: 12px 35px 11px;
	border-radius: 3px;
	width: auto;
	display: block;
	margin: 10px auto 5px auto;
	cursor: pointer;
	-webkit-appearance: none;
 	-moz-appearance: none;
  	appearance: none;
}

#reqInfo {
	margin-bottom: 20px;
}

.formText {
font-size: 14px;
text-align: left;
border-radius: 5px;
color: rgb(0, 0, 0);
line-height: 1.3em;
margin: 10px 0px 14px;
padding: 11px 10px 10px 40px !important;
border: 1px solid rgb(156, 169, 228);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background: url(https://app.greenrope.com/img/joinback/images/i.png) 10px 12px no-repeat rgb(218, 230, 252);
display: block;
}

.formRow select {
box-sizing: border-box;
border: 1px solid #cccccc;
background: #E8E8E8;
font-size: 14px;
padding: 5px;
vertical-align: middle;
margin-left: 0 !important;
vertical-align: top;
}

#confirmText{
font-size: 14px;
}

.introText {
font-size: 15px !important;
margin: 0px !important;
margin-bottom: 15px !important;
}

.userCheckboxes {
	clear: both;
}

#teamSelection {
	display: inline-block;
	width: 100%;
}

#captchaText {
	width:	100% !important;
}

#collectFunds {
	margin-left: 0px;
}
#collectFunds td {
	text-align: left !important;
	margin-bottom: 0px;
	display: block;
	margin-left: 10px;
}
#collectFunds table {
	background: transparent;
	margin-left: -10px;
}
#collectFunds .inputTextField {
	margin-bottom: 15px !important;
}


/* custom object styles */
input[type=checkbox].object_Contact, select.object_Contact {
	display: inline-block;
	width: auto !important;
}
.objectImage, .objectFile {
	padding: 5px;
}
.objectSet {
	margin: 8px 0px;
}
.objectSet .mask-variable {
	display: inline-block;
	margin-top: -4px;
	margin-left: 3px;
	vertical-align: middle;
}
.objectDatetime select {
	vertical-align: inherit !important;
}
.objectEnum select, .objectTextarea textarea, .objectText input, .objectInteger input, .objectDecimal input, .objectDate input, .objectDatetime input {
	width: 190px !important;
}



/******************* Responsive Styles *******************/
@media screen and (max-width : 1024px){

form {
	width: 100%;
  background-size: 100%;
}
body {
	width:	100%;
}
#formContainer img {
	max-width:	100%;
}
#container {
	margin:	10px !important;
	  margin-left: auto !important;
  margin-right: auto !important;
}
}
@media screen and (max-width : 480px){
#formContainer {
	padding:	20px;
	border:	solid 2px #ccc;
}
#container {
	padding:	0px;
	border:	0px;
	width:	100%;
}
#labelBirthday {
	width:	20%;
}
}

/* new style of checkboxes */
.newCheckboxWrapper {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}
.newCheckboxWrapper input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.newCheckboxIndicator, .newCheckboxIndicatorRed, .newCheckboxIndicatorGreen {
  position: absolute;
  top: -1px;
  left: 0px;
  height: 16px;
  width: 16px;
  background: #e6e6e6;
  outline: 1px solid #ccc;
}
.newCheckboxWrapper:hover input ~ .newCheckboxIndicator, .newCheckboxWrapper input:focus ~ .newCheckboxIndicator {
  background: #ccc;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicator {
  background: #428BCA;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicator, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicator {
  background: #5BC0DE;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicatorRed {
  background: #B64700;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicatorRed, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicatorRed {
  background: #FF946D;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicatorGreen {
  background: #5CB85C;
}
.newCheckboxWrapper:hover input:not([disabled]):checked ~ .newCheckboxIndicatorGreen, .newCheckboxWrapper input:checked:focus ~ .newCheckboxIndicatorGreen {
  background: #76DF5B;
}
.newCheckboxWrapper input:disabled ~ .newCheckboxIndicator, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorRed, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorGreen {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.newCheckboxIndicator:after, .newCheckboxIndicatorRed:after, .newCheckboxIndicatorGreen:after {
  content: '';
  position: absolute;
  display: none;
}
.newCheckboxWrapper input:checked ~ .newCheckboxIndicator:after, .newCheckboxWrapper input:checked ~ .newCheckboxIndicatorRed:after, .newCheckboxWrapper input:checked ~ .newCheckboxIndicatorGreen:after {
  display: block;
}
.newCheckboxWrapper .newCheckboxIndicator:after, .newCheckboxWrapper .newCheckboxIndicatorRed:after, .newCheckboxWrapper .newCheckboxIndicatorGreen:after {
  left: 6px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.newCheckboxWrapper input:disabled ~ .newCheckboxIndicator:after, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorRed:after, .newCheckboxWrapper input:disabled ~ .newCheckboxIndicatorGreen:after {
  border-color: #7b7b7b;
}