html {
	min-height: 100%;
  	background: #333;
	overflow-x: hidden;
}
body {
	min-height: 100%;
	margin: 0;
	background: #333;
	overflow-x: hidden;
	color:#fff;
	font-family: "din-condensed", Arial, "sans-serif";
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* FONT OVERRIDE */
.wf-loading {
	/* Hide the blog title and post titles while web fonts are loading */
	visibility: hidden;
}

/* ##########################
	tms custom styles
########################## */

.full-page {
    min-height: 100vh;
    flex-direction: column;
}


/* ##########################
	COMPONENTS
########################## */

.main-content,
.mat-sidenav-content,
.mat-button-toggle,
.mat-button-base,
.mdl-button,
.mdl-button--raised,
.mdl-button--colored,
.mat-fab,
.mat-icon-button,
.mat-mini-fab,
.mat-card,
.mat-checkbox,
.mat-input-container,
.mat-list,
.mat-radio-button,
.mat-select,
.mat-list .mat-list-item .mat-list-item-content,
.mat-nav-list .mat-list-item .mat-list-item-content,
.mat-simple-snackbar,
.mat-tab-label,
.mat-slide-toggle-content,
.mat-toolbar,
.mat-tooltip  {
	-webkit-font-smoothing: antialiased;
	font-family: "din-condensed", Arial, "sans-serif";
	color:#fff;
	text-transform: uppercase;
}
.mat-menu-item{
	-webkit-font-smoothing: antialiased;
	font-family: "din-condensed", Arial, "sans-serif";
	color: #333;
	text-transform: uppercase;
}

.mdl-checkbox.is-upgraded {
    padding-left: 32px;
	line-height: 32px;
}
.mdl-checkbox__box-outline{
	background-color: #333;
	height:24px;
	width:24px;
	padding:3px;
	box-sizing:border-box;
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline{
	border-color:#333;
	background-color: #fff;
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline{
	background-color: #333;
	height:20px;
	width:20px;
}
.mdl-button{
	line-height: 40px;
}
.mdl-button.mdl-button--colored,
.mdl-button.mdl-button--colored:focus,
.mdl-button.mdl-button--colored:focus:not(:active){
	background-color:#f26623;
	color:#fff;
	margin:12px 0 0;
}
.mdl-button.mdl-button--colored:hover{
	background-color:#f26623;
}

input.mdl-button[type="submit"] {
	white-space: normal;
	height: auto;
	line-height: normal;
	padding: 8px 16px 7px;
}


/* ##########################
	GENERAL
########################## */

a{
	color:#fff;
	text-decoration:underline;
}
a:hover{
	color:#f26623;
}

/* grid */
.content-full,
.full-width{
	width:100%;
}

/* floats*/
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}

/* text align*/
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}

/* margins*/
.margin-t8{
	margin-top:8px;
}
.margin-l8{
	margin-left:8px;
}
.margin-t12{
	margin-top:12px;
}
.margin-l12{
	margin-left:12px;
}


/* ##########################
	CONTENT ALIGNMENTS
########################## */

/******** CONTENT FLOW *******/
.flex {
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}
.flex.flex-center {
	justify-content: center;
}

.flex-auto-center {
flex: 1 1 auto;
	display: flex;
	align-items: center;
}


/*div[inline] div,*/
/*div[inline] span,*/
/*div[inline] img{*/
	/*display: inline;*/
	/*display: inline-block;*/
	/*vertical-align: middle;*/
	/*margin-right:10px;*/
/*}*/


/* ##########################
	FONTS
########################## */

/******** FONT FAMILY *******/
.font-din{
	font-family: "din-condensed", Arial, "sans-serif";
}

/******** FONT SIZE *******/
.font-14{
	font-size:14px;
}
.font-18{
	font-size:18px;
}
.font-24{
	font-size:24px;
}
.font-32{
	font-size:32px;
}
.font-36{
	font-size:36px;
	line-height: 36px;
}
.font-48{
	font-size:48px;
}
.font-60{
	font-size:60px;
}

/******** FONT COLOR *******/
.font-grey,
.font-grey a{
	color:#808080;
}
.font-white,
.font-white a{
	color:#ffffff;
}

/******** FONT CASE *******/
.font-normalcase{
	text-transform: none;
}
.font-uppercase{
	text-transform: uppercase;
}


/* ##########################
	FORM
########################## */
.alert {
    background-color: transparent;
	border: none;
    padding:0;
    font-size: 18px;
    margin: 4px 0 8px;
	line-height: 1.3em;
}
.alert-error{
    color: #BB0A0A;
}
.alert-success{
    color: #3C9926;
}
.alert-warning{
    color: #FFFFFF;
}


/* ##########################
	LOGIN/REGISTER/PASSWORD
########################## */

.form-box{
	background: #111;
	max-width:374px;
	padding:36px 24px;
	margin-bottom:20px;
	box-sizing: border-box;
	position: relative;
}

#tmsLink {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50px;
}

