/*

 * Fichero: custom2.css ,v1.0 Guillermo Lechuga
 * Media            screen
 * Navegadores      IE9+, Mozilla X, Opera X, Chrome, Safari
 * CSS              custom2.css
 * Version          v1.0
 * Empresa          TelCel México
 * Autores          Santirisco @ MX
 * Developers       Xumac
 * Dependencias     bootstrap.css
 * Descrición:      Customización del layout de recargas para TelCel

 * Basado en bootstrap 3.1.1
 * Fecha: Julio 2015

 */

/**/



/* Errors */
#recarga .form-error{ display: table-cell; margin-bottom: 20px; overflow: hidden; padding: 25px 25px 25px 85px; position: relative; vertical-align: middle; }

#recarga .form-error i.big-icon{ font-size: 54px; left: 15px; margin-top: -27px; position: absolute; top: 50%; }

#recarga .has-group.form-group{ padding: 0; }

#recarga .has-group .error-msg{ clear:both; padding: 0 10px; }

#recarga .has-error.fix-top, #recarga .has-error .fix-top { margin-top: 25px;}

/* Tooltip */
#recarga .btn-quest { height: 18px; line-height: 18px; width: 18px; }

#recarga .btn-quest:hover{ color: white; text-decoration: none;}

#recarga .tooltip > .tooltip-inner { background: #f2f7f9; color: black; font-weight: normal; }

#recarga .tooltip.top .tooltip-arrow { border-top-color: #f2f7f9; } 

#recarga .tooltip.bottom .tooltip-arrow { border-bottom-color: #f2f7f9; } 



#recarga.container-fluid{ padding: 0; }

#recarga .form-confirmation dl { width: 90%; max-width: 471px;}

#recarga .form-confirmation .dl-horizontal dt {width: 50%;}

#recarga .form-confirmation .dl-horizontal dd { margin-left: 52%;}

#recarga .custom_modal { overflow: hidden; padding-top: 20px; margin-top:20px; margin-top: 10px; 

	background-color: #f2f7f9; 
	background-color: white;
	color: black;

	padding: 40px 30px 30px 30px; position: relative; min-height: 200px; margin-bottom: 30px; }


#recarga .custom_modal h2{
	font-weight: 400;
    border-bottom: 2px solid #DBE5E7;
    padding-bottom: 20px;
    margin: 40px 0 20px 0;
    text-align: left;

}

#recarga .custom_modal h3{
	font-weight: 400;
}

#recarga .paypal-loader{ width: 100%; height: 100px; margin-top: 50px; opacity:0.5; position: relative;}

#recarga .custom_modal:before{ border-top: 16px solid #fff; border-right: 16px solid transparent; border-left: 16px solid transparent; border-bottom: none; display: block; content: ''; width: 0; height: 0; position: absolute; top: 0; right: 20%; }


#recarga .custom_modal .btn-close-modal{ text-decoration: none; float: right ; font-size: 23px; color: #02b0ef; position: relative; top: 0; right: 0;}




/* Methods */
#recarga .methods-container{ /*width: 540px;*/ }
#recarga .methods-row{  background-color: #f2f7f9; margin-top: 35px !important; padding: 20px 15px; }
#recarga .methods-container >div >h2 { font-size: 20px; font-weight: 400;}
#recarga .methods-container .radio-inline{ text-align: center; }
#recarga .methods-container .radio-inline + .radio-inline { margin-left: 0;}
#recarga .methods-container .radio-inline .prettyradio>a { display: inline-block; float: none; vertical-align: middle; text-align: left; }
#recarga .methods-container .radio-inline label { display: inline-block; float: none;}
#recarga .methods-container .radio-inline label i{ display: inline-block; vertical-align: middle; margin-right: 6px;}
#recarga .methods-container .radio-inline label span{ display: inline-block; text-align: left; vertical-align: middle; }
/*#recarga .methods-row .method{ width: 270px !important;} */

#recarga .methods-row .form-group >div{ padding: 0 6px;}
#recarga .methods-row .form-group >div small {display: block;}
#recarga .icon-CreditCard {color: #02b0ef; font-size: 34px; vertical-align: middle;} 
#recarga .icon.mini-paypal{ width: 52px; height: 34px; background-image: url(../img/icons/mini-paypal.png); background-repeat: no-repeat; }


