@import url(https://fonts.googleapis.com/css?family=Montserrat);

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	color: #666666;
	margin:0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 100vh;
	height: -webkit-fill-available;

}

footer {
	flex-shrink: 0;
}

.banner-message {
	text-align:center;
	font-size: 15px;
	color: #00ADA8
}

hr {
	opacity: 0.5;
}
a:link {
	color: #00ada7;
	text-decoration: none;
}
a:visited {
	color: #00ada7;
	text-decoration: none;
}
a:hover {
	color: #29c5c7;
	text-decoration: none;
}
a:active {
	color: #00ada7;
	text-decoration: none;
}

.login-page {
	max-width: 350px;
	max-height: 500px;
	padding: 2em;
	margin: auto;
}

.form {
	position: relative;
	background: #FFFFFF;
}

.form-section {
	background: white;
	
}

#frm-sec-2, #frm-sec-3,#frm-sec-4 {
	display: none;
}

#act-frm-nocode, #act-frm-notoken, #act-frm-activate,#act-frm-starting,#act-frm-done, #transfer-page {
	display: none;
}


.bottom-buttons {
	text-align: center;
}

.form input[type="button"] {
	background: #00ada7;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
	padding: 15px;
	border: 1px solid #00ada7;
	border-radius: 2px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	display: inline-block;
	width: 100%;
}
.form input[type="button"]:hover,.form input[type="button"]:active,.form input[type="button"]:focus {
	background: #29c5c7;
}
.form input[type="button"].previous {
	background: #ffffff;
	border: 1px solid #E8E8E8;
	color: #00ADA8;
}

.form input,select {
	outline: 0;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	font-size: 14px;

	background: #FFFFFF;

	border: 1px solid #CCCCCC;
	border-radius: 2px;

}

label {
	line-height: 20px;
	float: left;
}

label.error {
	padding-top:10px;
	padding-bottom: 10px;
	display:block;
	width:100%;
	color: red;
}


.form .message {
	margin: 15px 0 0;
	color: #b3b3b3;
	font-size: 12px;
}
.form .message a {
	color: #00ada7;
	text-decoration: none;
}
input,select {
	font-family: "Montserrat";
}

.clearfix {
	clear: both;
}
.alert {
	color: #D7264A;
}

.vintrace-subdomain {
	text-align: center;
	font-size: 20px;
}

.footer {
	margin-top: 20px;
	font-size: 13px;
	display: flex;
	justify-content: center;
}

.footer a {
	color: #666;
	text-decoration: underline;
	
}

.footer-item {
	flex-grow: 3;
	text-align: center;
	padding: 0px 0px;

	align-items: center;
}

.footer-separator {
	flex-grow: 0;
}

.footer-vam {
	vertical-align: text-bottom;
}

#loading {
	display: none;
}

#measurement {
	display: none;
}

#submission-error {
	display: none;
	line-height: 0px;
	padding-bottom: 20px;
	display:block;
	width:100%;
	color: red;
}

.progress {
	width: 80%;
	background-color: grey;
	display: inline-block;
}

#progress-bar {
	width: 1%;
	height: 10px;
	background-color: #29c5c7;
}

#progress-bar-finished {
	width: 100%;
	height: 10px;
	background-color: #29c5c7;
}


/* from bootstrap */
.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.maxlength {
	position: relative;
	top: -12px;
	font-size: smaller;
	text-align: right;
}

#mount {
	display: inline-block;
}

.intro-bg {
	background: #00C7C1;
}

/* stop round button in iOS */
input, textarea, select {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}


/* grey out sample mobile number */
#intPhoneNumber::-webkit-input-placeholder {
	color: #d8d8d8;
}
#intPhoneNumber::-moz-placeholder {
	color: #d8d8d8;
}
#intPhoneNumber::-ms-input-placeholder {
	color: #d8d8d8;
}
#intPhoneNumber::-moz-placeholder {
	color: #d8d8d8;
}

/* tel input*/
.iti__flag {background-image: url("../images/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.iti__flag {background-image: url("../images/flags@2x.png");}
}

.iti {
	width: 100%;
	margin-bottom: 15px;
}


.flex-container {
	display: table;
	margin: 0 auto;
}

.sticky-footer {
	font-weight: 300;
	font-size: 13px;
	background: #FBFBFB;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.half {
	flex: 1;
	padding: 8px;
}

.modal-bottom {
	z-index: 1003;
	position: absolute;
	opacity: 1;
	bottom: 0;
	width: 100%;
	height: 30%;
	background: white;
}

.modal-content {
	/*padding: 30px;*/
	padding: 5%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.modal-item {
	margin: 15px auto;
	font-weight: 500;
	font-size: larger;
}

.modal-override-form {
	padding: 0;
}

#btn-launch {
	margin: 0;
	width: 250px;
}

.coupon {
	text-align: center;
    border: 1px solid #E8E8E8;
    padding: 10px;
    margin: auto;
    width: 50%;
}