@charset "UTF-8";

@font-face {
  font-family: "dripicons-v2";
  src:url("../fonts/dripicons-v2.eot");
  src:url("../fonts/dripicons-v2.eot?#iefix") format("embedded-opentype"),
    url("../fonts/dripicons-v2.woff") format("woff"),
    url("../fonts/dripicons-v2.ttf") format("truetype"),
    url("../fonts/dripicons-v2.svg#dripicons-v2") format("svg");
  font-weight: normal;
  font-style: normal;

}

.ficon {
  font-family: "dripicons-v2";
  font-style: normal;
}

.shadow {
	box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
}

div.main-nav a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
}

div.main-nav a.cta-call {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}
/************************************************************************************************** */
/*  Dashboard
/************************************************************************************************** */

body#dashboard header {
    background: url(../images/dash-hero.jpg) top center no-repeat;
    background-size: cover;
    background-position: 40% 60%;
	min-height: 300px;
	height: auto;
}
body#dashboard header {
    margin: 0 0;
    background-color: #fff;
}
body#dashboard div.c-ov section.col {
    max-width: none;
}

div.u-noti {
    height: 32px;
    line-height: 32px;
    display: inline-block;
    padding: 0px 0px 0 0;
    color: #fff;
    margin: 0 5px;
    vertical-align: middle;
}
.main-nav div.u-noti {
    height: 32px;
    background: #fff;
    color: #333;
}

.main-nav div.u-noti a.settings {
    padding: 0px;
    position: relative;
    color: #fff;
}

.main-nav div.u-noti.notlog {
    background: none;
}

.main-nav div.u-noti.notlog a {
    color: #fff;
}

.u-noti p {
    font-size: 12px!important;
    color: #333;
    float: left;
    text-shadow: none;
    font-weight: bold;
    line-height: 32px;
    padding: 0 10px;
}
.u-noti img.s-avatar {
    width: 32px;
    border-radius: 0 2px 2px 0;
    line-height: 32px;
    display: inline-block;
    float: left;
}
.u-noti .ffont {
    font-size: 16px;
}
.u-noti a {
    color: #333;
    padding: 0 10px;
    margin: 0px;
    float: left;
    display: inline-block;
}
.u-noti a:hover {
    color: #0076bc;
}
.u-noti a.fav {
    position: relative;
    color: #fff;
}
.u-noti a.fav span,
.alert span {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: bold;
    background: #dc5953;
    padding: 4px;
    border-radius: 40px;
    color: #fff;
    position: absolute;
    line-height: 10px;
    top: -6px;
    right: 0px;
    z-index: 100;
}
.u-noti a.signout {
    font-weight: bold;
    background: #0083ca;
    padding: 0 10px;
    color: #fff;
    margin-left: 10px;
}

.user-w {

    display: inline-block;
    float: left;
}

