/**
"Classic" QuickBase look and feel.
Only globally-relevant styles belong here.
**/

/* basic style elements used by all */
@import url("../common.css");

/* Brand header & footer and Menu bars that appear on every page */
@import url("nav.css");

/* Styles for standard dialogs/templates */
@import url("dialogs.css");

/* Styles for buttons/controls/form elements */
@import url("widgets.css");

/* Font stacks, visual styling, etc for UXV2 */
@import url("fontStacks.css");

/* helps see when there's a missing images; shows a placeholder image */
.TableGridSection .Icon,
.Contents .Icon
{
     background-image: url("images/icons/placeholder-graphic.png");
}

/* Icon elements used in more than one place */
.Icon.Plus {
    background: url(../../../i/plus.gif) no-repeat;
    display: inline-block;
    margin-top: 2px;
    padding: 11px 0 0 11px;
}
.Icon.Minus {
    background: url(../../../i/minus.gif) no-repeat;
    display: inline-block;
    margin-top: 2px;
    padding: 11px 0 0 11px;
}


.Icon.AJAXLoading {
    display: inline-block;
    vertical-align: middle;
    width: 32px !important;
    height: 32px !important;
    margin: 5px;
    background: url("images/loading.gif") no-repeat center center;
}


.Debug, .Debug a {
    color: orange;
    font-style: italic;
}

/*
jQuery UI theme overrides
*/
.ui-tabs {
    padding: 0;
}
.ui-tabs .ui-tabs-nav {
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left: none;
    border-right: none;
    border-top: none;
}


/***
Custom UXV2 style for jQuery UI tabs (.ui-tabs)
To use, your .ui-tabs container should also have the class .ui-tabs-uxv2
this only does anything in UXV2
***/

body.UXV2 .ui-tabs.ui-tabs-uxv2 {
    border: none;
}

body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-panel {
    padding: 0;
    margin: 0;
}

body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav {
    -moz-border-radius: 0;
    border-radius: 0;
    background: transparent;
    padding: 1em 0;
    margin: 0;
}

body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li {
    border-radius: 0;
    float: none;
    display: inline-block;
    *display: inline; zoom: 1;
    vertical-align: bottom;
    margin-right: -1px;
    background: #f5f7f9;
    border: 1px solid #eee;
}
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-selected,
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-active{
    z-index: 1;
    background: white;
    border: 1px solid #bbb;
}
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li:hover {
    z-index: 2;
    border: 1px solid #ccc;
    background: #f0f3f6;
}
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-selected:hover,
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-active:hover{
    background: white;
}
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li a {
    padding: 0.6em 1em;
}
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-selected,
body.UXV2 .ui-tabs.ui-tabs-uxv2 .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 1px;
    padding-bottom: 0;
}

body.UXV2 .ui-widget-header {
    border: 0;
}

body.UXV2 .QB.Dialog {
    border: none;
    box-shadow: 0 0 30px 0px rgba(0, 0, 0, .2);
    border-radius: 5px;
    padding: 0em !important;
}
body.UXV2 .ui-dialog .ui-dialog-buttonpane {
    background: none;
    padding: 0.3em 1em .5em 1em;
}

body.UXV2 .ui-dialog-titlebar.ui-corner-all {
    -moz-border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
    background: #74489d;
    color: White;
    font-size: 17px;
    font-family: 'Gibson-Regular', Helvetica, Arial, Sans-Serif;
    font-weight: normal;
    padding: 12px 16px;
}

body.UXV2 .ui-dialog-titlebar .ui-state-hover, 
body.UXV2 .ui-dialog-titlebar .ui-widget-content .ui-state-hover,
body.UXV2 .ui-dialog-titlebar .ui-widget-header .ui-state-hover,
body.UXV2 .ui-dialog-titlebar .ui-state-focus, 
body.UXV2 .ui-dialog-titlebar .ui-widget-content .ui-state-focus, 
body.UXV2 .ui-dialog-titlebar .ui-widget-header .ui-state-focus {
    border: 0;
    font-weight: normal;
    color: #212121;
    }


body.UXV2 .ui-dialog .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
    background-image: url("images/icons/16x16_close.png");
    background-position: -2px;
    padding: 0px !important;
    right: 3px;
    position: absolute;
    height: 10px;
    margin-top: -3px;
    display: inline-block;
}

body.UXV2 .ui-dialog .ui-dialog-titlebar-close:hover {
    padding:1px !important;
    background: none !important;
    border: none !important;
}

/*
 general toolbar & icon styles
*/
.Toolbar {
    border-bottom: none;

    border: 1px solid #AAA;
    border-bottom: none;

    padding: 6px;
}
.Toolbar .Separator {
    margin: 0;
    height: 1.5em;
    border-right: 1px solid #aaa;
    display: inline-block;
    zoom: 1; /*IE7*/
}
.Toolbar .Separator,
.Toolbar .Action,
.Toolbar button,
.Toolbar .ui-button,
.Toolbar .MenuTrigger
{
    vertical-align: middle;
    margin-right: 6px;
}
.Toolbar button,
.Toolbar .ui-button {
    margin-top: 0;
    margin-bottom: 0;
}

.Toolbar  .Icon,
.AutoTip  .Icon,
#tabContentContainer span.Icon,
.Contents  span.Icon
{
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin-right: 3px;
}

#tabContentContainer .DraggableHandle .Icon,
.DraggableHandle .Icon 
{
    border: 1px solid #CCC;
    border-top-width: 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -12px;
    padding: 0 4px 2px 4px;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -ms-box-shadow: 0 0 1px rgba(0, 0, 0, .4);
    box-shadow: 0 0 1px rgba(0, 0, 0, .4);
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
}

