html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	/*vertical-align:baseline;*/
	background:transparent;
	}

body {
	line-height:1;
	}

ol, ul {
	list-style:none;
	}

blockquote, q {
	quotes:none;
	}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
	}

/* remember to define focus styles! */
:focus {
	outline:solid 1px transparent;
	}

input, select, textarea, button {
    margin:0;
}


/* remember to highlight inserts somehow! */
ins {
	text-decoration:none;
	}

del {
	text-decoration:line-through;
	}

/* tables still need 'cellspacing="0"' in the markup */
table {
	/*border-collapse:collapse;*/
	border-spacing:0;
	}

:root{
    /* size palette */
    --ciaSize-xxsmall: 8px;
    --ciaSize-xsmall: 10px;
    --ciaSize-small: 12px;
    --ciaSize-medium: 14px;
    --ciaSize-default: 16px;
    --ciaSize-large: 32px;
    --ciaSize-xlarge: 64px;
    --ciaSize-xxlarge: 128px;

    --ciaHeight-small: 40px;
    --ciaHeight-default: 50px;
}



:root{
    /*
        Use the browser root element font unit (for most browsers it is 16px).
        This should allow us to better support zooming.
    */
    --ciaFontBaseUnit: 1rem;

    --ciaFontSize-xxsmall: calc(var(--ciaFontBaseUnit) * 0.5);  /* 8px */
    --ciaFontSize-xsmall: calc(var(--ciaFontBaseUnit) * 0.625); /* 10px */
    --ciaFontSize-small: calc(var(--ciaFontBaseUnit) * 0.75);   /* 12px */
    --ciaFontSize-default: calc(var(--ciaFontBaseUnit) * 0.875);/* 14px */
    --ciaFontSize-medium: calc(var(--ciaFontBaseUnit) * 1);     /* 16px */
    --ciaFontSize-large: calc(var(--ciaFontBaseUnit) * 1.125);  /* 18px */
    --ciaFontSize-xlarge: calc(var(--ciaFontBaseUnit) * 1.25);  /* 20px */
    --ciaFontSize-xxlarge: calc(var(--ciaFontBaseUnit) * 1.5);  /* 24px */
    --ciaFontSize-Xxxlarge: calc(var(--ciaFontBaseUnit) * 2);   /* 32px */

    --ciaFontWeight-thin: 200;
    --ciaFontWeight-default: 400;
    --ciaFontWeight-bold: 600;
    --ciaFontWeight-bolder: 800;
}

:root{
    --ciaHeightHeader: var(--ciaHeight-default);

    /*Inline sections*/
    --ciaHeightMinInlineSectionHeight: 300px;

    /* Attachment sizes */
    --ciaWidthFileUploadPopupContainer: 89vw;
    --ciaWidthMaxFileUploadPopupContainer: 980px;

    /* Attachment popup inner container sizes */
    --ciaWidthFileUploadPopupInnerContainer: 93vw;
    --ciaWidthMaxFileUploadPopupInnerContainer: 1000px;
}

:root{
    --ciaFontSizeLink: var(--ciaFontSize-default);
    --ciaFontSizeDropDownItem: var(--ciaFontSize-default);
    --ciaFontSizeHeading: var(--ciaFontSize-default);

    /* global header tokens */
    --ciaFontSizeFunctionSearch: var(--ciaFontSize-default);
    --ciaFontSizePageTitle: var(--ciaFontSize-default);

    /* main panel (main editable panel) heading tokens */
    --ciaFontSizeMainPanelHeading: var(--ciaFontSize-medium);
    --ciaFontSizeMainPanelHeadingGlyph: var(--ciaFontSize-xxlarge); /* 16px text is the equivalent of 24px for glyph*/

    /* normal panel (i.e. categories) heading tokens */
    --ciaFontSizePanelHeading: var(--ciaFontSizeHeading);
    --ciaFontTransformPanelHeading: none;
    --ciaFontWeightPanelHeading: var(--ciaFontWeight-bold);

    --ciaFontWeightStatus: var(--ciaFontWeight-bold);
}

/* ideally we will have as little exceptions as possible */
/* within the filters panel, headings are to be smaller */
.filterContent{
    --ciaFontSizeHeading: var(--ciaFontSize-small);

    /* panel heading */
    --ciaFontSizePanelHeading: var(--ciaFontSizeHeading);
    --ciaFontTransformPanelHeading: uppercase;
}

.statusField {
    font-weight: var(--ciaFontWeightStatus);
}


:root{
    /* Abstract colors css variables from theme-defined naming to functionality naming */
    --ciaColourHighlight: rgb(var(--ciaColourThemeHighlight3_RGB));
    --ciaColourHighlightHover: rgb(var(--ciaColourThemeHighlight3_RGB), 0.4);

    --ciaColourPrimary: var(--ciaColourThemePrimaryAction);

    /*-- COLOUR PRIMARY/SECONDARY TOKENS ----------------------------------------------------*/
    --ciaColourBackgroundPrimary: var(--ciaColourPrimary);
    --ciaColourTextPrimary: #000;
    --ciaColourBorderPrimary: var(--ciaColourPrimary);
    --ciaColourBackgroundSecondary: transparent;
    --ciaColourTextSecondary: #fff;
    --ciaColourBorderSecondary: var(--ciaColourPrimary);

    --ciaColourTextBody: var(--ciaColourTextPrimary);

    --ciaColourSelection: var(--ciaColourThemeMain4);

    /*-- COLOUR TEXT AND BACKGROUND TOKENS ----------------------------------------------------*/
    /*-- Workplace Header & Footer ---------------------------------------------------*/
    --ciaColourBackgroundHeader: var(--ciaColourThemeGlobalHeaderBg) ;
    --ciaColourBackgroundFooter: var(--ciaColourThemeGlobalFooterBg) ;
    --ciaColourBackgroundBanner: var(--ciaColourMainLightest) ;
    --ciaColourBackgroundSignaturePad: rgba(235, 237, 238, 0.9);

    --ciaColourBackgroundHighlight: var(--ciaColourHighlight) ;
    --ciaColourBackgroundHighlightHover: var(--ciaColourHighlightHover) ;

    /*-- Selection ---------------------------------------------------------------------*/
    --ciaColourBackgroundSelection: var(--ciaColourSelection);
    --ciaColourTextSelection: var(--ciaColourTextPrimary);


    /*-- Dropdown --------------------------------------------------------------------*/
    --ciaColourBackgroundHeaderDropdown: var(--ciaColourMainDarker); /* dropdowns displayed from global header */

    --ciaColourTextHeaderDropdown: var(--ciaColourGray);
    --ciaColourTextHeaderButton: var(--ciaColourThemeGlobalHeaderText);

    /*-- Forms Footer ----------------------------------------------------------------*/
    --ciaColourBackgroundFormsFooter: rgba(0,0,0,0.05);


    /*-- COLOUR TEXT TOKENS ----------------------------------------------------------*/
    --ciaColourTextFooter: var(--ciaColourThemeGlobalFooterFg);


    /*-- COLOUR BORDER TOKENS --------------------------------------------------------*/
    /*-- standard HTML elements colours ----------------------------------------------*/
    --ciaColourBorderTableCell: #e6e6e6;
    --ciaColourBorderHighlight: var(--ciaColourThemeHighlight1);

    --ciaColourTextSuccess: #394a1e;
    --ciaColourBackgroundSuccess: #e2ead1;
    --ciaColourTextFail: #a30022;
    --ciaColourBackgroundFail: #ffb3c3;
}

.roleLabel{
    --ciaColourTextHeaderDropdown:var(--ciaColourBlack);
}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.t1cloud.com/cianywhere/content/base/fonts/opensansregular.woff?v=12.0.176.0') format('woff');
}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: 600;
  src: url('https://cdn.t1cloud.com/cianywhere/content/base/fonts/opensanssemibold.woff?v=12.0.176.0') format('woff');
}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.t1cloud.com/cianywhere/content/base/fonts/opensansbold.woff?v=12.0.176.0') format('woff');
}

@font-face {
  font-family: 'iconGlyph';
  font-style: normal;
  font-weight:normal;
  src: url('https://cdn.t1cloud.com/cianywhere/content/base/fonts/cianywhere-regular.woff?v=12.0.176.0') format('woff');
}



html
{
    height:100%;
}

body
{
    margin:0 auto;
    padding:0;
    font-size:0.75em;
    color:var(--ciaColourTextBody);
    height:100%;
    min-height:500px;
    overflow-y:auto;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -ms-touch-action: none;
    background-size: cover;
    background-position: center;
}

body.fastPageLoad.maxScreen
{
    background: none;
}

body, body *
{
    font-family:Osans, Arial, Verdana, sans-serif;
}

body.hidePageHeader > #MainContainer > #GlobalHeader,
body.hidePageFooter > #MainContainer > #GlobalFooter {
    display: none;
}

.screenReader-text {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.screenReader-text:focus {
    color: var(--ciaColourBlack);
    background-color: var(--ciaColourWhite);
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto auto 1px;
}

#MainContainer {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.176.0');
}

.flipBlocker {
    overflow: hidden;
}

.flipBlocker:before {
    content:"";
    display:block;
    width:1024px;
    margin:0 auto;
    height:100%;
    background-color:#fff;
    opacity:0.6;
}

.maxScreen .flipBlocker:before, .tablet .flipBlocker:before {
    width:100%;
}

.fixedWidth
{

    min-width: 800px;
    max-width:1024px;
    margin:0 auto;
    position: relative;
}

.clearFix:after, .clearFixRWFloat:after, #ContextualActionsPanel:after, .popup > footer > div:after, .repeatableEditablePanel.fiveColumns .content .fieldsContainer:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearFixRWFloat:after {
    clear: right;
}

.maxScreen .fixedWidth
{
    width: auto;
    max-width: 100%;

}

#MainContainer {
    overflow: hidden;
    min-width:800px;
    min-height:100%;
    position:relative;
}

.maxScreen #MainContainer {
    max-width:100%;

}

#MainContainer > .contentContainer
{
    margin:0 auto;
    min-height:100%;
    position:relative;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
}


.maxScreen > #MainContainer > .contentContainer {
    margin: 0;
}

.contentLayoutContainer {
    min-height:100%;
}

.sideBarLayout .contentLayoutContainer {
    margin-left:190px;
}

.sideBarLayout .contentLayoutContainer
{
    padding-top:0;
}

.gridActions a,
.jqmWindow,
.startSection .dropdownPanel
{
    border-radius:3px;
    -moz-border-radius:3px;
}

h3
{
    font-size:1.4em;
    font-weight:bold;
}


/*-- Color Constants--*/

#MainContainer > .contentContainer {
    background-color:#fff;
}


#FormTitleContainer #FormTitleImageContainer {
    border-color:#fff;
}


/*--Details Panel & Thumbnail background--*/

.naturalViewSectionContainer, .linkedTabbedControl.showSideBar.hasSideBar > .sideBarOuterContainer_LinkedTab,
.detailsPanel #DETAILS_DataContents,
.compact .thumbnailViewContainer, .contact .thumbnailViewContainer {
    background-color:#fbfbfb;
}

/*--Label Colour--*/

.lblCol, .editorLabel, .editorLabelAutoWidth, .worklistItem {
    color: #000000;
}

.editorLabel.summaryLineValue {
    color: #656565;
}

button.primary, a.buttonStyle.primary {
    border-color:transparent;
}

.highlightElement {
    background-color: #FFEEDD !important;
    border: solid 1px red;
}

/* function groups */
.func-list-popover-main
{
    background-color: #EDF6FE;
    background-color: rgba(235, 237, 238, 0.8);
}

