body{
    font-family: 'Roboto', sans-serif;
}

header{
	background: #616161;
	height:45px;
	z-index: 2;
	position: relative;
}
nav{
	position: fixed;
	left:0;
	top:0;
	width: 45px;
	z-index: 1;
	background: #9e9e9e;
	height: 100vh;
}
.form-group{
	margin-bottom: 0;
}


#nameNavigation{
	background: #757575;
	color: #fff;
	font-size: 24px;
	padding-left:10px;
	position: relative;
}
#nameNavigation span{
	padding-left:5px;
	padding-right: 5px;
}
#nameNavigation .right-align{
	position: absolute;
	top:0;
	right: 15px;
}
.main-card{
	margin-left:45px;
	font-size: 0;
}


.section-wrapper{
	width: calc(100% - 330px);
	padding-right: 15px;
	border-radius: 2px;
	display: inline-block;
	font-size: 16px;
	padding-top:15px;
}

#financeDealWrap,
#leaseDealWrap{
	max-width: 1024px;
	margin-left:auto;
	margin-right: auto;
}
.section-wrapper .card .dealHead .price.btn.custom-btn{
	background: #616161;
	color: #fff;
	border-radius: 2px;
	text-transform: uppercase;
	padding:2px 15px;
	top:5px;
}
.section-wrapper .card{
	-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.2);
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.2);
	margin-bottom:16px;
}
.section-wrapper .card .dealHead{
	font-weight: bold;
	font-size: 18px;
	padding:8px 15px;
	background: #eeeeee;
	position: relative;
}
.section-wrapper .card .dealHead .title{
	color:#616161;
}
.section-wrapper .card .dealHead .price{
	color:#222;
	position: absolute;
	right: 10px;
	top:8px;
}
.section-wrapper .card .dealBody{
	padding: 15px 10px 10px 20px;
	background:#f5f5f5;
	color:#7c7c7c;
	font-size: 0;
}

.section-wrapper .card .dealBody label,
.section-wrapper .card .dealBody input,
.section-wrapper .card .dealBody .calculated-field{
	display: inline-block;
	font-size: 16px;
	margin-bottom: 10px;
	position: relative;
}

.section-wrapper .card .dealBody .form-item-group{
	position: relative;
}
.section-wrapper .card .dealBody label{
	width:60%;
	z-index: 1;
	position: relative;
}
.section-wrapper .card .dealBody .flex-container.matrix span.input-identifier,
.section-wrapper .card .dealBody .input-identifier{
	font-size: 16px;
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;
	color: #757575;
	display: inline;
	line-height: normal;
	width: auto;
}
.section-wrapper .card .dealBody .input-identifier.dollar-sign{
	left: calc(60% + 8px);
	right: auto;
}

.section-wrapper .card .dealBody .flex-container.matrix span.input-identifier.dollar-sign{
	left:8px;
	display: inline;
	width:10px;
	top:10px;
}
.section-wrapper .card .dealBody input,
.section-wrapper .card .dealBody .calculated-field{
	width: 40%;
}
.section-wrapper .card .dealBody .calculated-field{
	font-size: 16px;
	text-align: right;
	padding-right: 5px;
	line-height: 34px;
}
.section-wrapper .card .dealBody input.right-text{
	text-align: right;
}
.section-wrapper .card .dealBody input.form-control:focus{
	border: 1px solid #757575;
	border-bottom-color: #616161;
	box-shadow:none;
	-webkit-box-shadow: 0 2px 0 0 #616161;
	box-shadow: 0 2px 0 0 #616161;
}

.section-wrapper .card .dealBody label.uncheck,
.section-wrapper .card .dealBody label.check{
	padding-left:30px;
}
.section-wrapper .card .dealBody label.calc{
	padding-right: 30px;
}

.section-wrapper .card .dealBody .icon{
	height: 24px;
	width: 24px;
	cursor: pointer;
	z-index: 2;
	position: absolute;
	top:7px;
}
.section-wrapper .card .dealBody .icon.check-button::before,
.section-wrapper .card .dealBody .icon.calc-button::before,
.section-wrapper .card .dealBody .icon.loc-button::before{
	display: inline-block;
	font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 24px;
	text-rendering: auto;
	line-height: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	line-height: 24px;
	left:0;
}

.section-wrapper .card .dealBody .check-button::before{
	content:"\F132";
}
.section-wrapper .card .dealBody .icon.calc-button,
.section-wrapper .card .dealBody .icon.loc-button{
	left:calc(60% - 35px);
}
.section-wrapper .card .dealBody .calc-button::before{
	content:"\F0EC";
}
.section-wrapper .card .dealBody .loc-button::before{
	content:"\F34E";
}




.section-wrapper .card .dealBody .uncheck .check-button::before{
	content:"\F131";
}

.section-wrapper .card .dealBody .form-item-group.uncheck .check-button,
.section-wrapper .card .dealBody .form-item-group.uncheck label{
	color:#9e9e9e;
}
.section-wrapper .card .dealBody .form-item-group.uncheck input{
	text-decoration: line-through;
	color: #9e9e9e;
}

/*

https://codepen.io/team/css-tricks/pen/EKEYob

@import "compass/css3";
*/
.card.full-width{
	margin-left: 8px;
	margin-right: 8px;
	width: calc(100% - 20px);
	min-width: calc(100% - 20px);
}



