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;
	}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: normal;
  src: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/fonts/opensansregular.woff') format('woff');
}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: 600;
  src: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/fonts/opensanssemibold.woff') format('woff');
}

@font-face {
  font-family: 'OSans';
  font-style: normal;
  font-weight: 700;
  src: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/fonts/opensansbold.woff') format('woff');
}

@font-face {
  font-family: 'iconGlyph';
  font-style: normal;
  font-weight:normal;
  src: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/fonts/cianywhere-regular.woff') format('woff');
}



html
{
    height:100%;
}

body
{
    margin:0 auto;
    padding:0;
    font-size:0.75em;
    color:#000;
    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, body *
{
    font-family:Osans, Arial, Verdana, sans-serif;
}

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

#MainContainer {
    background: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac50.png');
}

.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;
}

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

/* 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%; }









.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; }



/*--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; }
.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, .pointerArrow .bg, .pointerArrow .fg {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 0;
    width: 0;
}

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

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


.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: 6px;
}

.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;
}

 .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 {
    width: 850px;
}
.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 */

/* 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;
}
.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 }
.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; }

.center > .flex, .center > .flex0 { 
    align-items: center;    
    justify-content: center;
}

.flex > * { float:left; flex:1; }
.flex0 { flex: 0; }

.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% }




.opac1  { opacity: 1;  }
.opac0  { opacity: 0;  }
.opac03 { opacity: 0.3;}
.opac05 { opacity: 0.5;}
.opac07 { opacity: 0.7;}
.opac09 { opacity: 0.9;}


.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; }
.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; }
.marginT20, .cMarginT20 > *     { margin-top: 20px; }
.marginB20, .cMarginB20 > *     { margin-bottom: 20px; }
.marginL20, .cMarginL20 > *     { margin-left: 20px; }
.marginR20, .cMarginR20 > *     { 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; }








.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; }

.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; }

/*font colour overrides - for card layouts*/

