/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 20-Aug-2014, 16:01:07
    Author     : geoff_000
*/

@import url("delivery-font.73f0eb487665.css");

/* Generic global styles */
body,td,th,input, textarea {
	font-family: "Delivery", Helvetica, sans-serif;
	font-size: 12px;
}
html, body {
	background-color: #E8E1D7;
	margin: 0 auto;
	padding:0;
	color: #666666;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased !important;
	line-height: 20px;
	height:100%;
	min-height: 100%;
}
input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

/* Selections */
	::selection { background:#c3effd !important; color:#000;  }
	::-moz-selection  { background:#c3effd !important; color:#000;  }

/* Headings */
	h1, h2, h3, h4, h5, h6{
		color:#000;
		padding:0;
		margin:0;
		font-family: "Delivery", Helvetica, sans-serif;
		font-weight: normal;
	}
	h1{
		font-size:24px;
		line-height:26px;
	}
	h2{
		font-size:20px;
		line-height:22px;
	}
	h3{
		font-size:16px;
		line-height: 18px;
	}
	h4{
		font-size:14px;
		line-height: 16px;
	}
	h5{
		font-size:13px;
		line-height: 15px;
	}
	h6{
		font-size:12px;
		line-height: 14px;
	}
    h3.disputed,
    h3.unpaid,
    h3.sent-for-payment,
    h3.paid,
	h3.overdue{
		background-color: #cc0000;
		color:#fff;
		display:inline-block;
		border-radius:3px;
		padding:3px 7px;
	}
    h3.disputed,
    h3.unpaid{
		background-color: #888;
	}
    h3.sent-for-payment{
    	background-color: #888;
    }
    h3.paid{
        background-color: #30971d;
    }

	.headerIconBlock{
		padding:20px;
		padding-left:80px;
		position: relative;
		color: inherit;
		text-decoration: none;
		transition: box-shadow 0.25s;
	}
	.headerIconBlock > .icon-circular{
		position: absolute;
		top:20px;
		left:20px;
		transition: color 0.25s, border-color 0.25s;
	}
	a.headerIconBlock:hover,
	a.headerIconBlock:focus{
		color:inherit;
		text-decoration: none;
		box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
		background-color: #f9f9f9;
	}

/* Font size */
	.noSize{
		font-size: 0;
	}
	.small{
		font-size: 11px;
	}
	.smaller{
		font-size: 10px;
	}
	.large{
		font-size:120%;
	}
	.larger{
		font-size:150%;
	}
/* Links */
	a.black{
		color: #000;
		text-decoration: none;
	}
    a.black:hover{
		text-decoration: none;
	}
	a{
		color: #c00;
		text-decoration: none;
	}
	a:hover,
	a:focus{
		text-decoration: underline;
	}

	a.emphasise{
		color: #c00 !important;
	}

	a.more,
	a.back,
	a.alert{
		display:inline-block;
		position: relative;
		color:#000;
		margin-left: 14px;
	}
	a.more:hover,
	a.back:hover,
	a.alert:hover{
		color:#c00;
	}
	a.more:before,
	a.back:before{
		font-family: "iconset1";
		content: "\e63a";
		color:#c00;
		font-weight: bold;
		position: absolute;
		left:-14px;
	}
	a.back{
		margin-left: 18px;
	}
	a.back:before{
		content: "\e637";
		color:#000;
		left:-16px;
	}
	a.alert{
		margin: 0;
		padding-left: 24px;
		background-image: url("../images/icons/alert.214edb8f2dfc.png");
		background-repeat: no-repeat;
		background-position: left center;
	}
/*
	Inline Block
	------------
	to get inline-block to work reliably across all browsers you
	need the following code, so we can now apply this as a calss
*/
	.inline-block,
	.inlineBlock{
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		*display:inline;
	}
/*
 * inline stuff
 */
	.light{
		opacity: .75;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		filter: alpha(opacity=70);
	}
	.lighter{
		opacity: .4;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
		filter: alpha(opacity=60);
	}
	.pointer{
		cursor: pointer;
	}

/* Buttons */
	.button-disabled,
	.button,
	.button-select{
		display:inline-block;
		background-color:#efefef;
		white-space: nowrap;
		line-height: 30px;
		height:32px;
		border:1px solid #cecece;
		color:#565656;
		font-size: 12px;
		padding:0 10px;
		text-decoration: none;
		border-radius: 3px;
		/* gradients */
		background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
		background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: linear-gradient(to bottom, #ffffff 0%,#efefef 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.button-select-wide{
		width: 100%;
	}
	.button:hover{
		border:1px solid #a3a3a3;
		text-decoration: none;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	}
	.button:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.2);
		border:1px solid #cecece;
		background:#efefef;
	}
	.button.button-proceed{
		color:#fff;
		background-color:#a90000;
		/* gradients */
		background: -moz-linear-gradient(top, #d50000 0%, #a80000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d50000), color-stop(100%,#a80000));
		background: -webkit-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: -o-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: -ms-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: linear-gradient(to bottom, #d50000 0%,#a80000 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d50000', endColorstr='#a80000',GradientType=0 );
		border-color: #ffc358;
		line-height:32px;
		border:0;
		padding:0 11px;
	}
	.button.button-proceed:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-proceed:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.6);
		background: #bc0000;
	}
	.button.button-action{
		color:#333;
		background-color:#ffa92f;
		/* gradients */
		background: -moz-linear-gradient(top, #fee28a 0%, #ffa92f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fee28a), color-stop(100%,#ffa92f));
		background: -webkit-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -o-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -ms-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: linear-gradient(to bottom, #fee28a 0%,#ffa92f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee28a', endColorstr='#ffa92f',GradientType=0 );
		line-height:32px;
		border:0;
		padding:0 11px;
		color:#000;
	}
	.button.button-action:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-action:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.3);
		background:#ffc054;
	}
	.button.button-dhl-yellow{
		color:#333;
		background-color:#ffa92f;
		/* gradients */
		background: -moz-linear-gradient(top, #fee28a 0%, #ffa92f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fee28a), color-stop(100%,#ffa92f));
		background: -webkit-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -o-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -ms-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: linear-gradient(to bottom, #fee28a 0%,#ffa92f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee28a', endColorstr='#ffa92f',GradientType=0 );
		line-height:32px;
		border:0;
		padding:0 11px;
		color:#000;
	}
	.button.button-dhl-yellow:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-dhl-yellow:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.3);
		background:#ffc054;
	}
	.button.button-green{
		color:#fff;
		background-color:#a90000;
		/* gradients */
		background: -moz-linear-gradient(top, #44a831 0%, #30971d 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44a831), color-stop(100%,#30971d));
		background: -webkit-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: -o-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: -ms-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: linear-gradient(to bottom, #44a831 0%,#30971d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44a831', endColorstr='#30971d',GradientType=0 );
		border-color: #2e8d1c;
	}
	.button.button-green:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-green:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.6);
		background: #3a9f27;
	}
	.button:focus,
	.button.focus,
	.dropdown.open .button{
		outline: none;
		border:1px solid #059eff !important;
		box-shadow: 0 0 8px #059eff !important;
		text-decoration: none;
		padding:0 10px;
		line-height: 30px;
	}

	.button > .icon-arrow-right4{
		margin-left:-3px;
	}

	.button-select{
		background: none;
		background-color:#fff;
		border:1px solid #cecece;
	}

	.button-bar,
	.button-bar li{
		list-style: none;
		padding:0;
		margin:0;
		display:inline-block;
	}
	.button-bar {
		font-size: 0rem;
		white-space: nowrap;
	}
	.button-bar li{
		font-size: 1rem;
	}
        .button-bar .textfield {
                border-left: 0;
                border-right: 0;
                border-radius: 0;
        }
	.button-bar .button {
		border-radius: 0;
		border-left-width: 0;
	}
	.button-bar li:first-child > .button {
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
                border-right: 0;
	}
	.button-bar li:last-child > .button {
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
                border-left: 0;
	}

/* Dropdown */
	.dropdown {
		display:inline-block;
		zoom:1;
		position:relative;
		vertical-align:middle;
		height: 32px;
		z-index:1;
	}

	.dropdown > .link {
		cursor: pointer;
		z-index: 2;
	}

	.dropdown > .content {
		position: absolute;
		border: 1px solid #a3a3a3;
		border-top-width: 0px;
		z-index: 1;
		background-color: #efefef;
		display: none;
		right: 0;
		top: 31px;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0) !important;
	}

	.dropdown.open {
		z-index: 2;
	}

	.dropdown.open > .link {
		border-bottom-width: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0) !important;
	}

	.dropdown.open > .content {
		display: block;
		border-color: #059eff;
	}