.IconOnly
{
    text-indent: -9999px;
	width: 16px;
	position: relative;
}

.IconOnly .Icon 
{
    display: block;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 50%;
	margin-left: -8px;
	background-repeat: no-repeat;
	background-position: center center;
	width: 16px;
	height: 16px;
}

.DrillDown {
    background-image: url("images/icons/drilldown.png");
    display: inline-block;
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin-right:2px;
    vertical-align: middle
}

.Icon.App {
    background-image: url("images/icons/app16.png");
}
.Icon.Placeholder {
    background-image: url("images/icons/broken-icon.png");
}
.Icon.PersonalSettings {
    background-image: url("images/icons/personal-settings.png");
}
.Icon.DownArrowWhite {
    background-image: url("images/icons/arrow-white-down.png");
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.Icon.Disabled {
    background-image: url("images/icons/disabled.png");
}
.Icon.Add {
    background-image: url("images/icons/add.png");
}
.Icon.Enable {
    background-image: url("images/icons/accept.png");
}
.Icon.Delete {
    background-image: url("images/icons/delete.png");
}
.Icon.Copy {
    background-image: url("images/icons/document-copy.png");
}
.Icon.CreateNewDashFromOld {
     background-image: url("images/icons/convert.png");
}
.Icon.Preview {
    background-image: url("images/icons/preview.png");
}
.Icon.Move {
    background-image: url("images/icons/movetable.png");
}
.Icon.DownArrow {
    background-image: url("images/icons/down_arrow.gif");
}

.Icon.AdvancedOptions {
    background: transparent url("images/icons/advanced-options.png") center center no-repeat;
}

.Icon.NoAccess {
    background-image: url("images/icons/noAccess.png");
}

/* Email Icons */
.Icon.Email.NotificationV2, .Icon.Email.Custom {
    background-image: url("images/icons/wrench.png");
}
.Icon.Email.Notification {
    background-image: url("images/icons/notification.png");
}
.Icon.Email.Notification.NotSent, .Icon.Email.Custom.NotSent {
    background-image: url("images/icons/alert.png");
}
.Icon.Email.Reminder {
    background-image: url("images/icons/clock.png");
}
.Icon.Email.Subscription {
    background-image: url("images/icons/calendar-blue.png");
}

/* Field Icons */
.Icon.KeyField {
    background-image: url("images/icons/key.png");
}

.Icon.RefreshKeyField {
    background-image: url("images/icons/RefreshKey.png");
}

.Icon.DefaultSort {
    background-image: url("images/icons/sort.png");
}
.Icon.Checkbox {
    background-image: url("images/icons/checkbox.png")
}

.Icon.Number {
    background-image: url("images/icons/number.png")
}

.Icon.Text {
    background-image: url("images/icons/text.png")
}

.Icon.Currency {
    background-image: url("images/icons/currency.png")
}

.Icon.Date {
    background-image: url("images/icons/date.png")
}

.Icon.Date-time {
    background-image: url("images/icons/date-time.png")
}

.Icon.Delete {
    background-image: url("images/icons/delete.png")
}

.Icon.Document {
    background-image: url("images/icons/document.png")
}

.Icon.Duration {
    background-image: url("images/icons/duration.png")
}

.Icon.Email {
    background-image: url("images/icons/email.png")
}

.Icon.Exclamation {
    background-image: url("images/icons/exclamation.png")
}

.Icon.Formula-checkbox {
    background-image: url("images/icons/formula-checkbox.png")
}

.Icon.Formula-currency {
    background-image: url("images/icons/formula-currency.png")
}

.Icon.Formula-date {
    background-image: url("images/icons/formula-date.png")
}

.Icon.Formula-date-time {
    background-image: url("images/icons/formula-date-time.png")
}

.Icon.Formula-duration {
    background-image: url("images/icons/formula-duration.png")
}

.Icon.Formula-email {
    background-image: url("images/icons/formula-email.png")
}

.Icon.Formula-number {
    background-image: url("images/icons/formula-number.png")
}

.Icon.Formula-percent {
    background-image: url("images/icons/formula-percent.png")
}

.Icon.Formula-phone-number {
    background-image: url("images/icons/formula-phone-number.png")
}

.Icon.Formula-rating {
    background-image: url("images/icons/formula-rating.png")
}

.Icon.Formula-text {
    background-image: url("images/icons/formula-text.png")
}

.Icon.Formula-rich-text {
    background-image: url("images/icons/formula-rich-text.png")
}

.Icon.Formula-time {
    background-image: url("images/icons/formula-time.png")
}

.Icon.Formula-url {
    background-image: url("images/icons/formula-url.png")
}

.Icon.Formula-user-list {
    background-image: url("images/icons/formula-user-list.png")
}


.Icon.Formula-user {
    background-image: url("images/icons/formula-user.png")
}

.Icon.Formula-work-date {
    background-image: url("images/icons/formula-work-date.png")
}

.Icon.I-cal {
    background-image: url("images/icons/i-cal.png")
}

.Icon.Link {
    background-image: url("images/icons/link.png")
}

.Icon.Information {
    background-image: url("images/icons/information.png")
}

.Icon.Number {
    background-image: url("images/icons/number.png")
}

.Icon.Number-percent {
    background-image: url("images/icons/number-percent.png")
}


.Icon.Phone-number {
    background-image: url("images/icons/phone-number.png")
}

.Icon.Predecessor {
    background-image: url("images/icons/predecessor.png")
}

.Icon.Rating {
    background-image: url("images/icons/rating.png")
}
.Icon.Record-ID {
    background-image: url("images/icons/record-id.png")
}

.Icon.Relationship {
    background-image: url("images/icons/relationship.png")
}

.Icon.RelManyToOne {
    background-image: url("images/icons/relationship-many-to-one.png")
}
.Icon.RelOneToMany {
    background-image: url("images/icons/relationship-one-to-many.png")
}

.Icon.Report-link {
    background-image: url("images/icons/report-link.png")
}

.Icon.Required {
    background-image: url("images/icons/required.png")
}

.Icon.Sort {
    background-image: url("images/icons/sort.png")
}
.Icon.Text {
    background-image: url("images/icons/text.png")
}

.Icon.Text-multi-choice {
    background-image: url("images/icons/text-multi-choice.png")
}

.Icon.Text-multiline {
    background-image: url("images/icons/text-multiline.png")
}

.Icon.Rich-text {
    background-image: url("images/icons/rich-text.png")
}

.Icon.Time {
    background-image: url("images/icons/time.png")
}

.Icon.User {
    background-image: url("images/icons/user.png")
}

.Icon.User-list {
    background-image: url("images/icons/user-list.png")
}

.Icon.Vcard {
    background-image: url("images/icons/vcard.png")
}

.Icon.Work-date {
    background-image: url("images/icons/work-date.png")
}

.Icon.Address {
    background-image: url("images/icons/fieldtype_address.png")
}

.Icon.Composite {
    background-image: url("images/icons/composite.png")
}

.Icon.SunsettingFeature {
    background-image: url("images/icons/SunsettingFeature.png")
}

.Icon.Role {
    background-image: url("images/icons/Role.png")
}

.Icon.DefaultRole {
    background-image: url("./images/icons/DefaultRole.png");
    background-position: top left !important;
}

.Icon.Role-Tab {
    background-image: url("images/icons/roles_tab.png")
}

.Icon.Variable {
    background-image: url("images/icons/variables.png")
}

.Icon.Table {
    background-image: url("images/icons/Table-Report.png")
} 

.Icon.Video{
    background-image: url('images/icons/play_video_80x50.png');
    display: inline-block;
    height: 50px;
    width: 80px;
}

.Icon.PageNext{
    background-image: url('images/icons/page_next.png');
    display: inline-block;
    height: 20px;
    width: 20px;
}
.Icon.PageBack{
    background-image: url('images/icons/page_back.png');
    display: inline-block;
    height: 20px;
    width: 20px;
}

.Icon.Draggable {
    background-image: url(images/icons/Drag.png);
}

/*class for customized jqgrid headers' icon */
.JqGridHeaderIcon {
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: .5em;
}

/* style placeholder text ; these cannot be combined becaues IE8 chokes and dies on the FF selector*/
input.placeholder, textarea.placeholder { color: #aaa !important; } /*IE polyfill*/
input:-moz-placeholder, textarea:-moz-placeholder { color: #aaa !important; } /*FF*/

table.ui-jqgrid-btable td.AttentionCell
{
    border-left: 3px solid #FEC82A;
    padding-left: 4px;
}



.Icon.TextPageType{
    background-image: url('images/icons/textPageType.png');
}

.Icon.DashboardAdvancedPageType{
    background-image: url('images/icons/advDashboardPageType.png');
}

.Icon.DashboardClassicPageType,
.Icon.DBPage{
    background-image: url('images/icons/dashboardPageType.png');
}

.Icon.RichTextPageType{
    background-image: url('images/icons/richTextPageType.png');
}

.Icon.DefaultHomePage{
    background-image: url('images/icons/defaultHomepage.png');
}

div.fhelpTip  {
    vertical-align:top;
    width:16px;
    height:16px;
    background-image:url('images/icons/info_icon.png');
    background-repeat:no-repeat;
    display:inline-block;
}
    
.Icon.BlueCaret{
    background-image: url("images/icons/Caret_blue.png");
    height: 12px;
    width: 12px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    vertical-align: middle;
    margin: 0 0 2px 3px;
}

.Icon.MenuSearch {
    background-image: url("images/icons/icon_menu_search.png");
}

.IconStrip.Menu .Icon.MenuSearch {
    display: inline-block;
	position: absolute;
	left: 4px;
	top: 50%;
	margin-top: -8px;
	margin-right: 0;
	background-position: center center;
}

.Icon.Export 
{
    background-image: url("/i/icons/16/document-excel-csv.png" )
}

.DisabledIcon {
    opacity: 0.4;
    filter:alpha(opacity=40); /*IE7,8*/
    cursor: default;
}


/* Add the .UserInput class to a form element (input, textarea, select)
to have it nicely styled in the same manner as UXV2 forms' inputs are */

body.UXV2 .UserInput {
    border-radius: 3px;
    border: 1px solid #ccc;
    /* Inset box shadow / image for IE */
    -webkit-box-shadow: inset 1px 2px 3px rgba(0,0,0,.1);
    box-shadow: inset 1px 2px 3px rgba(0,0,0,.1);
}
body.UXV2 .UserInput.WithPadding {
    padding: 0.5em 0.5em .4em .5em;
}

body.UXV2 .UserInput.FullSize {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*QBE010116 - box-shadow is properly supported in IE9+*/
body.IE8.UXV2 .UserInput {
    /* Inset box shadow / image for IE */
    box-shadow: none;
    background-image: url("./images/input-field-bg-innershadow.png");
    background-repeat: repeat-x;
    background-position: top left; 
}

body.UXV2 #workflowEditTable table:not(.qb-qb-when) span.andWhen {
    position: absolute;
    margin-left: 109px;
    padding-top: 6px;
    font-weight: normal;
}

body.UXV2 #workflowEditTable table:not(.qb-qb-when) span#whenTableLabel {
    margin-left: 78px;
}

body.UXV2 #workflowEditTable table:not(.qb-qb-when) span.andWord {
    font-weight: normal;
}

body.UXV2 #workflowEditTable table:not(.qb-qb-when) tr#tfsSec td.rightcol {
    padding-top: 40px;
}