.tile.expanded.Blue      { background-color:  #244981; }
.tile.expanded.DarkBlue      { background-color:  #0B3A5A; }
.tile.expanded.LightBlue { background-color:#11697E; }
.tile.expanded.DarkTeal  { background-color: #065A52; }
.tile.expanded.Green     { background-color: #385500; }
.tile.expanded.Grey      { background-color:  #444444; }
.tile.expanded.Lime      { background-color:  #84964e; }
.tile.expanded.Maroon    { background-color: #5E151A; }
.tile.expanded.Yellow      { background-color:  #BB8800; }
.tile.expanded.Purple      { background-color:  #301B46; }
.tile.expanded.Orange      { background-color:  #B25900; }



.tile.expanded.Blue .hyperTabHandles .hTabHandle.selected, .tile.expanded.Blue .hyperTabHandles .hTabHandle:hover, .activeTileBody .BlueCol { color:  #244981; }
.tile.expanded.DarkBlue .hyperTabHandles .hTabHandle.selected, .tile.expanded.DarkBlue .hyperTabHandles .hTabHandle:hover, .activeTileBody .DarkBlueCol { color:  #0B3A5A; }
.tile.expanded.LightBlue .hyperTabHandles .hTabHandle.selected, .tile.expanded.LightBlue .hyperTabHandles .hTabHandle:hover, .activeTileBody .LightBlueCol { color:#11697E; }
.tile.expanded.DarkTeal .hyperTabHandles .hTabHandle.selected, .tile.expanded.DarkTeal .hyperTabHandles .hTabHandle:hover, .activeTileBody .DarkTealCol { color: #065A52; }
.tile.expanded.Green .hyperTabHandles .hTabHandle.selected, .tile.expanded.Green .hyperTabHandles .hTabHandle:hover, .activeTileBody .GreenCol { color: #385500; }
.tile.expanded.Grey .hyperTabHandles .hTabHandle.selected, .tile.expanded.Grey .hyperTabHandles .hTabHandle:hover, .activeTileBody .GreyCol { color:  #444444; }
.tile.expanded.Lime .hyperTabHandles .hTabHandle.selected, .tile.expanded.Lime .hyperTabHandles .hTabHandle:hover, .activeTileBody .LimeCol { color:  #84964e; }
.tile.expanded.Maroon .hyperTabHandles .hTabHandle.selected, .tile.expanded.Maroon .hyperTabHandles .hTabHandle:hover, .activeTileBody .MaroonCol { color: #5E151A; }
.tile.expanded.Yellow .hyperTabHandles .hTabHandle.selected, .tile.expanded.Yellow .hyperTabHandles .hTabHandle:hover, .activeTileBody .YellowCol { color:  #BB8800; }
.tile.expanded.Purple .hyperTabHandles .hTabHandle.selected, .tile.expanded.Purple .hyperTabHandles .hTabHandle:hover, .activeTileBody .PurpleCol { color:  #301B46; }
.tile.expanded.Orange .hyperTabHandles .hTabHandle.selected, .tile.expanded.Orange .hyperTabHandles .hTabHandle:hover, .activeTileBody .OrangeCol { color:  #B25900; }



/* Footer */

body.screenLoading > #MainContainer > #GlobalFooter {
    position: absolute;
    bottom: 0;
}

footer
{
    clear:both;
    font-size:0.9em;
    width:100%;
    max-width:inherit;
    text-align:center;
}

 footer.stickToBottom
 {
     position:fixed;
     bottom:0;
 }

 /*--Generic horizontal layout class (selector to turns child elements into inline block elements)--*/

.horizLayout > * {
    display: inline-block;
    vertical-align: top;
}

.fieldsContainer .horizLayout > * {
    margin-right: 5px;
}

.sideBySideContainer > .stackedStyle, .sideBySideContainer > .sideBySide {
    margin-right: 5px;
}

.sideBySideContainer.columns7 > .stackedStyle {
    margin-right: 0;
}

*:focus, .focus {
    outline-color: transparent;
    outline-style: solid;
    outline-width: 1px;
}

*:hover, [tabindex="-1"]:focus {
    outline: none;
}

/*--Various column layouts--*/

.columns {
    display: table;
    width: 100%;
}

.columns > * {
    display:table-cell;
    vertical-align:top;
}

.hidden {   display: none; }

.height100pc { height: 100%; }




/*--Generic Padding classes--*/

.padding0, .cPadding0 > *       {  padding:0; }
.paddingT0, .cPaddingT0         {  padding-top:0; }
.paddingB0, .cPaddingB0         {  padding-bottom:0; }
.paddingTB0, .cPaddingTB0 > *   {  padding-top:0;    padding-bottom:0; }
.paddingL0, .cPaddingL0 > *     {  padding-left:0; }
.paddingR0, .cPaddingR0 > *     {  padding-right:0; }
.paddingLR0, .cPaddingLR0 > *   {  padding-left:0;    padding-right:0; }

.padding2, .cPadding3 > *       {  padding:2px; }
.paddingTB2, .cPaddingTB2 > *   {  padding-top:2px;    padding-bottom:2px; }

.padding5, .cPadding5 > *       {  padding:5px; }
.paddingT5, .cPaddingT5         {  padding-top:5px; }
.paddingB5, .cPaddingB5         {  padding-bottom:5px; }
.paddingTB5, .cPaddingTB5 > *   {  padding-top:5px;    padding-bottom:5px; }
.paddingL5, .cPaddingL5 > *     {  padding-left:5px; }
.paddingR5, .cPaddingR5 > *     {  padding-right:5px; }
.paddingLR5, .cPaddingLR5 > *   {  padding-left:5px;    padding-right:5px;}
.padding10, .cPadding10 > *     {  padding:10px; }
.paddingT10, .cPaddingT10       {  padding-top:10px; }
.paddingB10, .cPaddingB10       {  padding-bottom:10px; }
.paddingTB10, .cPaddingTB10 > * {  padding-top:10px;    padding-bottom:10px; }
.paddingL10, .cPaddingL10 > *   {  padding-left:10px; }
.paddingR10, .cPaddingR10 > *   {  padding-right:10px; }
.paddingLR10, .cPaddingLR10 > * {  padding-left:10px;     padding-right:10px; }
.padding20, .cPadding20 > *     {  padding:20px; }
.paddingT20, .cPaddingT20       {  padding-top:20px; }
.paddingB20, .cPaddingB20       {  padding-bottom:20px; }
.paddingTB20, .cPaddingTB20 > * {  padding-top:20px;    padding-bottom:20px; }
.paddingL20, .cPaddingL20 > *   {  padding-left:20px; }
.paddingR20, .cPaddingR20 > *   {  padding-right:20px; }
.paddingLR20, .cPaddingLR20 > * {  padding-left:20px;     padding-right:20px; }

.padding0I { padding: 0 !important; }

.imageSection.center { text-align: center !important; }

/*--Arrow indicators--*/

.tArw:before, .tArw:after, .rArw:before, .rArw:after, .lArw:before, .lArw:after, .arwPosB:before, .arwPosB:after, .pointerArrow .bg, .pointerArrow .fg {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
}
.tArw:before, .tArw:after{
    top: -7px;
}

.arwPosB:before, .arwPosB:after {
    bottom: -6px;
}

.tArw:before, .tArw:after, .arwPosB:before, .arwPosB:after, .pointerArrow .bg, .pointerArrow .fg {
	left: 50%;
}

.tArw.arwPosL:before, .tArw.arwPosL:after {
    left: 20%;
}

.tArw.arwPosR:before, .tArw.arwPosR:after {
    left: 80%;
}

.lArw:before, .lArw:after {
	top: 50%;
	left:0;
}

.pointerArrow .bg, .pointerArrow .fg{
    bottom: -1px;
}

.pointerArrowB .bg, .pointerArrowB .fg {
    position: absolute;
    top: -1px;
    left: 50%;
    height: 0;
    width: 0;
}

.searchToggle.pointerArrowB .fg {
    top: -2px;
}

.tArw:before, .pointerArrow .bg {
    margin-left: -7px;
    border-left: solid 7px transparent !important;
    border-right: solid 7px transparent !important;
    border-bottom-style: solid;
    border-bottom-width: 7px;
    border-color: inherit;
}

.tArw:after, .pointerArrow .fg {
    margin-left: -6px;
    border-left: solid 6px transparent !important;
    border-right: solid 6px transparent !important;
    border-bottom-style: solid;
    border-bottom-width: 6px;
    border-color: inherit;
}

.arwPosB:before, .pointerArrowT .bg {
    margin-left: -7px;
    border-left: solid 7px transparent !important;
    border-right: solid 7px transparent !important;
    border-top-style: solid;
    border-top-width: 6px;
    border-color: inherit;
}

.arwPosB:after, .pointerArrowT .fg {
    margin-left: -6px;
    border-left: solid 6px transparent !important;
    border-right: solid 6px transparent !important;
    border-top-style: solid;
    border-top-width: 6px;
    border-color: inherit;
}


.pointerArrowB .bg {
    margin-left: -7px;
    border-left: solid 7px transparent !important;
    border-right: solid 7px transparent !important;
    border-top-style: solid;
    border-top-width: 6px;
}

.pointerArrowB .fg {
    margin-left: -6px;
    border-left: solid 6px transparent !important;
    border-right: solid 6px transparent !important;
    border-top-style: solid;
    border-top-width: 6px;
}


.pointerArrowR .bg, .pointerArrowR .fg {
    position: absolute;
    top: 50%;
    left: -1px;
    height: 0;
    width: 0;
}

.pointerArrowL .bg, .pointerArrowL .fg {
    position: absolute;
    top: 50%;
    right: -1px;
    height: 0;
    width: 0;
}


.searchToggle.pointerArrowR .fg {
    top: -2px;
}


 .rArw:before, .pointerArrowR .bg {
    margin-top: -7px;
    border-top: solid 7px transparent !important;
    border-bottom: solid 7px transparent !important;
    border-left-style: solid;
    border-left-width: 7px;
}

 .rArw:after, .pointerArrowR .fg {
    margin-top: -6px;
    border-top: solid 6px transparent !important;
    border-bottom: solid 6px transparent !important;
    border-left-style: solid;
    border-left-width: 6px;
}

 .lArw:before, .pointerArrowL .bg {
    margin-top: -7px;
    border-top: solid 7px transparent !important;
    border-bottom: solid 7px transparent !important;
    border-right-style: solid;
    border-right-width: 7px;
}

.lArw:after, .pointerArrowL .fg {
    margin-top: -6px;
    border-top: solid 6px transparent !important;
    border-bottom: solid 6px transparent !important;
    border-right-style: solid;
    border-right-width: 6px;
}

.useSelectedMarker.selected:before, .selected > .useSelectedMarker:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: -1px;
    bottom: 0;
    border-right: solid 3px;
}


.tabHandle_LinkedTab.useSelectedMarker.selected:before {
    top: 0;
    bottom: auto;
    border: none;
}

.useSelectedMarker.selected:after, .selected > .useSelectedMarker:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
    border-right: solid 7px;
    border-top: solid 7px transparent !important;
    border-bottom: solid 7px transparent !important;
    width: 0;
    height: 0;
}

.tabHandle_LinkedTab.useSelectedMarker.selected:after {
    right: -3px;
}

.unSelectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Drragging elements */

.dragging
{
    z-index: 10000;
}

/* Hand open */
.draggable
{
    -ms-touch-action: none;
    cursor: pointer;
    cursor: url(data:image/jpeg;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=) 4 4, pointer;
}
/* Hand close */
.dragging, .dragging *
{
    cursor: url(data:image/jpeg;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=) 4 4, pointer !important;
}

.webkitOverflowTouch {
    -webkit-overflow-scrolling: touch;
}

.zoomable {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}
.zoomable > div {
    -webkit-transform-origin: 0% 0%;
}

.overflowHidden { overflow: hidden; }
.overflowHiddenI { overflow: hidden !important; }

/***************************** tablets *****************************/

.tablet.portraitMode #MainContainer,
.tablet.portraitMode .fixedWidth {
    min-width: 700px;
}

body.ipad.landscapeMode.ios7 {
    height: calc(100% - 20px);
    min-height: calc(100% - 20px);
    width: 100%;
    position:fixed;
}

body.ipad.landscapeMode.ios7 > #MainContainer {
    min-height: calc(100% - 20px);
}

body.ipad.landscapeMode.ios7 > #MainContainer > .contentContainer {
    min-height: calc(100% - 20px);
}

.cMsgWrap.fixedWidth {
    max-width: 1024px;
}

.topBannerMsg {
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
    padding: 5px;
}

.topBannerMsg button {
    margin: 0;
    padding: 3px;
}
.topBannerMsg button .buttonLabel {
    min-width: 0;
}
.topBannerMsg > .icon16 {
    margin: 2px 5px;
}

.topBannerMsg {
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
}
.desktop .topBannerMsg {
    padding: 5px;
}

.topBannerMsg button {
    margin: 0;
    padding: 3px;
}
.topBannerMsg button .buttonLabel {
    min-width: 0;
}
.topBannerMsg > .icon16 {
    margin: 2px 5px;
}


.sclWrapper .panel {
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
}

.sclWrapper .panel header {
    text-align: center;
}

.sclDesc {
    width: 198px;
    text-align: right;
    display: inline-block;
    margin-right: 20px;
    line-height: 1.5em;
    vertical-align: top;
}
.sclKeys {
    display: inline-block;
    vertical-align: top;
    vertical-align: super;
}
.sclKeys > a {
    cursor: default !important;
}
.sclItem {
    border-top: solid 1px rgba(0, 0, 0, 0.05);
    padding: 2px;
}

@media \0screen {



}



/*--custom scroll bar style for windows devices--*/


.windows0.desktop ::-webkit-scrollbar-button, body.windows0.desktop::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

.windows0.desktop ::-webkit-scrollbar, body.windows0.desktop::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.windows0.desktop ::-webkit-scrollbar-button:horizontal:start:decrement, .windows0.desktop ::-webkit-scrollbar-button:horizontal:end:increment, .windows0.desktop ::-webkit-scrollbar-button:vertical:start:decrement, .windows0.desktop ::-webkit-scrollbar-button:vertical:end:increment,
body.windows0.desktop::-webkit-scrollbar-button:horizontal:start:decrement, body.windows0.desktop::-webkit-scrollbar-button:horizontal:end:increment, body.windows0.desktop::-webkit-scrollbar-button:vertical:start:decrement, body.windows0.desktop::-webkit-scrollbar-button:vertical:end:increment {
    width:9px;
}

.windows0.desktop ::-webkit-scrollbar-thumb:vertical,
.windows0.desktop ::-webkit-scrollbar-thumb:horizontal,
body.windows0.desktop::-webkit-scrollbar-thumb:vertical,
body.windows0.desktop::-webkit-scrollbar-thumb:horizontal {
	background-color: rgba(0,0,0, 0.15);
}

.windows0.desktop ::-webkit-scrollbar-thumb:hover,
body.windows0.desktop::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0, 0.25);
}

.windows0.desktop ::-webkit-scrollbar-track,
body.windows0.desktop::-webkit-scrollbar-track {
	background-color: transparent;
    box-shadow: none;
}

body.windows0.desktop::-webkit-scrollbar-track {
    background-color:#fff;
}


.windows0.desktop :hover::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.05);
}


body.windows0.desktop:hover::-webkit-scrollbar-track {
    background-color: #fff;
}

.dropdownPanelListItem span.OneDrive:before {
    content: "\E517";
}

.dropdownPanelListItem span.GoogleDrive:before {
    content: "\E522";
}


/* Offline */
body.offline .durationSpinner {
    display: none !important;
}


/* Hover Effects */
/*
IDEA: the parent container has the class supportsHover and the child item has the class hoverItem.
For some controls (grid, filters) this is not always true as the hover item is deeper within the HTML DOM tree or there are nested hover items (hierarchy viewer, or hierarchical filters)
Define the exceptions here.
*/
.supportsHover > .hoverItem:hover,
.supportsHover .isDataRow.hoverItem:hover /*grid rows*/
{
    background-color: var(--ciaColourBackgroundHighlightHover)!important;
}

.supportsHover > .hoverItem.disabled:hover,
.supportsHover > .hoverItem.readOnly:hover{
    background-color: unset!important;
}

/* Radial Out */
.hvr-radial-out {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-radial-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0));
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-radial-out.light:before{
    background: radial-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0));
}

.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
    -webkit-transform: scale(2);
    transform: scale(2);
}

/* ripple out */


@-webkit-keyframes hvr-ripple-out {
    0%      { top: -3px;  right: -3px;  bottom: -3px;  left: -3px;  opacity: 1; border-color:rgba(5, 5, 5, 0.21); }
    100%    { top: -9px;  right: -9px;  bottom: -9px;  left: -9px;  opacity: 0;  }
}
@keyframes hvr-ripple-out {
    0%      { top: -3px;  right: -3px;  bottom: -3px;  left: -3px;  opacity: 1; border-color:rgba(5, 5, 5, 0.21); }
    100%    { top: -9px;  right: -9px;  bottom: -9px;  left: -9px;  opacity: 0;  }
}
.hvr-ripple-out {
    position: relative;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}
.hvr-ripple-out:before {
    content: '';
    position: absolute;
    border-color: transparent;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    border-radius: 100%;
    border-style: solid;
    border-width: 3px;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
    -webkit-animation-name: hvr-ripple-out;
    animation-name: hvr-ripple-out;
}

/*--Consumer styles--*/

.consumerStyleWrapper {
    background-image: none;
    background-color: #f8f8f8; /*--theme colorGreyWarmLightest-50--*/
    color:#3b4e58; /*--theme colorGreyWarmDarker--*/
}

.consumerStyleWrapper #MainContainer {
    box-sizing:border-box;
}

.consumerStyleWrapper #MainContainer > .contentContainer,
.consumerStyleWrapper #C2FormContent {
    background-color: transparent !important;
}

.consumerStyleWrapper #C2FormContent {
    overflow: auto;
}

.consumerStyleWrapper #MainContainer > .contentContainer {
    box-shadow: none;
    max-width: 100vw;
}

.consumerStyleWrapper #MyMaintenanceForm > .mainContent {
    max-width: 100vw;
}

.consumerStyleWrapper #TabsContainer, .consumerStyleWrapper .linkedTabbedControl {
    height: auto;
    max-width: 1100px;
    margin:0 auto;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0,0 ,0 , 0.15);
}

.consumerStyleWrapper .tabsContainer_LinkedTab {
    height: auto;
}

.consumerStyleWrapper .tabControl > .editablePanel > .content {
    overflow: initial !important;
    height: auto !important;
}

.consumerStyleWrapper .editablePanel {
    display: flex;
    flex-flow: column;
}

.consumerStyleWrapper .editablePanel > .topActionPane:first-child {
    display:none;
}

.consumerStyleWrapper .contentContainer .bottomActionPane {
    display:block;
    padding:0 60px;
}

.consumerStyleWrapper .editablePanel > .header {
    font-size: 1.25rem !important;
    line-height: 1.25rem;
    height: auto;
    padding: 16px 60px;
    color:inherit;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

.consumerStyleWrapper .helpLink {
    font-weight:600;
}

.consumerStyleWrapper .warningLabel:before,
.consumerStyleWrapper .helpLink:before {
    display:none;
}

.consumerStyleWrapper .tabControlsInnerContainer_LinkedTab .tabControl:first-child > .editablePanel > .content {
    min-height: 400px;
}

/*************************************/
/*    TechnologyOne and CiA Branding */

/* must use the default/white T1 logo (container has dark colour background)*/
:root{
    --ciaT1LogoUrl: url('https://cdn.t1cloud.com/cianywhere/content/base/images/branding/t1logo.svg?v=12.0.176.0');
}

/* must use the black T1 logo (container has light colour background)*/
.t1LogoContainerBlack{
    --ciaT1LogoUrl: url('https://cdn.t1cloud.com/cianywhere/content/base/images/branding/t1logo_black.svg?v=12.0.176.0');
}

/* common CSS definitions */
.t1Logo{
    background: var(--ciaT1LogoUrl);
    background-size: 100% 100%;
}

/*************************************/


.overflowHidden { overflow: hidden; }


/*--Generic css attributes--*/

.monospace .editorField .readonlyTextBoxSpan { font-family: monospace !important; }

.clearLeft { clear: left;}
.clearRight { clear: right;}
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.bold { font-weight: bold; }

.center {text-align:center }
.textAlignLeft {text-align:left }
.textAlignRight {text-align:right }
.textAlignJustify {text-align:justify }
.vAlignTop { vertical-align: top; }
.vAlignMiddle { vertical-align: middle; }


/* Text sizes */

.smallText  { font-size: 0.9em !important; }
.mediumText { font-size: 1.2em; }
.largeText  { font-size: 1.5em; }
.largerText { font-size: 2em;   }

.zIndex1 { z-index: 1; }
.noWrap { white-space: nowrap; }
.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.floatLeft, .cFloatLeft > *     { float:left; }
.floatLeftImportant, .cFloatLeftImportant > *     { float:left !important; }
.floatRight, .cFloatRight > *    { float:right; }
.floatNone, .cFloatNone > * { float: none; }

.pAbsolute { position: absolute; }
.pRelative { position: relative; }

.left0 { left: 0; }
.left5 { left: 5px; }
.left10 { left: 10px; }
.left15 { left: 15px; }
.left20 { left: 20px; }
.left25 { left: 25px; }
.left30 { left: 30px; }

.right0 { right: 0; }
.right5 { right: 5px; }
.right10 { right: 10px; }
.right15 { right: 15px; }
.right20 { right: 20px; }
.right25 { right: 25px; }
.right30 { right: 30px; }

.top0 { top: 0; }
.top5 { top: 5px; }
.top10 { top: 10px; }
.top15 { top: 15px; }
.top20 { top: 20px; }
.top25 { top: 25px; }
.top30 { top: 30px; }

.bottom0 { bottom: 0; }
.bottom5 { bottom: 5px; }
.bottom10 { bottom: 10px; }
.bottom15 { bottom: 15px; }
.bottom20 { bottom: 20px; }
.bottom25 { bottom: 25px; }
.bottom30 { bottom: 30px; }



.block, .cBlock > * { display: block;}
.blockImportant, .cBlockImportant > *, .controlBlockImportant .textBoxControl, .contolBlockImportant .tbcEditorField { display:block !important; }
.inlineBlock, .cInlineBlock > * { display: inline-block; }
.inlineBlockImportant { display: inline-block !important; }
.table { display: table; }
.table-cell, .cTable-Cell > * { display: table-cell; }
.flex { display:flex; justify-content: space-around; }
.flexBetween { display: flex; justify-content: space-between; }
.center > .flex, .center > .flex0 {
    align-items: center;
    justify-content: center;
}

.flexCntr { display: flex; align-items: center; }
.flexWrap { display: flex; flex-wrap: wrap; }
.flexGrow1, .flexCol1  { flex-grow:1; }
.flexGrow0, .flexCol0 { flex-grow: 0; }
.flexCntrColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.border1   { border-style:solid; border-width:1px; }
.borderT1  { border-top-style:solid; border-top-width:1px; }
.borderB1  { border-bottom-style:solid; border-bottom-width:1px; }
.borderBox { box-sizing:border-box; }

.columns2 > * { width: 50% }
.columns3 > * { width: 33.3333333% }
.columns4 > * { width: 25%; }
.columns5 > * { width: 20%; }
.columns6 > * { width: 16.6666667%; }
.columns7 > * { width: 14.2857143%; }
.columns8 > * { width: 12.5% }
.columns9 > * { width: 11.1111111% }
.columns10 > * { width: 10% }





.opac0  { opacity: 0;  }
.opac03, .opac03Hvr:hover { opacity: 0.3;}
.opac05, .opac05Hvr:hover { opacity: 0.5;}
.opac07, .opac07Hvr:hover { opacity: 0.7;}
.opac08, .opac08Hvr:hover { opacity: 0.8;}
.opac09, .opac09Hvr:hover { opacity: 0.9;}
.opac1,  .opac1Hvr:hover  { opacity: 1;  }


.dataFieldContainer.clearLeft, .inputFieldContainer.clearLeft { clear:left !important; }
.dataFieldContainer.clearRight, .inputFieldContainer.clearRight { clear:right !important; }

.dataFieldContainer.floatNone, .inputFieldContainer.floatNone, .dataLblFloatNone .editorLabel, .dataFldFloatNone .editorField { float:none !important; }
.dataFieldContainer.floatLeft, .inputFieldContainer.floatLeft, .dataLblFloatLeft .editorLabel, .dataFldFloatLeft .editorField { float: left !important; }
.dataFieldContainer.floatRight, .inputFieldContainer.floatRight, .dataLblFloatRight .editorLabel, .dataFldFloatRight .editorField { float:right !important; }

/*--Various Label and Field dimensions (Used on container elements)--*/


/*--General Margin classes--*/


.marginTNeg5 { margin-top: -5px }
.marginTNeg10 { margin-top: -10px }
.marginTNeg15 { margin-top: -15px }
.marginTNeg20 { margin-top: -20px }

.marginTNeg5Important { margin-top: -5px !important; }
.marginTNeg10Important { margin-top: -10px !important; }
.marginTNeg15Important { margin-top: -15px !important; }
.marginTNeg20Important { margin-top: -20px !important; }

.margin0, .cMargin0 > *         { margin:0; }
.marginT0, .cMarginT0           { margin-top:0; }
.marginT0Important, .cMarginT0Important > * { margin-top:0 !important; }
.marginB0, .cMarginB0           { margin-bottom:0; }
.marginTB0, .cMarginTB0 > *     { margin-top:0; margin-bottom:0; }
.marginL0, .cMarginL0 > *       { margin-left:0; }
.marginR0, .cMarginR0 > *       { margin-right:0; }
.marginLR0, .cMarginLR0 > *     { margin-left:0; margin-right:0; }
.marginL1                       { margin-left: 1px; }
.marginR1                       { margin-right: 1px; }
.marginL2                       { margin-left: 2px; }
.marginR2                       { margin-right: 2px; }
.marginL3                       { margin-left: 3px; }
.marginR3                       { margin-right: 3px; }
.marginL4                       { margin-left: 4px; }
.marginR4                       { margin-right: 4px; }
.margin5, .cMargin5 > *         { margin:5px; }
.margin6, .cMargin6 > *         { margin:6px; }
.marginT5, .cMarginT5           { margin-top:5px; }
.marginT6, .cMarginT6           { margin-top:6px; }
.marginT7, .cMarginT7           { margin-top:7px; }
.marginB5, .cMarginB5           { margin-bottom:5px; }
.marginTB5, .cMarginTB5 > *     { margin-top:5px; margin-bottom:5px; }
.marginL5, .cMarginL5 > *       { margin-left:5px; }
.marginL6, .cMarginL6 > *       { margin-left:6px; }
.marginR5, .cMarginR5 > *       { margin-right:5px; }
.marginLR5, .cMarginLR5 > *     { margin-left:5px; margin-right:5px; }
.margin10, .cMargin10 > *       { margin:10px; }
.marginT10, .cMarginT10         { margin-top:10px; }
.marginT10I                     { margin-top:10px !important; }
.marginB10, .cMarginB10 > *     { margin-bottom:10px; }
.marginTB10, .cMarginTB10 > *   { margin-top:10px; margin-bottom:10px; }
.marginL10, .cMarginL10 > *     { margin-left:10px; }
.marginR10, .cMarginR10 > *     { margin-right:10px; }
.marginLR10, .cMarginLR10 > *   { margin-left:10px; margin-right:10px; }
.margin20, .cMargin20 > *       { margin: 20px; }
.marginT20, .cMarginT20 > *     { margin-top: 20px; }
.marginB20, .cMarginB20 > *     { margin-bottom: 20px; }

.marginT16, .cMarginT16         { margin-top:16px; }
.marginT16I                     { margin-top:16px !important; }
.marginB16, .cMarginB16 > *     { margin-bottom:16px; }
.marginTB16, .cMarginTB16 > *   { margin-top:16px; margin-bottom:16px; }

.marginL16, .cMarginL16 > *     { margin-left: 16px; }
.marginR16, .cMarginR16 > *     { margin-right: 16px; }
.marginLR16, .cMarginLR16 > *   { margin-left:16px; margin-right:16px; }

.marginL20, .cMarginL20 > *     { margin-left: 20px; }
.marginR20, .cMarginR20 > *     { margin-right: 20px; }
.marginLR20, .cMarginLR20 > *   { margin-left:20px; margin-right:20px; }

.marginT50                      { margin-top: 50px; }
.marginL120                     { margin-left: 120px; }








.minWidth10, .lblMinWidth10 .editorLabel, .fldMinWidth10 .editorField    {    min-width:10px;   }
.minWidth20, .lblMinWidth20 .editorLabel, .fldMinWidth20 .editorField      {    min-width:20px;   }
.minWidth30, .lblMinWidth30 .editorLabel, .fldMinWidth30 .editorField      {    min-width:30px;   }
.minWidth40, .lblMinWidth40 .editorLabel, .fldMinWidth40 .editorField      {    min-width:40px;   }
.minWidth50, .lblMinWidth50 .editorLabel, .fldMinWidth50 .editorField      {    min-width:50px;   }
.minWidth60, .lblMinWidth60 .editorLabel, .fldMinWidth60 .editorField     {    min-width:60px;   }
.minWidth70, .lblMinWidth70 .editorLabel, .fldMinWidth70 .editorField      {    min-width:70px;   }
.minWidth80, .lblMinWidth80 .editorLabel, .fldMinWidth80 .editorField      {    min-width:80px;   }
.minWidth90, .lblMinWidth90 .editorLabel, .fldMinWidth90 .editorField      {    min-width:90px;   }
.minWidth100, .lblMinWidth100 .editorLabel, .fldMinWidth100 .editorField     {    min-Width:100px;   }
.minWidth110, .lblMinWidth110 .editorLabel, .fldMinWidth110 .editorField     {    min-Width:110px;   }
.minWidth120, .lblMinWidth120 .editorLabel, .fldMinWidth120 .editorField     {    min-Width:120px;   }
.minWidth130, .lblMinWidth130 .editorLabel, .fldMinWidth130 .editorField     {    min-Width:130px;   }
.minWidth140, .lblMinWidth140 .editorLabel, .fldMinWidth140 .editorField     {    min-Width:140px;   }
.minWidth150, .lblMinWidth150 .editorLabel, .fldMinWidth150 .editorField     {    min-Width:150px;   }
.minWidth160, .lblMinWidth160 .editorLabel, .fldMinWidth160 .editorField     {    min-Width:160px;   }
.minWidth170, .lblMinWidth170 .editorLabel, .fldMinWidth170 .editorField     {    min-Width:170px;   }
.minWidth180, .lblMinWidth180 .editorLabel, .fldMinWidth180 .editorField     {    min-Width:180px;   }
.minWidth190, .lblMinWidth190 .editorLabel, .fldMinWidth190 .editorField     {    min-Width:190px;   }
.minWidth200, .lblMinWidth200 .editorLabel, .fldMinWidth200 .editorField     {    min-Width:200px;   }
.minWidth210    {    min-Width:210px;   }
.minWidth220    {    min-Width:220px;   }
.minWidth230    {    min-Width:230px;   }
.minWidth240    {    min-Width:240px;   }
.minWidth250    {    min-Width:250px;   }
.minWidth260    {    min-Width:260px;   }
.minWidth270    {    min-Width:270px;   }
.minWidth280    {    min-Width:280px;   }
.minWidth290    {    min-Width:290px;   }
.minWidth300    {    min-Width:300px;   }
.minWidth490    {    min-width: 490px;    }
.minWidth580    {    min-width: 580px;    }

.minHeight50    {    min-height: 50px;    }
.minHeight60    {    min-height: 60px;    }
.minHeight70    {    min-height: 70px;    }
.minHeight80    {    min-height: 80px;    }
.minHeight90    {    min-height: 90px;    }
.minHeight100    {    min-height: 100px;    }
.minHeight250   {    min-height: 250px;    }
.minHeight300   {    min-height: 300px;    }



.maxWidth10, .fldmaxWidth10 .editorField    {    max-width:10px;   }
.maxWidth20, .fldmaxWidth20 .editorField      {    max-width:20px;   }
.maxWidth30, .fldmaxWidth30 .editorField      {    max-width:30px;   }
.maxWidth40, .fldmaxWidth40 .editorField      {    max-width:40px;   }
.maxWidth50, .fldmaxWidth50 .editorField      {    max-width:50px;   }
.maxWidth60, .fldmaxWidth60 .editorField     {    max-width:60px;   }
.maxWidth70, .fldmaxWidth70 .editorField      {    max-width:70px;   }
.maxWidth80, .fldmaxWidth80 .editorField      {    max-width:80px;   }
.maxWidth90, .fldmaxWidth90 .editorField      {    max-width:90px;   }
.maxWidth100, .fldmaxWidth100 .editorField     {    max-width:100px;   }
.maxWidth110, .fldmaxWidth110 .editorField     {    max-width:110px;   }
.maxWidth120, .fldmaxWidth120 .editorField     {    max-width:120px;   }
.maxWidth130, .fldmaxWidth130 .editorField     {    max-width:130px;   }
.maxWidth140, .fldmaxWidth140 .editorField     {    max-width:140px;   }
.maxWidth150, .fldmaxWidth150 .editorField     {    max-width:150px;   }
.maxWidth160, .fldmaxWidth160 .editorField     {    max-width:160px;   }
.maxWidth170, .fldmaxWidth170 .editorField     {    max-width:170px;   }
.maxWidth180, .fldmaxWidth180 .editorField     {    max-width:180px;   }
.maxWidth190, .fldmaxWidth190 .editorField     {    max-width:190px;   }
.maxWidth200, .fldmaxWidth200 .editorField     {    max-width:200px;   }
.maxWidth210, .fldmaxWidth210 .editorField    {    max-width:210px;   }
.maxWidth220, .fldmaxWidth220 .editorField    {    max-width:220px;   }
.maxWidth230, .fldmaxWidth230 .editorField    {    max-width:230px;   }
.maxWidth240, .fldmaxWidth240 .editorField    {    max-width:240px;   }
.maxWidth250, .fldmaxWidth250 .editorField    {    max-width:250px;   }
.maxWidth260, .fldmaxWidth260 .editorField    {    max-width:260px;   }
.maxWidth270, .fldmaxWidth270 .editorField    {    max-width:270px;   }
.maxWidth280, .fldmaxWidth280 .editorField    {    max-width:280px;   }
.maxWidth290, .fldmaxWidth290 .editorField    {    max-width:290px;   }
.maxWidth300, .fldmaxWidth300 .editorField    {    max-width:300px;   }
.maxWidth310, .fldmaxWidth310 .editorField    {    max-width:310px;   }
.maxWidth320, .fldmaxWidth320 .editorField    {    max-width:320px;   }
.maxWidth330, .fldmaxWidth330 .editorField    {    max-width:330px;   }
.maxWidth340, .fldmaxWidth340 .editorField    {    max-width:340px;   }
.maxWidth350, .fldmaxWidth350 .editorField    {    max-width:350px;   }
.maxWidth360, .fldmaxWidth360 .editorField    {    max-width:360px;   }
.maxWidth370, .fldmaxWidth370 .editorField    {    max-width:370px;   }
.maxWidth380, .fldmaxWidth380 .editorField    {    max-width:380px;   }
.maxWidth390, .fldmaxWidth390 .editorField    {    max-width:390px;   }
.maxWidth400, .fldmaxWidth400 .editorField    {    max-width:400px;   }
.maxWidth490, .fldmaxWidth490 .editorField    {    max-width: 490px;    }
.maxWidth530 , .fldmaxWidth530 .editorField   {    max-width: 530px;    }
.maxWidth580 , .fldmaxWidth580 .editorField   {    max-width: 580px;    }



.width30, .lblWidth30 .editorLabel    {    width:30px;    }
.width40, .lblWidth40 .editorLabel    {    width:40px;    }
.width50, .lblWidth50 .editorLabel    {    width:50px     }
.width60, .lblWidth60 .editorLabel    {    width:60px;    }
.width90, .lblWidth90 .editorLabel    {    width:90px;    }
.width100, .lblWidth100 .editorLabel, .fldWidth100 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth100 .editorLabel {    width:100px;  }
.width120, .lblWidth120 .editorLabel, .fldWidth120 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth120 .editorLabel {    width:120px;   }
.width150, .lblWidth150 .editorLabel, .fldWidth150 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth150 .editorLabel {    width:150px;   }
.width160, .lblWidth160 .editorLabel, .fldWidth160 .editorField input, .relatedDataPortlet .dataFieldContainer.lblWidth160 .editorLabel {    width:160px;   }
.width180, .lblWidth180 .editorLabel, .fldWidth180 .editorField input {    width:180px;   }
.width200, .lblWidth200 .editorLabel, .fldWidth200 .editorField input {    width:200px;   }
.fldMargin0 .editorField input, .fldMargin0 .editorField select {    margin-right:0; }



/* Border radius styles */


.bTop { border-top-width: 1px;border-top-style: solid;}

.borderRadius0                  {  border-radius: 0; }
.borderRadiusTL0                {  border-top-left-radius: 0; }
.borderRadiusTR0                {  border-top-right-radius: 0; }
.borderRadiusBL0                {  border-bottom-left-radius: 0; }
.borderRadiusBR0                {  border-bottom-right-radius: 0; }

.borderRadius3                  { border-radius: 3px; }

.borderRadius6                  {  border-radius: 6px; }
.borderRadius10                 {  border-radius: 10px; }
.borderRadius12                 {  border-radius: 12px; }
.borderRadius20                 {  border-radius: 20px; }
.borderRadius30                 {  border-radius: 30px; }

.borderRadius100pc              {  border-radius: 100%; }




.height40 { height: 40px; }
.height50 { height: 50px; }
.height60 { height: 60px; }
.height70 { height: 70px; }
.height80 { height: 80px; }
.height90 { height: 90px; }
.height100 { height: 100px; }
.height100perc, .height100Perc { height: 100%; }


/*--Generic Padding classes--*/

.padding0I, .cPadding0I > *       {  padding:0 !important; }
.paddingT0I, .cPaddingT0I         {  padding-top:0 !important; }
.paddingB0I, .cPaddingB0I         {  padding-bottom:0 !important; }
.paddingTB0I, .cPaddingTB0I > *   {  padding-top:0 !important;    padding-bottom:0 !important; }
.paddingL0I, .cPaddingL0I > *     {  padding-left:0 !important; }
.paddingR0I, .cPaddingR0I > *     {  padding-right:0 !important; }
.paddingLR0I, .cPaddingLR0I > *   {  padding-left:0 !important;    padding-right:0 !important; }
.padding5I, .cPadding5I > *       {  padding:5px !important; }
.paddingT5I, .cPaddingT5I         {  padding-top:5px !important; }
.paddingB5I, .cPaddingB5I         {  padding-bottom:5px !important; }
.paddingTB5I, .cPaddingTB5I > *   {  padding-top:5px !important;    padding-bottom:5px !important; }
.paddingL5I, .cPaddingL5I > *     {  padding-left:5px !important; }
.paddingR5I, .cPaddingR5I > *     {  padding-right:5px !important; }
.paddingLR5I, .cPaddingLR5I > *   {  padding-left:5px !important;    padding-right:5px !important;}
.padding10I, .cPadding10I > *     {  padding:10px !important; }
.paddingT10I, .cPaddingT10I       {  padding-top:10px !important; }
.paddingB10I, .cPaddingB10I       {  padding-bottom:10px !important; }
.paddingTB10I, .cPaddingTB10I > * {  padding-top:10px !important;    padding-bottom:10px !important; }
.paddingL10I, .cPaddingL10I > *   {  padding-left:10px !important; }
.paddingR10I, .cPaddingR10I > *   {  padding-right:10px !important; }
.paddingLR10I, .cPaddingLR10I > * {  padding-left:10px !important;     padding-right:10px !important; }


/*--Percentage widths--*/

.width5Perc, .lblWidth5Perc .editorLabel { width:5%; }
.width10Perc, .lblWidth10Perc .editorLabel { width:10%; }
.width15Perc, .lblWidth15Perc .editorLabel { width:15%; }
.width20Perc, .lblWidth20Perc .editorLabel { width:20%; }
.width25Perc, .lblWidth25Perc .editorLabel { width:25%; }
.width30Perc, .lblWidth30Perc .editorLabel { width:30%; }
.width35Perc, .lblWidth35Perc .editorLabel { width:35%; }
.width40Perc, .lblWidth40Perc .editorLabel { width:40%; }
.width45Perc, .lblWidth45Perc .editorLabel { width:45%; }
.width50Perc, .lblWidth50Perc .editorLabel { width:50% }
.width55Perc, .lblWidth55Perc .editorLabel { width:55% }
.width60Perc, .lblWidth60Perc .editorLabel {width: 47%;}
.width65Perc, .lblWidth65Perc .editorLabel { width:65% }
.width70Perc, .lblWidth70Perc .editorLabel { width:70% }
.width75Perc, .lblWidth75Perc .editorLabel { width:75% }
.width80Perc, .lblWidth80Perc .editorLabel { width:80% }
.width85Perc, .lblWidth85Perc .editorLabel { width:85% }
.width90Perc, .lblWidth90Perc .editorLabel { width:90% }
.width95Perc, .lblWidth95Perc .editorLabel { width:95% }
.width100Perc, .lblWidth100Perc .editorLabel { width:100% }




/*--Percentage widths that are responsive--*/



@media screen and (max-width: 500px) {

    .phone .xsm-font70Perc { font-size:70%; }
    .phone .xsm-font80Perc { font-size:80%; }
    .phone .xsm-font90Perc { font-size:90%; }

    .phone .xsm-block { display:block; }
    .phone .xsm-floatNone, .xsm-cFloatNone > * { float:none; }
    .xsm-margin0Auto { margin:0 auto; }

    .phone .xsm-stacked > * { float: none !important; display: block !important; }

    .phone .xsm-floatLeft, .phone .thumbnailSection.xsm-floatLeft, .phone .dataFieldContainer.xsm-floatLeft { float: left !important; }
    .phone .xsm-floatRight, .phone .thumbnailSection.xsm-floatRight { float: right !important; }

    .phone .xsm-clearNone { clear: none !important; }
    .phone .xsm-clearLeft { clear: left !important; }
    .phone .xsm-clearRight { clear: right !important; }

    .phone .xsm-textAlignLeft { text-align: left !important; }
    .phone .xsm-textAlignRight { text-align: right !important; }

    .phone .xms-pAbsolute { position: absolute; }
    .phone .xsm-pRelative { position: relative; }

    .phone .xsm.left0 { left: 0; }
    .phone .xsm-left5 { left: 5px; }
    .phone .xsm-left10 { left: 10px; }
    .phone .xsm-left15 { left: 15px; }
    .phone .xsm-left20 { left: 20px; }
    .phone .xsm-left25 { left: 25px; }
    .phone .xsm-left30 { left: 30px; }

    .phone .xsm-right0 { right: 0; }
    .phone .xsm-right5 { right: 5px; }
    .phone .xsm-right10 { right: 10px; }
    .phone .xsm-right15 { right: 15px; }
    .phone .xsm-right20 { right: 20px; }
    .phone .xsm-right25 { right: 25px; }
    .phone .xsm-right30 { right: 30px; }

    .phone .xsm-top0 { top: 0; }
    .phone .xsm-top5 { top: 5px; }
    .phone .xsm-top10 { top: 10px; }
    .phone .xsm-top15 { top: 15px; }
    .phone .xsm-top20 { top: 20px; }
    .phone .xsm-top25 { top: 25px; }
    .phone .xsm-top30 { top: 30px; }

    .phone .xsm-bottom0 { bottom: 0; }
    .phone .xsm-bottom5 { bottom: 5px; }
    .phone .xsm-bottom10 { bottom: 10px; }
    .phone .xsm-bottom15 { bottom: 15px; }
    .phone .xsm-bottom20 { bottom: 20px; }
    .phone .xsm-bottom25 { bottom: 25px; }
    .phone .xsm-bottom30 { bottom: 30px; }

    .phone .xsm-marginT5 { margin-top: 5px!important; }
    .phone .xsm-marginT10 { margin-top: 10px!important; }
    .phone .xsm-marginTB5 { margin-top: 5px!important; margin-bottom: 5px !important; }
    .phone .xsm-marginTB10 { margin-top: 10px!important; margin-bottom: 10px !important; }

    .phone .xsm-width5Perc, .phone .xsm-lblWidth5Perc .editorLabel { width:5%; }
    .phone .xsm-width10Perc, .phone .xsm-lblWidth10Perc .editorLabel { width:10%; }
    .phone .xsm-width15Perc, .phone .xsm-lblWidth15Perc .editorLabel { width:15%; }
    .phone .xsm-width20Perc, .phone .xsm-lblWidth20Perc .editorLabel { width:20%; }
    .phone .xsm-width25Perc, .phone .xsm-lblWidth25Perc .editorLabel { width:25%; }
    .phone .xsm-width30Perc, .phone .xsm-lblWidth30Perc .editorLabel { width:30%; }
    .phone .xsm-width35Perc, .phone .xsm-lblWidth35Perc .editorLabel { width:35%; }
    .phone .xsm-width40Perc, .phone .xsm-lblWidth40Perc .editorLabel { width:40%; }
    .phone .xsm-width45Perc, .phone .xsm-lblWidth45Perc .editorLabel { width:45%; }
    .phone .xsm-width50Perc, .phone .xsm-lblWidth50Perc .editorLabel { width:50% }
    .phone .xsm-width55Perc, .phone .xsm-lblWidth55Perc .editorLabel { width:55% }
    .phone .xsm-width60Perc, .phone .xsm-lblWidth60Perc .editorLabel { width:60% }
    .phone .xsm-width65Perc, .phone .xsm-lblWidth65Perc .editorLabel { width:65% }
    .phone .xsm-width70Perc, .phone .xsm-lblWidth70Perc .xs-editorLabel { width:70% }
    .phone .xsm-width75Perc, .phone .xsm-lblWidth75Perc .xs-editorLabel { width:75% }
    .phone .xsm-width80Perc, .phone .xsm-lblWidth80Perc .editorLabel { width:80% }
    .phone .xsm-width85Perc, .phone .xsm-lblWidth85Perc .editorLabel { width:85% }
    .phone .xsm-width90Perc, .phone .xsm-lblWidth90Perc .editorLabel { width:90% }
    .phone .xsm-width95Perc, .phone .xsm-lblWidth95Perc .editorLabel { width:95% }
    .phone .xsm-width100Perc, .phone .xsm-lblWidth100Perc .editorLabel { width:100% }
}

.mq-xsm .xsm-font70Perc { font-size:70%; }
.mq-xsm .xsm-font80Perc { font-size:80%; }
.mq-xsm .xsm-font90Perc { font-size:90%; }


.mq-xsm .xsm-width5Perc, .mq-xsm .xsm-lblWidth5Perc .editorLabel { width:5%; }
.mq-xsm .xsm-width10Perc, .mq-xsm .xsm-lblWidth10Perc .editorLabel { width:10%; }
.mq-xsm .xsm-width15Perc, .mq-xsm .xsm-lblWidth15Perc .editorLabel { width:15%; }
.mq-xsm .xsm-width20Perc, .mq-xsm .xsm-lblWidth20Perc .editorLabel { width:20%; }
.mq-xsm .xsm-width25Perc, .mq-xsm .xsm-lblWidth25Perc .editorLabel { width:25%; }
.mq-xsm .xsm-width30Perc, .mq-xsm .xsm-lblWidth30Perc .editorLabel { width:30%; }
.mq-xsm .xsm-width35Perc, .mq-xsm .xsm-lblWidth35Perc .editorLabel { width:35%; }
.mq-xsm .xsm-width40Perc, .mq-xsm .xsm-lblWidth40Perc .editorLabel { width:40%; }
.mq-xsm .xsm-width45Perc, .mq-xsm .xsm-lblWidth45Perc .editorLabel { width:40%; }
.mq-xsm .xsm-width50Perc, .mq-xsm .xsm-lblWidth50Perc .editorLabel { width:50% }
.mq-xsm .xsm-width55Perc, .mq-xsm .xsm-lblWidth55Perc .editorLabel { width:55% }
.mq-xsm .xsm-width60Perc, .mq-xsm .xsm-lblWidth60Perc .editorLabel { width:60% }
.mq-xsm .xsm-width65Perc, .mq-xsm .xsm-lblWidth65Perc .editorLabel { width:65% }
.mq-xsm .xsm-width70Perc, .mq-xsm .xsm-lblWidth70Perc .xs-editorLabel { width:70% }
.mq-xsm .xsm-width75Perc, .mq-xsm .xsm-lblWidth75Perc .xs-editorLabel { width:75% }
.mq-xsm .xsm-width80Perc, .mq-xsm .xsm-lblWidth80Perc .editorLabel { width:80% }
.mq-xsm .xsm-width85Perc, .mq-xsm .xsm-lblWidth85Perc .editorLabel { width:85% }
.mq-xsm .xsm-width90Perc, .mq-xsm .xsm-lblWidth90Perc .editorLabel { width:90% }
.mq-xsm .xsm-width95Perc, .mq-xsm .xsm-lblWidth95Perc .editorLabel { width:95% }
.mq-xsm .xsm-width100Perc, .mq-xsm .xsm-lblWidth100Perc .editorLabel { width:100% }

.mq-xsm .xsm-maxWidth200Pix { max-width:200px; }
.mq-xsm .xsm-maxWidth250Pix { max-width:250px; }
.mq-xsm .xsm-maxWidth300Pix { max-width:300px; }




.mq-md .md-floatLeft { float: left; }
.mq-md .md-floatRight { float: right; }

.mq-md .md-textAlignLeft { text-align: left; }
.mq-md .md-textAlignRight { text-align: right; }









/*--Label and width overrides for cards--*/

.dataFldMaxWidth230 .editorField { max-width: 230px !important; }


.dataLblWidth30 .editorLabel, .dataFldWidth30 .editorField { width:30px !important; }
.dataLblWidth40 .editorLabel, .dataFldWidth40 .editorField { width:40px !important; }
.dataLblWidth50 .editorLabel, .dataFldWidth50 .editorField { width:50px !important; }
.dataLblWidth60 .editorLabel, .dataFldWidth60 .editorField { width:60px !important; }
.dataLblWidth70 .editorLabel, .dataFldWidth70 .editorField { width:70px !important; }
.dataLblWidth80 .editorLabel, .dataFldWidth80 .editorField { width:80px !important; }
.dataLblWidth90 .editorLabel, .dataFldWidth90 .editorField { width:90px !important; }
.dataLblWidth100 .editorLabel, .dataFldWidth100 .editorField { width:100px !important; }
.dataLblWidth110 .editorLabel, .dataFldWidth110 .editorField { width:110px !important; }
.dataLblWidth120 .editorLabel, .dataFldWidth120 .editorField { width:120px !important; }
.dataLblWidth130 .editorLabel, .dataFldWidth130 .editorField { width:130px !important; }
.dataLblWidth140 .editorLabel, .dataFldWidth140 .editorField { width:140px !important; }
.dataLblWidth150 .editorLabel, .dataFldWidth150 .editorField { width:150px !important; }
.dataLblWidth160 .editorLabel, .dataFldWidth160 .editorField { width:160px !important; }
.dataLblWidth170 .editorLabel, .dataFldWidth170 .editorField { width:170px !important; }
.dataLblWidth180 .editorLabel, .dataFldWidth180 .editorField { width:180px !important; }
.dataLblWidth190 .editorLabel, .dataFldWidth190 .editorField { width:190px !important; }
.dataLblWidth200 .editorLabel, .dataFldWidth200 .editorField { width:200px !important; }
/* the percent definitions are relative to container */
.controlWidth25Percent,.dataLblWidth25Percent .editorLabel, .dataFldWidth25Percent .editorField { width:25% !important; }
.controlWidth30Percent,.dataLblWidth30Percent .editorLabel, .dataFldWidth30Percent .editorField{ width:30% !important; }
.controlWidth40Percent,.dataLblWidth40Percent .editorLabel, .dataFldWidth40Percent .editorField{ width:40% !important; }
.controlWidth50Percent,.dataLblWidth50Percent .editorLabel, .dataFldWidth50Percent .editorField{ width:50% !important; }
.controlWidth60Percent,.dataLblWidth60Percent .editorLabel, .dataFldWidth60Percent .editorField{ width:60% !important; }
.controlWidth100Percent,.dataLblWidth100Percent .editorLabel, .dataFldWidth100Percent .editorField{ width:100% !important; }

.fldWidthAuto .editorField, .autoWidthForLabels .editorLabel  {    width:auto;   }
.dataFldWidthAuto > .dataFieldContainer, .dataLblWidthAuto > .dataFieldContainer > .editorLabel {    width:auto !important;   }

/*--Padding overrides for cards--*/
.dataFldPadding0.dataFieldContainer > .editorLabel { padding: 0 !important;}

.thumbnailSection.padding0, .dataLblPadding0 .iconLabel, .dataLblPadding0 .editorLabel, .dataFldPadding0 .editorField { padding: 0 !important; }
.thumbnailSection.padding5, .dataLblPadding5 .iconLabel, .dataLblPadding5 .editorLabel, .dataFldPadding5 .editorField { padding: 5px !important; }
.thumbnailSection.padding10, .dataLblPadding10 .iconLabel, .dataLblPadding10 .editorLabel, .dataFldPadding10 .editorField { padding: 10px !important; }

.dataLblTPadding0 .iconLabel, .dataLblTPadding0 .editorLabel, .dataFldTPadding0 .editorField { padding-top: 0 !important; }
.dataLblBPadding0 .iconLabel, .dataLblBPadding0 .editorLabel, .dataFldBPadding0 .editorField { padding-bottom: 0 !important; }
.dataLblLPadding0 .iconLabel, .dataLblLPadding0 .editorLabel, .dataFldLPadding0 .editorField { padding-left: 0 !important; }
.dataLblRPadding0 .iconLabel, .dataLblRPadding0 .editorLabel, .dataFldRPadding0 .editorField { padding-right: 0 !important; }

.dataLblPaddingT0 .iconLabel, .dataLblPaddingT0 .editorLabel, .dataFldPaddingT0 .editorField { padding-top: 0 !important; }
.dataLblPaddingB0 .iconLabel, .dataLblPaddingB0 .editorLabel, .dataFldPaddingB0 .editorField { padding-bottom: 0 !important; }
.dataLblPaddingL0 .iconLabel, .dataLblPaddingL0 .editorLabel, .dataFldPaddingL0 .editorField { padding-left: 0 !important; }
.dataLblPaddingR0 .iconLabel, .dataLblPaddingR0 .editorLabel, .dataFldPaddingR0 .editorField { padding-right: 0 !important; }


.dataLblTPadding5 .iconLabel, .dataLblTPadding5 .editorLabel, .dataFldTPadding5 .editorField { padding-top: 5px !important; }
.dataLblBPadding5 .iconLabel, .dataLblBPadding5 .editorLabel, .dataFldBPadding5 .editorField { padding-bottom: 5px !important; }
.dataLblLPadding5 .iconLabel, .dataLblLPadding5 .editorLabel, .dataFldLPadding5 .editorField { padding-left: 5px !important; }
.dataLblRPadding5 .iconLabel, .dataLblRPadding5 .editorLabel, .dataFldRPadding5 .editorField { padding-right: 5px !important; }

.dataLblPaddingT5 .iconLabel, .dataLblPaddingT5 .editorLabel, .dataFldPaddingT5 .editorField, .dataFldPaddingTB5 .editorField { padding-top: 5px !important; }
.dataLblPaddingB5 .iconLabel, .dataLblPaddingB5 .editorLabel, .dataFldPaddingB5 .editorField, .dataFldPaddingTB5 .editorField { padding-bottom: 5px !important; }
.thumbnailSection.paddingL5, .dataLblPaddingL5 .iconLabel, .dataLblPaddingL5 .editorLabel, .dataFldPaddingL5 .editorField, .dataFldPaddingLR5 .editorField { padding-left: 5px !important; }
.thumbnailSection.paddingR5, .dataLblPaddingR5 .iconLabel, .dataLblPaddingR5 .editorLabel, .dataFldPaddingR5 .editorField, .dataFldPaddingLR5 .editorField { padding-right: 5px !important; }


.dataLblTPadding10 .iconLabel, .dataLblTPadding10 .editorLabel, .dataFldTPadding10 .editorField { padding-top: 10px !important; }
.dataLblBPadding10 .iconLabel, .dataLblBPadding10 .editorLabel, .dataFldBPadding10 .editorField { padding-bottom: 10px !important; }
.dataLblLPadding10 .iconLabel, .dataLblLPadding10 .editorLabel, .dataFldLPadding10 .editorField { padding-left: 10px !important; }
.dataLblRPadding10 .iconLabel, .dataLblRPadding10 .editorLabel, .dataFldRPadding10 .editorField { padding-right: 10px !important; }

.dataLblPaddingT10 .iconLabel, .dataLblPaddingT10 .editorLabel, .dataFldPaddingT10 .editorField, .dataFldPaddingTB10 .editorField { padding-top: 10px !important; }
.dataLblPaddingB10 .iconLabel, .dataLblPaddingB10 .editorLabel, .dataFldPaddingB10 .editorField, .dataFldPaddingTB10 .editorField { padding-bottom: 10px !important; }
.dataLblPaddingL10 .iconLabel, .dataLblPaddingL10 .editorLabel, .dataFldPaddingL10 .editorField, .dataFldPaddingLR10 .editorField { padding-left: 10px !important; }
.dataLblPaddingR10 .iconLabel, .dataLblPaddingR10 .editorLabel, .dataFldPaddingR10 .editorField, .dataFldPaddingLR10 .editorField { padding-right: 10px !important; }

/*--Margin overrides for cards--*/

.thumbnailSection.margin0, .dataLblMargin0 .iconLabel, .dataLblMargin0 .editorLabel, .dataFldMargin0 .editorField { margin: 0 !important; }
.dataLblMargin5 .iconLabel, .dataLblMargin5 .editorLabel, .dataFldMargin5 .editorField { margin: 5px !important; }
.dataLblMargin10 .iconLabel, .dataLblMargin10 .editorLabel, .dataFldMargin10 .editorField { margin: 10px !important; }

.thumbnailSection.marginT0, .dataLblMarginT0 .iconLabel, .dataLblMarginT0 .editorLabel, .dataFldMarginT0 .editorField { margin-top: 0 !important; }
.dataLblMarginB0 .iconLabel, .dataLblMarginB0 .editorLabel, .dataFldMarginB0 .editorField { margin-bottom: 0 !important; }
.dataLblMarginL0 .iconLabel, .dataFldLblMarginL0 .editorLabel, .dataFldLMargin0 .editorField, .imageSection.marginL0 { margin-left: 0 !important; }
.thumbnailSection.marginR0, .dataLblMarginR0 .iconLabel, .dataFldLblMarginR0 .editorLabel, .dataFldMarginR0 .editorField { margin-right: 0 !important; }

.dataLblMarginT5 .iconLabel, .dataLblMarginT5 .editorLabel, .dataFldMarginT5 .editorField { margin-top: 5px !important; }
.dataLblMarginB5 .iconLabel, .dataLblMarginB5 .editorLabel, .dataFldMarginB5 .editorField { margin-bottom: 5px !important; }
.dataLblMarginL5 .iconLabel, .dataLblMarginL5 .editorLabel, .dataFldMarginL5 .editorField { margin-left: 5px !important; }
.dataLblMarginR5 .iconLabel, .dataLblMarginR5 .editorLabel, .dataFldMarginR5 .editorField { margin-right: 5px !important; }

.dataLblMarginT10 .iconLabel, .dataLblMarginT10 .editorLabel, .dataFldMarginT10 .editorField { margin-top: 10px !important; }
.dataLblMarginB10 .iconLabel, .dataLblMarginB10 .editorLabel, .dataFldMarginB10 .editorField { margin-bottom: 10px !important; }
.thumbnailSection.marginL10, .dataLblMarginL10 .iconLabel, .dataLblMarginL10 .editorLabel, .dataFldMarginL10 .editorField { margin-left: 10px !important; }
.dataLblMarginR10 .iconLabel, .dataLblMarginR10 .editorLabel, .dataFldMarginR10 .editorField { margin-right: 10px !important; }

.dataLblMarginT15 .iconLabel, .dataLblMarginT15 .editorLabel, .dataFldMarginT15 .editorField { margin-top: 15px !important; }
.dataLblMarginB15 .iconLabel, .dataLblMarginB15 .editorLabel, .dataFldMarginB15 .editorField { margin-bottom: 15px !important; }
.dataLblMarginL15 .iconLabel, .dataLblMarginL15 .editorLabel, .dataFldMarginL15 .editorField { margin-left: 15px !important; }
.dataLblMarginR15 .iconLabel, .dataLblMarginR15 .editorLabel, .dataFldMarginR15 .editorField { margin-right: 15px !important; }

.dataLblMarginT20 .iconLabel, .dataLblMarginT20 .editorLabel, .dataFldMarginT20 .editorField { margin-top: 20px !important; }
.dataLblMarginB20 .iconLabel, .dataLblMarginB20 .editorLabel, .dataFldMarginB20 .editorField { margin-bottom: 20px !important; }
.dataLblMarginL20 .iconLabel, .dataLblMarginL20 .editorLabel, .dataFldMarginL20 .editorField { margin-left: 20px !important; }
.dataLblMarginR20 .iconLabel, .dataLblMarginR20 .editorLabel, .dataFldMarginR20 .editorField { margin-right: 20px !important; }

.lblTxtAlignRight .editorLabel, .fldTxtAlignRight .editorField { text-align: right; }
.lblTxtAlignLeft .editorLabel, .fldTxtAlignLeft .editorField { text-align: left; }
.font80Percent, .lblFont80Percent > .dataFieldContainer > .editorLabel, .fldFont80Percent > .dataFieldContainer > .editorField { font-size: 80%; }
.font90Percent, .lblFont90Percent  > .dataFieldContainer > .editorLabel, .fldFont90Percent > .dataFieldContainer > .editorField { font-size: 90%; }
.font110Percent, .lblFont110Percent  > .dataFieldContainer > .editorLabel, .fldFont110Percent > .dataFieldContainer > .editorField { font-size: 110%; }
.font120Percent, .lblFont120Percent  > .dataFieldContainer > .editorLabel, .fldFont120Percent > .dataFieldContainer > .editorField { font-size: 120%; }
.font150Percent, .lblFont150Percent  > .dataFieldContainer > .editorLabel, .fldFont150Percent > .dataFieldContainer > .editorField { font-size: 150%; }
.font200Percent, .lblFont200Percent  > .dataFieldContainer > .editorLabel, .fldFont200Percent > .dataFieldContainer > .editorField { font-size: 200%; }

.dataLblUppercase .editorLabel > label, .dataFldUppercase .editorField { text-transform: uppercase !important; }
.dataLblTxtAlignLeft .editorLabel > label, .dataFldTxtAlignLeft .editorField { text-align: left !important; }
.dataLblTxtAlignRight .editorLabel > label, .dataFldTxtAlignRight .editorField { text-align: right !important; }
.dataLblTxtAlignCenter .editorLabel > label, .dataFldTxtAlignCenter .editorField { text-align: center !important; }

.dataLblItalic .editorLabel > label, .dataFldItalic .editorField { font-style: italic; }

.dataLblFontBold .iconLabel, .dataLblFontBold label, .dataFldFontBold .editorField { font-weight: bold !important; }
.dataLblFontBold .iconLabel, .dataLblFontNormal label, .dataFldFontNormal .editorField { font-weight: normal !important;}

.font80Percent, .dataLblFont80Percent .iconLabel, .dataLblFont80Percent .editorLabel, .dataFldFont80Percent .editorField { font-size: 80%; }
.font90Percent, .dataLblFont90Percent .iconLabel, .dataLblFont90Percent .editorLabel, .dataFldFont90Percent .editorField { font-size: 90%; }
.font110Percent, .dataLblFont110Percent .iconLabel, .dataLblFont110Percent .editorLabel, .dataFldFont110Percent .editorField { font-size: 110%; }
.font120Percent, .dataLblFont120Percent .iconLabel, .dataLblFont120Percent .editorLabel, .dataFldFont120Percent .editorField { font-size: 120%; }
.font150Percent, .dataLblFont150Percent .iconLabel, .dataLblFont150Percent .editorLabel, .dataFldFont150Percent .editorField { font-size: 150%; }
.font200Percent, .dataLblFont200Percent .iconLabel, .dataLblFont200Percent .editorLabel, .dataFldFont200Percent .editorField { font-size: 200%; }



.bar {
    border-left: solid 1px;
    height: 1.5em;
    display: inline-block;
    margin: 0 5px -5px 5px;
}

.bar-separator{
    position: relative;
    padding-right: 10px;
}

.bar-separator:after{
    content: "";
    width: 1px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28),rgba(255, 255, 255, 0));
}
.bar-separator.dark:after{
    background: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, 0.28),rgba(0,0,0, 0));
}