a.fav.alert,
.alert {
    color: #dc5953;
    /*position: relative;*/
}
.tabs {
    width: 100%;
    display: inline-block;
    background: #f4f4f4;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}
.tabs div {
    width: auto;
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}
.tabs a {
    border-right: 1px solid rgba(230, 230, 230, 0.8);
}
.tabs a:hover {
    color: #333;
}
.tabs a,
.tabs p {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    display: inline-block;
    color: #666;
    line-height: 1.3em;
}
.tabs .active {
    background: #0076bc;
    color: #fff;
}
.tabs .active a {
    color: #fff;
    border-right: 1px solid #0076bc;
}
.alert span {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block!important;
}
.dash-cont {
    width: 100%;
}
.dash-cont h1 {
    padding: 0 2% 20px 2%;
    font-size: 24px;
    color: #0076bc;
    line-height: 1.3em;

}
.dash-cont h2 {
    font-size: 24px;
    color: #0076bc;
    line-height: 1.3em;
    padding: 20px 0 0px 0;
}
.dash-cont h3 {
    font-size: 16px;
    color: #333;
    margin: 10px 0 20px 0;
    line-height: 1.3em;
}
.dash-cont h4 {
    font-size: 16px;
    color: #333;
    margin: 0 0 10px 0;
    display: inline-block;
}
.overview {
    width: 100%;
    padding-top: 2%;
}
.overview section .col2 {
    margin: 0 0 20px 2%;
}
.overview section .watchlist {
    width: 31.33%;
}
.overview section .mycar-ov {
    width: 62.66%;
}
.dash-cont ul,
.dash-cont ul li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.dash-cont ul {
    margin: 0 0 10px 0;
}
.dash-cont ul li {
    padding: 5px 0;
}
.overview ul li table {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
}
.dash-cont .mycar-ov table {
    width: 100%;
}
.dash-cont .t-data {
    text-align: right;
}
.mycar-ov .btn-edit {

    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}
.mycar-ov h4 {
    font-size: 40px;
    color: #efefef;
    line-height: 1em;
    margin-bottom: 50px;
}
.stat-ok {
    color: #4bc0af;
}
.dash-cont p.price {
    font-size: 20px;
}
.dash-cont .ov-price label {
    font-size: 10px;
}
.recent-ls {
    width: 100%;
    float: left;
    padding: 2% 2% 2% 0%;
}
.recent-ls ul li {
    display: block;
    margin: 0 0 5px 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.recent-ls ul li:hover {
    background: rgba(230,230,230,0.3);
    padding: 5px 10px ;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}
.recent-ls p.date {
    font-size: 10px;
    color: #888;
    line-height: 1.3em;
}
.recent-ls p {
    font-size: 12px;
    line-height: 1.3em;
    margin: 3px 0;
}
.recent-ls ul li a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.recent-ls ul li a:hover p strong {
    color: #0076bc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.noti-on {
    width: 6px;
    height: 6px;
    background: #dc5953;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin: 0 5px 1px 0;
}
div.wl_ico {
    width: 20px;
    display: inline-block;
    margin: 0 0 10px 0;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 100;
}
div.wl_ico a {
    margin: 0 10px 0 0;
    color: #fff;
}

div.ls-car div.wl_ico a {
    color: #fff;
    font-size: 20px;
}
a.watched {
    color: #dc5953!important;
}
.sold .wl-img {
    opacity: 0.3;
}
.sold p.soldsticker {
    margin: 10px 0;
    background: #dc5953;
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    position: absolute;
    left: 0px;
    top: 30%;
    opacity: 1;
    z-index: 100;
}

div.col2.carcard {
    position: relative;
    width: 48%;
    margin: 0px 2% 2% 0;
    padding: 0px;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid rgba(230,230,230,0.5);
    box-shadow: 0px 27px 70px 0px rgba(0, 0, 0, 0);
    cursor: pointer;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

div.col2.carcard:hover {
    box-shadow: 0px 27px 70px 0px rgba(0, 0, 0, 0.09);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

div.col2.carcard:hover a.btn-edit {

    color: #006bb4;
    border: 1px solid rgba(0, 107, 180, 0.5);
}

div.carcard-con {
    padding: 10px;
}
div.col2.carcard img {
    display: block;
    width: 100%;

}

.d-trybuy {
}

.null-msg {
    padding: 50px 20% 0% 0%;
    font-size: 40px!important;
    color: #efefef!important;
    line-height: 1em!important;
}

/*********************************************************************** */
/* Dashboard - Responsive
/*********************************************************************** */

@media only screen and (max-width: 1169px) {
    .tabs div a,
    .tabs div p {
        padding: 20px 30px;
    }
}
@media only screen and (max-width: 920px) {
    .tabs div a,
    .tabs div p {
        padding: 20px 10px;
    }
    .overview section .col2 {
        width: 96%;
        padding: 0;
    }
    .overview section .mycar-ov {
        margin-bottom: 50px;
    }
    .watchlist ul {
        width: 100%;
    }
}
@media only screen and (max-width: 820px) {
    .tabs div a,
    .tabs div p {
        padding: 20px 15px;
    }
    .overview,
    .recent {
        width: 100%;
        float: none;
        border: none;
    }
    .dash-cont {
        padding: 3%;
    }

}
@media only screen and (max-width: 700px) {
    section.col {
        flex-direction: column;
    }
    section.col .op {
        width: 96%;
        margin: 2%;
    }
    .ops-desc {
        padding: 10% 4%;
    }
    .tabs div span {
        display: none;
    }
    .tabs div a,
    .tabs div p {
        padding: 20px 15px;
    }
}
@media only screen and (max-width: 500px) {
    .tabs div.b-s-total span {
        display: none;
    }
    section.col.col4 {
        flex-direction: column;
    }
    section.col.col4 .op {
        width: 96%;
        margin: 2%;
    }
    .tabs div a,
    .tabs div p {
        padding: 18px 11px;
    }

    .tabs a, .tabs p {
        font-size: 11px;
    }

    div.col2.carcard {
        width: 100%;
        margin: 2% 0%;
    }

    div.main-nav.logged div.u-noti {
        background: none;
    }

    div.main-nav.logged div.u-noti a {
        color: #fff;
    }

    .user-w {
        display: none;
    }

    div.u-noti .signout {
        display: none;
    }
    


    @media only screen and (max-width: 360px) {

        .tabs div a,
        .tabs div p {
            padding: 18px 11px;
        }

        .tabs a, .tabs p {
            font-size: 10px;
        }
    }
}


@media only screen and (max-width: 500px){
	body#dashboard header {
	}
}
@media only screen and (max-width: 428px){
	body#dashboard .header-mid {
		padding-bottom: 0px;
	}
}

div.main-nav a.btn-dashboard {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #666;
    background: #fff;
    padding: 0 15px 0 15px;
    margin-right: -3px;
    border-radius: 2px 0 0px 2px;
}
	div.main-nav a.btn-dashboard span.ficon {
		font-size: 22px;
		font-weight: normal;
		vertical-align: bottom;
		line-height: 31px;
		padding: 0 10px 0 0px;
	}
div.main-nav a.btn-signout {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    background: #475568;
    padding: 0 15px 0 15px;
    margin-left: 0px;
    border-radius: 0px 2px 2px 0px;
}

@media only screen and (max-width: 380px){
	div.main-nav a.btn-dashboard, div.main-nav a.btn-signout {
		display: none;
	}
}

.dash-welcome-text {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding-top: 80px;
	padding-bottom: 80px;
}
	.dash-welcome-text h2 {
		font-size: 30px;
		color: #fff;
	}
	.dash-welcome-text h3 {
		color: #fff;
		font-size: 16px;
		font-weight: 400;
	}
	.dash-welcome-text span {
		padding: 0px 20px;
	}
	
	
    @media only screen and (max-width: 500px) {
	    
		.dash-welcome-text h2 {
			font-size: 20px;}
		.dash-welcome-text h3 {
			font-size: 13px;
			font-family: 'roboto', sans-serif;
		}
    }	
    

section#dashmenu {
	background: #328cc8;
	padding: 10px 20px;
}
	section#dashmenu ul {
		margin: 0px;
		padding: 0px;
		display: inline-block;
	}
	section#dashmenu ul li {
		list-style: none;
		float: left;
		margin-right: 30px;
	}
	section#dashmenu ul li a {
    	font-family: 'Poppins', sans-serif;
    	font-size: 12px;
    	font-weight: 600;
    	color: #fff;
    	padding: 0 10px 12px 10px;
    	opacity: 0.6;
    	line-height: 1.2em;
	}
	
	section#dashmenu ul li a:hover {
    	color: #fff;
    	padding: 0 10px 12px 10px;
    	opacity: 1;
	}
	
	section#dashmenu ul li a .dm-ico {
		width: 100%;
		max-width: 22px;
		vertical-align: bottom;
		margin-right: 10px;
		}
	
	/** ACTIVE MENU STYLE **/
	body#dashboard.d-overview section#dashmenu ul li a.dm-overview,
	body#dashboard.d-fuelcardpg section#dashmenu ul li a.dm-fuelcard,
	body#dashboard.d-settings section#dashmenu ul li a.dm-settings,
	body#dashboard.d-mycar section#dashmenu ul li a.dm-mycar,
	body#dashboard.d-watchlist section#dashmenu ul li a.dm-watchlist   {
		color: #fff;
		border-bottom: 5px solid #47bd94;
		opacity: 1;
	}
	
	/**/
	
	@media only screen and (max-width: 960px){
		section#dashmenu ul li a span {
			font-size: 12px;
			display: inline-block;
		}
		section#dashmenu ul li {
			margin-right: 15px;
			text-align: center;
		}
		
		
	}
	
	@media only screen and (max-width: 960px){
		section#dashmenu {
			padding: 10px 10px 0 10px;
		}
		section#dashmenu ul li a .dm-ico {
			margin:0 10px 0 0;
		}
		section#dashmenu ul li a {
			display: block;
			padding: 0 5px 12px 5px;
		}
		section#dashmenu ul li {
			width: 20%;
			margin-right: 0px;
			text-align: center;
		}
		section#dashmenu ul li a span {
			font-size: 10px;
			display: inline-block;
			line-height: 2em;
		}
		
		section#dashmenu ul {
			display: inline-flex;
			width: 100%;
			}
	}
	
	@media only screen and (max-width: 500px){
		section#dashmenu ul li a .dm-ico {
			margin: 0 auto;
		}
		section#dashmenu ul li a:hover {
    	color: #fff;
		padding: 0 5px 12px 5px;
    	opacity: 1;
		}
		section#dashmenu ul li a span {
			line-height: 1.2em;
		}
		section#dashmenu ul li a {
		}
		section#dashmenu ul li a object {
			display: none;
		}
		
	}