body.UXV2 #workflowEditTable .AdvancedMode.criteriaSet tr.origwrapper > td { 
       padding: 8px;
}

body.UXV2 #workflowEditTable td[id*='theDateCell_'] {
    padding-left: 16px;
}

/* WorkflowEdit page 'when' input field styling */
body.UXV2 #workflowEditTable .AdvancedMode.criteriaSet select,
body.UXV2 #workflowEditTable .AdvancedMode.criteriaSet input,
body.UXV2 #workflowEditTable .AdvancedMode.criteriaSet textarea {
    border-radius: 3px;
    border: 1px solid #ccc;
    /* Inset box shadow / image for IE */
    -webkit-box-shadow: inset 1px 2px 3px rgba(0,0,0,.1);
    box-shadow: inset 1px 2px 3px rgba(0,0,0,.1);
    padding: 0.4em 0.5em;
}
body.UXV2 #workflowEditTable .AdvancedMode.hybridStyle.criteriaSet select,
body.UXV2 #workflowEditTable .AdvancedMode.hybridStyle.criteriaSet input,
body.UXV2 #workflowEditTable .AdvancedMode.hybridStyle.criteriaSet textarea {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

/* Fix for vertical alignment issue of text in react-select input box */
body.UXV2 #workflowEditTable .AdvancedMode.hybridStyle.criteriaSet .Select-input input,
body.UXV2 #workflowEditTable .AdvancedMode.criteriaSet .Select-input input {
    padding: 8px 0 12px;
}