.bar-separator:last-of-type:after, .bar-separator:last-of-type:hover:after{
    display: none;
}

.ease3ms {
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    transition: 0.3s ease;
}

.animate-pulse {
    display: block;
    animation: changescale 1s infinite;
}

#cookieTermsMsg {
    visibility: hidden;
    position: absolute;
    background-color: #fff;
    top: -100px;
    left: 0;
    right: 0;
    z-index: 10000;
    /*max-width: 1024px;*/
    -webkit-transition: top 0.3s ease-in-out;
    transition: top 0.2s ease-in-out;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

#cookieTermsMsg.view {
    visibility: visible;
    top: 0;
}

#cookieTermsMsg .cookieTermsMsgContainer {
    color: #656565;
    /*text-align: center;*/
    padding: 5px;
    margin: 0 auto;
    max-width: 1024px;
    overflow: hidden;
}

#cookieTermsMsg .cookieTermsMsgContainer .icon24 {
    margin-top: 2px;
    margin-right: 5px;
    float: left;
    vertical-align: top;
}

#cookieTermsMsg button {
    float: right;
    padding: 6px 20px;
    margin-left: 5px;
}

/*#cookieTermsMsg > .content {
    overflow: hidden;
}*/

#cookieTermsMsg .content {
    overflow: hidden;
    font-size: 1em;
    line-height: 1.3em;
    margin-top: 6px;
    margin-bottom: 6px;
}


