/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.field-left {
	float: left;
	width: 49%
}

.field-right {
	float: right;
	width: 49%;
}

.info-msg,
.success-msg,
.warning-msg,
.error-msg {
	margin: 10px 0;
	padding: 10px;
	border-radius: 3px 3px 3px 3px;
}
.info-msg {
	color: #059;
	background-color: #BEF;
}
.success-msg {
	color: #270;
	background-color: #DFF2BF;
}
.warning-msg {
	color: #9F6000;
	background-color: #FEEFB3;
}
.error-msg {
	color: #D8000C;
	background-color: #FFBABA;
}

<!-- stripe -->

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
	background-color: white;
	height: 40px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}

.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
	border-color: #fa755a;
}

.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
}

<!-- Progress with steps -->

ol.progtrckr {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ol.progtrckr li {
	display: inline-block;
	text-align: center;
	line-height: 3em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
	color: black;
	border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
	color: silver;
	border-bottom: 4px solid silver;
}

ol.progtrckr li:after {
	content: "\00a0\00a0";
}
ol.progtrckr li:before {
	position: relative;
	bottom: -2.5em;
	float: left;
	left: 50%;
	line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
	content: "\2713";
	color: white;
	background-color: yellowgreen;
	height: 1.2em;
	width: 1.2em;
	line-height: 1.2em;
	border: none;
	border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
	content: "\039F";
	color: silver;
	background-color: white;
	font-size: 1.5em;
	bottom: -1.6em;
}

.button {
	display: block;
	width: -webkit-calc(50% - 6px);
    	width:    -moz-calc(50% - 6px);
    	width:         calc(50% - 6px);
	margin: 0 0 10px 0;
	min-width: 90px;
	clear: both;
    	background-color: #6db764;
    	border: 0 none;
    	border-radius: 4px;
    	color: #FFFFFF;
    	cursor: pointer;
    	font-size: 12px;
    	font-weight: bold;
    	height: 30px;
    	line-height: 30px;
    	padding: 0;
    	text-align: center;
    	text-decoration: none;
    	vertical-align: top;
    	white-space: nowrap;
}

input[type='text'],input[type='email'],input[type='number'] {
	display: block;
    	text-indent: 5px;
    	padding: 8px 0;
        margin: 0 4% 10px 0;

        width: -webkit-calc(100% - 6px);
   	width:    -moz-calc(100% - 6px);
    	width:         calc(100% - 6px);
}

.payment_detail {
	margin-top: 10px;
	margin-bottom: 10px;
}


.button_selected {
	background-color: gray !important;
}