/*
 * bubble
 * --------
 */

	.bubble {
		display: none;
	    background-color: #fff;
	    position: relative;
	    top: 0;
	    left: 0;
	    text-align: left;
	    margin: 0 auto auto auto;
	    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.35);
	    box-shadow: 0 1px 10px rgba(0,0,0,.35);
    }
	.bubble > .triangleWrapper {
	    position: absolute;
	    left: 50px;
	    top: -10px;
	    width: 16px;
	    height: 10px;
	    overflow: hidden;
    }
	.bubble > .footer {
	    border-bottom-right-radius: 3px;
	    border-bottom-left-radius: 3px;
    }
	.bubbleBody {
		min-width: 120px;
		max-width: 400px;
	}
	.triangleWrapper > .triangle {
	    width: 10px;
	    height: 10px;
	    background: white;
	    -webkit-box-shadow: -1px -1px 3px rgba(0,0,0,.15);
	    box-shadow: -1px -1px 3px rgba(0,0,0,.15);
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    position: relative;
	    top: 5px;
	    left: 3px;
    }
	.triangleWrapper.bottomLeft > .triangle,
	.triangleWrapper.bottomRight > .triangle,
	.triangleWrapper.bottomCenter > .triangle {
	    top: -5px;
	    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
	    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
	.triangleWrapper.topLeft,
	.triangleWrapper.bottomLeft {
	    left: 50px;
    }
	.triangleWrapper.topRight,
	.triangleWrapper.bottomRight {
	    left: auto;
	    right: 50px;
    }
	.triangleWrapper.topCenter,
	.triangleWrapper.bottomCenter {
	    left: 50%;
	    margin-left: -8px;
    }
	.triangleWrapper.bottomLeft,
	.triangleWrapper.bottomRight,
	.triangleWrapper.bottomCenter {
	    top: auto;
	    bottom: -10px;
    }
	.triangleWrapper.leftTop > .triangle,
	.triangleWrapper.leftBottom > .triangle,
	.triangleWrapper.leftCenter > .triangle {
	    top: 3px;
	    left: 4px;
    }
	.triangleWrapper.leftTop,
	.triangleWrapper.leftBottom,
	.triangleWrapper.leftCenter {
	    left: -10px;
	    height: 16px;
	    width: 10px;
    }
	.triangleWrapper.leftTop,
	.triangleWrapper.rightTop {
	    top: 24px;
    }
	.triangleWrapper.leftBottom,
	.triangleWrapper.rightBottom {
	    top: auto;
	    bottom: 24px;
    }
	.triangleWrapper.leftCenter,
	.triangleWrapper.rightCenter {
	    top: 50%;
	    margin-top: -8px;
    }
	.triangleWrapper.rightTop,
	.triangleWrapper.rightBottom,
	.triangleWrapper.rightCenter {
	    left: auto;
	    right: -10px;
	    height: 16px;
	    width: 10px;
    }
	.triangleWrapper.rightTop > .triangle,
	.triangleWrapper.rightBottom > .triangle,
	.triangleWrapper.rightCenter > .triangle {
	    top: 3px;
	    left: -6px;
    }
	.scrollingBubbleBody{
		max-height:300px;
		overflow: auto;
	}
        .commentsBubble{
                width:400px;
                font-family: "Delivery", Helvetica, sans-serif !important;
                font-size: 12px;
                white-space: normal !important;
        }
        .commentCommenter {
                padding: 1px 0;
                font-weight: bold;
        }
        .commentDateTime {
                padding: 1px 0;
        }
        .commentText {
                background: #efefef;
                border: 1px solid #eaeaea;
                border-radius: 6px;
                padding: 8px;
                margin: 5px 0;
        }

/* Paragraphs */
	p{
		padding:0;
		margin:0 0 20px 0;
	}
	p.last{
		margin-bottom:0;
	}

/* Tables */
	table{
		border-collapse: collapse;
	}
	table th,
	table td{
		padding:8px;
		line-height:16px;
	}
	table.data{
		width:100%;
	}
	table.data td,
	table.data th{
		border-bottom: 1px solid #ebebeb;
		font-size: 12px;
		height: 50px;
	}
	table.data th{
		font-weight: normal;
		text-align: left;
		border-bottom: 1px solid #aaa;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;

	}
	table.data th.sortedAsc,
	table.data th.sortedDesc{
		border-bottom: 3px solid #ffcc00;
		position: relative;
		padding-right: 30px;
	}

	table.data th.sortedAsc:after,
	table.data th.sortedDesc:after{
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
		content: "\e635";
		position: absolute;
		right:10px;
		top:50%;
		font-size: 14px;
		width:14px;
		height:14px;
		margin-top:-7px;
	}
	table.data th.sortedDesc:after{
		content: "\e634";
	}

	th.sortable:hover{
		border-bottom: 3px solid #aaa;
	}

	table.data tbody tr:hover{
		background-color: #f9f9f9;
	}
        table.data tbody tr.rowHover{
                background-color: #f9f9f9;
        }
	table.data tbody tr.rowSelected{
		background-color: #fffae5;
		color:#333;
	}
	table.data tbody tr.error_row{
		background-color: #fff0f0;
        color: #333
	}
	table.data tr:last-child td{
		border:0;
	}
	table.data th.numeric,
	table.data td.numeric{
		text-align: right;
		white-space: nowrap;
	}
	table.tnc th{
		border: .1px solid #b9b9b7;
		background-color: white;
		opacity: 0.8;
	}
	.price{
		font-size: 16px;
		font-family: "Delivery", Helvetica, sans-serif;
	}
	span.price.shortpayDiv {
		margin-top: 3%;
	}
	.balanceEditable {
		border: solid 1px #333 !important;
	}
	input.textfield.price {
		text-align: right;
        width: 95%;
        margin-left: 5%;
	}
	.largePrice{
		font-size: 24px;
		font-family: "Delivery", Helvetica, sans-serif;
	}
	table td .total{
		color: #333;
		border:0;
	}
	table td .disputed,
        table td .unpaid,
        table td .sent-for-payment,
        table td .paid,
	table td .overdue{
		background-color: #cc0000;
		color:#fff;
		display:inline-block;
		border-radius:3px;
		padding:3px 7px;
	}
	table td .disputed,
        table td .unpaid{
		background-color: #888;
	}
	table td .sent-for-payment{
		background-color: #888;
	}
        table td .paid{
                background-color: #30971d;
        }
	.table{
		display:table;
		width:100%;
	}
       .table > .cell{
		display: table-cell;
		vertical-align: middle;
	}
	.table > .cell.full-width {
		width: 100%;
	}

	table.data .showOnHover{
		display:none;
	}
	table.data tr:hover .hideOnHover{
		display:none;
	}
	table.data tr:hover .showOnHover{
		display:block;
	}
	table.data tr:hover .button.showOnHover{
		display:inline-block;
	}
	table.data .columnPaid,
	table.data .columnTotal,
	table.data .columnBalance{
		min-width:130px;
	}

	table.data a{
		color: inherit;
	}

	.columnCheckbox{
		width:45px;
	}
	.columnIconOnly{
		width:30px;
	}
	.columnUser{
		width:250px;
	}

	.disabled{
		opacity: 0.5;
		color:#aaa;
	}

/* Data table options */
        .footerOptions{
                background-color: #f9f9f9;
                border-top:1px solid #ebebeb;
                border-bottom:1px solid #ebebeb;
                padding:15px;
        }
	.checkboxOptions{
		background-color: #f9f9f9;
		border-top:1px solid #ebebeb;
		border-bottom:1px solid #ebebeb;
		padding:15px 15px 15px 40px;
		background-image: url("../images/icon-withselected.8c515feb922e.gif");
		background-repeat: no-repeat;
		background-position: 15px 25px;
	}
	.checkboxOptions .options{
		display:none;
		white-space: nowrap;
	}
	.checkboxOptions.hasOptions .options{
		display:block;
	}
	.checkboxOptions.hasOptions .placeholder{
		display: none;
	}
	.checkboxOptions .options .button {
		margin-right:5px;
	}
	.checkboxOptions .options .button:last-child {
		margin-right: 0px;
	}

	.checkboxOptions .placeholder{
		display: inline-block;
		line-height: 32px;
		white-space: nowrap;
	}

	.checkboxOptionsTop {
                background-image: url("../images/icon-withselected-down.74a63cb9e93f.gif");
                border-top: 0;
                margin-top: 1px;
	}

    .checkboxOptionsNoArrow {
            background-image: none;
            padding-left: 25px;
    }

	.checkboxOptionsTopFiltered {
        border-top:1px solid #ebebeb;
	}

	.checkboxOptionsFilters{
		background-color: #f9f9f9;
		border-bottom:1px solid #ebebeb;
		padding:15px 15px 15px 40px;
		background-repeat: no-repeat;
		background-position: 15px 25px;
	}

	.checkboxCentralise{
		vertical-align: middle;
		position: relative;
		bottom: 1px;
	}

/* Buttons only valid for one item selected.*/
    .button.singleSelect {
		display: none;
	}
    .button.singleSelect.showForOne {
		display: inline-block;
	}

/* Forms & input fields */
	label{
		margin: 3px;
	}

	.textfield,
	.textarea,
	.multiselect{
		position:relative;
		min-height:32px;
		background-color:#fff;
		border:1px solid #cecece;
		border-radius: 3px;
		padding:0 10px;
		outline:none;
		display: block;
		width:100%;
	}
	.textfield.focus,
	.textfield:focus,
	.textarea.focus,
	.textarea:focus,
	.multiselect.focus,
	.multiselect:focus{
		border:1px solid #059eff;
		box-shadow: 0 0 8px #059eff;
	}

	.textarea,
	.multiselect{
		line-height:18px;
		padding: 8px 10px;
	}
	.multiselect{
		height: auto;
		padding: 0;
	}
	.multiselect > option{
		padding: 5px 10px;
	}

	.relative{
		position: relative;
	}
	.fieldContainer{
		padding:14px;
	}
	.fieldArea{
		padding:6px;
	}

	.fieldAreaTwoColumns{
		width: 40%;
	}

	.evSelectButtonJs > .button-select.error {
		border-color: #cc0100;
	}

	.textfield.error{
		border-color: #cc0100;
		z-index: 2;
	}


        .error_message,
        .errorMessage,
        .warningMessage,
        .success_message,
        .successMessage{
                background-color: #fff0f0;
                padding: 10px 20px 10px 34px;
                border: 1px solid #e8b9b9;
                border-radius: 3px;
                border-left-width:5px;
                position: relative;
        }
        .error_message:before,
        .errorMessage:before,
        .warningMessage:before,
        .success_message:before,
        .successMessage:before{
                font-family: 'iconset1';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                font-size: 16px;
                text-align: center;
                line-height: 32px;
                position: absolute;
                top:5px;
                left:10px;
                color: #e8b9b9;

                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                vertical-align: middle;
                content: "\e617";

        }

        .success_message,
        .successMessage{
                background-color: #edffee;
                border-color: #ace1af;
        }
        .success_message:before,
        .successMessage:before{
                content: "\e618";
                color: #ace1af;
        }
        .warningMessage{
                background-color: #fcf8e3;
                border-color: #faebcc;
        }
        .warningMessage:before{
                content: "\e63f";
                color: #edb545;
                font-size: 28px;
        }

/*
	evTextArea
	----------
	CSS for:
	* UI Object Evance_Ui_TextArea
	* <ev:textarea></ev:textarea>
*/
	.evTextArea{
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		*display:inline;
		position:relative;
		background-color:#fff;
		border-radius: 2px;
		border-color: #C0C0C0 #D9D9D9 #D9D9D9;
		border-width:1px;
		border-style:solid;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width:100%;
	}
	.evTextArea:hover,
	.evTextArea.focus{
		box-shadow: inset 0 1px 3px #ddd;
	}
	.evTextArea.focus{
		border:1px solid #059eff;
		box-shadow: 0 0 8px #059eff;
	}
	.evTextArea textarea{
		margin:0;
		overflow-y:scroll;
		border:0;
		padding:5px;
		outline: none;
		line-height:20px;
		color:#444;
		background:transparent;
		zoom: 1;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width:100%;
		resize: vertical;
	}
	.evTextArea.focus textarea{
		color:#000;
	}
	textarea::-webkit-input-placeholder{
	    color:#999;
	}
	textarea:-moz-placeholder {
	    color:#999;
	}
	.evTextArea.error{
		border-color: #FA8991;
		background-color: #FCEDEE;
	}
	.evTextArea.error textarea{
		color:#000;
	}
	.evTextArea .footer{
		display:table;
		color:#aaa;
		border-top:1px solid #eee;
		width: 100%;
	}
	.evTextArea .footer .cell{
		padding:8px;
		display:table-cell;
	}
	.evTextArea .counter .remaining{
		font-weight:bold;
	}
	.evTextArea .highlight .remaining{
		color:#ff0000;
	}
	.evTextArea .autosubmit{
		text-align: right;
	}

	.errorMsg {
		height: 0px;
		overflow: hidden;
		background-color: #cc0100;
		color: #ffffff;
		padding: 0px;
		margin-top: -5px;
		border-radius: 0px 0px 3px 3px;
		z-index: 1;
	}
        .errorMsg2 {
                height: 10px;
                overflow: hidden;
                background-color: #cc0100;
                color: #ffffff;
                padding: 0px;
                margin-top: -5px;
                border-radius: 0px 0px 3px 3px;
                z-index: 1;
        }

	.textfield.error + .errorMsg {
		padding: 13px 10px 8px;
		height: auto;
	}
        .evTextArea.error + .errorMsg {
                padding: 13px 10px 8px;
                height: auto;
        }
        .select.error + .errorMsg {
                padding: 13px 10px 8px;
                height: auto;
        }
        .evSelectButtonJs.error + .errorMsg {
                padding: 13px 10px 8px;
                height: auto;
        }

/* Borders */
	.bordered{
		border: 1px solid #e7e6e3;
	}
	.borderTop{
		border-top: 1px solid #e7e6e3;
	}
	.borderLeft{
		border-left: 1px solid #e7e6e3;
	}
	.borderBottom{
		border-bottom: 1px solid #e7e6e3;
	}
	.borderRight{
		border-right: 1px solid #e7e6e3;
	}
	.borderedDark{
		border: 1px solid #b9b9b7;
	}
/*
	Clear Fix: clear-after
	---------
	This is really handy!!!
	instead of doing this:
		<div class="float-left"></div>
		<div class="clear"></div>
	do this:
		<div class="float-left clear-after"></div>
*/
	.clear-after:after,
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    }
	.clear-after,
	.clearfix{
		display:block;
		zoom:1;
		position:relative;
	}
	.flex {
		display:flex;
	}

