/*
## Import CPU branding package
Don't make changes to files in the CPU folder as they'll be overwritten when the package is updated
See http://go.cshare.net/teams/digital-business-channels/ui/StyleGuide/index.html for what's in the package
*/
@import "../cpu/cpu.less";



/*Plans specific components can be imported here which will include them with all theme CSS files*/
@import "../Captcha/captcha.less";
@import "_bootstrap-datetimepicker.less";

@import "../typeahead.less";
@import "../ChartJs/chartJs.less";



/*
## Plans customisations
---
A collection of elements which haven't made it to the UI Council for approval to be added to the RWF.Branding package.

Most are likely deprecated and should be avoided.

Only add new rules here if you have sign-off from the Global UI Council: http://intranet.cshare.net/forms/GUIC/SitePages/default.aspx

*/


@brand-contrast: @brand-secondary;

@modal-lg: 800px; //stop modals from becoming too wide

.modal-xl {
    width: ~"calc(100% - 20px)";
    max-width: 1199px;
    margin: 10px auto;
}

h2 {
    color: @brand-primary;
}

/*
## Text muted lighter
---

A lighter version of the `.text-muted` class

	<span class="text-muted-lighter">Some light grey text</span>

*/

.text-muted-lighter {
    color: #bbb;
}

/*
## Highlight primary
---

Adds a soft box-shadow in the primary brand colour, for use on panels or other elements to draw attention - use sparingly! Note these rules won't work with `<tr>` elements.

	<div class="highlight-primary">A primary highlght</div>

*/
.highlight-primary {
    box-shadow: 0 0 11px @brand-primary;
    transition: all 0.5s linear;
}

/*
## Flags default dimensions

Add some default dimensions to the `.flag` elements

	<p><span class="flags flags-au"></span> The Australian flag</p>
*/

.flags {
    display: inline-block;
    width: 19px;
    height: 14px;
}

/*
## Disabled button styles
---
Disabled button styles need to be discussed further with the UI Council.

In the meantime these overrides will set an opacity on buttons but retain original borders and colours.

	<a class="btn btn-primary" disabled>Disabled primary</a>
	<button class="btn btn-secondary" disabled>Disabled secondary</button>
	<a class="btn btn-contrast" disabled>Disabled contrast</a>
	<div class="step-actions m-t-15">
		<button class="btn btn-back" disabled>Back</button>
		<button class="btn btn-next" disabled>Next</button>
	</div>
*/

.btn-primary {
    &.disabled, &[disabled], fieldset[disabled] & {
        color: #fff;
        background: @brand-primary;
        border-color: @brand-primary;
        opacity: 0.65;
    }

    &:hover, &:focus, &:active, &:active:hover {
        &.disabled, &[disabled], fieldset[disabled] & {
            background: @brand-primary;
            opacity: 0.65;
        }
    }
}

.btn-secondary {
    &.disabled, &[disabled], fieldset[disabled] & {
        color: @brand-primary;
        background: #fff;
        border-color: @brand-primary;
        opacity: 0.65;
    }

    &:hover, &:focus, &:active, &:active:hover {
        &.disabled, &[disabled], fieldset[disabled] & {
            background: #fff;
            color: @brand-primary;
            opacity: 0.65;
        }
    }
}

.btn-contrast {
    &.disabled, &[disabled], fieldset[disabled] & {
        color: #fff;
        background: @brand-contrast;
        border-color: @brand-contrast;
        opacity: 0.65;
    }

    &:hover, &:focus, &:active, &:active:hover {
        &.disabled, &[disabled], fieldset[disabled] & {
            background: @brand-contrast;
            color: #fff;
            opacity: 0.65;
        }
    }
}
/*
## Rules for forms and errors (likely deprecated)
---
Collection of old rules for forms and errors, think most of these should be removed or added to Branding package.

*/
.form-group-with-indicators .validationMessage {
    display: none;
}

.has-error.form-group-with-indicators .control-label {
    display: block;
}

.panel-danger {
    background-color: #f2dede;
    border-color: @panel-danger-border;
    padding: 10px;
    color: @error-color;
}

.panel-danger li {
    list-style: none;
    font-size: 14px;
}

.form-control-required label {
    padding-right: 6px;
}

.panel-body .international-phone .form-control {
    .form-control-250;
    border: 1px solid @input-border;
    box-shadow: none;
}

.form-control-250 {
    max-width: 250px;
}

.form-control-140 {
    max-width: 140px;
}

.form-control-compact {
    height: 30px;
    padding: 6px;
}

.circle-help ~ .form-control, .circle-help ~ .international-phone {
    width: 90%;
}

select.form-control {
    height: 47px;
    font-size: 17px;
}
/*
## Panel wizard styles (deprecated - use panel-tab or panel-default instead)
---

Rules for the `.panel-wizard` element.

	<div class="panel panel-wizard">
		<div class="panel-heading panel-heading-wizard">
			<h3>Wizard panel heading</h3>
		</div>
		<div class="panel-body">
			<p>Panel body content</p>
		</div>
	</div>

*/
.panel-wizard {
    counter-reset: flag;

    .panel-heading {
        padding: 10px 15px;
        .box-shadow(0 1px 3px 0 rgba(0,0,0,0.08));
        border-bottom: 1px solid #ededf1;

        h2 {
            margin-top: 10px;
        }

        a {
            display: inline-block;
        }
    }
}

.panel-heading-wizard {
    position: relative;
    border-top-left-radius: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);

    > h3 {
        padding: 12px 28px 12px;
        margin: 0;
        position: absolute;
        background: #fff;
        margin-top: -54px;
        left: -1px;
        border-radius: 6px 6px 0 0;
        border: 1px solid @panel-default-border;
        border-bottom: 0px;
    }
}