/* Offline */
.offlineContainer {
    background: rgba(255,255,255,0.75);
    z-index: 2147483647;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.offlineSpinnerContainer {
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -48px;
    margin-left: -90px;
}

.offlineSpinnerMessage {
    text-align: center;
    font-size: 1.2em;
    line-height: 30px;
    font-weight: 600;
}

/* Default list style formatting */

.richText ul, .richText ol {
    list-style-position: inside;
}

.richText ul { list-style-type: disc; }
.richText ol { list-style-type: decimal; }

.richText ol > li, .richText ul > li,
.richText li > ul, .richText li > ol { padding-left: 1.5em; }



/********* Header *****/

#GoBack > h1 {
    font-weight:normal;
    display:inline-block;
    font-size: 1.2em;
    padding: 0 5px;
}

/** Regional preference */


/*--Icons--*/

/* dev mode */

header .devModeIndicator {
    display: none;
}

header.devModeEnabled .devModeIndicator{
    display: flex;
}

/* Logging enabled*/

header .loggingIndicator {
    display: none;
}

header.loggingEnabled .loggingIndicator{
    display: inline-block;
}

@-webkit-keyframes changescale {
    from {
        -webkit-transform: scale(0.7);
    }

    to {
        -webkit-transform: scale(1);
    }
}

.deepLink #GlobalHeader {
    display: none;
}

/******************* GLOBAL HEADER *****************/
.themeBgBannerImage{
    background-color: var(--ciaColourBackgroundBanner);
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    background-attachment: local;
}

@media (max-width: 1600px) {
    .themeBgBannerImage {
        background-position-y: 5px;
    }
}

@media (max-width: 600px) {
    .themeBgBannerImage {
        background-size: 100% 70px;
        background-position-y: 49px;
    }
}

/****************** FOOTER *********************/

#GlobalFooter {
    position: relative;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
    height: 25px;
    line-height: 25px;
}

#GlobalFooter.ui-v2{
    height: 40px;
    line-height: 1.5em;
}


#GlobalFooter > .fixedWidth{
    display: flex;
    align-items: center;
    justify-content: center;
}

#GlobalFooter .portalLabels {
    display: flex;
    overflow: hidden;
}

#GlobalFooter .noWrap {
    overflow: visible;
}

#GlobalFooter .footLicMsg{
    cursor:default;
}

#GlobalFooter .footLicMsgTip{
    visibility: hidden;
    position: absolute;
    bottom: 28px;
    padding: 0 10px;
    border-radius: 5px;
    opacity: 0;
    margin-left: -70px;
    transform:scale(0.8);
}

#GlobalFooter .footLicMsg:hover .footLicMsgTip {
    visibility: visible;
    transform:scale(1);
    opacity:1;
}

button.tryNewContainer {
    border-radius: 25px;
    border: none;
    display: none;
    padding: 0 ;

}

.showTryNewWorkplace button.tryNewContainer{
    display: flex;
}

.hasUserFeedback button.tryNewContainer{
    margin-right: 90px;
}

.tryNewContainer .chkLbl{
    padding: 2px;
    border-radius: 30px;
}

.tryNewContainer .chkBall{
    padding: 8px;
}

.icon10, .icon12, .icon16, .icon20, .icon24, .icon32, .icon48, .icon64,
.attachments .hintContainer .dragDropHint:before {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    -webkit-font-smoothing: antialiased;
}

.icon10 {
    width: 10px;
    height: 10px;
    line-height: 10px;
    font-size: 10px;
}

.icon12 {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;
}

.icon16 {
    width:16px;
    height:16px;
}

.icon18 {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
}

.icon20 {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
}

.actionButton .icon16, .actionButton .icon24 {
    margin-left: -5px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.icon11, .icon16, .icon24 {
background-repeat: no-repeat;
background-position: center;
}

.icon24
{
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    line-height: 24px;
    font-size: 24px;
}

.icon32
{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
    font-size: 32px;
}

.icon48 {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    line-height: 48px;
    font-size: 48px;
}

.icon64
{
    width: 64px;
    height: 64px;
    line-height: 64px;
    min-width: 64px;
    min-height: 64px;
    font-size: 64px;
}

.icon96 {
    width: 96px;
    height: 96px;
    line-height: 96px;
    min-width: 96px;
    min-height: 96px;
    font-size: 96px;
}

.icon128 {
    width: 128px;
    height: 128px;
    line-height: 128px;
    min-width: 128px;
    min-height: 128px;
    font-size: 128px;
}


.activeTileBody .icon16:before {
    content: "\E104";
}

/*
Size
 */

.iconSizeResponsive{
    height: 100%;
    width: 100%;
}

.iconSizeSmall{
    height: 16px;
    width: 16px;
}

.iconSizeDefault{
    height: 24px;
    width: 24px;
}

.iconSizeLarge{
    height: 48px;
    width: 48px;
}

.iconComponent.glyph{
    text-align: center;
    -webkit-font-smoothing: antialiased;
}


.iconComponent.glyph.iconSizeResponsive{
    font-size: 1vw; /* adjust according to available width*/
    line-height: 100%;
}

.iconComponent.glyph.iconSizeSmall{
    font-size: 12px;
    line-height: 16px;
}

.iconComponent.glyph.iconSizeDefault{
    font-size: 24px;
    line-height: 24px;
}

.iconComponent{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    border-radius: var(--ciaIconBorder-radius);
    overflow: hidden;
}

.iconComponent > img{
    height: 100%;
    width: 100%;
    display: block;
}

.missingImagePlaceholder.miGeneric {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/image.png?v=12.0.176.0');
    background-size: contain;
    height: 100%;
    width: 100%;
    display: block;
}
/*
    Generic icons
*/



.screensaver {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100000;
    display: none;
}

.screensaver .t1Logo
{
    position: fixed;
    width: 205px;
    height: 32px;
    left: 50%;
    margin-left: -103px;
    top: 50%;
    margin-top: -16px;
    background-image:var(--ciaT1LogoUrl);
    background-size: 100% 100%;
    border-radius: 10px;
}

.screensaver .innerBox {
    background-repeat: no-repeat;
    background-position: center;
}

td .dropdownControl
{
    height: 15px;
}

.dropdownControl.droppedDown {
    z-index: 3;
}

.dropdownControl.singleAction .handle {
    display: none!important;
}

.dropdownControl > .handle > span
{
    display: inline-block;
}

.dropdownPanel
{
    display:none;
    background-color: #fff;
    border: solid 1px #fff;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    min-width: 200px;
    font-size:12px;
}

.dropdownPanel.droppedDown
{
    display:inherit;
    position:absolute;
    z-index:9003;
    margin-top:0;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}


.dropdownPanelItemHeader
{
    font-size:1em;
    padding:6px 10px;
    line-height:16px;
    border-bottom:solid 1px;
}

.dropdownPanel > .menuLinks16
{
    vertical-align: top;
    float: left;
    width: 100%;
}

.dropdownPanelListItem {
    border-radius: 0;
    display:block;
    font-size:0.9em;
    white-space: nowrap;
    position: relative;

    border-color: transparent !important;
}

.dropdownPanelListItem.hidden {
    display: none!important;
}

.dropdownPanelListItem.itemDisabled:hover {
    background-image: none;
    cursor: default;
}

.dropdownPanelListItem.itemDisabled a{
    cursor: default;
}

.dropdownPanelListItem > .icon16 {
    position: absolute;
    top: 7px;
    left: 5px;
}

.dropdownPanelListItem > a, .dropdownPanelListItem > label {
    position: relative;
    display: block;
    line-height: 16px;
    padding: 7px 5px 7px 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.dropdownPanelListItem.dropdownControlSubMenu > a {
    padding-right: 30px;
}

.dropdownPanelListItem > a:hover {
    color: inherit;
    text-decoration: none;
}

.dropdownPanelListItem:hover, .dropdownPanelListItem.dropdownControlSubMenu.droppedDown
{
    background-color: var(--ciaColourBackgroundHighlightHover);
}

.topBar .dropdownPanelListItem:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac5.png?v=12.0.176.0');
}

.dropdownPanelListItem.dropdownControlSubMenu:hover
{
    cursor: pointer;
}

.dropdownPanelListItem > .link > .icon16 {
    position: absolute;
    left: 5px;
    top: 5px;
}

.dropdownPanelListItem.dropdownControlSubMenu > .icon16 {
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto;
}

.dropdownPanelListItem.dropdownControlSubMenu > .icon16:before {
    content: "\F047";
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction, .dropDownControlContainer > .hasDefaultAction > .handle
{
    display: inline-block;
    vertical-align: top;
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction
{
    position:relative;
    float:left;
    min-height: 16px;
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction:hover {
    z-index:1;
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction:before {
    content:"";
    width:1px;
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    background-color:#fff;
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction.primary:before {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.176.0') repeat top left;
}

.dropDownControlContainer > .hasDefaultAction > .defaultAction.primary.editAction > .glyph:before,
.dropDownControlContainer  .handle.editAction > .glyph:before{
    content: "\E078";
}


.dropDownControlContainer > .hasDefaultAction > .defaultAction.primary.addAction > .glyph:before,
.dropDownControlContainer  .handle.addAction > .glyph:before{
    content: "\E146";
}


.dropDownControlContainer > .hasDefaultAction > .handle
{
    position:relative;
    overflow:visible;
    line-height: 16px;
    margin-left: 5px;
}

.dropDownControlContainer > .hasDefaultAction > .handle > .icon16 {
    display: block;
}

.dropDownControlContainer > .hasDefaultAction > .handle:before {
    content:"";
    display:block;
    width:1px;
    position:absolute;
    top:0;
    bottom:0;
    left:-1px;
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.176.0');
}

.dropDownControlContainer > .hasDefaultAction > .handle.primary:before {
    background: none;
}

.dropDownControlContainer > .hasDefaultAction > .handle:hover:before, .dropDownControlContainer > .hasDefaultAction.droppedDown > .handle:before {
    display:none;
}

.formHeader .dropdownPanel ul {
    min-width:240px;
}

.fieldsContainer > .dropDownControlContainer > .dropdownControl {
    display: inline-block;
}

.dropdownControl > .handle > .iconComponent,
.dropdownControl > .handle.primary > .iconComponent
{
    display: inline-block;
    margin: 0 5px;
}


.dropdownPanelListItem.itemDisabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.dropdownControl > .handle > .glyph {
    width: 19px; /*The current ... icon is 19px wide, while most of the handle buttons have a fixed width of 16px (use icon16 class)*/
}

.hasSubMenu.more .glyph,
.dropdownControl > .handle > .glyph:before {
    content: var(--ciaIconDropdownMore);
}

.overlay {
    position: absolute;
    background: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9004;
    overflow: hidden;
    /* align everything inside the overlay in the center*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonOnHover, button.buttonOnHover, a.buttonStyle.buttonOnHover /*,
.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderResizer .nlsadd button,
.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderResizer .nlsclose button*/
 {
    background-color:var(--ciaColourBackgroundButtonOnHover);
    border-color:var(--ciaColourBorderButtonOnHover);
    box-shadow:none;
    -webkit-box-shadow:none;
}

.keysButton.buttonOnHover {
    /*background-color: rgba(255, 255, 255, 0.5);
    border: solid 1px #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);*/
}

.relatedDataPortlet td button {
    /* no padding for buttons inside grid cells */
    padding: 0 0 0 0;
}

a.buttonStyle {
    display:inline-block;
}

.contentLayoutContainer button, .mainActionBar button, .contentLayoutContainer a.buttonStyle,
/*.gridColumnGroupingPanel div.header, .header.dragging,*/
.viewSelectorControl .dropdownPanel button {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}


.contentContainer button.primary, a.buttonStyle.primary, .contentContainer button.positive,
.viewSelectorControl button.primary, #flow button.primary {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

button > *, a.buttonStyle > * {
    display: inline-block;
    vertical-align: top;
    line-height: 16px;
}

.buttonOnHover:hover, .touch .buttonOnHover:active, a.highlight
{
    border-radius:var(--ciaBorderRadiusButton);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    line-height: 16px;
}

.searchBtn {
    border-radius: 0 3px 3px 0;
    background: transparent;
    position: relative;
    border: solid 1px transparent;
    margin-left: -50px;
    width: 50px; /* enforce fixed width so zooming out won't change the layout */
    z-index: 1;
    box-shadow: none;
}

button.searchBtn:hover:before, .nlsfocused + button.searchBtn:before, button.searchBtn:focus:before {
    display: none;
}

.nlsfocused + button.searchBtn, button.searchBtn:focus {


    border-left: solid 1px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

button.searchBtn:hover, button.searchBtn:focus {
    border: solid 1px transparent;
    border-left: solid 1px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.02);

}

a.current.buttonStyle {
    background-color:inherit;
}


button:hover, .buttonOnHover:hover, a.buttonStyle:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac35.png?v=12.0.176.0');
    background-repeat: repeat;
}

button.primary:hover, button.searchBtn:hover, button.secondary:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac10.png?v=12.0.176.0');
    background-repeat: repeat;
}

a.buttonStyle:hover {
    text-decoration:none;
}

button[disabled]:hover {
    background-position: top left;
}

.buttonOnHover[disabled]:hover {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

.buttonLabel, a.buttonStyle .anchorLabel
{
    margin: 0 4px;
}

.buttonInformationCount
{
    font-size: 0.9em;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
}

.expandRight, .expandLeft, .collapseRight, .collapseLeft {
    padding:1px;
}

.expando, .expando.buttonOnHover:hover
{
    padding:1px;
}

.expando {
    background:none;
    border:solid 1px transparent;
    box-shadow:none;
}

button[disabled]
{
    opacity: 0.5;
    cursor: default !important;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/*--Flat action button--*/

.flatButton, .flatButtonOnHover {
    border: solid 1px transparent;
    box-shadow: none;
    background: none;

}

.flatButton, .flatButtonOnHover:hover {
    border: solid 1px transparent;
    box-shadow: none;
    background: none;
    background-color: rgba(0, 0, 0, 0.05);
}


/*--Link style for buttons--*/

button.linkStyle, .showPanelButton {
    background: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    text-shadow: none;
    line-height:normal;
}

button.linkStyle:hover, .showPanelButton:hover {
    cursor: pointer;
    text-decoration: underline;
}

/*--Navigation--*/
.goBack .icon16:before, .back .icon16:before {
    content: "\E042";
    font-size: 12px;
}

.listItemChooser .addItem .icon16:before {
    content: "\E021";
    font-size: 12px;
}

.refresh .icon16:before {
    content: "\E093";
}

.filter .icon16:before {
    content: "\E054";
}

.resetFilter .icon16:before {
    content: "\E004";
}

.search .icon16:before {
    content: "\E044";
}

.options .icon16:before {
    content: "\E043";

}

.list .icon16:before {
    content: "\E123";
}

.compactView .icon16:before {
    content: "\E106";
}

.detailView .icon16:before {
    content: "\E121";
}

.prevAction:before, .prev .icon16:before {
    content: "\E089";
}

.nextAction:before, .next .icon16:before {
    content: "\E090";
}

.new .icon16:before {
    content: "\E146";
    color: #238c00;
}

.edit > .icon16 {
    margin: 0 0 0 3px;
}

.edit > .icon16:before {
    content: "\E078";
}

.editablePanel > .topActionPane > .formActionButton.remove > .icon16:before, .remove.icon16:before {

    content: "\E067";
    color:#d50000;
}

.download > .icon16:before {
    content: "\E05A";
}


/*rename to dropdown*/
.dropDown .icon16:before, .actionsDropDown .icon16:before, #ContextualKeysButton .icon16:before {
    content: "\E045";
}

.relatedDataPortlet .dropDown .icon16:before {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
}


.hasSubMenu.more.primary .icon16, .dropdownControl > .handle.more.primary .icon16 {
    margin: 0 5px;
}

.topBar .dropdownControl > .handle > .icon16, .topBar .dropdownControl > .handle.primary > .icon16 {
    background: none;
}

.topBar .dropdownControl > .handle > .icon16 {
    float: right;
}

/*--Reveal, Expand, Move--*/

.expando .icon16:before, .expando.collapsed .icon16:before, .expandable.collapsed .expando .icon16:before, .searchPanel .expando.expanded.collapsed .icon16:before, .itemsList .expando.collapsed .icon16:before, .revealableDetails.collapsed .expando .icon16:before
{
    content: "\E064";
    font-size: 12px;
}

.expando.expanded .icon16:before, .expando .icon16:before, .expandable .expando .icon16:before, .itemsList .expando .icon16:before, .revealableDetails .expando .icon16:before
{
    content: "\E063";
    font-size: 12px;
}



.move.up .icon16:before {
    content: "\E111";
 }

.move.down .icon16:before {
    content: "\E108";
}

.expandRight .icon16:before {
    content: "\E246";
    font-size: 12px;
}

/*--Pickers--*/

.picker.picklist > .icon16:before {
    content: "\E045";
}

.picker.hierarchicalPicklist > .icon16:before {
    content: "\E258";
}

.picker.calendar > .icon16:before {
    content: "\E014";
}

.picker.calculator > .icon16:before {
    content: "\E011";
}

.picker.time > .icon16:before {
    content: "\E099";
}

/*--Generreal--*/

.setting .icon16:before {
    content: "\E055";
}


/*--Toggle view--*/

.listItemChooser .actionButtons .categorise .icon16:before {
    content: "\E259";
}

.sort .icon16:before {
    content: "\E126";
}

button.ticked .tick, .activeTick {
    display:block;
    width:12px;
    height:12px;
    position:absolute;
    top:-3px;
    right:-3px;
    border-radius:3px;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/tickwhite.png?v=12.0.176.0') no-repeat center;
}

.activeTick.icon12, .rdpActionBar button.ticked .icon12 {
    background-image: none;
}

.activeTick.icon12:before, .rdpActionBar button.ticked .icon12:before {
    content: "\E066";
    color: #fff;
}

button.ticked.selected .tick {
    right:0;
}


/*--Add, Remove--*/
.close .icon16:before, .delete .icon16:before {
    content: "\E058";
   }

.addNewRow .icon16:before {
    content: "\E129";
   }


.bin .icon16:before {
    content: "\E057";
}

div.primary button, button.primary.buttonOnHover, .chooser.droppedDown button.primary.buttonOnHover, button.primary.buttonOnHover,
button.positive, a.buttonStyle.positive, button.positive.buttonOnHover, .chooser.droppedDown button.positive.buttonOnHover, button.positive, button.positive.buttonOnHover {
    border: solid 1px transparent;

}

.primary .buttonLabel, a.buttonStyle.primary .anchorLabel, .positive .buttonLabel, a.buttonStyle.positive .anchorLabel,
.secondary .buttonLabel {
    min-width: 40px;
    text-align: center;
}

.positive.add .icon16 {
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plusgreendark.png?v=12.0.176.0') no-repeat center center;
}

.contentLayoutContainer div.primary button , a.buttonStyle.primary, .contentLayoutContainer div.positive button , a.buttonStyle.positive
{
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    text-align: center;
}

 /* Due to a bug in Ie9, we need to put the min-width on the inside span. Setting it to 42 will give the button a min-width of 60px. */
.contentLayoutContainer div.primary button span
{
    min-width: 42px;
}


/*--Standard Remove button--*/

button.remove {
    background: none;
    border: none;
    border-radius: 16px;
    padding: 0;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    opacity: 0.35;
}

button.remove:hover {
    opacity: 1;
}


button.remove .glyph.icon16:before {
    font-size: 12px;
    display: block;
}




/*--Consumer styles--*/

.consumerStyleWrapper .contentContainer button.primary, .consumerStyleWrapper a.buttonStyle.primary, .consumerStyleWrapper .contentContainer button.positive,
.consumerStyleWrapper .viewSelectorControl button.primary, .consumerStyleWrapper #flow button.primary {
    text-shadow:none;
    padding:11px;
    box-shadow:none;
}

.consumerStyleWrapper .contentContainer button.primary.defaultAction {
    min-width:160px;
    text-align:center;
    font-size: 1rem;
}

.consumerStyleWrapper .editablePanel > .bottomActionPane > .formActions {
    font-size: 1rem;
    padding: 5px 5px 5px 0;
    line-height: 40px;
}

.consumerStyleWrapper .editablePanel > .bottomActionPane > .formActions button.defaultAction,
.consumerStyleWrapper .contentContainer button.defaultAction.goForward,
.consumerStyleWrapper .contentContainer button.defaultAction.back {
    padding:11px;
    box-shadow:none;
}

.consumerStyleWrapper .contentContainer button.defaultAction.goForward .icon16:before {
    content:"";
}

.consumerStyleWrapper .contentContainer button.defaultAction.goForward .icon16 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' id='forward'%3E%3Cpath fill='%233b45e58' d='M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414'%3E%3C/path%3E%3C/svg%3E");
}

.consumerStyleWrapper .contentContainer .bottomActionPane #MoreActions .dropdownControl > .handle.more.primary {
    display:none;
}

.consumerStyleWrapper .contentContainer .bottomActionPane #MoreActions .dropdownControl .dropdownPanel {
    display: block;
    box-shadow: none;
    min-width: 0;
}

.consumerStyleWrapper .contentContainer .bottomActionPane #MoreActions .dropdownControl .dropdownPanel .dropdownPanelListItem > a {
    font-size: 1rem;
    background-color: #f2f2f2; /*--theme colorGreyWarmLightest--*/
    border: solid 1px transparent;
    padding: 11px;
    text-align: center;
    border-radius: 2px;
    min-width: 100px;
    box-sizing: border-box;
}

.consumerStyleWrapper .contentContainer .bottomActionPane #MoreActions .dropdownControl .dropdownPanel .dropdownPanelListItem > a:hover {
    background-color:#e5e5e5; /*--theme colorGreyWarmLighter-50--*/
}