section#dashcontent {
	background: #f8f8f8;
	padding: 2%;
}

	}
	.btn-findoutmore {
		text-decoration: underline!important;
		font-size: 11px;
		color: #999;
	}
	

@media only screen and (max-width: 1170px){
	section#dashcontent {
		padding: 4%;
	}
}
	.board {
		background: #fff;
		box-shadow: 0px 17px 30px rgba(0, 0, 0, 0.05);
		-webkit-box-shadow: 0px 17px 30px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10px;
		padding: 20px;
		float: left;
	}
		.wrapper > div:first-child {
			margin-left: 0;
		}
	
	.board100 {
		width: 100%;
	}
	.board80 {
		width: 82%;
	}
	.board70 {
		width: 68%;
		margin-right: 2%;
	}
	.board50 {
		width: 48%;
		margin-left: 2%;
	}
	.board40 {
		width: 38%;
		margin-left: 2%;
	}
	.board30 {
		width: 28%;
		margin-left: 2%;
	}
	.board20 {
		width: 18%;
		margin-left: 2%;
	}
	
	@media only screen and (max-width: 768px){
		.board80 {
			width: 100%;
		}
		.board70 {
			width: 58%;
			margin: 0px 2% 4% 0;
		}
		.board40 {
			width: 48%;
			margin: 0px 1% 4% 1%;
		}
		.board30 {
			width: 38%;
			margin: 0px 0 4% 2%;
		}
	}
	
	@media only screen and (max-width: 680px){
		.board70 {
			width: 100%;
			margin: 0px 0 4% 0;
		}
		
		.board40 {
			width: 100%;
			margin: 0px 0% 4% 0%;
		}
		
		.board30 {
			width: 100%;
			margin: 0px 0 4% 0;
		}
	}
	
	div.vehicledetail {
		position: relative;
		width: 100%;
		max-width: 320px;
		margin: 30px auto 50px auto;
	}
		div.vehicledetail.nocar {
			padding: 100px 0;	
		}
	
	.vehicles {
		position: relative;
		z-index: 100;
	}
		.vehicles img {
			max-width: 300px;
		}
	.vehiclelocation {
		text-align: center;
	}
	.connectivity {
		position: absolute;
		top: 100px;
		z-index: 50;
		left: 45%;
		top: -30px;
	}
	.button {
		font-size: 11px;
		font-weight: 400;
		padding: 8px 15px;
		background: #f4f4f4;
		border-radius: 2px;
		display: inline-block;
		text-align: center;
		cursor: pointer;
	}
	.button:hover {
		color: #fff;
		background: #0076bc;
	}
		.button-blue {
			font-size: 13px;
			background: #0076bc;
			color: #fff;
		}
		.button-blue:hover {

		}
	
	.vehiclename {
		text-align: center;
	}
	.vehiclename p {
   		font-family: 'Poppins', sans-serif;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-top: -20px;
	}
	.vehiclelocation p {
		font-size: 12px; 
		text-align: center;
	}
	.vehiclelocation p span.ficon {
		color: #df584f;
	}
	
	.tripsoverview {
		text-align: center;
	}
	
		.tripsoverview h3 {
			font-size: 14px;
			color: #0076bc;
			margin: 30px auto 20px auto;
		}
		
		.lasttrip {
			width: 90%;
			margin: 0px auto 30px auto;
			display: inline-block;
			font-size: 10px;
			color: #999;
   			-webkit-transition: all 0.5s ease;
   			-moz-transition: all 0.5s ease;
   			-ms-transition: all 0.5s ease;
   			-o-transition: all 0.5s ease;
   			transition: all 0.5s ease;
   			display: flex;
   			line-height: 1.2em;
		}
			.lasttrip span {
				font-family: 'Poppins', sans-serif;
				font-size: 26px;	
				font-weight: 500;
				color: #0076bc;
				line-height: 1.5em;
			}
			.lasttrip sup {
				font-size: 9px;
			}
		.lasttrip:hover {
			color: #666;
			width: 96%;
   			-webkit-transition: all 0.5s ease;
   			-moz-transition: all 0.5s ease;
   			-ms-transition: all 0.5s ease;
   			-o-transition: all 0.5s ease;
   			transition: all 0.5s ease;

		}
			
		.lasttrip > div {
			width: 32.33%;
			float: left;
			display: inline-block;
			border: 1px solid rgba(0,0,0,0.05);
			padding: 2%;
		}
			.lasttrip div:first-child {
				border-left: 0px;
				border-right: 0px;
			}
			.lasttrip div:last-child {
				border-left: 0px;
				border-right: 0px;
			}
	
			
		@media only screen and (max-width: 1000px){
			.lasttrip {
				width: 90%;
			}
			.lasttrip:hover {
				width: 100%;
			}
		}
		@media only screen and (max-width: 320px){
			.lasttrip {
				width: 100%;
				padding: 0px;
			}
			.lasttrip div {
				width: 96%;
				padding: 2%;
				float: none;
			}
			.lasttrip span {
				font-size: 18px;
			}
		}
	
	
	.fuelcardboard {
		padding: 0px;
	}
	
	.fuelcard {
		text-align: center;
		overflow: hidden;
		position: relative;
		padding: 20px;
	}
		.fuelcard p {
			font-size: 11px;
			color: #666;
			padding: 0px;
			margin: 0px;
		}
		.fuelcard h3 {
			font-size: 40px;
			color: #0076bc;
			padding: 0px;
			margin: 0px;
			margin-left: -10px;
		}
		.fuelcard h3 sup {
			font-weight: 100;
			line-height: 2em;
			font-size: 24px;
		}
		.fuelico {
			width: 100px;
			opacity: 0.1;
			position: absolute;
			left: -20px;
			top: 20px;
		}
	.fuelcard .button {
		margin: 5px;
	}
	p.cardstatus {
		padding-bottom: 10px;
	}
	.fuellasttransaction {
		text-align: center;
		background: #f9f9f9;
		padding: 20px;
	}
		.fuellasttransaction p {
			font-size: 11px;
			padding: 0px;
			margin: 0px;
		}
		p.timedate {
			font-size: 10px;
			color: #999;
			padding: 10px 0 5px 0;
			margin: 0 0 5px 0;
			border-bottom: 1px solid rgba(0,0,0,0.05);
			display: inline-block;
		}
		span.lt-datestamp {
			padding: 0 15px 0 0;
		}
		p.ts-ls {
			width: 100%;
			max-width: 220px;
			margin: 5px auto;
			vertical-align: top;
		}
		span.ts-sum {
			width: 70%;
			font-size: 13px;
			padding: 0 10px 0 0px;
			display: inline-block;
			text-align: left;
			vertical-align: top;
		}
			body.st-history span.ts-sum {
				width: 60%;
			}
		span.ts-num {
			width: 30%;
			font-size: 12px;
			padding: 0 0px 0 10px;
			display: inline-block;
			text-align: right;
			vertical-align: top;
		}
			body.st-history span.ts-num {
			}
		
		a.pdfdl {
			width: 5%;
			font-size: 11px;
			padding: 0 0px 0 10px;
			display: inline-block;
			text-align: right;
			vertical-align: top;
			text-decoration: underline!important;
		}
	