.panel-default > .panel-heading-primary {
    padding: 30px 10px;
}

/*
## Panel accordion styles
---

Rules for the `.panel-accordion` element.

<div id="accordion">
	<div class="panel panel-accordion">
		<div class="panel-heading" role="tab" id="heading1">
			<h3 class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href = "#collapse1" aria-controls="collapse1" aria-expanded="false">
					<span class="glyphicon icon-indicator"></span>
					<span class="panel-accordion-title">Some thing</span>
				</a>
			</h3>
		</div>
		<div id="collapse1" aria-labelledby="heading1" class="panel-collapse collapse" role="tabpanel">
				<div class="panel-body">
				body content
			</div>
		</div>
	</div>
</div>
*/

.panel-accordion {
    border: 1px solid @panel-default-border;
    margin-bottom: 5px;

    .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid @panel-default-border;
        background: #eee;

        .panel-accordion-title {
            line-height: 22px;
            display: inline-block;
            width: ~"calc(100% - 30px)";
        }
    }

    .panel-heading .icon-indicator {
        margin-right: 10px;
        width: 18px;
        display: inline-block;
        vertical-align: top;
        top: 4px;
    }

    .panel-heading .icon-indicator:before {
        content: "\e114";
    }

    .panel-heading .collapsed .icon-indicator:before {
        content: "\e080";
    }
}


/*
## Summary label and currency (likely deprecated)
Not sure if these are being used - should probably be removed
*/

.summary-label {
    font-weight: bold;
}

.summary-currecy {
    font-weight: bold;
}


/*
## List-group-item
---
Override Bootstrap to set a transparent background on `.list-group-item` elements

	<div style="background: #bbb;" data-note="ignore this div">
		<ul class="list-group">
			<li class="list-group-item">
				List group item 1
			</li>
			<li class="list-group-item">
				List group item 2
			</li>
			<li class="list-group-item">
				List group item 3
			</li>
		</ul>
	</div>
*/
@list-group-bg: transparent;

/*
## Text toggle
---
Use to display alternate text when an element has `aria-expanded=true` attribute. Can be used for accordion toggles and other collapsable elements.
See http://getbootstrap.com/javascript/#collapse

	<a class="text-toggle" aria-expanded="false" data-toggle="collapse">
		<span class="text-expanded">Hide</span>
		<span class="text-collapsed">Show</span>
	</a>
*/

.text-toggle[aria-expanded=false] .text-expanded {
    display: none;
}

.text-toggle[aria-expanded=true] .text-collapsed {
    display: none;
}

/*
## Plan documents table
---
Custom rules for the plan documents (My Documents) table on extra small screens - is there a more generic approach?

*/
@media (max-width: @screen-sm-min) {
    /*Table for plans documents*/
    .table-documents-xs {
        overflow: hidden;
    }

    .table-documents-xs .table-document-row td {
        vertical-align: middle;
    }

    .table-documents-xs .table-document-row td:first-child {
        word-break: break-word;
        width: 40%;
    }

    .table-documents-xs .table-document-row td:nth-child(2) {
        width: 10%;
    }
}


/*
## Collapsible panel inside table-stack-xs
---
These rules should be merged back in to the branding package - need to make sure `.collapse` and `.collapse.in` classes work correctly when used inside `.table-stack-xs` element on extra small breakpoint

	<table class="table table-stack-xs">
		<tr>
			<td>
				Regular table cell
			</td>
			<td>
				Regular table cell
			</td>
			<td>
				Regular table cell
			</td>
		</tr>
		<tr class="collapse in">
			<td colspan="3">
				A collapsible row
			</td>
		</tr>
		 <tr>
			<td>
				Regular table cell
			</td>
			<td>
				Regular table cell
			</td>
			<td>
				Regular table cell
			</td>
		</tr>
	</table>
*/

@media (max-width: @screen-xs-max) {
    .table-stack-xs .collapse {
        display: none;
    }

    .table-stack-xs tr.collapse.in {
        display: block;
    }

    .table-stack-xs td.collapse.in {
        display: table-cell;
    }
}

/*
## Wizard step rules
---
Some custom rules for the wizard steps - control how wide a step can get

*/
.wizard-steps > li {
    max-width: 250px;
}

/*
## Export, Print and Hollow buttons (deprecated)
---
Added temporarily - these buttons should be replaced by regular links and icons for the print/export

	<button class="btn btn-hollow">Hollow button</button>
	<button class="btn btn-print">Print button</button>
	<button class="btn btn-export">Export button</button>
*/

.btn-hollow {
    color: @gray-light;
    background: transparent;
    border-color: @table-border-color;
    box-shadow: none;
    text-transform: none;
    padding: 8px 15px;
    font-weight: normal;
    font-size: 15px;

    &:hover, &:focus, &:active, &:active:hover {
        border-color: @gray-light;
        color: @gray-light;
        box-shadow: none;
    }
}

.btn-print {
    .btn-hollow;
    padding: 3px 15px 6px 15px;

    &:before {
        content: "\e91c";
        font-family: 'Glyphicons Cpu';
        font-size: 18px;
        margin-right: 10px;
        position: relative;
        top: 2px;
    }
}

.btn-export {
    .btn-hollow;
    padding: 3px 15px 6px 15px;

    &:before {
        content: "\e964";
        font-family: 'Glyphicons Cpu';
        font-size: 18px;
        margin-right: 10px;
        position: relative;
        top: 1px;
    }
}