.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap:wrap; 
  
  height: auto;
  flex-align:top;
}

.flex-container .card.card-flex{
	margin-left: 8px;
	margin-right: 8px;
	width: calc(100% - 16px);
}



.flex-order-container{
	display: flex;
	flex-direction: column;
}
.flex-order-container > div:first-of-type{
	order:1;
}
.flex-order-container > div{
	width: 100%;
	min-width: 100%;
}
.flex-container.matrix:first-of-type{
	height:144px;
}
.flex-container.matrix{
	height:96px;
}
.section-wrapper .card .dealBody .flex-container.matrix .table-item{
	height: 48px;
	margin-right: 8px;
	margin-left: 8px;
	width: calc(20% - 16px);
	position: relative;
}
.section-wrapper .card .dealBody .flex-container.matrix span{
	font-size: 16px;
	text-align: right;
	display: inline-block;
	width: 100%;
	line-height: 38px;
}
.section-wrapper .card .dealBody .flex-container.matrix button{

}
.section-wrapper .card .dealBody .flex-container.matrix input{
	width: 100%;
}



.section-wrapper .card .dealBody .flex-container.matrix span.tertiary-btn{
	text-align: center;
	border:1px solid #bdbdbd;
	color: #757575;
	background: #fff;
	border-radius: 50px;
	line-height: 25px;
	font-size:16px;
	font-weight: bold;
	white-space: nowrap;
}
.section-wrapper .card .dealBody .flex-container.matrix span.tertiary-btn.selected{
	color: #424242;
	background: #bdbdbd;
	font-size: 18px;
}
.section-wrapper .card .dealBody .flex-container.matrix span.tertiary-btn.empty{
	background: transparent;
	cursor: default;
}


@media only screen and (min-width: 1024px)  {
	.flex-container {
		height: 785px;
	}
	.flex-container .card.card-flex{
		margin-left: 8px;
		margin-right: 8px;
		width: calc(50% - 16px);
	}
}


@media only screen and (min-width: 1440px)  {
	.flex-container {
		height: 560px;
	}
	.flex-container .card.card-flex{
		margin-left: 8px;
		margin-right: 8px;
		width: calc(33% - 16px);
	}
}








/* LEASE SPECIFICS */
#leaseDealWrap .flex-container{
	height
}
#leaseDealWrap #leaseMatrix .flex-container.matrix{
	height:100px;
}
#leaseDealWrap #leaseMatrix .flex-container.matrix:first-of-type{
	height:240px;
}
@media only screen and (min-width: 1024px)  {
	#leaseDealWrap .flex-container{
		height:1000px;
	}
}


@media only screen and (min-width: 1440px)  {
	#leaseDealWrap .flex-container{
		height:640px;
	}
	#leaseDealWrap #leaseMatrix .flex-container{
		height:640px;
	}
}



/* ID CARD */
#customerCard{
	width: 330px;
	padding:15px;
	display: inline-block;
	font-size: 16px;
	vertical-align: top;
	padding-top:15px;
	position: relative;
}
#customerCard .contact-icons{
	position: absolute;
	top:15px;
	right: 15px;
}
#customerCard .circle{
	display: block;
	height:40px;
	width:40px;
	font-size: 24px;
	text-align: center;
	border-radius: 50%;
}
#customerCard .contact-icons .mdi{
	background: #757575;
	color:#fff;
	margin-bottom: 10px;
	padding-top:3px;
}
#customerCard .vehicle-title-wrap .mdi.circle,
#customerCard .customer-header .icon.circle{
	background: #e0e0e0;
	font-size: 16px;
	color: #757575;
	padding-top:9px;
	float: left;
	margin-right: 20px;
}
#customerCard .vehicle-title-wrap .mdi.circle{
	font-size:24px;
	padding-top:3px;
}
#customerCard .phone-wrap .telephone{
	line-height: 20px;
}
#customerCard .contact-info{
	color:#7b7b7b;
	font-size: 14px;
	min-height: 90px;
}
#customerCard .contact-info .email{
	margin-top:15px;
}
#customerCard .contact-info .address{
	margin-top:10px;
	margin-bottom: 20px;
}


#customerCard .line{
	height: 1px;
	background: #e0e0e0 ;
	width:100%;
	margin-top:15px;
	margin-bottom: 15px;
}
#customerCard .vehicle-wrap > div{
	position: relative;
}
#customerCard .vehicle-wrap .ellipsis{
	position: absolute;
	font-size: 24px;
	right: 8px;
	top:4px;
	color:#9e9e9e;
}
#customerCard .vehicle-wrap .deal-wrap{
	font-size:16px;
	line-height: 20px;
}
#customerCard .deal-choice.selected{
	background: #bdbdbd;
}
#customerCard .deal-choice{
	padding-left:60px;
	margin-top:15px;
	padding-top:10px;
	padding-bottom: 10px;
	border-radius: 5px;
	cursor:pointer;
}
#customerCard .deal-choice .title{
	font-weight: bold;
}
#customerCard .vehicle-wrap .deal-choice .ellipsis{
	top:12px;
}
#customerCard .deal-choice .deal-selected{

}