/*QBE010116 - box-shadow is properly supported in IE9+*/
body.IE8.UXV2 #workflowEditTable .AdvancedMode.criteriaSet select,
body.IE8.UXV2 #workflowEditTable .AdvancedMode.criteriaSet input,
body.IE8.UXV2 #workflowEditTable .AdvancedMode.criteriaSet textarea {
    /* Inset box shadow / image for IE */
    box-shadow: none;
    background-image: url("./images/input-field-bg-innershadow.png");
    background-repeat: repeat-x;
    background-position: top left; 
}


/***********************************/
/* Menus that appear on every page */
/***********************************/

/*
Customization of jquery.qbmenu.css
*/

.Menu {
	background-color: White;
	padding-top: 10px;
	padding-bottom: 10px;
    border: none;
	-webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    border-radius: 2px;
}

.PopMenu.Menu table {
    padding: 5px 0px;
    margin: 0px;
    font-size: 13px;
}

.Menu li {
	padding-left: 14px;
	padding-right: 14px;
    font-size: 13px;
}

.IconStrip.Menu li {
    padding-left: 0px;
}

.Menu li:hover, 
.Menu li.Selected, 
.Menu li.Open {
	background-color: rgba(2, 184, 243, .08);
}

#signOutButton:hover {
    color: #365ebf;
    background-color: transparent;
}

.Menu li a {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    color: #333;
}

.Menu a:hover {
    color: #333;
}

.Menu li.StyleAsLink a {
    color: #427CD8;
}

.Menu li.StyleAsLink a:hover {
    color: #365ebf;
    background-color: transparent;
}

.Menu li.DisabledLink a 
{
    color: Gray;
    cursor: default;
}

.Menu li.StyleAsLink:hover {
    background-color: transparent;
}

.Menu li a.ui-button:hover {
    color: White;
}

.Menu li.NoHoverMenu:hover,
.Menu li.Unselectable:hover {
    background-color: transparent;
}

.Menu .UnselectableMenuText,
.Menu .UnselectableMenuText:hover {
    color: #999;
    cursor: default;
    background-color: transparent;
}


.Menu li.Title:hover {
    background-color: transparent;
}

.Menu .Header,
.Menu .Subheader,
.Menu .Title {
    color: black;
    background: none;
}

.IconStrip.Menu > li.Title {
    padding-left: 0;
}

.Menu.IconStrip li.Header:first-child {
    padding-top: 10px;
    background: white;
    border-bottom: 1px solid #CCC;
    padding-left: 10px;
    padding-bottom: 9px;
    margin-top: 0px !important; /* override any possible margin that would show the icon background image */
}

.Menu.IconStrip.WithHeader {
    padding-top: 0px;
    margin-top: 0px;
}

.Menu.WithSearchHeader {
    padding: 0;
}
.Menu.WithSearchHeader .Header,
.Menu.WithSearchHeader .Header:hover {
    position: relative;
    top: 0;
    padding: .8em;
    background: #eee;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px 4px 0px 0px;
    z-index: 100;
}
.Menu.WithSearchHeader .Header > .MenuTitle {
    margin-bottom: 0.6em;
    font-weight: normal;
    font-family: 'Gibson-SemiBold', Helvetica, Arial, Sans-Serif;
    font-size: 13px;
}
.Menu.WithSearchHeader .Header > .SearchWrapper {
    position: relative;
}
.Menu.WithSearchHeader .Header > .SearchWrapper > * {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.Menu.WithSearchHeader .Header > .SearchWrapper > .UserInput {
    display: block;
	width: 100%;
}
.Menu.WithSearchHeader .Header > .SearchWrapper > .UserInput.Empty {
    background-image: url("./images/icons/action_ico_search.png");
    background-repeat: no-repeat;
    background-position: 296px center;
}
.Menu.WithSearchHeader .Header > .SearchWrapper > .ClearInput {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("images/icons/clearsearch.png");
    cursor: pointer;
    /*center it in the right edge of the input box*/
    top: 50%;
    margin-top: -8px;
    right: 0.4em;
}


/*override another rule that added 1px of top/bottom margin */
#navRightMenus.MenuBar #favoritesMenu > .Header,
#navRightMenus.MenuBar #favoritesMenu > .AccordionPanel {
	margin: 0;
}
#navRightMenus.MenuBar #favoritesMenu > .Header {
	margin-bottom: -1px;
}