/************************************************************************************************** */
/*  FUEL CARD PAGE
/************************************************************************************************** */

	div.dashsubmenu {
		background: none;
		box-shadow: none;
		padding: 0px;
	}
		.dashsubmenu ul {
			display: block;
			padding: 0px;
			margin: 0px;
		}
		.dashsubmenu ul li {
			list-style: none;
			padding: 0px;
			margin: 0px;
		}
		.dashsubmenu ul li a {
			font-family: 'Poppins', sans-serif;
			font-size: 12px;
			font-weight: 600;
			color: #333;
			margin: 0 0 25px 0;
			display: block;
		}
		
		h3.dashtitle {
			padding: 0 0 20px 0;
		}
		
		div.fueltransactionlist {
			padding-bottom: 30px;
		}
	
		div.fueltransactionlist p.ts-ls {
			width: 100%;
			max-width: none;
		}
		div.fueltransactionlist p.timedate {
			width: 100%;
		}
		div.fueltransactionlist .transactions {
			margin-bottom: 10px;
		}
		div.fueltransactionlist .transactions .ts-ls {
			margin: 0px;
		}
		p.ts-ls-dt {
			font-size: 10px;
			color: #999;
			padding: 0px;
			margin: -5px 0 0px 0px;
		}
		
		span.numplus {
			font-size: 13px;
			color: #4bc0af;
		}
		span.numminus {
			font-size: 13px;
			color: #df584f;
		}
		
	@media only screen and (max-width: 960px){
		body.sec3 .dashsubmenu {
			width: 100%;
		}
			body.sec3 .dashsubmenu ul li {
				float: left;
				margin-right: 15px;
				margin-left: 15px;
			}
		body.sec3 .board50 {
			width: 58%;
			margin-left: 0px;
			margin-right: 2%;
		}
		
		body.sec3 .board30 {
			width: 38%;
		}
		div.dashsubmenu {
			text-align: center;
		}
		div.dashsubmenu ul {
			display: inline-flex;
		}
		
	}
	@media only screen and (max-width: 680px){
		body.sec3 .board50 {
			width: 100%;
			margin: 0px 0 4% 0;
		}
	}
	@media only screen and (max-width: 500px){
		body.fuelcardov div.dashsubmenu ul li a {
			margin-top: 10px;
		}
	}
	
	.button.active {
		background: #0076bc;
		color: #fff;
	}
	
	/** Submenu Style **/
	body.fuelcardov div.dashsubmenu ul li a.sub-fuelov {
		color: #0076bc;
	}
	body.fuelcardth div.dashsubmenu ul li a.sub-fuelth {
		color: #0076bc;
	}
	body.fuelcardtu div.dashsubmenu ul li a.sub-fueltp {
		color: #0076bc;
	}
	body.st-profile div.dashsubmenu ul li a.sub-profile {
		color: #0076bc;
	}
	body.st-billing div.dashsubmenu ul li a.sub-billing {
		color: #0076bc;
	}
	body.st-history div.dashsubmenu ul li a.sub-invoicehistory {
		color: #0076bc;
	}
	body.d-mycarov div.dashsubmenu ul li a.sub-mycarov {
		color: #0076bc;
	}
	body.d-mycardetails div.dashsubmenu ul li a.sub-mycardetails {
		color: #0076bc;
	}
	body.d-mycartrips div.dashsubmenu ul li a.sub-mycartrips {
		color: #0076bc;
	}
	
	
	ul.transactionfilter {
		display: inline-block;
		margin: 0px;
		padding: 0px;
	}
	ul.transactionfilter li {
		list-style: none;
		padding: 0px;
		margin: 0px 10px 0 0;
		float: left;
		display: inline-block;
	}
	
	div.ui.form.daterange .fields {
		margin: 10px 0px 20px 0;
	}
	
	.daterange {
		display: none;
	}
	
	.ui.form.daterange .field>label {
		font-size: 12px;
		font-weight: 400;
		
	}
	
	.ui.form .field>label {
		font-size: 12px;
		color: #999;
	}
	
	