/*
## .site-header theming rules
---
Rules to use LESS variables to set site header background and background position via LESS variables in theme files

Variables used are `@site-header`, `@site-header-position` and if needed for the full background - `@full-background` and `full-background-position`
*/

@site-header: none;
@site-header-position: center top;

@full-background: @site-header;
@full-background-position: @site-header-position;

.site-header {
    background-image: @site-header;
    background-position: @site-header-position;
}

@media (min-width: @screen-sm-min) {
    .background-full .site-header {
        background-image: @full-background;
        background-position: @full-background-position;
    }
}

.site-header.splash-header-overlay{
    background: black;
    background-image: none;
}
/*
## .navbar-site
---

Styles for the main navbar element used on the page. Uses a custom CSS class`.navbar-site` to add rules around background colors,
dimensions and other customisations which shouldn't be applied to other navbars used in the site. Combine with the `.navbar-absolute-top` class to fix the navbar at the top of the page

Need to spend some time refactoring and get sign off from the UI council before moving into the Branding package.

	<div style="background: #bbb;" data-note="Ignore this wrapper div">
		<nav class="navbar navbar-site">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle collapsed">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar top-bar"></span>
						<span class="icon-bar middle-bar"></span>
						<span class="icon-bar bottom-bar"></span>
					</button>
					<a class="navbar-brand" href="#"></a>
				</div>
				<div id="navbar" class="collapse navbar-collapse">
					<div class="navbar-backdrop" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"></div>
					<div class="navbar-content">
						<button type="button" class="navbar-toggle collapsed navbar-toggle--menu" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar top-bar"></span>
							<span class="icon-bar middle-bar"></span>
							<span class="icon-bar bottom-bar"></span>
						</button>
						<ul class="nav navbar-nav navbar-menu navbar-left">
							<li class="navbar-menu-branditem visible-xs visible-sm">
								<a href="#>
									<span>Profile</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span>Home</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span>Documents</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span>Activity</span>
								</a>
							</li>
						</ul>

						<ul class="nav navbar-nav navbar-menu navbar-right">
							<li class="hidden-xs hidden-sm">
								<a href="#">
									<i class="cpuicon cpuicon-user d-inline" style="top: 0px;"></i>
									<span>Profile</span>
								</a>
							</li>
							<li>
								<div class="dropdown navbar-menu navbar-language-selector">
									<button class="btn-link dropdown-toggle">
										<span>English</span>
										<span class="chevron-down"></span>
									</button>
									<ul class="dropdown-menu">
										<li><a href="#"><span>English</span></a></li>
										<li><a href="#"><span>中文</span></a></li>
									</ul>
								</div>
							</li>
							<li>
								<form class="navbar-form">
									<button class="btn-link">Logout</button>
								</form>                    
							</li>
						</ul>
					</div>
				</div>
			</div>
		</nav>
	</div>
*/

@navbar-text-color: @text-color;
@hamburger-menu-text-color: @text-color;
@hamburger-menu-icon-color: @text-color;
@navbar-height: 70px;
@navbar-background-color: transparent;

@company-logo: none;


@company-logo-height: 44px;
@company-logo-width: 122px;
@company-logo-fixed-size: false; //if true will override larger sizing on company select, login screen etc - see how it's used as a LESS guard below
@company-logo-margin-top: 0;

@navbar-menu-margin-top: 0;

@hamburger-icon-margin-top: 8px;
@hamburger-breakpoint: @screen-sm-max;

.navbar-site {
    width: 100%;
    padding: 10px 0;
    height: @navbar-height;
    border: none;
    background: @navbar-background-color;
}


.navbar-site .btn-link {
    color: @navbar-text-color;
    padding-top: 0;
    border-top: 0;
}

.navbar-brand {
    height: @company-logo-height;
    width: @company-logo-width;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: @company-logo-margin-top;
    background-image: @company-logo;
}

@media (min-width: @screen-sm-min) {
    .navbar-site .navbar-brand {
        &when (@company-logo-fixed-size = true) { //A LESS guard - when @navbar-brand-fixed-size is set to true will apply these rules (overriding styles in view template in company select and login screens) see http://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less for more on LESS guards
            width: @company-logo-width;
            height: @company-logo-height;
        }
    }
}




.navbar-left {
    font-size: 19px;
}

.navbar-right button, .navbar-right a, .navbar-right .navbar-menu {
    font-size: 17px;
}

.navbar-menu {

    > .dropdown-toggle {
        border: 0;
        padding: 0 5px 5px 0;
    }

    &.open > .dropdown-toggle:active, &.open > .dropdown-toggle:focus,
    .dropdown-toggle:active, .dropdown-toggle:focus {
        background-color: #fff;
        color: @text-color;
    }

    > .dropdown-menu {
        left: 0;
        margin-top: 0;
        border-radius: 0;
        border: 0;

        span {
            line-height: 1.5;
        }
    }

    > .dropdown-menu > li > a {
        font-size: 15px;
        padding: 3px 8px;
    }

    .cpuicon-chevron-down {
        font-size: 6px;
        margin: 0 0 5px 3px;
        vertical-align: top;
    }

    &.open .cpuicon-chevron-down {
    }

    > li > a, > li > span {
        color: @navbar-text-color;
        padding: 0 15px;
    }

    > li > a:hover, > li > a:focus {
        background: transparent;
        text-decoration: underline;
    }

    li, a, button, span {
        line-height: 30px;
    }
}

.navbar-language-selector {
    position: relative;

    > .dropdown-menu {
        left: auto;
        right: 0;
        min-width: 135px;
    }
}

.navbar-form {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top; 
    border: none;
}

.navbar-absolute-top {
    position: absolute;
    z-index: 1000; /*sit infront of hero-bg, input-group-addons and footer*/
}

