/*
CUSTOM REGISTRATION - Extension for Opencart
edit this CSS to style: 
- checkout forms
- register account page
- Edit account info
- Edit Address book
*/

/* general */
.checkout, .intro {margin: 0 30px 30px 30px;} /* oc <= 1.5.5.1 */

.crf_container { padding: 20px; }

/* remove margins and paddings to gain extra width on low res devices */
@media all and (max-width: 480px)  {
	.checkout, .intro {margin: 0} 
	.crf_container {padding:20px 0;}
}

/* For debug only 
.crf_container,
.crf_container .left,
.crf_container .right,
.crf_columns_container {
	border:1px solid red;
}
*/

/* headers */
.crf_container h2 {font-size:18px;margin-top:35px; margin-bottom:15px;}


/* Clearfix */
.clearfix {clear:both}
.crf_columns_container:after { /* Clearfix without extra markup */
	content: "";
	display: table;
	clear: both;
}


.crf_container .left {float:left;}
.crf_container .right {float:right;}

.crf_container .left,
.crf_container .right {
						width:50%; 
						min-width:240px; 
						box-sizing:border-box;
						padding-right:15px; } 

/* fix the width to expand inputs to all the available space on low res devices */
@media all and (max-width: 480px)  {
	.crf_container .left,
	.crf_container .right {width:100%; min-width:auto;} 
}

.crf_columns_container {margin:0 auto;}

/* Icon "Loading" */

.crf_container span.wait {float:right;padding:8px;}

.crf_container span.loading {
	display:inline-block;
	width: 10px;
	height: 10px;
	background: center no-repeat url('data:image/gif;base64,R0lGODlhCgAKANUAAP////v7+/f39/Pz8+/v7+rq6ubm5uLi4t7e3tra2tbW1tLS0s7OzsrKysXFxcHBwb29vbm5ubW1tbGxsa2trampqaWlpaCgoJycnJiYmJSUlJCQkIyMjIiIiISEhICAgHt7e3d3d3Nzc2NjY19fX1paWlZWVlJSUk5OTkZGRiEhIR0dHRkZGQgICP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgAuACwAAAMACQAHAAAGKkCBAeAqGksqjPG4qiyLgsjnUSQwBC5KytNwNB4Jl4Hi4GQKiGVggsG6ggAh+QQJCgAuACwAAAEABwAJAAAGKkCXQbNwGV2bFuooiJAmR9DJcXR5TJHqwFFpVB+cS8FgLDAYjseguigGAQAh+QQJCgAuACwAAAAABwAJAAAGLECXEFAqCVyGiYSlOrgqqVDGAhA4PA+hC7NhaF0WjeMbKDgIX8Sj8XUljsIgACH5BAkKAC4ALAAAAAAJAAcAAAYqQJcw4PkAhK6Cw2EyRTQGF4RzkTxQrY5LEXEIJ6MFw1FAIhmPqFk4WAuDACH5BAkKAC4ALAAAAAAKAAcAAAYrQJdQcLkEhEjEYbNxUAzCxMOxaIBSlCGDIHx0IgKkuLIqiZEYlfnsAhgEQQAh+QQJCgAuACwDAAAABwAJAAAGKkDXYuEqugYPx+JRKBoKFM7D6HJYHAPqw+TRmkLGCQkiMKJaHOpCY3AFAQAh+QQJCgAuACwDAAEABwAJAAAGK0CXUJAQGhsPhNFFcBgESwXnslxkMMZIpzEAWCygVMV1WLEik4JLUCoBjEEAIfkECQoALgAsAAADAAoABwAABipAl3AoHBCJhgfjKCwoXYvRRNiYKISdFioCwXAaQoMmYjopHgYi4OMRDIMAOw==');
}