#favoritesMenu .AccordionPanel {
    margin: 0;
    padding:  0;
    border-top: 1px solid #3b80d9;
}

#favoritesMenu .AccordionPanel .Collapser {
    color: #1B99FF;
    font-weight: normal;
    margin: 0.75em;
    font-size: 13px;
}
#favoritesMenu .AccordionPanel.Collapsed .Collapser {
    cursor: pointer;
}

#favoritesMenu .AccordionPanel .SubHeading {
    padding: 0.25em 1em;
    margin-bottom: 0.75em;
    color: #333;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .15px;
    font-family: "Gibson-SemiBold", Helvetica, Arial, Sans-Serif;
}
#favoritesMenu .AccordionPanel .EmptyMessage {
    display: none;
    padding: 0 1em 1em 1em;
    white-space: normal;
}
#favoritesMenu .AccordionPanel .EmptyMessage > * {
    display: none;
}
#favoritesMenu .AccordionPanel .EmptyMessage .NoneMatchSearch {
    font-style: italic;
}
#favoritesMenu .AccordionPanel .ItemList {
    padding: 0 0 1em 0;
}
#favoritesMenu .AccordionPanel .Item,
.TablePicker .FilterTableItem {
    margin: 0;
    padding: 0.2em .6em;
    display: block;
}

#favoritesMenu .AccordionPanel .Item.DisplayNone,
.TablePicker .FilterTableItem.DisplayNone{
    display: none;
}

#favoritesMenu .AccordionPanel a.Item:hover,
.TablePicker li:hover {
    background: rgba(2, 184, 243, .08);
}

#favoritesMenu .AccordionPanel .Item > * {
    display: inline-block;
    vertical-align: top;
}
#favoritesMenu .AccordionPanel .Item > .Text {
    white-space: normal;
    max-width: 275px;
    line-height: 16px;
    position: relative;
    top: 3px;
}
#favoritesMenu .AccordionPanel .Item > .Text > .ItemName {
    vertical-align: baseline;
}
#favoritesMenu .AccordionPanel .Item > .Text > .TableName,
.SecondaryName {
    display: inline-block;
    color: #AAA;
    font-size: 0.85em;
    padding-left: 0.5em;
	max-width: 18em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

#favoritesMenu .AccordionPanel .Item > .Icon {
    width: 20px;
    height: 20px;
    margin-right: 0.25em;
}

#favoritesMenu .AccordionPanel  .ui-state-highlight {
    height: 30px;
}

/* When a fav is being moved, give it this class */
.FavMoving {
    opacity: 0.5;
    filter:alpha(opacity=50); /*IE7,8*/
}

.Icon.Favorite {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("images/icons/favorites_star_icon.png") no-repeat 0px 0px;
}
.Icon.Favorite:hover { background-position: 0px -20px; }
.Icon.Favorite.Dark { background-position: -20px 0px; }
.Icon.Favorite.Dark:hover { background-position: -20px -20px; }
.Icon.Favorite.Favorited { background-position: -40px 0px; }
.Icon.Favorite.Favorited:hover { background-position: -40px -20px; }
.Icon.Favorite.Unfavorited { background-position: -60px 0px; }
.Icon.Favorite.Unfavorited:hover { background-position: -60px -20px; }
.Icon.Favorite.Disabled { background-position: -80px 0px; }
.Icon.Favorite.Disabled:hover { background-position: -80px -20px; }

.Icon.Favorite.AnimationStar {
    position: absolute;
    z-index: 9999;
}

#favoritesMenu .AccordionPanel .Item > .Icon.Report-Table { background: url("images/icons/Table-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Summary { background: url("images/icons/Summary-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Timeline { background: url("images/icons/Timeline-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Grid-edit { background: url("images/icons/Grid-edit-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Calendar { background: url("images/icons/Calendar-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Map { background: url("images/icons/Map-report.png") no-repeat center center; }
#favoritesMenu .AccordionPanel .Item > .Icon.Report-Kanban { background: url("images/icons/Kanban-report.png") no-repeat center center; }