::-ms-clear {
    display: none;
}

::-webkit-input-placeholder {
    color: rgba(0,0,0,0.4);
}

::-moz-placeholder {
    color: rgba(0,0,0,0.4);
}

::-ms-input-placeholder {
    color: rgba(0,0,0,0.4);
}

::placeholder {
    color: rgba(0,0,0,0.4);
}

.textBoxControl.noLabelWrap > .tbcEditorLabel > label > .labelInnerContainer,
.textBoxControl.noLabelWrap > .editorLabelAutoWidth > label > .labelInnerContainer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbcEditorLabel > label > .labelInnerContainer > .mandatory {
    padding-left: 5px;
}

.textBoxControl.readonly > .tbcEditorLabel > label > .labelInnerContainer > .mandatory,
.textBoxControl.readonly > .tbcEditorLabelAutoWidth > label > .labelInnerContainer > .mandatory {
    display: none;
}

.tbcEditorLabel > label > .labelInnerContainer > .hasExpression {
    padding-left: 5px;
    font-weight: normal;
    font-size: inherit;
}

.tbcInputContainer, .tbcInputInnerContainer {
    position: relative;
}

.tbcInputContainer {
    width: 100%;
}

.tbcInputContainer,
.readonlyTextBoxSpan,
.tbcInputInnerContainer > .sp-replacer > .sp-preview {
    display: block;
    box-sizing: border-box;
}

.textBoxControl.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton,
.textBoxControl.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    display: block;
}

.textBoxControl.spinnerShown > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    display: none !important;
}

.textBoxControlSpinnerContainer {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 2;
}

.textBoxControlSpinner {
    margin-top: 6px;
    margin-left: 6px;
	width: 4px;
    height: 4px;
    border-radius: 50%;
	background-color:rgba(0,0,0,0.25);

	animation-name: TextBoxSpinnerAnimation;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

.ie9 .textBoxControlSpinner, .ie8 .textBoxControlSpinner {
    margin-top: 0;
    margin-left:0;
	width: 16px;
    height: 16px;
    border-radius: 0;
    background:url('{0}//LukeF.Dev/C2P.MSFT.CLOUD/Workplace/v-12.0.1276.0/t/$Base/Images/pulseDot.gif?v={1}') no-repeat top center;
    animation: none;
}

@keyframes TextBoxSpinnerAnimation {
    0%   { opacity:1; }
    50%  { transform: scale(1.5, 1.5); opacity: 0.25; }
    100% { opactiy:1; }
}

.textBoxControl.multiLine > .tbcEditorField,
.standardStyle > .textBoxControl.multiLine > .tbcEditorField
{
    height: 100px;
}

.textBoxControl.multiLine.readonly > .tbcEditorField
{
    height: auto;
}

.textBoxControl.multiLine > .tbcEditorField > .tbcInputContainer {
    height: 100% ;
}

.tbcInputInnerContainer > .textBoxControlInput {
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.textBoxControlInput.placeholderVisible {
    color: lightgrey !important;
}

.tbcInputInnerContainer > .textBoxControlInput,
.tbcInputInnerContainer > .sp-replacer {
    background-color: #fff;
}

.textBoxControl.singleLine > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    text-overflow: ellipsis;
}

.textBoxControl.multiLine > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    height: 100%;
    overflow: auto;
    resize: none;
    white-space: pre-wrap;
}

.textBoxControl.multiLine.autoHeight > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    overflow: hidden;
}

.textBoxControl.disabled > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    background-color: transparent;
}

.tbcInputInnerContainer > .textBoxControlInput:focus,
.tbcInputInnerContainer > .sp-replacer:focus {
    outline: none;
}

.tbcInputInnerContainer > .sp-replacer {
    border: solid 1px transparent !important;
    padding: 0;
    box-sizing: border-box;
}

.tbcInputInnerContainer > .sp-replacer > .sp-dd {
    padding: 0 3px;
}

.tbcPicker {
    position: absolute;
    box-shadow: none;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 0;
}

.tbcPicker > .icon16 {
    display: block;
}

.textBoxControl.readonly > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    display: none;
}

.textBoxControl.readonly.multiLine > .tbcEditorField.blurContainer {
    overflow:auto;
}

.textBoxControl.color > .tbcEditorField > .readonlyTextBoxSpan {
    margin: 5px;
}

.textBoxControl.multiLine > .tbcEditorField > .readonlyTextBoxSpan {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.suggestionPaneWrapper {
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    border: solid 1px #fff;
    width: 100%;
    display: none;
    box-sizing: border-box;
    overflow: hidden;
}

.suggestionPaneWrapper.shown {
    display: block;
}

.suggestionPane {
    display:block;
    width: auto;
    left:0;
    background-color: #fff;
    max-height: 300px;
}

.textBoxControl > .editorField > .suggestionPaneWrapper.shown > .suggestionPane > table {
    width: 100%;
}

.suggestionPane.picklist, .suggestionPane.quickText {
    overflow-x: auto;
    background-color: #fff;
}

.suggestionPaneButtonContainer {
    border-top: solid 1px rgba(0,0,0,0.1);
}

.suggestionPaneAddQuickTextButtonInnerContainer, .suggestionPane.quickText + .suggestionPaneButtonContainer > .suggestionPaneButtonInnerContainer  {
    display:none;
}

.suggestionPane.quickText + .suggestionPaneButtonContainer > .suggestionPaneAddQuickTextButtonInnerContainer {
    display: block;
}

.suggestionPaneButton {
    background: #fff;
    border: none;
    box-shadow: none;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    line-height: 16px;
    box-sizing: border-box;
}

.suggestionPaneButtonInnerContainer.twoPicklistButtons > .suggestionPaneButton {
    width: 50%;
}

.suggestionPaneButtonInnerContainer.threePicklistButtons > .suggestionPaneButton {
    width:33%;
}

.suggestionPaneWrapper.shown > .suggestionPane.hierarchicalPicklist {
    height: 300px;
    overflow: hidden;
}

.suggestionPanePageHeader {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.suggestionPanePageHeading {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 34px;
    font-size: 1.2em;
    padding: 0 5px;
}

.suggestionPanePageBack, .suggestionPanePageClear {
    margin: 2px;
}

.suggestionPaneWrapper.shown > .suggestionPane.hierarchicalPicklist > .suggestionPanePage {
    float: left;
    vertical-align: top;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:300px;
}

.suggestionPaneWrapper.shown > .suggestionPane.hierarchicalPicklist > .suggestionPanePage > .suggestionItem {
    line-height: 18px;
    padding: 6px;
    cursor: pointer;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width: 100%;
    box-sizing: border-box;
}

.suggestionItem:focus {
    outline: none;
}

.suggestionPanePageItemLabel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 6px 0 0;
}

.suggestionPanePageItemNext {
    float: right;
    padding: 7px 7px 7px 6px;
    margin: -6px -6px -6px 0;
    border-left-style: solid;
    border-left-width: 1px;
}

.suggestionPanePageItemNext > .icon16 {
    display: block;
}

.suggestionPane.picklist > table > thead > .picklistHeaderRow, .suggestionPane.quickText > table > thead > .picklistHeaderRow {
    background: none;
    border: none;
    height: 25px;
}

.suggestionPane.picklist > table > thead > .picklistHeaderRow > .picklistHeaderCell, .suggestionPane.quickText > table > thead > .picklistHeaderRow > .picklistHeaderCell {
    white-space: nowrap;
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
    height: initial;
    min-width: initial;
    vertical-align: top;
    padding: 5px;
}

.suggestionPane.picklist > table > tbody > .picklistDataRow, .suggestionPane.quickText > table > tbody > .picklistDataRow {
    height: 36px;
}

.suggestionPane.picklist > table > tbody > .picklistDataRow > .picklistDataCell, .suggestionPane.quickText > table > tbody > .picklistDataRow > .picklistDataCell {
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px;
}

.suggestionPane.quickText > table > tbody > .picklistDataRow > .picklistDataCell > img {
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px;
    width: auto;
    height: auto;
}

.suggestionPane.picklist > table > tbody > .picklistDataRow > .picklistSelectCell{
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px 5px 0 5px;
    width: 25px;
}

.suggestionPane.picklist > table > tbody > .picklistDataRow.iconChooser .picklistDataCell.picklistKeyColumn img {
    max-height: 50px;
}

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

.picklistDataCell.tagItem > .tagCode {
    display: inline-block;
    font-size: 0.9em;
    color: white;
    text-transform: uppercase;
    line-height: 16px;
    min-width: 12px;
    text-align: center;
}


.suggestionPane.time {
    max-height: 242px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: auto;
    background-color: #fff;
}

.suggestionPaneWrapper.shown > .suggestionPane > .itemLink, .suggestionPaneWrapper.shown > .suggestionPane > table> tbody > tr > .itemLink {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 16px;
    position:relative;
    display:block;
    padding:5px;
    cursor: pointer;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top: solid 1px transparent !important;
}

.suggestionPaneWrapper.shown > .suggestionPane > .itemLink:hover, .suggestionPaneWrapper.shown > .suggestionPane > table> tbody > tr > .itemLink:hover {
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.5);
}

.suggestionPaneWrapper.shown > .suggestionPane > .itemLink.selected, .suggestionPaneWrapper.shown > .suggestionPane > table> tbody > tr.selected {
    z-index: 1;
}

.picklistSuggestNoRecords {
    margin: 10px 5px;
    display: block;
    font-style: italic;
    color: #656565;
}

.suggestionPaneButtonContainer {
    border-top: solid 1px rgba(0,0,0,0.1);
}

.suggestionPaneAddQuickTextButtonInnerContainer, .suggestionPane.quickText + .suggestionPaneButtonContainer > .suggestionPaneButtonInnerContainer  {
    display:none;
}

.suggestionPaneButton {
    background: #fff;
    border: none;
    box-shadow: none;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    line-height: 16px;
    box-sizing: border-box;
}

.suggestionPaneButtonInnerContainer.twoPicklistButtons > .suggestionPaneButton {
    width: 50%;
}

.suggestionPaneButtonInnerContainer.threePicklistButtons > .suggestionPaneButton {
    width:33%;
}

.suggestionPaneButton:hover,
.picklistFavouriteButton {
    background-color: rgba(0, 0, 0, 0.02);
}

.textBoxControl .favouritePicklist.e180,
.suggestionPaneButton.picklistStarFilter.e180 .glyph{
    color: gold;
}



/* Standard Style */

.standardStyle > .textBoxControl > .tbcEditorLabel,
.standardStyle > .textBoxControl > .tbcEditorLabelAutoWidth {
    display: inline-block;
    padding: 0 5px 0 0;
    width: 150px;
    vertical-align: top;
}

.standardStyle > .textBoxControl > .tbcEditorLabelAutoWidth {
    width: auto;
}

.standardStyle > .textBoxControl > .tbcEditorLabel > label,
.standardStyle > .textBoxControl > .tbcEditorLabelAutoWidth > label {
    display: block;
    line-height: 20px;
    padding: 4px 0;
    border: solid 1px transparent;
    font-size: 0.9em;
    font-weight: 600;
}

.standardStyle > .textBoxControl > .tbcEditorLabel > label > .labelInnerContainer,
.standardStyle > .textBoxControl > .tbcEditorLabelAutoWidth > label > .labelInnerContainer {
    display: block;
    overflow: hidden;
}

.standardStyle > .textBoxControl > .tbcEditorLabel > label > .charCount,
.standardStyle > .textBoxControl > .tbcEditorLabelAutoWidth > label > .charCount {
    display: none;
}