.navbar-right > :last-child .dropdown-menu {
    left: auto; /*flip menu back to left if last element on right*/
    right: 0;
}

@media (min-width: @screen-sm-min) {
    .navbar-site .collapsing {
        padding-left: 0;
    }

    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: 0; /*remove negative Bootstrap margin*/
    }
}

@media (min-width: @screen-md-min) {
    .navbar-language-selector {
        margin-left: 5px;
    }

    .navbar-site .navbar-nav {
        margin-top: @navbar-menu-margin-top;
    }
}

.navbar-header > .navbar-toggle {
    margin-top: @hamburger-icon-margin-top;

    .icon-bar { /*turn off animation for hamburger icon as we have two icons in the template*/
        transition: none;
        transform: none;
        opacity: 1;
        background-color: @navbar-text-color;
    }
}


/*
## List-group-summary
An alternate version of list-group, adds some extra styles. Need to check where this is being used and reconcile with Branding package

	<div style="width: 250px;">
		<ul class="list-group list-group-summary">
			<li class="list-group-item flex-justify">
				<span>List group item</span>
				<span>1</span>
			</li>
			<li class="list-group-item flex-justify">
				<span>List group item</span>
				<span>2</span>
			</li>
			<li class="list-group-item flex-justify">
				<span>List group item</span>
				<span>3</span>
			</li>
		</ul>
	</div>

*/
.list-group-summary {
    border-top: 1px solid @gray-lighter;
}


/*
## various mixins and utilities
   Need to check which of these, if any, are being used and reconcile with Branding package
*/

.text-gray {
    color: @text-color
}

.text-gray-light {
    color: @gray-light
}

.t-f-24 {
    font-size: 24px !important;
}

.t-f-20 {
    font-size: 20px !important;
}

.t-f-16{
    font-size: 16px !important;
}

.t-f-14 {
    font-size: 14px !important;
}

.t-f-12 {
    font-size: 12px !important;
}

.t-f-normal {
    font-size: @font-size-base !important;
}

.main-background-color {
    background-color: #f1f1f1;
}

.bg-gray-lighter {
    background-color: #f9f9f9;
}

.vt-padding {
    padding-top: @padding-large-vertical;
    padding-bottom: @padding-large-vertical
}

.hz-padding {
    padding-left: @padding-large-horizontal;
    padding-right: @padding-large-horizontal
}

.has-padding {
    .vt-padding();
    .hz-padding();
}

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

.vt-margin {
    margin-top: @form-group-margin-bottom;
    margin-bottom: @form-group-margin-bottom
}

.hz-margin {
    margin-left: @form-group-margin-bottom;
    margin-right: @form-group-margin-bottom
}

.input-control-w-100 {
    width: 100px !important;
}

/*
## Centre rows and columns
Classes to use to center align rows and columns
*/
.row-centered {
    display: flex;
    justify-content: center;
}