/** Card Top up **/
	body.fuelcardtu .board50 {
		padding: 0px;
	}
		div.cardtopup {
			padding: 20px;
			background: #475568;
			color: #fff;
		}
			div.cardtopup h3 {
				color: #fff;
			}
			div.cardtopup .ui.form .field>label {
				color: #fff;
				font-size: 13px;
			}
			div.cardtopup .ui.checkbox input.hidden+label {
				color: #fff;
			}
			
			.topupform.ui.form .inline.fields {
				margin-bottom: 20px;
			}
			
			.topupform .ui.radio.checkbox input:checked~.box:after, .ui.radio.checkbox input:checked~label:after, .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after, .ui.radio.checkbox input:focus:checked~.box:after, .ui.radio.checkbox input:focus:checked~label:active {background-color: #0076bc;}
			
		div.cardtopup-dt {
			padding: 20px;
		}
		.cardtopup-dt h4 {
			margin:0px 0 10px 0;
			color: #0076bc;
		}
	.ui.form.topupform .field>label {
		font-weight: normal;
		margin-bottom: 10px;
	}
	.ui.form.topupform .field>.selection.dropdown>.dropdown.icon {
		
	}
	.autotopupwhen {
		width: 100%;
		clear: both;
	}
	ui.button a {
		display: block;
	}
	.ui.checkbox input.hidden+label {
		font-size: 13px;
	}
	.ui.segment {
		padding: 1.5em;
	}
	
	h4.comingsoon {
		text-align: center;
		margin: 0 auto;
		padding: 100px 20%;
		font-size: 14px;
		color: #666;
		
	}

/** Card Top up Summary **/

h7 {
	color: #999;
}
	table.paymentsum {
		width: 100%;
	}
		table.paymentsum tr {
			width: 100%;
			margin: 0 0 20px 0;
			display: inline-table;
		}
		table.paymentsum tr td {
			width: 50%;
			display: inline-block;
		}
		table.paymentsum tr.topuptotal {
			border-top: 1px solid rgba(0,118,188,0.1);	
		}
			table.paymentsum tr.topuptotal td {
				padding-top: 20px;
			}
			
			td.totalcost {
				text-align: right;
				font-weight: 600;
			}
			
		table.paymentsum tr.topuptotal.grandtotal {
			border-bottom: 1px solid rgba(0,118,188,0.1);	
		}
			table.paymentsum tr.topuptotal.grandtotal td {
				padding-bottom: 20px;
			}
	
	
	
/************************************************************************************************** */
/*  Existing Member Dash
/************************************************************************************************** */

.cbc-ads p, .cbc-ads ul {
	font-size: 13px;
	line-height: 1.5em;
}
.ls-arrow {
	list-style: none;
	padding: 0px;
	margin: 0px 0 0 25px;
}

.ls-arrow li {
	line-height: 1.2em;
	margin-bottom: 10px;
}
.ls-arrow li:before {
	content:"m";
	font-family: "dripicons-v2"; 
	margin-left: -25px;
	padding-right: 10px;
	vertical-align: text-top;
	color: #0076bf;
}

span.cbcprice {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1em;
	color: #0076bf;
	}

span.cbcprice sup {
	font-size: 14px;
	}


/************************************************************************************************** */
/*  Fuel Card Activation
/************************************************************************************************** */


div.fc-activation01 {
	padding: 100px 10%;
	text-align: center;
}



/************************************************************************************************** */
/*  NO CAR / EXISTING CUSTOMER
/************************************************************************************************** */

div.ontrybuy {
	padding-top: 50px;
	text-align: center;
	border-top: 1px dotted #efefef;
}


	h3 span.noteexpired {
		margin: 10px 0 0 10px;
		padding: 5px 10px;
		font-size: 11px;
		background: #999;
		color: #fff;
		display: inline-block;
	}

/************************************************************************************************** */
/*  Settings Billings
/************************************************************************************************** */

div.board30.passwordreset {
	box-shadow: none;
	background: #efefef;
	border: 1px solid rgba(0,0,0,0.02);
}
.sections {
	border-bottom: 1px dotted #efefef;
	padding: 20px 0 20px 0;
}

.sections.first {
	padding-top: 0px;
}
.sections:last-child {
	border: none;
	padding-bottom: 0px;
}
	.sec-subs:last-child {
		padding-bottom: 20px;
	}
.small {
	font-size: 12px;
	color: #999;
	line-height: 1em;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
}
.subs-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
	margin: 0px;
	font-size: 18px;
	color: #0076bf;
	line-height: 1.5em;
}
.subs-price {
	font-size: 14px;
}
.subs-price sup {
	color: #999;
	vertical-align: sub;
}