/* Placeholders */
.crf_container ::-webkit-input-placeholder	{ color: #c3c3c3; }
.crf_container :-moz-placeholder			{ color: #c3c3c3; opacity: 1; }
.crf_container ::-moz-placeholder			{ color: #c3c3c3; opacity: 1; }
.crf_container :-ms-input-placeholder		{ color: #c3c3c3; }


/* color for error text and asterisks (*)  */
.crf_container span.required, 
.crf_container span.error, 
.crf_container .text-danger {color:red}

/* text weight  for * asterisks   */
.crf_container span.required {font-weight:bold}


/* labels & input wrappers */

.crf_container div[class^='sort_order_'] {
/*	display:table;
	border-collapse: separate;
	border-spacing: 5px;*/
	width:100%;
	margin-bottom:5px;
}

.crf_container .label, 
.crf_container .input_wrapper {
	float:none;
/*	display:table-cell;*/
	display:inline-block;
	vertical-align:middle;
	min-width:100px;
	font-size:14px;
	color:black;
	font-weight:normal;
	padding:5px !important;
	box-sizing:border-box;
}

.crf_container .label {
	width:25%;
	text-align:right; 
	padding-right:20px !important;
	white-space: normal;
	line-height:20px;
}
.crf_container .input_wrapper {
	width:70%;
	text-align:left; 
}

.crf_container .input_wrapper * {
	box-sizing:border-box;
}

/* Buttons */
.crf_container .buttons {margin-bottom:30px; display:block; clear:both; float:none;overflow:auto;}
.crf_container .buttons .right {width:auto; padding:0;}

/* Captcha */
	.crf-captcha {margin: 30px 0;}
	.crf-captcha label {width: 25%; font-size: 14px; text-align:right;}
	.crf-captcha div[class^="col-"] {display:inline-block; width:auto;}
	.crf-captcha input[name="captcha"] {width: 150px !important; margin-bottom: 10px !important;}
	
	/* Checkout - registration page */
		.checkout-checkout .crf-captcha {margin: 0 0 30px 0;}
		.checkout-checkout .crf-captcha * {text-align:right}
		.checkout-checkout .crf-captcha label {text-align:right !important; display:block; width:100%;}
		.checkout-checkout .crf-captcha input,
		.checkout-checkout .crf-captcha img {text-align:left; display:inline-block; }
		.checkout-checkout .crf-captcha input {margin-left:15px;}
				
/* Errors and warnings */
.crf_container .warning { /* oc <= 1.5.6.4 */
	position:static;
   /* background: url("../image/warning.png") no-repeat scroll 10px center #FFD1D1; */
    border: 1px solid #F8ACAC;
	padding:10px;
	padding-left:38px;
    border-radius: 4px 4px 4px 4px;
}

.crf_container .error {display:block; margin:0; padding:0; }

/* checkout login/register form */

/*
#checkout .checkout-content {max-width:700px;}
#checkout .checkout-content .left {width: 280px; padding-right: 100px;}
#checkout .checkout-content #login {width: 200px; padding-right: 0px;}
*/

/* aligns the button "login" on the right of input fields  email and password */
/*
#checkout .checkout-content #login .buttons {width: 240px} 
*/



/* input field style */
.crf_container input[type="text"], 
.crf_container input[type="password"],
.crf_container select,
.crf_container textarea {
	width:100%; 
	border:1px solid #c2c2c2;
	box-shadow: inset 0px 0px 3px 0px rgba(50, 50, 50, 0.15);
	border-radius: 4px;
	padding: 5px;
}

.crf_container input[type="checkbox"] {padding:0;}

.crf_container input[type="radio"] {position:static;margin-left:0;}

.crf_container input[type="button"] {padding:5px 10px;}

.crf_container #shopping_cart_confirm input {width:auto}


/* Select dropdown fix for low-res devices */
@media all and (min-width: 0px) and (max-width: 400px)  {
	.crf_container select { width: 180px; }
}

/* Responsive columns*/

@media all and (max-width: 768px)  {
	.crf_container .left,
	.crf_container .right {width:100%;}
}

@media all and (max-width: 992px)  {

	.crf_container div[class^='sort_order_'] {margin-bottom:10px;}

	.crf_container .label,
	.crf_container .input_wrapper {width:100%;}
	
	.crf_container .label {padding:0 !important; text-align:left;}	
	
	.crf-captcha label {width: 100%}
}

/*******************************************************************************************************
  Extra features - Uncomment the code below to hide comment fields from shipping/payment order forms  */

/*
#payment-method .comment, #shipping-method .comment {display:none}
#payment-method .checkout-content b, #shipping-method .checkout-content b {display:none}
#payment-method .checkout-content .buttons a b {display:inline}
#payment-method textarea[name=comment], #shipping-method textarea[name=comment] {display:none}
*/

/* End Extra features 
 *********************/




/******************* 
   Theme Patches  
*******************/
 

/************************************************************************
  Journal 2 patch - Uncomment the code below if you have Journal theme */

/*
#checkout .checkout-content {font-size:13px;}

.checkout-content input[type="text"], 
.checkout-content input[type="password"] {width:90%}

@media all and (min-width: 0px) and (max-width: 700px)  {
	.checkout {margin-left:0!important; margin-right:0 !important;}
	.checkout-content {padding-left: 15px !important; padding-right: 15px !important; }
	
	.checkout-content .left,
	.checkout-content .right {width:100% !important; min-width:0px !important; padding:0px !important; }
	
	.checkout-content input[type="text"], 
	.checkout-content input[type="password"],
	.checkout-content select {width:100% !important}
	
	.checkout-content #payment-new td.label,
	.checkout-content #shipping-new td.label {width:25% !important;}
	.checkout-content #payment-new td,
	.checkout-content #shipping-new td {width:75% !important; padding-right:0px !important;}
}


@media all and (min-width: 0px) and (max-width: 600px)  {	
	
	.checkout-content #payment-new td,
	.checkout-content #shipping-new td {width:100% !important;}
	.checkout-content #payment-new td.label,
	.checkout-content #shipping-new td.label {width:300px !important;}
}
*/

/* End Journal Theme patch 
 *************************/





/* Gamesworld Theme patch - Uncomment the code below if you have Gamesworld theme (tested on Oc 1.5.64) */

/*
form#registration select,
.checkout-content select,
.edit_account_form select,
.update_address_form select
{
	padding:0;
}
	
form#registration .label,
.edit_account_form .label,
.update_address_form .label  {color:#040404 !important}

*/

/* End Gamesworld patch 
 **********************/