/*========================================
  custom.css
  
  requires: reset.css
            pageframework.css
            section.css
            form.css
            
            
  content
            * registration > checklist
            * registration > select personal image            
            * login > answer secret question  
            * login > enter password                       
            * payments > payment history
            * payments > make payment            
            * payments > make payment (bank)
            * payments > wallet                                                              
            * printfriendly
========================================*/

/*----------------------------------------
  registration > checklist
----------------------------------------*/

.checklist {
  margin:0 0 10px 20px;
}

.checklist li {
  background: transparent url('i/icon-registration-checklist.png') no-repeat left center;
  padding: 10px 0 10px 20px;
}


/*----------------------------------------
  registration > terms and conditions
----------------------------------------*/

.terms-and-conditions .terms {
  overflow: auto;
  height: 300px;
  width: 600px;
  /*margin: 0 auto;*/
  border: 1px solid #cccccc;
  line-height: 2;
}

.terms-and-conditions .accept-terms {
  width: 300px;
  /*margin-left: 169px;
  margin-top:20px;*/
  float:left;
}

.terms-and-conditions .accept-terms div div label{
  float: none;
  margin-left:-233px;
}

.terms-and-conditions .accept-terms div div label .checkbox {
margin: 0px 0 0 0%;
}

.terms-and-conditions .buttons {
  width: 600px;
 /* margin: 0 auto;*/
  padding-left: 0px!important;  
  margin-left: unset;
}

.terms-and-conditions .buttons input[type=submit]:nth-child(1) {
  margin-right:10px;
}

/*----------------------------------------
  registration > select personal image (this is the accessible css version as in the UI ref app)
----------------------------------------

.select-personal-image .form-content {
  float: left;
  width: 40%;
}

.select-personal-image .form-content .element {
  margin: 0;
}

.select-personal-image .element-container {
  float: left;
  width: 110px;
}

.select-personal-image .element-container img {
  width: 100px;
}

.select-personal-image .content {
  float: right;
  width: 60%;
  margin: 15px 0 0;
}

.column .select-personal-image .content {
  width: auto;
}

.select-personal-image .content p img {
  float:left;
  padding:0 10px 0 0;
  width: 200px;
}

.select-personal-image .content p:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}

.select-personal-image .content ul li {
  float: left;
}

.select-personal-image .content ul li img {
  width: 100px;
  margin: 10px 20px 0 0;
}

.select-personal-image .form-content .buttons {
  padding: 0 0 10px;
}

.popin .select-personal-image .content {
  width: auto;
}

*/

/*----------------------------------------
  registration - picture selector
----------------------------------------*/
#personalimg {
  height:251px; 
}

#personalimg .tabs {
  width:118px; 
  float:left; 
  margin-top:10px;
  margin-left:-20px;
}

#personalimg .tabs ul {
}

#personalimg .tabs ul li {
  line-height:27px; 
}
					
#personalimg .tabs ul li a {
  line-height:27px!important; 
  width:125px; 
  text-align:center; 
  /*background:url('i/bk-personalimg-tab.png') no-repeat right center; */
  font-weight:bold; 
  text-decoration:none; 
  color:black; 
  display:block;
}

#personalimg .tabs ul li a.selected, 
#personalimg .tabs ul li a:hover {
  /*color:white; 
  /*background:url('i/bg-personalimg-tab-selected.png') no-repeat right center;*/
}

#personalimg .thumbnails {
  float:left; 
  width: 600px;
  height: 550px;
  /*background:url('i/bk-personalimg.png') no-repeat;*/
  margin-left: 10px;
  margin-top: 40px;
}

#personalimg .thumbnails ul.tb { 
  margin:10px 0 0 7px;
}

#personalimg .thumbnails ul.tb li {
  list-style:none; 
  display:inline;
}

#personalimg .thumbnails ul.tb li a {
  cursor:pointer
}

#personalimg .thumbnails ul.tb li img {
  cursor:pointer; 
  /*border:1px solid #ccc; */
  width:150px; 
  height:150px; 
  margin:5px 5px;
  border: 5px solid #cccccc;
}

#personalimg .thumbnails ul.tb li img:hover {
    border-color: #FF00A8;
}
	
#personalimg div.preview {
  float:left; 
  height:251px;
  width: 251px;
  background:url('i/bkg-personalimg-previewplate.png') no-repeat right top;
  margin: 0 0 0 10px;
}