#favoritesMenu .AccordionPanel .Item > .Icon.Report-Chart { 
    background-image:url("images/icons/agf_chart_icons_sprite.png");
    background-repeat: no-repeat;
    height:16px;
    width:16px;
    display:inline-block;
    margin-right: 6px;
    margin-left: 2px;
}
/*Chart Types for all locations*/
.Report-Chart.waterfall,
.Chart-Report.waterfall, .AutoTip .waterfall.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.waterfall,
#reportListView .waterfall.Chart-Report,
.reportPickerIcon.waterfall,
.waterfall.Report .chartIcon, 
#basics .chart_type_icon .waterfall { background-position: 0px 0px;}
/*gauge*/
.Report-Chart.solidgauge,
.Chart-Report.solidgauge, .AutoTip .solidgauge.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.solidgauge,
#reportListView .solidgauge.Chart-Report,
.reportPickerIcon.solidgauge,
.solidgauge.Report .chartIcon, 
#basics .chart_type_icon .solidgauge { background-position:-18px 0px;}
/*bubble*/
.Report-Chart.bubble,
.Chart-Report.bubble, .AutoTip .bubble.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.bubble,
#reportListView .bubble.Chart-Report,
.reportPickerIcon.bubble,
.bubble.Report .chartIcon, 
#basics .chart_type_icon .bubble { background-position:-36px 0px;}
/*scatter*/
.Report-Chart.scatter,
.Chart-Report.scatter, .AutoTip .scatter.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.scatter,
#reportListView .scatter.Chart-Report,
.reportPickerIcon.scatter,
.scatter.Report .chartIcon, 
#basics .chart_type_icon .scatter { background-position:-54px 0px;}
/*funnel*/
.Report-Chart.funnel,
.Chart-Report.funnel, .AutoTip .funnel.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.funnel,
#reportListView .funnel.Chart-Report,
.reportPickerIcon.funnel,
.funnel.Report .chartIcon, 
#basics .chart_type_icon .funnel { background-position:-72px 0px;}
/*pie*/
.Report-Chart.pie,
.Chart-Report.pie, .AutoTip .pie.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.pie,
#reportListView .pie.Chart-Report,
.reportPickerIcon.pie,
.pie.Report .chartIcon,
#basics .chart_type_icon .new_chart, 
#basics .chart_type_icon .pie { background-position:-90px 0px;}
/*area*/
.Report-Chart.area,
.Chart-Report.area, .AutoTip .area.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.area,
#reportListView .area.Chart-Report,
.reportPickerIcon.area,
.area.Report .chartIcon, 
#basics .chart_type_icon .area { background-position:-108px 0px;}
/*line + bar*/
.Report-Chart.lbar,
.Chart-Report.lbar, .AutoTip .lbar.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.lbar,
#reportListView .lbar.Chart-Report,
.reportPickerIcon.lbar,
.lbar.Report .chartIcon, 
#basics .chart_type_icon .lbar { background-position:-126px 0px;}
/*line*/
.Report-Chart.lin,
.Chart-Report.lin, .AutoTip .lin.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.lin,
#reportListView .lin.Chart-Report,
.reportPickerIcon.lin,
.lin.Report .chartIcon, 
#basics .chart_type_icon .lin,
#basics .chart_type_icon .line { background-position:-144px 0px;}
/*horizontal stacked bar*/
.Report-Chart.hsbar,
.Chart-Report.hsbar, .AutoTip .hsbar.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.hsbar,
#reportListView .hsbar.Chart-Report,
.reportPickerIcon.hsbar,
.hsbar.Report .chartIcon, 
#basics .chart_type_icon .hsbar { background-position:-162px 0px;}
/*stacked bar*/
.Report-Chart.sbar,
.Chart-Report.sbar, .AutoTip .sbar.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.sbar,
#reportListView .sbar.Chart-Report,
.reportPickerIcon.sbar,
.sbar.Report .chartIcon, 
#basics .chart_type_icon .sbar { background-position:-180px 0px;}
/*horizontal bar*/
.Report-Chart.hbar,
.Chart-Report.hbar, .AutoTip .hbar.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.hbar,
#reportListView .hbar.Chart-Report,
.reportPickerIcon.hbar,
.hbar.Report .chartIcon, 
#basics .chart_type_icon .hbar { background-position:-198px 0px;}
/*bar*/
.Report-Chart.bar,
.Chart-Report.bar, .AutoTip .bar.Icon.Chart-Report,
.MatrixReportIcon.Chart-Report.bar,
#reportListView .bar.Chart-Report,
.reportPickerIcon.bar,
.bar.Report .chartIcon, 
#basics .chart_type_icon .bar { background-position:-216px 0px}


/*
To reuse the existing .TblIcon16 table icons, but on a 20px grid, we are forced
to put those icons inside a 20px container and position them absolutely
*/
#favoritesMenu .AccordionPanel .Item > .Icon.Table-Icon {
    position: relative;
    top: 1px;
}
#favoritesMenu .AccordionPanel .Item > .Icon.Table-Icon > .TblIcon16 {
    margin: 2px;
}
.Menu li.Header > a,
 #brandBarHeader .FirstItem .CustomBrandText {
    font-size: 21px;
}
 
.Menu li.Subheader > a, 
#brandBarHeader .LastItem .CustomBrandText {
    font-size: 14px;
    text-decoration: none;
}

.IconStrip.Menu > li.Title > span {
    padding-top: 5px;
    padding-left: 35px;
    padding-bottom: 5px;
}

.PopMenu.Menu .Separator,
.Menu .Separator,
.IconStrip.Menu .Separator {
    margin: 9px 0px;
    border-top: 1px solid #CCC;
    border-bottom: 0px;
    cursor: default !important;
}

.Menu li.Debug a {
    font-style: italic;
    color: orange;
}
.Menu li.Debug a:hover,
.Menu li.Debug:hover a {
    color: white;
}

.Menu.DropDownMenu li {
	padding: 0;
}

.Menu.DropDownMenu li a 
{
    color: #333;
    padding: 5px; 
}

.#searchMenu {
    padding: 1.818em 1.818em 2.182em 1.818em;
}


.Menu.qb-splitbutton-menu li {
    padding-top: 4px;
    padding-bottom: 4px;
}

.errorLabel { color:Red; }

/*PopMenu styles overridden for V2 */
.PopMenu
	{
	background-color:   #fff;
	padding:			0px;
	position:			absolute;
	z-index:			1500; /* This high to take precedence over HTMLArea's full screen mode */
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
    border: none;
    -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
    border-radius: 2px;
	}