.dataFontLightRed .iconLabel, .dataFontLightRed .editorLabel, .dataFontLightRed .editorField { color: #eccdca !important;}
.dataFontLightGreen .iconLabel, .dataFontLightGreen .editorLabel, .dataFontLightGreen .editorField { color: #e2ead1 !important;}
.dataFontLightYellow .iconLabel, .dataFontYellow .editorLabel, .dataFontLightYellow .editorField { color: #ffe398 !important;}
.dataFontLightBlue .iconLabel, .dataFontLightBlue .editorLabel, .dataFontLightBlue .editorField { color: #c6dae8 !important;}
.dataFontLightGray .iconLabel, .dataFontLightGray .editorLabel, .dataFontLightGray .editorField { color: #ececec !important;}
.dataFontLightPurple .iconLabel, .dataFontLightPurple .editorLabel, .dataFontLightPurple .editorField { color: #d7bdd7 !important;}
.dataFontLightDarkBlue .iconLabel, .dataFontLightDarkBlue .editorLabel, .dataFontLightDarkBlue .editorField { color: #C3C3DA !important;}
.dataFontLightTeal .iconLabel, .dataFontLightTeal .editorLabel, .dataFontLightTeal .editorField { color: #C9D9DD !important;}
.dataFontLightDarkGreen .iconLabel, .dataFontLightDarkGreen .editorLabel, .dataFontLightDarkGreen .editorField { color: #96C09E !important;}
.dataFontLightOrange .iconLabel, .dataFontLightOrange .editorLabel, .dataFontLightOrange .editorField { color: #fce2ce !important;}

.dataFontWhite .iconLabel, .dataFontWhite .editorLabel, .dataFontWhite .editorField  { color: #fff !important;}
.dataFontRed .iconLabel, .dataFontRed .editorLabel, .dataFontRed .editorField { color: #E53327 !important;}
.dataFontGreen .iconLabel, .dataFontGreen .editorLabel, .dataFontGreen .editorField { color: #74bd00 !important;}
.dataFontYellow .iconLabel, .dataFontYellow .editorLabel, .dataFontYellow .editorField { color: #ffc853 !important;}
.dataFontBlue .iconLabel, .dataFontBlue .editorLabel, .dataFontBlue .editorField { color: #325ea1 !important;}
.dataFontGray .iconLabel, .dataFontGray .editorLabel, .dataFontGray .editorField { color: #4b4b4b !important;}
.dataFontPurple .iconLabel, .dataFontPurple .editorLabel, .dataFontPurple .editorField { color: #660066 !important;}
.dataFontDarkBlue .iconLabel, .dataFontDarkBlue .editorLabel, .dataFontDarkBlue .editorField { color: #000060 !important;}
.dataFontTeal .iconLabel, .dataFontTeal .editorLabel, .dataFontTeal .editorField { color: #1E5E6D !important;}
.dataFontDarkGreen .iconLabel, .dataFontDarkGreen .editorLabel, .dataFontDarkGreen .editorField { color: #00661A !important;}
.dataFontOrange .iconLabel, .dataFontOrange .editorLabel, .dataFontOrange .editorField { color: #f2661f !important;}

/* this is in the case the icons should have a different colour from the value*/
.colWhite, .dataIconFontWhite .iconLabel  { color: #fff !important;}
.colRed, .dataIconFontRed .iconLabel { color: #E53327 !important;}
.colGreen, .dataIconFontGreen .iconLabel { color: #74bd00 !important;}
.colYellow, .dataIconFontYellow .iconLabel { color: #ffc853 !important;}
.colBlue, .dataIconFontBlue .iconLabel { color: #325ea1 !important;}
.colGray, .dataIconFontGray .iconLabel { color: #4b4b4b !important;}
.colPurple, .dataIconFontPurple .iconLabel { color: #660066 !important;}
.colDarkBlue, .dataIconFontDarkBlue .iconLabel { color: #000060 !important;}
.colTeal, .dataIconFontTeal .iconLabel { color: #1E5E6D !important;}
.colDarkGreen, .dataIconFontDarkGreen .iconLabel { color: #00661A !important;}
.colOrange, .dataIconFontOrange .iconLabel { color: #F2661F !important;}
.colBrown, .dataIconFontBrown .iconLabel { color: #8a6d3b !important;}

.bgColWhite { background-color: white; }
.bgColLightRed, .dataBgLightRed .iconLabel, .dataBgLightRed .editorLabel, .dataBgLightRed .editorField { background-color: #eccdca;}
.bgColLightGreen, .dataBgLightGreen .iconLabel, .dataBgLightGreen .editorLabel, .dataBgLightGreen .editorField { background-color: #e2ead1;}
.bgColLightYellow, .dataBgLightYellow .iconLabel, .dataBgLightYellow .editorLabel, .dataBgLightYellow .editorField { background-color: #ffe398;}
.bgColLightBlue, .dataBgLightBlue .iconLabel, .dataBgLightBlue .editorLabel, .dataBgLightBlue .editorField { background-color: #c6dae8;}
.bgColLightGray, .dataBgLightGray .iconLabel, .dataBgLightGray .editorLabel, .dataBgLightGray .editorField { background-color: #c7c7c7;}
.bgColLightPurple, .dataBgLightPurple .iconLabel, .dataBgLightPurple .editorLabel, .dataBgLightPurple .editorField { background-color: #d7bdd7;}
.bgColLightDarkBlue, .dataBgLightDarkBlue .iconLabel, .dataBgLightDarkBlue .editorLabel, .dataBgLightDarkBlue .editorField { background-color: #C3C3DA;}
.bgColLightTeal, .dataBgLightTeal .iconLabel, .dataBgLightTeal .editorLabel, .dataBgLightTeal .editorField { background-color: #C9D9DD;}
.bgColLightDarkGreen, .dataBgLightDarkGreen .iconLabel, .dataBgLightDarkGreen .editorLabel, .dataBgLightDarkGreen .editorField { background-color: #96C09E;}
.bgColLightOrange, .dataBgLightOrange .iconLabel, .dataBgLightOrange .editorLabel, .dataBgLightOrange .editorField { background-color: #fce2ce;}

.bgColRed, .dataBgRed .iconLabel, .dataBgRed .editorLabel, .dataBgRed .editorField { background-color: #E53327;}
.bgColGreen, .dataBgGreen .iconLabel, .dataBgGreen .editorLabel, .dataBgGreen .editorField { background-color: #74bd00;}
.bgColYellow, .dataBgYellow .iconLabel, .dataBgYellow .editorLabel, .dataBgYellow .editorField { background-color: #ffc853;}
.bgColBlue, .dataBgBlue .iconLabel, .dataBgBlue .editorLabel, .dataBgBlue .editorField { background-color: #325ea1;}
.bgColGray, .dataBgGray .iconLabel, .dataBgGray .editorLabel, .dataBgGray .editorField { background-color: #4b4b4b;}
.bgColPurple, .dataBgPurple .iconLabel, .dataBgPurple .editorLabel, .dataBgPurple .editorField { background-color: #660066;}
.bgColDarkBlue, .dataBgDarkBlue .iconLabel, .dataBgDarkBlue .editorLabel, .dataBgDarkBlue .editorField { background-color: #000060;}
.bgColTeal, .dataBgTeal .iconLabel, .dataBgTeal .editorLabel, .dataBgTeal .editorField { background-color: #1E5E6D;}
.bgColDarkGreen, .dataBgDarkGreen .iconLabel, .dataBgDarkGreen .editorLabel, .dataBgDarkGreen .editorField { background-color: #00661A;}
.bgColOrange, .dataBgOrange .iconLabel, .dataBgOrange .editorLabel, .dataBgOrange .editorField { background-color: #F2661F;}
.bgColBrown { background-color: #CEAE0A; }

.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; }

.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: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;
}


#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;
}

/*--Header--*/
#GlobalHeader > .topBar > div > * {
	display: inline-block;
	vertical-align:top;
}

.bannerRight {
	float: right;
}

.bannerMiddle .bannerTitle {
    left: 30%;
    right: 30%;
    position: absolute;
    text-align: center;
    margin: 0 5px;
}

.bannerMiddle h1, #GoBack > h1 {
    font-weight:normal;
    display:inline-block;
    font-size: 1.2em;
    line-height:30px;
    padding: 0 5px;
}

.bannerMiddle #PageTitle, #GoBack > h1 {
    vertical-align: top;
    display:inline-block;
}

#GoBack > h1 {
    line-height: 24px;
}

.bannerLeft {
    float: left;
}

.bannerLeft.modalLayout > .functionSearch {
    display: none;
}

/*--Top bar--*/

.topBar {
    min-height: 40px;
	width: 100%;
    /* Environment colour: border-style defined in colours.cshtml */
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-color: transparent;
}

.topBar > div {
    min-height: 40px;
}

.topBar > div > .bannerRight, .topBar > div > .bannerMiddle {
    margin: 5px 10px 0 5px;
}

#GlobalHeader > .topBar ul > li {
	position:relative;
	float:left;

}

.userNavigation {
    z-index: 9005;
}

.userNavigation .dropdownPanel {
    border-color: #555;
    border-color: rgba(0, 0, 0, 0.35);
    background-color: #fff;
}

.userNavigation > button {
    padding: 2px 5px;
}

.userNavigation .loggedUser .name {
    line-height: 24px;
}

.userNavigation .hasPosition .loggedUser > * {
    line-height: 1em;
    margin-bottom: 2px;
}

.userNavigation .hasPosition .position {
    text-transform: uppercase;
    font-size: 0.8em;
}

.userNavigation .loggedUserImage {
    height: 24px;
    min-height: 24px;
    width: 24px;
    min-width: 24px;
    box-sizing: border-box;
}

.userNavigation .panel.fieldSet {
    padding: 0;
}


#GlobalHeader .dropdownPanelListItem {
    float: none !important;
}

#GlobalHeader .userNavigation li:hover {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

.profileWrapper {
    position: relative;
}

.userNavigation .userInfo .lnkMyDetails {
    position: absolute;
    z-index: 1;
    top: 85px;
    right: 15px;
    width: 95px;
    text-align: center;
    line-height: 16px;
    text-transform: uppercase;
    opacity: 0.75;
}

.userNavigation .lnkMyDetails > .icon16 {
    display: none;
}

.userNavigation .lnkMyDetails:hover {
    opacity: 1;
}

.profileWrapper.hasEditLink .details.user > .container {
    min-height: 95px;
}

.userNavigation .logoff .left {
    width: 50%;
}

.userNavigation .logoff a {
    display: inline-block;
    width: 80%;
}

#GlobalHeader a:hover {
	text-decoration: none;
}

.topBar .dropdownPanel ul {
    min-width:150px;
}

.dropDownControl.userNavigation  > .handle > .icon16 {
    background-image:url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/icons/16/actions/dropdownwhite.png');
}

/** Regional preference */

#ddHdrRegList li.selected:after {
    content: "\E066";
    right: 5px;
    top: 50%;
    margin-top: -8px;
    font-family: iconGlyph;
    font-size: 16px;
    position: absolute;
    opacity: 0.5;
}
#ddHdrRegList li.selected {
    background-color: rgba(0, 0, 0, 0.02); 
}
#ddHdrRegList li {
    border-bottom: solid 1px rgba(0, 0, 0, 0.01) !important;
}

.userPositions {
    background-color: white;
    padding: 5px 10px;
    padding-left: 32px;
    position: relative;
    border-top-style: solid;
    border-top-width: 1px;
}

.userPositions > .icon16.glyph {
    position: absolute;
    left: 10px;
    top: 10px;
}

.userPositions .otherPositions, .userPositions .less, .userPositions.more .more {
    display: none;
}

.userPositions.more .otherPositions, .userPositions.more .less {
    display: block;
}

.otherPositions {
    max-height: 100px;
    overflow: auto;
}

.otherPositions > :last-child {
    margin-bottom: 0;
}

.userPosition {
    text-transform: uppercase;
    display: block;
    line-height: 16px;
}

.userPosition.selected > .icon16.glyph {
    float: right;
    color: green;
    margin:4px 5px 0 2px;
}


#GlobalHeader .userNavigation .userPosition:hover > a {
    background-color: rgba(255, 255, 255, 0.25);
}

.userPosition > .label, .userPosition > a {
    padding: 5px 7px;
    display: block;
}

.userPosition.selected > .label {
    padding-right: 2px;
}

#GlobalHeader .buttonOnHover:hover,
#GlobalHeader .chooser.droppedDown button.handle.buttonOnHover {
    background-image:url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac10.png');
	background-position:0 0;
	background-repeat:repeat;
    background-color: transparent;
}

#GlobalHeader .chooser.droppedDown button.handle.buttonOnHover {
    background-image:url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac10.png');
	background-position:0 0;
	background-repeat:repeat;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.35);

}

#GlobalHeader .topBar .buttonOnHover:hover {
    border-color: transparent;
}

#GlobalHeader .userNavigation.chooser.droppedDown button.handle.buttonOnHover {
    border-color: rgba(0, 0, 0, 0.35);
}

#GlobalHeader button.fav.isFavourite:hover
{
    cursor: default;
}

/*--Icons--*/

#GlobalHeader .icon16, #GlobalHeader .icon24,
.exceptionContent .icon16
 {
    speak: none;
}

.userNavigation li > .glyph {
    left: 10px;
}

.userNavigation li > a {
    padding-left: 34px;
}

#GoToWorkplace, #GoBack {
    padding: 7px;
    vertical-align: top;
    float: left;
    border-radius: 0;
}

#ShowFlow {
    padding: 11px;
    border-radius: 0;
}

#ShowFlow + .functionSearch {
    margin-top: 5px;
    margin-left: 2px;
}


.topBar .bannerLeft > a, .topBar .bannerLeft > button {
    margin-right: 5px;
}

#GoBack > .icon16 {
    margin: 4px;
}

#GoBack.disabled {
    cursor: default !important;
    background: transparent !important;
}

#GoToWorkplace > .icon24:before {
    content: "\E041";
    font-size: 16px;
    line-height: 24px;
}

.maximise > .icon16:before
{
    content: "\E04D";
}

.minimise > .icon16:before
{
    content: "\E047";
}

/* Logging enabled*/

#LoggingIndicator {
    padding: 4px;
    margin-top: 3px;
    position: relative;
}


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

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


#LoggingIndicator > .icon16 {
   display: block;
   background:url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/icons/16/actions/white/diagnostics.png');
   -webkit-animation-duration: 0.5s;
   -webkit-animation-name: changescale;
   -webkit-animation-iteration-count: 9;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function:linear;
}

.themedSmallLogo .logo{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;    
}

.simple.themedSmallLogo .logo{
    min-height: 40px;
}

/*--Function Search--*/

#ShowFlow + .functionSearch {
    margin-top: 5px;
    margin-left: 2px;
}

.functionSearch input:focus::-webkit-input-placeholder {color: #656565;}
.functionSearch input:focus:-moz-placeholder { /* Firefox 18- */color: #656565;}
.functionSearch input:focus::-moz-placeholder { /* Firefox 19+ */color: #656565;}
.functionSearch input:focus:-ms-input-placeholder { /* IE 10+ */color: #656565;}
.functionSearch input:focus::-ms-input-placeholder { /* Edge */color: #656565;}
.functionSearch input:focus:placeholder-shown { /* Standard one last! */color: #656565;}

 .phone  .functionSearch .suggestionPane,  .easy  .functionSearch .suggestionPane {
    background-color: transparent !important;
 }

.functionSearch .suggestionPane > .funcs {
    border-bottom: solid 4px rgba(0, 0, 0, 0.1) !important;
}

.functionSearch .suggestionPane .entSearchItem {
    border-bottom: solid 1px #e6e6e6 !important;
    background-color: transparent !important;
}

.functionSearch .suggestionPane .entSearchItem:hover, .functionSearch .entSearchItem.selected {
    background-color: rgba(0, 0, 0, 0.05) !important;
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac50.png') !important;
}



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

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

.deepLink #GlobalHeader {
    display: none;
}

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

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

#GlobalFooter .noWrap {
    overflow: visible;
}

#GlobalFooter .bar.separator { display: none; } /* Version compatibility, Workplace App 1905 or older */
.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;

}

.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";
}
.screensaver {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100000;
    display: none;
}

.screensaver .innerBox 
{
    position: fixed;
    width: 205px;
    height: 32px;
    left: 50%;
    margin-left: -103px;
    top: 50%;
    margin-top: -16px;
    background-image:url(/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/t1logo.png);
    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;
}

.dropdownPanel.droppedDown.scrollingDropdown {
    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 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.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: rgba(0, 0, 0, 0.03);
}

.topBar .dropdownPanelListItem:hover {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac5.png');
}

.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
{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    
    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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac50.png') repeat top left;
}

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


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


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

.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac50.png');
}

.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;
}
.overlay {
    position: absolute;
    background: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9004;
    overflow: hidden;
}
.buttonOnHover, button.buttonOnHover, a.buttonStyle.buttonOnHover /*,
.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderResizer .nlsadd button,
.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderResizer .nlsclose button*/
 {
    background-image: none;
    background-color: transparent;
    border-color:transparent;
    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);*/
}

button, a.buttonStyle
/*.gridColumnGroupingPanel div.header, .header.dragging*/
 {
    padding:6px;
    border-radius:3px;
    cursor: pointer;
    border-style:solid;
    border-width:1px;
}

.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;
}

button, .buttonOnHover:hover, .touch .buttonOnHover:active, button.highlight, a.highlight, a.buttonStyle, a.buttonStyle:hover,.touch a.buttonStyle:active, a.current.buttonStyle
{
    border-radius:3px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    line-height: 16px;
    font-size: 1em;
}

button.searchBtn {
    border-radius: 0 3px 3px 0;
    background: transparent;
    position: relative;
    border: solid 1px transparent;
    margin-left: -50px;
    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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac35.png');
    background-repeat: repeat;
}

button.primary:hover, button.searchBtn:hover, button.secondary:hover {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac10.png');
    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 .icon16, .dropdownControl > .handle.more .icon16:before {
    content: "\E002";
}

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

.hasSubMenu.more.primary .icon16, .dropdownControl > .handle.more.primary .icon16:before {
    content: "\E002";
}


.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/icons/16/actions/tickwhite.png') 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, a.buttonStyle.primary, button.primary.buttonOnHover, .chooser.droppedDown button.primary.buttonOnHover, button.primary, button.primary.buttonOnHover,
button.secondary, button.secondary.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/icons/16/actions/plusgreendark.png') 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;
}
::-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;
}

.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base//lukef.dev/c2p.msft.cloud/workplace/v-12.0.1276.0/t/$base/images/pulsedot.gif') 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 > .tbcInputContainer {
    height: 100px;
}

.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-preview {
    margin: 0;
    width: calc(100% - 20px) !important;
}

.tbcInputInnerContainer > .sp-replacer > .sp-dd {
    padding: 2px 5px;
}

.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.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.picklist > table > tbody > .picklistDataRow > .picklistDataCell, .suggestionPane.quickText > table > tbody > .picklistDataRow > .picklistDataCell > img {
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px;
    width: auto;
    height: auto;
}

.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 {
    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 {
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.5);
}

.suggestionPaneWrapper.shown > .suggestionPane > .itemLink.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;
}

.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%;
}

.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 > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    top: 5px;
    right: 5px;
}

.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;
    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.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 {
    right: 29px;
}

.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersOne > .tbcPicker,
.standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker ~ .tbcPicker {
    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;
    white-space: nowrap;
    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: 24px;
}

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

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

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

.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,
.stackedStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .sp-replacer > .sp-preview {
    font-size: 1.1em;
    line-height:16px;
}

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

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

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

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

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

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

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

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

.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: #d00;
    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 > .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 > .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 {
    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 {
    right: 30px;
}

.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersOne > .tbcPicker,
.engagingStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker ~ .tbcPicker {
    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 {
    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;
} 

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;
}

.centerTileContainer .majorTiles .tile, #popupTileContainer .content .tile {
    border-radius: 3px;
}


.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;
}

.tile.expanded > .hyperlink {
    z-index: 1;
}

.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:0.9em;
    min-width:14px;
    line-height: 12px;
    text-align:center;
    border-radius:7px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);    
    background-repeat: repeat-x;
    background-position: 0 -5px;
    background-size:100% 100%;
    
    -webkit-transition:0.05s linear;    
    -moz-transition:0.05s linear;
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
}

button .notificationCount {
    line-height: 12px;
    padding: 1px;
    text-shadow: none;
}

.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: 1.2em;
    font-weight: 600;
    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;
}


.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: red;
}

.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="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, #GoToWorkplace: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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac5.png') 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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac20.png');
    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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/logon/loginusing.png') 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;
}

/*----------- 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;
}


/* 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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loaderspritepage.png');
    animation-duration: 1.6s;
    animation-timing-function: steps(29, end);
}

.pageSpinner.dark {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loaderspritepagedark.png');
}

.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loadersprite.png');
    animation-duration: 0.8s;
    animation-timing-function: steps(12, end);
}

.itemSpinner.dark {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loaderspritedark.png');
}

.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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loaderspriteprocess.png');
    animation-duration: 1.8s;
    animation-timing-function: steps(61, end);
}

.processSpinner.dark {
    background-image: url('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/loaderspriteprocess.png');
}

.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%;
    margin-top: -48px;
    margin-left: -48px;
    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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/blackopac75.png');
    border-radius: 3px;
    color: #fff;
}

.modalLayout .durationSpinner {
    top: -73px;
}

.modalLayout .overlay > .durationSpinner {
    top: 50%;
}

.bannerMiddle > .durationSpinner {
    top: -6px;
}


.overlay > .durationSpinner {
    display: block;
    margin-left: -24px;
    margin-top: -24px;
}
.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;
}

.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;
    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;
    min-width:890px;
}

.popup.maximise{
    top: 0;
    width: 100%;
    max-width: 100%;
}


.ipad.portraitMode .popup.fixed {
    width:690px;
    min-width:690px;
}

.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
{
    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;
}

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('/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/whiteopac10.png');
    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:solid 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;
    }
}
.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(/T1Prod/CiAnywhere/Web/PROD/Workplace/v-12.0.1041.0/t/$Base/images/branding/logo-small.jpg);
    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 {
    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;
}