#personalimg div.preview img {
  margin:1px 0 0 4px; 
  width:240px; 
  height:240px;
}

.personalimg-buttons {
  position: relative;
  padding: 0 0 0 120px;
}

.personalimg-buttons .submit {
  margin: 0 5px 0 0;
}

.personalimg-buttons .back {
  left: 0;
  position: absolute;
}

.tabs > ul li {
    display: table-cell;
}


/*----------------------------------------
  login > answer secret question
----------------------------------------*/

.section.secret-question-div .section-container 
.secret-question-form form fieldset .heading {
  float:left;
  height:30px;
  padding: 0;
  width: 320px!important;
  padding-left: 60px;
}

.section.secret-question-div .section-container
.secret-question-form form fieldset .heading h4 {
  padding: 0;
}

.section.secret-question-div .section-container 
.secret-question-form form fieldset .heading h4 span {
  color: #666666;
  font-weight: bold;
  height:100%;
  line-height: 30px;
  width: 100%;
}

.section.secret-question-div .section-container 
.secret-question-form form fieldset .secret-answer {
  float: left;
  height:15px;
  width: 180px;
}

.section.secret-question-div .section-container 
.secret-question-form form fieldset .secret-answer div.element {
  margin-left:0px;
  margin-top:-7px;
}


.section.secret-question-div .section-container 
.secret-question-form form fieldset .secret-answer div.element 
span.element-container span.text-container input.text {
  width: 184px!important;
}

.section.secret-question-div .section-container 
.secret-question-form form .buttons {
  padding-left:380px;
  margin-top: 10px;
}	

 .form-content.delivery_method_form.registration form div.buttons{
	margin-left: 6px;
 }

/*----------------------------------------
  login > enter password
----------------------------------------*/


.enter-password form .content {
  padding:10px 0;
}

.enter-password .content p:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.enter-password form .content img {
  float: left;
  margin: 0 10px 0 0;
}

.forgot-email-div , .secret-question-div , .delivery_method_div{
  width: 600px;
  /*margin: 0 auto!important;
  margin-top:50px!important;*/
}

.forgot-email-form  .section-container .form-content form fieldset div.row div.label{
  width: 150px;
  font-weight: bold;
}

.forgot-email-form  .section-container .form-content form fieldset div.row input[type=text] {
  width: 150px;
  float:left;
}

.link-para, .link-goto-helpdesk {
  margin-left: 3px;
  margin-right: 6px;
  color: #428bca;
  display:inline-block; 
  margin-top:-3px;
  text-decoration: none;
}

.link-goto-helpdesk span {
  color: #428bca !important;
  text-decoration: underline;
  font-size: 14px;
}

.link-para:hover, .link-goto-helpdesk:hover {
  color: #58d3f7;  
  text-decoration: none; 
}

.mail-example {
  color: #ff0000;
  margin-left:211px;
}

/*----------------------------------------
  payments > payment history
----------------------------------------*/

.payment-onetime-search-section .billers_collapse > div {
	border: 1px solid #f2f3f5;
	border-radius: 3px;
	padding: 3px;
}

.payment-onetime-search-section .billers_collapse > .cc_child {
	display: block; 
	font-weight:bold;
	height:100%;
	line-height: 20px; 
	overflow:hidden; 
}

.payment-onetime-search-section .billers_collapse > .cc_child  > .header{
	background-color:#f5f5f5; 
	height:20px; 
	line-height: 20px; 
	font-weight:bold;
}

.payment-onetime-search-section .billers_collapse > .cc_child  .tabla_detalle_onetime  .tabla_detalle_onetime_fila {
	border-bottom: 1px solid #dddddd;
	clear:both;
}

.payment-onetime-search-section div.section-container div.form-content .buttons {
	margin-left:11px;
	margin-top:20px;
}

.icon-payment-posted {
  background: transparent url('i/icon-payment-posted.png') no-repeat left center;
  padding: 5px 0 5px 25px;
}

.icon-payment-cancelled {
  background: transparent url('i/icon-payment-canceled.png') no-repeat left center;
  padding: 5px 0 5px 25px;
}

.icon-payment-failed {
  background: transparent url('i/icon-payment-failed.png') no-repeat left center;
  padding: 5px 0 5px 25px;
}