.PopMenu li.Separator {
    border-bottom: 1px solid #CCC;
    margin: 0;
}
.PopMenu a
	{
	color:				#333;
	text-decoration:	none;
	padding:            9px 14px;
	display:			block;
	text-align:			left;
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	}

.PopMenu li {
    margin: 0;
    list-style: none;
}

.PopMenu li:hover, .PopMenu a:hover
	{
	background-color: rgba(2, 184, 243, .08);
	color: #333;
	}
	
.PopMenu div.hr {
    margin: 0px 0px;
}

.ActionSpinner 
{
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: bottom;
}


/*Responsive design for page bar - All but IE8. IE8 does not render media queries and plugins make it too slow as well.*/
/* We address the following element sizes as a part of this - 
   Page titles - All titles except for the last one shrink as the first step to responsivly accomodate data on screen
   Action Labels - Dropping off of action labels on action links in the page bar at 1000px of viewport size
   Leaf nodes - Leaf node gets truncated last of all in most cases unless its unconditionally long.
   Settings Mode dropdown - the text of the drop down gets truncated to a set max width.  */
   /* another hack to exclude IE8 -- looks like if you use @media all IE8 reads it in which we dont want, if you use @media IE9 screws itself up instead althou technically those 2 are supposed to be same.*/
@media (min-width: 0px) {
.PageNavBar .LeftColumn:not(.remixStyled) .Header .TitleGroup .FS-H1,
.PageNavBar .LeftColumn:not(.remixStyled) .Header .TitleGroup .FS-H2,
.PageNavBar .ResponsiveText {
    overflow: hidden;
    zoom: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Defaults for 1920px+ viewport sizes*/
.PageNavBar .Header .TitleGroup,
.PageNavBar .Header .TitleGroup div.FS-H1,
.PageNavBar .Header .TitleGroup div.FS-H2 {
	max-width: 555px;
}
/* Different handling for the leaf node title.*/
.PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
.PageNavBar .Header .TitleGroup:last-child div.FS-H1,
.PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	max-width: 675px;
}
/* Different handling for the tiles other than the leaf node title when Save as block is showing.*/
.PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
.PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	max-width: 555px;
}
/* Different handling for the leaf node title when Save as block is showing.*/
.PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
.PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
.PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	max-width: 555px;
}
    
/* Always Exclude the 1st in TitleGroup in Settings Mode ( this one is the drop down)*/
body.SettingsMode .PageNavBar .Header .TitleGroup:first-child div.FS-H2{
    max-width: 320px!important;
    min-width: auto!important;
}
body.SettingsMode .PageNavBar .ResponsiveText {
    max-width: 65px;
}
/* Always Exclude the save as report module*/
.PageNavBar .Header #saveAsReport.TitleGroup > *{
    max-width: 320px!important;
    min-width: auto!important;
}
}
@media (min-width: 800px) {
body.SettingsMode .PageNavBar .ResponsiveText {
    max-width: 90px;
}
}
@media (min-width: 900px) {
body.SettingsMode .PageNavBar .ResponsiveText {
    max-width: 250px;
}
}
@media (max-width: 1024px){
/* hide action labels - make an exception for More menu*/
    .PageNavBar .ActionLabel {
        display: none;
    }

    .PageNavBar .ActionLabel.Billing,
    .PageNavBar .ActionLabel.MoreLabel {
        display: inherit;
        margin-top: 3px;
    }

    /* Remove add button text - also shrink up the padding to make it look the size of action icons*/
    .PageNavBar .ButtonText {
        display: none;
    }
    
    #stdAddRecButton {
        padding: 0.25em .5em .25em .325em;
    }
    #stdAddRecButton {
        margin-right: .5em;
    }
}
@media (max-width: 1920px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	    max-width: 315px;
    }
    /* Different handling for the leaf node title.*/
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 715px;
    }
    /* Different handling for the tiles other than the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 315px;
    }
    /* Different handling for the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 540px;
    }
}
@media (max-width: 1600px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	    max-width: 315px;
    }
    /* Different handling for the leaf node title.*/
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 605px;
    }
    /* Different handling for the tiles other than the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 315px;
    }
    /* Different handling for the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 430px;
    }
}
@media (max-width: 1440px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	  max-width: 315px;
    }
    /* Different handling for the leaf node title.*/
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 525px;
    }
    /* Different handling for the tiles other than the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 300px;
    }
    /* Different handling for the leaf node title when Save as block is showing.*/
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 300px;
    }
}
@media (max-width: 1344px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	  max-width: 315px;
    }
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 455px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 285px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 285px;
    }
}
@media (max-width: 1280px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	  max-width: 315px;
    }
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 260px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 200px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 200px;
    }
}

@media (max-width: 1024px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	  max-width: 315px;
    }
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 140px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 210px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 210px;
    }
}

@media (max-width: 900px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	    max-width: 160px;
    }
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 65px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 160px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 160px;
    }
}

@media (max-width: 800px){
    .PageNavBar .Header .TitleGroup div.FS-H1,
    .PageNavBar .Header .TitleGroup div.FS-H2 {
	    max-width: 130px;
    }
    .PageNavBar .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 40px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div.FS-H2 {
	    max-width: 130px;
    }
    .PageNavBar.ReportChangeModActive .Header .TitleGroup div#headerDetailPageTitle.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H1,
    .PageNavBar.ReportChangeModActive .Header .TitleGroup:last-child div.FS-H2 {
	    max-width: 130px;
    }
}


/* At minimum resolution hide global bar labels*/
@media (max-width: 768px){
    .BrandBarButton .ButtonText {
        display:none;
    }
}

/* */
@media handheld {
   .BrandBarButton .ButtonText {
       display:none!important;
   } 
}


