/* =====================================
STANDARD
======================================== */
body { font-family:'ModernH', sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; color:#414042; background:#F1F2F2;}
.mainmenu-open .page-wrap { position:fixed; top:0; right:0; bottom:0; left:0; overflow:hidden; }
a:hover, a:focus { text-decoration:none; }
th img, td img { max-width:initial; }
img { max-width:100%; }
hr { border-top-color:#e5e5e5; clear:both; }

.container { padding-left:6px; padding-right:6px; }
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-left:3px; padding-right:3px; }
.row { margin-left:-3px; margin-right:-3px; }

* {outline:0 !important;}

#old-container {position:relative; width:980px; margin:0 auto;}
#old-container .container {width:980px;}

.modal-open {padding-right:16px;}

#main-container {position:relative; z-index:1;}
.mainmenu-open #main-container{ display:none; }

.login-video-wrap video{background:url(/Interfaces/Login/ASCXLoginUC/HDI/uploads/homepage-video/ACE_Nav_Portrait_640px.jpg) center center; background-size:cover;}

@media (max-width:767px) {
	.login-video-wrap {background:url(/Interfaces/Login/ASCXLoginUC/HDI/uploads/homepage-video/ACE_Nav_Portrait_2048px.jpg) center center; background-size:cover;}
}

@media (max-width:597px) {
	.login-video-wrap {min-height:380px;}
	video {display:none;}
}


#tooltip {position:absolute; padding:10px; width:230px; font-size:13px; background:#333; border:1px solid #333; border-radius:5px; color:#fff; display:none; padding:10px; z-index:2000; line-height:15px; box-shadow:2px 2px 2px rgba(80,80,80,0.6);}

/* =====================================
TEXTS
======================================== */
h1, .h1 { margin:0 0 0.5em 0; line-height:1em; }
h2, .h2 { margin:0 0 0.5em 0; line-height:1em; }
h3, .h3 { margin:0 0 0.7em 0; line-height:1em; }
h4, .h4 { margin:0 0 1em 0; line-height:1em; }
h5, .h5 { margin:0 0 1em 0; line-height:1em; }
h6, .h6 { margin:0 0 1em 0; line-height:1em; }
p { margin:0; }

/* nav */
nav ul { margin:0; padding:0; list-style:none; }
nav ul li { margin:0; padding:0; }

/* =====================================
PAGE TITLE
======================================== */
.page-title {padding:13px 0 13px 10px; background:#414042;}
.page-title h1 { margin:0; font-size:1.3em; text-transform:uppercase; color:#FFF; }
.page-title.mobile h1 { margin:0; text-align:left; font-size:1.1em; line-height:2.2em;}

.title-last-import {color:#FFF; font-size:0.8em; line-height:40px; text-align:right; margin-right:10px;}
.title-row-print {display:block; font-size:1em; font-weight:bold; color:#A1A3A5; text-align:center; line-height:40px; background:#2B2A2D;}
.title-row-print:hover {}

.logged-out .page-title {background:rgba(65,64,66,0.7);}

@media (min-width:767px) {
.mainmenu-open .page-title h1 { color:#FFF; }
.page-title.mobile h1 { display:none; }
}


#dealer-select-form-dealer {padding:2px 10px;}


.title-row {margin-bottom:6px; background:#58595B;}
.title-row i, .title-row h2 {display:inline-block; vertical-align:top;}
.title-row i {display:none; font-size:1.6em; width:40px; height:40px; line-height:40px; color:#A6A9AC; padding:0; margin-top:1px; margin-bottom:-1px; text-align:center; background:#7A7A7C;}
.title-row h2 {color:#FFF; font-size:1em; font-weight:bold; line-height:40px; margin:0 0 0 10px;}


@media (min-width:767px) {
	.title-row i{ display:inline-block; } 	
	.title-row h2{ font-size:1.2em;  }
	.title-row {margin-bottom:20px;}
}

.title-row-links {margin-right:0;}
.title-row-link, .title-row-link span {display:none; background:#58595B; height:40px; padding:3px 0 0 6px;}
.title-row-link a, .title-row-link span {font-size:10px; line-height:11px; color:#FFF; padding:11px 0 0 5px; height:34px; border-left:1px solid #FFF; display:block; vertical-align:top; text-transform:uppercase;}
.title-row-link a:hover {color: rgba(255, 255, 255, 0.7)};
.title-row-link span {color:#999;}

.title-row-link span {padding-right:3px;}

.title-row-link a.oneline, .title-row-link span.oneline {padding-top:22px;}
.title-row-link a.twoline, .title-row-link span.twoline {}
.title-row-link a.threeline, .title-row-link span.threeline {padding-top:0;}

/* =====================================
USERCONTENT
======================================== */
.usercontent p { margin:0 0 1em 0; line-height:1.7em; }
.usercontent a:hover,
.usercontent a:focus { text-decoration:underline; }

.usercontent ul, .usercontent ol { margin:0; padding:0; list-style-type:none; line-height:1.5em; font-size:1.067em; }

.usercontent ul li { position:relative; margin-bottom:10px; padding-left:35px; }
.usercontent ul li:before { content:'\3e'; position:absolute; top:2px; left:-5px; font:20px icomoon; color:#ED174F; }

.usercontent ol li { margin-bottom:10px; }
.usercontent ol li { counter-increment:step-counter; }
.usercontent ol li:before { content:counter(step-counter); margin-right:25px; color:#ED174F; font-weight:800; }

.usercontent pre { border:0 solid #ED174F; margin-bottom:30px; border-left-width:3px; border-radius:0; padding-left:40px; background:none; word-break:normal; white-space:normal; line-height:1.5em; font:1.6em; color:#999; }

/* usercontent wraps */
.iframe-wrap { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.iframe-wrap iframe,
.iframe-wrap object,
.iframe-wrap embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.table-wrap { overflow-x:auto; }

/* websymbols */
i { position:relative; top:-1px; display:inline-block; text-transform:none; line-height:0; vertical-align:middle; font:normal normal 16px icomoon; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; speak:none; }
i.green { color:green; }
i.red { color:red; }
i.dark-red { color:#991B1E; }

.no-padding {padding:0;}
.no-padding-left {padding-left:0;}
.no-padding-right {padding-right:0;}


/* =====================================
FORMS
======================================== */
form { margin:0; }
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select { margin:0; border:1px solid #ccc; padding:5px; width:100%; height:auto; background:#f5f5f5; font-size:1em; font-weight:normal; color:#666; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
input[type="radio"],
input[type="checkbox"] { margin:0; }
input[type="file"] { padding:10px; border:1px dashed #bbb; }
input[type="number"] { width:auto; }

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color:#999; }
input:-moz-placeholder,
textarea:-moz-placeholder { color:#999; }
input::-moz-placeholder,
textarea::-moz-placeholder { color:#999; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color:#999; }

.field_wrap { margin:0 0 10px 0; }
.input_wrap.dateselect select { width:32%; }
.input_wrap.checkboxes > label { display:block; }
.input_wrap.radiobuttons > label { display:block; }
.submit_wrap { margin:20px 0 0 0; }

fieldset { padding:10px; border:1px solid #ddd; }
fieldset legend { display:inline-block; margin:0 0 -5px 0; border:none; padding:0 5px; width:auto; font-size:1em; font-weight:normal; }
fieldset .field_wrap { margin:0; }

.repeater_wrap { margin:0 0 20px 0; }
.repeater_item { margin:0 -10px 5px -10px; padding:0 10px 20px 10px; border-bottom:1px solid #ddd; }
.repeater_item .field_wrap { margin:5px 0 0 0; overflow:hidden; }
.repeater_item .label_wrap { float:left; width:30%; }
.repeater_item .input_wrap { float:left; width:70%; }
.repeater_controls { margin:0 0 -5px 0; }

label.error { color:red; }
input.error { border:1px solid red; background:url('../images/ico-error.png') no-repeat 98% center #ffefef; }
input[type="number"].error { background-position:88% center; }
textarea.error { border:1px solid red; background:url('../images/ico-error.png') no-repeat 98% 20px #ffefef; }
select.error { border:1px solid red; background:#ffefef; }
.error_feedback { margin:1em 0; background:#FFEfEf; padding:15px; border:1px solid #EED3D7; }
.error_feedback ul { margin:0; padding:0; list-style:none; }
.error_feedback ul li { margin:0; padding:0 0 0 25px; color:red; background:url('../images/ico-error.png') no-repeat 0 4px; }



/* =====================================
COLOURS
======================================== */
.text-white { color:#FFF !important; }
.text-grey { color:#BCBEC0 !important; }
.text-darkgrey { color:#888 !important; }
.text-gold {color:#FBB040;}

/* =====================================
HELPERS
======================================== */
.spaced { margin-bottom:6px !important; }
.confined { overflow:hidden !important; }
.padded { padding:20px !important; }
.nopadding { padding:0 !important; }
.shaded { background-color:#f5f5f5 !important; }
.clear { clear:both !important; float:none !important; }
.alignright { float:right !important; }
.alignleft { float:left !important; }
.aligncenter { text-align:center !important; }
.underlined { text-decoration:none !important; padding-bottom:0.3em !important; border-bottom:1px dotted #0088CC !important; }
.underlined:hover, .underlined:focus { border-bottom:1px solid #005580 !important; }
.nofloat { float:none !important; margin-left:0 !important; }
.inline { display:inline !important; }
.rowrelative { position:relative; }

/* no gutter */
.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }
.no-gutter { padding:0 15px; }

/* grid fifths */
.col-sm-fifth { float:left; width:50%; padding-left:15px; padding-right:15px; }

@media (min-width:767px) {
.col-sm-fifth { width:20%; }
}

/* row horizontal */
.row-horizontal { white-space:nowrap; }
.row-horizontal div[class^="col-"] { float:none; display:inline-block; vertical-align:middle; white-space:normal; }
.row-horizontal div[class^="col-"] + div[class^="col-"] { margin-left:-3px; }

/* =====================================
BUTTONS
======================================== */
.button,
.submit_wrap button { display:inline-block; border:none; border-radius:4px; padding:0 16px; text-align:center; text-decoration:none !important; line-height:46px; font-size:1em; white-space:nowrap; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; }
.button i { font-size:20px; }
.button i.iconleft, .button.iconleft i { display:inline-block; margin:0 0px 0 -5px; }
.button i.iconright, .button.iconright i { display:inline-block; margin:0 -5px 0 0px; }
.button.joinleft { margin-left:1px; border-top-left-radius:0; border-bottom-left-radius:0; }
.button.joinright { border-top-right-radius:0; border-bottom-right-radius:0; }
.button.jointop { border-top-right-radius:0; border-top-left-radius:0; }
.button.joinbottom { border-bottom-right-radius:0; border-bottom-left-radius:0; }

.button.small { padding:0 18px; line-height:34px; font-size:0.9em; }

.submit_wrap button { background:#428BCA; color:#fff; } .submit_wrap button:hover, .submit_wrap button:focus { background:#2A6496; color:#fff; }
.button { background:#428BCA; color:#fff; } .button:hover, .button:focus { background:#2A6496; color:#fff; }

/* =====================================
MISCELLANEOUS
======================================== */
/* modal */
.modal { overflow-y:auto; }
.modal-content { border-radius:0; }
.modal-header { padding:15px 20px; }
.modal-footer { margin-top:0; }
.modal .close { position:absolute; top:10px; right:10px; float:none; font-size:32px; line-height:32px; font-weight:normal; }





/* pagination */
.pagination-wrap { text-align:right; }
.pagination-text { display:inline-block; margin:0 5px 0 0; vertical-align:middle; }
.pagination { margin:20px 0 20px -2px; vertical-align:middle; border-radius:0; }
.pagination li { padding:0; background:none; }
.pagination li a,
.pagination li span { margin:0 0 0 2px; padding:6px 14px; background:#F5F5F5; color:#666; border:none; }
.pagination li a:focus, .pagination li a:hover,
.pagination li span:focus, .pagination li span:hover { color:#23527C; background-color:#EEE; border-color:#DDD; }
.pagination li:first-child a, .pagination li:last-child a,
.pagination li:first-child span, .pagination li:last-child span { padding:6px 10px; background:#999; color:#FFF; border-radius:0; }
.pagination li:first-child a:hover, .pagination li:first-child a:focus,
.pagination li:last-child a:hover, .pagination li:last-child a:focus { background:#CCC; }

.pagination .active a, .pagination .active a:focus, .pagination .active a:hover,
.pagination .active span, .pagination .active span:focus, .pagination .active span:hover { background:#428BCA; }
.pagination .disabled a, .pagination .disabled a:focus, .pagination .disabled a:hover,
.pagination .disabled span, .pagination .disabled span:focus, .pagination .disabled span:hover { background:#999 !important; color:#FFF !important; }

/* breadcrumb */
.breadcrumb {color:#808285; background:none; padding:0; margin:0; font-size:14px;}
.breadcrumb a {color:#808285;}
.breadcrumb span, .breadcrumb .lightlink {color:#BCBEC0;}

@media (min-width:767px) {
.breadcrumb { display:block; }
}

/* tabs */
.tab-pane { padding:20px; background:#f5f5f5; }

@media (min-width:767px) {
.tabbar { background:#666; overflow:hidden; }
.tabbar ul li { display:inline; }
.tabbar ul li a { display:block; float:left; padding:0 20px; line-height:46px; color:#fff; }
.tabbar ul li a:hover, .tabbar ul li a:focus { background:rgba(255,255,255,0.2); }
.tabbar ul li.selected a { background:#f5f5f5; color:#666; }
}

/* =====================================
MENUS
======================================== */
.menu-option { display:block; min-height:46px; margin:0 0 6px 0; padding:4px 5px; font-size:0.9em; background:#414042; color:#FFF; text-align:center; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s;}
.menu-option i { font-size:1.8em; }
.menu-option-icon { margin:6px 0; }
.menu-option:hover { background:#1F2021; color:#FFF; }
.menu-option:focus { color:#FFF; }

.menu-option-icon.icon-favourite {color:#515051; transition:color 0.3s; -moz-transition:color 0.3s; -webkit-transition:color 0.3s; -o-transition:color 0.3s;}
.menu-option-icon.icon-favourite.active {color:#FF0032;}
.menu-option:hover .menu-option-icon.icon-favourite {color:#BCBEC0;}
.menu-option:hover .menu-option-icon.icon-favourite.active {color:#FFA4D4;}

.mainmenu-open .menu-option, .mainmenu-open .header .page-title {/* background:#1F2021;*/ }
.mainmenu-open .menu-option .icon-handle:before { opacity:0.4; }
.menu-option.selected .menu-option-icon { opacity:0.4; }
.menu-option.mobile { padding:5px 10px; background:#FFF; text-align:right; color:#414042; }
.menu-option.mobile.menu-toggle { text-align:left; }

.menu-option-icon.icon-handle {font-size:2.6em; margin:0;}

.menu-option.firstclass-ticket-count > span {line-height:38px;}

.icon-moneybox {color:#FFCCFF; margin:0; top:-4px;}
.menu-option .icon-firstclassservice {color:#857C71; margin:0;}
.icon-helpdesk {}
.icon-dashboard-icon {}
.icon-handle {}

.moneybox-text {font-size:1.4em; line-height:1.9em;}

/*a.helpdesk-link:hover {background:#BCBEC0;}*/


@media (max-width:1200px) {
	.menu-option.golden-ticket-count {font-size:0.85em;}
}

@media (max-width:330px) {
	.menu-option.golden-ticket-count {font-size:0.8em;}
}

@media (min-width:767px) and (max-width:998px) {
	.moneybox-text {font-size:1.1em; line-height:2.4em;}
}


@media (min-width:991px) and (max-width:1200px) {
	.hidden-1200 {display:none;}
}

@media (min-width:767px) and (max-width:991px) {
	.hidden-991 {display:none;}
	.menu-option.firstclass-ticket-count > span {font-size:0.8em;}
}


/* mainmenu */
.mainmenu-title { display:none; font-size:1em; color:#FFF; text-transform:uppercase; }
.mainmenu-section-title { margin:0 0 6px 0; padding:7px 5px; background:#006699; font-size:1em; color:#FFF; text-transform:uppercase; }

body.mainmenu-open .mainmenu-spread{background:#414042;}

.mainmenu-wrap { margin:0 0 20px 0; background:#fff; }
.mainmenu { display:none; }
.mainmenu-open .mainmenu { display:block; }
.mainmenu-items li { display:block; margin:0; padding:0; }
.mainmenu-items li a { display:block; margin:0 0 6px 0; padding:5px 0; background:#E6E7E8; color:#414042; text-transform:uppercase; font-size:0.8em; }
.mainmenu-item-icon, .mainmenu-item-label { display:inline-block; vertical-align:middle; }
.mainmenu-item-icon { width:30px; height:30px; margin:0 10px 0 0; text-align:center; background-position:center -60px; padding:7px 0 0;}
.mainmenu-item-label { max-width:80%; }

.mainmenu-item-icon.icon-hyundai360 {font-size:1.9em; padding-top:4px;}

@media (min-width:767px) {
.mainmenu-title { display:block; }
.mainmenu-items { margin:10px 0 20px 0; }
.mainmenu-items li a { margin:0; background:#414042; color:#FFF; }
.mainmenu-item-icon { background:#666; background-position:center 0; }
.mainmenu-items li:hover .mainmenu-item-icon, .mainmenu li:focus .mainmenu-item-icon { opacity:0.6; }
.mainmenu-section-title { padding:7px 0; background:#414042; color:#2FBFF3; }
}

@media (max-width:767px) {
.mainmenu-items li:hover a, .mainmenu-items li:focus a, .mainmenu-items li:active a { background:#BCBEC0; color:#FFF; }
.mainmenu-items li:hover .mainmenu-item-icon, .mainmenu li:focus .mainmenu-item-icon { background-position:center -30px; }
}


/* =====================================
HEADER
======================================== */
/* header */
.header { background:#F1F2F2; z-index:2000;}
.mainmenu-open .header { position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; background:#FFF; overflow:auto; }

.header.logged-out {position:relative; background:none; z-index:200;}

@media (min-width:767px) {
.mainmenu-open .header { background:#414042;}
}

/* =====================================
TOPBAR
======================================== */
/* header */
.topbar { text-align:center; background:#FFF; }
.mainmenu-open .topbar{ /*overflow:hidden;*/ }
.topbar-logo { display:block; margin:15px auto; }
.topbar-block { display:block; min-height:62px; margin:0 0 6px 0; padding:5px 4px 4px; background:#BCBEC0; color:#FFF; }
a.topbar-block:hover, a.topbar-block:focus { background:#a2a5a7; color:#FFF; }
.topbar-block-title { display:block; font-size:0.6em; text-transform:uppercase; }
.topbar-block-smalltext, .topbar-block-bigtext { display:block; }
.topbar-block-smalltext { margin:6px 0; font-size:0.85em; }
.topbar-block-bigtext { margin:2px 0; font-size:1.5em; }
.topbar-block-icon { display:block; margin:8px auto; font-size:1.4em; }

@media (max-width:767px) {
	.topbar-block.dealership { min-height:36px; padding:3px 4px; background:#414042; }
	.topbar-block.dealership .topbar-block-title { display:none; }

	.topbar-block-smalltext { margin:0 10px 0 0; text-align:right; line-height:4.4em;}
}

@media (min-width:767px) {
	.topbar { background:#FFF; }
	.topbar-logo { display:block; max-width:200px; margin:0; padding:10px 0; }
	.topbar-block { margin:0; }
	.topbar-block-title { font-size:0.75em;  }	
}

/* =====================================
CSS CODE SNIPPETS
======================================== */
/* CSS triangles */
.arrow-up { width:0; height:0; border-left:5px dashed transparent; border-right:5px dashed transparent; border-bottom:5px solid black; }
.arrow-down { width:0; height:0; border-left:20px dashed transparent; border-right:20px dashed transparent; border-top:20px solid #f00; }
.arrow-right { width:0; height:0; border-top:60px dashed transparent; border-bottom:60px dashed transparent; border-left:60px solid green; }
.arrow-left { width:0; height:0; border-top:10px dashed transparent; border-bottom:10px dashed transparent; border-right:10px solid blue; }


/* breakpoints */
.breakpoint { display:none; }
.breakpoint:after { content:'mobile'; }

@media (min-width:767px) {
.breakpoint:after { content:'not-mobile'; }
}


/* =====================================
DEALER SELECT
======================================== */
#dealer-select-form {color:#333; text-align:left; width:90%; margin:15px auto 0;}
.chzn-container .chzn-results .active-result {font-size:0.9em;}
.chzn-container-single .chzn-single span {margin-top:-2px;}




/* =====================================
DEFAULT TABLE
======================================== */
table.default-table {width:100%; margin-bottom:20px;}

table.default-table th, table.default-table td {border:1px solid #FFF;}

table.default-table table, table.default-table table th {border:0;}

table.default-table th {padding:5px 10px; font-size:12px; font-weight:normal; vertical-align:middle; text-align:center; color:#FFF; background:#B3B3B3;}
table.default-table td {padding:10px; font-size:12px; font-weight:normal; text-align:center; color:#000; vertical-align:middle;}


table.default-table tr.national td {background:#D2D2D2;}
table.default-table tr.odd td {background:#EEE;}
table.default-table tr.even td {background:#F7F7F7;}

table.default-table .align-left {text-align:left;}
table.default-table .align-right {text-align:right;}
table.default-table .align-center {text-align:center;}

table.default-table .vert-top {vertical-align:top;}
table.default-table .vert-center {vertical-align:middle;}
table.default-table .vert-bottom {vertical-align:bottom;}

table.default-table tr th.no-padding, table.default-table tr td.no-padding {padding:0;}
table.default-table .no-border {border:0;}
table.default-table .no-border-left {border-left:0;}

span.status-dot {margin:0 auto; display:block; width:16px; height:15px; background:url(/service-leads/images/icon-traffic-light.png) center top no-repeat;}
span.red-dot {}
span.yellow-dot {background-position:0 -15px;}
span.green-dot {background-position:0 -30px;}


.table-title {font-weight:bold; margin-bottom:0;}




/* =====================================
UTILITY BUTTONS
======================================== */

.utility-buttons {float:right;}
.utility-buttons a {display:block; margin:0 5px; padding:10px 10px 5px; float:left; color:#6F6F6F; font-size:14px; text-align:center; /*border-left:1px solid #D7D7D7;*/}
.utility-buttons a:first-child {border:none;}
.utility-buttons a p {margin:5px 0 0;}
.utility-buttons a img {height:24px;}
.utility-buttons a:hover p {color:#2B417A;}




/* =====================================
SECTION
======================================== */
.section-header { display:block; margin:0 0 6px 0; padding:7px 10px; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; }
.section-header-title { margin:0; font-size:1.2em; font-weight:700; text-transform:uppercase; }
a.section-header:hover { background:#282728; color:#FFF; }

#notifications article .content {position:relative;}
#notifications article .content a {position:absolute; top:0; left:0; width:100%;}

.section-box { position:relative; display:block; min-height:189px; margin:0 0 6px 0; padding:10px; background:#006699; color:#FFF; text-transform:uppercase; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; }
.section-box.half, .section-box.xs-half { min-height:90px; }
a.section-box:hover { background:#005580; color:#FFF; }
.section-box.red { background:#FF0033; }
a.section-box.red:hover { background:#E6002E; }
.section-box.green { background:#75CC31; }
a.section-box.green:hover { background:#6AB92C; }
.section-box.grey { background:#414042; color:#A7A9AC; }
.section-box.grey.logged-out {background:rgba(65,64,66,0.7);}
a.section-box.grey:hover { background:#282728; }
.section-box-title { margin:0 0 3px 0; font-size:0.9em; font-weight:700; display:inline-block; vertical-align:top; }
.section-box-title.right { position:absolute; right:5px; }
.section-box-title.large { font-size:1.8em; line-height:1em; }
.section-box-subtitle { display:block; margin:0; font-size:0.7em; }

.section-box-center { position:absolute; top:50%; left:0; right:0; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); text-align:center; font-weight:300; }
.section-box-center-text { font-size:2.5em; display:block;}
.section-box-center i { display:block; margin:-8px auto 0; }
.section-box-center i.green { color:#75CC31; }
.section-box.xs-half .section-box-center.icon { top:auto; left:auto; right:5px; bottom:5px; max-width:26px; transform:none; }

.section-box-center-text-small {display:block; font-size:0.8em; line-height:1.2em;}
.section-box-center-text-small a {display:block;}
.section-box-center-text-small.bad {color:#FF3300;}

#euro-dealer-incentive-row {} 
.euro-dealer-incentive .section-box-center-text-small {font-weight:700;} 

.euro-dealer-incentive .section-box {margin:0; min-height:192px; color:#042150; background:#D5E7F0;} 

.euro-dealer-incentive .section-box a {color:#900;} 
.euro-dealer-incentive .section-box-footer-title {color:#042150;}
#euro-dealer-incentive-top .section-box {background:#D5E7F0 url(/euro-dealer-incentive/images/bac-main.png) no-repeat 50% 25px / 160px auto;} 
#euro-dealer-incentive-bottom .section-box {background:#D5E7F0 url(/euro-dealer-incentive/images/bac-main.png) no-repeat 50% -167px / 160px auto;} 
#euro-dealer-incentive-top .section-box .section-box-center {top:61%;} 
#euro-dealer-incentive-bottom .section-box .section-box-center {top:56%;} 

#euro-dealer-incentive-top .euro-image {position:absolute; top:5px; right:5px; width:56px;}

.section-box-center i.icon-tick, .section-box-center i.icon-cross {font-size:2.1em; margin-top:3px;}

.section-box-footer { position:absolute; bottom:0; left:0; right:0; padding:10px; }
.section-box-footer { font-size:0.85em; color:#FFF; /*color:#33CCFF;*/ }
.section-box-footer.small { display:block; font-size:0.9em; line-height:1em; text-align:center;}
.section-box-footer-title.right { position:absolute; right:5px; bottom:9px; }
.section-box-footer-title.large { font-size:2.1em; line-height:1em; font-weight:lighter;}
.section-box-footer-title .section-box-footer-small {font-size:0.7em;}
.section-box-footer-icon { position:absolute; right:5px; bottom:5px; width:25px; }
i.section-box-footer-icon {font-size:2.5em; top:0; right:6px; width:40px; text-align:right;}
.section-box-footer-icon.center { left:68%; margin-bottom:5px; right:auto; transform:translate(-50%,0); -ms-transform:translate(-50%, 0); }
.section-box.red .section-box-footer { color:#990000; }
.section-box.green .section-box-footer { color:#339900; }
.section-box.grey .section-box-footer { color:#A7A9AC; }

.weather-tomorrow {margin-bottom:3px; display:block;}
.weather-icon {margin-top:-22px;}

.weather-block {background:#414041;}
.loading-weather-message p {display:none; text-align:center; padding:85px 0 0;}
.weather-icon-0 {font-size:5em;}
i.section-box-footer-icon.weather-icon-1 {font-size:1.8em;}

.section-box.home-image { background:url('/images/home-image.png'); background-size:cover; background-position:50% 50%; }

.back-to-top { display:block; margin:10px 0; text-align:center; color:#666; font-size:0.8em; text-transform:uppercase; }
.back-to-top i { display:block; margin:3px auto; font-size:1em; }
.back-to-top:hover, .back-to-top:focus { color:#666; }

@media (min-width:767px) and (max-width:991px) {
	.section-box-title, .section-box-footer { font-size:0.65em; }
	i.section-box-footer-icon {top:3px; right:5px;}
	
}

@media (min-width:767px) {
	.section-header {position:relative; background:#D1D3D4; color:#58595B; font-weight:400; }

	.section-box.xs-half { min-height:180px; }
	.section-box.xs-half .section-box-center.icon { top:50%; left:0; right:0; bottom:auto; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); max-width:none; }
}

@media (min-width:1200px) {
	.section-box.home-image { min-height:366px; }
}


.no-transform {text-transform:none;}


/* =====================================
MESSAGE BOARD
======================================== */
.message-board { margin:0 0 6px 0; /*background:#414042;*/ }
.message-board .section-header {  }
.message-board .section-header-title {}
.message-board-item {min-height:130px; display:block; border:none !important; border-bottom:6px solid #808285 !important; background:#414042; color:#FFF; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s; }
/*.message-board-carousel .message-board-item:first-child {margin-top:-6px;}*/
.message-board-item:hover, .message-board-item:focus { outline:none; background:#1F2021; color:#FFF; }
.message-board-item:after { content:""; display:table; clear:both; }
.message-board-item-body, .message-board-item-icon { display:inline-block; float:left; }
.message-board-item-body {position:relative; width:86%; min-height:124px; border-right:6px solid #808285; padding:5px 10px; font-size:0.8em; line-height:1.2em; }
.message-board-item-title { color:#2FBFF3; text-transform:uppercase; font-size: 0.9em;}
.message-board-item-icon { width:14%; min-height:120px; text-align:center; }
.message-board-item-icon i { margin:46px auto 0; font-size:2em; color:#A7A9AC;}
.message-board-item-icon i.icon-link {margin-top:52px; font-size:1.8em;}
.message-board-carousel-prev, .message-board-carousel-next {position:absolute; top:0; right:0; padding:5px 15px 5px 16px; border:0; border-left:6px solid #FFF; background:#414042; color:#FFF; }
.message-board-carousel-prev:hover, .message-board-carousel-next:hover, .message-board-carousel-prev:focus, .message-board-carousel-next:focus { outline:none; }
.message-board-carousel-prev i, .message-board-carousel-next i {font-size:9px;}

.message-board-item-icon-mini {display:none;}

@media (min-width:991px) and (max-width:1200px) {

.message-board-item-body {width:83%;}
.message-board-item-icon { width:17%;}

/* 	.message-board-item-body {width:100%; border:0;}
.message-board-item-icon {display:none;}

.message-board-item-icon-mini {position:absolute; top:5px; right:5px; display:block;}
.message-board-item-icon-mini i { margin:0; font-size:1.5em; color:#A7A9AC;}
.message-board-item-icon-mini i.icon-link {margin-top:0; font-size:1.3em;} */
}

.slick-arrow.slick-disabled {color:#808285; cursor:default;}

.message-carousel-next-row {position:relative; margin-top:-6px; padding-top:6px; background:#F1F2F2 !important;}

@media (max-width:767px) {
	.message-board-carousel-prev, .message-board-carousel-next {right:3px; width:15%; border-color:#F1F2F2;}
}


/* =====================================
FAVOURITES CAROUSEL
======================================== */
.favourites-item { position:relative; display:block; min-height:98px !important; border:none !important; border-bottom:6px solid #F1F2F2 !important; padding:5px; background:#A7A9AC; color:#FFF;}
.favourites-item:hover, .favourites-item:focus { outline:none; background:#808285; color:#414042; }
.favourites-item-title { font-size:0.85em; text-transform:uppercase; }
.favourites-item-icon { position:absolute; top:42px; left:0; width:100%; text-align:center; font-size:2.4em; color:#808285; }
.favourites-item:hover .favourites-item-icon {color:#333;}
.favourites-carousel-prev, .favourites-carousel-next { display:block; width:100%; border:none; padding:2px 5px; background:#414042; color:#FFF; }
.favourites-carousel-prev i, .favourites-carousel-next i {font-size:0.7em;}
.favourites-carousel-prev { border-bottom:6px solid #FFF; }
.favourites-carousel-next { padding:5px 5px 6px; }
.favourites-carousel-prev:hover, .favourites-carousel-next:hover, .favourites-carousel-prev:focus, .favourites-carousel-next:focus { outline:none; }

.favourites-item .fav-icon {position:absolute; top:65px; right:10px; color:#BDBEC0;}

div.favourites-carousel i.fav-icon:hover {color:#333;}

.favourites-item, .favourites-item-icon, i.fav-icon {
	transition:color 0.3s; -moz-transition:color 0.3s; -webkit-transition:color 0.3s; -o-transition:color 0.3s;
	transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s;
}

.favourites-item-icon.icon-hyundai360 {font-size:3em;}

/* =====================================
FOOTER
======================================== */
.footer-note { display:block; margin:20px 0 0 0; font-size:0.65em; }
.footer-note.logged-out {color:#FFF;}

@media (min-width:767px) {
	.footer-note { margin:20px 0 20px; }
}


/* =====================================
AFTERSALES NEWS SLIDESHOW
======================================== */
.aftersales-news-slideshow {position:relative; height:192px;}
.aftersales-news-slide {position:absolute; top:0; left:0; min-height:186px;}
.aftersales-news-slide .slide-content {height:185px !important; padding:10px; background:#FFF;}
.aftersales-news-slide > img {width:100%;}

.aftersales-news-slide p.slide-title {font-weight:bold; font-size:14px;}
.aftersales-news-slide p {font-weight:lighter; font-size:13px;}

.aftersales-news-slide .slide-icon {position:absolute; top:145px; right:15px; font-size:2.2em; color:#D1D3D4; color:#004C84;}
.aftersales-news-slide .slide-icon.icon-comingsoon {color:#DC9D12;}

.aftersales-news-slideshow ul.slick-dots {position:absolute; bottom:2px; left:0; text-align:center; width:100%; padding:0;}
.aftersales-news-slideshow ul.slick-dots li {position:relative; display:inline-block; width:16px; height:20px; margin:0; padding:0; cursor:pointer; }
.aftersales-news-slideshow ul.slick-dots li button{font-size:0; line-height:0; display:block; width:20px; height:20px; padding:5px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent; }

.aftersales-news-slideshow ul.slick-dots li button:hover:before, .aftersales-news-slideshow ul.slick-dots li button:focus:before {opacity:1;}
.aftersales-news-slideshow ul.slick-dots li button:before {font-family:Arial, sans-serif;font-size:30px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

.aftersales-news-slideshow ul.slick-dots li.slick-active button:before {opacity:.75; color:black;}



/* =====================================
LOGIN PAGE
======================================== */
#loginform-container {margin:0;}

#loginform-container form {padding:10px 5px 0; background:rgba(61,61,63,0.5); text-align:left;}
#loginform-container form .row.spaced {margin-bottom:61px;}

#loginform-container form label {color:#FFF;}
#loginform-container form input[type="text"],
#loginform-container form input[type="password"] {border:0; border-radius:4px; font-size:0.85em; padding:0 10px; display:inline-block; width:200px; height:24px; vertical-align:top;}
#loginform-container form input[type="checkbox"] {vertical-align:middle; margin-right:10px; border-radius:2px;}
#loginform-container form button {padding:0; height:24px; width:24px; color:#FFF; font-size:0.7em; border-radius:4px; border:1px solid #FFF; background:#BCBEC0; vertical-align:top;}
#loginform-container form button:hover {background:#DDD;}

#loginform-container form .input-wrap {margin-bottom:15px;}

#loginform-container form .checkbox-wrap {}
#loginform-container form .checkbox-wrap label {font-size:0.8em; color:#D1D3D4;}

#loginform-container form a {font-size:0.8em; color:#D1D3D4;}
#loginform-container form a:hover {text-decoration:underline;}

#loginform-container form .loginform-extras {display:inline-block; vertical-align:top; width:140px; margin-left:10px; line-height:0.9em; text-align:left;}
#loginform-container form .loginform-extras .remember-me {margin-top:-3px;}
#loginform-container form .loginform-extras .remember-me label {font-size:0.7em; margin:0;}
#loginform-container form .loginform-extras .remember-me input[type="checkbox"] {}

#loginform-container form .loginform-extras a.forgotten-password-link {font-size:0.7em; color:#FFF;}


@media (max-width:597px) {
	#loginform-container form {text-align:left;}
	#loginform-container form input[type="text"], #loginform-container form input[type="password"] {width:100%; margin-bottom:10px;}

	#loginform-container form button {width:40%;}
}


@media (max-width:767px) {
	.topbar-block.logged-out {margin-bottom:3px;}
}






#helpdeskModal, .defaultModal {color:#FFF;}

#helpdeskModal .modal-dialog, .defaultModal .modal-dialog  {margin-top:120px;}
#helpdeskModal .modal-content, .defaultModal .modal-content  {padding:10px; border-radius:5px;}

#helpdeskModal .modal-header, .defaultModal .modal-header  {margin-bottom:6px; padding:10px; background:#231F20;}
#helpdeskModal .modal-header button.close, .defaultModal .modal-header button.close  {color:#939598; top:11px; right:20px; font-size:13px; text-shadow:none; opacity:1;}
#helpdeskModal .modal-header h2, .defaultModal .modal-header h2  {color:#FFF; font-size:12px; margin:0;}

#helpdeskModal .modal-body, .defaultModal .modal-body  {text-align:left; background:#414042;}
#helpdeskModal .modal-body .row, .defaultModal .modal-body .row  {}

#helpdeskModal .modal-body p, #helpdeskModal .modal-body a, .defaultModal .modal-body p, .defaultModal .modal-body a  {margin-bottom:0; display:block;}
#helpdeskModal .modal-body p.text-white, .defaultModal .modal-body p.text-white  {}
#helpdeskModal .modal-body .text-grey, .defaultModal .modal-body .text-grey  {}

#helpdeskModal .modal-body label, .defaultModal .modal-body label  {color:#FFF;}
#helpdeskModal .modal-body input, .defaultModal .modal-body input  {padding:8px 5px; margin-bottom:10px; font-size:0.9em; border-radius:5px;}
#helpdeskModal .modal-body input:placeholder-shown, .defaultModal .modal-body input:placeholder-shown  {color:#A7A9AC;}
#helpdeskModal .modal-body button, .defaultModal .modal-body button  {width:100%; padding:8px 0; color:#58595B; border:0; background:#D1D3D4; border-radius:5px;}



#helpdeskModal {display:none;}

.margin-bottom-10 {margin-bottom:10px !important;}
.margin-bottom-15 {margin-bottom:15px !important;}








#notifications article {
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
}

#notifications article .content {
	transition: 1.0s ease-out;
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	-o-transition: 1.0s ease-out;
	-ms-transition: 1.0s ease-out;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	/* content backface is visible so that static content still appears */
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;

}
#notifications article.applyflip .content {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}



#notifications article .content .card-front, #notifications article .content .card-back {
	/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: visible;
}

#notifications article .content .card-front, #notifications article.applyflip .content .card-front {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}

#notifications article .content .card-back, #notifications article.applyflip .content .card-back {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

#notifications article .content .card-front, #notifications article.applyflip .content .card-back {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: visible;
}
#notifications article.applyflip .content .card-front, #notifications article .content .card-back {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }



.paging {display:block; float:right; margin:20px 10px 0px 0px; font-size:12px; color:#333; font-family:'ModernHMedium', arial, sans-serif;}
.paging span {display:block; float:left; margin:0px 5px 0px 0px;}
.paging a {text-indent:-9999px;}
a.prev-page {background:url(/recall/images/arrow-left.png) no-repeat left top; display:block; float:left; width:11px; height:16px; margin:-1px 5px 0px 5px;}
a.next-page {background:url(/recall/images/arrow-right.png) no-repeat left top; display:block; float:right; width:11px; height:16px; margin:-1px 5px 0px 5px;}
.paging a:hover {background-position:left bottom;}


#goto-paging {display:block; float:right; margin:16px 20px 0px 0px; font-size:12px; color:#333; font-family:'ModernHMedium', arial, sans-serif;}
#goto-paging p {float:left; display:block; line-height:20px; }
#goto-paging input {float:left; display:block; width:40px; margin:0 5px;}

#goto-paging span, #goto-paging button {float:left; display:block; width:11px; height:19px; margin:0 5px; text-indent:-9999px; cursor:pointer; background:url(/recall/images/arrow-right.png) no-repeat left 3px; border:0;}



video {
   width: 100%; /* 640px or less depending on size of viewport */
   height: auto; /* automatically calculates height from via above values */
}



/*.pdf-date {margin-top:130px;}*/
.pdf-date p {font-size:1.2em; color:#727173 !important; margin:0; font-weight:lighter;}
.pdf-date p span span {font-weight:bold;}