#storeLink {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -100px;
}

.form-box--wide {
	max-width: 800px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 600px) {
	.form-box--wide {
		max-width: 316px;
		width: 100%;
	}
}
.form-box .form-box-header{
	padding:15px 0 0px;
}
.form-box form{
	width: 316px;
	max-width:100%;
	box-sizing: border-box;
}
.form-box--wide form{
	width: auto;
}

form .mat-input-wrapper {
	margin: 1.2em 0 0;
}

form input {
	background: #333;
	padding: 10px 12px;
	box-sizing: border-box;
	color: #fff;
}
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form input:-webkit-autofill:active{
	-webkit-box-shadow:0 0 0 50px #222 inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #fff;
    background-color: #222 !important;
	border-color:#808080;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

form .mat-checkbox .mat-checkbox-ripple.mat-ripple,
form .mat-checkbox-indeterminate.mat-accent .mat-checkbox-ripple.mat-ripple,
form .mat-checkbox-checked.mat-accent .mat-checkbox-ripple.mat-ripple {
	display: none !important;
}

form .mat-checkbox .mat-checkbox-background,
form .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
form .mat-checkbox-checked.mat-accent .mat-checkbox-background {
	background: #333;
}


form .mdl-textfield__input{
	padding:4px 0 2px;
	font-family:  "din-condensed", Arial, "sans-serif";
	font-size:24px;
	line-height:1em;
	margin: 0 0 -2px;
	border-bottom:2px #808080 solid;
}
form .mdl-textfield {
	top: -10px;
	overflow: visible;
	padding: 26px 0 0;
	border-bottom:2px #808080 solid;
	margin:10px 0 0;
}
form .mdl-textfield .mdl-textfield__label {
	color: #808080;
	padding: 0px 0 2px;
	top:20px;
	margin:0 0 -2px;
	font-size:24px;
	font-weight:400;
}
form .mdl-textfield__label:after{
	background-color: #f26623;
	bottom:0px;
}
form .mdl-textfield.is-focused .mdl-textfield__label,
form .mdl-textfield.is-dirty .mdl-textfield__label {
	color: #f26623;
	padding-left: 0px;
	font-size:18px;
}
form .mat-focused .mdl-textfield__label.is-focused,
form .mdl-textfield__label.is-focused:not(.is-dirty) {
	transform: translate3d(-8px, -2em, 0) scale(0.75);
	color: #f26623;
}

/**
BANNER
 */
.cta-banner {
	flex: 0 1 auto;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}
.cta-banner__wrapper {
	background: #f26623;
	padding: 0.75em;
	text-align: center;
	width: 100%;
}
.cta-banner .cta-banner__message {
	margin-right: 1em;
	float: left;
	flex: 1 1 auto;
}
.cta-banner .cta-banner__button {
	margin-top: 0;
	float: left;
	flex: 0 1 auto;
	border: 1px solid #ffffff;
	line-height: 36px;
	overflow: visible;
	height: auto;
}

@media (max-width: 600px) {
	.cta-banner .cta-banner__message {
		font-size: 14px;
	}
	.cta-banner .cta-banner__button {
		font-size: 14px;
		line-height: normal;
	}
}

/* terms and conditions */
#kc-terms-text {
	max-height: 400px;
	overflow: auto;
	margin-bottom: 1em;
}

/**
FLAG / COUNTRY SELECT
 */

#country {
	height: 0;
	padding: 0;
	visibility: hidden;
}

.country-select-container {
	bottom: 0;
	display: inline-flex;
	height: 1em;
	left: 0;
	position: absolute;
	transform: translateY(-50%);
	visibility: hidden;
	width: 50px;
	z-index: 1;
}

.country-select-container.is-in-phone-format {
	visibility: visible;
}

.country-select-container.is-in-phone-format + input#username_visible {
	padding-left: 50px;
}

.country-select .country-list {
	background-color: #333;
	color: #fff;
	font-size: 1.2em;
}

a.mdl-js-button {
	padding: 0;
}

.email-phone-field {
  z-index: 2;
}

.email-phone-field.is-dirty.is-invalid {
  margin-bottom: 1em;
}