/* padding */
	.nopadb{ padding-bottom: 0; }
	.nopadt{ padding-top: 0; }
	.halfpad{
		padding: 5px;
	}
	.stdpad{
		padding:10px;
	}
	.stdpadv {
		padding: 10px 0;
	}
	.stdpadh{
		padding-left:10px;
		padding-right:10px;
	}
	.stdpadl{
		padding-left:10px;
	}
	.doublepad{
		padding:20px;
	}
	.doublepadh{
		padding-left:20px;
		padding-right:20px;
	}
	.doublepadv{
		padding-top:20px;
		padding-bottom:20px;
	}

/* margins */
	.halfmar{
		margin: 5px;
	}
	.std-margin-lr{
		margin: 0px 10px;
	}
	.stdmar{
		margin:10px;
	}
	.stdmarb{
		margin-bottom: 10px;
	}
    .stdmarl{
		margin-left: 10px;
	}
	.stdmarr{
		margin-right: 10px;
	}
        .doublemart{
                margin-top: 20px;
        }
	.doublemarb{
		margin-bottom: 20px;
	}
/* Labels */
	.label,
	.iconLabel,
	.iconLabelDisabled {
		display:inline-block;
		white-space: nowrap;
		vertical-align: middle;
		margin-left:5px;
	}
	.iconLabelDisabled{
		color: #bbb;
	}
    .wrap{
                white-space: normal;
    }

	.label-green,
	.label-red,
	.label-yellow,
	.label-blue,
    .label-ar{
		background-color: #cc0000;
		color:#fff !important;
		display:inline-block;
		border-radius:3px;
		padding:3px 7px;
		text-decoration: none !important;
	}
	.label-green{
		background-color: #11a914;
	}
	.label-blue{
		background-color: #0082cc;
	}
	.label-yellow,
    .label-ar{
		background-color: #ffa800;
	}
    .label-ar{
        padding: 2px 2px;
    }

