@charset "utf-8";
/* CSS Document */

/*input[type=submit] {
	padding: 9px;
	background-color: #c44999;
	color: #FFF;
	border: 0;
	width: 25%;	
}*/

select,
input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=password],
textarea {
  padding: 10px;
  color: #555;
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
  border: solid 1px #E5E5E5;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 100%;
  width: 90%;
  background-color: white;
}

.rowfield::placeholder {
	color: #999;
	font-style: italic;
}

textarea {
	width: 97%;
	color: #555;
}

select: focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #C9C9C9;
}

input[type=checkbox],
input[type=radio] 
{
	width: 16px;
	height: 16px; 
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #fff;
	 margin-top: 3px;
     top: 3px;
	 border: 1px solid #060 !important;
     border-radius: 50px;
     cursor: pointer;     
     outline: none;		
}

input[type=checkbox] {
	border-radius: 2px;
	top: 5px;	
}

input[type=checkbox]:checked::before,
input[type=radio]:checked::before {
     position: absolute;
     font: 14px/1 'Open Sans', sans-serif;
     left: 5px;
     top: 0px;
     content: '\02143';
     transform: rotate(40deg);
}
input[type=checkbox]:hover,
input[type=radio]:hover {
     background-color: #ececec;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
     background-color: #0a2c4f;
}

input[type=text][disabled],
input[type=checkbox][disabled],
input[type=radio][disabled] {
  outline:1px solid #ececec;
  background-color: #ececec; 
}

.multiItem {
	display: flex;
	margin-bottom: 0.90em;	
}

.multiItem label, .otherMulti label {
	font-size: 14px;
}

.formItemHalf {
	width: 50%;
}

.sectionBox {
  margin: 10px 0px;
  padding: 10px 10px 16px 10px;
  background-color: #ececec;
  width: 98%;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}

.sectionTitle {
	font-weight: bold;
	padding-bottom: 12px;
}

label.error {
	color: red;
	font-size: 80%;
	display: block;
}

/* for profile and password forms */
.newBody {
	font-size: 16px;
}

.subSection {
	color: #c44999;
	font-weight: bold; 
	margin: 12px 0px 6px 0px;
}
.directions {
	padding-left: 6px;
	padding-bottom: 6px
	
}

.multi_inputs {
	display: flex;
}

.multi_inputs > .input_container {
	margin-right: 12px;
}

.multi_half {
	width: 50%;
}

.multi_third {
	width: 33.3%;
}

.multi_inputs > .multi_half > .input_container, .multi_inputs > .multi_third > .input_container {
	margin-right: 12px;
}

.input_container {
	/*border: 1px solid #39364f;*/
	padding: 2px 5px;
	margin-bottom: 18px;
	/*background-color: #fff;*/
    display: flex;
    flex-direction: column-reverse;	
}

.input_container label {
	font-size: 0.9em;
	line-height: 1.25em;
	padding-left: 6px;
}

.radioCheckButton {
	display: flex;
	padding-left: 6px;
	padding-bottom: 12px;
}
.radioCheckButtonLabel {
	padding-top: 9px;
}
.radioButton {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #fff;
	 margin-top: 6px;
     top: 3px;
     height: 18px;
     width: 18px;
	 border: 1px solid #060 !important;
     border-radius: 50px;
     cursor: pointer;     
     outline: none;	
} 

#fixedBottomBar {
	position: fixed;
	z-index: 4;
	background-color: #fff;
	border-top: 1px solid #eeedf2;
	bottom: 0;
	left: 0;
	min-height: 64px;
	overflow: hidden;
	width: 100%;
}

.saveButtons {
	margin-top: 18px;
	display: flex; 
	flex-wrap: wrap;
	justify-content: flex-end;
	/*justify-content: center;*/
}
.saveButton {
	background-color: #c44999;
	color: #ececec;
	text-decoration: none;
	border: 0;
	text-align: center;
	margin-bottom: 16px;
	cursor: pointer;
	height: 44px;
	padding: 0 30px 1px;
	border-radius: 4px;
	font-size: 1em;	
}
.saveButton:first-child {
	margin-right: 30px;
}
.discardButton {
	background-color: #fff;
	color: #000;
	border: 2px solid #a9a8b3;	
}



@media (max-width: 900px) {
  .multiItem, .multi_inputs {
	  display: block;	
  }
  
  .multi_inputs > .input_container {
	  margin-right: 0px;
  }
  
  .formItemHalf, .otherMulti, .multi_half, multi_third { /* .otherMulti is used with style="width: xx%" to have multiple fields on one row or alone for a one field row */
	  width: 100% !important;
	  margin-bottom: 1em;	
  } 
 
  label.error {
	  font-size: 12px;
  }
    	
  input[type='checkbox'],
  input[type='radio'] {
	  width: 18px;
	  height: 18px;        
  }	
  
  .radioCheckButtonLabel {
	  padding-top: 6px;
  }  
}