/* 
ClearContainer input has 
container (has width, borderbox)
   input (focus)
   a icon (elenent needed for click to clearl absolute overlay icon with search, waiting, clear icon) (displaynone if hidden)
*/
.ClearContainer { 
    display: inline-block;
    position: relative;
}

.ClearContainer .FullWidth {
     width: 100%;
}

.ClearContainer > * {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ClearContainer input {
    background-repeat: no-repeat;
    background-position:  right center;  
    margin: 0; 
}

/* place for clickable icon */
.ClearContainer .Icon {
    background-repeat: no-repeat;
    background-position:  center;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: .4em;
}

/* search icon not visible unless Empty input*/
.ClearContainer  .DoSearch { 
    background-image: none
}

/* search icon only when ibput is Empty*/
.ClearContainer  .DoSearch.Empty { 
    background-image: url('./images/icons/action_ico_search.png');
}

/*  for when a search is in progress icon */
.ClearContainer  .Searching {
    background-image: url('./images/loading.gif');
}

/* clear icon, anchor used to clear inputs value */
.ClearContainer .Clear.Icon 
{
    width: 16px;
    height: 16px;    
    background-image: url('./images/icons/clearsearch.png');
    cursor: pointer;    
}

.ClearContainer .DisplayNone {
    display: none !important;
}

#ui-datepicker-div { 
    z-index:9999 !important;
}

.helper-text 
{
    color: Gray;
	font-size: 90%;
}

.AdvancedCheck .helper-text 
{
    margin-left:15px;
}

/* ---- Harmony alert pattern ----------- */

/* Remove any browser-specific outlines*/
input[type="text"].Harmony.Warn:focus,
input[type="text"].Harmony.Error:focus
{
    outline: 0;
}

/* Harmony (yellow) warn pattern*/
/* Icon */
.Harmony.Icon.Warn {
    display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background: url("images/icons/icon_alert.png");
}
.Harmony.Icon.Warn-16 {
    display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	background: url("images/icons/icon-alert-16x16.png");
}
/* Yellow border on input field */
.Harmony.Alert.Warn 
{
    border: 1px solid #f2b835;
}
/* Remove any browser-specific outlines*/
.Harmony.Alert.Warn:focus
{
    outline: 0;
}


/* Harmony (red) error pattern */
/* Icon */
.Harmony.Alert.Icon.Error {
    display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background: url("images/icons/icon_alert_error.png");
}
/* Red border on input field */
input[type="text"].Harmony.Alert.Error
{
    border: 1px solid #a1070d;
}

label.Harmony.Alert.Error 
{
    color: #a1070d;
}

.limitsContainer {
    padding-bottom: 15px;
    display: inline-block;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

.limitsContainer.warn {
    border-bottom: 2px solid #f2b835;
}

.limitsContainer.block {
    border-bottom: 2px solid #d93b42;
}

.limitsContainer > span.icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
    display: inline-block;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.limitsContainer.warn span.icon {
    background: url(./images/icons/icon_alert.png);
}

.limitsContainer.block span.icon {
    background: url(./images/icons/icon_alert_error.png);
}

.limitsContainer.hidden {
    display: none;
}

/*  tabsContainer has margin-top:1em; .limitsContainer margin-top should be overriden to 0  */
#tabsContainer .limitsContainer {
    margin-top: 0;
}

/* ui-dialog-content has default padding: 0.5em 1em */
.ui-dialog-content .limitsContainer {       
    margin-bottom: 0;
}

/* .connectionStepContent has padding:20px; overriding setting by aceesing top container id(connectionSetupPages) */
#connectionSetupPages .limitsContainer {
     margin-top: 0;
}

#new-role-dialog > .roleLimits {
    margin-bottom: 15px;
}

/* Dialog Modal Separator Override*/
.ui-widget-content {
    border: 1px solid #ccc;
}

/* Override Bootstrap for "Testing As..." Component */
#testAsRoleBtn.btn-default:hover,
#testAsRoleBtn.btn-default:focus,
#testAsRoleBtn.btn-default:active,
#testAsRoleBtn.btn-default.active,
#testAsRoleBtn.open .dropdown-toggle.btn-default {
    background-color: #eeeeee;
}

#testAsRoleBtn .btn:active, #testAsRoleBtn .btn.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* Faux font weight override*/
.ui-widget-header {
    font-weight: normal;
}

select.hybridStyle {
    height: 34px !important;
    background-color: #FFFFFF;
    padding: 0px 8px !important;
    margin: 0 2px;
    border: solid 1px #b5b7b9 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
/* styles specific to IE select elements when using new item picker */
select.hybridStyle::-ms-expand {
    background-color: #FFFFFF;
    border:none;
    border-radius:3px;
    color: #b5b7b9;
}
input:not([type='file']).hybridStyle {
    height: 32px !important;
    background-color: #FFFFFF;
    padding: 0px 8px !important;
    border: solid 1px #b5b7b9 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}
input.hybridStyle::-ms-clear {
    display: none;
}
textarea.hybridStyle {
    border-radius: 3px !important;
    border: solid 1px #b5b7b9 !important;
    box-shadow: none !important;
}

.mobileBanner {
    background-color: #43bf57;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#showMobileAppLink {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: 3vh;
    font-weight: 400;
    color: #ffffff;
    border: 0;
    text-decoration: none;
    font-family:'NunitoSans-Regular', Helvetica, Arial, Sans-Serif;
}

.back-to-mobile-link-icon {
    background: url(./images/arrow_previous.svg);
    width: 50px;
    height: 50px;
    background-size: 3vh;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2vh;
}

.ui-button-icon-only .ui-icon
{
    left:unset;
}