/* Alignment */
	.vAlignMiddle{
		vertical-align: middle !important;
	}
	.vAlignTop{
		vertical-align: top !important;
	}
	.vAlignBottom{
		vertical-align: bottom !important;
	}
	.alignLeft{
		text-align: left !important;
	}
	.alignCenter{
		text-align: center !important;
	}
	.alignRight{
		text-align: right !important;
	}

/* Tags */
	.redTag{
		background-color:#cc0100;
		display:inline-block;
		font-family: "Delivery", Helvetica, sans-serif;
		color:#fff;
		font-size: 16px;
		padding:5px 8px;
	}
	.greyTag{
		background-color: #ebebeb;
		display:inline-block;
		padding:5px 8px;
	}

/* backdrops */
	.whiteBackdrop{
		background-color:#fff;
	}
	.greyBackdrop{
		background-color: #f9f9f9;
	}
	.yellowBackdrop{
		background-color:#ffcc00;
		color:#333;
	}

/* Icons */
	@font-face {
		font-family: 'iconset1';
		src:url("../fonts/iconset1.3f70cd17abc4.eot?-yyxux9");
		src:url("../fonts/iconset1.3f70cd17abc4.eot?#iefix-yyxux9") format('embedded-opentype'),
			url("../fonts/iconset1.a6a0b6a05510.woff?-yyxux9") format('woff'),
			url("../fonts/iconset1.a21bf29a7fdf.ttf?-yyxux9") format('truetype'),
			url("../fonts/iconset1.d5492ba47ff7.svg?-yyxux9#icomoon") format('svg');
		font-weight: normal;
		font-style: normal;
	}

	@-moz-keyframes spin {
	  0% { -moz-transform: rotate(0deg); }
	  100% { -moz-transform: rotate(359deg); }
	}
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(359deg); }
	}
	@-o-keyframes spin {
	  0% { -o-transform: rotate(0deg); }
	  100% { -o-transform: rotate(359deg); }
	}
	@-ms-keyframes spin {
	  0% { -ms-transform: rotate(0deg); }
	  100% {  -ms-transform: rotate(359deg); }
	}
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(359deg); }
	}

	[class^="icon-"], [class*=" icon-"]{
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
	}
	.fieldicon{
		display: block;
		position: relative;
	}
	.fieldicon .textfield{
		padding-left:30px;
	}
	.fieldicon:before{
		width:30px;
		height:32px;
		content: ' ';
		display: block;
		position: absolute;
		top:0;
		left:0;
		z-index:3;
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		font-size: 16px;
		text-align: center;
		line-height: 32px;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
	}
	.icon-x16{ font-size: 16px; }
	.icon-x18{ font-size: 18px; }
	.icon-x24{ font-size: 24px; }
	.icon-x32{ font-size: 32px; }
	.icon-x48{ font-size: 48px; }
	.icon-x64{ font-size: 64px; }

	.icon-circular{
		font-size:28px;
		color:#fff;
		width:48px;
		height:48px;
		border:2px solid #c00;
		border-radius: 24px;
		display: inline-block;
		line-height:44px;
		text-align: center;
		background-color: #c00;
	}
	.icon-avatar{
		font-size:18px;
		color:#a3a3a3;
		width:32px;
		height:32px;
		border-radius: 16px;
		display: inline-block;
		line-height:32px;
		text-align: center;
		background-color: #ffcc00;
		color:#cc0100;
	}
	.icon-attention{
		background-color:#cc0000;
		color:#fff;
		width:16px;
		height:16px;
		border-radius: 8px;
		line-height: 16px;
		text-align: center;
		font-size: 20px;
		display: inline-block;
	}

	.icon-image:before {
		content: "\e649";
	}
	.icon-camera:before {
		content: "\e64a";
	}
	.icon-star-outline:before {
		content: "\e647";
	}
	.icon-star:before {
		content: "\e648";
	}
	.icon-statistics:before {
		content: "\e646";
	}
	.icon-attention:before{
		left: -2px;
		position: relative;
	}
	.icon-alarm:before {
		content: "\e645";
	}
	.icon-print:before {
		content: "\e600";
	}
	.icon-card:before {
		content: "\e601";
	}
	.icon-home:before {
		content: "\e602";
	}
	.icon-office:before {
		content: "\e603";
	}
	.icon-pencil:before {
		content: "\e604";
	}
	.icon-file:before {
		content: "\e605";
	}
	.icon-folder-open:before {
		content: "\e606";
	}
	.icon-credit:before {
		content: "\e607";
	}
	.icon-calculate:before {
		content: "\e608";
	}
	.icon-phone:before {
		content: "\e609";
	}
	.icon-history:before {
		content: "\e60a";
	}
	.icon-drawer:before {
		content: "\e60b";
	}
	.icon-user:before {
		content: "\e60c";
	}
	.icon-search:before,
	.fieldicon.search:before{
		content: "\e60d";
	}
	.icon-key:before {
		content: "\e60e";
	}
	.icon-remove:before {
		content: "\e60f";
	}
	.icon-airplane:before {
		content: "\e610";
	}
	.icon-truck:before {
		content: "\e611";
	}
	.icon-shield:before {
		content: "\e612";
	}
	.icon-list:before {
		content: "\e613";
	}
	.icon-menu:before {
		content: "\e614";
	}
	.icon-download:before {
		content: "\e615";
	}
	.icon-download-disabled:before {
		content: "\e615";
		color: #bbb;
	}
	.icon-download-progress:before {
		content: url("/site_media/loader-small.4889784689c1.gif");
	}
	.icon-upload:before {
		content: "\e616";
	}
	.icon-flag:before {
		content: "\e617";
	}
	.icon-checkmark-circle:before {
		content: "\e618";
	}
	.icon-checkmark:before {
		content: "\e619";
	}
	.icon-loading:before {
		content: "\e641";
	}
	.icon-cancel:before {
		content: "\e63d";
	}
	.icon-cogs:before {
		content: "\e61b";
	}
	.icon-book:before {
		content: "\e61c";
	}
	.icon-megaphone:before {
		content: "\e61d";
	}
	.icon-email:before {
		content: "\e642";
	}
	.icon-calendar:before,
	.fieldicon.calendar:before {
		content: "\e640";
	}
	.icon-attention:before {
		content: "\e63f";
	}
	.icon-chat:before {
		content: "\e63e";
	}
	.icon-paperclip:before {
		content: "\e61e";
	}
	.icon-user-add:before {
		content: "\e61f";
	}
	.icon-export:before {
		content: "\e620";
	}
	.icon-clock:before {
		content: "\e621";
	}
	.icon-cross:before {
		content: "\e622";
	}
	.icon-minus:before {
		content: "\e623";
	}
	.icon-plus:before {
		content: "\e624";
	}
	.icon-cross2:before {
		content: "\e625";
	}
	.icon-minus2:before {
		content: "\e626";
	}
	.icon-plus2:before {
		content: "\e627";
	}
	.icon-minus3:before {
		content: "\e628";
	}
	.icon-plus3:before {
		content: "\e629";
	}
	.icon-question:before {
		content: "\e62a";
	}
	.icon-help:before {
		content: "\e62b";
	}
	.icon-add-to-list:before {
		content: "\e62c";
	}
	.icon-list2:before {
		content: "\e62d";
	}
	.icon-disk:before,
	.fieldicon.disk:before{
		content: "\e62e";
	}
	.icon-arrow-left:before {
		content: "\e62f";
	}
	.icon-arrow-down:before {
		content: "\e630";
	}
	.icon-arrow-up:before {
		content: "\e631";
	}
	.icon-arrow-right:before {
		content: "\e632";
	}
	.icon-arrow-left2:before {
		content: "\e633";
	}
	.icon-arrow-down2:before {
		content: "\e634";
	}
	.icon-arrow-up2:before {
		content: "\e635";
	}
	.icon-arrow-right2:before {
		content: "\e636";
	}
	.icon-arrow-left3:before {
		content: "\e637";
	}
	.icon-arrow-down3:before {
		content: "\e638";
	}
	.icon-arrow-up3:before {
		content: "\e639";
	}
	.icon-arrow-right3:before {
		content: "\e63a";
	}
	.icon-arrow-left4:before {
		content: "\e63b";
	}
	.icon-arrow-down4:before,
	.icon-select:before {
		content: "\e63c";
	}
	.icon-arrow-up4:before {
		content: "\e643";
	}
	.icon-arrow-right4:before {
		content: "\e644";
	}
	.icon-video-play:before {
		content: "\25BA";
	}
	.icon-language:before {
		content: "\e61a";
	}
        .icon-nodownload:before {
                content: "\e64d";
        }
        .icon-red {
                color: #CC0000;
        }

	.icon-loading{
		display: inline-block;
		-moz-animation: spin 2s infinite linear;
		-o-animation: spin 2s infinite linear;
		-webkit-animation: spin 2s infinite linear;
		animation: spin 2s infinite linear;
		font-size: 16px;
	}
	.icon-loading.icon-x48{
		font-size: 48px;
	}
	.icon-loading.icon-x32{
		font-size: 32px;
	}

        .icon-reorder {
                background-image: url("../images/icons/reorder.9e4ec6f80844.png");
                background-repeat: no-repeat;
                background-size: 17px;
                background-position-y: 6px;
                padding: 9px;
                cursor: move;
        }
