/*
customized styles used primarily in the registration processes
*/

.accordion {
	margin: 0 0 30px 0;

	display: inline-block !important;


	width: 100% !important;

	border: solid 0px orange !important;

}



/* IF VIEWPORT IS GREATER THAN 768px wide */
@media only screen and (min-width: 1024px) {

	.accordion {
		/*width: 690px !important;*/
		/*border: solid 3px green !important;*/
		float: left;
	}

}

/* IF VIEWPORT IS GREATER THAN 768px wide */
@media only screen and (min-width: 1280px) {

	.accordion {
		/*width: 800px !important;*/
		/*border: solid 3px orange !important;*/
		float: left;
	}

}


.accordion > .section {
	position: relative;
	display: block;


	padding: 0px;
	margin-bottom: 10px;

	/*background-color: rgba(23, 61, 80, 0.06);*/
	/*background-color: #DDD;*/
	/*background-color: #891427;*/

	/*background-color: rgba(127, 20, 39, 0.8);*/
	/*color: #fff;*/

    /*border: 2px solid #891427;*/
    background-color: #fff;



}

.accordion > .section > h2 {

    margin: 0;

    font-size: 20px;
    line-height: 36px;
    font-weight: 200;

    /*padding: 5px;*/

    background-color: #444;
    color: white;

}

.accordion > .section > h2 > div {
	display: inline-block;
	background-color: #891427;
	padding: 5px 10px 5px 10px !important;
	margin-right: 10px;
}

.accordion > .complete > h2 > div {
	background-color: #666;
}

.accordion h2 i {
	color: #fff;
}

.accordion > .hidden > h4 > div {

	/*color: #fff !important;*/
	/*cursor: pointer;*/
	/*background-color: #555;*/
}



.accordion  .section > h4 {



}


.accordion > .section > .content {
	position: relative;
	/*background-color: blue;*/

	padding: 20px;

	/*border: dashed 2px orange;*/
	/*border-top: 2px solid #891427;*/

	/*border-left: solid 2px rgba(127, 20, 39, 0.8);*/
	/*border-right: solid 2px rgba(127, 20, 39, 0.8);*/
	/*border-bottom: solid 2px rgba(127, 20, 39, 0.8);*/
/**/
	/*border-top: solid 3px #891427;*/
	border-left: solid 2px #444;
	border-right: solid 2px #444;
	border-bottom: solid 2px #444;
}

.accordion > .section > .content  textarea {
	height: 300px;
}

.accordion  .section  .content .alert  input {
	display: inline-block;
	width: auto !important;
	margin-right: 15px;

}

.accordion .section > h3 {
	display: inline-block;

	position: absolute;
	top: 0px;
	right: 10px;

	padding: 10px 0px 0px 0px;

	font-size: 10px;
	font-family: Arial, sans-serif;

}

.accordion .section > h3 a {
	color: white;
}

.accordion .section > h3 {
	/*display: none;*/
}

/*
.complete:after {
  content: "\f00c";

  background-position: 0px 0px;

  text-align: right;

  position: absolute;
  top: 5px;
  right: 10px;



  display: inline-block;

  width: 42px;
  height: 42px;

  font-size: 18px;
  font-family: "FontAwesome", serif;
  line-height: 34px;
  font-weight: bold;

  border: dotted 2px red;

  vertical-align: middle;

  opacity: .5;
}*/



.complete {

  /*opacity: .7;*/
  /*border: solid 0px blue !important;*/

}

.accordion > .section > .complete  {

	display: none;
}

/*.accordion > .section.hidden > .complete  {

	display: inline-block;
}*/

.accordion > .section.collapsed > .content {
	display: none;
}




.accordion > .section > .content  label {
	display: inline-block;
	width: 100px;
	text-align: right;
	margin: 0px 10px 0px 0px;
	/*font-weight: bold;*/
}

/*.accordion > .section > .content  input {
	margin: 4px;
	width: 45% !important;

	display: inline-block;

}*/

/* IF VIEWPORT IS GREATER THAN 768px wide */
@media only screen and (min-width: 768px) {

	.accordion > .section > .content > input {
		margin: 4px;
		width: 42%;

		/*border: solid 3px orange;*/
	}

}




.accordion > .section > .content > .footer {

	border: solid 0px;

	padding: 0px;

	margin: 20px 0px 0px 0px;

	text-align: right;

	height: 60px; /* why is there a height needed? what is overwriting the default */
}

.accordion > .section > .content > .footer > .junkie-button {
	margin: 0px;

}