.col-centered {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/*
## Vertical offset and inset
   Use to add negative/positive margin top on elements at different breakpoints (needed for CPM homepage)
   - Should review this approach
*/
@media (min-width: @screen-lg-min) {
    .lg-v-offset-80 {
        margin-top: -80px;
    }

    .lg-v-inset-20 {
        margin-top: 20px;
    }
}

/*
## Fixed width columns
Use the `.col-sm-210` class to restrict the width of the column to 210px on small breakpoint and above - used for the datepicker fields on Activity

	<div class="row">
		<div class="col-xs-6 col-sm-210">
			Some example content 
		</div>
	</div>
*/

@media (min-width: @screen-sm-min) {
    .col-sm-210 {
        width: 210px;
    }
}

/*
## Powered by
---
Rules for the 'Powered by Computershare' logo and text in footer. A data-uri version of the Computershare logo is used for performance.
	
	<div class="footer">
		<div class="container">
			<ul class="footer-list">
				<li>Application name</li>
				<li class="powered">Powered by <a href="#">Computershare</a></li>
			</ul>
		</div>
	</div>
*/

.powered {
    padding-left: 5px;

    &:before {
        display: inline-block;
        content: '';
        border-left: 1px solid darken(@footer-color, 60%);
        width: 1px;
        height: 14px;
        vertical-align: sub;
        margin-right: 12px;
    }

    & > a {
        text-indent: -3000em;
        background-image: url(data:image/png;base64,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);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100px;
        height: 19px;
        display: inline-block;
        margin-left: 5px;
        margin-bottom: 2px;
        vertical-align: middle;
    }
}

/*
## Chart legends
---
Styles for chart legends - can be most built from existing elements, need some styles for `.chart-legend-icon` elements

	<div class="chart-legend" style="width: 300px;">
		<ul>
			<li>
				<span style="background: red;"></span>
				Legend item one
			</li>
			<li>
				<span style="background: blue;"></span>
				Legend item two
			</li>
		</ul>
	</div>
*/
.chart-legend {
    ul {
        .list-group;
    }

    li {
        .list-group-item;

        span {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 15px;
            vertical-align: middle;
        }
    }
}

/*
##Utility classes for Donut Chart inserts

    <div class="chart-wrapper">
        <canvas data-bind="chart: {type: 'doughnut', data: getCircularChartData(), options: chartOptions}"></canvas>
        <div class="chart-total">
            <!-- ko if length >= 8 -->
            <span class="chart-total-units chart-total-units-small">
                <span data-bind="text: totalUnitsIntegerPartFormatted"></span><!--ko if: totalUnitsDecimalPartFormatted() != '' --><span class="chart-total-decimal" data-bind="text: totalUnitsDecimalPartFormatted"></span><!--/ko-->
            </span>
            <!-- /ko -->
            <!-- ko if length == 6 || length == 7 -->
            <span class="chart-total-units chart-total-units-med">
                <span data-bind="text: totalUnitsIntegerPartFormatted"></span><!--ko if: totalUnitsDecimalPartFormatted() != '' --><span class="chart-total-decimal" data-bind="text: totalUnitsDecimalPartFormatted"></span><!--/ko-->
            </span>
            <!-- /ko -->
            <span class="chart-total-value" data-bind="currency: totalValue"></span>
            <span class="chart-total-description" data-bind="resourceText:'CPU/PlansServicing/Participant/HoldingSummary/TotalPortfolio'"></span>
        </div>
    </div>


*/

.chart-wrapper {
    position: relative;

    canvas {
        position: relative;
        z-index: 1;
    }
}

.chart-total {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    padding: 2px 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-total-units {
    font-size: 38px;
    display: block;
    line-height: 0.8;
    background: rgba(256,256,256,0.8);
}

.chart-total-decimal {
    font-size: 16px;
}
/*sizing for large units or decimals*/
.chart-total-units-med {
    font-size: 30px;
}

.chart-total-units-small {
    font-size: 24px;

    .chart-total-decimal {
        font-size: 12px;
    }
}

.chart-total-units-verysmall {
    font-size: 21px;

    .chart-total-decimal {
        font-size: 12px;
    }
}

.chart-total-units-extrasmall {
    font-size: 18px;

    .chart-total-decimal {
        font-size: 12px;
    }
}

.chart-total-type {
    font-size: 12px;
    color: #697186;
}

.chart-total-value {
    font-size: 15px;
    font-weight: bold;
    margin-left: 3px;
    display: block;
    white-space: nowrap;
    background: rgba(256,256,256,0.8);
}

.chart-total-description {
    text-transform: uppercase;
    line-height: 0.8;
    display: block;
    font-size: 12px;
    white-space: nowrap;
}

#chartjs-tooltip {
    z-index: 3;
}

/*
## Print Changes
---
Changes to implement when user attempts to print
*/

@media print {
    body {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container, .main-wrap {
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .collapse {
        height: auto !important;
        display: block !important;
    }

    a.btn, button.btn {
        display: none !important;
    }

    .navbar {
        display: none !important;
        margin: 0 !important;
    }

    .footer {
        display: none !important;
        margin: 0 !important;
    }

    .panel-tab-title {
        display: none !important;
    }

    .site-header .container-fluid {
        display: none !important;
        margin: 0 !important;
    }

    .body-content {
        margin-top: 0 !important;
    }

    .modal {
        position: relative;
    }

    .modal-content {
        border: 0;
        box-shadow: 0;

        .close {
            display: none;
        }
    }

    .modal-body {
        max-height: none;
        overflow: visible;
    }

    .modal-open .modal {
        overflow: visible;
    }

    .modal-footer {
        display: none;
    }
}

/*
## Widgets
---
Widget classes to use when displaying items in a panel, centred on the screen.
*/

.widget-container {
    @media (min-width: @screen-sm-min) {
        .flex-display;
        .flex(initial);
        .flex-direction(column);
        .widget-float-center(760px);
        top: 100px;
        right: 50%;
        margin-right: -380px;
        transform: inherit;
        width: 760px;
        border-radius: 5px;
        box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        padding: 20px;

        .btn {
            width: auto;
        }
    }

    @media (max-width: @screen-xs-max) {
        background: #fff;
        padding-bottom: 10px;
        margin-bottom: 10px;

        .btn {
            width: 100%;
        }
    }

    @media (min-width: @screen-sm-min) and (min-height: 700px) {
        position: relative;
        top: auto;
        right: auto;
        transform: inherit;
        margin-right: inherit;
    }
}

.widget-panel {
    @media (min-width: @screen-sm-min) {
        padding: 10px 20px;
    }

    @media (max-width: @screen-xs-max) {
        padding: 20px 10px;
    }
}

.widget-panel--single {
    @media (min-width: @screen-sm-min) {
        padding: 10px 60px;
    }

    @media (max-width: @screen-xs-max) {
        padding: 20px 10px;
        padding-bottom: 10px;
    }
}

.widget-footer {
    @media (max-width: @screen-xs-max) {
        margin-bottom: 20px;
    }

    @media (min-width: @screen-sm-min) {
        margin-top: 10px;
    }
}

/* Welcome Widget */
.widget-container--welcome {
    text-align: center;

    @media (min-width: @screen-sm-min) {
        background-color: #21263D;
        color: #fff;

        h2 {
            color: #fff;
            margin-bottom: 20px;
        }

        a {
            color: #fff;
        }

        .widget-footer a {
            float: right;
        }
    }
}

/*
## Links - Mouse Pointer
---
Set mouse cursor to pointer for `anchor` tags

		<a>A link without a href but with a pointer</a>
*/

a {
    cursor: pointer;
}

/*
## Chevrons
---
CSS chevrons created with `transform: rotate` can be used as an alternative to cpuicons

	<span class="chevron-down"></span>
	<span class="chevron-up"></span>
	<span class="chevron-right"></span>
	<span class="chevron-left"></span>
*/

.chevron {
    display: inline-block;
    content: '';
    margin: 0 5px 5px 5px;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 8px;
    height: 8px;
}

.chevron-down:before {
    .chevron;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.chevron-up:before {
    .chevron;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.chevron-left:before {
    .chevron;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.chevron-right:before {
    .chevron;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

/*
## Compact vertical steps
---
Add the `.compact-steps` CSS class to `.numbered-vertical-steps` for use in cramped conditions, currently used in the recent trades detail section. 

	<ul class="numbered-steps-vertical compact-steps">
		<li class="completed">
			<span class="step-title">Order submitted</span>
			<span class="step-text"><br></span>
		</li>
		<li>
			<span class="step-title">Order sold on market</span>
			<span class="step-text">Your sale order will execute on the market as soon as possible (subject to market availability), once this happens we will send you a confirmation email (Trade Date - <em>usually the day of your order or the next trade day</em>)</span>
		</li>
		<li>
			<span class="step-title">Transaction Statement</span>
			<span class="step-text">The day after your units have been sold we will email you a transaction statement containing the details of your sale (Trade Date + 1 Business Day).</span>
		</li>    
	</ul>
*/
.numbered-steps-vertical.compact-steps {
    padding-left: 35px;

    > li:before {
        font-size: 11px;
        padding: 3px 7px;
        left: -35px;
    }

    > li.completed:before {
        width: 22px;
        height: 22px;
        padding: 4px 0 0 4px;
    }

    &:after {
        left: 14px;
    }

    .step-title, .step-text {
        font-size: 11px;
    }
}

/*
## Currency Toggle
---
Styles for alternate currency toggle used in Holding Summary in the home page and in View Your Plans page

	<h3 class="pull-left">
		<span data-bind="resourceText: 'CPU/PlansServicing/Participant/HoldingSummary/UserBalanceHeader'"></span>
	</h3>
	<style type="text/css" data-bind="text: checkboxBeforeAfter"></style>
	<div id="checkbox-toggle" class="checkbox-toggle checkbox-toggle-hs pull-right">
		<input id="currencyToggle" name="toggle" data-bind="checked: switchToAlternateCurrency" type="checkbox">
		<label for="currencyToggle"></label>
	 </div>

*/
.checkbox-toggle label {
    width: 40px;
    margin: 5px 3px 0;
    background: #eff0f2;
    height: 20px;
    cursor: pointer;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.checkbox-toggle {
    position: relative;
    font-size: 12px;
    .flex;
}

.checkbox-toggle-hs {
    margin-top: 14px;
}

.checkbox-toggle:before {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
}

.checkbox-toggle:after {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.checkbox-toggle input {
    display: none;
    user-select: none;
}

.checkbox-toggle input:checked + label {
}

.checkbox-toggle input:checked + label:after {
    margin-left: 20px;
}

.checkbox-toggle label:after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background: @brand-primary;
    position: absolute;
    left: 0;
    transition: 0.3s margin ease;
    border-radius: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/*
## Transaction List
Use to build a list of items with a left hand border, custom markers for each item and large date small description. As used on the Upcoming dates module.
  <ol class="transaction-list">
	<li class="transaction-list-item">
	  <span class="transaction-list-date">
		27 Mar 2017
	  </span>
	  <span class="transaction-list-detail">
		1,000 Restricted Share Plan Vest
	  </span>
	</li>
	<li class="transaction-list-item">
	  <span class="transaction-list-date">
		27 Mar 2017
	  </span>
	  <span class="transaction-list-detail">
		1,000 Restricted Share Plan Vest
	  </span>
	</li>
  </ol>
*/

.transaction-list {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    position: relative;

    &:after {
        content: '';
        height: 100%;
        width: 1px;
        border-left: 1px solid #eaecf3;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.transaction-list-item {
    margin: 0;
    padding: 15px 10px 15px 25px;
    position: relative;
    border-bottom: 1px solid #eaecf3;
    line-height: 1;

    & > a {
        text-decoration: none;
        color: inherit;
    }

    &:before {
        content: '';
        position: absolute;
        left: -5px;
        top: 50%;
        margin-top: -6px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid grey;
        z-index: 2;
    }

    &.previous:before {
        border-color: red;
    }

    &.older:before {
        border-color: orange;
    }

    .calendar-item {
        font-size: 20px;
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -10px;
    }
}

.transaction-list-date {
    display: block;
}

.transaction-list-detail {
    font-size: 12px;
    font-weight: bold;
    color: #9ba1b0;
}
/*
## Pagination-simple
Simplified version of pagination steps, uses a smaller font and has no border or outline around pagination elements
   <ul class="pagination pagination-simple">
	<li>
	  <a href="#" class="back" aria-label="Previous">
		<span aria-hidden="true">&lt;</span>
	  </a>
	</li>
	<li>
	  <a class="back" href="#">1</a>
	</li>
	<li>
	  <a class="next" href="#">2</a>
	</li>
	<li>
	  <a href="#" class="next" aria-label="Next">
		<span aria-hidden="true">&gt;</span>
	  </a>
	</li>
  </ul>
*/
.pagination-simple {
    font-size: 12px;
    margin-bottom: 6px;
    margin-top: 0;

    & > li > a, & > li > span {
        padding: 0 6px;
        border: 0;
    }
}


@media (max-width: @screen-xs-max) {
    .xs-flex-space-between {
        .flex(1);
        .justify-content(space-between);
        .flex-display();
    }
}

.flex-space-around{
    .flex(1);
    .justify-content(space-around);
    .flex-display(); 
}

.share-price {
    font-size: 40px;
}

.share-price-changeneutral {
    color: @text-color;
}

.share-price-changeup {
    color: #008000;
}

.share-price-changedown {
    color: #ff0000;
}

.btn-group-tabs {
    font-size: 12px;
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
}

.navbar-toggle span.icon-bar {
    background-color: @hamburger-menu-icon-color;
}

body {
    font-family: Arial,Helvetica,SimSun,"宋体",STXihei,"华文细黑",sans-serif,CPU;
}

//adding defined font to issue with Turkish currency symbol: TFS #304521
@font-face {
    font-family: 'CPU';
    src: url(~/Content/fonts/Roboto-Medium.woff2) format('woff2'),
        url(~/Content/fonts/Roboto-Medium.woff) format('woff');
}

@font-face {
    font-family: 'CPU';
    src: url(~/Content/fonts/Roboto-extra-glyphs.woff2) format('woff2'),
        url(~/Content/fonts/Roboto-Medium.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}



/*
## Addition Grant Identifier
---
Styles for Addition grant details used in AER, Exercise holding selector component and Holding pages

<tr>
    <th id="pushdown-grant-identifier" colspan="8">
        <span class="t-f-14">
            <!-- ko if: GrantIdentifier1IsEnabled -->
            <span data-bind="text: GrantIdentifier1Displayed"></span>
                        
            <!--/ko-->
            <!-- ko if: GrantIdentifier2IsEnabled -->
            <span class="additional-grant-detail" data-bind="text: GrantIdentifier2Displayed"></span>
                        
            <!--/ko-->
            <!-- ko if: GrantIdentifier3IsEnabled -->
            <span class="additional-grant-detail" data-bind="text: GrantIdentifier3Displayed"></span>
                        
            <!--/ko-->
        </span>
    </th>
</tr>

*/

#p-b-0 {
    padding-bottom: 0 !important;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-t-20 {
    padding-top: 20px;
}

/* Inbox - Messages */
.unread .message-date, li.unread .message-content-title {
    font-weight: bold;
}

.message-date {
    font-size: 13px;
    display: block;
}

.message-list li {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 15px;
}

.message-list li:last-child {
    border-bottom: 0px;
}

.message-list li > a {
}

.message-list a:hover, .message-list a:focus {
    text-decoration: none;
}

.message-list .message-content-title {
    font-weight: normal;
}

.message-content-mobile {
    display: block;
    margin-top: 10px;
}


@media (max-width: 767px) {
    .message-list .message-current .message-date, .message-list .message-current .message-content-title {
        border-left: 3px solid #3385ff;
        padding-left: 10px;
        display: block;
    }
}

@media(max-width: @screen-xs-max){
	.message-summary-pane {
		width: 100%;
		position: relative;
		padding-top: 37px;
	}
	.message-content-mobile {
         & .btn-print {
    position: absolute;
    top: 0;
    right: 0;
         }

	}
}

@media (min-width: 768px) {
    .message-content-mobile {
        display: none;
    }

    .message-list .message-content-title {
        font-weight: normal;
    }

    .message-list li > span {
        padding-left: 10px;
        border-left: 3px solid transparent;
        display: block;
    }

    .message-list li.message-current > span {
        border-left-color: #3385ff;
    }

    .message-summary-pane {
        min-width: 33.33333333%;
        padding-right: 15px;
        border-right: 1px solid #ebebeb;
    }

    .message-view-pane {
        padding-left: 15px;
        width: 100%;
    }
}

.message-content-header {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.message-content-title {
    font-weight: bold;
    display: block;
}

/* Transfer To Broker in Exercise/AER Wizard */

.summary-label-bold {
    font-weight: bold;
}

.m-t-5 {
    margin-top: 5px !important;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.broker-details-value {
    font-size: 18px;
    padding-top: 0;
    color: #008fd3;
    word-wrap: break-word;
}

.p-l-0{
    padding-left:0;
}

/*

## Overflow Wrap

Use the overflow property to force lines to be contained 
into the panel by breaking them into several lines.

*/

.overflow-wrap {
        overflow: hidden;
        overflow-wrap: break-word;
        -ms-word-wrap: break-word; // IE 9+
}

/* Transfer Wizard */
.borderless-list-item {
    border-bottom: 0 none;
}

.typeahead-search {
    .register-widget {
        width: 700px;

        .input-group-btn {
            .calltoaction {
                font-size: 18px;
            }
        }
    }

    @media(max-width: 768px) {
        .register-widget {
            width: 100%;
        }
    }
}

/* Table styles */
.table-actions-small {
    font-weight: normal;
    font-size: 12px;
    margin-left: 15px;
}

/* Holding Summary - Plans List */
.plans-list {
    display: flex;
    flex-direction: row;
    font-size: 14px;
    justify-content: center;
}

.plans-list p {
    white-space: nowrap;
    margin-bottom: 5px;
}

.plans-list ul {
    margin: 0;
    display: flex;
    flex-direction: row;
    margin-left: 0;
    padding-left: 0;
    flex-wrap: wrap;
}

.plans-list li {
    list-style: none;
    margin-left: 8px;
    padding-right: 10px;
    position: relative;
}

.plans-list li:after {
    content: '|';
    position: absolute;
    right: 0;
    top: -1px;
}

.plans-list li:last-child:after {
    content: '';
}

// Contribution Plan Splash Page
.splash-layout {
    margin-top: -140px;
}

@media (max-width: 768px) {
    .splash-body {
        margin-top: 50px;
    }
}

@media (min-width: 768px) {
    .splash-body {
        margin-top: 140px;
    }
}

.splash-layout {
    font-size: 17px;
}

.splash-header-content {
    color: #fff;
    width: 100%;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
    display: table-cell;
    vertical-align: bottom;
}

@media (min-width: 768px) {
    .splash-header-content h1 {
        font-size: 48px;
    }
}

.background-none .navbar-site + .site-header{
    display: none;
}

/*Highlight box*/

.form-control-strong {
    font-weight: bold;
    padding: 6px 9px;
}

.highlight-box {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.highlight-box-left, .highlight-box-right {
    display: table-cell;
    vertical-align: top;
    padding-top: 5px;
}

.highlight-box-left {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 40px
}

/*Range input*/
input[type=range] {
    -webkit-appearance: none;
    margin: 18px 0 0 0;
    width: 100%;
    padding-bottom: 0;
    z-index: 2;
    position: relative;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: @brand-primary;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
    background: linear-gradient(to right, @brand-primary 0%,@brand-primary 10%,#bdc2cc 10%,#bdc2cc 100%);
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #bbb;
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: @brand-primary;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background-color: #bdc2cc;
    border: 0px;
}

input[type="range"]::-moz-range-progress {
    background-color: @brand-primary;
    height: 8.4px;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #bbb;
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: @brand-primary;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: @brand-primary;
    border-radius: 2.6px;
}

input[type=range]::-ms-fill-upper {
    background: @brand-primary;
    border-radius: 2.6px;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #bbb;
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: @brand-primary;
    cursor: pointer;
}

input[type="range"]::-ms-fill-lower, input[type=range]:focus::-ms-fill-lower {
    background-color: @brand-primary;
}

input[type="range"]::-ms-fill-upper, input[type=range]:focus::-ms-fill-upper {
    background-color: #bdc2cc;
}

@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, #UnrestrictedRange {
        margin-top: -0px !important;
    }
    /* IE11 */
    *::-ms-backdrop, #AllRange {
        margin-top: -0px !important;
    }
    /* IE11 */
    *::-ms-backdrop, .range-values {
        margin-top: 0px !important;
    }
    /* IE11 */
}

/*hide tooltip in IE*/
input[type=range]::-ms-tooltip {
    display: none;
}

/*counter which appears below slider*/
.range-values {
    position: relative;
    margin: 15px 5px 0 15px;
    font-size: 12px;
}

.range-current-value-wrap {
    position: absolute;
    left: 4px;
    width: ~"calc(100% - 15px)"; /*some magic numbers here to line up current-value with left aligned 'min value' and right aligned 'max value'*/
    background: #fff;
}

.range-current-max-value-wrap {
    position: absolute;
    width: 100%;
}

.range-max-value {
    float: right !important;
    position: static;
}

.range-current-value {
    position: absolute;
    background: #fff;
    transform: translate(-50%, 0);
}

#AllRange::-webkit-slider-runnable-track {
    background: linear-gradient(to right, @brand-primary, @brand-primary), #bdc2cc;
    background-repeat: no-repeat;
    background-size: 0%;
}

/*Inline notes*/

.notes-small {
    font-size: 12px;
    color: #6d6d6d;
}

.inline-notes {
    display: block;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
}

span.inline-notes {
    color: #6d6d6d;
}

@media(min-width: 1200px) {
    .space-right:after {
        display: inline-block;
        width: 325px;
        content: '';
    }

    .inline-notes {
        width: 310px;
        display: inline-block;
        text-align: left;
        margin-left: 10px;
    }
}

/* Radio highlight for buttons used in new Quanity page in Sell Wizaed*/

.radio-highlight {
	padding: 3px;
	position: relative;
	margin-bottom: 20px;
}

.radio-highlight span {
	z-index: 1;
}

.radio-highlight .label-summary {
	color: #313544;
	position: relative;
}
.radio-highlight .highlight-background {
	background: #f1f1f1;
	position: absolute;
	width: calc(~"100% + 10px");
	height: calc(~"100% + 10px");
	top: -5px;
	left: -5px;
	z-index: 0;
	border-radius: 4px;
}
.radio-highlight input:checked ~ .highlight-background {
	background-color: #fff;
	border: 1px solid @brand-primary;
}
.radio-highlight .cpu-radio+span:before {
	background-color: #fff;
}
.radio-highlight .cpu-radio+span:after {
	background: #fff;
}
.radio-highlight .cpu-radio:checked+span:before {
	background-color: @brand-primary;
}

@media(min-width: 768px){
	.flex-sm {
		display: flex;
	}
}
@media(min-width: 992px){
	.flex-md {
		display: flex;
	}
}
.flex-wrap {
	flex-wrap: wrap;
}

.radio-highlight-big .cpu-radio+span {
	font-weight: bold;
}

@media(min-width: 768px){	
	.radio-highlight-big {
		text-align: center;
		width: 100%;
		
	}
	.radio-highlight-big label {
		padding-left: 0;
	}
	.radio-highlight-big .cpu-radio+span:before {
		position: relative;
		display: block;
		margin: 0 auto;
	}
	.radio-highlight-big .cpu-radio+span:after {
		left: 50%;
		margin-left: -4px;
	}
	.radio-highlight-big .cpu-radio~span {
		padding-left: 0;
	}
	.radio-highlight-big .cpu-radio+span {
		padding-left: 0;
		font-size: 17px;
	}
	.radio-highlight-big .label-summary {
		font-size: 14px;
	}
}

/* ShareLot component Pagination */


.pagination-wrap {
    text-align: center;
    min-height: 32px;
}

@media (min-width: 768px){
    .pagination-left {
        position: absolute;
    }
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: @brand-primary;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus {
    z-index: 2;
    color: @link-hover-color;
    background-color: #eee;
    border-color: #ddd
}

.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus {
    z-index: 3;
    color: #fff;
    background-color: @brand-primary;
    border-color: @brand-primary;
    cursor: default
}

.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus {
    color: #777;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed
}

.pagination-lg>li>a,.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

.pagination-sm>li>a,.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

/* ShareLot Component small screen Increase/Decrease Units button */
.number-control button {
    border: 0;
    background: transparent;
    font-size: 24px;
    vertical-align: middle;
    color: @brand-primary;
}

.number-control input {
    display: inline-block;
    vertical-align: middle;
}