.standardStyle > .textBoxControl > .tbcEditorField {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.standardStyle > .textBoxControl.fillWidth > .tbcEditorField {
    width: calc(100% - 155px);
}

.standardStyle .textBoxControl .inputClearButton {
    top: 50%;
    right: 5px;
    margin-top: -10px;
}

.standardStyle > .textBoxControl.clearable.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer,
.standardStyle > .textBoxControl.clearable.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    padding-right: 26px !important; /* We want 22px padding for the clear button but need to add 4px padding also to include the normal padding of the container */
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlSpinnerContainer {
    right: 6px;
    top: 6px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer,
.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer {
    border-color: #c4c4c4;
    border-radius: 3px;
}

.standardStyle > .textBoxControl > .tbcEditorField {
    height: 30px;
}

.standardStyle > .textBoxControl.validationError > .tbcEditorField > .tbcInputContainer {
    border-color: #d00;
}

.standardStyle > .textBoxControl.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersOne {
    padding-right: 29px;
}

.standardStyle > .textBoxControl.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersTwo {
    padding-right: 59px;
}

.standardStyle > .textBoxControl.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersThree {
    padding-right: 89px;
}

.standardStyle > .textBoxControl.editable.picklistControl.picklistDisabled > .tbcEditorField > .tbcInputContainer.hasPicker .tbcPicker {
    display:none;
}

.standardStyle > .textBoxControl.editable.picklistControl.picklistDisabled > .tbcEditorField > .tbcInputContainer.hasPicker.pickersOne {
    padding-right: 0;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    box-sizing: border-box;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer,
.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    padding: 4px;
    height: 100%;
}

.standardStyle > .textBoxControl.validationError > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    background-color: #fff9f9;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    background-color: transparent;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .sp-replacer > .sp-preview {
    padding: 4px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    min-height: 30px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    top: -1px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker:last-of-type {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP2 {
    right: 29px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker {
    right: 59px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersOne > .tbcPicker,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker ~ .tbcPicker,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP3 {
    right: -1px;
}

.standardStyle > .textBoxControl.disabled > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    background-color: #f8f8f8;
}

.standardStyle > .textBoxControl.readonly > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    display: none;
}

.standardStyle > .textBoxControl.readonly > .tbcEditorField > .tbcInputContainer.hasPickers {
    padding-right: 4px !important;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker.picklist > .icon16:before {
    content: "\E045";
}

.standardStyle > .textBoxControl.disabled > .tbcEditorField > .tbcInputContainer {
    background-color: #f8f8f8;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput,
.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .sp-replacer > .sp-preview {
    font-size: 1.1em;
    line-height:20px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    cursor: default;
}

.standardStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .sp-replacer > .sp-preview {
    color: #656565;
    word-wrap: break-word;
}

.editablePanel.editMode .standardStyle > .textBoxControl.readonly > .tbcEditorField > .tbcInputContainer {
    background: rgba(0,0,0,0.03);
    border-color: #e1e1e1;
    word-wrap: break-word;
}

.standardStyle > .textBoxControl > .validationMessage {
    line-height: 18px;
    padding: 0 5px;
    margin: 5px 0 5px 5px;
}



/* Stacked Style */

.stackedStyle > .textBoxControl {
    display: inline-block;
    vertical-align: top;
    position: relative;
    max-width: 100%;
    margin-bottom: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #afafaf;
    border-radius : 2px;
    background-color: #ffffff;
    padding: 0;
}

.stackedStyle > .textBoxControl.fillWidth {
    display: block;
}

.stackedStyle > .textBoxControl.readonly {
    border-color: #e6e6e6;
    background-color: transparent;
}

.editablePanel.editMode .stackedStyle > .textBoxControl.readonly {
    background-color: #f8f8f8;
}

.stackedStyle > .textBoxControl.disabled {
    border-color: #c4c4c4;
    background-color: #f8f8f8;
}

.stackedStyle > .textBoxControl.validationError {
    border-color: #d00;
}

.stackedStyle > .textBoxControl > .tbcEditorLabel {
    display: block;
}

.stackedStyle > .textBoxControl > .tbcEditorLabel > label {
    display: block;
    position: relative;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 14px;
    padding: 0 4px;
    border: solid 1px transparent;
    cursor: text;
    word-wrap: break-word;
}

.stackedStyle > .textBoxControl.readonly > .tbcEditorLabel > label {
    cursor: default;
}

.stackedStyle > .textBoxControl.noLabelWrap > .tbcEditorLabel > label,
.stackedStyle > .textBoxControl.noLabelWrap > .editorLabelAutoWidth > label {
    height: 14px;
}

.stackedStyle > .textBoxControl > .tbcEditorLabel > label > .charCount {
    position: relative;
    float: right;
    height: 1em;
    line-height: 0.9em;
    padding: 2px;
    font-size: 0.9em;
    font-weight: 200;
    visibility: hidden;
    color: rgb(73, 73, 73);
    min-width: 20px;
    text-align: right;
}

.stackedStyle > .textBoxControl.active > .tbcEditorLabel > label > .charCount {
    visibility: visible
}

.stackedStyle > .textBoxControl > .tbcEditorLabel > label > .labelInnerContainer {
    display: block;
    overflow: hidden;
}

.stackedStyle > .textBoxControl > .tbcEditorField {
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
}

.stackedStyle > .textBoxControl.fillWidth > .tbcEditorField {
    display: block;
    width: 100%;
}

.stackedStyle > .textBoxControl.fillLabelWidth > .tbcEditorField {
    width: 100% !important;
}

.stackedStyle > .textBoxControl.singleLine > .tbcEditorField > .tbcInputContainer {
    height: 20px;
}

.stackedStyle > .textBoxControl.singleLine.color > .tbcEditorField > .tbcInputContainer {
    height: auto;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersOne {
    padding-right: 30px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersTwo {
    padding-right: 60px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersThree {
    padding-right: 90px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    box-sizing: border-box;
    padding: 1px 5px;
    height: 100%;
    overflow:hidden;
}

.stackedStyle > .textBoxControl.color > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    padding: 2px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    right: 4px;
}

.stackedStyle > .textBoxControl.clearable.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer,
.stackedStyle > .textBoxControl.clearable.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    padding-right: 27px !important; /* We want 22px padding for the clear button but need to add 5px padding also to include the normal padding of the container */
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlSpinnerContainer {
    right: 5px;
    top: 2px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.decimal,
.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.decimal,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.long,
.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.long,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.currency,
.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.currency {
    text-align: left;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput,
.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    font-size: 1.1em;
    line-height:16px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    border: solid 1px transparent;
    top: -10px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP2 {
    right: 30px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker {
    right: 60px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersOne > .tbcPicker,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker ~ .tbcPicker,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP3 {
    right: 0;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker > .icon16 {
    margin-top: 5px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker.time > .icon16 {
    margin-top: 0px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker.calendar > .icon16 {
    margin-top: 0px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker.picklist > .icon16:before {
    content: "\E045";
}

.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    cursor: default;
}

.stackedStyle > .textBoxControl.color > .tbcEditorField > .readonlyTextBoxSpan {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.stackedStyle > .textBoxControl.color > .tbcEditorField > .readonlyTextBoxSpan span {
    background: rgba(255, 255, 255, 0.6);;
    padding: 0 3px;
    margin-top: 2px;
    border: solid 1px rgba(255, 255, 255, 0.7);
}
.stackedStyle > .textBoxControl.color:hover .readonlyTextBoxSpan span{
    opacity: 1;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .sp-replacer > .sp-preview {
    color: #656565;

    padding: 1px 5px 3px 5px;
    min-height: 20px;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper {
    left: -1px;
    right: -1px;
    overflow: hidden;
}

.stackedStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper.positionBelow {
    margin-top: 1px;
}

.stackedStyle > .textBoxControl > .validationMessage {
    border: none;
    box-shadow: none;
    color: #DD0000;
    display: block;
}



/* Engaging Styles */

.tbcStyleContainer.engagingStyle {
    padding-bottom: 25px;
}

.engagingStyle > .textBoxControl {
    padding: 4px 0;
    display: inline-block;
    min-width: 0;
    background-color: #ffffff;
}

.engagingStyle > .textBoxControl > .tbcEditorLabel {
    display: block;
    position: relative;
    font-size: 1.4em;
    top: 23px;
    left: 4px;
    opacity: 0.75;
    color: #656565;
    cursor: text;
    transform-origin: left;
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: ease;
}

.engagingStyle > .textBoxControl.notActive.validationError > .tbcEditorLabel {
    color: red;
}

.engagingStyle > .textBoxControl.readonly > .tbcEditorLabel,
.engagingStyle > .textBoxControl.notEmpty.notActive > .tbcEditorLabel {
    transition: none;
}

.engagingStyle > .textBoxControl.readonly > .tbcEditorLabel,
.engagingStyle > .textBoxControl.active > .tbcEditorLabel,
.engagingStyle > .textBoxControl.notEmpty > .tbcEditorLabel,
.engagingStyle > .textBoxControl.validationError > .tbcEditorLabel {
    transform: scale(.8) translateY(-32px);
    opacity: 0.65;
}

.engagingStyle > .textBoxControl.active > .tbcEditorLabel {
    opacity: 1;
}

.engagingStyle > .textBoxControl.notActive.empty > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    opacity: 0;
}

.engagingStyle > .textBoxControl.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput{
    opacity:1;
}

.engagingStyle > .textBoxControl > .tbcEditorLabel > label {
    position: relative;
    line-height: 16px;
}

.engagingStyle > .textBoxControl > .tbcEditorLabel > label > .charCount {
    display: none;
}

.engagingStyle > .textBoxControl > .tbcEditorLabel > label > .labelInnerContainer {
    cursor: default;
}

.engagingStyle > .textBoxControl > .tbcEditorField {
    display: block;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.25);
}

.engagingStyle > .textBoxControl.readonly > .tbcEditorField {
    border-bottom-color: transparent;
}

.engagingStyle > .textBoxControl.fillWidth > .tbcEditorField {
    display: block;
    width: 100%;
}

.engagingStyle > .textBoxControl.fillLabelWidth > .tbcEditorField {
    width: 100% !important;
}

.engagingStyle > .textBoxControl > .tbcEditorField:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    transform: scaleX(0);
    transform-origin: 50%;
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: ease;
}

.engagingStyle > .textBoxControl.editable.notActive.validationError > .tbcEditorField {
    border-bottom-color: red;
}

.engagingStyle > .textBoxControl.active > .tbcEditorField:after {
    transform: scaleX(1);
}

.engagingStyle > .textBoxControl.singleLine > .tbcEditorField > .tbcInputContainer {
    height: 30px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersOne {
    padding-right: 30px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersTwo {
    padding-right: 60px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.hasPicker.pickersThree {
    padding-right: 90px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    height: 100%;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer,
.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    box-sizing: border-box;
    padding: 2px 5px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    right: 4px;
    top: 6px;
}

.engagingStyle > .textBoxControl.clearable.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer,
.engagingStyle > .textBoxControl.clearable.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    padding-right: 27px !important; /* We want 22px padding for the clear button but need to add 5px padding also to include the normal padding of the container */
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlSpinnerContainer {
    right: 5px;
    top: 7px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.decimal,
.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.decimal,
.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.long,
.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.long,
.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput.currency,
.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan.currency {
    text-align: left;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    background: none;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput,
.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan,
.engagingStyle > .textBoxControl.multiselect .multiSelectItem{
    font-size: 1.4em;
    line-height: 26px;
	color: #333;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    border: solid 1px transparent;
    top: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.engagingStyle > .textBoxControl.picklistControl > .tbcEditorField > .tbcInputContainer > .tbcPicker,
.engagingStyle > .textBoxControl.active > .tbcEditorField > .tbcInputContainer > .tbcPicker,
.engagingStyle > .textBoxControl:hover > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    opacity: 0.65;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker:hover {
    opacity: 1;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP2 {
    right: 30px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker {
    right: 60px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersOne > .tbcPicker,
.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker ~ .tbcPicker,
.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP3 {
    right: 0;
}

.engagingStyle > .textBoxControl.readOnly > .tbcEditorField > .tbcInputContainer > .tbcPicker,
.engagingStyle > .textBoxControl.disabled > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    display: none;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker.picklist > .icon16:before {
    content: "\E064";
}

.engagingStyle > .textBoxControl > .tbcEditorField > .readonlyTextBoxSpan {
    cursor: default;
    color: #656565;
    min-height: 30px;
}

.engagingStyle > .textBoxControl.singleLine > .tbcEditorField > .readonlyTextBoxSpan {
    word-wrap: break-word;
    white-space: normal;
}

.engagingStyle > .textBoxControl.singleLine.noReadonlyValueWrap > .tbcEditorField > .readonlyTextBoxSpan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engagingStyle > .textBoxControl > .validationMessage {
    color: red;
    position: absolute;
    white-space: nowrap;
    font-size: 0.9em;
    opacity: 0.75;
    left: 0;
    bottom: -15px;
    border: none;
    box-shadow: none;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper {
    overflow: hidden;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper.positionBelow {
    margin-top: 2px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > table > thead > .picklistHeaderRow > .picklistHeaderCell {
    padding: 10px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > .itemLink,
.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > table > tbody > .picklistDataRow > .picklistDataCell,
.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > table > tbody > .picklistDataRow > .picklistSelectCell{
    padding: 10px;
    color:#656565;
    border: none;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > .itemLink:hover,
.engagingStyle > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPane > table > tbody > .picklistDataRow:hover {
    background-color: rgba(0,0,0,0.03);
    text-decoration: none;
}

.textBoxControl > .tbcEditorField > .suggestionPaneWrapper .suggestionPaneSpinnerContainer.spinnerShown {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
}

.textBoxControl > .tbcEditorField > .suggestionPaneWrapper .suggestionPaneSpinnerContainer.spinnerShown > .itemSpinner {
    position:relative;
    top: 50%;
    margin-top: -24px;
}

.textBoxControl > .tbcEditorField > .suggestionPaneWrapper > .suggestionPaneSpinnerContainer {
    display: none;
}


/*--Consumer styles--*/
.fieldsContainer .horizLayout > .tbcStyleContainer.consumerStyle {
    margin:0;
    padding-right:16px;
}

.sideBySideContainer > .sideBySide.consumerStyle {
    margin:0;
    padding-right:16px;
}

.sideBySideContainer > .sideBySide.consumerStyle + .subsequentControl.plainText {
    margin-top: 12px;
}

.sideBySideContainer > .sideBySide.consumerStyle + .subsequentControl > .checkBoxControl {
    margin-top:39px;
}

.consumerStyle.tbcStyleContainer > .textBoxControl {
    display: inline-block;
    min-width: 0;
    padding:0;
    vertical-align: top;
    position: relative;
}

.consumerStyle.tbcStyleContainer .tbcInputContainer {
    height:40px;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.multiLine .tbcInputContainer {
    height:60px;
}

.consumerStyle.tbcStyleContainer .tbcInputContainer.hasPicker {
    padding-right:40px;
}

.consumerStyle.tbcStyleContainer .tbcInputContainer.hasPicker.pickersTwo {
    padding-right:80px;
}

.consumerStyle.tbcStyleContainer .tbcInputContainer.hasPicker.pickersThree {
    padding-right:120px;
}

.consumerStyle.tbcStyleContainer .textBoxControlInput,
.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan {
    line-height: 26px;
    min-height: 40px;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty.active.clearable .textBoxControlInput,
.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty.clearable .tbcInputContainer:hover .textBoxControlInput {
    padding-right:40px;
}

.consumerStyle.tbcStyleContainer .tbcPicker.address {
    border-left:transparent;
}

.consumerStyle.tbcStyleContainer .tbcPicker.address:hover {
    background-color:transparent;
}

.consumerStyle.tbcStyleContainer .suggestionPaneWrapper {
    box-shadow:none;
    border:solid 1px #3b4e58; /*---potentially needs to bind to theme colour--*/
    left:-1px;
    min-width: calc(100% + 2px);
    width: auto;
}

.consumerStyle.tbcStyleContainer .suggestionPaneWrapper.shown .itemLink,
.consumerStyle.tbcStyleContainer .picklistSuggestNoRecords {
    border:none;
    padding:15px 18px;
    line-height:20px;
    margin:0;
}

.consumerStyle.tbcStyleContainer .suggestionPane.picklist .picklistHeaderCell,
.consumerStyle.tbcStyleContainer .suggestionPane.quickText .picklistHeaderCell,
.consumerStyle.tbcStyleContainer .suggestionPane.picklist .picklistDataCell {
    padding:15px 8px;
    border-color: transparent;
    color:inherit;
}

.consumerStyle.tbcStyleContainer .suggestionPane.picklist .picklistHeaderCell {
    font-weight:600;
}

.consumerStyle.tbcStyleContainer .suggestionPaneButton {
    display:flex;
    color:inherit;
}

.consumerStyle.tbcStyleContainer .suggestionPaneButton .buttonLabel {
    flex:1;
    line-height:20px;
}

.consumerStyle.tbcStyleContainer .suggestionItem:hover,
.consumerStyle.tbcStyleContainer .suggestionItem.selected {
    background:#e5e5e560;
}

.consumerStyle.tbcStyleContainer .tbcEditorLabel .mandatory,
.consumerStyle.tbcStyleContainer .tbcEditorLabelAutoWidth .mandatory {
    padding:0;
    padding-left: 4px;
    color:#ff7a00;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    line-height: 10px;
    height: 10px;
}

/*** Action Container (Expand/Collapse buttons etc) style ***/

.textboxActionContainer {
    position: absolute;
    right: 4px;
    bottom: 4px;
}

.textboxAction {
    clear: both;
    float: none;
    border: none;
    margin-left: 4px;
    background: none;
    box-shadow: none;
}

.textBoxControl .expandCollapseAction .icon16:before {
    content: '\e052';
}

.textBoxControl.expanded .expandCollapseAction .icon16:before {
    content: '\e053';
}

.textBoxControl.expanded .tbcEditorField.blurContainer {
    width: 100%!important;
}

.textBoxControl.expanded.multiLine > .tbcEditorField > .tbcInputContainer {
    height: 100%;
}
.textBoxControl.expanded{
    width:100%;
}

a {
    cursor:pointer;
    text-decoration:none;
}

a:hover, button.linkStyle:hover, .showPanelButton:hover, button.linkStyle .span:hover, .linkCol:hover {
    text-decoration:underline;
}

.link {
    word-break: break-all;
}

.horizLayout > .syncLink, .horizLayout > .wizardLink, .horizLayout > .dataLink
{
    line-height:22px;
}

.horizLayout > a.serverActionLink
{
    line-height: 30px;
}

.horizLayout > .editorLabelAutoWidth > .syncLink, .horizLayout > .editorLabel > .syncLink
{
    line-height:20px;
    padding: 4px 0;
    display: inline-block;
    border: solid 1px transparent;
}
.tile {
    z-index: 1;
}


.tile > .iconContainer {
    width:64px;
    height:64px;
    display:block;
    margin:8px auto 4px auto;
	transform: scale(0.9, 0.9);
	image-rendering: -webkit-optimize-contrast;
}

.tile > .iconContainer {
    padding:0;
    border-radius: 50%;
    -moz-border-radius:50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.tile.dual > .iconContainer {
	margin: 8px 0 4px 33px;
}


.workplaceRoles .tile:not(.disabled):not(.folder):hover .iconContainer,
#popupTileContainerWrapper .tile:not(.disabled):hover .iconContainer {
    width: 64px;
    height: 64px;
    transform: scale(1) translate(0, -12px);
}



.tile > .iconContainer > span, #popupTileContainerWrapper .tile > .iconContainer > span {
    padding:0;
    display:block;
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    border-radius: 50%;
}

.tile > .iconContainer > span
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.tile > .iconContainer .notificationCount
{
    position:absolute;
    top: 0;
    right:-5px;
    color: #fff;
}

/*--Anchor tag for tile--*/

.tile > .hyperlink {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
}

.majorTiles .tile.expanded > .hyperlink {
    z-index: 1;
    height: 90px;/*the same height as .tile.expanded .header*/
}

.tile > .hyperlink:hover {
    text-decoration: none;
    border-radius: 3px;
}

.tile.role > .hyperlink:hover {
    background: none;
}

.tile.role:hover {
    background-color: rgba(0,0,0,0.1);
    text-decoration: none;
}

.tile > .titleWrapper, .tile span.inlineHeader {
    text-align:center;
    font-size:0.9em;
    font-weight:normal;
    overflow: hidden;
    font-family:inherit;
    font-family: Osans, Arial, sans-serif;
    line-height: 1.3em;
    height: 3.9em;
    vertical-align: middle;
}

.tile.role > .title, .tile.role span.inlineHeader {
    width: auto;
}

.tile > .titleWrapper {

    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
}

.tile > .titleWrapper > span {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

.tile .title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 5em;
}

.tile:hover .title {
    text-decoration: underline;
}

.role:hover .title, .folder .title, .disabled .title {
    text-decoration: none;
}

.tile.disabled:hover .title {
    text-decoration: none;
}

.tile span.inlineHeader .block {
    height: 10px;
}

.role  span.roleBehaviour {
    display: none;
    line-height: 1em !important;
    opacity: 0.8 !important;
    font-size: 0.8em;
    position: absolute;
    font-style: italic;
    text-transform: none;
    bottom: 2px;
    transition: bottom 0.3s ease;
    -webkit-transition: bottom 0.3s ease;
}

.dispRoleType .role span.roleBehaviour {
    display: block;
}

.role.selected span.roleBehaviour {
    bottom: 5px;
}

.notificationCount {
    padding:1px 4px;
    border:none;
    font-weight:600;
    color:white;
    font-size:12px;
    min-width:14px;
    line-height: 12px;
    text-align:center;
    border-radius:12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-transition:0.05s linear;
    -moz-transition:0.05s linear;
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
}

.tile.externalurl > a >span {
    background-size: cover;
}

.tile.disabled .iconContainer {
    opacity: 0.3;
}

.disabled .iconContainer {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%);
}

.disabled * {
    cursor: inherit;
}



@media \0screen {
    .tile.disabled .iconContainer {
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    }
}

.fieldsContainer {
    padding:0 0 10px 0;
}

.editablePanel > .content > .panel.fieldSet > .fieldsContainer {
    padding-top: 10px;
}

.descriptiveText, .descriptiveTextForTable
{
    font-size: 0.9em;
    padding: 5px 0;
    line-height: 1.2em;
}

.panel.fieldSet > .expandable.collapsed > .topActionPane  {
    display: none;
}

.panel.fieldSet > .header > .topActionPane > .panelTopActionControl {
    vertical-align: middle;
}

.panel.fieldSet > .header > .topActionPane > .panelTopActionControl ~ .panelTopActionControl {
    margin-left: 5px;
}


/* Standard Style */

.panel.standardStyle.fieldSet
{
    padding: 0 0 0 35px;
    position: relative;
}

.panel.standardStyle.fieldSet > .header
{
    padding: 10px 0;
    height: 38px;
    line-height: 14px;
    box-sizing: border-box;
}

.panel.standardStyle.fieldSet > .header > .headerTextContainer > .headerText
{
    font-size: var(--ciaFontSizePanelHeading);
    text-transform: var(--ciaFontTransformPanelHeading);
    font-weight: var(--ciaFontWeightPanelHeading);
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-block;
    vertical-align: middle;
}

.panel.standardStyle.fieldSet > .expandable {
    cursor:pointer;
}

.panel.standardStyle.fieldSet > .expandable > .expando {
    float:left;
    border:none;
    opacity: 0.5;
    display: inline-block;
    vertical-align: middle;
    margin-left: -25px;
}

.panel.standardStyle.fieldSet > .expandable:hover > .expando {
    opacity: 1;
}

.panel.standardStyle.fieldSet > .header > .headerControl {
    display: inline-block;
    vertical-align: middle;
}

.panel.standardStyle.fieldSet > .header > .topActionPane  {
    float: right;
    margin-top: -10px;
    line-height: 38px;
}


/* Engaging Style */

.panel.engagingStyle.fieldSet {
    padding: 0 35px;
    margin: 20px 0;
    position: relative;
}

.panel.engagingStyle.fieldSet .panel.engagingStyle.fieldSet {
    padding-right: 0; /* Nested sections do not need additional right padding */
}

.panel.engagingStyle.fieldSet > .header {
    background-color: rgba(0,0,0,0.05);
    border-top: dashed 1px rgba(0,0,0,0.1);
    padding: 15px 5px 15px 35px;
    margin: 0 -35px;
    line-height: 16px;
    box-sizing: border-box;
}

.panel.engagingStyle.simple > .header {
    margin-top: 20px;
    padding: 15px 0;
}

.panel.engagingStyle > .header > .headerTextContainer > .headerText {
    font-weight: 600;
    padding: 4px 0;
}

.panel.engagingStyle.simple > .header > .headerTextContainer > .headerText {
    font-size: 1.2em;
}

.panel.engagingStyle.fieldSet > .header > .headerTextContainer > .headerText {
    font-size: 1.6em;
    display: inline-block;
    vertical-align: middle;
}

.panel.engagingStyle > .header > .headerTextContainer > .subHeaderText {
    color: #656565;
    opacity: 0.5;
    line-height:16px;
    padding: 4px 0;
    font-size: 1.2em;
}

.panel.engagingStyle.fieldSet > .header > .headerTextContainer > .subHeaderText {
    margin-left: 35px;
}

.panel.engagingStyle.fieldSet > .expandable {
    cursor:pointer;
}

.panel.engagingStyle.fieldSet > .expandable > .expando {
    float: left;
    width: 35px;
    border: none;
    opacity: 0.5;
    vertical-align: middle;
    padding: 4px 0;
    margin-left: -30px;
}

.panel.engagingStyle.fieldSet > .expandable:hover > .expando {
    opacity: 1;
}

.panel.engagingStyle.fieldSet > .header > .topActionPane  {
    float: right;
    margin-top: -3px;
}


/* Workflow Styles */

.myWorkflowInbox .priorMessages
{
    width: auto;
    color: red !important;
    text-align: left;
    padding-left: 10px;
}

.myWorkflowInbox .decisionPromptsPanel
{
    padding: 10px;
}

.myWorkflowInbox .decisionPromptsLabel
{
    padding-bottom: 10px;
}

.myWorkflowInbox .editorLabel.decisionPromptsLabel
{
    width: auto;
}

.workflowPopup .editorLabel.workflowPopupLabel
{
    width: auto;
    max-width: 450px;
    padding-bottom: 10px;
}

.myWorkflowInbox .fieldSet.subAttachment
{
    padding: 0;
    border: none;
}

.myWorkflowInbox .fieldSet.subAttachment > header
{
    display: none;
}





/*--Consumer Style--*/

.editablePanel > .content > .panel.fieldSet.consumerStyle > .fieldsContainer {
    padding-top:12px;
    padding-bottom:48px;
}

.panel.fieldSet.consumerStyle > .fieldsContainer > .editorLabelAutoWidth[style*="font-weight: bold"]:first-child {
    font-weight:600 !important;
}





.panel.cosumerStyle.fieldSet .panel.engagingStyle.fieldSet {
    padding-right: 0; /* Nested sections do not need additional right padding */
}

.panel.consumerStyle.fieldSet > .header {
    border-top: solid 2px;  /*--theme card border style?--*/
    padding: 4px 0;
    line-height: 16px;
    box-sizing: border-box;
}

.panel.consumerStyle.simple > .header {
    margin-top: 20px;
    padding: 8px 0;
}

.panel.consumerStyle > .header > .headerTextContainer > .headerText {
    font-weight: 600;
    padding: 4px 0;
}

.panel.consumerStyle.simple > .header > .headerTextContainer > .headerText {
    font-size: 1.2em;
}

.panel.consumerStyle.fieldSet > .header > .headerTextContainer > .headerText {
    font-size: 1.6em;
    display: inline-block;
    vertical-align: middle;
}

.panel.consumerStyle > .header > .headerTextContainer > .subHeaderText {
    color: #656565;
    opacity: 0.5;
    line-height:16px;
    padding: 4px 0;
    font-size: 1.2em;
}

.panel.consumerStyle.fieldSet > .header > .headerTextContainer > .subHeaderText {
    margin-left: 35px;
}

.panel.consumerStyle.fieldSet > .expandable {
    cursor:pointer;
}

.panel.consumerStyle.fieldSet > .expandable > .expando {
    float: left;
    width: 24px;
    border: none;
    opacity: 0.5;
    vertical-align: middle;
    padding: 4px 0;
}

.panel.consumerStyle.fieldSet > .expandable:hover > .expando {
    opacity: 1;
}

.panel.consumerStyle.fieldSet > .header > .topActionPane  {
    float: right;
    margin-top: -3px;
}


body > .formNotReadyOverlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.mainActionBar {
    padding: 4px 10px;
}

.form > section:first-child,
.form > .ie8section:first-child {
    border-top: none;
}

/* Control Container */

.controlContainer {
    padding: 4px 0;
    vertical-align: top;
    position: relative;
}

.stackedContainer > .controlContainer {
    padding: 0;
    display: inline-block;
    margin-bottom: 8px;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #afafaf;
    border-radius: 2px;
}

.stackedContainer > .controlContainer.relatedField {
    margin-bottom: 0;
    border-bottom: solid 1px transparent;
}

.stackedContainer > .controlContainer.active {
    border-color: #9c9c9c;
}

.stackedContainer > .controlContainer.readonly {
    background-color: transparent;
    border: solid 1px #e6e6e6;
}

.controlContainer:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

.editablePanel.editMode .stackedContainer > .controlContainer.readonly {
    background-color: rgba(0, 0, 0, 0.03);
}

.controlContainer > .editorField > a {
    display: inline-block;
}

/* Text box input */
.editorField
{
    display:inline-block;
    vertical-align:top;
}

.editorField.stacked
{
    display:inline-block;
    vertical-align:top;
    width:200px;
    padding:4px 5px 4px 0;
}

/* Stacked editorFields */



/* input, text area */

.widthAuto
{
    width: auto;
}

input[readonly] , .editablePanel textarea[readonly], .editablePanel select[readonly], .editorField > .readonlyTextBoxSpan
{
    border : transparent ;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

textarea.disabled
{
    color: rgb(160,160,160);
}

.readonly, .editorField .readonlyTextBoxSpan
{
    background:transparent;
    /* dont use [word-wrap: break-word;] here as this causes in supergrid text ellipsis in IE10 */
}

.editorField .readonlyTextBoxSpan {
    word-wrap: break-word;
}

.editorField input, .editorField select, .editorField textarea {
    margin-right:5px;
}

.mandatory {
    color: #DD0000;
}

.decimal, .long, .currency
{
    text-align: right;
}

.validationMessage
{
    padding: 3px;
    background: white;
    border: solid 1px #D00;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    font-size: 0.9em;
    vertical-align: middle;
    white-space: nowrap;
    display: inline-block;
}

.stackedContainer .validationMessage {
    border: none;
    box-shadow: none;
    color: #d00;
    display: block;
}

.editorField select {
    -webkit-border-radius:0;
    height: 30px;
}

.stackedContainer > .controlContainer > .editorField select {
    height: 18px;
    box-sizing: content-box;
    padding: 0;
}

.comboBoxControl.readonly select {
    background-color: white;
    border: none;
    color: #000;
    -webkit-appearance: none;
}


/*--Subsequent controls--*/

.firstControl.sideBySide, .subsequentControl.sideBySide {
    display: inline-block;
}

/*--Form Field Info--*/

.frmFldInfo {
    font-size: 0.9em;
    color: #bbb;
}



/* This is fix for IE & FF. Hides the dropdown button in readonly mode. */
.comboBoxControl.readonly select
{
    width: 200%;
}

.comboBoxControl.readonly .editorField
{
    overflow: hidden;
}

.invalid
{
    background-color: #FCC1B8;
}


input[type="text"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea, .editorField .readonlyTextBoxSpan {
    padding:4px;
    border:solid 1px #c4c4c4;
    font-family:Osans, Arial, sans-serif;
    font-size:1.1em;
    color: #656565;
}

.stackedContainer input[type="text"], .stackedContainer input[type="number"], .stackedContainer input[type="password"], .stackedContainer input[type="date"], .stackedContainer input[type="datetime-local"], .stackedContainer select, .stackedContainer textarea, .stackedContainer .editorField .readonlyTextBoxSpan {
    border-color: transparent;
}


input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"] {
    min-height: 15px;
}

.stackedContainer input[type="text"]:disabled {
    background-color: #fff;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


input, textarea, .editorField .readonlyTextBoxSpan {
    -webkit-appearance:none;
    -webkit-border-radius:0;
}

input[type="radio"] {
    -webkit-appearance: radio;
    width: 20px !important;
    display: inline-block;
}

/*--Various widths for labels and fields--*/

.lblWidth120 .editorLabel, .fldWidth120 .editorField
{
    width: 120px;
}

.lblWidth200 .editorLabel, .fldWidth200 .editorField input
{
    width: 200px;
}


.gridActions a
{
    clear:none;
    width:16px;
    height:16px;
    padding:2px;
    margin:0 3px;
    border:solid 1px #a9c1de;
}

table tbody .formActions
{
    float: right;
    margin-top:-3px;
}

table .formActions, .table .formActions li
{
    margin: 0;
    padding: 0;
}

/*.formActions, */.formFilters
{
    display: inline-block;
    padding: 5px;
}


table .formActions li, table .formActions li:hover
{
    background:none;
}

#GoBack:focus, #ShowFlow:focus,  #GlobalHeader .userNavigation > button:focus, #ScreenResize:focus, #T1UniHelp:focus, #flow #CloseFlow:focus /* Focus styles for header bar and flow blind. */
 {
    outline: none;
    box-shadow: none;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac5.png?v=12.0.176.0') repeat top left;
    background-color: rgba(255, 255, 255, 0.05);

}

 #GlobalHeader .viewSelectorControl > button:focus {
     outline: none;
     box-shadow: none;
 }

.notificationHeaderButton:focus {
    outline: none;
    box-shadow: none;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac20.png?v=12.0.176.0');
    background-repeat: repeat;
    border-color: rgba(255,255,255, 0.5);
}

.stackedContainer > .dataLinkControl > .editorField {
    padding: 0;
}

.controlContainer .textBoxControlInput:focus {
    outline: none !important;
}

.stackedContainer > .controlContainer input:focus, .stackedContainer > .controlContainer textarea:focus, .stackedContainer > .controlContainer button:focus, .stackedContainer > .controlContainer select:focus {
    box-shadow: none;
    outline: none !important;
    border-color: transparent;
}

.textWrapper
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.inputClearButton {
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    z-index: 2;
    display: none;
    opacity: 0.4;
    right: 0;
    font-family: 'iconGlyph';
}

.inputClearButton:hover {
    opacity: 1;
}

.inputClearButton:before {
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    content: "\E003";
}




/*--OAuth--*/

#TabSummaryPanel_GoogleSection:before, #TabSummaryPanel_FacebookSection:before, #TabSummaryPanel_MicrosoftSection:before, #TabSummaryPanel_OneloginSection:before,
#IntroTextPlatformGoogle:before, #IntroTextPlatformFacebook:before, #IntroTextPlatformMicrosoft:before, #IntroTextPlatformFed:before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/logon/loginusing.png?v=12.0.176.0') no-repeat top left;
}

#TabSummaryPanel_GoogleSection:before, #TabSummaryPanel_FacebookSection:before, #TabSummaryPanel_MicrosoftSection:before, #TabSummaryPanel_OneloginSection:before {
    float: left;
    margin-right: 5px;
}

#IntroTextPlatformGoogle:before, #IntroTextPlatformFacebook:before, #IntroTextPlatformMicrosoft:before, #IntroTextPlatformFed:before {
    margin: 0 auto 10px auto;
}

#IntroTextPlatformGoogle, #IntroTextPlatformFacebook, #IntroTextPlatformMicrosoft, #IntroTextPlatformFed {
    float: left;
    text-align: center;
    width: 100px;
    height: 80px;
    font-family: Osans, Arial, sans-serif;
    font-size: 1.2em;
    border: solid 1px #f3f3f3;
    margin: 10px 10px 10px 0;
}

#TabSummaryPanel_FacebookSection:before, #IntroTextPlatformFacebook:before {
    background-position: -36px 0;
}

#TabSummaryPanel_MicrosoftSection:before, #IntroTextPlatformMicrosoft:before {
    background-position: -72px 0;
}

#TabSummaryPanel_OneloginSection:before, #IntroTextPlatformFed:before {
    background-position: -108px 0;
}


#IntroTextEnd {
    clear: both;
    font-size: 0.9em;
}

.ToDisableInstructions {
    font-size: 0.9em;
    margin-bottom: 10px;
}

.stackedContainer > .controlContainer.validationWarning{
    border-color: #CEAE0A;
}






/*--Consumer styles--*/

.consumerStyle > .textBoxControl > .validationMessage {
    height: 42px;
    padding: 0;
    box-sizing: border-box;
    line-height: 1rem;
    padding: 12px;
    vertical-align: top;
    background-color: #f74f63;
    color: #fff;
    border-radius: 0 2px 2px 0;
    border: none;
    margin-left: -1px;
    font-size: 0.875rem;
    box-shadow:none;
}


/*----------- End of Forms.css ----------------*/

.ganttChartViewer .addSelCont:before,
.thumbnailViewControl.dynamicLayout .addSelCont:before
 {
    font-family: iconGlyph;
    font-size: 15px;
    background-image: none;
    width: 16px;
    height: 16px;
    display: block;
    border: solid 1px #c4c4c4;
    background-image: none;
    background-color: #fff;
    border-radius: 2px;
    content: "";
    margin: 8px 0;

    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 50%, rgba(245,245,245,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(245,245,245,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(245,245,245,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(245,245,245,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
    -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
    box-sizing: border-box;
}

.ganttChartViewer .addSelCont.checked:before,
.thumbnailViewControl.dynamicLayout .addSelCont.checked:before
{
    content: "\E066";
    border-color: #656565;
}


/*--Consumer styles--*/
.consumerStyle.cbcStyleContainer .cbcEditorField:before {
    width:20px;
    height:20px;
}

.consumerStyle.cbcStyleContainer .cbcEditorLabel {
    line-height:20px;
}

/* Spinners */
.newSpinner24 {
    width:24px;
    height:24px;
}

.newSpinner24.round {
    border-radius: 12px;
}

.newSpinner32 {
    width:32px;
    height:32px;
}

.newSpinner32.round {
    border-radius: 16px;
}

.newSpinner48 {
    width:48px;
    height:48px;
}

.newSpinner48.round {
    border-radius: 24px;
}

.newSpinner64 {
    width:64px;
    height:64px;
}

.newSpinner64.round {
    border-radius: 32px;
}

.newSpinner96 {
    width:96px;
    height:96px;
}

.newSpinner96.round {
    border-radius: 48px;
}

.newSpinner128 {
    width:128px;
    height:128px;
}

.newSpinner128.round {
    border-radius: 64px;
}

.pageSpinner, .itemSpinner, .processSpinner {
    display: block;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation-iteration-count: infinite;
    margin: 0 auto;
}

.spinnerMessage {
    display: inline;
    visibility: hidden;
    text-align: center;
    font-size: 1.2em;
    line-height: 30px;
    font-weight: 600;
}

.durationSpinner > .spinnerMessage {
    display: block;
    visibility: visible;
    width: 100%;
}


/* Page Spinner */
.pageSpinner {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspritepage.png?v=12.0.176.0');
    animation-duration: 1.6s;
    animation-timing-function: steps(29, end);
}

.pageSpinner.dark {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspritepagedark.png?v=12.0.176.0');
}

.pageSpinner.newSpinner24 {
    background-size: 696px 24px;
    animation-name: pageSpinner24;
}

.pageSpinner.newSpinner32 {
    background-size: 928px 32px;
    animation-name: pageSpinner32;
}

.pageSpinner.newSpinner48 {
    background-size: 1392px 48px;
    animation-name: pageSpinner48;
}

.pageSpinner.newSpinner64 {
    background-size: 1856px 64px;
    animation-name: pageSpinner64;
}

.pageSpinner.newSpinner96 {
    background-size: 2784px 96px;
    animation-name: pageSpinner96;
}

.pageSpinner.newSpinner128 {
    background-size: 3712px 128px;
    animation-name: pageSpinner128;
}

@keyframes pageSpinner24 {
   from { background-position: 0; }
     to { background-position: -696px; }
}

@keyframes pageSpinner32 {
   from { background-position: 0; }
     to { background-position: -928px; }
}

@keyframes pageSpinner48 {
   from { background-position: 0; }
     to { background-position: -1392px; }
}

@keyframes pageSpinner64 {
   from { background-position: 0; }
     to { background-position: -1856px; }
}

@keyframes pageSpinner96 {
   from { background-position: 0; }
     to { background-position: -2784px; }
}

@keyframes pageSpinner128 {
   from { background-position: 0; }
     to { background-position: -3712px; }
}


/* Item Spinner */
.itemSpinner {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loadersprite.png?v=12.0.176.0');
    animation-duration: 0.8s;
    animation-timing-function: steps(12, end);
}

.itemSpinner.dark {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspritedark.png?v=12.0.176.0');
}

.itemSpinner.newSpinner24 {
    background-size: 288px 24px;
    animation-name: itemSpinner24;
}

.itemSpinner.newSpinner32 {
    background-size: 384px 32px;
    animation-name: itemSpinner32;
}

.itemSpinner.newSpinner48 {
    background-size: 576px 48px;
    animation-name: itemSpinner48;
}

.itemSpinner.newSpinner64 {
    background-size: 768px 64px;
    animation-name: itemSpinner64;
}

.itemSpinner.newSpinner96 {
    background-size: 1152px 96px;
    animation-name: itemSpinner96;
}

.itemSpinner.newSpinner128 {
    background-size: 1536px 128px;
    animation-name: itemSpinner128;
}

@keyframes itemSpinner24 {
   from { background-position: 0; }
     to { background-position: -288px; }
}

@keyframes itemSpinner32 {
   from { background-position: 0; }
     to { background-position: -384px; }
}

@keyframes itemSpinner48 {
   from { background-position: 0; }
     to { background-position: -576px; }
}

@keyframes itemSpinner64 {
   from { background-position: 0; }
     to { background-position: -768px; }
}

@keyframes itemSpinner96 {
   from { background-position: 0; }
     to { background-position: -1152px; }
}

@keyframes itemSpinner128 {
   from { background-position: 0; }
     to { background-position: -1536px; }
}


/* Process Spinner */
.processSpinner {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspriteprocess.png?v=12.0.176.0');
    animation-duration: 1.8s;
    animation-timing-function: steps(61, end);
}

.processSpinner.dark {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspriteprocess.png?v=12.0.176.0');
}

.processSpinnerMessage {  
    color: #00A7FF;
}

.processSpinner.newSpinner24 {
    background-size: 1464px 24px;
    animation-name: processSpinner24;
}

.processSpinner.newSpinner32 {
    background-size: 1952px 32px;
    animation-name: processSpinner32;
}

.processSpinner.newSpinner48 {
    background-size: 2928px 48px;
    animation-name: processSpinner48;
}

.processSpinner.newSpinner64 {
    background-size: 3904px 64px;
    animation-name: processSpinner64;
}

.processSpinner.newSpinner96 {
    background-size: 5856px 96px;
    animation-name: processSpinner96;
}

.processSpinner.newSpinner128 {
    background-size: 7808px 128px;
    animation-name: processSpinner128;
}

@keyframes processSpinner24 {
   from { background-position: 0; }
     to { background-position: -1464px; }
}

@keyframes processSpinner32 {
   from { background-position: 0; }
     to { background-position: -1952px; }
}

@keyframes processSpinner48 {
   from { background-position: 0; }
     to { background-position: -2928px; }
}

@keyframes processSpinner64 {
   from { background-position: 0; }
     to { background-position: -3904px; }
}

@keyframes processSpinner96 {
   from { background-position: 0; }
     to { background-position: -5856px; }
}

@keyframes processSpinner128 {
   from { background-position: 0; }
     to { background-position: -7808px; }
}
.durationSpinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
}

body.screenLoading > #MainContainer> .durationSpinner {
    display: block;
}

.durationSpinner.drkBGCol2 {
    vertical-align: middle;
    padding: 10px;
    margin-top: -34px;
    margin-left: -34px;
    background-color: transparent !important;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac75.png?v=12.0.176.0');
    border-radius: 3px;
    color: #fff;
}

.modalLayout .durationSpinner {
    top: -73px;
}

.modalLayout .overlay > .durationSpinner {
    top: 50%;
}

.bannerMiddle > .durationSpinner {
    top: -6px;
}

.overlay > .durationSpinner {
    display: block;
}


.durationSpinner.hasCancelButton{
    padding: 15px;
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 128px;
    height: 100px;
/*    background-color: rgba(128, 128, 128, 0.5);*/
    margin-top: -64px;
    margin-left: -64px;
    box-sizing: border-box;
}

.durationSpinner .cancelAjaxRequest{
    text-align: center;
    padding: 5px;
    cursor: pointer;
    font-size: 110%;
    font-weight: bold;
    margin-bottom: -10px;
}


/*--Consumer Styles--*/

body.screenLoading.consumerStyleWrapper > #MainContainer> .durationSpinner {
    display: flex;
}

.consumerStyleWrapper .overlay > .durationSpinner {
    display:flex;
}

.consumerStyleWrapper .durationSpinner {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:0;
        background-color: rgba(255,255,255,0.5);
}

.consumerStyleWrapper .durationSpinner .itemSpinner {
    position: absolute;
    top: calc(50% - 48px/2);
    left: calc(50% - 48px/2);
}

.consumerStyleWrapper .durationSpinner .processSpinner {
    position: absolute;
    top: calc(50% - 64px/2);
    left: calc(50% - 64px/2);
}

.consumerStyleWrapper .durationSpinner > .spinnerMessage {
    position: absolute;
    top: calc(50% + 64px/2);
}

.popupContainer, .coverLayer
{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:9003;
    background: rgba(0,0,0,0.4);
    padding:0 ;
    text-align:center;
}

.coverLayer {
    z-index: auto;
    bottom: 0;
}

.popupContainer > img
{
    position:relative;
    margin:200px auto;
    -webkit-box-shadow: 0 0 10px white, 0 0 40px white;
    box-shadow: 0 0 10px white, 0 0 40px white;
}

.phone .popup {
    /*
        .phone included since new workplace uses desktop components instead of phone for a more responsive design
        altering the .popup min-width affects all popups and causes styling issues
        until we can look into making popup more responsive this is required
     */
    min-width: 30%;
}

.popup
{
    position:relative;
    margin:0 auto;
    background: white;
    display:inline-block;
    text-align:left;
    min-height: 117px;
    min-width: 400px;
    max-width: 95%;
}

.popup.useAvailableHeight {
    top: 50%;
    display: block;
}

.popup, #MainContainer > .contentContainer.modalLayout {
    border: 1px solid rgba(0,0,0,0.75);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.popup.fixed {
    width:890px;
}

/*
  ##Device = Tablets, Ipads
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .popup.fixed {
        width: 690px;
    }
}

.popup.maximise{
    top: 0;
    width: 100%;
    max-width: 100%;
}

.popup.fixed table {
    white-space: nowrap;
}

.popup.useAvailableHeight > .content > .popupContentInnerContainer {
    height: 100%;
}

.popup.fixed > .content {
    min-height: 100px;
}

.popup > .content {
    min-width:20px;
    min-height:20px;
}

.popupClose, .popupMaximise {
    border: none;
    position:absolute;
    right:5px;
    top:5px;
    vertical-align:middle;
    background:none;
    opacity: 0.8;
    box-shadow: none;
    padding: 2px;
    border: solid 1px transparent;
}

.popupMaximise {
    right:40px;
}

body.easy .popupClose {
    opacity: 1;
}

.closeSelectionModeWindow {
    color: white;
    right: auto;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 0;
}

.closeSelectionModeWindow:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac10.png?v=12.0.176.0');
    background-repeat: repeat;
}

.closeSelectionWindow {
    color: white;
}

.popupClose:hover {
    opacity: 1;
}

.modalLayout .popupClose > span:before {
    content: "\E042";
}

.popup > header, .modalLayout > .header
{
    padding:5px 10px !important;
    margin: 0px !important;
}

.popup > header .title, .modalLayout > .header h3 {
    min-height: 30px;
    line-height: 30px;
    padding-right: 40px;
    font-size: 1.2em;
}

.modalLayout > .header h3 {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-weight:normal;
    text-align: center;
}

.popup > header .title {
    font-weight: 600;
}

.popup > .content
{
    padding:10px;
}

/*--Pick list styling--*/

.popup .tabbedControl .tabsContainer {
    padding-top: 0;
    margin-left: -10px;
    margin-right: -10px;
}

.popup .tabControl > * {
    padding-left: 10px;
    padding-right: 10px;
}

.picklistabHeading {
    min-height: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0 -10px;
}

.picklistSearchCriteria {
    padding:10px 0 10px 10px;
    margin: -10px -10px 0 -10px;
    border-bottom: solid 1px #e6e6e6;
}

.picklistSearchCriteria .editorLabel {
    display: none;
}

.tabControl .picklistSearchCriteria {
    margin: inherit;
}

.picklistSearchCriteria .picklistRetrieveButton {
    margin: 0 5px;
}

.popup > .content  .picklistPanel > .tabbedControl > .tabHandlesContainer > .tabHandle {
    padding: 10px;
    background-position: top left;
}

.popup > .content .picklistPanel .tabbedControl > .tabHandlesContainer > .tabHandle.selected, .popup > .content  .picklistPanel > .tabbedControl > .tabHandlesContainer > .tabHandle.selected:hover {
    background-image: none;
    border-bottom-color: transparent;
}

.picklistSearchCriteria .controlContainer {
    padding:0;
}

.picklistPanel > .tableContainer, .picklistExtenderStandardTab > .tableContainer {
    margin-bottom: 0;
}

.picklistRetrieveInput {
    height:20px;
    margin:0;
}

.popup > .content > header
{
    font-weight:bold;
    font-size:1.2em;
    margin-bottom:10px;
}

.form .popup .content section.borderTop.panel:first-of-type {
    border-top:none;
}

.popup > footer
{
    padding:0;
    font-size: 1em;
    border-top-style:solid;
    border-top-width: 1px;
    border-radius: 0 0 3px 3px;
    text-align:left;
    min-height: 50px;
    max-width: 100%;
}

.popup > footer > div
{
    padding:10px;
}

.popup > footer button, .popup > footer a
{
    margin-right: 5px;
    min-width:60px;
    float: left;
}

.popup > footer button:last-child
{
    margin-right: 0;
}

.popup .tableContents
{
    overflow-x: auto;
}

#diagnostics
{
    width:550px;
}

.buttonpane
{
    text-align: left;
    border-width: 1px 0 0 0;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
    border-top: 1px solid;
    background: white;
    color: #222;
}

.buttonpane > *
{
    float:right;
    margin-right:10px;
}

.popup .contentLayoutContainer {
    margin:0;
    -webkit-transition:all 0.2s ease-in-out;
    min-height: 0;
}

.popup .notification {
    margin-bottom:10px;
}

.popup.transparent{
    opacity: 0.1;
}

button.keepOpen{
    border: none;
    background: none;
    box-shadow: none;
}

button.keepOpen:before {
    font-family: 'iconGlyph';
    content: "\E145";
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
    display: inline-block;
}

button.keepOpen.checked:before{
    content: "\E140";
}


@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */

    .popup > .content.fixed {
        min-width:690px;
        width:690px;
    }
}

.popup .popupContentInnerContainer .textBoxControl .suggestionPaneWrapper{
    position: fixed!important;
    width: inherit;
    right: unset!important;
}

.popup .popupContentInnerContainer .textBoxControl .calendarContainer{
    position: fixed!important;
    right: unset!important;
}

/*--Popup consumer style--*/

.consumerStyleWrapper .popupContainer {
    overflow:auto;
    position:fixed;
}

.consumerStyle.popup {
    box-shadow:none;
    border:none;
    color:#3b4e58;
}

.consumerStyle.popup.fixed {
    margin-top:56px !important;
}

.consumerStyle.popup > header {
    background:none;
    padding: 16px 20px !important;
}

.consumerStyle.popup > footer {
    border:none;
    background-color:#f4f4f4;
}

.consumerStyle.popup > footer > div {
    display:flex;
    justify-content: flex-end;
    padding:12px 16px;
}

.consumerStyle.popup > footer button {
    min-width:120px;
    margin:0;
    text-shadow:none;
    box-shadow:none;
    border-color:transparent;
    padding:11px;
}

.consumerStyle.popup > footer button.ok {
    order:2;
    margin-left:16px;
}






.consumerStyle.popup > header .title {
    font-size:1rem;
    color:inherit;
    min-height: 20px;
    line-height: 20px;
}

.consumerStyle.popup > header .popupClose {
    top:14px;
    right:14px;
}

.consumerStyle.popup > header .popupClose:hover {
    border-color:inherit;
}

.consumerStyle.popup > header .popupClose .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%233B4E58' fill-rule='evenodd' d='M11.4141,10 L17.7071,3.707 C18.0981,3.316 18.0981,2.684 17.7071,2.293 C17.3161,1.902 16.6841,1.902 16.2931,2.293 L10.0001,8.586 L3.7071,2.293 C3.3161,1.902 2.6841,1.902 2.2931,2.293 C1.9021,2.684 1.9021,3.316 2.2931,3.707 L8.5861,10 L2.2931,16.293 C1.9021,16.684 1.9021,17.316 2.2931,17.707 C2.4881,17.902 2.7441,18 3.0001,18 C3.2561,18 3.5121,17.902 3.7071,17.707 L10.0001,11.414 L16.2931,17.707 C16.4881,17.902 16.7441,18 17.0001,18 C17.2561,18 17.5121,17.902 17.7071,17.707 C18.0981,17.316 18.0981,16.684 17.7071,16.293 L11.4141,10 Z'/%3E%3C/svg%3E");
}

.consumerStyle.popup > header .popupClose .glyph:before {
    display:none;
}

.bgException {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.9;
    z-index: 0;
}

.exceptionWrapper
{
    position: absolute;
    word-wrap: break-word;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: auto;
}

.exceptionContent {
    max-width: 50vw;
    min-width: 600px;
    margin: 20vh auto;
    box-sizing: border-box;
    background: white;
}

.exceptionContent > .t1Logo {
    background-image: url(https://cdn.t1cloud.com/cianywhere/content/base/images/branding/logo-small.jpg?v=12.0.176.0);
    background-size: contain;
    background-repeat: no-repeat;
    width: 500px;
    height: 32px;
    display: inline-block;
}
.exceptionContent > .header{
    padding: 3vh;
    text-align: center;
}

.exceptionContent .content{
    font-size: 1.2em;
    line-height: 1.7em;
    text-align: center;
    padding: 5%;
}

.exceptionContent .content > p {
    margin-bottom: 10px;
    margin-top: 10px;
}


.exceptionContent .content > .notification {
    position: inherit;
    width: auto;
    margin-left: auto;
    margin-top: 20px;
}

.exceptionWrapper .statusIcon{
    font-size: 30vw;
    position: absolute;
    right: 5vw;
    bottom: 15vh;
    opacity: 0.1;
}

.exceptionWrapper ul
{
    font-size: 1em;
    line-height: 1.5em;
    list-style-type:inherit;
    padding-left: 20px;
}

#UserAgent
{
    display: block;
    font-size: 0.8em;
    text-align: center;
    color: #EFEFEF;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #184184;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.exceptionWrapper .footer {
    text-align: center;
    padding: 5vh;
}

.footer a.buttonStyle:not(.primary) {
    background-color: white;
}

.exceptionContent .footer a.buttonStyle:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-color: transparent;
}

.exceptionWrapper .footer .buttonStyle{
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-transform: uppercase;
    min-width: 200px;
    text-decoration: none;
    display: inline-block;
    margin-right: 3%;
    background-image: none;
}

.statusIcon{
    animation: 0.5s ease 0.1s 1 slideInFromRight;
}

@keyframes slideInFromRight {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0.1;
    }
}


@media (max-width: 800px) {
    .exceptionContent{
        min-width: auto;
        margin: 10vh 10px;
        max-width: none;
    }

    .exceptionWrapper .footer .buttonStyle{
        display: block;
    }
}

@media (max-height: 600px) {
    .exceptionContent{
        margin: 5vh auto;
    }

    .exceptionWrapper .footer .buttonStyle{
        min-width: 25%;
    }
}


.userDetailsWrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 0;
    z-index: 9004;
    background-color: transparent;
    transition: background 0.5s ease-in-out;
    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A5000000', endColorstr='#A5000000'); /* For IE8 */
}

.userDetailsWrapper.active {
    height: auto;
    background-color: rgba(0, 0, 0, 0.1);
}

.userDetailsWrapper.in.active {
    background-color: transparent;
}

.userDetailsWrapper > .fixedWidth {
    height: 100%;
    min-height: 100%;
    z-index: 9003;
}

#UserDetailsPopup
{
    width: 100%;
    position: absolute;
    z-index: 9003;
}

#UserDetailsPopup .userDetails {
    position: absolute;
}

.userDetails .userInfo {
    width: 420px;
    position: relative;
    text-align: left;
    background-color: #fff;
}

.editablePanel .userDetails .userInfo {
    width: auto;
}

.userDetailsWrapper .userDetails .userInfo {
    border: solid 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dropdownPanel .userDetails .userInfo {
    width: auto;
    min-width: 350px;
    border: none;
}

.userDetails .userInfo .details > .container {
    padding-left: 15px;
    padding-right: 15px;
}

.dropdownPanel .panel.fieldSet {
    padding: 0;
    margin: 0;
}

.userDetails .userName.clickable, .userDetails .userId.clickable {
    cursor: pointer;
}



.userDetails .userImage {
    border-radius: 16px;
    margin: 0 auto;
    background-color: #fff;

    border: solid 1px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: padding-box;
    background-position: center center;
    font-family: 'Osans';
}

.userDetails .userImage.clickable {
    cursor: pointer;
    transition: all 0.3s ease-in;
}

.userDetails .userImage.clickable:hover {
    transform: scale(1.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.dropdownPanel .userDetails .userInfo .detailsCol2 {
    background-color: rgba(255, 255, 255, 0.9);
}

.userDetails .userInfo .imageContainer {
    float: right;
    margin-top: -5px;
    margin-right: 10px;
    margin-left: 10px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-clip: padding-box;
}

.userDetails .details.user > .container {
    min-height: 75px;
}

.userDetailsWrapper .userDetails {
    color: #656565;
}

.dropdownPanel .details.user {
    color: white;
}

.dropdownPanel .userDetails .status {
    display: none;
}

.userDetails .details {
    line-height: 1.5em;
    font-size: 1.1em;
    overflow: hidden;
}

.userDetails .contact.details {
    padding: 5px 10px;
}

.userDetailsWrapper .details.user, .editablePanel .details.user {
    background-color: white;
}

.userDetailsWrapper .details.contact {
    background: rgba(0,0,0,0.03);
}

.userDetails .userInfo a {
    display: block;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    opacity: 0.7;
    position: relative;
    padding: 3px 0;
}
/* version compatibility check */
.userNavigation a.lnkMyDetails {
    position: absolute;
}

.userDetails .userInfo .contactText {
    position: absolute;
    left: 24px;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

.userDetails .status {
    text-transform: uppercase;
    font-size: 0.9em;
}

.userNavigation .user.details .container {
    background-color: rgba(255, 255, 255, 0.25);
}

.userDetails .userInfo .userName {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 20px;
}


.userNavigation .user.details .container > .line {
    opacity: 0.75;
}

.userDetails .userInfo .preferredName {
    font-style: italic;
    line-height: 12px;
    margin-right: 90px;
}

.userDetails .userInfo.showpopup {
    margin: inherit;
    position: fixed;
}

.userDetails .userInfo.showpopup .closeUserInfo {
    display:block;
    position: absolute;
    padding: 4px;
    border-radius: 16px;
    border: solid 2px white;
    top: -14px;
    right: -14px;
    box-shadow: -1px 1px 1px #000;
    background-image: none;
}

.userDetails .userInfo .closeUserInfo {
    display: none;
}

.userDetails .userInfo.showpopup .closeUserInfo .icon16 {
    background: none;
    display: block;
    font-family: iconGlyph;
    font-size: 16px;
    line-height: 16px;
    -webkit-font-smoothing: antialiased;
}

.userDetails .userInfo.showpopup .closeUserInfo .icon16:before {
    content: "\E058";
}

.myDetailsPhoto {
    float: left;
    margin-left: -200px;
    margin-top: 10px;
    text-align: center;
}


#MyDetailsSection > .content {
    padding-left: 250px;
}

#MyDetailsSection > .content > section {
    border-left: solid 1px rgba(0, 0, 0, 0.1);
}

#MyDetailsSection #MyDetails {
    border-top: 0;
}

#MyDetailsSection.readonlyMode .myDetailsPhoto .attachmentsImagePanelInput, #MyDetailsSection.readonlyMode .myDetailsPhoto > .icon16 {
    display: none;
}
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemInput,
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    cursor: pointer;
}

.radioButtonControl.editable > .rbcEditorField > .rbcItem > input[type=radio],
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    cursor: pointer;
}



/* Standard Style */

.standardStyle > .radioButtonControl.rbcStandardType  {
    border: solid 1px transparent;
    background: transparent;
    outline: none;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel {
    margin-bottom: 2px;
    display: block;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel > label {
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
    display: block;
    line-height: 14px;
    padding: 0 4px;
    border: solid 1px transparent;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel > label > .labelInnerContainer {
    display: block;
    overflow: hidden;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem {
    min-height: 20px;
    display: flex;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]{
    -webkit-appearance: radio;
    width: auto;
    height: 16px;
    vertical-align: middle;
    box-shadow: none;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    box-shadow: none;
    border-color: #656565;
}

.standardStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem:hover > input[type=radio],
.standardStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem.active > input[type=radio] {
    border-color: #656565;
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* W3C */
}

.standardStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    margin-left: 4px;
    display: inline-block;
    padding: 0;
    width: auto;
}


.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    line-height: 20px;
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 2px;
    border: solid 1px transparent;
}



/* Engaging Style */

.engagingStyle > .radioButtonControl {
    padding: 4px 0 12px 0;
    border: none;
}

.engagingStyle > .radioButtonControl > .rbcEditorLabel {
    display: block;
    opacity: 0.75;
    color: #656565;
    margin: 20px 0;
    font-size: 1.2em;
}

.engagingStyle > .radioButtonControl > .rbcEditorLabel > label {
    position: relative;
    padding: 0;
    line-height: 16px;
    border: none;
}


/* Engaging Style - Standard Radio Button */

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem {
    padding: 0 8px;
    float: left;
    position: relative;
    margin-left: 4px;
    clear: left;
    margin-top: 2px;
}

.engagingStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: radio;
    width: auto;
    height: 17px;
    vertical-align: middle;
    box-shadow: none;
    transition:transform 0.1s ease;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    transform: scale(1.2);
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput:after {
    content: "";
    display: block;
    background-color: #656565;
    margin: 12px 0;
    width: 0;
    height: 0;
    margin: 18px 0 0 0;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 10px;
    width: 12px;
    height: 12px;
    margin-top: 12px;
    left: 4px;
}

.engagingStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    margin-left: 10px;
    display: inline-block;
    padding: 0;
    width: auto;
    opacity: .5 !important;
    font-size: 1.2em;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    line-height: 20px;
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 2px;
    border: solid 1px transparent;
}



/* Engaging Style - Rating Stars */

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem {
    padding: 0 4px;
    float: left;
    position: relative;
    box-sizing: border-box;
    color: #A5A5A5;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: none;
    width: 24px !important;
    border: none;
    box-shadow: none;
    color: #A5A5A5;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem > input[type=radio] ,
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField:hover > .rbcItem > input[type=radio]  {
    transform: scale(1.2);
    color: #ffcb05;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover > input[type=radio] {
    transform: scale(1.4);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio],
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover ~ .rbcItem > input[type=radio] {
    color: inherit;
    transform: scale(1);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.readonly > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio],
.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.disabled > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio] {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:before {
    content: "\E556";
    font-family: iconGlyph;
    display: block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    font-size: 24px;
    margin-bottom: 10px;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    display: none;
}



/*--Consumer style - Standard type--*/

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem {
    display:flex;
    max-width: fit-content;
    line-height: 20px;
    padding: 8px 8px 8px 0;
    color: #3b4e58;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus  {
    outline: none;
}

.easy .consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus  {
    outline: dotted 2px #d64200 ;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: radio;
    box-shadow: none;
    position: relative;
    background: #fff;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-width: 1px;
    border-color: #848e9c;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 50%;
    padding: 8px;
    transition: border-width 0.1s ease-in-out, border-color 0.1s ease-in-out/*, padding 0.1s ease-in-out*/;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:focus > input[type=radio] {
    outline: solid 1px #2D9CDB;
    outline-offset: 2px;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:hover > input[type=radio], .consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:focus > input[type=radio] {
    border-width:2px;
    border-color:#3b4e58;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    border-width: 1px;
    border-color: #3b4e58;
    padding: 2px;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {

}

/*--Consumer Style - Segmented control--*/

.consumerStyle > .radioButtonControl {
    font-size:0.875rem;
    border: none;
}

.consumerStyle > .radioButtonControl > .rbcEditorLabel {
    display: block;
    color: #3b4e58;
    margin: 8px 0;
    line-height:24px;
}

.consumerStyle.styleContainer .rbcEditorLabel .mandatory {
    padding: 0;
    padding-left: 4px;
    color:#ff7a00;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    line-height: 10px;
    height: 10px;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem {
    padding: 7px 8px;
    line-height: 20px;
    float: left;
    position: relative;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    margin-right: 4px;
    cursor:pointer;
    color:#3b4e58;
    border:solid 1px #cbcbcb; /*-- theme --colorGreyWarmLighter --*/
    border-radius: 6px !important;
    flex-grow: 1;
}

.easy .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:focus-within{
    outline: dotted 3px #d64200;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > input[type=radio]{
    height: 16px;
    width: 0 !important;
    -webkit-appearance:inherit;
    box-shadow: none;
    border-style: hidden;
    padding: 0 !important;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > input[type=radio]:focus{
    height: 16px;
    width: 0 !important;
    -webkit-appearance:inherit;
    box-shadow: none;
    border-style: hidden;
    padding: 0 !important;
    outline: none;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem {
    padding:10px;
    margin: auto;
    display: flex;
    float: none;
    border-radius:0;
}


.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked, .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:hover {
    z-index:1;
}

.consumerStyle > .radioButtonControl.readonly.rbcSegmentedControl > .rbcEditorField > .rbcItem:hover {
    cursor: not-allowed;
}

.consumerStyle > .radioButtonControl.editable.rbcSegmentedControl > .rbcEditorField > .rbcItem:hover {
    z-index:1;
    border-color: #3b4e58;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:focus {
    z-index:1;
    border-color:#3b4e58;
    outline-color:#3b4e58;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -2px;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:focus {
    z-index:1;
}





.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:first-child {
    border-radius:2px 0 0 2px;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:last-child {
    border-radius:0 2px 2px 0;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    flex: 1;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label > span {
    text-align: center;
}


.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:first-child {
    border-radius:2px 2px 0 0;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:last-child {
    border-radius:0 2px 2px;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    flex: 1;
    margin: auto;
}

.radioButtonControl.rbcSegmentedControl > .rbcItemLabels
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.radioButtonControl.rbcSegmentedControl > .rbcEditorField
{
    display: flex;
}

.radioButtonControl > .rbcEditorField.rbcHorizontalLayout
{
    display: flex;
    flex-wrap: wrap;
}

.radioButtonControl > .rbcEditorField.rbcHorizontalLayout > .rbcItem
{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}





/** CUSTOMER FEEDBACK **/

footer.ui-v1 .feedbackButton{
    display: none;
     position: absolute; 
     right: 5px; 
     bottom: 5px; 
    border-radius: 3px;
     border-top-right-radius: 0; 
     border-top-left-radius: 0; 
    padding: 2px 10px;
     z-index: 90000; 
    color: white;
    border: none;
    margin-right: 5px;
}

footer.ui-v2 .feedbackButton{
    display: none; 
}

footer .feedbackButton.shown{
    display: block;
}

.feedbackWrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.21);
    bottom: 0;
    transition: ease 0.3s;
    visibility: hidden;
    opacity: 0;
    display: flex;
    overflow: auto;
}
.feedbackWrapper.shown{
    z-index: 90001;
    visibility: visible;
    opacity: 1;
}


.feedbackWrapper .feedbackContainer{
    background: white;
    max-width: 600px;
    box-shadow: 0 3px 5px #0000009e;
    border-radius: 5px;
    position: relative;
    color: #0f3367;
    transition: ease 0.3s;
    transform: scale(0.8);
    margin: 0 auto;
    height: max-content;
    align-self: center;
    overflow: hidden;
}
.feedbackWrapper.shown .feedbackContainer{
    transform: scale(1);
}

.feedbackWrapper .feedbackContainer > .header{
    background: rgba(0,0,0,0.05);
    padding: 20px 10px;
}

.feedbackWrapper .feedbackContainer > .content{
    padding: 10px 20px;
}

.feedbackWrapper .feedbackContainer .voteTitle{
    text-align:center;
}

.feedbackWrapper .feedbackContainer > .header h2{
    display: inline-block;
    font-size: 1.3em;
}
.feedbackWrapper .feedbackContainer > .header .closeBtn
{
    position: absolute;
    right: 5px;
    border-radius: 20px;
    border-color: transparent;
    padding: 8px;
    top: 8px;
    background:none;
    box-shadow:none;
}

.feedbackWrapper .feedbackContainer h3{
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1.5em;
    margin-top: 20px;
    color: #0f3367;
}

.feedbackWrapper .feedbackContainer > .content{
    transition:transform 0.3s ease-in-out;
}
.feedbackWrapper.sent .feedbackContainer > .content{
    transform: translate(120%, 0px) skew(-15deg, 15deg);
    background: white;
    box-shadow: 0 0 3px #000000a6;
}

.feedbackWrapper .voteButtons {
    text-align: center;
    padding: 30px 0;
}

.feedbackWrapper .btnDislike > .glyph{
    transform: rotateZ(180deg) translateY(-5px);
}
.feedbackWrapper .btnDislike{
    margin-left: 20px;
}

.feedbackWrapper .voteButtons > button{
    padding: 15px 30px;
}

.feedbackWrapper .feedBackMore{
    visibility:hidden;
    position:absolute;
}
.feedbackWrapper.showMore .feedBackMore{
    visibility:visible;
    position:relative;
}

.feedbackWrapper .feedBackMore h3{
    margin-top: 30px;
}

.feedbackWrapper .styleContainer.tbcStyleContainer{
    padding-bottom: 0;
}

.feedbackWrapper .styleContainer.tbcStyleContainer .textBoxControl {
    background-color:rgba(0,0,0,0.02);
}

.feedbackWrapper .feedbackContainer footer{
    padding: 10px 0;
    text-align: center;
    background: rgba(0,0,0,0.1);
}

.feedbackWrapper .feedbackContainer footer > button{
    padding: 10px 10%;
    margin-right: 5%;
}

.feedbackWrapper .sentMessage{
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    flex-flow: column;
    width: 100%;
    justify-content: center;
    transition: 0.5s ease;
    opacity: 0;
    transform: scale(0.6);
    visibility: hidden;
    z-index: -1;
}
.feedbackWrapper .sentMessage h3{
    font-size: 2em;
}

.feedbackWrapper.sent .sentMessage{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.feedbackWrapper .sentMessage .iconContainer{
    text-align: center;
}

.feedbackWrapper .sentMessage .iconContainer > .glyph {
    width: 120px;
    display: inline-block;
    height: 120px;
    border-radius: 50%;
    transition: 0.5s ease-in;
    background: white;
    color:white;
}


.feedbackWrapper.sent .sentMessage .iconContainer > .glyph{
    background: #a6cea2;
}

.feedbackWrapper.sent footer {
    display:none;
}

.phone .feedbackButton {
    display:none;
}

.hasUserFeedback .portalLabels + .noWrap{
    padding-right: 80px;
}
.phone.hasUserFeedback .optionItem.feedbackButton{
    display:block;
}

.feedbackWrapper .privacyDisclaimer{
    line-height: 1.3em;
}