.icon-payment-automatic {
  background: transparent url('i/icon-payment-automatic.png') no-repeat left center;
  padding: 5px 0 5px 25px;
}

.icon-payment-processing {
  background: transparent url('i/icon-payment-processing.png') no-repeat left center;
  padding: 5px 0 5px 25px;
}

#table2-payment_history {
	margin-top:10px;
}

/*----------------------------------------
  payments - make payment
----------------------------------------*/ 

.make-payment-section .form-content .label {
  float: left;
  /*font-weight: bold;*/
}

.make-payment-section .form-content .element {
  margin: 5px 0 0 200px;
}

.make-payment-section .form-content .element .readonly {
  margin-left: 8px;
  margin-right: 40px;
}

.make-payment-section .form-content .element .readonly {
  margin-left: 8px;
  margin-right: 40px;
}

.make-payment-section .form-content .buttons {
  padding: 0 0 0 165px;
}

.make-payment-section .row {
  border-bottom: 1px dotted #666;
  padding: 0 0 10px;
}

.contains-related-node .payment-date-help {
  float: right;
  width: 250px;
  font-size: 10px;
}

.form-content .contains-related-node .payment-date-help span.readonly {
  line-height: 12px;
}

.processing-time p {
  margin: 5px 0 0 210px;
  font-size: 10px;
}

.make-payment-section .processing-time p {
  margin: 5px 0 0 165px;
}

 


/*----------------------------------------
  payments - make payment (bank)
----------------------------------------*/ 
.form-content .sample-check-top {
   background: transparent url('i/bg-sample-check-top.png') no-repeat right bottom;
   margin:0;
   padding:0 0 10px;
}

.form-content .sample-check-middle {
   margin: 0;
   padding: 0 0 10px;
   background: transparent url('i/bg-sample-check-bottom.png') no-repeat right top;
}

.form-content .sample-check-bottom {
   margin: 0;
}


/*----------------------------------------
  payments > payment history
----------------------------------------*/
.section .add-account-to-wallet p {
  text-align: right
}


/*----------------------------------------
  payments > wallet
----------------------------------------*/

.add-account-to-wallet {
  text-align: right;
  margin: 10px 0 5px;
}


/*----------------------------------------
  profile > credit cards
----------------------------------------*/

.creditcards_collapse { 
  border: 1px solid #FF00A8;
  border-radius: 5px; 
  margin-top: 23px;
  padding: 10px;
  /*height: 40px;*/
}

.creditcards_collapse img.cc_expand {
  cursor: pointer; 
  cursor: hand;
}

.creditcards_collapse .cc_child {
  display:none;
}

.creditcards_collapse .credit-card-panel-title {
  color: #000099;
}

.creditcards_collapse a.button {
  font-size:11px;
  margin-top:15px;	
}

.profile-cc-add-form .contains-related-node select:not(#list-nationality) {
   width:100px!important;
}

.profile-cc-add-form .buttons {
   margin-top:35px;
   margin-left:0px; 
}

.profile-cc-upd-section  .profile-cc-upd-form .buttons {
   margin-top:35px;
   margin-left:0px; 
}

.profile-cc-upd-section  .profile-cc-upd-form .element-container .checkbox {
   margin-left:-15px;
}

.profile-cc-upd-section .profile-cc-upd-form form .label {
   font-weight: bold; 
}


.profile-notification-settings div.section-container div.form-content form fieldset div.heading h4 {
   border-bottom:2px solid #FF00A8!important;
}

/* .profile-notification-settings div.section-container div.form-content form fieldset div.row {
   margin-left:8px!important;
}
 
.profile-notification-settings div.section-container div.form-content form fieldset div.row.checkbox-table {
   margin-left:10px!important;
}

.profile-notification-settings div.section-container div.form-content form div.buttons {
   margin-left:10px!important;
}*/

.profile-notification-settings div.section-container div.form-content form fieldset div.row.widthX div.label {
   width: 370px;
}

.profile-notification-settings div.section-container div.form-content form fieldset div.row.notif-title div.element.contains-related-node div.related-node.notif-type label.related-node {
   margin-left:82px!important;
}

.profile-notification-settings div.section-container div.form-content form fieldset div.row.checkbox-table div.element div.element-container.contains-related-node div.related-node {
   margin-left:95px!important;
}