/*
	Custom select box
	-----------------
	Usage: you only need apply the custom-select class to a standard select html element
	without any wrappers and evance.ui Javascript for evSelect will wrap it for you.
	Usage:

	<select class="custom-select" name="myselect">...</select>
*/
	select.select, select.chosen-select, select.chosen-select-multi {
		color:#000;
		font-family: "Delivery", Helvetica, sans-serif;
		padding:0;
		margin:0;
		height:32px;
		overflow:hidden;
		border:0;
		width:100%;
	}
	.chosenLeft .chosen-container .chosen-drop {
		min-width: 100%;
		width: auto;
		right: 0px;
		border-top: 1px solid #cecece;
		white-space: nowrap;
	}
	.oneLineSelect .chosen-container .chosen-drop ul {
		white-space: nowrap;
		max-width: 100%;
		width: auto;
	}
	select.evOldBrowser{
		border: 1px solid #cecece;
	}
	#loadingAmountUpdate {
		color:#000;
	}
	.custom-select{
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		*display:inline;
		overflow:visible;
		vertical-align:middle;
		position:relative;
		width:100%;
	}
	.custom-select > .button-select{
		display:none;
		margin-bottom:-32px;
		position:relative;
	}
	.custom-select > .button-select > .icon-select{
		position:absolute;
		right:10px;
		top:10px;
	}
	.custom-select > .button-select > .label{
		margin-right:20px;
		display:block;
	}
	.custom-select.hasIcon > .button-select > .label{
		margin-left:18px;
	}
	.evSelectButtonJs > select{
		opacity: 0;
		cursor: hand;
		cursor: pointer;
	}
	.evSelectButtonJs > .button-select{
		display:block;
	}
	.evSelectButtonJs > .button-select > .evSelectButtonIcon{
		position:absolute;
		top: 7px;
		left: 7px;
		font-size: 16px;
	}

