@import "https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900";
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700";
@font-face { font-family: "mahindra-icons"; src: url(../fonts/mahindra-icons.eot); src: url(../fonts/mahindra-icons.eot?#iefix) format("embedded-opentype"), url(../fonts/mahindra-icons.woff) format("woff"), url(../fonts/mahindra-icons.ttf) format("truetype"), url(../fonts/mahindra-icons.svg#mahindra) format("svg"); font-weight: 400; font-style: normal }
body { padding-top: 94px; font-family: Roboto; font-size: 14px }
html, body, .main { height: 100% }
i { font-style: normal }
.main { padding: 0 0 80px }
.manual-area { height: 100% }
ol { counter-reset: item }
.manual-list li { display: block }
.manual-list li:before { content: counters(item, ".") ". "; counter-increment: item }
.manual-list { padding: 22px 0 }
.manual-list > ol > li > .sub-links { margin: 0 -10px 8px -16px }
.manual-list > ol > li > .sub-links > ol > li { padding: 4px 20px 4px 32px }
.manual-list > ol > li > ol > li > .sub-links { margin: 0 -20px 8px -32px }
.manual-list > ol > li > ol > li > .sub-links > ol > li { padding: 4px 30px 4px 48px }
.manual-list > ol > li ol { padding: 0 }
.manual-list ol li div { margin: 8px 0 0; display: block; background: #f8f8f8 }
.manual-list ol li { font-size: 13px; font-weight: 400; color: #222; white-space: nowrap }
.manual-list ol li.active-section { background: rgba(76,76,76,.04); color: #ec2227; font-size: 13px; font-weight: 700; padding-top: 4px; padding-bottom: 4px }
.manual-list > ol > li.active-section { padding-bottom: 0 }
.manual-list > ol > li { padding: 4px 10px 0 16px; font-size: 13px; font-weight: 500; color: #222; cursor: pointer }
.number-bullet { padding: 0 0 0 17px }
.circle-bullet { list-style: disc; padding: 0 0 0 17px }
.fixed-header { position: fixed; top: 0; left: 0; width: 100% }
.navbar-inverse { border: none }
header .menu-label { background: url(../images/owners_manual_xuv500_banner.jpg) #78000e no-repeat center left; float: left; width: 100% }
.navbar-header, .navbar-inverse { background: transparent }
.mahindra-logo { padding: 27px; float: left; background: #d9d9d9 }
.navbar-brand { float: left; width: 306px; padding: 0; height: auto }
.navbar-collapse, .navbar-collapse.collapse { top: 94px; bottom: 0; height: auto!important; position: fixed; overflow: auto!important; background: #f8f8f8; border-right: 1px solid rgba(76,76,76,0.1); width: 335px; padding: 0 }
.navbar-collapse.collapse .manual-list { height: auto!important }
.navbar-header { width: 100% }
.top-search { padding: 24px 20px 0 0; float: right }
.search-bar { background: #231f20; padding: 6px 0 }
.search-bar input { color: #eee; background: #231f20; -webkit-apperance: none; border: none; padding: 4px; display: inline-block; vertical-align: top; width: 300px }
.search-collapse { display: inline-block; vertical-align: bottom }
.icon-search { color: #fff; padding: 4px 12px 0; font-size: 18px; display: inline-block; height: 24px }
.navbar-nav > li { float: none }
.navbar { margin-bottom: 0 }
.list-points { padding: 0 20px 80px 375px }
.fixed-nav { position: fixed; bottom: 0; left: 335px; padding: 20px; right: 0; background: #fff }
.next-prev-points { background: rgba(0,0,0,.05); padding: 6px }
.next-prev-points .icon-prev, .next-prev-points .icon-next { color: #fff; background: #ec2227; padding: 3px; border-radius: 100%; width: 16px; height: 16px; font-size: 15px }
.next-prev-points .ch-next span, .next-prev-points .ch-prev span { display: inline-block; vertical-align: text-bottom }
.next-prev-points .ch-next span { margin-right: 6px }
.next-prev-points .ch-next { float: right }
section h2 { font-size: 30px; color: #333; font-weight: 500 }
section h3 { font-size: 30px; color: #222; font-weight: 400; margin-top: 30px }
section p { font-size: 14px; color: #222; font-weight: 400 }
section label { font-size: 14px; color: #222; font-weight: 700; margin: 0 }
.border-box { border-radius: 6px; border: 1px solid #eee; background: #fff; padding: 8px 25px; margin-bottom: 10px; float: left; width: 100% }
.icon-danger, .icon-warning, .icon-caution, .icon-notice { font-size: 36px; vertical-align: middle }
.icon-danger { color: #bf1e2d }
.icon-warning { color: #f7941e }
.icon-caution { color: #f5ee30 }
.icon-notice { color: #087b37 }
.border-box .content-icon { font-size: 24px; min-width: 150px; font-weight: 700; color: #000; display: table-cell; white-space: nowrap }
.border-box-desc { display: table-cell; padding-left: 45px; vertical-align: middle }
.outer-box-icon { padding-left: 25px }
.icon-dont { color: #ea1618; font-size: 28px; vertical-align: middle; margin-right: 15px }
.back-top { position: fixed; bottom: 110px; right: 20px; z-index: 1000; transition: 500ms ease-in 0; -ms-transition: 500ms ease-in 0; -moz-transition: 500ms ease-in 0; -webkit-transition: 500ms ease-in 0 }
.back-top.active { bottom: 50px }
.back-top a { width: 60px; display: block; height: 60px; line-height: 60px; text-align: center; text-decoration: none; color: rgba(255,255,255,0.7); text-shadow: 0 0 16px rgba(0,0,0,0.6); font-size: 48px }
[class*="icon-"] { font-family: mahindra-icons }
.icon-search:before { content: "W" }
.icon-prev:before { content: "u" }
.icon-next:before { content: "u"; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); display: inline-block }
.icon-danger:before, .icon-caution:before, .icon-warning:before, .icon-notice:before { content: "7" }
.icon-dont:before { content: "4" }
.icon-top:before { content: "v" }
.owners-manual-header .wrapper { background: rgba(0,0,0,0.7); position: fixed; top: 50px; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; transition: 100ms ease-in 0; -moz-transition: 100ms ease-in 0; -webkit-transition: 100ms ease-in 0 }
.table-view th { background: #b0b0b0; padding: 6px; font-weight: 700 }
.table-view td.colspan { background: silver; font-weight: 500 }
.table-view td { background: #e0e0e0; padding: 6px; border: 1px solid #ccc }
.sm-case { display: inline-block; font-size: 9px; vertical-align: top }
.md-case { display: inline-block; font-size: 11px; vertical-align: top }
.dimension-table { margin-top: 30px }
.margin-bottom { margin-bottom: 15px }
img.margin-bottom { display: block }
ul { margin-bottom: 15px }
.margin-tb { margin: 10px 0 }
img { display: inline-block }
.sign-table td { background: #fff; padding: 15px }
.sign-table th { text-align: center; background: #ccc; border: 1px solid #aaa }
.sign-table td img { width: 70px }
em { font-size: 12px; line-height: 18px }
.border-box-desc label { padding: 0 }
.list-style-none { margin: 0 0 15px; padding: 0; list-style-type: none }
.order-list { padding-left: 15px }
label { padding-bottom: 10px }
.media { margin-bottom: 15px }
.next-prev-points label { padding-bottom: 0; margin-bottom: 0 }
.icon-grid { background: transparent; border: medium none; color: #fff; display: block; font-size: 30px; height: 31px; line-height: 38px; margin-right: 10px; margin-top: 26px; padding: 0; text-align: center; width: 31px }
.icon-grid:hover, .icon-grid:focus, .icon-grid:active, .icon-grid:active:focus { color: #fff; text-decoration: none; outline: none }
.icon-grid:before { content: "Y" }

@media(max-width:1440px) {
section h2 { font-size: 22px }
section h3 { font-size: 22px }
section p { font-size: 13px }
section label { font-size: 13px }
.icon-danger, .icon-warning, .icon-caution, .icon-notice { font-size: 28px }
.border-box .content-icon { font-size: 18px }
.border-box-desc { padding-left: 24px }
.outer-box-icon { padding-left: 16px }
.icon-dont { font-size: 20px; margin-right: 15px }
}

@media(max-width: 991px) {
section h2 { font-size: 16px }
section h3 { font-size: 16px }
section p { font-size: 13px }
section label { font-size: 13px; font-weight: 500 }
.icon-danger, .icon-warning, .icon-caution, .icon-notice { font-size: 24px }
.border-box .content-icon { font-size: 16px }
.border-box-desc { padding-left: 0; display: block }
.outer-box-icon { padding-left: 16px }
.icon-dont { font-size: 18px; margin-right: 15px }
.search-bar input { width: 205px }
.list-points { padding: 0 20px 80px 355px }
.fixed-nav { padding: 0; font-size: 13px }
.next-prev-points { padding: 10px }
}

@media(max-width: 767px) {
body { padding-top: 50px }
.list-points { padding: 20px }
.search-collapse { display: none; left: 0; position: absolute; top: 100%; width: 100% }
.search-bar input { padding: 15px; width: 100% }
.navbar-inverse .navbar-toggle { margin-top: 27px; border: 1px solid #fff }
.navbar-collapse, .navbar-collapse.collapse { top: 50px; bottom: 0; z-index: 100; left: -290px; width: 290px; display: block; border: none; opacity: 0; transition: 200ms ease-in 0; -moz-transition: 200ms ease-in 0; -webkit-transition: 200ms ease-in 0 }
.navbar-collapse, .navbar-collapse.collapse.in { left: 0; opacity: 1 }
.fixed-nav { left: 0 }
.fixed-header { z-index: 2 }
.manual-list { padding: 22px 12px }
.manual-list ol li { white-space: normal }
.next-prev-points .ch-next span, .next-prev-points .ch-prev span { display: none }
.owners-manual-header .mahindra-logo { display: none }
.owners-manual-header .navbar-toggle { float: none; margin: 0; display: block; border: none; border-radius: 0; padding: 0; height: 50px; width: 50px; position: absolute; left: 0; border: none; text-align: center }
.owners-manual-header .navbar-brand { float: left }
.owners-manual-header .navbar { height: 50px; position: relative }
.owners-manual-header .navbar-brand > img { height: 50px; margin-left: 50px }
.owners-manual-header .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: transparent }
.owners-manual-header .navbar-inverse .navbar-toggle .icon-bar { width: 25px; margin: 6px auto }
.owners-manual-header .navbar-inverse .navbar-toggle .top-bar, .owners-manual-header .navbar-inverse .navbar-toggle .bottom-bar { transition: 100ms ease-in 0; -moz-transition: 100ms ease-in 0; -webkit-transition: 100ms ease-in 0; position: relative }
.owners-manual-header .navbar-inverse .navbar-toggle .top-bar { transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 5px }
.owners-manual-header .navbar-inverse .navbar-toggle .bottom-bar { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top: -10px }
.owners-manual-header .navbar-inverse .navbar-toggle .middle-bar { opacity: 0; visibility: hidden }
.owners-manual-header .navbar-inverse .collapsed .top-bar { transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); top: 0 }
.owners-manual-header .navbar-inverse .collapsed .bottom-bar { transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); top: 0 }
.owners-manual-header .navbar-inverse .collapsed .middle-bar { opacity: 1; visibility: visible }
.navbar-collapse, .navbar-collapse.collapse.in + .wrapper { opacity: 1; visibility: visible }
.owners-manual-header .menu-label { background: #79000F }
.owners-manual-header .top-search { padding: 0 }
.owners-manual-header .search-bar { background: transparent none repeat scroll 0 0 }
.owners-manual-header .navbar-brand { width: auto }
.list-points { padding: 15px; padding-bottom: 60px }
.fixed-nav { padding: 0 }
.next-prev-points { padding: 15px }
.next-prev-points .ch-prev { margin-bottom: 0 }
.icon-search { color: #fff; display: block; font-size: 18px; height: 40px; line-height: 40px; padding: 0; text-align: center; width: 50px; cursor: pointer }
.icon-grid { margin-top: 7px; margin-right: 0 }
.fixed-nav {
    display: none;
}
}