div.board.subs {
	padding: 0px;
}
div.sec-subs {
	width: 100%;
	padding: 20px; 	
	display: inline-block;
	border-bottom: 1px dotted #efefef;
}

p.status {
	padding: 0px;
	margin: 0px;
	line-height: 1.2em;
	background: #efefef;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11px;
}

p.active {
	background: #4bc0af;
	color: #fff;
}

/************************************************************************************************** */
/*  My Car
/************************************************************************************************** */

.subscription-tag {
	background: #efefef;
	color: #666;
	display: inline-block;
	margin-left: -21px;
	padding: 5px 10px;
	border-radius: 0 3px 3px 0;
	font-size: 12px;
}

p.sub-prod {
	line-height: 1.5em;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
	font-size: 11px;
	color: #999;
}

div.telematics-dt {
	text-align: center;
	border-top: 1px dotted #efefef;
}

div.telematics-dt h5 {
	font-size: 12px;
	color: #999;
	padding: 40px 0;
}

div.trip {
	width: 100%;
	padding: 10px 0;
	margin: 10px 0;
	border-bottom: 1px solid #efefef;
	border-top: 1px solid #efefef;
}

	p.t-date {
		font-size: 11px;
		color: #999;
		display: block;
		margin: 0px 0 10px 0;
		
	}
	div.trip p.t-distance {
		font-size: 15px;
		line-height: 1.2em;
		padding-right: 5%;
		float: left;
	}
	div.trip p.t-fuel {
		line-height: 1.2em;
		padding-right: 5%;
		float: left;
	}
	div.trip p.t-duration {
		line-height: 1.2em;
		padding-right: 5%;
		float: left;
	}
	
	.porb {
		float: right;
	}