#consultaSaldo button.btn.btn-lg.btn-primary{ min-width: 216px; padding: 11px 16px; }

#recarga button.btn.btn-lg.btn-primary{ min-width: 216px; padding: 11px 16px; }

#recarga button.btn.btn-lg.btn-back{ min-width: 216px; padding: 11px 16px; margin-right: 1em; text-transform: uppercase; }

#recarga div.label{ padding-left: 0;}

/* #recarga .error-msg { display: none ;} */

#recarga .has-error .error-msg { color: #A24190; display: block; font-size: 12px; margin-top:2px;}


.sm-float-right{ float: right;}



/* Media Queries */

@media (max-width: 767px){
	.sm-float-right{ float: none;}
	.radio-inline{margin-bottom: 15px; width: 50%;}
}

@media (max-width: 479px){

	#recarga .methods-row { padding: 20px 5px 15px; }

	#recarga .has-group .error-msg{ padding: 0 5px;}

	#recarga ul.list-circle-steps li {margin-right: 12px; padding: 0;}
	#recarga ul.list-circle-steps li.active{ font-size: 14px !important; } 
	#recarga ul.list-circle-steps li.active span{ margin-right: 4px; width: 44px; height: 44px; }
	#recarga ul.list-circle-steps li span{ margin-right: 0; width: 36px; height: 36px; font-size: 24px; line-height: 34px; }

	.inline-login .form-group{ padding: 0 20px !important; }
	
	.credit-card-data{ padding: 30px 20px; }

	#formRecarga .col-xs-1, 
	#formRecarga .col-xs-2, 
	#formRecarga .col-xs-3, 
	#formRecarga .col-xs-4, 
	#formRecarga .col-xs-5, 
	#formRecarga .col-xs-6, 
	#formRecarga .col-xs-7, 
	#formRecarga .col-xs-8, 
	#formRecarga .col-xs-9, 
	#formRecarga .col-xs-10, 
	#formRecarga .col-xs-11, 
	#formRecarga .col-xs-12 { float: left; padding-left: 5px; padding-right: 5px;} 

	#formRecarga .col-xs-12 { clear:both; width: 100%; }
	#formRecarga .col-xs-11 { width: 91.66666666666666%; }
	#formRecarga .col-xs-10 { width: 83.33333333333334%; }
	#formRecarga .col-xs-9 { width: 75%; }
	#formRecarga .col-xs-8 { width: 66.66666666666666%; }
	#formRecarga .col-xs-7 { width: 58.333333333333336%; }
	#formRecarga .col-xs-6 { width: 50%; }
	#formRecarga .col-xs-5 { width: 41.66666666666667%; }
	#formRecarga .col-xs-4 { width: 33.33333333333333%; }
	#formRecarga .col-xs-3 { width: 25%; }
	#formRecarga .col-xs-2 { width: 16.666666666666664%; }
	#formRecarga .col-xs-1 { width: 8.333333333333332%; }
}

@media (min-width: 560px){
	#recarga .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px){
	#recarga .form-confirmation .dl-horizontal dt { width: 100%; text-align: left; }
	#recarga .form-confirmation .dl-horizontal dd { width: 100%; margin-left: 0; margin-bottom: 1em; }

	#formRecarga .expirationmonth,
	#formRecarga .expirationyear,
	#formRecarga .cvccode{ width: 50% !important; }	
}

@media (max-width: 767px){
	.form-confirmation .checkbox-confirmation { margin-left: 40px;}

	.inline-login .form-group{ width: 100% !important; float: none;}
	.inline-login{ padding: 34px 20px 26px 20px;   max-width: 420px;}
	.inline-login .form-group{ padding: 0 40px;  margin-top: 15px;}

	#recarga .custom_modal:before{ right: 50%; margin-right: -16px; }
}

@media (max-width: 340px){
	#recarga .radio-inline{ padding-left: 0;}
}

@media (max-width: 640px){
	#recarga .methods-container .radio-inline{ text-align: left; width: 100%;}
	#recarga ul.list-circle-steps li{ font-size:0; } 
	#recarga ul.list-circle-steps li.active{ font-size: 16px; } 
}

@media (max-width: 600px){
	#formRecarga .methods-container{ width: 90%;}
	#formRecarga .methods-row .method { margin: 0 auto 20px !important; overflow: hidden; float: none !important;}
}