html,body {
	width:100%;
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#262626;}
body {
	width:100%;}
header {
	width:100%;
	padding:20px;
	background:#fff;}
header .logo {
	height:74px;}
main {
	width:100%;
	position:relative;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../web/images/new_checkout_bk.jpg) no-repeat;
	background-size:100%;}

.draggable .header {
	cursor:move;}

#main-checkout {
	position:relative;
	display:inline-block;
	margin-top:0px;
	transition:.3s;}

#contents {
	min-height:500px;
	padding-bottom:100px;}
.overlay {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:#fff;
	opacity:0.5;}
.overlay-blue {
	background-image:radial-gradient(#2b93b8 2%, #003473 70%);
	opacity:0.8;}
#page-loading {
	width:100%;
	height:100%;
	top:0px;
	position:fixed;}
#page-loading .overlay {
	opacity:0.4;}
#page-loading .loader {
	width:100%;
	text-align:center;}
#page-loading .loader img {
	height:80px;}

.col1-box {
	width:60%;
	float:left;}
.col2-box {
	width:40%;
	float:left;}
#registration-payment-info, #registration, #running-summary {
	width:100%;
	float:left;
	transition:0.3s;
	color:#fff;}
#registration {
	display:none;}
#running-summary {
	margin-top:20px;
}

.component {
    padding-top:8px;
	position:relative;}
.component .box {
	width:96%;
    float:left;
    margin-left:2%;
	border-radius:8px;}
.component .box .header {
    width:100%;
	height:50px;
	float:left;
    line-height:50px;
	font-size:1.4em;
	font-weight:bold;
    border-top-left-radius:20px;
	border-top-right-radius:20px;}
.component .box .header .step-num {
	width:44px;
	height:44px;
	float:left;
	line-height:38px;
	text-align:center;
	color:#fff;
	border:3px solid #fff;
	border-radius:22px;}