/************************************************************************************************** */
/*  Watchlist
/************************************************************************************************** */

body.d-watchlist div.board {
	padding: 0px;
}

body.d-watchlist .ui.primary.button, body.d-watchlist .ui.primary.buttons .button {
	background-color:#dc5953;
}

body.d-watchlist div.vehicledetail {
	max-width: none;
	margin-top: 0px;
}

body.d-watchlist div.vehicledetail p {
	margin-top: 10px;
}

body.d-watchlist div.board100 {
	box-shadow: none;
	padding: 0px;
	background: none;
	display: flex;
	flex-wrap: wrap;
}

body.d-watchlist div.board30 {
	border-radius: 5px;
	overflow: hidden;
}


body.d-watchlist div.board30 .fuellasttransaction {
	min-height: 120px;
}

	@media only screen and (max-width: 960px){
		body.d-watchlist div.board100 {
			width: 100%;
		}
	}

body.d-watchlist div.board30 {
	width: 31.33%;
	margin-bottom: 2%;
}
	@media only screen and (max-width: 960px){
		body.d-watchlist div.board30 {
			width: 46%;
			margin: 2%;
		}
	}
	@media only screen and (max-width: 700px){
		body.d-watchlist div.board30 {
			width: 100%;
			margin: 0 0 4% 0;
		}
	}

.vehicle-ov-desc p {
    font-family: 'roboto', sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #666;
    padding: 0 0 20px 0;
}

.vehicle-ov-desc p span {
	padding: 0 10px;
}