/*
	evRadio & evCheckbox
	--------------------
	version 2 of evRadio
*/
	a.evRadio,
	a.evCheckbox{
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		white-space:nowrap;
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		*display:inline;
		border:0;
		padding:0;
		margin:0;
		height:20px;
		width:20px;
		border:1px solid #cecece;
		vertical-align:middle;
		border-radius: 9px;
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		text-align: center;
		line-height: 18px;
		text-decoration: none;
		outline:none;
		box-shadow: inset 0 1px 6px rgba(0,0,0,0.3);
	}
	a.evCheckbox{
		border-radius: 3px;
	}
	a.evRadio.checked,
	a.evCheckbox.checked{
		color:#000;
		border:1px solid #666666;
		box-shadow: none;
	}
	a.evRadio.checked:after,
	a.evCheckbox.checked:after{
		content: "\e619";
		position: relative;
	}
	a.evRadio.hover,
	a.evRadio:hover,
	a.evCheckbox.hover,
	a.evCheckbox:hover{
		border:1px solid #059eff;
		box-shadow: 0 0 8px #059eff;
	}

/*
	Responsive Grids
*/
	.maxWidth{
		width:100%;
	}
	.grid1of2,
	.grid2of3,
	.grid1of3,
	.grid1of4,
	.grid3of4,
	.grid1of5,
    .grid1of6,
    .grid1ofX,
	.panelMain,
	.panelAside{
		display:block;
		float:left;
		zoom: 1;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.grid1of2{ width: 50%; }
	.grid1of3{ width: 33.33%; }
	.grid2of3{ width: 66.66%; }
	.grid1of4{ width: 25%; }
	.grid3of4{ width: 75%; }
	.grid1of5{ width: 20%; }
    .grid1of6{ width: 16.66%; }
    .grid1ofX{ flex-grow: 1; }
	.panelMain{ width:73.5%; }
	.panelAside{ width:26.5%; }

	.tabularGrid{
		display: table;
		width:100%;
	}
	.tabularGrid > .grid1of3{
		display: table-cell;
		float: none;
	}

	.banner.shadowAside:before{
		background-image: url("../images/bg/shadow_aside.4789383776de.gif");
		content: ' ';
		width:10px;
		height:400px;
		right:-10px;
		display: block;
		position: absolute;
	}

/* debateable whether these are generic */
	.closeWindowIcon{
		position: absolute;
		top:15px;
		right:15px;
	}
	.closeWindowIcon{
		color:#a3a3a3;
		text-decoration: none !important;
		width:28px;
		height:28px;
		font-size: 18px;
		text-align: center;
		line-height: 26px;
		border:1px solid transparent;
		border-radius: 14px;
	}
	.closeWindowIcon:hover,
	.closeWindowIcon:focus{
		border: 1px solid #676767;
		color:#676767;
	}
	.previousButton,
	.nextButton{
		width:28px;
		height:28px;
		font-size: 18px;
		color:#a3a3a3;
		text-decoration: none !important;
		display: inline-block;
		text-align: center;
		line-height: 26px;
		font-size: 16px;
		border-radius: 16px;
		border:1px solid transparent;
	}
	.previousButton:hover,
	.nextButton:hover,
	.previousButton:focus,
	.nextButton:focus{
		border: 1px solid #676767;
		color:#676767;
	}
	.previousButton:before{
		left:-1px;
		position: relative;
	}
	.nextButton:before{
		left:1px;
		position: relative;
	}

/* normal banners */
	.banner{
		min-height: 290px;
		background-color: #333;
		background-position: 50% 50%;
		background-image: url("../images/photo/register.ceda8ac7f96f.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
	}
	.banner .bannerStrip{
		background-color:#ffcc00;
		color: #cc0000;
		text-transform: uppercase;
		display: inline-block;
		padding: 20px;
		position: absolute;
		bottom:25px;
	}
	.banner .bannerStrip h1{
		color:#cc0000;
		font-size: 18px;
	}
	.banner .bannerStrip h1 .redTag{
		font-size: 18px;
	}

	.panelAsideAbsolute{
		position: absolute;
		top:0;
		left:100%;
		width:36%;
	}

	@media screen and (max-width: 56.25em){
		.data-header > .table,
		.data-header > .table > .cell {
			display: block;
		}
	}

	@media screen and (max-width: 43.75em){
		.grid1of3{ width: 50%; }
		.grid2of3{ width: 50%; }
		.grid1of4{ width: 50%; }
		.grid1of5{ width: 50%; }
		.grid1of6{ width: 50%; }
		.grid3of4{ width: 50%; }
		.panelMain{ width: 60%; }
		.panelAside{ width: 40%; }

		.tabularGrid{
			display: block;
		}
		.tabularGrid > .grid1of3{
			display: block;
			float:left;
		}

		.banner .bannerStrip{
			bottom: 0;
		}

		.panelMain .grid1of2{
			width:100%;
		}

		.panelAsideAbsolute{
			left:100%;
			width:66%;
		}
	}

	@media screen and (min-width: 37.51em){
		.data-header .table > .cell.grid1of2 {
			float: none;
		}
	}

	@media screen and (max-width: 37.5em){
		.data-header .table,
		.data-header .table > .cell {
			display: block;
		}
	}

	@media screen and (min-width: 34.01em){
		.data-footer .custom-select {
			padding: 0 10px;
		}
	}
	@media screen and (max-width: 34em) {
		.data-footer > .table,
		.data-footer > .table > .cell {
			display: block;
			padding-bottom: 10px;
		}
		.data-footer > .table > .cell:last-child {
			padding-bottom: 0;
		}

		.data-footer .custom-select {
			padding: 0 10px 0 0;
		}
	}

	/* Tabs */
	ul.tabs,
	ul.tabs li{
		padding:0;
		margin:0;
		list-style: none;
		position: relative;

	}
	ul.tabs{
		display:block;
		width:100%;
		padding: 0 10px;
		border-bottom: 1px solid #dddddd;
		padding-top:5px;
		font-size: 0;
	}
	ul.tabs li{
		display:inline-block;
		text-align: center;
		padding:30px 40px;
		border: 1px solid #dddddd;
		border-bottom: 0;
		vertical-align: middle;
		cursor:pointer;
		background-color: #f9f9f9;
		font-size: 12px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		vertical-align: bottom;
		margin: 0 2px;
		white-space: nowrap;
	}

	ul.smallTabs li{
		padding: 10px 20px;
	}
	ul.tabs li:hover{
		border-top: 3px solid #ddd;
	}
	ul.tabs li.active{
		color:#333;
		background-color: #fff;
		border-top: 3px solid #ffcc00;
		border-bottom: 1px solid #fff;
		bottom:-1px;
	}
	ul.tabs li.short{
		padding-bottom: 10px;
	}

	.tag{
		display:inline-block;
		background-color:#ffe9c2;
		border:1px solid #ffc672;
		padding:0 10px;
		line-height:26px;
		white-space: nowrap;
		color:#333;
		border-radius: 3px;
		margin:3px;
		cursor: pointer;
		cursor:hand;
	}

	[class*="tag-"]{
		display:inline-block;
		background-color:#ffe9c2;
		border:1px solid #ffc672;
		padding:0 10px;
		line-height:26px;
		white-space: nowrap;
		color:#333;
		border-radius: 3px;
		margin:3px;
		cursor: pointer;
		cursor:hand;
	}


	ul.helpTopics{
		padding:0;
		margin:0;
		list-style: none;
		margin-bottom: 20px;
		border-top:1px solid #eee;
	}
	ul.helpTopics > li{
		border-bottom:1px solid #eee;
		padding:15px 20px 15px 35px;
		position: relative;
	}
	ul.helpTopics > li > .expand{
		position: absolute;
		left:5px;
		top:13px;
		font-size: 18px;
		border: 1px solid #aaa;
		color:#aaa;
		display:inline-block;
		width:20px;
		height:20px;
		border-radius: 10px;
		line-height: 19px;
		text-align: center;
		cursor:pointer;
	}
	ul.helpTopics > li > .expand:after{
		content: "\e629";
		font-family: 'iconset1';
	}
	ul.helpTopics > li .title{
		cursor:pointer;
	}
	ul.helpTopics > li.open > .expand:after{
		content: "\e628";
	}


	.noResultsArea{
		background-color:#f9f9f9;
		color:#b3b3b3;
		text-align: center;
		border-top:1px solid #ebebeb;
		border-bottom:1px solid #ebebeb;
		padding:40px;
	}
	.noResultsArea h1,
	.noResultsArea h2,
	.noResultsArea h3,
	.noResultsArea h4{
		color:#b3b3b3;
	}

        .noResultsAreaTrans{
                background-color: transparent;
                color:#b3b3b3;
                text-align: center;
                padding:40px;
        }
        .noResultsAreaTrans h1,
        .noResultsAreaTrans h2,
        .noResultsAreaTrans h3,
        .noResultsAreaTrans h4{
                color:#b3b3b3;
        }

	.progress,
	.progress > .bar{
		display:block;
		border-radius: 3px;
		height: 10px;
	}
	.progress{
		overflow: hidden;
		background-color: #ebebeb;
		box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
		margin: 11px 0;
	}
	.progress > .bar{
		background-color: #cc0001;
	}


	.columnList{
		padding:0;
		margin:0;
		list-style: none;
		height: 490px;
		overflow:auto;
		background-color: #f9f9f9;
		border-radius: 3px;
		border:1px solid #e7e6e3;
	}
	.columnList > li{
		padding:5px 10px;
		margin: 0;
		list-style: none;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		cursor: move;
	}
	.columnList > li:hover{
		background-color:#efefef;
	}

	.columnList > li.ui-sortable-helper{
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		background-color: #fffae5;
	}
	.columnList > li.placeholder{
		box-shadow: inset 1px 2px 3px rgba(0,0,0,0.3);
		background-color: #eee;
	}
	.columnList > li.state-highlight{
		background-color: #fffae5;
	}



	ul.listOfOptions{
		padding:0;
		margin:0;
	}
	ul.listOfOptions li{
		list-style:none;
		border-bottom:1px solid #eee;
		padding:4px 15px 4px 15px;
		white-space:nowrap;
		line-height:26px;
	}
    ul.listOfOptions > a > li.selected{
		color:inherit;
        background-color: #feda46;
		text-decoration: underline;
	}
	ul.listOfOptions.interactive li > a{
		color:inherit;
		text-decoration: none;
	}
	ul.listOfOptions li.last,
	ul.listOfOptions li:last-child{
		border:0;
	}

	ul.listOfOptions.interactive li:hover{
		color:#333;
		background-color: #feda46;
	}



/*
 * evDialog
 * --------
 * used by <ev:dialog /> and respective JS Files
 *
 */
	.evDialog{
		top:0;
		right:0;
		bottom:0;
		left:0;
		z-index: 999;
		position: fixed;
		padding:40px 0;
		text-align: center;
		overflow: auto;
	}
	.evDialogHelper{
		display:inline-block;
		height:100%;
		width:1px;
		background-color: transparent;
		vertical-align: middle;
		margin-right: -10px;
	}
	.evDialog .evDialogWindow{
		background-color: #fff;
		z-index:2;
		box-shadow: 0 0 40px rgba(0,0,0,0.6);
		margin:0 auto auto auto;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		min-height: 180px;
		width: 100%;
	}
	.evDialogWindow > .header{
		display: table;
		border-bottom: 1px solid #eee;
		width:100%;
	}
	.evDialogWindow > .header > .headerIcon,
	.evDialogWindow > .header > .headerTitle{
		white-space: nowrap;
		display: table-cell;
		vertical-align: middle;
		height:40px;
	}
	.evDialogWindow > .header > .headerTitle .label{
		margin:0;
		margin-left:5px;
	}
	.evDialogWindow > .header > .headerIcon{
		width:40px;
		text-align:center;
	}
	.evDialogWindow > .content{
		position: relative;
		z-index: 1;
		min-height: 140px;
	}
	.evDialogWindow > .footer{
		padding: 10px;
		display: block;
		border-top:1px solid #eee;
		text-align: center;
		white-space: nowrap;
	}
	.evDialogWindow > .footer > .evButton{
		margin: 0 5px;
	}
	.evDialogWindow > .contentCover{
		background-color: #ffcc00;
		position: absolute;
		left: 0;
		top:0;
		right:0;
		bottom:0;
		text-align: center;
		z-index: 2;
		padding: 40px 0;
	}
	.evDialogWindow > .contentCover > .iconContainer{
		display: block;
		height:32px;
		text-align: center;
		position: absolute;
		width: 32px;
		top:50%;
		margin-top: -16px;
		left:50%;
		margin-left:-16px;
	}
	.evDialogWindow > .closeIcon{
		position: absolute;
		right:10px;
		top:10px;
		z-index: 3;
	}

	.evDialog.evDialogModal{
		background-color:rgba(0,0,0,0.7);
	}

/*
 * evContentCover
 * derived from evDialog's content cover
 */
	.evContentCover{
		background-color: #fff;
		position: absolute;
		left: 0;
		top:0;
		bottom:0;
		right:0;
		opacity:0.9;
		filter:alpha(opacity=90);
		text-align: center;
		z-index: 2;
	}
	.evContentCover .statusHelper{
		position: relative;
		display: inline-block;
		width: 1px;
		height: 100%;
		vertical-align: middle;
	}

/*
	Experimental dialog blur
*/
	.evDialogBlur,
	#evPageMenu.evDialogBlur > div,
	.evMenubar.evDialogBlur > div{
		/*filter: blur(2px) grayscale(0.5);
		-webkit-filter: blur(2px) grayscale(0.5);
		-moz-filter: blur(2px) grayscale(0.5);
		-ms-filter: blur(2px) grayscale(0.5);*/
	}
	#evPageMenu.evDialogBlur,
	.evMenubar.evDialogBlur{
		/* filter: none;
		-webkit-filter: none;
		-moz-filter: none;
		-ms-filter: none; */
	}
	.evMenubar.evDialogBlur{
		/* box-shadow: 0 0 5px 2px #38333f; */
	}
	body.evDialogOpen{
		overflow: hidden;
	}


	ul.notifications{
		padding:0;
		margin:0;
	}
	ul.notifications button{
		display: block;
		background: transparent;
		border: 0;
		width:100%;
		text-align: left;
		padding:10px 60px 10px 10px;
		position: relative;
		color: inherit;
		height: 39px;
	}
	ul.notifications > li{
		padding:0;
		margin:0;
		list-style: none;
		display: block;
		line-height: 18px;
	}
	ul.notifications > li > a,
        ul.notifications > li > span{
		display: block;
		color: inherit;
		padding: 10px;
		text-decoration: none;
		position: relative;
		padding-right:60px;
	}

        ul.notifications > li > span:hover {
			    width: 100%;
                background: #FFF;
                color: inherit;
         }
	ul.notifications > li > a > .label{
		white-space: normal;
		display: inline;
	}
	ul.notifications > li > a > .counter,
	ul.notifications button > .counter{
		position: absolute;
		display:inline-block;
		border-radius: 3px;
		background-color: rgba(0,0,0,0.1);
		padding:4px 10px;
		line-height:normal;
		right:10px;
		top:9px;
	}

	ul.inline,
	ul.inline li{
		padding:0;
		margin: 0;
		list-style: none;
		display: inline;
	}
	ul.inline li{
		margin-left: 5px;
		padding-right:5px;
		border-right:1px dotted #aaa;
	}
	ul.inline li.first{
		margin: 0;
	}
	ul.inline li.last{
		padding-right: 0;
		border: 0;
	}
	ul.inline li a{
		color:inherit;
		white-space: nowrap;
	}

	.smallest{
		font-size: 10px;
		line-height: 14px;
	}

	.arrowListHeader{
		margin-bottom: 5px;
	}
	ul.arrowList{
		padding: 0;
		margin: 0;
		font-size: 11px;
	}
	ul.arrowList > li{
		padding: 0;
		margin: 0;
		list-style: none;
		line-height:15px;
	}
	ul.arrowList > li > a{
		color:inherit;
		padding-left:10px;
		background-image: url("../images/icons/arrow.248ae94961cd.gif");
		background-repeat: no-repeat;
		background-position: left 3px;
	}

	table.fieldCodes tr{
		cursor: pointer;
		cursor: hand;
	}
	table.fieldCodes tbody tr:hover{
		color:#333;
		background-color: #feda46;
	}
	table.fieldCodes tbody td{
		height: auto;
	}

/* Useful */

        .break-word {
               /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
               -ms-word-break: break-all;
               word-break: break-all;

               /* Non standard for webkit */
               word-break: break-word;
        }

/* CSS Tooltip */

        /* Base styles for the element that has a tooltip */
        [data-tooltip],
        .tooltip {
                position: relative;
                cursor: pointer;
        }

        /* Base styles for the entire tooltip */
        [data-tooltip]:before,
        [data-tooltip]:after,
        .tooltip:before,
        .tooltip:after {
                position: absolute;
                visibility: hidden;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: .8;
                transition: opacity .3s ease-in-out;
                -moz-transition: opacity .3s ease-in-out;
                -webkit-transition: opacity .3s ease-in-out;
                -o-transition: opacity .3s ease-in-out;
                pointer-events: none;
        }

        /* Show the entire tooltip on hover and focus */
        [data-tooltip]:hover:before,
        [data-tooltip]:hover:after,
        [data-tooltip]:focus:before,
        [data-tooltip]:focus:after,
        .tooltip:hover:before,
        .tooltip:hover:after,
        .tooltip:focus:before,
        .tooltip:focus:after {
                visibility: visible;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
                opacity: .95;
        }

        /* Base styles for the tooltip's directional arrow */
        .tooltip:before,
        [data-tooltip]:before {
                z-index: 1001;
                border: 6px solid transparent;
                background: transparent;
                content: "";
        }

        /* Base styles for the tooltip's content area */
        .tooltip:after,
        [data-tooltip]:after {
                z-index: 1000;
                padding: 8px;
                width: auto;
                background-color: #000;
                background-color: hsla(0, 0%, 20%, 0.9);
                color: #fff;
                content: attr(data-tooltip);
                font-family: "Delivery", Helvetica, sans-serif;
                font-size: 12px;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -webkit-font-smoothing: antialiased !important;
                line-height: 1.2;
        }

        /* Directions */
        /* Top (default) */
        [data-tooltip]:before,
        [data-tooltip]:after,
        .tooltip:before,
        .tooltip:after,
        .tooltip-top:before,
        .tooltip-top:after {
                bottom: 100%;
                left: 50%;
        }

        [data-tooltip]:before,
        .tooltip:before,
        .tooltip-top:before {
                margin-left: -6px;
                margin-bottom: -12px;
                border-top-color: #000;
                border-top-color: hsla(0, 0%, 20%, 0.9);
        }

        /* Horizontally align top/bottom tooltips */
        [data-tooltip]:after,
        .tooltip:after,
        .tooltip-top:after {
                margin-left: -80px;
        }

        /* Left */
        .tooltip-left:before,
        .tooltip-left:after {
                right: 100%;
                bottom: 50%;
                left: auto;
        }

        .tooltip-left:before {
                margin-left: 0;
                margin-right: -12px;
                margin-bottom: 0;
                border-top-color: transparent;
                border-left-color: #000;
                border-left-color: hsla(0, 0%, 20%, 0.9);
        }

        /* Bottom */
        .tooltip-bottom:before,
        .tooltip-bottom:after {
                top: 100%;
                bottom: auto;
                left: 50%;
        }

        .tooltip-bottom:before {
                margin-top: -12px;
                margin-bottom: 0;
                border-top-color: transparent;
                border-bottom-color: #000;
                border-bottom-color: hsla(0, 0%, 20%, 0.9);
        }

        /* Right */
        .tooltip-right:before,
        .tooltip-right:after {
                bottom: 50%;
                left: 100%;
        }

        .tooltip-right:before {
                margin-bottom: 0;
                margin-left: -12px;
                border-top-color: transparent;
                border-right-color: #000;
                border-right-color: hsla(0, 0%, 20%, 0.9);
        }

        /* Move directional arrows down a bit for left/right tooltips */
        .tooltip-left:before,
        .tooltip-right:before {
                top: 8px;
        }

        /* Vertically center tooltip content for left/right tooltips */
        .tooltip-left:after,
        .tooltip-right:after {
                margin-left: 0;
                margin-bottom: -16px;
        }

.mandatoryPaymentLogo {
	float: right;
	max-width: 100px;
	margin: 1em;
}

.textfield.readonlyGrid1of2 {
	width: 250px;
}

#mybillLogo {
	max-height: 20px;
	float:right;
}

 /*
    CSS for mobile elements that are hidden on regular screens
*/
.showOnMobile, #mobileMenuLinks, .showOnMobileBlock {
    display: none !important;
}

.loginMessage {
	padding-top: 20px;
}

/*
	RBNI Modal renders too low down on the page, we have to make a correction
*/
.rbni_data_popup {
	margin-top: -200px !important;
}

.absoluteBottomRight {
	position: absolute;
	bottom: 50px;
	right: 15px;
}

.message-icon,
.message-subject {
    display: inline-block;
    vertical-align: middle;
	padding-bottom: 0;
}

.message-subject {
    margin-left: 10px; /* Adds space between the icon and the text */
}