.component .box .header .title {
	margin-left:10px;
	color:#fff;}
.component .box .contents {
    width:100%;
	float:left;
	position:relative;
    padding:40px;
	padding-top:30px;
	border-radius:20px;
	border:2px solid #fff;
	background:rgba(255, 255, 255, 0.2);
	transition:.5s;}
.component .box .contents .title {
	width:100%;
	float:left;
	margin-top:-10px;
	margin-bottom:15px;
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
	font-size:1em;}
.component .overlay-component {
	width:100%; 
	height:100%; 
	position:absolute; 
	top:0px; 
	left:0px; 
	text-align:center;
	border-radius:20px; 
	background:rgba(255, 255, 255, 0.4);}
.component .overlay-component table {
	width:100%;
	height:100%;}
.component .overlay-component table tr td {
	width:100%;
	height:100%;
	vertical-align:middle;} 
.component input, .component select {
	width:100%;
	margin-bottom:10px;}


.field {
	width:100%;
	float:left;
	position:relative;
	margin-bottom:10px;}
.field span {
	float:left;}
.field .value {
	margin-left:8px;}
.field input {
	clear:both;
	float:left;
	height:44px;
	margin:0px;
    padding:5px;
	padding-left:12px;
	color:#303030;
	background:#fff;
	border:1.2px solid #a9a9a9;
	border-radius:4px;
	outline:0;}
.field select {
	clear:both;
	float:left;
	height:44px;
	margin:0px;
	padding:5px;
	padding-left:10px;
	color:#303030;
	background:#fff;
	border:1.2px solid #a9a9a9;
	border-radius:4px;
	outline:0;}
.field select option {
	color:#303030;}
.field select option:first-child {
	color:rgba(48, 48, 48, 0.5);}
.field .label {
	font-size:0.9em;}
footer {
	width:100%;
	float:left;}
.footer-bottom {
	width:100%; 
	height:66px; 
	float:left;
	line-height:64px;
	background:#333333; 
	color:#dadada;}
.footer-bottom a {
	text-decoration:none;}
.footer-bottom span {
	font-size:0.75em;}
.footer-bottom a {
	color:#dadada;}
.social-box {
	float:right;}
.social-box ul li {
	float:left;
	margin-left:20px;
	list-style-type:none;}
.social-box ul li i {
	font-size:1.3em;}
.social-box ul li i:hover {
	color:#3452ff;}
.footer-middle {
	width:100%; 
	height:318px; 
	float:left; 
	background:#4c4c4c;
	color:#dadada;}
.footer-middle a {
	color:#dadada;
	text-decoration:none;}
.footer-middle p {
	margin-bottom:20px;
	font-size:0.9em;}
.footer-middle .container div {
	float:left; 
	margin-top:80px;}
.footer-middle .programs-box {
	width:240px;}
.footer-middle .programs-box p {
	margin-bottom:10px;
	font-weight:bold;}
.footer-middle .programs-box p a {
	color:#fff;}
.footer-middle .programs-box p:nth-child(1){
	margin-bottom:20px;
	font-weight:bold;
	color:#dadada;}
.summary .label {
    clear:both;
    float:left;
    color:#303030;
    font-size:1em;
    font-weight:normal;}
.bad-request {
	color:#fff;}
	
.checkbox {
	width:26px;
	height:24px;
	float:left;
	padding:2px;
	border: 2px solid #fff;
	border-radius:2px;
	color:rgba(255, 255, 255, 0.1);
	cursor:pointer;}

.spinner {
	margin:0px !important;
	display:inline-block;
	border: 4px solid #f3f3f3; /* Light grey */
	border-top: 4px solid transparent; /* Blue */
	border-radius: 50%;
	width: 25px;
	height: 25px;
	animation: spin .5s linear infinite;}
#spinner-component {
	border: 6px solid #f3f3f3;
	border-top: 6px solid #a9a9a9;
	width: 52px;
	height: 52px;}	
.btn .spinner {
	float:right;
	margin-left:5px !important;
	margin-top:0px !important;}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }}
.continue .spinner {
	display:none;}

.btn-box {
	width:100%;
	height:60px;
	display:inline-block;
	padding-left:30px;
	line-height:60px;}
.btn-box .btn {
	height:44px;
	background:none;
	border:2px solid #fff;
	transition:.3s;
	font-size:1.2em;}
.btn-box .btn:hover {
	height:46px;
	background:#a00206;
	border:2px solid #a00206;}
.btn-box .btn:disabled {
	height:44px;
	background:none;
	border:2px solid #fff;}

#aux-load {
	width:100%;
	height:100%;
	position:fixed;
	left:0px;
	top:0px;
	text-align:center;
	background:rgba(255, 255, 255, 0.2);
	display:none;}
#cvv_info_img {
	height:200px;}
.close-aux {
	position:absolute;
	top:10px;
	right:20px;
	font-size:2.4em;}
.close-aux:hover {
	text-decoration:none;}

.ui-datepicker-month, .ui-datepicker-year {
	color:#505050;
	background:#fff;
	border-radius:4px;}

#aux-frame {
	display:inline-block;
	position:relative;
	background:rgba(255, 255, 255, 0.1);
	border:thin solid rgba(255, 255, 255, 0.8);
	border-radius:4px;}
#aux-frame .header {
	width:100%;
	height:50px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	background:rgba(205, 204, 205, 0.9);}
#aux-frame .header .close {
	float:right;
	margin-right:15px;
	line-height:50px;
	font-weight:300;
	font-size:3em;}
#aux-frame .header .title {
	float:left;
	margin-left:15px;
	line-height:50px;
	font-size:1.4em;}

input:-webkit-autofill {
	transition-delay: 9999s;}

.component .field .error-msg {
	clear:both;
	margin-top:2px;
	margin-bottom:8px;
	padding:1px;
	padding-left:2px;
	padding-right:2px;
	font-size:0.85em;
	line-height:14px;
	border-radius:2px;
	background:rgba(255, 255, 255, 0.9);
	color:red;}

.terms-error-msg {
	clear:both;
	float:left;
	margin:0px;
	padding:2px;
	padding-left:5px;
	padding-right:5px;
	line-height:normal;
	font-size:0.9em;
	background:rgba(255, 255, 255, 0.9);
	border-radius:2px;
	color:red;
	transition:.3s;}

.prelative {
	position:relative;}

.required {
	position:absolute;
	top:0px;
	left:5px;
	margin-left:auto;
	color:red;}