.matchDataControl .matchSummaryContainer .crtSelection {
    margin-top: 5px;
    display: inline-block;
    line-height: 24px;
    padding: 0 5px;
    border-radius: 3px;
    color: #FFF;
}

.matchDataControl .matchSummaryContainer > .matchSummary{
    display: inline-block;
    vertical-align: top;
    text-align: right;
}

.matchDataControl .matchSummaryContainer > .matchSummary > .matchSummaryWrapper{
    margin-right:5px;
    padding:10px;
    height:100%;
    box-sizing: border-box;
}

.matchDataControl .matchSummaryContainer > .matchSummary.matchDataSummary > .matchSummaryWrapper{
    margin-right:0px;
}

.matchDataControl .matchSummaryContainer .summaryLine {
    font-size: 1.6em;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #656565;
}

.matchDataControl .matchSummaryContainer > .matchDataSummary .summaryLine{
    font-size: 1.9em;
    line-height: 30px;
}


.matchDataControl {
}

.matchDataControl .matchSummaryContainer .summaryHeading {
    font-size: 1.1em;
    font-weight: 600;
    font-family: Osans, Arial, sans-serif;
    line-height: 16px;
    vertical-align: top;
}

.matchDataControl .rdpSectionsContainer .leftRdpSection,
.matchDataControl .rdpSectionsContainer .rightRdpSection {
    display: inline-block;
    width: 50%;
}

.menuContainerH {
    display: inline-block;
}

.actionsMenu {
    vertical-align: top;
}

.menuContainerH > .dropDownControlContainer {
    float: left;
}

.mainActionBar .menuContainerH > .dropDownControlContainer ~ .dropDownControlContainer, 
.menuContainerH > .dropDownControlContainer ~ .dropDownControlContainer  {
    margin-left: 5px;
}

.rdpActionsMenu.menuContainerH > ul {
    min-height: 35px;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;

}

.rdpActionsMenu.menuContainerH > ul.hidden {
    display: none;
}

.tabControl .rdpActionsMenu.menuContainerH > ul {
    margin-left: 0;
}

.rdpActionsMenu.menuContainerH > .dropDownControlContainer {
    position: relative;
    margin-right: 0;
}

.mainContent .relatedDataPortlet .rdpActionsMenu.menuContainerH.actionsMenu > ul,
.mainContent .relatedDataPortlet .rdpActionsMenu.menuContainerH.actionsMenu > .dropDownControlContainer {
    background: none;
}

.rdpActionsMenu.menuContainerH .dropDownControlContainer {
    float: left;
}

.rdpActionsMenu.menuContainerH .dynamicMoreMenuItems .dropDownControlContainer {
    float: none;
}

.rdpActionsMenu.menuContainerH .dropDownControlContainer > .dropdownControl > button {
    background: none;
    border: solid 0 transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 10px 10px 6px 10px;
    position: relative;
    overflow: visible;
    border-bottom: solid 3px transparent;
}

.rdpActionsMenu.menuContainerH .dropDownControlContainer.selected > .dropdownControl > button {
    font-weight: 600;
}

.menuContainerH .dropDownControlContainer > .dropdownControl > button > .notificationCount {
    position: absolute;
    left: 10px;
    top: -2px;
    font-size: 0.8em;
}

.rdpActionsMenu.menuContainerH .dropDownControlContainer > .dropdownControl > button:hover {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
}

.menuContainerH .menuItem.dropdownControl {
    vertical-align: top;
}

/* More action menu */
/* Dont show Label and show a bigger icon */


#EnquiryActionsMenu .more > .buttonLabel {
    display: none;
}

.menuActionItem .more > .icon16,
#MoreActions button.handle .icon16 {
    margin: 0 5px;
}

.actionsMenu .addAction > .buttonLabel,
.actionsMenu .editAction > .buttonLabel {
/*    display: none;    */
    float: right;
    min-width: 20px;
}

.actionsMenu .addAction .icon16, .actionsMenu > .dropDownControlContainer > .dropdownControl > .addAction.defaultAction > .icon16,
.actionsMenu .editAction .icon16, .actionsMenu > .dropDownControlContainer > .dropdownControl > .editAction.defaultAction > .icon16 {
    background-image: none;
    margin: 0;
}

.actionsMenu .addAction .icon16:before, .actionsMenu > .dropDownControlContainer > .dropdownControl > .addAction.defaultAction > .icon16:before {
    content: "\E146";
}

.actionsMenu .editAction .icon16:before, .actionsMenu > .dropDownControlContainer > .dropdownControl > .editAction.defaultAction > .icon16:before {
    content: "\E078";
}

.actionsMenu .addAction.hasSubMenu .icon16, .actionsMenu > .dropDownControlContainer > .dropdownControl > .addAction > .icon16,
.actionsMenu .editAction.hasSubMenu .icon16, .actionsMenu > .dropDownControlContainer > .dropdownControl > .editAction > .icon16  {
    background-image: none;
    margin-left: 5px;
}

.actionsMenu .addAction.hasSubMenu .icon16:before, .actionsMenu > .dropDownControlContainer > .dropdownControl > .addAction > .icon16:before {
    content: "\E009";
}

.actionsMenu .dynamicMoreMenuItems .dropDownControlContainer.selected > .dropdownControl > button:after {
    content: "\E066";
    font-family: 'iconGlyph';
    position: absolute;
    top: 10px;
    right: 5px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    opacity: 0.5;
}

.actionsMenu .dynamicMoreMenuItems .dropDownControlContainer.selected > .dropdownControl > button {
    border-bottom: none;
    width: 100%;
}


#googlefedlogininstructions, #googlefedloginappmaint, #facebookfedloginappmaint, #microsoftfedloginappmaint, #saml20fedloginappmaint, #messagePanelWarning,
#messagePanelInfo, #messagePanelError, #messagePanelSuccess, #messagePanelNew
{
    margin-top: -10px;
}

.messagePanel > .editorLabel  {
    display: block;
    width: auto;
}

.messagePanel
{
    border-radius: 20px;
    border: solid 1.1px;
    margin-bottom: 8px;
    padding-left: 21px;
    padding-top: 7px;
    padding-right: 5px;
}

.messagePanelInfo
{
    border-color: #4a6785;
    background-color: #fcfcfc;
}

.messagePanelError
{
    border-color: #d04437;
    background-color: #fff8f7;
}

.messagePanelSuccess
{
    border-color: #91c89c;
    background-color: #f3f9f4;
}

.messagePanelWarning
{
    border-color: #ffeaae;
    background-color: #fffdf6;
}

.messagePanelNew
{
    border-color: #df6c00;
    background-color: #fff8f1;
}

.messagePanel:before  {
    display: block;
    float: left;
    width: 26px;
    height: 26px;
    color: #c4c4c4;
    border-radius: 16px;
    text-align: center;
    line-height: 26px;
    font-size: 2em;
    font-weight: bold;
    margin-right: 10px;
}

.messagePanel.messagePanelInfo > .icon16:before {
    content: "\E084";
    color: #4a6785;
}

.messagePanel.messagePanelSuccess > .icon16:before {
    content: "\F186";
    color: #70c172;
}

.messagePanel.messagePanelError > .icon16:before {
    content: "\E185";
    color: #e00000;
}

.messagePanel.messagePanelWarning > .icon16:before {
    content: "\E221";
    color: #F4D456;
}

.messagePanel.messagePanelNew > .icon16:before {
    content: "\E147";
    color: #df6c00;
}

.messagePanelContents {
    padding-left: 8px;
}

.messagePanelContents > .panel {
    padding-top: 0 !important;
}

.messagePanelHeading {
    padding-left: 8px;
    font-weight: 600;
    font-size: 0.9em;
    padding-bottom: 8px;
    padding-top: 2px;
}

#MyMaintenanceSearch {
    display: block;
    position: relative;
}

#MyMaintenanceSearchButton
{
    font-size: 1.2em;
    font-weight: bold;
    line-height: 16px;
    font-family: Osans, Arial, sans-serif;
    white-space: nowrap;
}

#MyMaintenanceSearchButton > .buttonLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#MyMaintenanceSearchButton > .icon16:before {
    content: "\E006";
    font-weight: normal;
}

#MyMaintenanceSearchContainer {
    width: 550px;
    left: 0;
    z-index:9;
    position: absolute;
    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);
}

#MyMaintenanceSearchContainer.noGotoLink {
    width: 420px;
}

#MyMaintenanceSearchContainer.shown {
    display: inherit;
}

#MyMaintenanceSearchContainer > .padding10 > .styleContainer {
    display: inline-block;
}

#MyMaintenanceSearchContainer > .padding10 > .styleContainer > .textBoxControl {
    padding: 0;
}

#MyMaintenanceSearchContainer > .padding10 > .styleContainer > .textBoxControl > .tbcEditorLabel {
    display: block;
}

#MyMaintenanceSearchGotoEnquiryLink {
    line-height: 30px;
    display: inline-block;
    vertical-align: bottom;
    width: 80px;
    padding-left: 10px;
}
.nativeLink > .editorField > .nativeLinkSpan {
    min-height: 16px;
    line-height: 16px;
    padding: 0 4px 2px 4px;
    margin: 0;
    display: inline-block;
    border: solid 1px transparent;
    white-space: nowrap;
    font-size: 1.1em;
    vertical-align: top;
    color: #656565;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nativeLink > .editorField > .nativeLinkSpan > .userDetails {
    overflow: hidden;
    text-overflow: ellipsis;
}

.stackedContainer > .nativeLink > .editorField > .nativeLinkLink {
    display: inline-block;
    border: solid 1px transparent;
    width: 26px;
    height: 26px;
    margin-top: -10px;
    line-height: 26px;
    padding: 1px;
    box-sizing: content-box;
    background-color: transparent;
    text-decoration: none;
    margin-left: -3px;
    text-align: center;
}

.nativeLink.empty > .editorField > .nativeLinkLink {
    color: #656565;
    cursor: default;
}

.nativeLinkLink > .icon16 { font-weight: normal; }

.phone > .icon16:before { content: "\E202"; }
.sms > .icon16:before { content: "\E244"; }
.email > .icon16:before { content: "\E182"; }
.userImage > .icon16:before { content: "\E251"; }
.url > .icon16:before { content: "\E081"; }
.naturalLanguageSearch {
    position:relative;
    border-color: #ccc;
}


.popup .naturalLanguageSearch.showBuilderInPopup {
    width: auto;
}

.naturalLanguageSearch {
    position:relative;
    /*width: 444px;*/
    /*width: 482px;
    width: 485px;*/
    border-color: #ccc;
}

.naturalLanguageSearch.isCriteriaBuilder {
    width: auto;
}

.naturalLanguageSearch.hidden {
    display: none;
}

.stackedContainer > .naturalLanguageSearch {
    float: none;
}

.naturalLanguageSearch.nlsfocused {
    border-color: #939393;
}

.relatedDataPortlet .headerBar .naturalLanguageSearch {
    padding: 0;
    float: left;
    height: 30px;
}

.stackedContainer .naturalLanguageSearch .naturalLanguageSearchInputWrapper {
    border: none;
}

.naturalLanguageSearchInputWrapper,
.searchWrapper {
    position: relative;
    background-color: #fff;
    border: solid 1px rgba(0,0,0,0.1);
    min-height: 24px;
    box-sizing: border-box;
}

.naturalLanguageSearch .readOnlyNLValue {
    padding: 5px;
}

.naturalLanguageSearch .naturalLanguageSearchInputWrapper,
.searchWrapper {
    border-radius: 3px;
}

.naturalLanguageSearch textarea.nlsValue1Input, .naturalLanguageSearch textarea.nlsValue2Input
{
    resize: vertical;
}

.naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea,
.searchTextInput, input[type="text"].searchTextInput
{
    vertical-align: top;
    margin: 0;
    min-height: 18px;
    width: 374px;
    border-radius:3px;
    height:18px;
    padding: 4px 0 4px 4px;
    overflow: hidden;
    resize: none;
    border: none;
    margin-right: 104px;
    border: solid 1px transparent;
    background-color: transparent;
}


.naturalLanguageSearch.isCriteriaBuilder .naturalLanguageSearchInputWrapper textarea {
    margin-right: 26px;
    width: 408px;
}

.naturalLanguageSearch.isCriteriaBuilder.nlsfocused .naturalLanguageSearchInputWrapper textarea {
    margin-right: 52px;
    width: 382px;
}


/*if NLS is readonly the textarea is hidden but we want to keep the control's width' */
.naturalLanguageSearch.readonly .naturalLanguageSearchInputWrapper {
    width: 440px;
}

.naturalLanguageSearch.isCriteriaBuilder .builderhiding.handle {
    right: 0px;
}

.hasClearButton > .inputClearButton {
    display: block !important;
    top: 5px;
    /*right: 25px;*/
    right: 85px;
}

/*do not show the clear button on tablet*/
.tablet .naturalLanguageSearch .inputClearButton {
    display: none!important;
}

.isCriteriaBuilder .hasClearButton > .inputClearButton {
    right: 35px;
}


/** Override style when display in MyMaintenance screen */
/*on tablet we don't need space for the clear input button'*/
.tablet .naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea {
    margin-right: 80px;
}

.portraitMode .relatedDataPortlet .naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea,
section .relatedDataPortlet .naturalLanguageSearch.simpleSearchMode .naturalLanguageSearchInputWrapper textarea{
    width: 211px;
    /*margin-right: 38px;*/
    margin-right: 80px;
}

section .relatedDataPortlet.pickListMode .naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea,
section .relatedDataPortlet .naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea{
    /*width: 266px;
    margin-right: 38px;*/

    width: 194px;
    margin-right: 110px;
}

/*in simple search mode (no search builder) align the clear button to the right*/
.naturalLanguageSearch.simpleSearchMode .hasClearButton > .inputClearButton {
    right: 55px;
}

/*****/

.naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea:focus {
    outline:none !important;

}

.naturalLanguageSearch > .naturalLanguageSearchInputWrapper > input {
    width:400px;
    height:20px;
    margin:0;
    background:none;
    border:none;
    background-repeat:no-repeat;
    border-radius:3px;
    background-color:#fff;
}

.naturalLanguageSearch > .naturalLanguageSearchInputWrapper > input::-webkit-input-placeholder {
  color: #777;
}
.naturalLanguageSearch > .naturalLanguageSearchInputWrapper > input:-moz-placeholder {
  color: #777;
}
.naturalLanguageSearch > .naturalLanguageSearchInputWrapper > input:-ms-input-placeholder {
  color: #777;
}

.naturalLanguageSearch > .suggestionPaneWrapper.shown{
    position: absolute;
    z-index:1001;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: solid 1px;
}

.naturalLanguageSearch .textBoxControl .nlsSpw.shown {
    width: auto;
}

.builderhiding  .nlsBgBlocker,
.naturalLanguageSearch.readonly .builderhiding.handle,
.naturalLanguageSearch.readonly textarea,
.naturalLanguageSearch .readOnlyNLValue {
    display: none;
}

.naturalLanguageSearch.readonly .readOnlyNLValue {
    display: block;
}

.builderhiding.handle {
    position: absolute;
    /*right: 0;*/
    right: 50px;
    top: 0;
}


/*do not display any blocker if the NLS is within a popup (popup already has a blocker)*/
.popup .naturalLanguageSearch .nlsBgBlocker {
    display: none;
}

.buildershowing .nlsBgBlocker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index:1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.naturalLanguageSearch .suggestionPane.shown{
    display: block;
    width:auto;
    min-width: 252px;
    overflow-y: auto;
    max-height: 400px;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.naturalLanguageSearch  span.itemLabel
{
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.naturalLanguageSearch .suggestionPane a
{
    display:block;
    position:relative;
    padding:5px;
    border-bottom:solid 1px;
    color: #656565;

}

.naturalLanguageSearch .suggestionPane.shown a {
    border-top: solid 1px transparent;
}

.naturalLanguageSearch .suggestionPane a:hover {
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
}

.naturalLanguageSearch .suggestionPane a.selected:hover {
    background-image:none;
}

.naturalLanguageSearch .suggestionPane a:hover .itemLabel {
    text-decoration:underline;
}

.naturalLanguageSearch a.nlsChoice span
{
    vertical-align: top;
    display: inline-block;
    padding: 5px;
}

.naturalLanguageSearch > .naturalLanguageSearchInputWrapper > input.placeholderVisible
{
    color: #777 !important;
}


.tablet .naturalLanguageSearch .suggestionPane .nlsChoice:hover {
    background: none;
}

.naturalLanguageSearch .naturalLanguageSearchToolbox
{
    position: absolute;
    display: none;
    z-index: 2;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder
{
    position: fixed;
    z-index: 2;
    background-color: #fff;
    border: solid 1px #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.naturalLanguageSearch.showBuilderInPopup .naturalLanguageSearchBuilder {
    position: relative;
    top: 0;
    border: none;
    box-shadow: none;
/*    overflow: auto;*/
}

.criteriaBuilderPopup .content > .webkitOverflowTouch {
    -webkit-overflow-scrolling: auto!important;/*anything but auto causes the drop-downs to be cut on iPad*/
    overflow-x: auto;
}


.naturalLanguageSearch.showBuilderInPopup > .editorLabel,
.naturalLanguageSearch.showBuilderInPopup > .naturalLanguageSearchInputWrapper,
.naturalLanguageSearch.showBuilderInPopup #NLSActionPanel {
    display: none;
}

.naturalLanguageSearch.showBuilderInPopup .naturalLanguageSearchBuilder {
    position: relative;
}

.naturalLanguageSearch .nlsCriteriaValueContainer .nlsOperatorLabel {
    width: 210px!important;
}

.naturalLanguageSearch .nlsCriteriaValueContainer .nlsChooseAFieldTextBox > .tbcEditorField,
.naturalLanguageSearch .nlsCriteriaValueContainer .nlsReplaceAFieldTextBox > .tbcEditorField {
    width: 210px !important;
}

.naturalLanguageSearch .keywordsCriteriaContainer .tbcEditorField {
    width: 180px !important;
}

.naturalLanguageSearch .nlsCriteriaValueContainer .nlsValue1 > .tbcEditorField,
.naturalLanguageSearch .nlsCriteriaValueContainer .nlsValue2 > .tbcEditorField {
    width: 175px !important;
}


.naturalLanguageSearch .naturalLanguageSearchBuilderResizer.nlslong
{
    overflow: auto;
/*
    this causes the picklist/suggestion pane to be truncated on iPad
    -webkit-overflow-scrolling: touch;
*/
}

.naturalLanguageSearch .naturalLanguageSearchBuilderResizer.nlsshort
{
    overflow: visible;
}

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilder
{
    display: block;
    z-index: 10;
    /*overflow: auto;*/
}

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilder > *
{
    display: block;
}

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilderBottomVinculum
{
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.naturalLanguageSearch.buildershowing.showBuilderInPopup .naturalLanguageSearchBuilderBottomVinculum {
    border-bottom: none;
}

.naturalLanguageSearch.builderhiding .naturalLanguageSearchBuilder
{
    display: none;
}

.naturalLanguageSearch.hierarchySearch .hasClearButton > .inputClearButton {
    right: 5px;
}

.naturalLanguageSearch.hierarchyLargeSearch .hasClearButton > .inputClearButton {
    right: 55px;
}

.naturalLanguageSearch.hierarchySearch .naturalLanguageSearchInputWrapper textarea {
    margin-right: 30px;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .keywords
{
    float: left;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderVinculum,
.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilderBottomVinculum
{
    padding:0px;
    clear: both;
}

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilderBottomVinculum
{
    min-height: 20px;
}

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilderBottomVinculum .nlshint
{
    color: #a00;
    font-weight: bold;
    width: 100%;
    text-align: center;
    display: block;
}

.naturalLanguageSearch.buildershowing.hideketall .naturalLanguageSearchBuilderBottomVinculum .nlshint
{
    display: none;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .naturalLanguageSearchBuilderFooter
{
    clear: both;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder.resizing .criteriaSetItem
{
    clear: both;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .criteriaSetItem.bra
{
    margin-left: 75px;
    border-radius:15px;
    border-style: solid;
    border-width: 1px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
    /* x for bra */
    /* padding-right: 10px; */
    /* margin-right: 27px; */
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer
{
    margin-right: 70px;
    margin-left: 75px;
}

.naturalLanguageSearch.buildershowing .keywordsCriteriaContainer
{
    margin-right: 70px;
}

.naturalLanguageSearch.buildershowing div.nlsclose
{
    display: none;
    float: right;
    margin-right: -70px;
}

.naturalLanguageSearch.buildershowing div.nlslink
{
    float: left;
    margin-left: -65px;
    display: inline-block;
    margin-top: 4px;
}

/* link buttons: and/or */

.naturalLanguageSearch.buildershowing div.nlslink button
{
    width: 40px;
}

/*.naturalLanguageSearch.buildershowing div.nlslink button:hover
{
    border-color:#1991f5;
}*/

.naturalLanguageSearch.buildershowing .hidelink > div.nlslink
{
    display: none;
}

/* ungroup buttons: (/) */

.naturalLanguageSearch.buildershowing .bra > div.nlsungroup
{
    float: left;
    display: inline-block;
    margin-top: 4px;
}

.naturalLanguageSearch.buildershowing div.nlsungroup button span
{
    color: #aaa;
    text-decoration: line-through;
}

.naturalLanguageSearch.buildershowing div.nlsungroup
{
    display: none;
}

.naturalLanguageSearch.buildershowing div.nlsungroup button
{
    border-color:transparent;
    background: none;
}

/*.naturalLanguageSearch.buildershowing div.nlsungroup button:hover
{
    border-color:#1991f5;
}*/


/* group buttons: (/) */

.naturalLanguageSearch.buildershowing div.nlsbra
{
    float: left;
    margin-left: -20px;
    display: inline-block;
    margin-top: 4px;
}

.naturalLanguageSearch.buildershowing div.nlsbra button span.hint
{
    color: #aaa;
}

.naturalLanguageSearch.buildershowing div.nlsbra button span.selected
{
    color: #a00;
    font-weight: bold;
    display: none;
}

.naturalLanguageSearch.buildershowing div.nlsbra.selected button span.selected
{
    display: inline-block;
}

.naturalLanguageSearch.buildershowing div.nlsbra.selected button span.hint
{
    display: none;
}

.naturalLanguageSearch.buildershowing div.nlsbra button
{
    border-color:transparent;
    background: none;
}

/*.naturalLanguageSearch.buildershowing div.nlsbra button:hover
{
    border-color:#1991f5;
}*/

.naturalLanguageSearch.buildershowing .hidebra > div.nlsbra
{
    display: none;
}

.naturalLanguageSearch.buildershowing div.nlsadd
{
    display: none;
    float: right;
    margin-right: -40px;
}

.naturalLanguageSearch.buildershowing div.nlsexpr
{
    display: none;
    margin-left: 5px;
}

/*.naturalLanguageSearch.buildershowing div.nlsadd button:hover
{
    border-color:#1991f5;
}*/

.naturalLanguageSearch.buildershowing div.nlsket
{
    display: inline-block;
    float: right;
    margin-right: 2px;
    padding-top: 4px;
}

/*.naturalLanguageSearch.buildershowing div.nlsket button:hover
{
    border-color:#1991f5;
}*/


.naturalLanguageSearch.buildershowing .hideket div.nlsket
{
    display: none;
}

.naturalLanguageSearch.buildershowing div.nlsket button span
{
    color: #a00;
    font-weight: bold;
}

.naturalLanguageSearch.buildershowing .bra > div.nlsclose
{
    /* x for bra */
    /*margin-right: -37px;*/
}

/* x for bra */
/*.naturalLanguageSearch.buildershowing .bra > div.nlsclose,*/
.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer div.nlsclose
{
    display: inline-block;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer div.nlsadd,
.naturalLanguageSearch.buildershowing .keywords div.nlsadd
{
    display: inline-block;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer div.nlsexpr,
.naturalLanguageSearch.buildershowing .keywords div.nlsexpr
{
    display: inline-block;
}

.naturalLanguageSearch.buildershowing div.nlsadd button
{
    /*border-color:transparent;
    background: none;
    box-shadow: none;
    padding: 1px;
    background-color: rgba(0, 0, 0, 0.35);

    opacity: 0.35;*/
}


.naturalLanguageSearch.buildershowing div.nlsclose > button > span
{
    /*background: url("/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/removereddark.png") no-repeat center;*/
    color: #fff;
}

.naturalLanguageSearch.buildershowing div.nlsclose button
{
    border-color:transparent;
    background: none;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0.35;
    border-radius: 15px;
    box-shadow: none;
    padding: 1px;
    margin-top: 5px;


}

.naturalLanguageSearch.buildershowing div.nlsclose button:hover
{
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac5.png');*/
    opacity: 1;
}

/* x for elems */
.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer.singleton div.nlselemcut
{
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer div.nlselemcut
{
    display: inline-block;
    padding: 9px 3px;
}

.naturalLanguageSearch.buildershowing div.nlselemcut > button > .glyph:before
{

}

.naturalLanguageSearch.buildershowing div.nlselemcut button
{
    border-color:transparent;
    background: none;
    box-shadow: none;
    padding: 1px;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0.35;
}

.naturalLanguageSearch.buildershowing div.nlselemcut button > .glyph {
    color: #fff;
}

.naturalLanguageSearch.buildershowing div.nlselemcut button:hover
{
    opacity: 0.7;
}
/* end x for elems */

/* + for elems of "is one of" operators */
.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer.hidecomma div.nlscomma
{
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer div.nlscomma
{
    display: inline-block;
    padding: 9px 3px;
    margin-left: 2px;
}

.naturalLanguageSearch.buildershowing div.nlscomma button
{
    border-color:transparent;
    background: none;
    box-shadow: none;
    padding: 1px;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0.35;
}

.naturalLanguageSearch.buildershowing div.nlscomma > button > span {
    color: #fff;
}

.naturalLanguageSearch.buildershowing div.nlscomma > button > .glyph:before {

}

.naturalLanguageSearch.buildershowing div.nlscomma button:hover
{
    opacity:0.7;
}

/* end + for elems */


/*The width should be slightly larger (by 18px to compensate for the missing clear input button)*/
.naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.decimal,
.naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.long,
.naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.currency
{
    width: 218px;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .textBoxControl.controlContainer,
.naturalLanguageSearch .naturalLanguageSearchBuilder .comboBoxControl.controlContainer,
.nlsCriteriaValueContainer .nlsclose,
.nlsadd,
.nlsexpr,
.nlsCriteriaValueContainer .nlsOperator
{
    padding-top: 4px;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .textBoxControl.controlContainer,
.naturalLanguageSearch .naturalLanguageSearchBuilder .comboBoxControl.controlContainer {
    margin-right: 5px;
}


.nlsCriteriaValueContainer .nlsOperator.comboBoxControl .editorField {
    background-color: #fff;
    position: relative;
}

.nlsCriteriaValueContainer .nlsOperator.comboBoxControl .editorField:before {
    content:"\E045";
    display: block;
    font-size: 16px;
    line-height: 30px;
    width: 16px;
    height: 30px;
    font-family: 'iconGlyph';
    position: absolute;
    right: 5px;
}

.nlsCriteriaValueContainer .nlsOperator.comboBoxControl .editorField select {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    background: none;
    position: relative;
    border-radius: 3px;
}

.nlsCriteriaValueContainer .nlsOperator.comboBoxControl .editorField select:focus {
    outline: none;
}





/*.defaultos0 .nlsOperatorInput{
      -webkit-appearance: none;
}

.defaultos0 .nlsOperator.comboBoxControl > .editorField {
    background-color: #fff;
}

.defaultos0 .nlsOperator.comboBoxControl > .editorField:before {
    font-family: iconGlyph;
    font-size: 16px;
    line-height: 16px;
    content:"\E045";
    position: absolute;
    right: 5px;
    top: 12px;
}

.defaultos0 .nlsOperator.comboBoxControl > .editorField > select {
    background-color: transparent;
    margin-right: 0;
}*/





#SearchValue_Container
{
    padding-top: 0;
    padding: 0;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperator .editorLabel{
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperatorLabel
{
    margin-top: 4px;
    margin-right: 5px;
    /*border-radius: 0;*/
    background-color: rgba(255, 255,255, 0.35);
    background-image: none;
    /*border: solid 1px #fff;*/
}

/*.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperatorLabel:hover
{
    border-color:#1991f5;
}*/

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperatorLabel .buttonLabel
{
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 10px;
    display: block;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperatorLabel .icon16:before {
    content: "\e045";
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsOperatorLabel .icon16 {
    margin-top: -16px;
    float: right;
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer.choosing .nlsOperatorLabel
{
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer .nlsReplaceAFieldTextBox {
    display: none;
}

.naturalLanguageSearch.buildershowing .nlsCriteriaValueContainer.choosing .nlsReplaceAFieldTextBox {
    display: inline-block;
}

.tabGrabber
{
    position: fixed;
    left: -5000px;
}


button.showHideSearchBuilder {
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
}

button.showHideSearchBuilder > .icon16 {
    /*background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropdown.png');*/
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
    filter: alpha(opacity=50);
    opacity: 0.5;
}

button.showHideSearchBuilder > .icon16:before {
    content: "\E045";
}

button.showHideSearchBuilder:hover > .icon16 {
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    filter: alpha(opacity=100);
    opacity: 1;
}

#NLSActionPanel {
    border-top: solid 1px rgba(255,255,255,0.75);
}

#NLSActionPanel button {
    min-width: 60px;
    text-align: center;
    margin-right:5px;
}

textarea.clearabletextarea
{
    padding-right: 20px;
    overflow: hidden;
}

.naturalLanguageSearch .naturalLanguageSearchBuilder .suggestionPaneWrapper,
.naturalLanguageSearch .naturalLanguageSearchBuilder .calendarContainer {
    position: fixed !important;
    width: auto;
}

.relatedDataPortlet .naturalLanguageSearch .naturalLanguageSearchBuilder .criteriaContainer {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 400px;
}
/* iPad - in maintenance, the tabControlsInnerContainer_LinkedTab has a translation3D css attribute set and this causes the suggestionPaneWrapper (although fixed positioned) to be displayed under the
    criteriaContainer  */
.ipad .tabControlsInnerContainer_LinkedTab .relatedDataPortlet .naturalLanguageSearch .naturalLanguageSearchBuilder .criteriaContainer {
    overflow: visible!important;
}


/* iPad */
@media only screen and (device-width: 768px)
{
    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.decimal,
    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.long,
    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input.currency
    {
        width: 200px;
    }

     .naturalLanguageSearch .suggestionPane.shown {
         max-height: 200px;
     }

    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input,
    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsOperatorLabel
    {
        width: 150px;
    }

    .naturalLanguageSearch .suggestionPaneWrapper.shown ~ .naturalLanguageSearchBuilderResizer {
        overflow: inherit !important;
    }

}

.recordNavigator
{
    clear: right;
    float: right;
}

#ActionPane .recordNavigator
{
    clear: none;
}

.recordNavigator + * {
    clear: right;
}

.recordNavigator > *
{
    vertical-align: middle;
}

.recordNavigator .prev, .recordNavigator .next {
    float: left;
    position: relative;
}

.recordNavigator .prev:hover, .recordNavigator .next:hover {
    z-index: 1;
}

.recordNavigator .next {
    margin-left: -1px;
}


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

.recordNavigator button.first .icon16:before { content: "\E087"; }

.recordNavigator button.last .icon16:before { content: "\E088"; }

.recordNavigator > .of
{
    padding: 0 5px;
}

.recNavCount {
    float: left;
    margin: 0 10px;
}

.recNavCount > .current {
    font-weight: bold;
}

.recNavCount > .total
{
    font-weight: bold;
    margin-right: 2px;
}

.recordNavigator > .recordSelector > .content
{
    max-height: 200px;
    overflow-x:hidden;
    overflow-y: auto;
}

.recordNavigator > .recordSelector {
    min-width: 260px;
    max-width: 500px;
    z-index: 10000 !important;
    right: 80px;
    position: absolute;
    display: block;
    padding-right:0;
    padding-bottom:0;
    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); 
    font-size: 12px;
    margin-top: 0;
}

.recordSelector > .header > .headerTitle {
    font-family:inherit;
    font-size: 1em;
    font-weight: 600;
    padding: 5px 10px;
    line-height: 16px;
    border-top: solid 1px transparent;
    border-bottom: solid 1px #e6e6e6;
}

.recordSelector > .content > .recordList
{
    position: relative;
    vertical-align: top;
    float: left;
    width: 100%;
}

.recordSelector > .content > .recordList > .recordListItem {
    padding: 0;
    border-radius: 0;
    position: relative;
}

.recordSelector > .content > .recordList > .recordListItem:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.recordSelector > .content > .recordList > .recordListItem.recordSelected:after {
    
}


.recordListItem.recordSelected {
    background-color: rgba(0, 0, 0, 0.03);
}

.recordListItem {
    
}

.recordSelector .recordListItem {
    
}

.recordSelector > .content > .recordList > .recordListItem > a {
    display: block;
    padding: 6px;
    padding-right: 30px;
    padding-left: 10px;
    border: solid 1px transparent;
    font-size: 0.9em;
    line-height: 16px;
    white-space: nowrap;
    color: initial;
}

.recordSelector > .content > .recordList > .recordListItem a:hover, .recordSelector > .content > .recordList > .recordListItem.recordSelected a:hover {
    text-decoration:none;
    background-image:none;
}


/*--Audit Details--*/

#AuditSummarySection {
    float: right;
    text-align:right;
    z-index: 1;
    position: relative;
    font-size:0.9em;
    max-width:360px;
    line-height:18px;
}

.auditItem ~ .auditItem, .auditItem ~ .userDetails {
    padding: 0 0 0 3px;
}

#AuditSummaryLink, #AuditUserLink {
    line-height: inherit;
}
.notification.wrapper {
    margin: 0;
    visibility: hidden;
    position: absolute;
    z-index: 9100;    
    left: 5px;
    right: 5px;
    top:-100px;
    transition: top 0.3s ease-in-out;
}

.notification.wrapper.shown{
    top: 5px;
    visibility: visible;
}

.notification.wrapper > div
{
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);    
    position: relative;
    padding-bottom: 10px;
}

.notification .statusBar {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 50px;
}

.notification .container .header {
    display:inline-block;    
    padding:0 10px;
    margin-top:10px;
    border-radius:30px;
}

.notification .statusBar .glyph{
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
}

#NotificationMessagesContainer{
    max-height: 80vh;
    overflow-y: auto;
}

.notification .header .total {
    display: inline-block;
    font-weight: 600;
    line-height: 2em;
    text-transform: uppercase;
    font-size: 1.3em;
}

.notification .header a{
    margin-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.5);
    line-height: 2em;
    text-decoration: none;
    position: relative;
    float: right;
    padding: 4px 0;
}

.notification .header a:not([href]){
    display: none;
}

.desktop .notification .header a:hover .tooltip {
    display: block;
}

.notification .actions {
    position: absolute;
    top: 0;
    right: 0;
}

.notification  .actions > * {
    display: inline-block;
    vertical-align: top;
    margin: 2px 5px;
    cursor: pointer;
    padding: 4px 6px;
    position: relative;
}


.notification .tooltip {
    position: absolute;
    display: none;
    padding: 4px;
    top: 35px;
    white-space: nowrap;
    left: -50%;
    border: solid 1px rgba(0, 0, 0, 0.26);
    background: white;
    border-radius: 5px;
}
.notification .actions div:hover{
    opacity: 1;
}

.notification .actions div:hover .tooltip{
    display: block;
}

.notification .errorMessages {
    overflow-y: auto;
    max-height: 80vh;
    margin-right: 20px;
}

.notificationItem {    
    line-height: 2em;
    margin-top: 5px;
    padding-top: 5px;
}

.notificationItem > .glyph{
    padding: 0px 5px;
    display: inline-block;
}

.notificationItem a {
    text-decoration: underline;
}

.notification .emailTo{
    display:none;
}

.category[data-t1-category="alert"] .glyph.icon16:before {
    content: "\E290";
}

.notification.wrapper.shown{
    left:10vw;
    right:10vw;
}

.notification.wrapper > div
{
    padding-left: 60px;    
}

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

.notificationHeaderButton {
    color: #fff;
    background-image: none;
    border-color: transparent;
}

.notificationHeaderButton.alert{
    color: brown;
}

.notificationHeaderButton:hover {
    border-color:transparent;
}

.header > .notificationHeader {
    position: absolute;
    top: 2px;
    right: 45px;
}

.header > .notificationHeader > .notificationHeaderButton {
    padding-top: 4px;
    padding-bottom: 4px;
}


.numberBox 
{
    display:inline-block;
    min-width:28px;
    height:28px;
    border-radius: 3px;
    color: #fff;
    text-align:center;
    padding: 4px 2px 0px 2px;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    margin: 2px 5px 2px 2px;
}

.numberBox .value
{
    font-weight:bold;
    font-size: 1.2em;
}

.numberBox .units
{
    /*font-weight:bold;*/
    font-size: 0.8em;
}
#oauth_panel_container { 
    width: 100%;
    margin: 10px auto;
    max-height: 100px;
    height: 100px;
}

#oauth_panel_image    {
    width: 100px;
    float: left;
}

#oauth_panel_content  {
    margin-left: 40px;
    padding-top: 20px;
}

#oauth_parent_panel {
    padding: 5px;
}

#oauth_link:link {
    text-decoration: none;
}

#oauth_link:hover {
    text-decoration: underline;
}

#oauth_link:active {
    text-decoration: underline;
}
.overlay {
    position: absolute;
    background: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9004;
    overflow: hidden;
}
.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;
}

.pdfViewer {
    max-height: 700px;
}

.pdfViewerPage {
    display:block;
    margin: 0 auto;
    margin-top: 5px;
}

.pdfViewPage.page1 {
    margin-top: 0;
}

.popupContainer .pdfViewer{
    height: 100%;
    overflow-y: auto;
}

.documentPreviewSection > .pdf > .content > .pdfViewer,
.detailsPanel .pdf > .content > .pdfViewer  {
    max-height: none;
    height: 100%;
    overflow-y: auto;
}

.pdfViewerErrorMessage  {
    position: absolute;
    text-align: center;
    left: 10px;
    right: 10px;
    font-size: 1.7em;
    line-height: 25px;
    top: 50%;
}
.sectionSwitcherTabControl > .editablePanel > .content > .pdfViewer > .pdfViewerErrorMessage {
    color: #FFF;
}


.picklistControl .vanillaStyle th {
    white-space: nowrap;
}



.picklistExtenderResultDisplayField {
    height: 16px;
    font-size: 1.8em;
    background-position: center right;
    display: inline-block;
    width:auto;
}

.picklistExtenderFieldResult {
    margin-top:11px;
    padding-top:3px;
    display: inline-block;
    padding-left: 26px;
    margin-left:10px;
    height: 16px;
    width:auto;
}

.picklistExtenderPanel {
    padding-top: 5px;
    padding-bottom: 5px;
}

.picklistExtenderPanel .panel .picklistControl {
    display:inline-block;
}

.picklistExtenderPanel .picklistExtenderFieldResult.picklistExtenderInvalid,
.picklistExtenderPanel .picklistExtenderInvalid .picklistExtenderResultDisplayField {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/orbredex.png');
    background-repeat: no-repeat;
}

.picklistExtenderPanel .picklistExtenderFieldResult.picklistExtenderValid,
.picklistExtenderPanel .picklistExtenderValid .picklistExtenderResultDisplayField {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/orbgreentick.png');
    background-repeat: no-repeat;
}

.extendedPicklistFieldContainer > div{
    display: inline-block;
}

.picklistExtenderResultContainer {
    margin-left: 155px;
    margin-top: 5px;
    margin-bottom: 8px;
    padding-top: 3px;
    float:left;
    width: auto;
    background-position: center right;
    min-width: 407px;
}

.picklistExtenderResultContainer .picklistExtenderResultDisplayField  {
    width:100%;
    color:inherit;
}

.picklistExtenderPanel .picklistExtenderValid,
.picklistExtenderPanel .picklistExtenderValid label{
    color:darkgreen;
}

.picklistExtenderPanel .picklistExtenderInvalid,
.picklistExtenderPanel .picklistExtenderInvalid label {
    color:red;
}

.picklistExtenderResultDisplayMessage {
    width:380px;
    padding-right:10px;
}
.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.1540.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;
    }
}
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemInput,
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    cursor: pointer;
}



/* Standard Style */

.standardStyle > .radioButtonControl.rbcStandardType  {
    border: solid 1px transparent;
    background: transparent;
    outline: none;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel {
    margin-bottom: 2px;
    display: block;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel > label {
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
    display: block;
    line-height: 14px;
    padding: 0 4px;
    border: solid 1px transparent;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorLabel > label > .labelInnerContainer {
    display: block;
    overflow: hidden;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem {
    min-height: 24px;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem:focus {
    outline: none;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > .rbcItemInput {
    display: block;
    float: left;
    position: relative;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > .rbcItemInput: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: 8px;
    content: "";
    margin: 3px 0 3px 4px;
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(245,245,245,1) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
    box-sizing: border-box;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput:before {
    border-color: #656565;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput:after {
    content: "";
    display: block;
    background-color: #656565;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 7px;
}

.standardStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem:hover > .rbcItemInput:before,
.standardStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem.active > .rbcItemInput:before {
    border-color: #656565;
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* W3C */
}

.standardStyle > .radioButtonControl.rbcStandardType.readonly > .rbcEditorField > .rbcItem > .rbcItemInput:before,
.standardStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemInput:before,
.standardStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    margin-left: 23px;
    display: block;
    padding: 0;
    width: auto;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    line-height: 20px;
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
    display: block;
    padding: 0 4px;
    border: solid 1px transparent;
}



/* Engaging Style */

.engagingStyle > .radioButtonControl {
    padding: 4px 0 12px 0;
    border: none;
}

.engagingStyle > .radioButtonControl > .rbcEditorLabel {
    display: block;
    opacity: 0.75;
    color: #656565;
    margin: 20px 0;
    font-size: 1.2em;
}

.engagingStyle > .radioButtonControl > .rbcEditorLabel > label {
    position: relative;
    padding: 0;
    line-height: 16px;
    border: none;
}


/* Engaging Style - Standard Radio Button */

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem {
    padding: 0 8px;
    float: left;
    position: relative;
    margin-left: 4px;
    box-sizing: border-box;
    clear: left;
    margin-top: 2px;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:focus {
    outline: none;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemInput {
    display: block;
    float: left;
    position: relative;
    transition: transform 0.1s ease;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput {
    transform: scale(1.2);
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemInput:before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    font-size: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: #c4c4c4;
    border-radius: 50%;
    background-color: #fff;
    margin: 8px 0;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput:after {
    content: "";
    display: block;
    background-color: #656565;
    margin: 12px 0;
    width: 0;
    height: 0;
    margin: 18px 0 0 0;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 10px;
    width: 12px;
    height: 12px;
    margin-top: 12px;
    left: 4px;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > .rbcItemInput:before {
    opacity: 0.5;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked:focus > .rbcItemInput:before {
    opacity: 1;
}

.engagingStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem.notChecked:hover > .rbcItemInput:before,
.engagingStyle > .radioButtonControl.rbcStandardType.editable > .rbcEditorField > .rbcItem.notChecked.active > .rbcItemInput:before {
    border-color: #656565;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%);
}

.engagingStyle > .radioButtonControl.rbcStandardType.readonly > .rbcEditorField > .rbcItem > .rbcItemInput:before,
.engagingStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemInput:before,
.engagingStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    display: block;
    margin-left: 30px;
    padding: 8px 4px;
    font-size: 1.2em;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    position: relative;
    display: block;
    padding: 0 4px;
    font-weight: 500;
    color: #656565;
    line-height: 20px;
}



/* Engaging Style - Standard Radio Button */

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem {
    padding: 0 4px;
    float: left;
    position: relative;
    box-sizing: border-box;
    color: #A5A5A5;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem:focus {
    outline: none;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > .rbcItemInput {
    display: block;
    text-align: center;
    position: relative;
    transition: transform 0.1s ease;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem > .rbcItemInput,
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField:hover > .rbcItem > .rbcItemInput {
    transform: scale(1.2);
    color: #ffcb05;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover > .rbcItemInput {
    transform: scale(1.4);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem.checked ~ .rbcItem > .rbcItemInput,
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover ~ .rbcItem > .rbcItemInput {
    color: inherit;
    transform: scale(1);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.readonly > .rbcEditorField > .rbcItem.checked ~ .rbcItem > .rbcItemInput,
.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.disabled > .rbcEditorField > .rbcItem.checked ~ .rbcItem > .rbcItemInput {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > .rbcItemInput:before {
    content: "\E556";
    font-family: iconGlyph;
    display: block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    font-size: 28px;
    margin: 8px 0;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    display: none;
}
.ratingControl {
    height: 100%;
    position: relative;
}

.ratingControl .ratingSymbol {
    color: #ffcb05;
    display: inline-block;
    float: left;
    width: 12px;
    font-size: 12px;
}

.ratingControl .ratingSymbol.selected ~ .ratingSymbol,
.ratingControl .noneSelected .ratingSymbol,
.ratingControl .ratingSymbol.halfSelected .rightPart {
    color: #000;
    opacity: 0.35;
}

.ratingControl .ratingSymbol > .glyph {
    width: 100%;
}

.ratingControl .ratingSymbol.halfSelected .leftPart,
.ratingControl .ratingSymbol.halfSelected .rightPart {
    float: left;
    width: 50%;
    overflow: hidden;
}


.ratingControl .ratingSymbol.halfSelected {
    display: inline-block;
}

.ratingControl .ratingSymbol.halfSelected .rightPart:before {
    margin-left: -100%;
}


/*----------- Column Grouping container ---------*/

.gridColumnGroupingPanelContainer
{
    position: relative;
    height: 40px;
    border-bottom: solid 1px rgba(0,0,0,0.1);
}

.gridColumnGroupingPanel 
{
    overflow: hidden;
    width: auto;
    padding: 5px 10px;
    white-space: nowrap;
}

.gridColumnGroupingPanelContainer button.delete {
    margin-top: 5px;
    padding: 2px;
 }

.gridColumnGroupingPanelContainer button.delete:hover {
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}

/*.gridColumnGroupingPanelContainer .plainText*/
/*{*/
    /*position: absolute;*/
    /*left: 20px;*/
    /*top: 10px;*/
/*}*/

.gridColumnGroupingPanel div.header,
.header.dragging
{
    padding: 6px 10px;
    border-radius: 1px;
    font-size: 0.9em;
    font-weight: 600;
    background-color: rgba(0,0,0,0.05);
    border: solid 1px transparent;
}

.gridColumnGroupingPanel div.header:hover {
    background-position:0 -60px;
}

.gridColumnGroupingPanel .header
{
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transition-property: opacity, left, top;
    -moz-transition: all 0.2s ease-in-out;
    -moz-transition-property: opacity, left, top;
}



.header.dragging 
{
    min-width: 80px;
    min-height:16px;
}

.header.dragging,
.gridColumnGroupingPanel .header
{
    padding-left: 5px;
}

.header.dragging .icon16
{
    display: none;
}

.gridColumnGroupingPanel .groupColumn.header
{
    margin-right: 0;
    margin-left:10px;
}

.gridColumnGroupingPanel .header:first-child {
    margin-left:0;
}

.gridColumnGroupingPanel .icon16
{
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
}

.gridColumnGroupingPanel .header:before {
    content:"";
    width:10px;
    height:16px;
    margin-left:-21px;
    float:left;
    display:inline-block;
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/moveright.png');
    background-repeat:no-repeat;
    background-position:center;
}

.gridColumnGroupingPanel .header:first-child:before {
    display:none;
}

div.gridColumnGroupingPanel div.header:first-child > div.joinLine
{
    display: none;
}
 
.groupColumn {
    margin-left: 5px;
    display: inline-block;
}

div.columnGroupingClear
{
    padding: 5px 10px;
    float: right;
}

 /*------------ Dragging ---------------------*/
 
 .gridColumnGroupingPanel .draggedPlaceholder
 {
    border: dashed 1px rgba(0,0,0,0.1) !important;
    color: #c4c4c4;
    background-color: transparent !important;
 }
 
 .gridColumnGroupingPanel .draggedPlaceholder .icon16
 {
     opacity: 0.2;
 }
 
 /*------------ Sliding next/prev ---------------------*/
 .gridColumnGroupingPanelContainer .slidePrev
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropleft.png') no-repeat center center;
    float:left;
    display:inline-block;
    height:25px;
    width:16px;
     margin-top: 7px;
     display: none;
}

.gridColumnGroupingPanelContainer .slidePrev:hover
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropleft.png') no-repeat center center;
    cursor: pointer;
}

.gridColumnGroupingPanelContainer .slideNext
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropright.png') no-repeat center center;
    float:right;
    display:inline-block;
    height:25px;
    width:16px;
     margin-top: 7px;
     display: none;
}

.gridColumnGroupingPanelContainer .slideNext:hover
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropright.png') no-repeat center center;
    cursor: pointer;
}

.gridColumnGroupingPanelContainer .slidePrev.disabled, .gridColumnGroupingPanelContainer .slidePrev.disabled:hover, 
.gridColumnGroupingPanelContainer .slideNext.disabled , .gridColumnGroupingPanelContainer .slideNext.disabled:hover
{
    opacity:0.2;
}


 
 
 
/*----Grid & actions Container Panel -----*/

.gridContainer, 
.hasRightPanel .gridContainer
 {
    width: auto;
}

.detailsPanel .gridContainer {
    margin-right: 0px;
}

.gridContainer,
.gridContainer .mainContainer,
.gridContainer .tableContainer
{
    width: 100%;
    margin: 0;
}

/*----------- Right container ---------*/

/*----------- Grid Row Action bar ---------*/

.gridContainer .addRemoveItem {
    cursor: pointer;
    margin-right: 5px;
}

.gridContainer .gridActionBar .editorLabelAutoWidth
{
    margin:0 5px 0 3px;
    font-size: 1.2em;
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/topbarsplitter.png') no-repeat center right;
    padding-right: 12px;
    width: auto;
    float: right;
    min-height: 1em;
    line-height:16px;
}

.relatedDataPortlet .gridActionBar > .editorLabelAutoWidth:first-child, 
.relatedDataPortlet .rdpActionBar > .editorLabelAutoWidth:first-child 
{
    float:none;
    background:none;
}

/* Super grid using this */
.gridContainer .gridActionBar > #SettingsDropdown
{
    float: right;
    margin-top: 2px;
    position: relative;
}


/*----------- Action and Data Table container ---------*/

.gridContainer table th
{
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad35opac.png');
    background-repeat:repeat-x;
    background-position:top left;
}

.gridContainer table th
{
    padding: 0;    
}


.dataTableContainer table th, .slideBar {
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad35opac.png'), url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac80.png');
    background-repeat:repeat-x, repeat-y;
    background-position:top left, -19px 0;
}

.dataTableContainer table tr th:hover {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad54opac100.png');
    background-repeat: repeat-x;
}

.gridContainer table tr
{    
    height: 25px;
}

/*.rowActionPanel {
    margin-left: 32px;
}*/

.rowActionPanel tbody tr:hover {
    background-color:transparent;
}

.rowActionPanel .gridActionHeader {
    padding: 5px 5px 0;
}

.rowActionPanel tbody .addToSelection .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plus.png'); 
}

.readOnlyGrid_Table tbody tr td > section 
{
    border-top:none !important;
}

[data-t1-control-type="ReadOnlyGrid"] .dataTableContainer table
{
    table-layout: fixed;
}

.dataTableContainer table th 
{
    min-width: 40px;
}

.dataTableContainer th.spacer
{
    width: 100%;
    min-width: 0px;
} 

.gridContainer .gridAction td:last-child {
    border-right:solid 1px;
}

.gridContainer .gridAction tbody td {
    padding: 0;
    padding-top: 2px;
}


.gridContainer th div.header
{
    position: relative;    
    min-height:22px;
    padding: 5px 16px 0px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:0 1px 0 rgba(255,255,255,1);
    font-weight:normal;
    
    
}

.gridContainer .dataTableContainer .header
{
    /*height: 1em;*/
    
}

.notSorted > div.header, .notSortable > div.header
{
    padding-right: 5px;
}

.dataTableContainer .resizeHandle
{    
    width: 12px;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac15.png');
    background-repeat: repeat;
    position: absolute;
    right: -6px;
    bottom: 0;
    top: 0;
    top: 0px;
    z-index: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;    
}

.dataTableContainer .resizeHandle:hover
{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity: 0.3;
    cursor: col-resize !important;
}

/*----------- DataTable container ---------*/

.gridContainer .dataTableContainer table
{
    width:100%;
}

.gridContainer .dataTableContainer.left table,
.gridContainer .dataTableContainer.right table {
    width: auto;
}

.gridContainer .dataTableContainer table td
{
    padding: 5px 5px 0 5px;
}

.gridContainer .dataTableContainer
{
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: auto;
}

.hasSlidebar .dataTableContainer.right
{
    margin-right: 18px;    
}

.gridContainer .dataTableContainer.left, .gridContainer .dataTableContainer.right
{
    padding-right: 0px;
}

.gridContainer .dataTableContainer.centre
 {
     border-left: 1px solid;
     border-right: 1px solid;
 }

.gridContainer.hasSlidebar .dataTableContainer.centre {
     margin-right: 17px;
}

.gridContainer .dataTableContainer.left {
    float: left;
}

.gridContainer .dataTableContainer.right {
    float: right;
    /*overflow-x: scroll;*/
}

.gridContainer .dataTableContainer.right .resizeHandle
{
    display: none;
}



.gridContainer .header button.handle
{
    border: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.readOnlyGrid_Table_Header .sortBy 
{
    float: right;
    position: absolute;
    right: 3px;
    top: 8px;
    background-position: center;
    background-repeat: no-repeat;

}

.ascending .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/ascending.png');
}
.ascending:hover .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/descending.png');
}

.descending .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/descending.png');
}
.descending:hover .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/ascending.png');
}

.notSorted:hover .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/ascending.png');
}


/* Grid cell style */
.dataTableContainer .gridCell
{
    display: block;
    vertical-align: top;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.dataTableContainer .gridCell input[type="checkbox"] {
    height: 15px;
}

.boldFont {
    font-weight: bold ! important;
}

.pointer, th .header {
    cursor:pointer;
}

th.nonSortable .header, .rowActionPanel th .header  {
    cursor: default;
}

.readOnlyGrid_Table .cellActions {
    width: 100%;
    text-align:inherit;
    border:0;
}

.readOnlyGrid_Table .cellActions button {
    width: 100%;
    border:0;
    background-color: transparent;
    text-align:inherit;
    box-shadow: 0 0px;
}

.readOnlyGrid_Table .cellActions .icon16 {
    background-position: right;    
    width:100%;
}

.readOnlyGrid_Table .cellActions .icon16 label {
    padding-right:20px;
}

.dataTableContainer tbody .numeric {
    text-align: right;
}
.dataTableContainer tbody .alphanumeric {
    text-align: left;
}

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

.dataTableContainer .iconDiv .iconOverlay {
    position: absolute;
    margin-top:-2px;
}

.gridContainer.doubleRowHeight .dataTableContainer .iconDiv .iconOverlay {
    margin-top:10px;
}





.gridContainer table th .dropdownControl
{
    position: absolute !important;
    right: 5px;
}

.header.dragging .dropdownControl
{
    display: none;
}

.gridContainer table th .dropdownPanel
{
    right: 0px;
    left: auto !important;
}

.gridContainer .dropdownControl .dropdownPanel {
    max-height: 294px; /* space for 10 1/2 row actions - 1/2 is to indicate on iPad that the container is scrollable*/
                       /*if you change this max height here change it also in the ThumbnailViewer.css for .menuLinks16*/
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gridContainer .dropdownControl .dropdownPanel .menuLinks16
{
    font-weight: normal;
}
.gridContainer .dropdownControl .dropdownPanel ul:last-of-type
{
    border-bottom:  none;
}

.gridContainer .dropdownControl .dropdownPanel ul li
{
    cursor: pointer;
}
/*----------- Row Action container ---------*/

.gridContainer div.tableContainer div.rowActionPanel
{
    float: left;
    /*overflow-x: scroll;*/
}

.gridContainer div.tableContainer div.rowActionPanel table td:first-child
{
    padding-left: 5px;
}

.gridContainer div.tableContainer div.rowActionPanel table td input
{
    vertical-align: middle;
}

/* iPads and touches */
body.tablet .gridContainer .dropdownControl .dropdownPanel ul li
{
    padding-left: 30px;
}

body.tablet .gridContainer .dropdownControl .dropdownPanel ul li a,
body.tablet .gridContainer .dropdownControl .dropdownPanel ul li label {
    padding-left: 0;
    display: inline-block;
}

/*----------------------Simple Input Panel------------------------ */
   
.searchPanelBottom , #PicklistSearchCriteria:after
{
    height:1px;
    padding:0;
}
     
    
/* Reset inherited styles*/
#SearchPanel .fieldsContainer
{
    padding: 0;
}
    
        
div[data-t1-control-id="Parameter_Region"] input[type="text"]
{
    font-size: 14px;
    padding-left: 10px;
    /*color: #0F3367;*/
    width: 200px;
    height: 20px;
}
    
#HeaderPanel.panel
{
    border-top: none;
    padding: 10px 0 0 0;
    height: 26px;
}
    
#HeaderPanel button[data-t1-control-id="SearchButton"] .icon16 
{
    display:none;
}
   
.formHeader .simpleSearchControl {
    float: left;
    margin-right:20px;
    margin-left: 10px;
}

    div.toolBarContainer
    {
        margin-top: 2px;
        border-bottom-style:solid;
        border-width:1px;
    }
    
    div.toolBarContainer > *
    {
        display: inline-block;
    }
    
    div.toolBarContainer div.leftContainerToggle
    {
        border: solid 1px transparent;
        margin: 0 0 -1px 10px;
        padding: 3px 3px 5px;
        border-radius: 18px 18px 0 0;        
    }
    
    div.leftContainerToggle.disabled button
    {
        opacity: 0.5;
        cursor: default;
    }
    
    div.gridContainer.showLeftContainer div.leftContainerToggle button
    {
        background: url("/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/expandcollapseleft.png")  no-repeat center;
    }
   
   
   

.relatedDataPortlet .views, 
.relatedDataPortlet .noSearchView,
.relatedDataPortlet .noResultsView{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.relatedDataPortlet .noSearchView > .noSearchPerformedContainer > .noSearchPerformedIcon,
.relatedDataPortlet .noResultsView > .noResultsContainer > .noResultsIcon {
    text-align: center;
    display: block;
    width: 100%;
}

.relatedDataPortlet .noSearchView > .noSearchPerformedContainer,
.relatedDataPortlet .noResultsView > .noResultsContainer {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    height: 94px;
    margin-top: -54px;
}

.relatedDataPortlet .noSearchView > .noSearchPerformedContainer > .defaultMessage,
.relatedDataPortlet .noResultsView > .noResultsContainer > .defaultMessage {
    margin-top: 14px;
     font-size: 1.4em; 
}

.relatedDataPortlet .noSearchView > .noSearchPerformedContainer > .noSearchPerformedIcon.default:before,
.relatedDataPortlet .noResultsView > .noResultsContainer > .noResultsIcon.default:before {
    content: "\E044";
}

.relatedDataPortlet .noSearchView > .noSearchPerformedContainer > .noSearchPerformedIcon.files:before,
.relatedDataPortlet .noResultsView > .noResultsContainer > .noResultsIcon.files:before {
    content: "\E162";
}

/*Favourites*/
.favouriteButton {
    border: solid 1px transparent;
    background: transparent;
    box-shadow: none;
    display: inline-block;
    vertical-align: top;
    opacity:0.5
}

.favouriteButton:hover {
    opacity: 1;
    border: solid 1px transparent;
    background: transparent;
}

.phone .favouriteButton:focus {
    box-shadow: none;
}

.favouriteButton.e180 {
    opacity: 1;
    color: gold
}


/* Dropdown control - SendActions*/
.rdpActionBar > .formActions,
.gridActionBar > .formActions
{
    float: right;
}

.enquiryLeftActionBar
{
    display: block;
    float: left;
    position: relative;
}

.relatedDataPortlet .rdpActionBar .enquiryLeftActionBar .filter.highlight .icon16 {
    color: inherit;
}

.enquiryLeftActionBar button.filter .tick {
    display: none;
}

.filtersApplied .enquiryLeftActionBar button.filter .tick {
    display: block;
}

.enquiryLeftActionBar button:focus {
    box-shadow:none !important;
}

.relatedDataPortlet.flipped
{
    margin-left: 0 !important;
}

.rowGroupExpander
{
    padding: 1px;
    background: none;
    box-shadow: none;
    border: none;
}

.relatedDataPortlet .rdpSpinner {
    display: none;
    float: left;
    background: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/loaderlbg.gif) no-repeat;
    height: 16px;
    width: 16px;
    margin-top: 10px;
}

.relatedDataPortlet.showActionBarSpinner .rdpSpinner{
    display: block;
}

.rowGroupExpander .icon16, .rowGroupExpander.collapsed .icon16
{
    background:  url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/expcolplusminus.png') no-repeat top left;
}

.rowGroupExpander.collapsed:hover .icon16 {
    background-position: -16px 0;
}

.rowGroupExpander.expanded .icon16
{
    background:  url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/expcolplusminus.png') no-repeat bottom left;
}

.rowGroupExpander.expanded:hover .icon16 {
    background-position: -16px -16px;
}

.rowGroupIndent
{
    display: inline-block;
}

.rowGroupText
{
    display: inline-block;
}

.rowGroupText > *
{
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.rowGroupText .groupName, .rowGroupText .columnDescription
{
    max-width: 100px;
    white-space: nowrap;
}
.rowGroupText .recordCount {    max-width: 55px; }

/* Enquiry filters child management */

.relatedDataPortlet
{
    position: relative;
    box-sizing: border-box;
}

.relatedDataPortlet.isReadOnly .addRemoveItem{
    opacity: 0.2;
    cursor: default;
}

/*handle here all possible cases of RDP being displayed within en enquiry form with/without form actions menu, title, contextual keys etc*/
.enquiryForm.hasFormActions .relatedDataPortlet,
.enquiryForm.hasFormTitle .relatedDataPortlet {
    margin-top: 0!important;/*if the form has form actions there is no need to leave space for any contextual keys
                            because they will be either in the form actions either in the form title*/
}

.relatedDataPortlet > .contents,
.relatedDataPortlet > .contents > .dataViewsContainer,
.relatedDataPortlet > .contents > .rightPanel{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.relatedDataPortlet > .contents > .rightPanel {
    display: none;
}

.relatedDataPortlet.detailsPanelVisible > .contents > .rightPanel {
    display: block;
}

.relatedDataPortlet > .contents > .rightPanel > .panelResizeHandle {
    cursor: col-resize;
    position: absolute;
    height: 100%;
    left: 0;
    width: 5px;
    border-width: 0px;
    z-index: 1;
    box-sizing: border-box;
}

.relatedDataPortlet > .contents > .rightPanel > .panelResizeHandle.resizing {
    border-width: 1px;
    border-style: solid;
}

.relatedDataPortlet.hasRDPActionsMenu > .contents{
    top: 40px;
}

.relatedDataPortlet.hasHeaderBar.headerBarVisible > .contents,
.relatedDataPortlet.hasHeaderBar.headerBarVisible.hasRdpActionBar.noRDPActions > .contents{
    top: 50px;
}

.enquiryForm.noFormTitle.noFormActions.hasContextualKeys .relatedDataPortlet.hasElementsOnTopRight.hasHeaderBar.headerBarVisible > .contents {
    top: 90px;
}

.relatedDataPortlet.hasHeaderBar.headerBarVisible.hasRDPActionsMenu > .contents {
    top: 85px;
}

.relatedDataPortlet.hideSearch.noRDPActions > .contents,
.relatedDataPortlet.hasHeaderBar.headerBarVisible.hideSearch.noRDPActions.noRDPActionsEx > .contents,
.relatedDataPortlet.hasHeaderBar.noRDPActions > .contents,
.relatedDataPortlet.hasHeaderBar.rdpActionBarHidden > .contents > .dataViewsContainer > .views,
.relatedDataPortlet.noRDPActionBar > .contents > .dataViewsContainer > .views,
.relatedDataPortlet.noRDPActionBar > .contents > .dataViewsContainer > .noSearchView,
.relatedDataPortlet.noRDPActionBar > .contents > .dataViewsContainer > .noResultsView {
    top: 0;
}

.relatedDataPortlet.hasRdpActionBar > .contents > .dataViewsContainer > .views,
.relatedDataPortlet.hasRdpActionBar > .contents > .dataViewsContainer > .noSearchView,
.relatedDataPortlet.hasRdpActionBar > .contents > .dataViewsContainer > .noResultsView{
    top: 40px;
}

.relatedDataPortlet .leftActionsPanel {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 240px;
}

.enquiryForm.noFormTitle.noFormActions.hasContextualKeys .relatedDataPortlet.hasElementsOnTopRight{
    padding-top: 40px;
}

.relatedDataPortlet .headerBar > .rdpActionsExMenu {
    vertical-align: top;
    margin-left: 10px;
}

.relatedDataPortlet .headerBar > .rdpActionsExMenu > ul {
    display: inline-block;
    vertical-align: top;
}

.relatedDataPortlet .headerBar > .rdpActionsExMenu > .dropDownControlContainer {
    padding: 10px 0;
}

.relatedDataPortlet .headerBar > .rdpActionsExMenu > .dropDownControlContainer:first-child {
    margin-left: 10px;
}


/*The header may contain the shopping cart and for that menu we shouldn't have any padding'*/
.relatedDataPortlet .rdpActionsMenu {
    display: block; /*display the RDP menu as block element*/
    clear: left;
}

.relatedDataPortlet.noRDPActions > .rdpActionsMenu {
    display: none;
}


.detailsPanel .relatedDataPortlet {
    padding-top: 0!important;
    border-top: none!important;
}

.relatedDataPortlet .headerBar {
/*    margin-top: -36px; *//* if within a section, shift the RDP up 36px so the full enquiry link is on the same line with the section title */
}

.relatedDataPortlet .maximisedView {
    margin-right: 0% !important;
}

.relatedDataPortletSection > .editablePanel > .topActionPane > .fullEnquiryLink > .editorLabel,
.detailsPanel .fullEnquiryLink > .editorLabel{
    width: auto;
    line-height: 30px;
    padding: 0;
}

.relatedDataPortlet .headerBar #SearchPanel
{
    display: inline-block;
    float: left;
    border-top: none;
    /*padding: 5px 0;*/
    padding: 10px 0;
    vertical-align: top;
}

/*need this because otherwise the hidden class is overridden by the above CSS*/
.relatedDataPortlet .headerBar.expanded {
    display: block;
}

.detailsPanel .relatedDataPortlet .headerBar,
.tabControl .relatedDataPortlet .headerBar,
.popup .relatedDataPortlet .headerBar {
    background-color: transparent;
}


.relatedDataPortlet .headerBar {
    display: none;
    padding-left: 10px;
}

#SearchButton .buttonLabel {
     display: none;
}

#SearchButton .icon16 {
    margin: 0 10px;
}

#SearchButton .icon16:before {
    content: "\E044";
}

.relatedDataPortlet .headerBar #SearchPanel #SearchValue_Container {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

.relatedDataPortlet .headerBar button.reset .icon16:before {
    content: "\E152";
}

.rdpActionBar {
    /*border: solid 1px; */
    position: relative;
    height: 38px;
    border-left: none;
    border-right: none;
}

.tablet .rdpActionBar.limitedWidth {
    position: static;
}
/*
body.tablet .rdpActionBar {
    z-index: 1;
}
*/

.relatedDataPortlet .rdpActionBar .gridExportSelector,
.relatedDataPortlet .rdpActionBar .gridImportExportSelector,
.relatedDataPortlet .rdpActionBar .optionsSelector {
    display: inline-block;
    float: right;
    margin-top: 4px;
    margin-right: 5px;
}

.relatedDataPortlet .rdpActionBar .optionsSelector {
    margin-right: 10px;
}


.relatedDataPortlet .rdpActionBar .optionsSelector > .chooser > button {
    padding-left: 0;
    padding-right: 0;
}

.relatedDataPortlet .rdpActionBar .optionsSelector > .chooser > button > .icon16 {
    width: 28px;
}

.rdpActionBar .gridImportExportSelector .chooser .downFill > .glyph:before {
    content: "\E530";
}

.rdpActionBar .gridExportSelector .chooser .downFill > .glyph:before{
    content: "\E219";
}

.rdpActionBar .gridExportSelector .expExcel.icon16,
.rdpActionBar .gridExportSelector .expPDF.icon16,
.rdpActionBar .gridExportSelector .webSvcURL.icon16 {
    left: 5px;
}


.rdpActionBar .gridImportExportSelector .expCSV.icon16,
.rdpActionBar .gridImportExportSelector .impFile.icon16,
.rdpActionBar .gridImportExportSelector .saveExp.icon16,
.rdpActionBar .gridImportExportSelector .impWiz.icon16 {
    left: 5px;
}

.rdpActionBar .gridExportSelector .webSvcURL.icon16:before,
.rdpActionBar .gridExportSelector .expXML.icon16:before,
.rdpActionBar .gridExportSelector .expJSON.icon16:before{
    content: "\E137";
}

.rdpActionBar .gridImportExportSelector .expCSV.icon16:before {
    content: "\E294";
}

.rdpActionBar .gridImportExportSelector .impFile.icon16:before {
    content: "\E295";
}

.rdpActionBar .gridImportExportSelector .impWiz.icon16:before {
    content: "\E295";
}

.rdpActionBar .gridImportExportSelector .savExp.icon16:before {
    content: "\E094";
}


.rdpActionBar .gridImportExportSelector .webSvcURL.icon16:before,
.rdpActionBar .gridImportExportSelector .expXML.icon16:before,
.rdpActionBar .gridImportExportSelector .expJSON.icon16:before{
    content: "\E137";
}

.rdpActionBar .saveAsReport.icon16:before{
    content: "\E010";
}

.rdpActionBar .gridExportSelector .expExcel.icon16:before {
    content: "\E418";
}

.rdpActionBar .gridExportSelector .expPDF.icon16:before {
    content: "\E001";
}

.rdpActionBar .gridExportSelector .expDownload.icon16:before {
    content: "\E05a";
}

.rdpActionBar .gridExportSelector .expOneDrive.icon16:before {
    content: "\E517";
}

.rdpActionBar .optionsSelector .chooser .downFill > .glyph:before{
    content: "\E226";
}

.relatedDataPortlet .rdpActionBar .optionsSelector button.toggleView,
.relatedDataPortlet .rdpActionBar .optionsSelector button.configAction{
    float: none;
    padding-left: 24px;
    min-width: 100%;
    border-radius: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
}

.relatedDataPortlet .rdpActionBar .optionsSelector button.toggleView {
    padding-right: 30px;
}

.relatedDataPortlet .rdpActionBar .optionsSelector .separator {
    padding: 0;
    height: 1px;
    margin-top: -1px;
    background-color: rgba(0, 0, 0, 0.05);
}

.relatedDataPortlet .rdpActionBar .optionsSelector .icon16.separator {
    display: none;
}

.relatedDataPortlet .rdpActionBar .optionsSelector .dropdownPanel .dropdownPanelListItem:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.relatedDataPortlet .rdpActionBar .optionsSelector .dropdownPanel .dropdownPanelListItem.highlight {
    background-color: rgba(0, 0, 0, 0.03);
}

.relatedDataPortlet .rdpActionBar .optionsSelector .dropdownPanel .dropdownPanelListItem.highlight:after,
.viewSelector .dropdownPanel .dropdownPanelListItem.highlight:after,
.recordSelector > .content > .recordList > .recordListItem.recordSelected:after {
      content: "\E066";
      font-family: 'iconGlyph';
      position: absolute;
      top: 5px;
      right: 5px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      opacity: 0.5;
}

.relatedDataPortlet .enquiryfilters
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.enquiryLeftActionBar
{
    display: block;
    float: left;
    position: relative;
}

.relatedDataPortlet .rdpActionBar .flatStyle, .relatedDataPortlet .buttonGroup .flatStyle, #ScheduleMaintenanceForm .flatStyle {
    border-radius: 0;
    padding: 10px;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    border: solid 1px transparent;
    background-image: none;
    background-color: transparent;
}

.relatedDataPortlet .buttonGroup .flatStyle {
    padding: 14px 10px 6px 10px;
    border: transparent;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.relatedDataPortlet .buttonGroup button.flatStyle img {
    opacity: 0.8;
    max-height: 16px;
}

.relatedDataPortlet .buttonGroup button.flatStyle.highlight, .relatedDataPortlet .buttonGroup button.flatStyle.highlight img, .relatedDataPortlet .buttonGroup button.flatStyle:hover img  {
    opacity: 1;
}

.relatedDataPortlet .buttonGroup button.flatStyle.highlight, .relatedDataPortlet .buttonGroup button.flatStyle:hover {
     background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac35.png');
    background-repeat: repeat;
}

.relatedDataPortlet .sectionChangeButtons .buttonGroup button.flatStyle.highlight, .relatedDataPortlet .sectionChangeButtons .buttonGroup .moreSections:hover {
    background-image: none;
}

.relatedDataPortlet .sectionChangeButtons .buttonGroup .moreSections {
    padding: 4px 10px 0 10px;
}

.relatedDataPortlet .sectionChangeButtons .buttonGroup .moreSections > .chooser > button.downFill {
    padding: 6px 0;
}

.relatedDataPortlet .rdpActionBar .searchToggle {
    float: left;
    position: relative;
}

.searchToggle .bg, .searchToggle .fg {
    display: none;
}

.searchToggle.pointerArrowB .bg, .searchToggle.pointerArrowB .fg {
    display: none;
}

.relatedDataPortlet .rdpActionBar .searchToggle.pointerArrowB button .icon16, .relatedDataPortlet .bulkActionContainer button.expandCollapse .icon16 {
    font-size: 12px;
}

.relatedDataPortlet .rdpActionBar .searchToggle button .icon16:before {
    content: "\E044";
}

.relatedDataPortlet .rdpActionBar .searchToggle.pointerArrowB button .icon16:before {
    content: "\E079";
}

.relatedDataPortlet .rdpActionBar .expandCollapse.flatStyle {
    padding: 10px 3px;
}

.relatedDataPortlet .rdpActionBar .flatStyle:hover, .relatedDataPortlet .buttonGroup .flatStyle:hover, .relatedDataPortlet .immediateUploadPanel:hover,
#ScheduleMaintenanceForm .flatStyle:hover
{
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac35.png');
    background-repeat: repeat;
}

.hasColumnGrouping .gridColumnGroupingPanelContainer
{
    display: block;
}

.gridColumnGroupingPanelContainer
{
    display: none;
}

.relatedDataPortlet .views{
    background-color: #fff;
    z-index: 0;
}

.relatedDataPortlet div.gridContainer {
    /*top: -1px;*//*avoid duplicate border - the grid has top border and rdpActionBar has bottom border */
}

.relatedDataPortlet div.gridContainer .rdpActionBar
{
    height: 26px;
    padding:5px 0;
    position: relative;
}

.relatedDataPortlet.flipped .viewSelector,
.relatedDataPortlet.flipped .bulkActionContainer
{
    display: none !important;
}

.relatedDataPortlet.hasThumbView button.toggleView
{
    right: 0;
}

.relatedDataPortlet.hasThumbView button.toggleView span.icon16:before,
.relatedDataPortlet button.toggleView.grid span.icon16:before,
.relatedDataPortlet .toggleView.grid.icon16:before,
.relatedDataPortlet button.toggleView.supergrid span.icon16:before
{
    content: "\E122";
}

.relatedDataPortlet span.calendarViewerViewModeButton.agenda:before,
.relatedDataPortlet button.toggleView.agenda span.icon16:before{
    content: "\E259";
}
.relatedDataPortlet span.calendarViewerViewModeButton.day:before,
.relatedDataPortlet button.toggleView.day span.icon16:before{
    content: "\E012";
}
.relatedDataPortlet span.calendarViewerViewModeButton.week:before,
.relatedDataPortlet button.toggleView.week span.icon16:before{
    content: "\E015";
}
.relatedDataPortlet span.calendarViewerViewModeButton.month:before,
.relatedDataPortlet button.toggleView.month span.icon16:before {
    content: "\E014";
}

.relatedDataPortlet button.toggleView.flat span.icon16:before,
.relatedDataPortlet .toggleView.flat.icon16:before
{
    content: "\E121";
}

.relatedDataPortlet .toggleView.tree.icon16:before{
    content: "\E259";
}

.relatedDataPortlet button.toggleView.ganttChartViewerViewModeButton span.icon16:before,
.relatedDataPortlet .toggleView.ganttChartViewerViewModeButton.icon16:before
{
    content: "\E407";
}

.relatedDataPortlet button.toggleView.timelineViewerViewModeButton span.icon16:before,
.relatedDataPortlet .toggleView.timelineViewerViewModeButton.icon16:before
{
    content: "\E552";
}

.relatedDataPortlet.hasThumbView #GridActions {
/*    visibility: hidden;*/
}

.relatedDataPortlet button.toggleView.normal span.icon16:before,
.relatedDataPortlet .toggleView.normal.icon16:before,
.relatedDataPortlet button.toggleView.default span.icon16:before,
.relatedDataPortlet .toggleView.default.icon16:before
{
    content: "\E125";
}

.relatedDataPortlet button.toggleView.contact span.icon16:before,
.relatedDataPortlet .toggleView.contact.icon16:before {
    content: "\E251";
}

.relatedDataPortlet button.toggleView.Map span.icon16,
.relatedDataPortlet .toggleView.Map.icon16
{
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/map.png');
    background-position: 0px 0px;
}

.relatedDataPortlet button.toggleView.Map span.icon16::before,
.relatedDataPortlet .toggleView.Map.icon16::before
{
    content: ""; /* Stop other icons from hiding under us. */
}

.relatedDataPortlet .icon16.chooseColumns:before {
    content: "\E291";
}

.relatedDataPortlet .icon16.columnGrouping:before {
    content:"\E259"
}

.relatedDataPortlet .icon16.viewAuditDetails:before {
    content:"\E497"
}



.alignLeft {
    text-align: left;
}
.alignCenter {
    text-align: center;
}
.alignRight {
    text-align: right;
}

/* Grid Row Action Menu*/
.relatedDataPortlet .dataTableContainer td.pointer
{
    position: relative;
    padding-right: 22px;
}

.relatedDataPortlet .dropDown
{
    position: absolute;
    right: 0;
    top:0;
    bottom: 0;
    padding: 0 4px;
}

body.desktop .relatedDataPortlet .dropDown {
    width: 22px;
}

body.tablet .relatedDataPortlet .dropDown {
    width: 30px;
}

body.tablet .relatedDataPortlet .dropDown.cellActions {
    width: 22px;
}

body.desktop .relatedDataPortlet .dropDown:hover,
.relatedDataPortlet .dropDown.selected
{
    display: block;
    opacity: 1;
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac80.png');*/
    background-color: rgba(0, 0, 0, 0.03);
}

.relatedDataPortlet .dropDown.selected {
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac5.png');*/
    background-color: rgba(0, 0, 0, 0.05);
}

.relatedDataPortlet .noData td.pointer .rowActions.dropDown, .relatedDataPortlet tr .rowActions.dropDown
{
    display: none;
}

body.tablet .relatedDataPortlet .dropDown
{
    display: block;
    opacity: 0.2;
}

.relatedDataPortlet .pointer .rowActions.dropDown,
.relatedDataPortlet .cellActions.dropDown {
    opacity:0.5
}

.relatedDataPortlet .pointer .rowActions.dropDown:hover,
.relatedDataPortlet .cellActions.dropDown:hover {
    opacity: 1;
}

.relatedDataPortlet .pointer:hover .rowActions.dropDown,
.relatedDataPortlet .hasCellActions:hover .cellActions.dropDown
{
    display: block;
}

.relatedDataPortlet .pointer .rowActions.dropDown.selected,
.relatedDataPortlet .cellActions.dropDown.selected {
    opacity: 1;
}

.relatedDataPortlet .dropDown .icon16
{
    display: block;
    margin: 0 auto;
    height: 100%;
}
body.tablet .relatedDataPortlet .dropDown .icon16 {
    width: auto;
}

.rowActionsMenu.chooser .dropdownPanel, .cellActionsMenu.chooser .dropdownPanel
{
    display: block;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.relatedDataPortlet tr.selected {
    background-color: #ffebd9 !important;
}

.relatedDataPortlet .cellActions button span label
{
    font-size:12px;
}

.rdpActionBar button.filter.ticked .tick {
    top: 3px;
    right: 3px;
}

.relatedDataPortlet .bulkActionContainer {
    display: inline-block;
    float: left;
    vertical-align: top;
}

.relatedDataPortlet .bulkActionContainer.opened .selectionSummary{
    display: inline-block;
}

.relatedDataPortlet .bulkActionContainer .selectionSummary,
.relatedDataPortlet .bulkActionContainer button.collapse{
    display: none;
}

.relatedDataPortlet .rdpActionBar .tagMgmt {
    display: inline-block;
    float: right;
    margin-top: 4px;
    margin-right: 5px;
}

.relatedDataPortlet .rdpActionBar .tagMgmt .icon16:before {
    content: "\E168";
}

.relatedDataPortlet .bulkActionContainer.opened button.expandCollapse {
    border-left-color: transparent;
}

.relatedDataPortlet .bulkActionContainer button.expandCollapse .icon16:before {
    content: "\E061";
}

.relatedDataPortlet .bulkActionContainer.opened button.expandCollapse .icon16:before {
    content: "\E062";
}

.relatedDataPortlet .rdpActionBar {
    white-space: nowrap;
    border-bottom: solid 1px rgba(0,0,0,0.02);
}

.relatedDataPortlet.hasHeaderBar .rdpActionBar {
    height: 40px;
    box-sizing: border-box;
}


.detailsPanel .relatedDataPortlet.hasHeaderBar .rdpActionBar,
.tabControl .relatedDataPortlet.hasHeaderBar .rdpActionBar,
.tabControl .relatedDataPortlet .relatedDataPortlet .rdpActionsMenu,
#InboxRightPanelInnerContainer .rdpActionBar,
.popup .rdpActionBar {
    background-color: transparent;
    border-bottom: solid 1px #e6e6e6;
}


.detailsPanel .relatedDataPortlet .rdpActionsMenu,
.tabControl .relatedDataPortlet .rdpActionsMenu,
#InboxRightPanelInnerContainer .rdpActionsMenu {
    background-color: transparent;
}


.rdpActionBar .gridActionsSelector {
    margin-top: 4px;
    margin-right: 5px;
}

.rdpActionBar .viewSelector {
    margin-right: 10px;
    position: relative;
}

.rdpActionBar .viewSelector > .dropdownControl {
    margin-top: 4px;
}

.relatedDataPortlet .immediateUploadPanel {
    overflow: hidden;
    display: inline-block;
    position: relative;
    float: right;
    width: auto;
    margin-right: 5px;
    border-left-style: solid;
    border-left-width: 1px;
}

.relatedDataPortlet .immediateUploadPanel button .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/import.png');
    float: left;
}

.relatedDataPortlet .immediateUploadPanel button .textWrapper {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    height: 16px;
}

.relatedDataPortlet .immediateUploadPanel button .textWrapper span {
    font-size: 0.8em;
}

.hasShownFilters .detailsPanelVisible .immediateUploadPanel button .textWrapper,
/*desktop with min screen - RDP with details panel opened*/
.desktop.minScreen .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .gridActionsSelector,
.desktop.minScreen .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .viewSelector,
.desktop.minScreen .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .resultsInfoText,
.desktop.minScreen .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .tagMgmt,
/*desktop with min screen RDP  within the details panel of another RDP*/
.desktop.minScreen .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .gridActionsSelector,
.desktop.minScreen .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .viewSelector,
.desktop.minScreen .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .tagMgmt,
.desktop.minScreen .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .resultsInfoText,
/*tablet (portrait mode or landscape) - RDP with details panel opened or within the details panel*/
.tablet .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .gridActionsSelector,
.tablet .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .viewSelector,
.tablet .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .resultsInfoText,
.tablet .relatedDataPortlet.detailsPanelVisible > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .tagMgmt,
.tablet .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .gridActionsSelector,
.tablet .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .viewSelector,
.tablet .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .tagMgmt,
.tablet .detailsPanel .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .resultsInfoText,
/*tablet (portrait mode) RDP in the maintenance pattern or within the details panel of another RDP*/
.tablet.portraitMode section .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .gridActionsSelector,
.tablet.portraitMode section .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .viewSelector,
.tablet.portraitMode section .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .tagMgmt,
.tablet.portraitMode section .relatedDataPortlet > .contents > .dataViewsContainer > .rdpActionBar.limitedWidth .resultsInfoText
{
    display: none;
}

.maxScreen .hasShownFilters .detailsPanelVisible .immediateUploadPanel button .textWrapper {
    display: inherit;
}

.relatedDataPortlet .rdpActionBar .resultsInfoText
{
    font-size: 1.2em;
    width: auto;
    float: left;
    min-height: 1em;
    line-height:16px;
    padding: 10px 25px 10px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    position: relative;
}

.relatedDataPortlet .rdpActionBar .externalSelection{
    display: none;
}

.relatedDataPortlet.showsExternalSelection .rdpActionBar .externalSelection{
    display: inline-block;
    font-weight: bold;
}


.relatedDataPortlet.showsExternalSelection .rdpActionBar .externalSelection .removeExternalSelection{
    display: inline-block;
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    padding: 0 5px;
}

.relatedDataPortlet.showsExternalSelection .rdpActionBar .externalSelection .removeExternalSelection .icon16:before{
    content: '\E058';
}

.relatedDataPortlet .immediateUploadPanelInput {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.0;
    filter: alpha(opacity=0);
}

.urlContainer {
    padding: 10px;
    max-width: 500px;
    overflow: auto;
    word-break: break-all;
}

/*Import Related CSS*/

/*--Drag impachment--*/

#FileDropTarget {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1000;
    /*display: none;*/
    height: 0;
    top: auto;
    overflow: hidden;
}

.relatedDataPortlet.dragOver #FileDropTarget {
    display: block;
    height: auto;
    top: 0;
}

.relatedDataPortlet.readonly.dragOver #FileDropTargetImages {
    display: none;
}


.relatedDataPortlet.readonly.dragOver #FileDropTarget {
    background-color: rgba(255, 200, 200, 0.15);
}

#FileDropTargetBorder {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 4px grey dashed;
    border-color: rgba(80, 80, 80, 0.3);
}

.relatedDataPortlet.readonly.dragOver #FileDropTargetBorder {
    border-color: rgba(255, 200, 200, 0.35);
}


#FileDropTargetContents {
    color: grey;
    color: rgba(80, 80, 80, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    text-align: center;
}

.fileDropTargetImage {
    position: absolute;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#FileDropTargetImages {
    display: inline-block;
    width: 64px;
    height: 64px;


    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: scale(0.75, 0.75);
    transform: scale(0.75,0.75);
}

.relatedDataPortlet.dragOver #FileDropTargetImages {
    -webkit-transform: scale(1, 1);
    transform: scale(1,1);
}

#FileDropTargetImage1 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc1.png');

}

#FileDropTargetImage2 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc2.png');

}

#FileDropTargetImage3 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc3.png');

}

.relatedDataPortlet.dragOver #FileDropTargetImage1 {
    -webkit-transform: translate(30px, 0) rotate(15deg);
    -ms-transform: translate(30px, 0) rotate(15deg);
    -moz-transform: translate(30px, 0) rotate(15deg);
    transform: translate(30px, 0) rotate(15deg);
}

.relatedDataPortlet.dragOver #FileDropTargetImage2 {
    -webkit-transform: translate(-30px, 0) rotate(-15deg);
    -ms-transform: translate(-30px, 0) rotate(-15deg);
    -moz-transform: translate(-30px, 0) rotate(-15deg);
    -o-transform: translate(-30px, 0) rotate(-15deg);
    transform: translate(-30px, 0) rotate(-15deg);
}

.relatedDataPortlet .rdpViewNotification {
    display:none;
    font-size: 1.2em;
    width: auto;
    float: left;
    min-height: 1em;
    line-height: 16px;
    padding: 10px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}


.relatedDataPortlet .rdpViewNotification.showNotification {
    display:inline-block;
}

.relatedDataPortlet .rdpViewNotification.hasSpinner .showSpinner{
    width: 18px;
    height: 17px;
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/loadersml.gif') no-repeat top center;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}

.relatedDataPortlet.maximizeView > .headerBar,
.relatedDataPortlet.maximizeView > .actionsMenu,
.relatedDataPortlet.maximizeView > .contents >.leftActionsPanel,
.relatedDataPortlet.maximizeView > .contents > .dataViewsContainer > .rdpActionBar,
.relatedDataPortlet.maximizeView > .contents > .rightPanel,
.relatedDataPortlet.maximizeDetailsPanel > .headerBar,
.relatedDataPortlet.maximizeDetailsPanel > .actionsMenu,
.relatedDataPortlet.maximizeDetailsPanel > .contents >.leftActionsPanel,
.relatedDataPortlet.maximizeDetailsPanel > .contents > .dataViewsContainer,
.relatedDataPortlet.maximizeDetailsPanel > .contents > .rightPanel > .detailsPanel .detailsPanelHeader{
    display: none;
}

.relatedDataPortlet.maximizeView > .contents,
.relatedDataPortlet.maximizeView > .contents > .dataViewsContainer > .views,
.relatedDataPortlet.maximizeDetailsPanel > .contents,
.relatedDataPortlet.maximizeDetailsPanel > .contents > .rightPanel > .detailsPanel .contentContainer{
    top: 0px!important;
}

.relatedDataPortlet.maximizeDetailsPanel > .contents > .rightPanel > .detailsPanel.detailsPanel.hasSectionsChange .contentContainer {
    top: 40px!important;
}

.relatedDataPortlet.maximizeDetailsPanel > .contents > .rightPanel{
    margin-left:0!important;
}

.relatedDataPortlet.maximizeView > .contents > .dataViewsContainer{
    margin-right:0!important;
}

.repeatingPanelItemTemplate {
    padding-left: 8px;
    padding-right: 8px;
}

.repeatingPanelItem {
    padding-top:8px;
    padding-bottom: 8px;
}

.repeatingPanelItem > .repeatingPanelItemHeader > .repeatingPanelItemHeaderText {
    font-size: 1.1em;
    font-weight: normal;
    padding: 0 0 10px 0;
    line-height: 20px;
}

.repeatingPanelItem > .repeatingPanelItemHeader > .repeatingPanelItemDeleteButton {
    padding: 1px;
    float: right;
}

.repeatingPanelItem > .repeatingPanelItemHeader > .repeatingPanelItemDeleteButton > .icon16 {
   background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/removereddark.png') no-repeat center center;
}

.repeatingPanelNewButton > .icon16 {
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plusgreendark.png') no-repeat center center;
}

.panel.isCollapsible > .fieldsContainer > .repeatingPanelContainer > .repeatingPanelNewButton {
    position:absolute;
    top: 8px;
    right: 40px;
    padding: 1px;
}
.richTextControl.showLabel > .cke_chrome {
    border: 0 !important;
    box-shadow: none !important;
}

.richTextControl.toolbarBottom.hideToolbarInReadonly.readonly .cke_bottom, .richTextControl.toolbarTop.hideToolbarInReadonly.readonly .cke_top {
    display: none;
}

.richTextControl.fillWidth {
    width: 100%
}

.richTextControl.readonly .cke_contents {
    opacity: 0.7;
}

.richTextControl .cke_source {
    overflow-y: auto;
}
.sectionSwitcher.visible {
    height:100%;
    position:relative;
    display: block;
}

.sectionSwitcherTabsContainer {
    position: absolute;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
}

.sectionSwitcherTabsContainer.tilesContainerHidden {
    bottom: 0;
}

.sectionSwitcherTabControl {
    position: relative;
    display: none;
}

.sectionSwitcherTabControl.selected {
    position: relative;
    display: block;
    height: 100%;
}

.sectionSwitcherTilesContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 9000;
}

.sectionSwitcherTilesInnerContainer {
    position: relative;
    height: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 5px;
}

.sectionSwitcher > .overlay {
    opacity: 1;
    background: transparent;
}

.sectionSwitcher > .overlay > .durationSpinner {
    display:block;
    background: none;
}

.sectionSwitcher > .overlay > .durationSpinner > .spinner {
    display:block;
}

.sectionSwitcher > .overlay > .durationSpinner > .spinnerMessage {
    font-size: 16px;
    display:block;
    margin-top: 15px;
    white-space: normal;
    text-align: center;
}

.sectionSwitcherTile {
    display: inline-block;
    position: relative;
    width: 150px;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 0.75;
}

.sectionSwitcherTile:hover, .sectionSwitcherTile.selected {
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    opacity: 1;
}

.sectionSwitcherTile.selected {
    background: #fff;
}

.sectionSwitcherTileThumbnailContainer {
    width: 32px;
    height: 32px;
    display: block;
    float: left;
    position:relative;
}

.sectionSwitcherTileThumbnail {
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
}

.sectionSwitcherTile.sectionNotReady > .sectionSwitcherTileThumbnailContainer {
    visibility: hidden;
}

.sectionSwitcherTile.sectionNotReady > .processSpinner {
    border-radius: 12px;
    position: absolute;
    left: 6px;
    top: 6px;
}

.sectionSwitcherTileTitle {
    display: block;
    font-size: 0.9em;
    line-height:20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:normal;
    padding: 5px;
}

.messageContainer_SectionSwitcher {
    text-align: center;
    position: absolute;
    top: 45%;
    left: 10px;
    right: 10px;
    opacity: 0.5;
}

.messageGlyph_SectionSwitcher {
    width:100%;
    margin-bottom: 10px;
}

.message_SectionSwitcher {
    font-size: 1.7em;
    line-height: 35px;
}

.subMessage_SectionSwitcher {
    font-size: 1.4em;
    line-height: 30px;
}


/* Charts Section */
.sectionSwitcherTabControl.chartsSection > .editablePanel > .content > .chartContainer {
    background-color: #fff;
}


/* Maintenance Section */
.sectionSwitcherTabControl.sectionBase > .editablePanel > .topActionPane {
    display: none;
}

.sectionSwitcherTabControl.sectionBase > .editablePanel > .content > .panel.fieldSet {
    background-color: #fff;
}


/* Natural View Section */
.sectionSwitcherTabControl.naturalViewSection > .naturalViewSectionContainer {
    background-color: transparent;
}

.sectionSwitcherTabControl.naturalViewSection > .naturalViewSectionContainer > .topActionPane > .contentNavigator > .recordSelectorBtn {
    background-image: none;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.shoppingCartContainer .selectionSummary {
    float: right;
    position: relative;
    padding:5px 5px 5px 10px;
    margin-right: 5px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.shoppingCartContainer .selectionSummary.updated {
    border: 1px solid red;
}

.bulkActionContainer .selectionSummary{
    position: relative;
    float: left;
    padding: 3px 3px 3px 10px;
}

/*.selectionSummary img {
    margin-top: 5px;
    float: left;
    display: none;
}*/

.selectionSummary .more .buttonLabel {
    display: none;    
}

.selectionSummary .summaryCounter 
{
    display: inline-block;
    float: left; 
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    border-radius: 3px;
}

.summaryCountContainer {
    float: left;
    position: relative;
}



.selectionSummary.bulkActionMode .summaryCounter {
    margin-right: 10px;
}

.selectionSummary.selectAll .summaryCounter.handle:hover {
    cursor: default;
}

.selectionSummary .summaryCounter.handle:hover {
    cursor: pointer;
}

.selectionSummary.bulkActionMode .summaryCounter.handle:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.bulkActionContainer .selectionSummary.bulkActionMode .summaryCounter,
.selectionSummary.shoppingCartMode .summaryCounter {
    margin-top: 6px;
}

.selectionSummary.shoppingCartMode .summaryCounter {
    background-color: transparent;
    margin-right: 5px;
}

.selectionSummary.shoppingCartMode .summaryCounter .glyph {
    float: left;
    padding: 2px;
    transition: transform 0.3s ease;
}

.selectionSummary.academic .summaryCounter {
    background: none;
    margin: 0;
    min-width: 28px;
    border-radius: 0;
    height: 30px;
}


.selectionSummary .summaryCounter .summaryCount 
{
    float: left;
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/cartsprite.png');
    background-position: top left;
    background-repeat: no-repeat;*/
    /*line-height: 14px;*/
    font-weight: bold;
    font-size: 1.2em; 
    /*padding: 0 0 3px 14px;
    min-height: 20px;*/
    line-height: 16px;
    padding: 2px 5px;
}

.selectionSummary.academic .summaryCounter .summaryCount {
        background: none;
        padding: 0;
        position: relative;
        color: #fff;
        float: none;
        min-height: 0;
    min-width: 22px;
        line-height: 14px;
        background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac20.png');
        background-size: 50% 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding: 8px 4px 3px 4px;
}

.selectionSummary.academic .summaryCountContainer:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    border-left: solid 14px;
    border-bottom: solid 5px transparent !important;
}

.bulkActionMode.selectionSummary .summaryCounter .summaryCount {
    line-height: 13px;
    padding: 3px 5px 0 5px;
    min-height: 17px;
    background-image: none;
    color: #fff;
    font-weight: normal;
    font-size: 0.9em;
    text-transform: uppercase;
}

.selectionSummary .summaryCounter .summaryCountEnd {
    float: left;
    width: 10px;
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/cartsprite.png');
    background-position: top right;
    background-repeat: no-repeat;*/
    height: 23px;
    display: none;
}

.bulkActionMode.selectionSummary .summaryCounter .summaryCountEnd {
    display: none;
}

.selectionSummary.academic .summaryCounter .summaryCountEnd {
  background: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  border-right: solid 14px;
  border-bottom: solid 5px transparent !important;
  width: auto;
  height: auto;
}

.selectionSummary.academic .summaryCounter .summaryCountEnd:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-left: solid 14px #fff;
    border-bottom: solid 5px transparent;
    opacity: 0.2;
}


.selectionSummary.highlight {
    /*background-color: #ffc853;*/
    background-color: rgba(255, 255, 255, 0.9);
}

.selectionSummary.highlight .summaryCounter {
    transition: color 0.3s ease;
}

.selectionSummary.highlight .summaryCounter .glyph {
    transform: scale(1.5);

}


.selectionSummary.academic.highlight .summaryCounter {
    color: #fff;
}



@media \0screen
{
    .selectionSummary.academic .summaryCounter .summaryCount {
        background-image: none;
    }
    
    .selectionSummary.academic .summaryCounter .summaryCountEnd:before {
        display: none;
    }
}

.selectionSummary .summaryCounter.contentUpdated {
    color: #000 !important;
    background-color: rgba(0,0,0,0.15); 
}

.selectionSummary.shoppingCartMode .summaryCounter.contentUpdated {
    background-color: transparent;
}

.selectionSummary .dropdownControl {
    display: inline-block;
    float: left;
}

.selectionSummary .dropdownControl .dropdownPanel
{
    position: absolute;
    max-height: 230px;
    overflow-y:auto;
    overflow-x: hidden;
    max-width: 300px;
    -webkit-overflow-scrolling: touch;
}

.selectionSummary.bulkActionMode .summaryListSelector.dropdownControl .dropdownPanel {
    left: 0 !important;
}

.selectionSummary.shoppingCartMode .summaryListSelector.dropdownControl .dropdownPanel {
    left: auto !important;
    right: 0 !important;
    padding: 10px;
}

.summaryListSelector.dropdownControl .dropdownPanel li {
    position: relative;
    padding: 10px;
    border-top: solid 1px rgba(0,0,0,0.05);
}

.summaryListSelector.dropdownControl .dropdownPanel li:first-child {
    border-top: solid 1px transparent;
}

.summaryListSelector.dropdownControl .dropdownPanel .headCol {
    line-height: 16px;
    margin-right: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 5px;
    padding: 6px 0;
    border: solid 1px transparent;
}

.summaryListSelector.dropdownControl .dropdownPanel button 
{
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: solid 1px transparent;
    border-radius: 15px;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
    opacity: 0.5;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
}

.summaryListSelector.dropdownControl .dropdownPanel button:hover {
    opacity: 1;
}


.summaryListSelector.dropdownControl .dropdownPanel button .icon16{
    position: relative;
}

.selectionSummary .dropdownControl .dropdownPanel .editorField 
{
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    line-height:16px;
}

.selectionSummary .editorLabel {
    float: left;
    margin-left: 5px;
    width: auto;
    margin-top: 4px;
}

.summaryListSelector {
    position: relative;
    float: left;
}

.shoppingCartMode .summaryListSelector {
    min-height: 30px;
}


.selectionSummary .selectionSummaryLabel {
    float: left;
    font-size: 0.9em;
    text-transform: uppercase;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 2px 3px;
    margin: 0 5px;
    /*margin-top: 6px;*/
    border-radius: 2px;
    text-align: center;
    display: inline-block;
}

.selectionSummary.bulkActionMode .selectionSummaryLabel {
    display: none!important;
}


.selectionSummary .menuContainerH {
    display: inline-block;
    float: left;
}

@media screen and (orientation:portrait) /*keep visibility of bulk actions on the Ipad */ {

    .detailsPanelVisible .bulkActionContainer.opened  {
        position: absolute;
        height: 37px;
        background-color: inherit;
        z-index: 1;
        margin-top: -1px;
        box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.1);
        padding-top: 2px;
    }

    .detailsPanelVisible .bulkActionContainer.opened .expandCollapse {
        margin-top: -1px;
    }

    .bulkActionContainer.opened .selectionSummary .menuContainerH > ul {
        display: inline-block;
    }
}

.selectionSummaryLabel.contentUpdated {
    color: rgba(255, 255, 255, 0.75);

}

.addSelection {
    position: absolute;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plus.png');
    border: 1px solid green;
    height: 16px;
    width:16px;
}
.importDataControl {
    position: relative;
    white-space: normal;
    overflow: auto;
    display: inline-block;
}

.importDataControl:after {
    background-image: none;   
}

/*--Drag impachment--*/

#FileDropTarget {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1000;
    /*display: none;*/
    height: 0;
    top: auto;
    overflow: hidden;
}

.importDataControlDrop.dragOver #FileDropTarget {
    display: block;
    height: auto;
    top: 0;
}

.importDataControlDrop.readonly.dragOver #FileDropTargetImages {
    display: none;
}


.importDataControlDrop.readonly.dragOver #FileDropTarget {
    background-color: rgba(255, 200, 200, 0.15);
}

#FileDropTargetBorder {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 4px grey dashed;
    border-color: rgba(80, 80, 80, 0.3);
}

.importDataControlDrop.readonly.dragOver #FileDropTargetBorder {
    border-color: rgba(255, 200, 200, 0.35);
}


#FileDropTargetContents {
    color: grey;
    color: rgba(80, 80, 80, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    text-align: center;
}

.fileDropTargetImage {
    position: absolute;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#FileDropTargetImages {
    display: inline-block;
    width: 64px;
    height: 64px;

    
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: scale(0.75, 0.75);
    transform: scale(0.75,0.75);
}

.importDataControlDrop.dragOver #FileDropTargetImages {
    -webkit-transform: scale(1, 1);
    transform: scale(1,1);
}

#FileDropTargetImage1 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc1.png');  
 
}

#FileDropTargetImage2 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc2.png');
    
}

#FileDropTargetImage3 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/64/ecm/doc3.png');
    
}

.importDataControlDrop.dragOver #FileDropTargetImage1 {
    -webkit-transform: translate(30px, 0) rotate(15deg);
    -ms-transform: translate(30px, 0) rotate(15deg);
    -moz-transform: translate(30px, 0) rotate(15deg);
    transform: translate(30px, 0) rotate(15deg);
}

.importDataControlDrop.dragOver #FileDropTargetImage2 {
    -webkit-transform: translate(-30px, 0) rotate(-15deg);
    -ms-transform: translate(-30px, 0) rotate(-15deg);
    -moz-transform: translate(-30px, 0) rotate(-15deg);
    -o-transform: translate(-30px, 0) rotate(-15deg);
    transform: translate(-30px, 0) rotate(-15deg);
}

.importDataControl .transparent {
    opacity: 0;
}

.importDataControl .importDataControlCtrlLabel {
    margin: 5px 0;
    font-weight: 600;
    line-height: 16px;
}

.importDataControl .impItems {
    padding: 10px;
    
    -webkit-transition: opacity .1s ease-in-out;
    -moz-transition: opacity .1s ease-in-out;
    -ms-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out;
}

.importDataControl .item {
    position: relative;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.importDataControl.readonly .dropFilesHint,
.importDataControl .dropFilesHintReadonly
{
    display: none;
    background-color: #fff;
    border: solid 1px rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.importDataControl.dragOver.readonly .dropFilesHintReadonly
{
    display: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: -210px;
    margin-top: -10px;
}

.importDataControl .hintContainer
{
    float: left;
    margin-left: 10px;
    line-height: 36px; /* This is to centre the text in the title bar */
}

.importDataControl .hintContainer .dragDropHint
{
    opacity: 0.35;
    display: block;
}

.importDataControl .hintContainer .dragDropHint:before
{
    content: "\E083";
    margin-right: 5px;
    margin-top: 10px;
    float: left;
}

/*---Generic item styling---*/

.importDataControl .actionBox .impachmentActions .dropdownControlButton .icon16 {
    margin: 0;
}

.importDataControl .actionBox .impachmentActions .dropdownControlButton .icon16:before {
    content: "\E002";
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.downloadPdf.icon16:before {
    content: "\E001";
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.downloadOrig.icon16:before {
    content: "\E05A";
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.docProperties.icon16:before {
    content: "\E084";
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.itemDetails.icon16:before {
    content: "\E078";
}

.importDataControl.readonly  .actionBox .impachmentActions .impachmentAction.itemDetails.icon16:before {
    content: "\E084";
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.unimpachDoc.icon16:before {
    content: "\E067";
    color: #d50000;
}

.importDataControl  .actionBox .impachmentActions .impachmentAction.deleteAtt.icon16:before {
    content: "\E067";
    color: #d50000;
}

.importDataControl .item.uploading .itemRemove,
.importDataControl.readonly .itemRemove,
.importDataControl .item.nonEcmDoc .ecmAction,
.importDataControl .item.ecmDoc .nonEcmAction,
.importDataControl .item.noOrig .downloadOrig
{
    display: none;
}


.importDataControl .header span {
    font-family: 'Osans', Arial, sans-serif; 
}

.importDataControl .impTypeHeader {
    font-size: 1.2em;
    margin-top: 20px;

    padding-top: 10px;
    margin-top: 0;
    border-top: solid 1px;
}

.impItems > .impTypeHeader ~ .impTypeHeader {
    margin-top: 10px;
}



.importDataControl .item.itemChanged,
.importDataControl .item.itemChanged .labelValue,
.importDataControl .item.newItem,
.importDataControl .item.newItem .labelValue
{
    font-weight: bold;
}

.importDataControl .item.itemChanged .labelValue:after,
.importDataControl .item.newItem .labelValue:after
{
    content: " *";
}

.importDataControl .item.uploadFailed
{
    background-color: rgb(255, 200, 200);
    background-color: rgba(255, 200, 200, 0.5);
}

.importDataControl .item.uploadFailed > .label
{
    text-decoration: line-through;
}

.importDataControl .item.uploadFailed .icon
{
    background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/48/no_image.png);
    background-repeat: no-repeat;
    background-position: center;
}

.importDataControl .item.uploadFailed .itemDetails
{
    display: none;
}

.importDataControl .item .iconAction {
    display:block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    padding: 5px;
    border-radius: 0;
}

.importDataControl .impItems.listView .item .iconAction {
    width: auto;
}

.importDataControl .impItems.gridView .item .iconAction {
    width:46px;
}

.importDataControl .item .labelValue {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

.importDataControl .impItems.listView .item .labelValue {
    position: relative;
    padding:3px;
    line-height: 26px;
    height: 36px;
}

.importDataControl .impItems.listView button.labelValue {
    text-align: left;
    padding-left:5px;
}

.importDataControl .impItems.gridView button.labelValue {
    text-align: left;
    padding-left: 5px;
}

.importDataControl .noWrapText .labelValue {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    word-wrap: normal; /* Needed for IE to honour 'white-space: nowrap' */
}

.importDataControl button.labelValue .textWrapper {
    display: block; 
}

.importDataControl .impItems.tileView .noWrapText .labelValue {
    padding: 4px 0;
}

.importDataControl .iconImg {
    display: inline-block;
    
    padding: 2px;
    vertical-align: middle;
    background-color: #fff;
    border: solid 1px #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    margin: auto;
    margin-top: 5px;
    width: auto; /*Needed for IE as it can sometimes explicitly set width in the html!*/
    height: auto; /*Needed for IE as it can sometimes explicitly set height in the html!*/
}

.importDataControl .item button.iconAction .iconImg {
    vertical-align: top;
}


.importDataControl .impItems > .header {
    margin-bottom: 10px;
}

/*---Pre-view styling---*/
.importDataControl .impItems > .item > .itemField,
.importDataControl .impItems > .impItemsHeader {
    display: none; /*Hide all headers and impachment items by default*/
}

/*---List view---*/

.importDataControl .impItems.listView > .item {
    position: relative;
    min-height: 36px;
    margin-bottom: 5px;
}

.importDataControl .impItems.listView .icon,
.importDataControl .impItems.listView .label,
.importDataControl .impItems.listView .actionBox {
    display: inline-block;
    position: absolute;
}

.importDataControl .impItems.listView .iconAction {
    padding: 3px;
    line-height: 24px;
}

.importDataControl .impItems.listView > .item .iconImg {
    max-width: 24px;
    max-height: 24px;
    margin-top: 0;
}

.importDataControl .impItems.listView .label {
    display: block;
    position: relative;
    margin-left: 37px;
    margin-right: 70px;
}

.importDataControl.readonly .impItems.listView .label {
    margin-right: 40px;
}

.importDataControl .impItems.listView button.labelValue .textWrapper {
    margin-right: 60px;
}

.importDataControl .impItems.listView .actionBox {
    right: 3px;
    top: 3px;
}

.importDataControl .impItems.listView .icon {
    top:0;
    left:0;
}

.importDataControl .impItems.listView .fileExt:before {
    content: "(";
}

.importDataControl .impItems.listView .fileExt:after {
    content: ")";
}

/*---Grid view---*/
.importDataControl .impItems.gridView > .impItemsHeader {
    display: block;
}

.importDataControl .impItems.gridView > .item,
.importDataControl .impItems.gridView > .header {
    position: relative;
}

.importDataControl .impItems.gridView .icon,
.importDataControl .impItems.gridView .label,
.importDataControl .impItems.gridView .impachmentDate,
.importDataControl .impItems.gridView .fileExt,
.importDataControl .impItems.gridView .actionBox,
.importDataControl .impItems.gridView .ecmStatus,
.importDataControl .impItems.gridView .notes {
    display: inline-block;
    position: absolute;
}

.importDataControl .impItems.gridView > .header {
    height: 24px;
}

.importDataControl .impItems.gridView > .header.impTypeHeader {
    height: auto;
    margin-bottom: 10px;
}

.importDataControl .impItems.gridView > .header.impItemsHeader {
    font-weight: 600;
}

.importDataControl .impItems.gridView > .item {
    padding: 0;
    height: 48px;
    margin-bottom: 5px;
}

.importDataControl .impItems.gridView .actionBox {
    top: 2px;
    right: 2px;
}

.importDataControl .impItems.gridView .icon {
    top: 0;
    left: 0;
}

.importDataControl .impItems.gridView > .item .iconImg {
    margin-top: 0;
    max-width: 30px;
    max-height: 30px;
}

.importDataControl .impItems.gridView .label {
    position: relative;
    display: block;
    margin-left: 46px;
    line-height: 16px;
}

.importDataControl .impItems.gridView .impItemsHeader .label {
    top: 5px;
}

.importDataControl .impItems.gridView .labelValue {
    width: auto;
    position: absolute;
    left: 0;
    right: 370px;
    padding-top: 5px;
    padding-bottom: 25px;
}

.importDataControl .impItems.gridView .impachmentDate {
    width: 80px;
    top: 5px;
    right: 280px;
    line-height: 16px;
}

.importDataControl .impItems.gridView .fileExt {
    width: 80px;
    top: 5px;
    text-align: center;
    right: 200px;
    line-height: 16px;
}

.importDataControl .impItems.gridView .ecmStatus {
    display: inline-block;
    width: 120px;
    top: 5px;
    right: 80px;
    line-height: 16px;
}

.importDataControl .impItems.gridView > .impItemsHeader > .notes {
    display: none;
}

.importDataControl .impItems.gridView .notes {
    display: block;
    top:26px;
    left: 46px;
    right: 60px;
    line-height: 16px;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    color: #656565;
}


/*---Tile view---*/
.importDataControl .impItems.tileView {
    clear: right; /* This is required because of the float:right on the importDataControlActionsContainer buttons - this makes sure they does not interfere with the inline-block layout of the items (CCP-2681) */
}

.importDataControl .impItems.tileView > .item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    min-width: 80px;
    height: 120px;
    margin: 5px;
    width: 135px;
    height: 170px;
    border: solid 1px rgba(0, 0, 0, 0.05);
}

.importDataControl .impItems.tileView > .item .actionBox,
.importDataControl .impItems.tileView > .item .icon,
.importDataControl .impItems.tileView > .item .label {
    display: block;
}

.importDataControl .impItems.tileView > .item > .icon {
    line-height: 100px;
    height: 110px;
    text-align: center;
}

.importDataControl .impItems.tileView .item .iconAction {
    width: 100%;
    height: 110px;
    padding: 0 0 5px 0;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac3.png');

}

.importDataControl .impItems.tileView > .item .iconImg {
    max-width: 96px;
    max-height: 96px;
}

.importDataControl .impItems.tileView > .item > .label {
    text-align: center;
}

.importDataControl .impItems.tileView > .item > .actionBox {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.importDataControl.readonly .impItems.tileView > .item > .actionBox {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    margin-left:-13px;
}

/*---Card view---*/
.importDataControl .impItems.impCardView > .item {
    padding: 5px;
    margin: 5px 0;
    height: 100px;
    border: solid 1px rgba(0, 0, 0, 0.05);
}

.importDataControl .impItems.impCardView > .item:before {
    content: "";
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac3.png');
    width: 90px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    bottom: 0;
}

.importDataFileSelector.fileSelector .statushint {
    float: none;
    display: inline-block;
}
.importDataFileSelector.fileSelector .fileList
{
    margin: 20px 0;
}
.importDataFileSelector.fileSelector .fileList .file {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
}


.importDataControl .impItems.impCardView > .item.noteOrUrl {
    height: 2em;
    border: none;
}

.importDataControl .impItems.impCardView > .item.noteOrUrl:before {
    display: none;
}

.importDataFileSelector{
    max-width: 600px;
}

.importDataControl .impItems.impCardView .icon,
.importDataControl .impItems.impCardView .label,
.importDataControl .impItems.impCardView .notNoteOrUrl .extract,
.importDataControl .impItems.impCardView .notNoteOrUrl .fileSummary,
.importDataControl .impItems.impCardView .notNoteOrUrl .hasText.ecmVersion,
.importDataControl .impItems.impCardView .actionBox,
.importDataControl .impItems.impCardView .notNoteOrUrl .hasText.ecmStatusColoured,
.importDataControl .impItems.impCardView .notNoteOrUrl .hasText.ecmDocSetId,
.importDataControl .impItems.impCardView .notNoteOrUrl .notes {
    display: block;
    position: absolute;
}

.importDataControl .impItems.impCardView .itemField button.labelValue {
    padding: 0;
    text-align: left;
}


.importDataControl .impItems.impCardView .isLocked.locked.icon16:before {
    content: "\E179";
}

.importDataControl .impItems.impCardView .icon {
    top: 2px;
    left: 2px;
    width: 80px;
    height: 70px;
    line-height: 70px;
}

.importDataControl .impItems.impCardView .noteOrUrl .icon {
    width: 24px;
    height: 24px;
    line-height: normal;
}

.importDataControl .impItems.impCardView .icon .iconAction {
    padding: 0;
}

.importDataControl .impItems.impCardView .icon .iconImg {
    margin-top: 0;
    max-width: 80px;
    max-height: 70px;
    padding: 0;
}

.importDataControl .impItems.impCardView .noteOrUrl .icon .iconImg {
    max-width: 24px;
    max-height: 24px;
}

.importDataControl .impItems.impCardView .fileSummary {
    top: 78px;
    left: 3px;
    width: 82px;
    background-color: #ccc;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.importDataControl .impItems.impCardView .fileSummary .isLocked {
    float: left;
}

.importDataControl .impItems.impCardView .fileSummary .fileExt,
.importDataControl .impItems.impCardView .fileSummary .fileSize {
    font-size: 0.8em;
    line-height: 1.6em;
}

.importDataControl .impItems.impCardView .fileSummary .fileExt:after {
    content: "|";
    margin-left: 2px;
}

.importDataControl .impItems.impCardView .label,
.importDataControl .impItems.impCardView .notNoteOrUrl .extract,
.importDataControl .impItems.impCardView .notNoteOrUrl .notes {
    position: relative;
    margin-left: 95px;
    margin-right: 100px;
    line-height: 16px;
}

.importDataControl .impItems.impCardView .label {
    font-size: 1.1em;
    margin-bottom: 6px;
}

.importDataControl .impItems.impCardView .noteOrUrl .label {
    font-size: 1em;
    margin-left: 3em;
    margin-right: 3em;
}

.importDataControl .impItems.impCardView .extract {
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
}

.importDataControl .impItems.impCardView .notNoteOrUrl .notes {
    margin-top: 1em;
    line-height: 16px;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    color: #656565;
}

.importDataControl .impItems.impCardView .ecmStatusColoured {
    top: 5px;
    right: 5px;
    padding: 0 2px;
    line-height: 16px;
    font-size: 0.9em;
    border-radius: 3px;
}

.importDataControl .impItems.impCardView .ecmDocSetId {
    top: 40px;
    right: 5px;
    font-size: 0.9em;
}

.importDataControl .impItems.impCardView .ecmDocSetId:before {
    content: "Document Set ID";
    position: absolute;
    top: -1.1em;
    right: 0;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: bold;
}

.importDataControl .impItems.impCardView .ecmVersion {
    top: 60px;
    right: 5px;
    font-size: 0.9em;
}

.importDataControl .impItems.impCardView .ecmVersion:before {
    content: "Version";
    margin-right: 3px;
    font-size: 0.9em;
}


.importDataControl .impItems.impCardView .actionBox {
    bottom: 5px;
    right: 5px;
    top: inherit;
}


/*---Global Action Buttons - may not be contained within the importDataControl control---*/
.importDataControlActionsContainer {
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    height: 38px;
}


.tabsContainer .importDataControlActionsContainer {
    border-style: solid;
    border-width: 1px;
}

.importDataControlActionsContainer > .viewActions {
    float: right;
    margin: 4px 5px;
}

.importDataControlActionsContainer > .addActions {
    float: right;
    margin: 4px 5px;
}

.importDataControl.securestoredisabled .importDataControlActionsContainer > .addActions .ecmAttachAction {
    display: none;
}


.importDataControl .addActions .chooser {
    z-index: 2; /*iPad hack to ensure the dropdown items show over any impachment items*/
}

.importDataControl .importDataControlActionsContainer .viewSelector .dropdownControlButton.handle {
    /*outline-color: transparent;*/
    padding-left: 0;
    padding-right: 0;
}

.importDataControl .importDataControlActionsContainer .viewSelector .dropdownControlButton.handle > .glyph {
    width: 28px;
}

.viewSelector .handle > .icon16.glyph:before {
    content: "\E226";
}

.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.listView.icon16:before,
.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.listView .icon16:before
{
    content: "\E123";
}

.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.gridView.icon16:before,
.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.gridView .icon16:before
{
    content: "\E122";
}

.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.tileView.icon16:before,
.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.tileView .icon16:before
{
    content: "\E125";
}

.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.impCardView.icon16:before,
.importDataControl .importDataControlActionsContainer .viewSelector .toggleView.impCardView .icon16:before
{
    content: "\E121";
}


.importDataControl .importDataControlActionsContainer .addActions .dropdownControl .dropdownPanel {
    min-width: inherit;
}

.importDataControl .importDataControlActionsContainer .addActions .dropdownControlButton.primary .icon16 {
    margin: 0 8px;
}

.importDataControl .importDataControlActionsContainer .addActions .dropdownControlButton.primary .icon16:before {
    content: "\E009";
}

.importDataControl .importDataControlActionsContainer .addActions .impachAction.addFile.icon16:before {
    content: "\E091";
}

.importDataControl .importDataControlActionsContainer .addActions .impachAction.impachFromMyEcm.icon16:before {
    content: "\E162";
}

.importDataControl .importDataControlActionsContainer .addActions .impachAction.impachFromEcmSearch.icon16:before {
    content: "\E162";
}

.importDataControl .importDataControlActionsContainer .addActions .impachAction.addNote.icon16:before {
    content: "\E116";
}

.importDataControl .importDataControlActionsContainer .addActions .impachAction.addUrl.icon16:before {
    content: "\E081";
}


.importDataControl .viewInEcmActionsContainer {
    float: right;
    margin: 3px 5px;
}

.importDataControl .viewInEcmActionsContainer .viewInEcmActions {
    display: inline-block;
}

.importDataControl .viewInEcmActionsContainer .viewInEcmActions button.handle {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    outline-color: transparent;
}

.importDataControl .viewInEcmActionsContainer .moreCount {
    border-radius: 4px;
    padding: 1px 6px;
    color: white;
    background-color: gray;
    font-size: 0.9em;
    opacity: 0;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -webkit-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

.importDataControl .viewInEcmActionsContainer .moreCount.moreCountSet {
    opacity: 1;
}


/*---importDataControl Popups---*/
.importDataControlPopup {
    width: 500px;
    padding: 8px 8px 0 8px;
    border-width: 1px;
    border-style: solid;
}

.importDataControlPopup .stackedContainer > .controlContainer {
    display: block;
}

.importDataControlPopup .impachmentPopupThumbnail {
    display: block;
    margin: auto;
    margin-bottom: 10px;
    max-width: 200px;
    max-height: 200px;
}

.importDataControlPopup .ecmDocs {
    padding: 3px 0;
    margin-bottom: 10px;
}

.importDataControlPopup .ecmDoc {
    padding: 3px 0;
}

.importDataControlPopup .ecmDoc > .label {
    font-weight: bold;
}

.importDataControlPopup .ecmDoc > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    word-wrap: normal; /* Needed for IE to honour 'white-space: nowrap' */
}


/*---Progress bar---*/
.importDataControl .item .progress
{
    display: none;
    line-height: 16px;
}

.importDataControl .item.uploading .progress
{
    display: inherit;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(200,255,200,0.5);
    border-radius: 3px;
    z-index: 0;
}

.importDataControl .item.uploading .icon
{
    background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/loadersml.gif);
    background-repeat: no-repeat;
    background-position: center;
}


/** Import progress pop up*/

.importProPopup > .content {
    padding: 20px;
    overflow-y: auto;
}

.importItem {
    background-color: rgba(0,0,0,0.02);
    border: solid 1px rgba(0,0,0,0.05);
    min-width: 600px;
}

.importItem .heading {
    opacity: 0.6;
    font-weight: 600;
}

.complete .heading {
    opacity: 1;
}

/* Progresss bar */
.ipIndWrapper {
    background: rgba(0,0,0,0.1);
}

.ipInd {
    height: 3px;
    width: 1%;
    position: relative;
    overflow: hidden;
    transition: width .6s ease;
    -webkit-transition: width .6s ease;
}

.complete .ipInd {
    height: 0;
}

/* end progresss bar */

.complete .impStatus {
    display: none;
}

.impStatus {
    float: right;
    margin-top: 3px;
}

.impDetails {
    overflow: hidden;
    max-height: 0;
    transition: max-height 1s ease;
}

.impDetails .impditem {
    position: relative;
    padding-right: 15px;
}

.impditem {
    border-style: solid;
    border-width: 1px;
    padding-left: 10px;
    border-radius: 4px;
    display: inline-block;

}

.linkCol.impditem {
    cursor: pointer;
    background-color: rgba(199, 220, 251, 0.18);
    padding-right: 30px;
}

.impRecord {
    margin-left: 10%;
}

.impId {
    vertical-align: bottom;
    padding-right: 0;
}

/* Icons and glyphs */
.impDetails .glyph {
    position: absolute;
    top: 50%;
    opacity: 0.7;
}
.impditem .icon24 { margin-top: -12px; }
.impditem .icon16 { margin-top: -8px; }
.importItem .heading .status,
.impRecord .icon24 { color: #89CA89; }
.importItem .heading .status.failed,
.impErr.linkCol .icon24 { color: red; }

.importItem .heading .status { display: none; }
.importItem.complete .heading .status { display: inline-block;}

/* chevron */
.impditem .chev { right: 5px; display: none; }
.linkCol.impditem .chev { display: block; }


.impDetails .impditem > div {
    margin-left: 40px;
    text-align: right;
}

.impDetails .impId > div {
    margin-left: 25px;
    text-align: left;
    min-width: 50px;
}

.impDetails .impditem > div:nth-of-type(even) {
    border-top: solid 1px rgba(0,0,0,0.2);
}

.impDetails .lbl {
    opacity: 0.5;
    color: initial;
}

.impDetails.linkCol:hover .lbl {
    opacity: 0.8;
}

.impDetails.linkCol .lbl {
    opacity: 1;
}

.impDetails .data {
    margin-left: 5px;
    font-size: 1.3em;
}

.importInProgress .impDetails {
    max-height: 200px;
}

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

.linkCol .impDetailesLine {
    color: inherit;
}

/** Ends Import progress pop up*/


/*.simpleSearchControl input
{
    vertical-align: top;
    height: 20px;
}*/



.slideBar
{
    width:18px;
    height: 100%;
    position: relative;
    border-top: solid 1px;
}

.slideBar.attached
{
    top: 0;
    bottom: 0;
    right: 0;
    height: auto;
    position: absolute;
    padding-top:27px; /* Will be overridden in slidebar.js */    
    padding-bottom: 1px;
}

.controlContainer > .slideBar.attached
{
    top: 2px;
    bottom: 2px;
}

.slideBar .scroller
{
    position: relative;
    height: 100%;
    border-top: solid 1px;
}

.slideBar .pointer
{
    min-height: 10px;
    position:absolute;
    right:4px;
    left:4px;
}

.slideBar .indexTip
{
    display: none;
    position: absolute;
    left: 25px;
    border-radius: 6px 0 0 6px;
    border: solid 1px;
}

.maxScreen .slideBar .indexTip
{
    right: 25px;
    left: auto;
    border-radius: 0 6px 6px 0;    

}
.slideBar .indexTip .indicator
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/leftarrow.png') no-repeat center center;
    position: absolute;
    height: 20px;
    width: 13px;
    left: -8px;
}

.maxScreen .slideBar .indexTip .indicator
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/rightarrow.png') no-repeat center center;
    position: absolute;
    height: 20px;
    width: 13px;
    left: auto;
    right: -9px;
}

.slideBar .indexTip .index
{
    display: block;
    margin: 4px;
    text-align: center;
}

.slideBar .scroller:hover .indexTip
{
    display: block;
}


@media only screen and (device-width: 768px)
{
    .slideBar .indexTip
    {
        display: none;
        right: 25px !important;
        left: auto !important;
        border-radius: 0 6px 6px 0 !important;    
    }
    
    .slideBar .indexTip .indicator
    {
        background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/rightarrow.png') no-repeat center center !important;
        left: auto !important;
        right: -9px !important;
    }    
}

    /* 
        Social Media Interaction Preview Control

        Contents:
        1. General
        2. Facebook
            - Posts / Reviews
            - Comments / Likes/ Shares
            - Attachments
            - Coversations
        3. Twitter
            - Tweets
            - Direct Messages

    */

    /* 

        1. General

    */
    .socialMediaInteractionPreview {
        max-width: 450px;
        word-wrap: break-word;
        background-color: #FFFFFF;
        padding: 10px;
    }

    .smipStory {
        padding: 10px;
    }

    .smipInteraction {
        border: dashed 1px #d9d8d8;
        padding: 10px;
        background-color: #ffffff;
    }

    .smipFollowerLink {
        font-weight: bold;
        padding-right: 5px;
    }

    .smipLinkWarning {
        color: #697882;
        font-size: 10px;
        font-style: italic;
    }

    .smipSelected {
        background-color: #FFFFCC;
    }

    .smipActions {
        color: #7f7f7f;
    }

    .smipActions .icon16:before {
        content: "\E002";
    }

    .smipClearfix:after {
        clear: both;
        content: ".";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }

    .smipContent {
        white-space: pre-line;
    }

    /* 

        2. Facebook
            - Posts / Reviews

    */

    .smipFacebookPostLogo {
        float: right;
    }

    .smipFacebookPostLogo img {
        width: 32px;
    }

    .smipFacebookPost {
        line-height: 1.34;
        font-size: 12px;
        color: #141823;
        min-height: 50px;
        margin-bottom:10px;
    }

    .smipFacebookPost .smipFollowerLink, .smipFacebookPost a {
        color: #3b5998;
    }

    .smipFacebookPostProfileImage, .smipTwitterTweetProfileImage {
        float: left;
        height: 50px;
        width: 50px;
    }

    .smipFacebookPostProfileImage img {
        max-width: 50px;
        max-height: 50px;
    }

    .smipFacebookPostCommentReplies .smipFacebookPostCommentProfileImage {
        height: 30px;
        width: 30px;
    }

    .smipFacebookPostCommentReplies .smipFacebookPostCommentProfileImage img {
        max-width: 30px;
        max-height: 30px;
    }

    .smipFacebookPostCommentReplies .smipFacebookPostComment {
        padding: 0 6px;
    }

    .smipFacebookPostCommentReplies .smipFacebookPostCommentContentWrapper {
        margin-left: 35px;
        min-height: 30px;
    }

    .smipFacebookPostCommentContentWrapper {
        margin-left: 35px;
    }

    .smipFacebookPostHeader {
        margin-left:60px;
        min-height:50px;
        word-wrap:break-word;
        overflow:hidden;
        padding:5px;
        display:block;
    }

    .smipFacebookPostProfileName {
        color: #3b5998;
        font-size: 14px;
        line-height: 1.38;
        font-weight: bold;
    }

    .smipFacebookPostDate {
        color: #9197a3;
        line-height: 1.34;
        font-size: 12px;
    }

    .smipFacebookPostContent {
        font-size: 14px;
        line-height: 1.38;
        margin-bottom: 10px;
    }

    .smipFacebookPostReviewRating {
        font-size: 14px;
        line-height: 1.38;
        margin-bottom: 10px;
        text-align: center;
        color: #3b5998;
    }


    .smipFacebookPostReviewRating .icon16:before {
        content: "\E181";
    }

    .smipFacebookPostContentSeperator {
        border-bottom: 1px solid #e5e5e5;
        margin: 4px;
    }

    /*

        2. Facebook
            - Comments / Likes / Shares

    */

    .smipFacebookPostSubContent {
        background-color: #f6f7f8;
        color: #141823;
        margin-top: 10px;
    }
    
    .smipFacebookPostComment, .smipFacebookPostCommentSummary {
        padding: 0 10px;
    }

    .smipFacebookPostCommentSummary {
        text-align: center;
    }

    .smipFacebookPostCommentProfileImage {
        float: left;
        height: 40px;
        width: 40px;
        padding-top: 5px;
    }

    .smipFacebookPostCommentProfileImage img {
        max-width: 40px;
        max-height: 40px;
    }

    .smipFacebookPostCommentActions {
        float: right;
    }

    .smipFacebookPostCommentContentWrapper {
        margin-left:45px;
        min-height:35px;
        word-wrap:break-word;
        overflow:hidden;
        padding:5px;
        display:block;
    }

    .smipFacebookPostCommentReplies {
        margin-left: 30px;
        margin-top: 10px;
        border-left: 2px solid #dcdee3;
        padding-left: 10px;
    }

    .smipUnpublished {
        background-color: #FFEBCD;
    }

    

    .smipFacebookPostInsightsSummary {
        color: #7f7f7f;
        font-size: 12px;
        line-height: 14px;
        padding: 8px 10px;
    }

    .smipFacebookPostInsightsSummarySeperator {
        border-right: 1px solid #e5e5e5;
        margin: 0 4px;
    }
    

    /*

        2. Facebook
            - Attachments

    */

    .smipFacebookPostContentImage, .smipFacebookPostContentVideo, .smipFacebookPostContentLink {
        width: 100%;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 5px 2px rgba(0, 0, 0, 0.05);
        line-height: 1;
    }

    .smipFacebookPostContentImage img {
        max-width: 100%;
    }

     .smipFacebookPostContentVideo video {
         width: 100%;
         max-height: 400px;
     }

    .smipFacebookPostContentLinkImage {
        float: left;
        height: 125px;
        width: 125px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .smipFacebookPostContentLinkImage img {
        max-width: 125px;
        max-height: 125px;
    }

    .smipFacebookPostContentLink a {
        text-decoration: none;
    }

    .smipFacebookPostContentLinkText {
        padding: 10px;
    }

    .smipFacebookPostContentLinkText h3 {
        font-weight: normal;
        padding-bottom: 10px;
    }

    .smipFacebookPostContentLinkText span {
        color: initial;
    }

    .smipFacebookPostContentLinkTextWithImage {
        margin-left: 130px;
        min-height: 40px;
        word-wrap: break-word;
        overflow: hidden;
        padding: 7px;
        display: block;
    }

    .smipFacebookPostComment .smipFacebookPostContentLinkImage {
        height: 75px;
        width: 75px;
    }

    .smipFacebookPostComment .smipFacebookPostContentLinkImage img {
        max-width: 75px;
        max-height: 75px;
    }

    .smipFacebookPostComment .smipFacebookPostContentLinkTextWithImage {
        margin-left: 75px;
    }

    .smipFacebookPostCommentFooter {
        color: #7f7f7f;
    }
    
    /* 

        2. Facebook
            2e. Coversations

    */
    .smipFacebookConversationMessageContent {
        padding: 2px;
        line-height: 1.38;
    }

    .smipFacebookConversationMessage {
        border-bottom: 2px solid #f7f7f7;
        padding: 10px;
        min-height: 50px;
    }

    .smipFacebookConversationMessageHeader {
        padding: 5px 2px;
    }

    .smipFacebookConversationMessageDate {
        color: #7f7f7f;
        font-size: 12px;
        line-height: 14px;
        padding-right: 5px;
    }

    .smipFacebookConversationMessageProfileImage {
        float: left;
        height: 40px;
        width: 40px;
        padding-top: 5px;
    }

    .smipFacebookConversationMessageProfileImage img {
        max-width: 40px;
        max-height: 40px;
    }

    .smipFacebookConversationMessageContentWrapper {
        margin-left:45px;
        min-height:30px;
        word-wrap:break-word;
        overflow:hidden;
        padding:0 5px;
        display:block;
    }

    /*
        
        3. Twitter
            - Tweets
        
    */

    .smipTwitterTweetLogo {
        float: right;
    }

    .smipTwitterTweetLogo img {
        width: 32px;
    }

    .smipTwitterTweetHeader {
        margin-left:70px;
        min-height:50px;
        word-wrap:break-word;
        overflow:hidden;
        padding:5px;
        display:block;
    }

    .smipTwitterTweetProfileName {
        color: #1C2022;
        font-size: 14px;
        line-height: 1.38;
        font-weight: bold;
    }

    .smipTwitterTweetProfileHandle {
        color: #697882;
        font-size: 12px;
    }
    
    .smipTwitterTweetProfileImage img {
        max-width: 50px;
        max-height: 50px;
    }

    .smipTwitterTweetContent {
        font-size: 16px;
        line-height: 1.38;
        margin-bottom: 10px;
    }

    .smipTwitterTweetSeperator {
        margin: 10px -11px;
        border: dashed 1px #d9d8d8;
        border-left: solid 1px #ffffff;
        height: 15px;
        border-right: solid 1px #ffffff;
    }

    .smipTwitterTweetDate {
        padding: 10px 0;
    }
    

    /*
        
        3. Twitter
            - Conversations
        
    */

    .smipTwitterConversationMessageProfileImage img {
        max-width: 40px;
        max-height: 40px;
    }

    .smipTwitterConversationMessageProfileImage {
        float: left;
        height: 40px;
        width: 40px;
    }

    .smipTwitterConversationMessageSelf .smipTwitterConversationMessageProfileImage {
        float: right;
    }

    .smipTwitterConversationMessageDate {
        float: right;
        font-size: 11px;
        line-height: 18px;
        color: #8899a6;
        float: left;
        margin: 0 0 0 50px;
    }

    .smipTwitterConversationMessageSelf .smipTwitterConversationMessageDate {
        float: right;
        margin: 0 50px 0 0;
    }

    .smipTwitterConversationMessageContent {
        background-color: #e1e8ed;
        border-color: #e1e8ed;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        font-size: 12px;
        line-height: 18px;
        margin: 0 10px;
        max-width: 60%;
        color: #000000;
        padding: 7px 12px;
        float: left;
    }

    .smipTwitterConversationMessageSelf .smipTwitterConversationMessageContent {
        background-color: #3b94d9;
        border-color: #3b94d9;
        color: #ffffff;
        float: right;
    }

    .smipTwitterConversationMessageContentSummary {
        text-align: center;
        padding: 10px;
    }


.statusBox 
{
    display:inline-block;
    width:110px;
    /*height:30px;*/
    border: solid 1px #0F3367;
    border-radius: 3px;
    background: #206bc7 url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/buttonbg.png') repeat-x 0 -15px;
    color: White;
    text-align:center;
    padding:2px;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);

    margin: 3px 0 3px 5px;
    font-size:0.88em;
    vertical-align: middle;
}

.statusBox .status {
   
}

.statusBox.Go
{
    background-color: #3ac720;
}

.statusBox.Stop
{
    /*background-color: #c72020;*/
    background-color:#ea3737;
    border-color:#be1b02;
}

.statusBox.Warning
{
    /*background-color: #c78820;*/
    
    /*background-color:#fffcd1;
    color:#b7ab00;
    border-color:#c9c141;
    text-shadow: 0 0 2px rgba(255,255,255,0.5);*/
    
    background-color:#debc00;
    border-color:#b6a809;
    
    background-color:#ebb03e;
    border-color:#d1931e;
    
    
}
/* Summary Panel Control */

.summaryPanelControl > .smryPanelHeader{
    position: relative;
    line-height: 2em;
    align-items: center;
    font-size: 1em;
}

.summaryPanelControl.isSubPanel > .smryPanelHeader {
    font-size: 1.3em;
}

.summaryPanelControl.hasImage > .smryPanelHeader .smryHeaderText{
   margin-left: 10px;
}


.summaryPanelControl .loadingSummaryContainer {
    display: none;
}

.summaryPanelControl.loadDataAsync .loadingSummaryContainer{
    display: block;
    text-align: center;
    margin: 15% auto;
    opacity: 0.5;
}


.summaryPanelControl .smryPanelContents{
    position: relative;
}

.summaryPanelControl.collapsed .smryPanelContents, .summaryPanelControl.collapsed .smryFooter{
    display: none;
}


.summaryPanelControl .smryPanelContents .summaryItem{
    position: relative;
}

.summaryPanelControl .smryPanelContents .summaryItem.hasNavigator{    
    cursor:pointer;
}

.smryPanelContents.flex{
    flex-flow: wrap;
}

.summaryItem .contentContainer {
    display: flex;
    align-items: center;    
}
.summaryItem.hasActions{
    overflow: hidden;
}

.flex > .summaryItem{
    display: inline-block;
}

.summaryItem .middleContent{
    flex: 1;
}

/* Summary footer */
.smryFooter {
    box-shadow: 0 0px 1px rgba(0,0,0,0.1);
    padding:5px;
    margin-top: 5px;
}


.summaryItem .userName{
    font-size: 1.2em;
}

/**Summary panel  */


.summaryItem.hasActions {
   transition: padding-right 0.1s ease-in-out;    
}
.summaryItem.hasActions > .middleContent{
    pointer-events: none;
}

.summaryItem.removeFlex {
   flex: 0 0 100%!important;
   text-align: left;
   background-color: white!important;
}

.summaryItem .actionsPanel{
    display: flex;
    position: absolute;    
    top: 0;
    bottom: 0;
    padding-left: 10px;
    background: rgb(255, 229, 202);    
}

.actionsCount1 .actionsPanel { right: -64px; }
.actionsCount2 .actionsPanel { right: -96px; }
.actionsCount3 .actionsPanel { right: -128px; }

.summaryItem .actionsPanel .summaryItemAction {
    align-self: center;
    padding: 4px;
    margin-right: 10px;
    border-radius: 50%;    
    transition: transform 0.1s ease-in;
}

.summaryItem .actionsPanel .summaryItemAction:hover {
    transform: scale(1.2);
}

@media all and (max-width: 800px) {
    
}

@media all and (min-width: 800px) {   
    
}

@media (hover: hover) {
    .summaryItem.actionsCount1:hover { padding-right: 64px; }
    .summaryItem.actionsCount2:hover { padding-right: 96px; }
    .summaryItem.actionsCount3:hover { padding-right: 128px; }

    .summaryItem.hasActions:hover .actionsPanel {
        right: 0;
    }
    .summaryItem.hasActions:hover .summaryItemAction{
        -webkit-animation-duration: 0.7s;
        animation-duration: 0.7s;
        -webkit-animation-name: bounceIn;
        animation-name: bounceIn;
    }
}


















@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}



.gridContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*----------- Main container ---------*/

.gridContainer .mainContainer,
.gridContainer .mainContainer .rightContainer,
.gridContainer .mainContainer .rightContainer .tableContainer .slickGridContainer,
.gridContainer .mainContainer .leftContainer
{
    position: relative;
    height: 100%;
}

.gridContainer .mainContainer .rightContainer .tableContainer
{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

.gridContainer.groupPanelVisible .mainContainer .rightContainer .tableContainer {
    top: 41px;
}


.slickGridContainer .slick-header-columns {
    /*border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;*/
    border-top: solid 1px transparent;
    border-bottom: solid 1px #e6e6e6;
    background-color: #fff;
}

.slick-header-columns {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad35opac.png'), url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac80.png');
    background-repeat: repeat-x, repeat-y;
    background-position: top left, -19px 0;
}

.slick-header .slick-header-column.ui-state-default {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-right: solid 1px transparent;
    overflow: visible;
}

.slick-header-column.ui-state-default:before {
    content: "";
    float: right;
    width: 1px;
    /* border-right: solid 1px #ccc; */
    border-right: solid 1px #e6e6e6;
    position: absolute;
    right: -1px;
    top: 10px;
    bottom: 10px;
}

.slick-header .slick-header-column.ui-state-default.ui-state-hover, .slick-header .slick-header-column-active {
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad54opac100.png');
    background-repeat: repeat-x;*/
    background-color: rgba(0, 0, 0, 0.03);
}

.slick-viewport .slick-cell {
    /*padding: 0 5px 1px 5px;*/
    /*padding: 0 10px 1px 10px;*/
    padding: 0 10px 2px 10px;
    border-right: none;
    border-left: none;
    border-top: none;
}

.displayDensityCompact .slick-viewport .slick-cell {

}

.gridContainer .slick-row.isDataRow .gridColumnEditable .gridCellReadOnly {
    margin: 0 -10px 0 -10px;
    padding: inherit;
}

.slickGridContainer .slick-cell .hasRowActions,
.slickGridContainer .slick-cell .hasCellActions {
    overflow: hidden;
    margin-right: 28px;/*leave some more space for the drop-down*/
    text-overflow: ellipsis;
}

.slickGridContainer .slick-cell .hasRowActions.pointer {
    color: inherit;
}

/*leave some more space on ipads*/
body.tablet .slickGridContainer .slick-cell .hasRowActions {
    margin-right: 35px;
}

.slickGridContainer .slick-footerrow-column .hasRowActions {
    overflow: hidden;
    margin-right: 10px;/*leave some more space for the drop-down*/
}

/*IE fix - otherwise it the browser displays ...*/
.slick-viewport .slick-cell.slick-cell-checkboxsel {
    /*padding-right: 5px;*/
}

/*IE fix - otherwise the browser displays ...*/
.slick-viewport .slick-cell .detailsShowButton {
    margin-right: 15px;
}

/*IE11 fix - a dot displays ...*/
.slick-column-name .chkBselAll {
    display: block;
    margin: 0 auto;
}

.displayDensityCompact .slick-viewport .slick-cell .detailsShowButton {
    height: 19px;
}

body.tablet .slick-viewport .slick-cell .detailsShowButton {
    height: auto;
    margin-top: 1px;
}

.displayDensityDoubleHeight .slick-viewport .slick-cell .detailsShowButton {
    margin-top: 10px;
}

.displayDensityCompact .slick-viewport .slick-cell {
    height: 21px !important;
}

.displayDensityComfortable .slick-viewport .slick-cell.gridColumnEditable, .displayDensityComfortable .slick-viewport .slick-cell.gridColumnReadOnly {
    height: 29px !important;/*the editable columns have a #fff color and this hides the bottom border - reduce the height by 1px*/
}

.slick-viewport .slick-cell .controlContainer {
    padding: 0;
}

.slick-footerrow-columns {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac35.png');
    background-repeat: repeat;
}

.slick-footerrow-cell {
    padding-right: 8px;
}

.slick-footerrow-cell.hasCellActions {
    padding-right: 15px;
}

.slick-row {
    position: absolute;
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
    border-bottom: solid 1px #e6e6e6;
    background-color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body.desktop .gridContainer.useStandardDetailsPanel .slickGridContainer .slick-row.isDataRow:not(.selected):hover {
    background-color: rgba(0, 0, 0, 0.02);
}



.gridContainer.useStandardDetailsPanel .slick-row.isDataRow .slick-cell:hover {
    cursor: pointer!important;
}

.slick-cell-checkboxsel {

}

.displayDensityComfortable .slick-cell-checkboxsel {
    height: 29px !important;
}

.slick-cell-checkboxsel input[type="checkbox"]
{
    /*margin-left: 3px !important;*/ /* talk to Dave about this */
    /*margin-top: 2px !important;*/ /* talk to Dave about this */
}

.displayDensityDoubleHeight .slick-cell-checkboxsel input[type="checkbox"]
{
    margin-top: 19px !important; /* talk to Dave about this */
}

.displayDensityDoubleHeight .slick-cell-checkboxsel.active input[type="checkbox"] {
    margin-top: 18px !important;
}

body.tablet .displayDensityDoubleHeight .slick-cell-checkboxsel input[type="checkbox"]
{
    margin-top: 16px !important; /* talk to Dave about this */
}

.relatedDataPortlet .gridContainer.editable .slick-cell.active {
    border-width:2px;
    border-style: solid;
    margin-top: -1px;
    padding: 0;
    margin-left: 0;
    min-height: 21px;


    padding-left: 8px;
    padding-right: 9px;
}

.displayDensityCompact .relatedDataPortlet .gridContainer.editable .slick-cell.active {
    line-height: 20px;
}


.gridContainer .slick-row.isDataRow .gridColumnEditable.active .gridCellReadOnly {
    border: solid 1px transparent;
}

.relatedDataPortlet .gridContainer.displayDensityComfortable.editable .slick-cell.active {
    min-height:29px;
    height: 29px !important;
    line-height: 28px;
}

.relatedDataPortlet .gridContainer.displayDensityDoubleHeight.editable .slick-cell.active {
    min-height: 45px;
    height: 45px !important;
    line-height: 44px;
}

.relatedDataPortlet .gridContainer.displayDensityCompact.editable .slick-cell.active {
    line-height: 20px;
}



.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer {
    border-color: transparent !important;
    border-radius: 0;
    height: 29px;
}

.relatedDataPortlet .gridContainer.displayDensityCompact .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer {
    height: 21px;
}

.slick-cell > .styleContainer > .textBoxControl.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersOne {
    padding-right: 23px;
}

.slick-cell > .styleContainer > .textBoxControl.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersTwo {
    padding-right: 47px;
}

.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer {
    padding: 0;
}

.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .textBoxControlInput {
    font-size: 1em;
}

.relatedDataPortlet .gridContainer.displayDensityCompact .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton,
.relatedDataPortlet .gridContainer.displayDensityComfortable .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    top: 1px;
}

.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 0 !important;
    width: 24px;
    height: 29px;
}

.relatedDataPortlet .gridContainer.displayDensityCompact .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    height: 21px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.relatedDataPortlet .gridContainer.displayDensityCompact .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker > .icon16 {
    height:13px;
    line-height: 13px;
}

.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker {
    right: 23px;
}

.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .suggestionPaneWrapper.shown,
.slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .calendarContainer {
    margin-left: -10px;
    margin-top: 1px;
}

.displayDensityDoubleHeight .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer {
    height: 45px;
}

.displayDensityDoubleHeight .slick-cell > .styleContainer > .textBoxControl > .tbcEditorField > .tbcInputContainer > .tbcPicker {
    height: 45px;
    padding-top: 14px;
}


.slick-cell select {
    height: 19px;
    padding: 1px 2px 1px 0;
    margin-left: -4px;
    margin-top: -1px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    vertical-align: top;
    border: 1px transparent;
    min-height: 16px;
    font-size: 1em;
}

/* next 2 get rid of focus border in grid */
.relatedDataPortlet .gridContainer input:focus, .relatedDataPortlet .gridContainer select:focus {
    box-shadow: none !important;
}

.relatedDataPortlet .gridContainer *:focus {
    outline: none;
}

.slick-viewport .slick-cell input[type="checkbox"] {
    margin-top: 3px;
    display: block;
    margin: 5px auto 0 auto;
}



.displayDensityComfortable .slick-viewport .slick-cell input[type="checkbox"] {
    margin-top: 10px;
}

.displayDensityComfortable.editable .slick-viewport .slick-cell.active input[type="checkbox"] {
    margin-top: 9px;
}

.displayDensityComfortable .slick-column-name .chkBselAll {
    margin-top: 5px;
}

.editableGrid .slick-viewport .slick-cell.active input[type="checkbox"] {
    margin-top: 9px;
}



/*For multi-line headers we want the text to automatically wrap */
.headerLines2 .slick-header-column.slick-header-column {
    height: 32px;
    line-height: 16px;
    white-space: normal;
}

.headerLines3 .slick-header-column.slick-header-column {
    height: 48px;
    line-height: 16px;
    white-space: normal;
}

.headerLines5 .slick-header-column.slick-header-column {
    height: 80px;
    line-height: 16px;
    white-space: normal;
}
.headerLines5 .slick-header-column.slick-header-column .slick-column-name {
    width: 100%;
}

.relatedDataPortlet .grid-canvas {
    /*border-top: solid 1px #e6e6e6;*/
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.1);
}

.relatedDataPortlet .gridContainer.editable .grid-canvas {
    border-top: solid 1px #e6e6e6;
}

.displayDensityCompact .grid-canvas {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/grid_bg_24.png');
    background-repeat: repeat;
}

.displayDensityComfortable .grid-canvas {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/grid_bg_32.png');
    background-repeat: repeat;
}

.displayDensityDoubleHeight .grid-canvas {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/grid_bg_48.png');
    background-repeat: repeat;
}

.slick-header-column.ui-state-hover {
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whitegrad54opac100.png');
    background-repeat: repeat-x;*/
}

.slick-sort-indicator-desc, .slick-header-column.ui-state-hover .slick-sort-indicator-asc {
  background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/descending.png') !important;
}

.slick-sort-indicator-asc, .slick-header-column.ui-state-hover .slick-sort-indicator-desc {
  background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/ascending.png') !important;
}

.slick-header-column.ui-state-hover .slick-sort-indicator {
  background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/ascending.png');
}

.slick-sort-indicator {
    float: right;
    position: absolute;
    right: 5px;
    top: 11px;
    background-position: center;
    background-repeat: no-repeat;
    height: 16px !important;
    width: 16px !important;
}

.slick-header-column-sorted {
  font-style: inherit !important;
}

.slick-resizable-handle
{
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/blackopac15.png');*/
    background-repeat: repeat;
    width: 8px !important;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);*/
    opacity: 0;
}

.slick-resizable-handle:hover
{
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity: 0.3;
    cursor: col-resize !important;
}

.slick-column-name
{
    padding-right: 15px; /* leave room for sort icon */
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 0 1px 1px #fff;
    /*margin-left: 5px;*/
    font-weight: 600;
    font-size: 0.9em;
    position: relative;
    top: -4px;/*the container has a paddingh of 4px and we want to be able to drag from the very top*/
    height: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
}

.slick-header-column[id*="checkbox_selector"] > .slick-column-name {
    overflow: visible;
    padding-right: 0;
}


@media all and (min-width:0\0) and (min-resolution: .001dpcm) /*IE9 doesn't truncate the column headers'*/
{
   .slick-column-name {
       word-wrap: normal;
}
}


/* IE and FF cut off characters of the columns headers that have descenders */

.firefox.desktop.windows0 .slick-column-name,
.ie.desktop.windows0 .slick-column-name {
    padding-bottom: 1px;
}

.gridColumnAlignRight {
    text-align: right;
}

.gridColumnAlignCenter {
    text-align: center;
}

.displayDensityDoubleHeight .slick-cell {
    line-height: 45px;
    height: 45px !important;
}

.displayDensityComfortable .slick-cell {
    line-height: 30px;
}

.displayDensityCompact .slick-cell {
    line-height: 21px;
}

/*  to highlight selected row */
/*
.slick-row.selected {
  z-index: 10;
}
*/

.relatedDataPortlet .slick-cell.selected {
  background: none;
}

/*.expandoContent {

}

.expandoContent > section {
    border-top:none !important;
}*/ /*---for if expando comes back--*/

.slickGridContainer .gridCellLongTextContainer {
    position:absolute;
    background:white;
    /*padding:5px;*/
    /*padding: 2px 2px 2px 3px;*/
    padding: 1px 7px 7px 8px;
    border-width: 2px;
    border-style: solid;
    top: -2px;
    left: -2px;
}

.slickGridContainer .gridCellLongTextContainer button {
    min-width: 50px;
    margin-left: 5px;
}

.slickGridContainer .editorLongText {
    width:250px;
    height:80px;
    border:0;
    outline: 0;
    font-size: 1em;
    padding: 0;
}

.displayDensityComfortable .slickGridContainer .editorLongText {
    padding-top: 4px;
}


.slickGridContainer .editorNumeric {
    padding-right: 2px;
    text-align: right;
    margin-right: 8px;
}

.rdpActionBar .searchPanel {
    float: right;
    padding-right: 5px;
    padding-top: 2px;
}
.rdpActionBar .searchPanel .icon16.search  {
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/searchwatermark.png');
}

.superGridDetailContainer {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9002; /* to beat the overlay underneath */
    background-color: #fff;
}


.slickGridContainer .slick-header-column.hasCellActions .slick-column-name
{
    padding-right:25px;
}

/*don't show dropdown icon except on hover or dropdown*/
.slickGridContainer .cellActions .icon16
{
    display:none;
}
.slickGridContainer .hasCellActions:hover .cellActions .icon16,
.slickGridContainer .hasCellActions .cellActions.selected .icon16
{
    display:block;
}

.rowDetailsHint {
    position: absolute;
    right: 23px;
    width: 16px;
    height:16px;
}

.displayDensityDoubleHeight .rowDetailsHint {
    margin-top: 12px;
}

/*
.rowDetailsHint .icon24{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/24/drilldownright-boxed.png');
    display: block;
}
*/
.gridContainer .addRemoveItem{
    width: 20px;
    height: 100%;
    padding-top: 2px;
}

.gridContainer .addRemoveItem.addItem .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plus.png');
    display: block;
}

.gridContainer .addRemoveItem.removeItem .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/minus.png');
    display: block;
}


 /*--Editable related data portlet--*/

.relatedDataPortlet .gridActionBar {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac35.png');
    background-repeat: repeat;
}

.relatedDataPortlet .gridActionBar {
    border-style: solid;
    border-width: 1px;
    border-bottom: none;
}

.gridContainer.editable .slick-group .slick-cell {
    background-color: transparent;
}

.gridContainer .slickGridContainer .slick-row.isDataRow.selected .slick-cell, .gridContainer.zebraLayout .slickGridContainer .slick-row.isDataRow.odd.selected .slick-cell {
    background-color: transparent;
}

.gridContainer .slick-cell {
    border-right-style: solid;
    border-width: 1px;
    border-color: transparent;
    /*border-bottom: solid 1px rgba(0, 0, 0, 0.1);*/
}

.relatedDataPortlet .gridContainer.editable .slick-cell {
    border-right-color: #e6e6e6;
}


.relatedDataPortlet .slick-cell.slick-cell-checkboxsel {
    background-image: none;
}

.relatedDataPortlet .slickGridContainer .slick-row .slick-cell:first-child {
    /*border-left: solid 1px transparent;*/
}

.relatedDataPortlet .slickGridContainer .slick-row .slick-cell:first-child input[type="checkbox"] {
    /*margin-left: 1px;*/
}

.relatedDataPortlet .gridContainer.editable .slickGridContainer .slick-row .slick-cell.active:first-child {
    border-left-width: 2px;
    margin-left: 0;
}

.relatedDataPortlet .gridContainer.editable .slickGridContainer .slick-row .slick-cell.active:last-child {
    border-right-width: 2px;
}

.gridContainer .slick-row.isDataRow.selected .gridColumnEditable {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
}

.slick-group {
    /*background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac80.png');
    background-repeat: repeat-x;
    background-position: 0 -19px;*/
    font-weight: 600;
    /*border-bottom-color: #fff;*/
}

.slick-row.newRow:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    border-left: solid 7px;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent;
    width: 0;
    height: 0;
    top: 50%;
    margin-top: -7px;
    opacity: 0.75;
}

.slick-cell div.attachment,
.slick-cell div.attachmentInfo,
.slick-cell div.info {
    margin-right: -10px;
    height:100%;
    display:block;
}

.slick-cell div.attachment .icon16, .slick-cell div.attachmentInfo .icon16, .slick-cell div.info .icon16 {
    display:block;
    margin: 0 auto;
    height:100%;
}

.slick-cell div.attachment .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/attachment.png');
}

.slick-cell div.attachmentInfo .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/attachmentinfo.png');
}

.slick-cell div.info .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/info.png');
}

.slick-cell.showSpinner {
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/pulsedot.gif') no-repeat right;
    padding-right: 20px;
}

.gridContainer.pickListMode .slick-row .slick-cell:first-child {
    cursor: pointer;
}

.gridContainer.pickListMode .slick-row .slick-cell:first-child:hover {
    text-decoration: underline;
}

.slick-cell .favouriteButton{
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: inline-block;
    margin-top: 4px;
    vertical-align: top;
}

.slick-cell .favouriteButton.e181 .icon16:before {
    color: grey;
}

.slick-cell .favouriteButton.e180 .icon16:before {
    color: gold;
}


.gridContainer .isRating .ratingSymbol {
    height: 30px;
    line-height: 28px;
}

.superGridFormatterHeading .slickRemoveColumn {
    float: right;
}

.superGridFormatterHeading .slickRemoveColumn:hover {
    cursor: pointer;
}
.swagger-section .swagger-ui-wrap {
    margin-left: 0;
    margin-right: 40px;
    font-size: 1.1em;
}

.swagger-section .swagger-ui-wrap table.model {
    word-break: break-all;
}

.swagger-section .swagger-ui-wrap textarea {
    width: 97%;
}

.hide-swagger-info .swagger-section .swagger-ui-wrap .info {
    display: none;
}

.hide-swagger-info .swagger-section .swagger-ui-wrap ul#resources li.resource div.heading ul.options,
.swagger-section .swagger-ui-wrap button.expand-operation
{
    display: none !important;
}

#WebServiceAllDocumentationSection.editablePanel.scrollContent > .content {
    border-top: none;
}

.swagger-section .swagger-ui-wrap .swagger-ui .wrapper{
    width:100%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.hide-swagger-schemes .swagger-section .swagger-ui-wrap div.scheme-container,
.swagger-section .swagger-ui-wrap .swagger-ui .response-col_links
{
    display: none !important;
}

.swagger-section .swagger-ui-wrap .swagger-ui .scheme-container{
    padding: 30px 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0;
    background: transparent;
}

/* swagger-ui override */

.swagger-section .swagger-ui-wrap .swagger-ui select, .swagger-section .swagger-ui-wrap .swagger-ui .btn{
    border: solid 1px lightgrey;
}

.swagger-section .swagger-ui-wrap .swagger-ui table{
    margin: 10px 0;
}


@media (max-width: 750px) {
    .swagger-section .swagger-ui-wrap .swagger-ui table tbody tr td:first-of-type {
        width: 30%;        
        border-right: solid 5px transparent;
    }

    .swagger-section .swagger-ui-wrap .swagger-ui table tbody tr td:first-of-type{
        min-width: auto;
    }

    .swagger-section .swagger-ui-wrap {
        margin-right: 0;        
    }

    .swagger-section .swagger-ui-wrap .swagger-ui .opblock .opblock-section-header{
        padding: 8px;
    }
    .swagger-section .swagger-ui-wrap .swagger-ui .opblock-description-wrapper, 
    .swagger-section .swagger-ui-wrap .swagger-ui .opblock-external-docs-wrapper, 
    .swagger-section .swagger-ui-wrap .swagger-ui .opblock-title_normal{
        padding: 15px 8px;
    }
    
    .swagger-section .swagger-ui-wrap .swagger-ui .opblock .opblock-section-header h4{
        margin-right: 15px;
    }

    .swagger-section .swagger-ui-wrap .swagger-ui .table-container{
        padding: 10px;
    }
    
    .swagger-section .swagger-ui-wrap .swagger-ui td .required{
        position: relative;
    }
    .swagger-section .swagger-ui .parameter__name.required:after {
        position: absolute;
    }

    .swagger-section .swagger-ui-wrap .swagger-ui td.parameters-col_description{
        word-break: break-all;
    }
    
}


.tabbedControl.horizontal > .tabsContainer > .tabControl {
    display:none;
}

.tabbedControl.horizontal > .tabsContainer > .tabControl.selected {
    display:inherit;
    min-height: 100px;
}

.tabbedControl.horizontal > .tabHandlesContainer
{
    overflow:hidden;
    white-space:nowrap;
    padding-top:1px;
    padding-left:1px;
    padding-right:1px;
}

.tabbedControl > .previousTab, .tabbedControl > .nextTab
{
    border: solid 1px #d2d7df;
    height: 22px;
    width: 16px;
    margin-top: 1px;
    display:inline-block;
}

.tabbedControl > .previousTab
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/leftarrow.png') no-repeat center center;
    float:left;
    margin-left: -1px;
}

.tabbedControl > .previousTab.enabled:hover
{
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/leftarrowhover.png') no-repeat center center;
}

.tabbedControl > .nextTab
{
    background: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/rightarrow.png) no-repeat center center;
    float:right;
    margin-right: -1px;
}

.tabbedControl > .nextTab.enabled:hover
{
    background: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/rightarrowhover.png) no-repeat center center;
}

.tabbedControl > .previousTab.disabled, .tabbedControl > .nextTab.disabled
{
    opacity:0.2;
}


.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle {
    padding:5px;
    margin-right: 2px;
    display: inline-block;
    position:relative;
    min-width:50px;
    text-align:center;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px 5px 0 0;
    vertical-align:bottom;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/buttonbg.png');
    background-repeat: repeat-x;
    background-position: top left;
    cursor: pointer;
}

.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.selected, .tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.selected:hover {
    text-decoration: none;
    cursor: default;
}


.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.selected {
    font-weight:bold;
}

.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle:hover {
    background-position:0 -58px;
    cursor:pointer;
}

.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.disabled:hover {
    background-position: inherit;
}

.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.disabled:focus {
    outline: inherit;
}


/*--Record navigation--*/

.tabbedControl .tabHandle.recNavPast, .tabHandle.recNavPast > :first-child, .tabbedControl .tabHandle.recNavFuture, .tabHandle.recNavFuture > :first-child {
    background:none;
    border:solid 1px transparent;
    border-bottom:none;
}

.tabbedControl .tabHandle.recNavPast:hover, .tabbedControl .tabHandle.recNavFuture:hover {
    background:#deedff;
    border-color:#b2cff5;
    cursor:pointer;
}

.tabHandle.recNavPast:hover > :first-child, .tabHandle.recNavFuture:hover > :first-child {
    border-color:#fff;
}

.tabHandle.recNavPast span, .tabHandle.recNavFuture span {
    display:block;
    height:12px;
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationprevious.png') no-repeat center;
}

.tabHandle.recNavFuture span {
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationnext.png') no-repeat center;
}

/*--Date format--*/

.tabHandle.dateFormat {
    text-align:center;
}

.tabHandle.dateFormat:hover {
    text-decoration:none;
}

.tabHandle.dateFormat .month {
    display:block;
    margin-bottom:3px;
    /*color:#b2cff5;*/
    font-size:0.8em;
    font-weight:bold;
    text-transform:uppercase;
}

.tabHandle.dateFormat .month.currentPeriod {
    color:#ee8b01;
}

.tabbedControl.horizontal > .tabsContainer
{
    margin-top:-1px;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 5px 0px 5px 0px;
}

.portlet .tabbedControl .tabsContainer
{
    padding-bottom:0;
}



/*--Notification--*/

.tabbedControl .tabHandle .alert {
    position:absolute;
    text-align:center;
    top:0;
    left:0;
    right:0;
    height:0;

}

.tabbedControl .tabHandle .alert > * {
    margin-top:-5px;
}

.overdue .icon11 {
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/overdue11.png');
}

.saved .icon11 {
    background-image:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/save11.png');
}


/*--- Tabs within Tabs ---*/

.tabsContainer .tabbedControl .tabsContainer
{
    border-radius: 0px;
    border: none;
     border-top:solid 1px;
}

.tabControl > button {
    margin: 10px !important;
}

.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.selected,
.tabbedControl.horizontal > .tabHandlesContainer > .tabHandle.selected:hover
{
    background-image: none;
    background-color: #fff;
}


.tabbedControl.vertical > .tabHandlesContainer
{
    float:left;
    width:250px;
    vertical-align: top;
    display: inline-block;
    overflow:visible;
    padding:0;
}

.tabbedControl.vertical > .previousTab.disabled, .tabbedControl.vertical > .nextTab.disabled {
    display:none !important;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle
{
    display:block;
    border-radius: 0;
    min-height: 40px;
    padding:10px;
    text-align:left;
    border-top: solid 1px #fff;
    background-image: none;
    background-repeat:repeat-x;
    background-position:0 -30px;
    margin: 0 -1px 0 0;
    font-size: 1em;
    font-weight: normal;
    cursor: pointer;
    position: relative;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle:hover
{
    display:block;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle.selected:before {
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-8px;
    border-right: solid 8px;
    border-top: solid 8px transparent !important;
    border-bottom: solid 8px transparent !important;
    width: 0;
    height: 0;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle.disabled
{
    position: relative;
    cursor: default;    
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle.disabled:after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background-color: rgba(255, 255, 255, 0.5);
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryImage {
    float:left;
    margin-right:5px;
    width: 24px;
    height: 24px;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryHeading {
    font-size: 1.1em;
    font-weight: 600;
    font-family: Osans, Arial, sans-serif;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryHeading > .mandatory {
    font-size: 0.7em;
    top: -5px;
    position: relative;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLine
{
    font-size: 0.9em;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLine > .summaryLineValue {
    color: #656565;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLineColoured > .summaryLineLabel {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 2px 5px;
    text-transform: capitalize;
    color: #fff;
    display: inline-block;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLineColoured, .tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLineTag {
    padding: 3px 0;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLineColoured ~ .summaryLineTag, .tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLineTag ~ .summaryLineColoured {
    padding: 1px 0 3px 0;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLine > .tagCode {
    color: #fff;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    text-transform: uppercase;
    display:block;
    float:left;
    padding: 2px 5px;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryLine > .tagDesc {
    border-width: 1px;
    border-style: solid;
    border-left: none;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #fff;
    display:block;
    float:left;
    padding: 2px 5px;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryImage ~ .summaryHeading, .tabbedControl.vertical > .tabHandlesContainer > .tabHandle > .panel > .summary > .summaryImage ~ .summaryLine {
    margin-left: 29px;
}

.tabbedControl.vertical > .tabsContainer
{
    border: none;
    margin-left:250px;
    padding:0;
}

.tabbedControl.vertical > .tabsContainer > .tabControl
{
    width: 100%;
    display:none;
}
 
.tabbedControl.vertical > .tabsContainer > .tabControl.selected {
    display:inherit;
    min-height: 100px;
}

.tabbedControl.vertical > .tabHandlesContainer > .tabHandle.selected,
.tabbedControl.vertical > .tabHandlesContainer > .tabHandle.selected:hover
{
    background-image: none;
    background-color: #fff;
}

/*----Table Container----*/

.tableContainer 
{
    margin:10px 0;
    position:relative;
    clear:both;
}

.tabsContainer .tableContainer
{
    clear: none;   
}

.tableContainer .controlContainer {
    padding: 1px 0;
}

.tableControl .tableTemplate
{
    display:none;
}

table 
{
    width: 100%;
    border-left:none;
    /*border-collapse:collapse;*/
}

/*----Table header----*/

.tableHeader .formActions
{
    margin:0;
    padding:0;
}

td, th {
    vertical-align:top;
    padding:5px;
    text-align:left;
    line-height:1.3em;
    border:none;
    border-bottom:solid 1px;
}

table tr.hasRowActions:hover, tr:hover, 
.suggestionItem.selected {
    background-color: rgba(0, 0, 0, 0.02);
}

/*--Table footer & Pagination--*/

.footer
{
    padding: 5px;
    min-height: 20px;
}

.footer .noRecords {
    float:right;
    line-height:24px;
    margin-right: 20px;
}

tfoot {
    font-size:1.2em;
    font-weight:bold;
    }

tfoot tr:hover {
    background:inherit;
}

.paging {
    text-align:center;
    margin:0 110px;
}

.paging a {
    display:inline-block;
    margin: 0 2px;
    font-weight:normal;
    vertical-align:middle;
}

.paging .disabled
{
    opacity: 0.3;
    cursor: default;
}

.paging .disabled:hover {
    border:solid 1px transparent;
    background:none;
}

.hiddenPage, .hiddenRow
{
    display: none;
}

.paging .prev 
{
    line-height:inherit;
}

.paging .pageNumbersPanel
{
    display:inline-block;
}

.pageNumbersPanel .pagingNumber
{
    display: inline-block;
    min-width: 16px;
    line-height: 16px;
}

.footer .firstPage .icon16
{
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationfirst.png') no-repeat center;
}

.footer .lastPage .icon16
{
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationlast.png') no-repeat center;
}

.footer .nextPage .icon16
{
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationnext.png') no-repeat center;
}

.footer .prevPage .icon16
{
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/paginationprevious.png') no-repeat center;
}

/*--vanilla table style--*/

.vanillaStyle .formActions {
    padding:0;
}

.vanillaStyle .tHeadings {
    background:none;
    border:none;
}

.vanillaStyle .trHighlight 
{
    font-weight:bold;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

.vanillaStyle .trTotalHighlight 
{
    font-weight:bold;
}

.vanillaStyle .tableHeader 
{
    padding:0 6px;
}

.vanillaStyle .tableSubHeader 
{
    font-style:italic; 
    font-weight:normal; 
    font-size:smaller;
}

.vanillaStyle td {
    padding:8px 5px; 
}

.vanillaStyle tfoot {
    background:none;
}

.tabControl .vanillaStyle th:first-child, .tabControl .vanillaStyle td:first-child {
    padding-left: 10px;
}

.tabControl .vanillaStyle th:last-child, .tabControl .vanillaStyle td:last-child {
    padding-right: 10px;
}

.vanillaStyle table .empty input, .vanillaStyle table .empty select 
{
    border-color:#fff;
}

.vanillaStyle table .empty input, .vanillaStyle table .empty select {
    opacity:0.3;
}


.vanillaStyle table tr.hover input, .vanillaStyle table tr.hover select {
    opacity:1;
    border:solid 1px #c4c4c4;
}


/* Column Data Types Styles */
td.Date
{
    min-width: 80px;
}

td.DateTime
{
    min-width: 130px;
}

td.Currency
{
    
}

.noRecords {
    float:right;
    line-height:24px;
}

.negativeText
{
    color:red !important;
}

.portlet .tableContainer 
{
    margin-bottom:0;
}

.tableContents .attachmentLink
{
    clear:none;
}

table td > div.actionsContainer
{
    float: right;
    margin-top: -3px;
    margin-left: 10px;
}

.snapToGrid, .snapToGrid tr, .snapToGrid td
{
    border: none;
    border-color: none;
}

.snapToGrid tr:hover {
    background:none;
}

#tagSelectorCancelButton, #tagSelectorOkButton, #tagSelectorCloseButton {
    float: right;
    margin-left: 5px;
    margin-right: 0px;
}

.tagSelectorPanel > .noTagDefs {
    width: inherit;
}

.tagDefSelect {
    padding-bottom: 2px;
    padding-top: 2px;
    border: 1px rgb(196, 196, 196);
    border-style: solid;
    border-left: none;
    border-bottom: none;
    border-right: none;
    padding-left: 9px;
}

.tagDefSelect:first-child{
    border-top: none;
}

.tagDefSelect .tagDefCode {
    color: white;
    width: 20px;
    font-weight: bold;
    font-size: large;
    text-align: center;
    display: inline-block;
    padding: 4px;
}

.entityTag .tagColour input {
    width: 17px;
    height: 17px;
}

.tagDefSelect .tagItem .tagName {
    vertical-align: text-bottom;
    margin-left: 5px;
    max-width: 375px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagSelectorPanel {
    padding: initial;
    padding-top: 2px;
    max-height: 194px;
    overflow: auto;
    border: 1px rgb(196, 196, 196);
    border-style: solid;
}

.tagSelectorPanel .tagDefSelect .tagItem {
    display: block;    
    line-height: 24px;
}

.tagSelectorPanel .tagDefSelect .editTagItem {
    display: none;    
}

.tagSelectorPanel .tagDefSelect.editMode .tagItem {
    display: none;    
}

.tagSelectorPanel .tagDefSelect.editMode .editTagItem {
    position: relative;
    display: block;
    height: 60px;
}

.tagSelectorPanel .tagItem .editTag,
.tagSelectorPanel .tagItem .deleteTag {
    float: right;    
    box-shadow: none;
    border: solid 1px transparent;
    background: none;
}

.tagSelectorPanel .tagItem .deleteTag .icon16{
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/close3.png');
}

.tagSelectorPanel .tagItem .editTag .icon16{
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/edit.png');
}

.partial_select {
    opacity: 0.5;
}

.newTagLink {
    line-height: 24px;
}

.newTagPanel, .editTagPanel {
    margin-top: 6px;
    padding: 6px 0;
    height: 84px;
}

.entityTag .tagName {
    width: 162px;
    margin-right: 6px;
}

.entityTag .tagColour {
    display: inline-block;
    line-height: 35px;
    padding-left: 2px;
    background: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/dropdown.png');
    background-repeat: no-repeat;
    background-position: right;
    width: 40px;
    cursor: pointer;
}

.entityTag .tagLetter {
    margin-right: 28px;
    font-weight: bold;
    text-transform: uppercase;
    width: 14px;
}

.newTagAdd, .newTagCancel, .editTagSave, .editTagCancel {
    float: right;    
    margin: 5px 2px 0px 2px;
    padding: 5px 23px;
}

.tagNameLabel {
    display: inline-block;
    width: 178px;
}

.tagLetterColourLabel {
    width: 48px;
    display: inline-block;
}

.colourpallete {
    border: 1px black solid;
    width: 200px;
    padding: 4px;
    height: 120px;
    background: rgb(240, 242, 244);
    margin-left: 23px;
    position: absolute;
    z-index: 9999;
}

/* iPad Landscape */
@media only screen and (device-width: 768px) and (orientation: landscape) {
    
    .colourpallete {
        width: 328px;
        height: 180px;
    }
}

/* iPad Portrait */
@media only screen and (device-width: 768px) and (orientation: portrait) {
    
    .colourpallete {
        width: 328px;
        height: 180px;
    }
}

.isColour {
    cursor: pointer;
    border: 1px rgb(233, 236, 208) solid;
    padding: 0px;
}

.colourrow > .colour1 {
    background-color: #FFCCCC;
}

.colourrow > .colour2 {
    background-color: #FFE5CC;
}

.colourrow > .colour3 {
    background-color: #FFFFCC;
}

.colourrow > .colour4 {
    background-color: #CCFFCC;
}
.colourrow > .colour5 {
    background-color: #CCFFFF;
}

.colourrow > .colour6 {
    background-color: #CCE5FF;
}

.colourrow > .colour7 {
    background-color: #CCCCFF;
}

.colourrow > .colour8 {
    background-color: #E5CCFF;
}

.colourrow > .colour9 {
    background-color: #FFCCFF;
}

.colourrow > .colour10 {
    background-color: #FFCCE5;
}

.colourrow > .colour11 {
    background-color: #F5F5F5;
}

.colourrow > .colour12 {
    background-color: #FF9999;
}

.colourrow > .colour13 {
    background-color: #FFCC99;
}

.colourrow > .colour14 {
    background-color: #FFFF99;
}

.colourrow > .colour15 {
    background-color: #99FF99;
}

.colourrow > .colour16 {
    background-color: #99FFFF;
}

.colourrow > .colour17 {
    background-color: #99CCFF;
}

.colourrow > .colour18 {
    background-color: #9999FF;
}

.colourrow > .colour19 {
    background-color: #CC99FF;
}

.colourrow > .colour20 {
    background-color: #FF99FF;
}

.colourrow > .colour21 {
    background-color: #FF99CC;
}

.colourrow > .colour22 {
    background-color: #E0E0E0;
}

.colourrow > .colour23 {
    background-color: #FF6666;
}

.colourrow > .colour24 {
    background-color: #FFB266;
}

.colourrow > .colour25 {
    background-color: #FFFF66;
}

.colourrow > .colour26 {
    background-color: #66FF66;
}

.colourrow > .colour27 {
    background-color: #66FFFF;
}

.colourrow > .colour28 {
    background-color: #66B2FF;
}

.colourrow > .colour29 {
    background-color: #6666FF;
}

.colourrow > .colour30 {
    background-color: #B266FF;
}

.colourrow > .colour31 {
    background-color: #FF66FF;
}

.colourrow > .colour32 {
    background-color: #FF66B2;
}

.colourrow > .colour33 {
    background-color: #C0C0C0;
}

.colourrow > .colour34 {
    background-color: #FF0000;
}

.colourrow > .colour35 {
    background-color: #FF8000;
}

.colourrow > .colour36 {
    background-color: #FFFF00;
}

.colourrow > .colour37 {
    background-color: #00FF00;
}

.colourrow > .colour38 {
    background-color: #00FFFF;
}

.colourrow > .colour39 {
    background-color: #0080FF;
}

.colourrow > .colour40 {
    background-color: #0000FF;
}

.colourrow > .colour41 {
    background-color: #7F00FF;
}

.colourrow > .colour42 {
    background-color: #FF00FF;
}

.colourrow > .colour43 {
    background-color: #FF007F;
}

.colourrow > .colour44 {
    background-color: #808080;
}

.colourrow > .colour45 {
    background-color: #CC0000;
}

.colourrow > .colour46 {
    background-color: #CC6600;
}

.colourrow > .colour47 {
    background-color: #CCCC00;
}

.colourrow > .colour48 {
    background-color: #00CC00;
}
.colourrow > .colour49 {
    background-color: #00CCCC;
}

.colourrow > .colour50 {
    background-color: #0066CC;
}

.colourrow > .colour51 {
    background-color: #0000CC;
}

.colourrow > .colour52 {
    background-color: #6600CC;
}

.colourrow > .colour53 {
    background-color: #CC00CC;
}

.colourrow > .colour54 {
    background-color: #CC0066;
}

.colourrow > .colour55 {
    background-color: #606060;
}

.colourrow > .colour56 {
    background-color: #660000;
}

.colourrow > .colour57 {
    background-color: #663300;
}

.colourrow > .colour58 {
    background-color: #666600;
}

.colourrow > .colour59 {
    background-color: #006600;
}
.colourrow > .colour60 {
    background-color: #006666;
}

.colourrow > .colour61 {
    background-color: #003366;
}

.colourrow > .colour62 {
    background-color: #000066;
}

.colourrow > .colour63 {
    background-color: #330066;
}

.colourrow > .colour64 {
    background-color: #660066;
}

.colourrow > .colour65 {
    background-color: #660033;
}

.colourrow > .colour66 {
    background-color: #202020;
}

.systemTagContainer{
    display: inline-block;
    position: absolute;    
    margin-left: 6px;
}
::-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.1540.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;
} 

/* MISSING IMAGE PLACEHOLDERS*/
.thumbnailImg.loading{
    opacity: 0;
    transform: scale(0.5);
}

.thumbnailImg{
    opacity: 1;
    transform: scale(1);
}

.thumbnailImg .missingImagePlaceholder {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 48px;
    width: 48px;
    display: block;
}

.contact .thumbnailImg .missingImagePlaceholder {
    margin: 0 auto;
}

/*************************
** Drag and drop styles ***
*************************/
body.ipad.hasThumbnailDrag { /* iPad specific drag - where body tends to scroll while dragging an thumbnail item. */
    position: fixed;
    margin-top: 0;
    width: 100%;
}

body.hasThumbnailDrag .webkitOverflowTouch{
    overflow: hidden;
}

.thumbnailItem.proxy .itemWrapper {
    
}

/** compact */
.thumbnailItem.draggable .gripper {
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.05);
    text-align: center;
    z-index: 1;
}

.compact  .thumbnailItem.draggable .itemWrapper {
    padding-top: 24px;
}

/** Card */
.horizontal .thumbnailItem.draggable .gripper {
    height: 100%;
    width: 20px;
    right: auto;
    bottom: 0;
}

/** compact */
.thumbnailItem.draggable .gripper .icon16 {
    transform: rotate(90deg);
    opacity: 0.2;
    display: block;
    width: 100%;
    margin-top: -2px;
}

/** Card */

.horizontal .thumbnailItem.draggable .gripper .icon16 {
    transform: rotate(0);
    position: absolute;
    margin-top: -8px;
    top: 50%;
}

.thumbnailItem.dragging .itemWrapper {
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);    
}

/* End drag-drop styles */

.compact .thumbnailItem.draggable .addSelCont,
.compact .thumbnailItem.draggable .addRemoveItem,
.compact  .thumbnailItem.draggable .itemSection .secondarySection,
.compact .thumbnailItem.draggable .thumbnailSection.secondarySection {
    top: 20px !important;
}
.compact .thumbnailItem.draggable .thumbnailSection.imageSection {
    margin-top: 10px;
}

.horizontal .thumbnailItem.draggable .addSelCont {
    left: 24px;
}

.compact .thumbnailItem.draggable .thumbnailSection.imageSection {
    margin-top: 10px;
}

.horizontal  .thumbnailItem.draggable .itemWrapper {
    padding-left: 45px;
}


.compact .smallImage .missingImagePlaceholder, .horizontal .smallImage .missingImagePlaceholder {
    max-width: 32px;
    max-height: 32px;
}


.thumbnailImg .missingImagePlaceholder.miGeneric {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/image.png');
}

.thumbnailImg .missingImagePlaceholder.miAppointment {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/appointment.png');
}

.thumbnailImg .missingImagePlaceholder.miAsset {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/asset.png');
}

.thumbnailImg .missingImagePlaceholder.miAward {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/award.png');
}

.thumbnailImg .missingImagePlaceholder.miBlankDocument {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/blankdocument.png');
}

.thumbnailImg .missingImagePlaceholder.miBusiness {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/business.png');
}

.thumbnailImg .missingImagePlaceholder.miClock {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/clock.png');
}

.thumbnailImg .missingImagePlaceholder.miCogs {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/cogs.png');
}

.thumbnailImg .missingImagePlaceholder.miContactDetails {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/contactdetails.png');
}

.thumbnailImg .missingImagePlaceholder.miDocument {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/document.png');
}

.thumbnailImg .missingImagePlaceholder.miEmail {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/email.png');
}

.thumbnailImg .missingImagePlaceholder.miEngagement {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/engagement.png');
}

.thumbnailImg .missingImagePlaceholder.miExcel {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/excel.png');
}

.thumbnailImg .missingImagePlaceholder.miFax {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/fax.png');
}

.thumbnailImg .missingImagePlaceholder.miFinancialDocument {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/financialdocument.png');
}

.thumbnailImg .missingImagePlaceholder.miFolder {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/folder.png');
}

.thumbnailImg .missingImagePlaceholder.miImage {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/image.png');
}

.thumbnailImg .missingImagePlaceholder.miImageMissing {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/imagemissing.png');
}

.thumbnailImg .missingImagePlaceholder.miImportFile {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/importfile.png');
}

.thumbnailImg .missingImagePlaceholder.miInvoice {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/invoice.png');
}

.thumbnailImg .missingImagePlaceholder.miLetter {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/letter.png');
}

.thumbnailImg .missingImagePlaceholder.miList {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/list.png');
}

.thumbnailImg .missingImagePlaceholder.miLocation {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/location.png');
}

.thumbnailImg .missingImagePlaceholder.miMail {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/mail.png');
}

.thumbnailImg .missingImagePlaceholder.miMan {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/man.png');
}

.thumbnailImg .missingImagePlaceholder.miManAndWoman {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/manandwoman.png');
}

.thumbnailImg .missingImagePlaceholder.miMap {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/map.png');
}

.thumbnailImg .missingImagePlaceholder.miMen {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/men.png');
}

.thumbnailImg .missingImagePlaceholder.miNote {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/note.png');
}

.thumbnailImg .missingImagePlaceholder.miPDF {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/pdf.png');
}

.thumbnailImg .missingImagePlaceholder.miPeople {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/people.png');
}

.thumbnailImg .missingImagePlaceholder.miPerson {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/person.png');
}

.thumbnailImg .missingImagePlaceholder.miPhone {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/phone.png');
}

.thumbnailImg .missingImagePlaceholder.miPreview {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/preview.png');
}

.thumbnailImg .missingImagePlaceholder.miProduct {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/product.png');
}

.thumbnailImg .missingImagePlaceholder.miPurchaseOrder {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/purchaseorder.png');
}

.thumbnailImg .missingImagePlaceholder.miReceipt {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/receipt.png');
}

.thumbnailImg .missingImagePlaceholder.miReport {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/report.png');
}

.thumbnailImg .missingImagePlaceholder.miRequest {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/request.png');
}

.thumbnailImg .missingImagePlaceholder.miSpatial {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/spatial.png');
}

.thumbnailImg .missingImagePlaceholder.miSpreadsheet {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/spreadsheet.png');
}

.thumbnailImg .missingImagePlaceholder.miSupplier {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/supplier.png');
}

.thumbnailImg .missingImagePlaceholder.miSuppliers {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/suppliers.png');
}

.thumbnailImg .missingImagePlaceholder.miTask {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/task.png');
}

.thumbnailImg .missingImagePlaceholder.miText {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/text.png');
}

.thumbnailImg .missingImagePlaceholder.miTimesheet {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/timesheet.png');
}

.thumbnailImg .missingImagePlaceholder.miTrophy {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/trophy.png');
}

.thumbnailImg .missingImagePlaceholder.miUnknown {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/unknowndocument.png');
}

.thumbnailImg .missingImagePlaceholder.miWoman {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/woman.png');
}

.thumbnailImg .missingImagePlaceholder.miWomen {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/women.png');
}

.thumbnailImg .missingImagePlaceholder.miWordDoc {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/worddoc.png');
}

.thumbnailImg .missingImagePlaceholder.miWorkflow {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/workflow.png');
}

.thumbnailImg .missingImagePlaceholder.miWorksheet {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/128/entities/worksheet.png');
}

/*ICON AS LABEL*/

.iconLabel.icon.warning:before { content: "\E135"; color: #EAA000; }
.iconLabel.icon.error:before { color: #D10000; }
.iconLabel.icon.homePhone:before { content: "\E202"; }
.iconLabel.icon.business:before { content: "\E217"; }
.iconLabel.icon.contactPerson:before { content: "\E218"; }
.iconLabel.icon.engagement:before { content: "\E204"; }
.iconLabel.icon.sharedItem:before { content: "\E167"; }
.iconLabel.icon.export:before { content: "\E225"; }
.iconLabel.icon.date:before { content: "\E014"; }
.iconLabel.icon.time:before { content: "\E068"; }
.iconLabel.icon.dateTime:before { content: "\E191"; }
.iconLabel.icon.role:before { content: "\E229"; }
.iconLabel.icon.saasRelease:before { content: "\E397"; }
.iconLabel.icon.id:before { content: "\E358"; }


/* IMAGE SECTION ELEMENTS */

.imageSection .thumbnailImg {
    float: none;
    height: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    display: inline-block;
}

/* COMMON */

.compact .itemWrapper {
    background-color: #fff;
    position: relative;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    box-sizing: border-box;
}

.contact .itemWrapper {
    padding: 11px 16px;
}

.bulkActionMode.compact .noImage .itemWrapper {
    padding-left: 28px;
}

.horizontal .itemWrapper {
    border-bottom: solid 1px #e6e6e6;
    padding: 8px 0 8px 10px;
}

.horizontal .thumbnailItem.showsDetailsPane .itemWrapper,
.horizontal .thumbnailItem.itemClickable .itemWrapper {
    padding-right: 26px;
    padding-right: 16px;
}

.horizontal.bulkActionMode .itemWrapper, .contact.bulkActionMode .itemWrapper,
.thumbnailViewControl.viewSelectorMode .thumbnailItem .itemWrapper{
    padding-left: 26px;
}

.compact .hasImage .itemWrapper:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    min-width: 90px;
    visibility: visible;
}

.compact .itemWrapper:before {
    width: 100%;
    height: 188px;
}

.compact .smallImage .itemWrapper:before {
    height: 52px;
}

.compact .mediumImage .itemWrapper:before {
    height: 84px;
}

/*--thumbnailSection spacing after indentity section--*/


.thumbnailSection.mainSection > .thumbnailSection:not(.identSection) {
    margin-top: 5px;
}

.thumbnailSection.mainSection > .thumbnailSection:first-child {
    margin-top: 0;

}

.thumbnailSection.mainSection > .thumbnailSection.nonStacked .thumbnailSection,
.thumbnailSection.nonStacked > .thumbnailSection {
    float: left;
    box-sizing: border-box;
}

.compact .thumbnailItem .thumbnailSection.imageSection,
.compact .thumbnailItem .thumbnailSection.mainSection,
.compact .thumbnailItem .thumbnailSection.tagActionsSection  {
    display: block;
    float: none;
}

.compact .thumbnailItem .thumbnailSection.imageSection {
    text-align: center;
    height: 168px;
    line-height: 168px;
    margin-bottom: 20px;
}

.compact .thumbnailItem.smallImage .thumbnailSection.imageSection {
    text-align: left;
    height: 32px;
    line-height: 32px;
    margin-bottom: 20px;
}

.compact .thumbnailItem.mediumImage .thumbnailSection.imageSection {
    text-align: left;
    height: 64px;
    line-height: 64px;
    margin-bottom: 20px;
}

.compact.bulkActionMode .thumbnailItem.smallImage .thumbnailSection.imageSection,
.compact.bulkActionMode .thumbnailItem.mediumImage .thumbnailSection.imageSection {
    margin-left:20px
}



/*--Image Section--*/

.horizontal .thumbnailSection.imageSection {
    float: left;
    max-height: 150px;
    min-height: 67px;
    position: relative;
    z-index: 1;
    padding: 0;
    text-align: center;
}



.horizontal .smallImage .thumbnailSection.imageSection {
    width: 32px;
    text-align: center;
    min-height: 32px;
}

.horizontal .mediumImage .thumbnailSection.imageSection {
    width: 64px;
    text-align: center;
    min-height: 64px;
}


/*--for Thumbnail View image--*/

.compact .thumbnailSection .thumbnailImg {
    position: relative;
    width:auto;
    max-height: 168px;
    line-height: 168px;
    height: auto;
    vertical-align: middle;
    margin: 0 auto;
}



.compact .thumbnailItem.smallImage .thumbnailImg {
    max-height: 32px;
    line-height: 32px;
}

.compact .thumbnailItem.mediumImage .thumbnailImg {
    max-height: 64px;
    line-height: 64px;
}

.horizontal .imageSection .thumbnailImg {
    line-height: 110px;
}

.horizontal .smallImage .imageSection .thumbnailImg {
    line-height: 32px;
}

.horizontal .mediumImage .imageSection .thumbnailImg {
    line-height: 64px;
}

.horizontal .imageSection .thumbnailImg img {
    max-width: 110px;
    max-height: 110px;
    vertical-align: top;
}

.horizontal .smallImage .imageSection .thumbnailImg img {
    max-width: 32px;
    max-height: 32px;
}

.horizontal .mediumImage .imageSection .thumbnailImg img {
    max-width: 64px;
    max-height: 64px;
}



.compact .imageSection .thumbnailImg img {
    max-width: 168px;
    max-height: 168px;
}

.compact .smallImage .imageSection .thumbnailImg img {
    max-width: 32px;
    max-height: 32px;
}

.compact .mediumImage .imageSection .thumbnailImg img {
    max-width: 64px;
    max-height: 64px;
}


.horizontal .thumbnailSection.imageSection .editorLabel {
    float: none;
}

.horizontal .thumbnailSection.imageSection .statusField,
.horizontal .thumbnailSection.imageSection .editorField {
    display: inline-block;
    vertical-align: top;
}




/*--Section offset when there is an image--*/


.horizontal .hasImage.smallImage .thumbnailSection.mainSection, 
.horizontal .hasImage.smallImage .tagActionsSection {
    margin-left: 42px;
}

.horizontal .hasImage.mediumImage .thumbnailSection.mainSection, 
.horizontal .hasImage.mediumImage .tagActionsSection {
    margin-left: 74px;
}


.dataFieldContainer, 
.inputFieldContainer {
    padding: 2px 0;
    padding-right: 5px;
    box-sizing: border-box;
}

.thumbnailItem .btnFldContainer .dataFieldContainer
{
    padding: 0;    
}

.thumbnailItem .editorField {
    color: #656565;
}

.thumbnailItem .editorField input[type="checkbox"] {
    height: 16px;
    vertical-align: top;
}


.thumbnailItem .editorLabel > label, 
.thumbnailItem .editorField, 
.thumbnailItem .editorField .readonlyTextBoxSpan, 
.hoverViewContainer .thumbnailSection .editorLabel > label, 
.hoverViewContainer .thumbnailSection .editorField, 
.hoverViewContainer .thumbnailSection .editorField .readonlyTextBoxSpan {
    width: auto;
    padding: 0;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border: none;
}

.thumbnailItem .editorLabel > label {
    font-size: 0.9em;
    font-weight: 600;
}

.thumbnailItem  .statusField .editorLabel > label {
    font-size: inherit;
}

.statusField .editorLabel > label {
    font-size: inherit;
}

.thumbnailItem .btnFldContainer {
    vertical-align: top;
}

.thumbnailItem button.btnFldContainer .editorField {
    display: block;
}

.thumbnailSection > .dataFieldContainer,
.thumbnailSection > .inputFieldContainer {
    display: inline-block;
    vertical-align: top;
    float: left;
}

.thumbnailSection.floatRight,
.thumbnailSection > .dataFieldContainer.floatRight,
.thumbnailSection > .inputFieldContainer.floatRight {
    float: right;
}

.thumbnailSection.stacked > .thumbnailSection, 
.thumbnailSection.stacked > .dataFieldContainer,
.thumbnailSection.stacked > .inputFieldContainer {
    display: block;
    float: none;
}

/*-Float overrides-*/

.thumbnailSection.floatRight, 
.dataFieldContainer.floatRight,
.inputFieldContainer.floatRight {
    float: right !important;
}

.thumbnailSection.floatLeft, 
.dataFieldContainer.floatLeft,
.inputFieldContainer.floatLeft {
    float: left !important;
}



.thumbnailSection .dataFieldContainer.stacked .editorLabel,
.thumbnailSection .dataFieldContainer.stacked .editorField,
.thumbnailSection .inputFieldContainer.stacked .editorLabel,
.thumbnailSection .inputFieldContainer.stacked .editorField {
    width: auto;
    display: block;
    float:none;
}

.thumbnailSection .dataFieldContainer {
    overflow: hidden;
}

.mainSection .dataFieldContainer.headingField,
.identSection .dataFieldContainer,
.secondarySection .dataFieldContainer.amountField {
    padding-top:0;
    padding-bottom: 0;
}

.dataFieldContainer.amountField {
    float: right;
    text-align: right;
}

.dataFieldContainer.amountField .editorField span {
    font-size: 1.3em;
    font-weight: 600;
}

.amountField .editorField,
.headingField .editorField {
    color: inherit;
}

.dataFieldContainer.statusField .editorField, 
.dataFieldContainer.statusField .editorLabel {
    color: inherit;
}

.thumbnailSection .dataFieldContainer .editorLabel,
.thumbnailSection .inputFieldContainer .editorLabel {
    float: left;
    width: auto;
    max-width: inherit;
    padding: 0 5px 0 0;
}


/*-Dropdown handle-*/

.thumbnailAction .dropdownControl .handle {
    margin-left: 5px;
}

.thumbnailAction .dropdownControl .handle:first-child {
    margin-left: 0;
}


/*-Navigation chevron-*/

.horizontal .thumbnailItem .navigatorContainer {
    left: auto;
    height: auto;
}

.navigatorContainer {
    float: right;
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 16px;
    overflow: hidden;
}


.navigatorContainer .detailsNavigator,
.navigatorContainer .actionNavigator {
    position: absolute;
    background-image: none;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 0.35;
/*
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
*/
}


/*-Button group-*/

.thumbnailItem .buttonGroup button {
    float: left;
    margin-left: -1px;
    height: 30px;
    border-radius: 0;
}

.thumbnailItem .buttonGroup button:hover {
    position: relative;
    z-index: 1;
}

.thumbnailItem .buttonGroup .btnFldContainer.firstVisible{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-left: 0;
}

.thumbnailItem .buttonGroup .btnFldContainer.lastVisible{
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.thumbnailItem .buttonGroup > *:last-child {
    float: none;
}



.secondarySection .thumbnailSection.clearRight {
    clear: right;
}


.horizontal .thumbnailSection.secondarySection.stacked > .thumbnailSection {
    float: right;
    clear: right;
} 

.horizontal .thumbnailSection.secondarySection .thumbnailSection.nonStacked > .thumbnailSection {
    float: left;
}

/*--IdentSection--*/

.thumbnailSection.identSection .dataFieldContainer .editorLabel > label {
    font-weight: normal;
    color: #656565;
}

.identSection .editorField  {
    font-size: 0.9em;
}


/*-field separator-*/

.thumbnailSection.showFieldsSeparator .dataFieldContainer {
    border-left: 1px solid #ccc;
    padding-left: 5px;
    padding-right: 5px;
}

.thumbnailSection.showFieldsSeparator > .dataFieldContainer:first-child, 
.thumbnailSection.showFieldsSeparator > .isEmptyOrZero.dataFieldContainer:first-child + .dataFieldContainer, 
.thumbnailSection.showFieldsSeparator > .dataFieldContainer:first-child[style*="display\: none\;"] + .dataFieldContainer {
    border-left: none;
    padding-left: 0;
}

.thumbnailSection .dataFieldContainer {
    max-width: 100%;
}

.thumbnailSection .dataFieldContainer.hideIfEmptyOrZero.isEmptyOrZero,
.thumbnailSection .richTextControlContainer.hideIfEmptyOrZero.isEmptyOrZero,
.thumbnailSection .btnFldContainer.hideIfEmptyOrZero.isEmptyOrZero {
        display: none!important;
}

.thumbnailViewControl.dynamicLayout .thumbnailItem .thumbnailSection.dynamicFieldsContainer,
.thumbnailBasedControl .thumbnailItem .thumbnailSection.dynamicFieldsContainer{
    overflow: hidden;/*make sure the dynamic fields are positioned nicely*/
} 

.thumbnailViewControl.dynamicLayout .thumbnailItem .thumbnailSection.dynamicFieldsContainer .dataFieldContainer,
.thumbnailBasedControl .thumbnailItem .thumbnailSection.dynamicFieldsContainer .dataFieldContainer{
    width: 300px;
} 

.thumbnailViewControl.dynamicLayout .thumbnailItem .thumbnailSection.dynamicFieldsContainer .dataFieldContainer .editorLabel,
.thumbnailBasedControl .thumbnailItem .thumbnailSection.dynamicFieldsContainer .dataFieldContainer .editorLabel{
    width: auto!important;
} 

.thumbnailViewControl.dynamicLayout .thumbnailSection.hasOnlyDataFields.nonStacked,
.thumbnailBasedControl .thumbnailSection.hasOnlyDataFields.nonStacked{
    overflow: hidden;
}

.thumbnailViewControl.dynamicLayout .textBoxControl.picklistControl .editorField,
.thumbnailViewControl.dynamicLayout .thumbnailSection,
.thumbnailBasedControl .textBoxControl.picklistControl .editorField,
.thumbnailBasedControl .thumbnailSection{
    overflow: visible;
}

.secondarySection .textBoxControl.picklistControl .editorField {
    display: inline-block;
}


.thumbnailSection.mainSection > .thumbnailSection.spaceFieldsEvenly, .thumbnailSection.secondarySection > .thumbnailSection.spaceFieldsEvenly, 
 .thumbnailItem .thumbnailSection.mainSection > .thumbnailSection.spaceFieldsEvenly > .thumbnailSection {
    margin-right: 0;
}

.thumbnailSection.mainSection > .thumbnailSection.spaceFieldsEvenly > .thumbnailSection {
     box-sizing: border-box;
 }


.horizontal .thumbnailSection.mainSection, 
.horizontal .thumbnailSection.tagActionsSection {
    display: block;
    float: none;
}

.thumbnailSection.tagActionsSection {
    padding-top: 10px;
    box-sizing: border-box;
}

.compact .thumbnailItem.customHeight .tagActionsSection {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.hasTags .thumbnailSection.tagActionsSection {
    padding-top: 10px;
}

.hasTags .thumbnailSection.tagActionsSection .tagSection{
    position: relative;
    display: table;
}

/*--Minimise height--*/

.minimizeHeight .thumbnailSection.tagActionsSection {
    margin-top: -18px;
    padding-top: 0;
}

.horizontal .minimizeHeight .thumbnailSection.tagActionsSection {
    min-height: 20px;
}

.horizontal .hasTags .thumbnailSection.tagActionsSection,
.compact.detailsPanelVisible .minimizeHeight .thumbnailSection.tagActionsSection  {
    margin-top: 0;
}

.tagActionsSection {
    white-space: normal;
    clear: right;
}

.compact .tagActionsSection {
    clear: left;
}



.thumbnailViewControl.dynamicLayout .dataFieldContainer.multiline .editorField {
    white-space: normal;
}

/*it seems with italics font the right side gets truncated - this ensures it doesn't without having to use padding-right*/
.thumbnailViewControl.dynamicLayout .dataFieldContainer.dataFldItalic span:after,
.thumbnailBasedControl .dataFieldContainer.dataFldItalic span:after{
    content: "";
    float: right;
    border: solid 1px transparent;
}

/*--Common tag styles--*/

.thumbnailItem .tagItem.noCode .tagDesc {
    border-left-width: 1px;
    background-color: #a5a5a5;
    color: #FFF;
    border-color: transparent;
}

.thumbnailItem .tagItem .tagDesc {
    border-width: 1px;
    border-style: solid;
    border-left-width: 0px;
    padding: 0 5px;
}

.thumbnailItem .tagItem .tagDesc, .tagCode {
    line-height: 16px;
}

.thumbnailItem .tagItem .tagCode {
    color: white;
    height: 16px;
    vertical-align: top;
    text-transform: uppercase;
    padding: 0 3px;

    float: left;
}

.thumbnailItem .tagItem .tagDesc {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #fff;
}

.thumbnailItem .tagItem:hover {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

.thumbnailItem .tagItem {
    display: inline-block;
    margin: 0 5px 4px 0;
    font-size: 0.9em;
}

.thumbnailItem .tagSection .tagContainerUser, .thumbnailItem .tagSection .tagContainerProduct
.thumbnailItem .tagSection .tagContainer {
    display: inline-block;
}

.thumbnailItem .tagSection .tagItem.countTag, .thumbnailItem .tagSection .tagItem.categoryTag {
    color: #656565;
    background-color: rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

.thumbnailItem .tagSection .tagItem.countTag:hover, .thumbnailItem .tagSection .tagItem.categoryTag:hover {
    background-image: none;
}

.thumbnailItem .tagSection .tagItem.countTag .tagCode, .thumbnailItem .tagSection .tagItem.countTag .tagDesc, 
.thumbnailItem .tagSection .tagItem.categoryTag .tagCode, .thumbnailItem .tagSection .tagItem.categoryTag .tagDesc {
    background: none;
    border: solid 1px transparent;
    color: inherit;
    padding: 0 3px;
}

.thumbnailItem .tagSection .tagItem.countTag .tagDesc {
    font-weight: bold;
}

.thumbnailItem .tagSection .tagItem.categoryTag .tagDesc {
    display: none;
}


/*--Status Field--*/

.dataFieldContainer.statusField {
    color: #FFF;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    padding: 0px 5px;
    text-transform: uppercase;
    line-height: 16px;
    background-color: #a5a5a5;
    background-color: rgba(0, 0, 0, 0.35);
    margin-bottom: 2px;
    margin-right: 5px;
    border:1px solid white;
}

/*-Predefined status colours---*/

.dataFieldContainer.statusField.statusSuccess,
.dataFieldContainer.statusField.statusApproved,
.dataFieldContainer.statusField.statusNotImportant,
.dataFieldContainer.statusField.statusGreen
 {
    color: #394a1e;
    background-color: #e2ead1;
}

.dataFieldContainer.statusField.statusSuccess.lightOnDark,
.dataFieldContainer.statusField.statusApprovedDrk.lightOnDark,
.dataFieldContainer.statusField.statusNotImportantDrk.lightOnDark,
.dataFieldContainer.statusField.statusGreen.lightOnDark {
    color: #fff;
    background-color: #74bd00; 
}

.dataFieldContainer.statusField.statusUrgent, 
.dataFieldContainer.statusField.statusError, 
.dataFieldContainer.statusField.statusRejected,
.dataFieldContainer.statusField.statusRed {
    color: #961a12;
    background-color: #eccdca;
}

.dataFieldContainer.statusField.statusUrgent.lightOnDark, 
.dataFieldContainer.statusField.statusError.lightOnDark, 
.dataFieldContainer.statusField.statusRejected.lightOnDark,
.dataFieldContainer.statusField.statusRed.lightOnDark {
    color: #fff;
    background-color: #E53327;
}

.dataFieldContainer.statusField.statusImportant, 
.dataFieldContainer.statusField.statusWarning, 
.dataFieldContainer.statusField.statusInProgress,
.dataFieldContainer.statusField.statusYellow {
    color: #744f00;
    background-color: #ffe398;
}

.dataFieldContainer.statusField.statusImportant.lightOnDark, 
.dataFieldContainer.statusField.statusWarning.lightOnDark, 
.dataFieldContainer.statusField.statusInProgress.lightOnDark,
.dataFieldContainer.statusField.statusYellow.lightOnDark {
    color: #fff;
    background-color: #ffc853;
}

.dataFieldContainer.statusField.statusProcessing,
.dataFieldContainer.statusField.statusOrange {
    color: #e05007;
    background-color: #fce2ce;
}

.dataFieldContainer.statusField.statusProcessing.lightOnDark,
.dataFieldContainer.statusField.statusOrange.lightOnDark {
    color: #fff;
    background-color: #f2661f;
}

.dataFieldContainer.statusField.statusPartialSuccess, 
.dataFieldContainer.statusField.statusSubmitted,
.dataFieldContainer.statusField.statusBlue {
    color: #325ea1;
    background-color: #c6dae8;
}

.dataFieldContainer.statusField.statusPartialSuccess.lightOnDark, 
.dataFieldContainer.statusField.statusSubmitted.lightOnDark,
.dataFieldContainer.statusField.statusBlue.lightOnDark {
    color: #fff;
    background-color: #325ea1;
}

.dataFieldContainer.statusField.statusDisabled, 
.dataFieldContainer.statusField.statusOnHold, 
.dataFieldContainer.statusField.statusInactive,
.dataFieldContainer.statusField.statusGray {
    color: #4b4b4b;
    background-color: #c7c7c7;
}

.dataFieldContainer.statusField.statusDisabled.lightOnDark, 
.dataFieldContainer.statusField.statusOnHold.lightOnDark, 
.dataFieldContainer.statusField.statusInactive.lightOnDark,
.dataFieldContainer.statusField.statusGray.lightOnDark {
    color: #fff;
    background-color: #c7c7c7;
}

.dataFieldContainer.statusField.statusPurple.lightOnDark {
    color: #fff;
    background-color: #660066;
}

.dataFieldContainer.statusField.statusPurple {
    color: #660066;
    background-color: #DBC3DB;
}

.dataFieldContainer.statusField.statusDarkBlue.lightOnDark {
    color: #fff;
    background-color: #000060;
}

.dataFieldContainer.statusField.statusDarkBlue {
    color: #000060;
    background-color: #C3C3DA;
}

.dataFieldContainer.statusField.statusTeal.lightOnDark {
    color: #fff;
    background-color: #1E5E6D;
}

.dataFieldContainer.statusField.statusTeal {
    color: #1E5E6D;
    background-color: #C9D9DD;
}

.dataFieldContainer.statusField.statusDarkGreen.lightOnDark {
    color: #fff;
    background-color: #00661A;
}

.dataFieldContainer.statusField.statusDarkGreen {
    color: #00430D;
    background-color: #96C09E;
}

/*--Colours for glyphs--*/

.dataFieldContainer.glyph.success:before, .dataFieldContainer.glyph.green:before {
    color: #74bd00;
}

.dataFieldContainer.glyph.partialSuccess:before, .dataFieldContainer.glyph.blue:before {
    color: #325ea1; 
}

.dataFieldContainer.glyph.processing:before, .dataFieldContainer.glyph.orange:before {
    color: #f2661f;
}

.dataFieldContainer.glyph.error:before, .dataFieldContainer.glyph.red:before {
    color: #E53327;
}
.dataFieldContainer.glyph.darkRed:before {
    color: #961a12;
}
.dataFieldContainer.glyph.warning:before, .dataFieldContainer.glyph.yellow:before {
    color: #ffc853;
}
.dataFieldContainer.glyph.purple:before {
    color: #660066;
}
.dataFieldContainer.glyph.darkBlue:before {
    color: #000060;
}
.dataFieldContainer.glyph.teal:before {
    color: #1E5E6D;
}
.dataFieldContainer.glyph.darkGreen:before {
    color: #00661A;
}
.dataFieldContainer.glyph.gray:before {
    color: #c7c7c7;
}
.dataFieldContainer.glyph.darkGray:before {
    color: #4b4b4b;
}


/*--Dynamic Summary Container--*/

.thumbnailItem .summaryContainer {
    position: relative;
    display: inline-block;
    float: right;
    max-width: 100%;
}

.thumbnailItem .summaryContainer .thumbnailAction {
    padding-bottom: 2px;
    float: left;
}


/*--Quantity Container--*/

.horizontal .summaryContainer .quantityContainer {
    float: left;
}

.compact .summaryContainer .quantityContainer {
    float:none;
    text-align: right;
    margin-bottom: 5px;
}

.summaryContainer .quantityContainer {
    padding-bottom: 0;
}

.horizontal .summaryContainer .quantityContainer {
    padding-top: 0;
}

.horizontal .thumbnailAction {
    float: left;
    margin-top: 0;
}



.horizontal .thumbnailAction, .horizontal .buttonGroup {
    padding-right: 5px;
}

/*--Hide actions when details panel shown--*/

.hideActions .summaryContainer, .hideActions .thumbnailItem .formActions, .hideActions .thumbnailAction > .favouriteButton {
    display: none;
}


/********************************************
    Predefined field types
**********************************************/

.hasImage .dataFieldContainer.headingField {
    margin-left: 0;
}

.compact .dataFieldContainer.descriptionField {
    height: 32px;
}

.horizontal .dataFieldContainer.descriptionField {
    min-height: 16px;
}

.dataFieldContainer.headingField .editorField span {
    font-weight: 600;
    font-size: 1.2em;
    line-height: 20px;
    font-family: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.dataFieldContainer.headingField.doubleHeight .editorField span {
    white-space: normal;
}

.dataFieldContainer.subHeadingField .editorField span {
    font-weight: 600;
    font-size: 1.1em;
}

.thumbnailViewControl.dynamicLayout .defaultCol .editorField {
    color: inherit;
}

.thumbnailViewControl .cke_top, .thumbnailViewControl .cke_bottom {
    display: none;
}

.thumbnailViewControl .cke, .thumbnailViewControl .cke_inner, .thumbnailViewControl .cke_contents, .thumbnailViewControl iframe {
    border: 0;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}


/********************************************************************
        THUMBNAIL ICON GLYPHS SECTION
*********************************************************************/

.fieldElement.icon .editorField {
    padding-right: 10px;
}

.stacked > .fieldElement.icon .editorField {
    padding-right: 0;
}

.fieldElement .iconLabel {
    float: left;
    padding-right: 5px;
}

.fieldElement.hasBkgd .iconLabel {
    padding-left: 5px;
}

.fieldElement.icon:before {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;

    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.thumbnailViewControl.dynamicLayout .thumbnailItem .nativeLink {
    text-decoration: none;
}

.thumbnailItem .tagSection {
    height: 22px;
}

.thumbnailItem .tagSection.inProcess {
    padding-right: 20px; /* make thead section a little bit narrower so when the thumbnail scrollbar is displayed and thumbnailItem get narrower the More button won't jump down' */
}

.thumbnailItem .tagSection.inProcess .moreTags .moreCount{
    padding-left: 30px; /*while in process, make sure the moreCount span is a little bit wider (3 digits) so when we update the text with the number of items, the more button won't jump down */
}

.thumbnailViewControl .thumbnailItem .moreTags{
    position: relative;
    display: inline-block;
    vertical-align: top;
    /*border-width: 1px;
    border-style: solid;*/
    font-size: 0.9em;
}

.thumbnailItem .moreTags .moreCount{
    border-style: solid;
    border-width: 1px;
}

.thumbnailItem .moreTags.noTags{
    display: none;
}

.thumbnailItem .moreTags .icon16 {
    color: #ffffff;
    background: #a5a5a5;
    border: solid 1px transparent;
    opacity: 0.75;
}

.thumbnailItem .moreTags:hover >.handle > .icon16, .thumbnailItem .moreTags.droppedDown >.handle > .icon16 {
    opacity: 1;
}

.thumbnailItem .moreTags .moreCount{
    padding: 0 5px 0 5px;
    line-height: 16px;
    vertical-align: top;
    background-color: #fff;
    border-left: none;
    display: inline-block;
}

.thumbnailItem .moreTags .dropdownPanel {
    padding: 5px 5px 0 5px;
    max-height: 300px;
    min-width: 150px;
    overflow-y:auto;
    background-color: #fff;
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.thumbnailItem .moreTags .dropdownPanel .tagItem {
    margin-right: 0;
    float: left;
    clear: left;
}

/*favourites*/
.thumbnailViewer .thumbnailItem.favEnabled .thumbnailAction{
    float: right;
}

.thumbnailItem .favouriteButton {
    margin-right: 10px;
    float: left;
}

.thumbnailAction > .favouriteButton + .dropDownControlContainer, .compact .favouriteButton + .quantityContainer {
    float: left;
}

.compact .favouriteButton + .quantityContainer {
    padding-top: 0;
    padding-bottom: 0;
}

.hoverViewContainer.imageMissing .thumbnailImg .thumbnailLargeImg,
.hoverViewContainer.imageMissing .imageLoading,
.hoverViewContainer .thumbnailImg .missingImagePlaceholder,
.hoverViewContainer .imageLoading {
    display: none;
}

.hoverViewContainer.imageMissing .thumbnailImg .missingImagePlaceholder {
    display: block;
    position: relative;
    margin-left: 50%;
    left: -32px;
    height: 64px;
    width: 64px;
}

.hoverViewContainer.loadingHoverImage .imageLoading{
    display: block;
}

.hoverViewContainer.loadingHoverImage .thumbnailImg,
.hoverViewContainer.loadingHoverImage .thumbnailContent {
    display: none;
}


.thumbnailItem .imageSection .glyphField{
    padding: 0;
}

.thumbnailItem .imageSection .glyphField .editorField{
    border-radius: 50%;
    line-height: normal;
}

.thumbnailItem .imageSection .glyphField .glyphValue{
    display: block;
}

.thumbnailItem.smallImage .imageSection .glyphField .glyphValue{
    line-height: 24px;
    font-size: 20px;
    padding: 4px;
    width: 24px;
    height: 24px;
}

.thumbnailItem.mediumImage .imageSection .glyphField .glyphValue{
    line-height: 48px;
    font-size: 40px;
    padding: 8px;
    width: 48px;
    height: 48px;
}

.thumbnailItem.normalImage .imageSection .glyphField .glyphValue{
    line-height: 80px;
    font-size: 56px;
    padding: 8px;
    width: 80px;
    height: 80px;
}

.thumbnailViewControl.dynamicLayout .addSelCont,
.thumbnailViewControl.dynamicLayout .addRemoveItem  {
    position: absolute;
    top: 10px;
    left: 5px;
    z-index: 1;
}

.thumbnailViewControl 
{
    display: none;
    height: 100%;
    position: relative;
}

.thumbnailViewControl .actionBar {
    border-bottom: 1px solid #e6e6e6;
    height: 30px;
    line-height: 30px;
    padding-left: 21px;
    display: none;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    height: 0;
}

.thumbnailViewControl.dynamicLayout .actionBar {
    padding-left: 5px;
}

.thumbnailViewControl.hasSelectedItems .actionBar,
.thumbnailViewControl.actionBarAlwaysVisible .actionBar {
    display: block;
    height: 30px;
    padding-left: 5px;
}

.thumbnailViewControl .actionBar .chkBselAll {
    vertical-align: middle;
}

.thumbnailViewControl .actionBar label {
    vertical-align: middle;
    margin-left: 10px;
}

.thumbnailViewControl .actionBar label.lblSelAll {
    display: inline-block;
    margin-left: 0;
}

/********************************************************************
        Thumbnail container section
*********************************************************************/
.thumbnailViewContainer 
{
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: top 0.1s ease-in-out;
    transition: top 0.1s ease-in-out;
}


.thumbnailViewControl.hasActionBar.hasSelectedItems .thumbnailViewContainer, .thumbnailViewControl.hasActionBar.actionBarAlwaysVisible .thumbnailViewContainer {
    top: 31px;

}

.thumbnailViewControl .thumbnailItemsContainer 
{
    margin: 0 auto;
}

.thumbnailViewControl.compact .thumbnailItemsContainer, .thumbnailViewControl.thumbnailViewContact .thumbnailItemsContainer {
    padding: 5px;
}

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

/********************************************************************
        Thumbnail item section
*********************************************************************/
.quantityContainer .editorField {
    overflow: visible;    
}

.thumbnailItem .controlContainer {
    padding: 0;
    position: static;
}

.thumbnailItem {
    position: relative;
}

.thumbnailItem .addToSelection {
    padding: 0;
    width: 16px;
    height: 16px;
}

.thumbnailImg {
    display: inline-block;
    line-height: 110px;
}

.horizontal .thumbnailSection.imageSection {
    width: 110px;
}

.quantityContainer > * {
    display: inline-block;
    vertical-align: middle;
}

/*---------------------------------------------------------------------?*/

.thumbnailItem .addRemoveItem:hover {
    cursor: pointer;
}

.thumbnailViewControl .thumbnailItem .addRemoveItem.removeItem .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/minus.png');
    display: block;
}

.thumbnailViewControl .thumbnailItem .addRemoveItem.addItem .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plus.png');
    display: block;
} /*---------------------------------------------------------------------?*/



.detailsNavigator .icon16,
.actionNavigator .icon16 {
    display:inline-block;
}

.detailsNavigator .icon16:before,
.actionNavigator .icon16:before {
    content: "\E061";
    font-size: 12px;
}

.detailsNavigator:hover,
.actionNavigator:hover {

    background-color: rgba(0, 0, 0, 0.02);
}

.thumbnailItem.selected .detailsNavigator:hover,
.thumbnailItem.selected .actionNavigator:hover {
    background-color: transparent;
}

.thumbnailViewControl .thumbnailContent {
    width: auto;
    overflow: hidden;
}

/********************************************************************
        TILE VIEW COMMON
*********************************************************************/


.thumbnailViewControl.compact .thumbnailSection a 
{
    display: block;
    line-height: 16px;
    /* un-comment this if you want the link to be displayed on one line with ... if it's too long'
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

.thumbnailViewControl.compact .thumbnailSection .subHeader,
.hoverViewContainer .thumbnailSection .subHeader
{
    display: inline-block;
    width: 100%!important; /*for compact view overwrite any width set by JavaScript*/
}


/********************************************************************
        COMMON
*********************************************************************/

.thumbnailImg {
    text-align: center;
    vertical-align: middle;
}
.thumbnailItem .thumbnailImg img 
{
    max-height: 100%; 
    max-width: 100%;
    vertical-align: middle;
}

.thumbnailItem .thumbnailAction button .buttonLabel 
{
    float: none;
    display: inline-block!important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 115px;
}

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

.thumbnailAction .dropdownControl > .handle > .icon16:before {
    content: "\E002";
}

.thumbnailItem .thumbnailAction .dropdownControl button {
    border-radius: 3px;
}

.thumbnailAction .dropdownControl .defaultAction.primary:before {
    display: none;
}

.thumbnailAction .dropdownControl .dropdownPanel .menuLinks16 {
    max-height: 294px; /* space for 10 1/2 row actions - 1/2 is to indicate on iPad that the container is scrollable*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.thumbnailViewControl.dynamicLayout .thumbnailItem .thumbnailSection > .dataFieldContainer:last-child,
.thumbnailViewControl.dynamicLayout .thumbnailItem .thumbnailSection > .dataFieldContainer.lastVisibleField {
    float: none;
}

.thumbnailViewControl.dynamicLayout .thumbnailItem .mainSection .thumbnailSection > .dataFieldContainer.lastVisibleField.statusField {
    display: inline-block !important;
}


/********************************************************************
        DYNAMIC THUMBNAIL LAYOUT - CARD
*********************************************************************/

.compact .itemWrapper {
    margin: 10px;
}


.compact .thumbnailItem:hover {
    z-index: auto;
}

.thumbnailItem.showsDetailsPane:not(.selected):hover .itemWrapper {
    background-color: rgba(0, 0, 0, 0.05);
}

.showsDetailsPane .itemWrapper,
.thumbnailItem.itemClickable .itemWrapper {
    cursor: pointer;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

 .showsDetailsPane:not(.selected):hover .itemWrapper {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac60.png');
    background-repeat: repeat;
}

.compact .thumbnailItem {
    float: left;
    width: 238px;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}


.compact .thumbnailItem .itemWrapper {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
}

.compact .thumbnailItem:not(.selected):hover .itemWrapper {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac60.png');
    background-repeat: repeat;
}

.contact .thumbnailItem {
    float: left;
    width: 450px;
    margin: 0;
    box-sizing: border-box;
    border: solid 1px transparent;
}

.contact .itemWrapper {
    background-color: #fff;
    height: 249px;
    margin: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    position: relative;
}

/*--Media queries for thumbnailContainer column widths--*/

.mq-xsm .thumbnailItem  {
    float: none;
    width: auto;
}

.mq-sm .thumbnailItem {
    float: none;
    width: auto;
}

.compact .mq-xsm .thumbnailItem, 
.compact .mq-sm .thumbnailItem {
    max-width: 290px;
    margin: 0 auto;
}


.contact .mq-xsm .thumbnailItem, .contact .mq-sm .thumbnailItem {
    max-width: 470px;
    margin: 0 auto;
}



.mq-md .thumbnailItem {
    width: 50%;
}

.mq-lg .thumbnailItem {
    width: 33.333%;
}

.mq-xlg .thumbnailItem {
    width: 25%;
}

.mq-xxlg .thumbnailItem {
    width: 20%;
}

.mq-xxxlg .thumbnailItem {
    width: 16.666%;
}

.mq-xxxxlg .thumbnailItem {
    width: 14.285%;
}

.mq-xxxxxlg .thumbnailItem {
    width: 12.5%;
}

.contact .thumbnailItem.hasActions .tagActionsSection {
    float: none;
    display: block;
    padding: 0 16px;
}

.contact .thumbnailItem.hasActions .tagActionsSection .summaryContainer {
    float: right;
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.contact .thumbnailItem.hasActions .thbFld_Mobile {
    max-width: 300px;
}

.thumbnailViewControl.dynamicLayout.contact .thumbnailItem .thumbnailSection.imageSection {
    float: right;
    text-align: center;
    margin: 5px;
}

.contact .thumbnailItem .imageSection .thumbnailImg {
    line-height: 80px;
    height: 80px;
    width: 80px;
}

.contact .thumbnailItem .imageSection .thumbnailImg img {
    max-width: 80px;
    max-height: 80px;
    padding: 2px;
    background-color: #fff;
    border: solid 1px #e7e7e7;
}

/*For the time being hide the details panel navigator in contact view*/

.contact .thumbnailItem .navigatorContainer {
    display: none;
}

.contact .thumbnailItem .secondarySection {
    float: none;
    position: absolute;
    line-height: 16px;
    bottom: 17px;
    left: 15px;
    right: 181px
}

.contact .thumbnailItem .secondarySection > .statusField {
    border: none;
}

.contact .thumbnailItem .secondarySection .statusField {
    border-radius: 0;
    padding: 4px 16px;
    margin: 0;
}

.thumbnailItem .addSelCont {
    overflow: hidden;
}

.thumbnailViewControl label.addSelCont input, .thumbnailViewControl .actionBar .chkBselAll {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.thumbnailViewControl label.addSelCont input:focus {
    outline: none !important;
}

/*--Add to selection for checkbox--*/

.thumbnailItem .addSelCont:before, 
.thumbnailItem .actionBar .lblSelAll:before {
    margin: 8px 0;
}

.thumbnailItem .addSelCont:before {
    margin: 0;
    vertical-align: top;
    display: inline-block;
}

 .thumbnailViewControl .actionBar .lblSelAll:before {
     float: left;
     margin: 7px 5px 7px 0;
     line-height: 15px;
 }

.thumbnailItem .thumbnailSection.mainSection {
    min-height: 30px;
}

.horizontal .hasImage .thumbnailSection.mainSection, 
.horizontal .hasImage .tagActionsSection {
    margin-left: 120px;
}

.compact .thumbnailItem.showsDetailsPane .thumbnailSection.mainSection {
    margin-right: 20px;
    padding-right: 0;
}

/*--for Thumbnail view--*/

.compact .thumbnailItem.hasImage .navigatorContainer {
    margin-top: 5px;
    position: absolute;
    right: 0;
    top: 188px;
    height: auto;
}

.compact .thumbnailItem.hasImage.smallImage .navigatorContainer {
    top: 52px;
}

.compact .thumbnailItem.hasImage.mediumImage .navigatorContainer {
    top: 84px;
}

.compact .thumbnailItem .navigatorContainer {
    bottom: 52px;
}

.compact .thumbnailItem.hasTags .navigatorContainer {
    bottom: 82px;
}

.compact .thumbnailItem .navigatorContainer {
    height: auto;
    position: absolute;
    top: 5px;
    bottom: 48px;
    right: 0;
    width: 30px;
}

.compact .thumbnailSection.secondarySection {
    position: absolute;
    top: 5px;
    right: 0;
    padding: 0;
    padding-right: 5px;
    padding-left: 15px;
    background-color: #fff;
}

.compact .thumbnailSection.secondarySection .dataFieldContainer {
    margin-top: 2px;
}


/*--for Thumbail View--*/

.horizontal .tagActionsSection .tagSection {
    white-space: normal;
    display: table;
}

.thumbnailItem.selected .itemWrapper {
    background-color: #fff;
}

.hideActions .thumbnailItem:not(.hasTags) .thumbnailSection.tagActionsSection  {
    padding-top: 0;
}



.horizontal .tagActionsSection:before {
    content: "";
    display: block;
    height: 0;
}

 .thumbnailSection.mainSection > .thumbnailSection.spaceFieldsEvenly > .thumbnailSection {
     box-sizing: border-box;
 }

.thumbnailSection.mainSection .thumbnailSection.identSection {
    margin-top: 0;
    min-height: 14px;
}

.compact .thumbnailSection.mainSection .thumbnailSection.identSection > .dataFieldContainer {
    display: block;
    float: none;
    border-left: none;
}

.compact .dataFieldContainer {
    height: 16px;
    box-sizing: content-box;
}

.compact .dataFieldContainer.stacked {
    height: auto;
}

.compact .dataFieldContainer.headingField {
    height:20px
}

.compact .dataFieldContainer.doubleHeight {
    height:32px
}

.compact .dataFieldContainer.headingField.doubleHeight {
    height: 40px;/*the headingField has a line height of 20px and font is bigger */
}

.thumbnailItem .linkField {
    line-height: 16px;
}

.horizontal .thumbnailSection.secondarySection {
    position: relative;
    float: right;
    clear: right;
}

.contact .mainSection .dataFieldContainer.thbFld_SC_Country {
    padding: 0 0 14px 0;
}

.horizontal .secondarySection.stacked > .dataFieldContainer,
.horizontal .secondarySection.stacked > .inputFieldContainer  {
    clear: right;
    float: right;
}

/*--Dynamic Summary Container--*/

.detailsPanelVisible .hideActions.compact .summaryContainer .thumbnailAction {
    height: 0;
}

.compact .summaryContainer .thumbnailAction {
    -webkit-transition: all, 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.detailsPanelVisible .compact .customHeight .summaryContainer {
    margin-top: auto;
}



.summaryContainer .thumbnailAction {
    height: 30px;
}



.compact .thumbnailAction .dropdownControl button {
    max-width: 170px;
}

.horizontal .thumbnailAction button  {
    max-width: inherit;
}

.detailsPanelVisible .navigatorContainer .detailsNavigator {
    opacity: 0;
}

.showsDetailsPane:hover .navigatorContainer .detailsNavigator,
.thumbnailItem.itemClickable:hover .navigatorContainer .actionNavigator {
    opacity: 1;
    background: none;
}

.detailsPanelVisible .showsDetailsPane:hover .navigatorContainer .detailsNavigator {
    opacity: 0;
}

.navigatorContainer .detailsNavigator:hover,
.thumbnailItem.itemClickable .navigatorContainer .actionNavigator:hover,
.thumbnailItem.selected .navigatorContainer .detailsNavigator,
.thumbnailItem.selected .navigatorContainer .actionNavigator {
    opacity: 1;
}

.horizontal .thumbnailItem.selected .navigatorContainer .detailsNavigator, 
.horizontal .thumbnailItem.itemClickable.selected .navigatorContainer .actionNavigator, 
.compact .thumbnailItem.selected .navigatorContainer .detailsNavigator {
    opacity: 0;
/*
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}


.horizontal .thumbnailItem.selected .navigatorContainer {
    border-right-width: 3px;
    border-right-style: solid;
}


.thumbnailItem .navigatorContainer .bg {
    display: none;
    position: absolute;
    top: 50%;
    bottom: 0;
}

.horizontal .navigatorContainer .bg {
    display: block;
    right: -8px;
/*    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
*/
}

.horizontal .thumbnailItem.selected .navigatorContainer .bg {
    right: -3px;
/*
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
*/
}



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

.fieldElement.hasBkgd .editorField {
    float: left;
}

.thumbnailViewControl.dynamicLayout .textBoxControl.picklistControl .suggestionPaneWrapper {
    max-width: 250px;        
}

.thumbnailViewControl.dynamicLayout .sgstPneWidth200 .textBoxControl.picklistControl .suggestionPaneWrapper {
    width: 200px;
}

.doubleHeight .editorField, 
.compact .hasImage .dataFieldContainer.descriptionField .editorField {
    white-space: normal;
}

.dataFieldContainer.descriptionField .editorField {
    white-space: normal;
}

.thumbnailSection .fieldElement.stacked .editorLabel {
    float: none;
}

.inputFieldContainer .editorLabel > label{
    line-height: 30px;
    vertical-align: middle;
}

.inputFieldContainer.stacked .editorLabel > label{
    line-height: 16px;
    vertical-align: middle;
}

.horizontal .thumbnailSection.mainSection.stacked .dataFieldContainer .editorLabel,
.horizontal .thumbnailSection.mainSection.stacked .inputFieldContainer .tbcEditorLabel  {
    width: 150px;
}

.thumbnailSection .inputFieldContainer.labelAutoWidth .tbcEditorLabel,
.thumbnailSection .dataFieldContainer.fieldElement.labelAutoWidth .editorLabel,
.horizontal .thumbnailSection.mainSection.stacked .identSection .dataFieldContainer .editorLabel {
    width: auto!important;
}

.compact .dataFieldContainer.stacked.doubleHeight {
    height: 48px;
}

/********************************************************************
        END DYNAMIC THUMBNAIL LAYOUT
*********************************************************************/

/********************************************************************
        HOVER OVERLAY SECTION
*********************************************************************/
.hoverViewContainer
{
    max-width: 400px;
    display: none;
    position: absolute;
    z-index: 1000;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    vertical-align: middle;
    overflow: hidden;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    min-width: 200px;
}

.hoverViewContainer .closeImageView {
    height: 20px;
    position: absolute;
    right: 10px;
    z-index: 1000;
}

.hoverViewContainer .closeImageView span {
    float: right;
    text-decoration: underline;
    font-weight: bold;
    margin-bottom: 5px;
}

.hoverViewContainer .closeImageView:hover {
    cursor: pointer;    
}

.hoverViewContainer .thumbnailImg  {
    display: block;
    padding: 15px 15px 0px 15px;
    min-height: 100px;
}

.hoverViewContainer img
{
    max-height: 100%; 
    max-width: 100%;
    vertical-align: middle;
}

.hoverViewContainer .imageLoading {
    height: 20px;
    margin-top: 15px;
}

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

.contact .thumbnailItem .nativeLink.nativeLink.email, 
.contact .thumbnailItem .nativeLink.nativeLink.homePhone, 
.contact .thumbnailItem .nativeLink.nativeLink.mobile {
    opacity: 0.7;
}

.contact .thumbnailItem .nativeLink.nativeLink.email:hover, 
.contact .thumbnailItem .nativeLink.nativeLink.homePhone:hover, 
.contact .thumbnailItem .nativeLink.nativeLink.mobile:hover {
    opacity: 1;
}

.thumbnailViewControl.dynamicLayout .addSelCont:before {
    margin: 0;
    vertical-align: top;
    display: inline-block;
}

.thumbnailViewControl.dynamicLayout .actionBar .lblSelAll:before {
     float: left;
     margin: 7px 5px 7px 0;
     line-height: 15px;
 }

.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);
    }
}
.treeViewContainer{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow: auto;
}

.treeNode{
    margin-top: 2px;
    position: relative;
}
.treeNode > .childrenNodesContainer{
    display: none;
    padding-left: 10px;
}

.treeNode.expanded > .childrenNodesContainer {
    display: block;
}

.treeNode > .expandNode > .icon16:before{
    content: "\E061";
}

.treeNode.expanded > .expandNode > .icon16:before{
    content: "\E064";
}

.treeNode > .expandNode{
    position: absolute;
    top: 10px;
    left: 5px;
}

.treeNode > .expandNode:hover {
    cursor: pointer;
}

.treeNode.isLeaf > .expandNode{
    display: none;
}

.treeNode > .itemWrapper{
    padding-left: 24px;
}

.treeNode.hasMoreData > .childrenNodesContainer{
    padding-bottom: 35px;
}

.treeNode > .childrenNodesContainer > .readMoreData{
    display: none;
    
}

.treeNode.hasMoreData > .childrenNodesContainer > .readMoreData{
    position: absolute;
    bottom: 2px;
    left: 50%;
    margin-left:-50px;
    display: block;

}

.uploader {
    width:500px;
    padding: 5px;
    position: relative;
}

.uploader .inputContainer
{
    display:inline-block;
    overflow: hidden;
    position: relative;
}

.uploader .inputContainer input[type="file"]{
    position: absolute;
    top: 0px;
    left: -180px;
    bottom: 0px;
    padding: 6px;
    font-size: 1.2em;
    opacity: 0;
}

.uploader .hoverHint{
    display:none;
}

.uploader.warning .hoverHint{
    display:block;
    position: absolute;
    padding: 10px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 3px;
    background-color:rgba(255,200,200,0.8);
    border: solid 1px #B44;
    font-weight:bold;
    z-index: 2;
}

.uploader [disabled]{
    opacity: 0.5;
}

.uploader .fileList{
    margin: 10px;
    min-height: 20px;
    max-height: 500px;
    overflow-y:scroll;
}

.uploader.dragOver{
    background-color:rgba(200,255,200,0.5);
    border: solid 1px #4B4;
    border-radius: 3px;
}

.uploader.warning{
    background-color:rgba(255,200,200,0.5);
    border: solid 1px #B44;
}

.uploader .file{
    border-bottom: solid 1px #DEEDFF;
    margin: 5px;
    min-height: 24px;
    position: relative;
    border-radius: 3px;
    padding: 2px;
}

.uploader .file.uploadError{
    background-color: #ffa4a4;    
}

.uploader .file .details
{
    display:block;
    min-height: 24px;
    margin-right: 30px;
    position: relative;
    overflow: hidden;
    padding: 5px;
}

.uploader .file .progress
{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 0px;
    background-color: rgba(200,255,200,0.5);
    border-radius: 3px;
    z-index: 0;
}

.uploader .file .label
{
    display:inline-block;
    margin-right: 5px;
    width:200px;
    z-index: 1;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:bold;
}

.uploader .file .status 
{
    display:inline-block;
    margin-right: 5px;
    width:50px;
    z-index: 1;
} 

.uploader .file .errorMessage 
{
    padding: 5px;
    font-weight:bold;
} 

.uploader .file .size 
{
    display:inline-block;
    margin-right: 5px;
    width:60px;
    color: #666;
    z-index: 1;
    float:right;
}

.uploader .file button.removeFile
{
    float:right;
}
.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;
}
.valueSelector2 > .editablePanel{
    padding: 0 !important; 
}

.valueSelector2 > .editablePanel:first-child {
    margin-bottom: 30px;
}


.valueSelector2 > .editablePanel > .header {
    padding-bottom: 0;
    font-size: 1.2em !important;
    color: initial;
}

.valueSelector2 .relatedDataPortlet .selectorMenu.menuContainerH {
    position: relative;
    float: right;
    top: -32px;
}
.viewSelectorControl button .icon16.selectViewIcon:before,
.viewSelectorControl button .icon24:before{
    content: "\E532";
}


/*--View Selector--*/

.viewSelectorControl {
    float: left;
    margin: 10px 0;
    display: inline-block;
    text-align: left;
}

.viewSelector
{
    float: left;
    min-height: 36px;
}

.detailsPanel .viewSelector {
    margin-left: 10px;
}

.viewSelector.dropDownControlContainer > .hasDefaultAction > .defaultAction:before,
.viewSelector.dropDownControlContainer > .hasDefaultAction > .handle:before {
    display: none;
}

.viewSelector .dropdownControl .dropdownPanel button.toggleView {
    float: none;
    padding-left: 24px;
    padding-right: 20px;
    min-width: 100%;
}

.viewSelector .dropdownControl button.defaultAction {
    padding-right: 0;
}
/*
.viewSelector .dropdownControl button.handle {
    background: transparent;
    box-shadow: 0 0 0 0;
    border: none;
    padding-left: 4px;
}
*/
.viewSelector .dropdownControl .dropdownPanel {
    /*min-width: inherit;*/
}

.viewSelector button.toggleView
{
    display: block;
    float: left;
}

.viewSelector.dropDownControlContainer button {
    /*border-radius: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;*/
    
}

.viewSelector .dropdownPanel button {
    float: none;
    padding-left: 24px;
    min-width: 100%;
    border-radius: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
}

.viewSelector .dropdownPanel.scrollingDropdown .dropdownPanelListItem {
  padding-right:17px
}

.viewSelector .dropdownPanel .dropdownPanelListItem:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.viewSelector .dropdownPanel .dropdownPanelListItem.highlight {
    background-color: rgba(0, 0, 0, 0.03);
}

.viewSelector button.toggleView:focus {
    outline: none;
    box-shadow: none !important;
}

/*
    Headers definitions
*/
.viewSelectorControl .dropdownPanel .header {
    line-height: 36px;
}

.viewSelectorControl .header .showSpinner {
    width: 16px;
    height: 16px;
    top: 4px;
    left: 10px;
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/loaderdarkbg.gif') no-repeat top center;
    position: relative;
    display: inline-block;
}

.viewSelectorControl .actionButtons .close {
    margin-right: 10px;
    min-width: 60px;
}

.viewSelectorControl .header label {
    display: inline-block;
    font-size: 1em;
    padding-left: 10px;
    font-family: Osans, Arial, sans-serif;
    font-weight: 600;
}

.viewSelectorControl .content .viewItem .defaultInd,
.viewSelectorControl .defaultMode .header .addViewHeader,
.viewSelectorControl .defaultMode .header .editViewHeader,
.viewSelectorControl .defaultMode .content .actionButtons .updateView,
.viewSelectorControl .defaultMode .content .actionButtons .makeDefault,
.viewSelectorControl .defaultMode .content .actionButtons .removeView,
.viewSelectorControl .defaultMode .content .inputViewName,
.viewSelectorControl .defaultMode .content .addViewContent,
.viewSelectorControl .addMode .header .defaultViewHeader,
.viewSelectorControl .addMode .header .editViewHeader,
.viewSelectorControl .addMode .content .defaultViewContent,
.viewSelectorControl .editMode .content .addViewContent,
.viewSelectorControl .editMode .content .actionButtons .updateView,
.viewSelectorControl .editMode .header .defaultViewHeader,
.viewSelectorControl .editMode .header .addViewHeader,
.viewSelectorControl .editMode .content .viewName .inputViewName,
.viewSelectorControl .editMode .content .viewItem.editActive .viewName a,
.viewSelectorControl .editMode .content .viewItem.default .defaultInd,
.viewSelectorControl .editMode .content .viewItem.system .removeView
{
    display: none;
}

.viewSelectorControl.hasSystemViewAuthority .editMode .content .viewItem.system .removeView
{
    display: inline-block;
}

.viewSelectorControl.viewChanged .defaultMode .crtView .actionButtons .updateView {
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
}

/* since the remove button is hidden, put a right margin so the makeDefault buttons are nicely aligned*/
.viewSelectorControl .editMode .content .viewItem.shipped .makeDefault {
    margin-right: 40px;
}

.viewSelectorControl .editMode .content .viewItem.editActive .viewName .inputViewName {
    display: inline-block;
}

.viewSelectorControl .content .viewItem.default .defaultInd {
    display: inline-block;
    cursor: default;
    padding: 1px 4px;
    background-image: none;
    font-size: 0.9em;
    border: none;
    box-shadow: none;
}

.viewSelectorControl .content .viewItem.default .defaultInd {
    float: right;
    margin-right: 3px;
    padding: 5px 0;
    line-height: 30px;
}

.viewSelectorControl .header .defaultViewHeader .editView .icon16:before {
    content: "\E078";
}

.viewSelectorControl .header .defaultViewHeader .addView .icon16 {
    background:url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/plusgreenlight.png');
}

.viewSelectorControl .header .flatStyle {
    float: left;
    background-color: transparent;
    background-image: none;
}

.viewSelectorControl .header .flatStyle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/*
    Views contents
 */
.viewSelectorControl .content .viewItem .viewType .icon16, .viewSelectorControl .viewItem.system .viewType .icon16, .viewSelectorControl .viewItem.shared .viewType .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/starsprite.png');
}

.viewSelectorControl .actionButtons {
    float: right;
    display: inline-block;
    white-space: nowrap;
}

.viewItem .actionButtons {
    padding: 5px 0;
}

.viewItem .makeDefault, .viewItem .removeView {
    margin-right: 5px;
    box-shadow: none;
    border: solid 1px transparent;
    background: none;
}

.viewItem .makeDefault {
    float: left;
    padding:0;
}

.viewItem .removeView {
    float: none;
    margin-right: 5px;
    border-radius: 15px;
}

.viewItem .makeDefault:focus {
    outline:none !important;
    box-shadow: none !important;
}

.viewItem .makeDefault .buttonLabel {
    font-size: 0.8em;
    line-height: 28px;
}

.viewItem .makeDefault .icon16 {
    display: inline-block!important;
    padding: 6px;
    border-radius: 15px;
}

.viewItem .makeDefault .icon16:before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/ticksprite.png');
    background-position: center left;
    background-repeat: no-repeat;
}

.viewItem .makeDefault .icon16 {
    background: none;
}

.viewItem .makeDefault.isDefault .icon16 {
    background: inherit;
}

.viewItem .makeDefault .buttonLabel {
    display: none;
}


.viewItem .makeDefault.isDefault .buttonLabel {
    display: inline-block;
}

.viewItem .makeDefault:hover .icon16, .viewItem .removeView:hover {
    background-color: rgba(0,0,0,0.1);
}

.viewItem .makeDefault:hover .icon16:before {
    background-position: -16px center;
}

.viewItem .makeDefault.isDefault .icon16:before {
    display: inline-block;
    background-position: -32px center;
}

.viewSelectorControl .content .viewItem .actionButtons .removeView .icon16 {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/removereddark.png');
}

.viewSelectorControl .flatStyle {
    border-radius: 0;
    padding: 10px;
    box-shadow: none;
    border: none;
}

.viewSelectorControl .flatStyle:hover {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac5.png');
    background-repeat: repeat;
}


.viewSelectorControl .viewItem,
.viewSelectorControl .actionItem {
    width:100%;
    border-radius: 0;
}

.viewSelectorControl div.viewName ,
.viewSelectorControl div.clearChanges {
    overflow: hidden;
    min-height: 40px;
    padding-right: 7px;
}

.viewSelectorControl div.viewName:hover,
.viewSelectorControl div.clearChanges:hover {
    cursor: pointer;
}

.viewSelectorControl .editActive .viewName {
    padding: 0 7px;
}

.viewSelectorControl .editMode .inputViewName {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    font-size: 0.9em;
    box-sizing: border-box;
    border-radius: 3px;
}


.viewSelectorControl .editMode .inputViewName:focus {
    outline: none;
}

.addViewContent {
 
}

.addViewFields,.moreOptContent {
    padding: 10px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.moreOptContent {
    display: none;/*initially is hidden*/
    border-top: solid 1px #fff!important;
}

.addViewButtons {
    padding: 10px;
    border-top: solid 1px #fff;
}

.addViewButtons .advOptions {
    display: inline-block;
    float: right;
    line-height: 30px;
}

.addViewButtons .advOptions .lessOpt{
    display: none;
}

.addViewFields > div {
    margin-top: 10px;
}

.addViewContent .inputViewName {
    width: 100%;
    height: 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.addViewContent .inputViewName:focus {
    outline: none;
}

.addViewContent .viewNameLabel {
    display: block;
    padding-bottom: 5px;
    padding-left: 2px;
}

.dropdownControl.chooser .defaultView {
    font-size: inherit;
    display: inline-block;
    padding-left: 0;
    line-height: 30px;
}

.viewSelectorControl .wChkbx {
    line-height: 30px;
    cursor: pointer;
    display: block;
}

.viewSelectorControl .wChkbx:before {
    /*content: "";
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin-top: 6px;
    margin-right: 5px;
    background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/chkbx.png);
    background-position: top left;
    background-repeat: no-repeat;*/
}

/*.viewSelectorControl .wChkbx.checked:before {
    background-position: 0 -40px;
}

.viewSelectorControl .wChkbx:hover:before{
    background-position: 0 -20px;
}

.viewSelectorControl .wChkbx.checked:hover:before{

    background-position: 0 -60px;
}*/

.viewSelectorControl .moreOptContent.inclOpt .inclOptVal{
    display: inline-block;
    margin-right: 10px;
}

.viewSelectorControl .moreOptContent.scopeOpt .exclParamVal,
.viewSelectorControl .moreOptContent.scopeOpt .indepParamVal{
    display: block;
}

.viewSelectorControl .moreOptContent.inclOpt .inclOptVal label,
.viewSelectorControl .moreOptContent.scopeOpt .exclParamVal label,
.viewSelectorControl .moreOptContent.scopeOpt .indepParamVal label{

    line-height: 30px;
}

.viewSelectorControl .moreOptContent.scopeOpt .exclParamVal > input {
    margin-top: -2px;
    vertical-align: middle;
}

.viewSelectorControl .addViewContent > div > button:first-child {
    float: left;
    margin-right: 5px;
}


.viewSelectorControl .dropdownPanel .crtView,
.viewSelectorControl .dropdownPanel .viewsList,
.viewSelectorControl .dropdownPanel .otherActions
 {
    float: none;
    position: relative;
    overflow-x: hidden;
}
.viewSelectorControl .dropdownPanel .otherActions:hover {
    
}

.viewSelectorControl .dropdownPanel .viewsListContainer {
    max-height: 210px;
    overflow-y: auto;
}

.viewSelectorControl .crtView{
    border-bottom: solid 1px rgba(0,0,0,0.05);
}


.viewSelectorControl .crtViewItem{
    margin-right:30px;
}

.viewSelectorControl .crtView .editViewBtn{
    position: absolute;
    right: 0px;
    margin: 5px 5px 0 0;
}

.viewSelectorControl .crtView .editViewBtn .icon16{
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/edit.png');
}

.viewSelectorControl .crtView .viewName a {
    font-weight: bold;
}

.viewSelectorControl .dropdownPanel .content {
    width: 400px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.tablet.portraitMode .viewSelectorControl .dropdownPanel .content {
    width: 300px;
}

.viewSelectorControl .dropdownPanel.defaultMode .content,
.viewSelectorControl .dropdownPanel.editMode .content
 {
    max-height: 300px;
}

.viewSelectorControl .viewItem:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.viewSelectorControl .clearChanges .icon16{
    float: left;
    margin: 12px 0 0 12px;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/clear.png');
    opacity: 0.75;
}

/*.viewSelectorControl .viewItem .viewName,*/
.viewSelectorControl .viewItem .viewType
{
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

.viewSelectorControl .viewItem .viewType {
    display: none;
}

.viewSelectorControl .viewItem .viewType .icon16 {
    background-position: -16px 0;
}

.viewSelectorControl .viewName a, .viewSelectorControl .clearChanges a {
    position: relative;
    padding: 5px 5px 5px 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30px;
    display: block;
    font-size: 0.9em;
    white-space: nowrap;
}

.viewSelectorControl .editMode .viewName a {
    color: inherit;
    border: solid 1px transparent;
    line-height: 20px;
    padding: 4px;
    margin-top: 5px;
    margin-left: 7px;
}

.viewSelectorControl .editMode .viewName a:hover {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac50.png');
    background-repeat: repeat;
    border: solid 1px #c4c4c4;
    border-radius: 3px;
}

/*.viewSelectorControl .viewName a:before {
    content: "";
    float: right;
    border: solid 1px red;
    width: 16px;
    height: 16px;
}*/

.viewSelectorControl .viewItem.default{
}

.viewSelectorControl .viewItem.system .viewType .icon16 {
    background-position: -16px 0;
    display: block;
}

.viewSelectorControl .viewItem .viewType span {
    float: left;
}

.viewSelectorControl .viewItem.shared .viewType .icon16 {
    background-position: -16px -16px;
    display: block;
}

@media \0screen 
{
    .viewSelectorControl .editMode .inputViewName {
        line-height:20px;
    }
}


.viewSelectorControl .wChkbx: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: 3px;
    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;
}

.viewSelectorControl .wChkbx:before {
    float: left;
    margin-top: 6px;
    margin-right: 5px;
    line-height: 15px;
}

.viewSelectorControl .wChkbx.checked:before {
    content: "\E066";
    border-color: #656565;
}

.viewSelectorControl .wChkbx:hover:before  {
    border-color: #656565;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 50%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */

}

.viewSelectorControl .wChkbx.checked:hover:before {
    content: "\E066";
    border-color: #656565;

    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 50%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 50%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */

}


/************
View selector/changed indicator
************/*
.viewSelectorControl .selectViewBtn{
    margin-right: 11px;
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    box-shadow: 0 0 0px rgba(0,0,0,0.1);
}

.viewSelectorControl button .icon16.selectViewHandler:before,
.viewSelectorControl button .icon24.selectViewHandler:before {
    content: "\E045";
}

.viewSelectorControl button .icon16.selectedViewChanged{
    margin-left:-10px;
}

.viewSelectorControl button .icon16.selectViewHandler{
    margin-left:-5px;
}

.viewSelectorControl.viewChanged button .icon16.selectedViewChanged:before,
.viewSelectorControl.viewChanged button .icon24.selectedViewChanged:before {
    content: "*";
    position: absolute;
    top:3px;
}

.viewSelectorControl.viewSelected .selectViewBtn,
.viewSelectorControl.viewChanged .selectViewBtn{
    color: #fff;
    background-color: #444;
}

.viewSelectorControl.viewSelected .selectViewBtn:before,
.viewSelectorControl.viewChanged .selectViewBtn:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -13px;
    top: 9px;
    border: 4px solid transparent;
    border-left: 8px solid #fff;
}

.viewSelectorControl.viewSelected .selectViewBtn:after,
.viewSelectorControl.viewChanged .selectViewBtn:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -11px;
    top: 9px;
    border: 4px solid transparent;
    border-left: 7px solid #444;
}

.workflowLinkDetails a {
    line-height: 26px;
}

.workflowProcessView {
    font-family: Arial, Verdana, sans-serif;
}

.workflowProcessTask {
    margin: 2px;
    padding: 2px;
    border-radius: 3px;
}

.workflowProcessTask.showHover {
    cursor: pointer;
}

.present {
    margin: 0 -5px;
}

.workflowProcessTaskName {
    font-size: 1.1em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflowProcessTaskHeader {
    line-height: 16px;
    padding: 7px;
}

.workflowProcessTask[aria-expanded="false"] .workflowProcessTaskEvents {
    display: none;
}


.workflowProcessTask.showHover .workflowProcessTaskHeader:before {
    content: "\E063";
    font-family: iconGlyph;
    margin-right: 5px;
    opacity: 0.5;
    float: left;
}

.workflowProcessTask.showHover[aria-expanded="false"] .workflowProcessTaskHeader:before{
    content: "\E064";
}

.workflowProcessTask.future .workflowProcessTaskHeader:before {
    display: none;
}

.workflowProcessTaskName.heading{
    display: inline-block;
    vertical-align: top;
}

.workflowProcessTaskRightPanel {
    display: inline-block;
    float: right;
}

.workflowProcessTaskDescription {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
}

.workflowProcessTaskComment {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/32/bpm/comment.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    float: right;
}

.workflowProcessEvents {
    margin-top: 2px;
}

.workflowProcessEvent {
    padding: 5px;
    margin-top: 2px;
    line-height: 16px;
    background-color: rgba(255,255,255,0.85);
}

.workflowProcessEvent > div {
    margin-bottom: 5px;
}

.workflowProcessEventName {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflowProcessEventDateTime {
    float: right;
}

.workflowProcessEventTime{
    margin-right: 10px;
}

.workflowProcessEventTime:before{
    content: "\e099";
    font-family: iconGlyph;
    margin-right: 4px;
}

.workflowProcessEventDate:before{
    content: "\e014";
    font-family: iconGlyph;
    margin-right: 4px;
}

.workflowProcessEventDescriptionPanel {
    display: inline-block;
}

.workflowProcessEventComment {
    background-color: rgb(255, 255, 255);
    margin-top: 5px;
    padding: 2px;
}

.workflowProcessEventCommentText {
    white-space: pre-wrap;
}

.workflowProcessEventCommentImg {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/32/bpm/comment.png');
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0 3px;
}

.workflowProcessEventSplitDetails {
    display: inline-block;
}
.workflowSplitDetails {
    width: 100%;
}

.workflowSplitHeader {
    padding: 5px 5px;
    font-family: 'OSans', Arial, Sans-Serif;
    font-weight: bold;
}

.workflowSplitGroup {
    margin-bottom: 5px;
    padding: 5px;
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/whiteopac35.png');
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.workflowSplitAssigned {
    font-size: 1.1em;
    font-weight: 600;
    width: 100%;
}

.workflowSplitLine {
    padding-top: 3px;
    line-height: 16px;
}

.workflowSplit {
    background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/icons/16/actions/split.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: top;
}

.workflowSplitLineDetails {
    display: inline-block;
}

.workflowSplitDescription {
    display: inline-block;
    word-wrap: break-word;
}

.workflowSplitKeys {
    display: inline-block;
    vertical-align: top;
}


.worksheetProcess {
    position:relative;
}

.worksheetProcessItem, .worksheetProcessCompletedItem {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.worksheetProcessItem {
    padding: 14px 0;
}

.worksheetProcessItem.enabled {
    cursor: pointer;
}

.worksheetProcessItemOuterContainer {
    position: relative;
    border-style: solid;
    border-color: transparent;
}

.worksheetProcessItemOuterContainer:focus {
    outline: none;
}

.worksheetProcessItem.enabled:hover > .worksheetProcessItemOuterContainer {
    background-color: #F3F3F3;
}

.worksheetProcessItem.highlight > .worksheetProcessItemOuterContainer {
    background-color: #DEE8B3;
    border-color: rgba(0,0,0,0.1);
}

.worksheetProcessItem.failed.highlight > .worksheetProcessItemOuterContainer {
    background-color: #FFF5F5;
}

.worksheetProcessItem.disabled.highlight > .worksheetProcessItemOuterContainer {
    background-color: #F3F3F3;
}

.worksheetProcessItem.hasJobId > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer {
    margin-right: 58px;
}

.worksheetProcessItemStatusIndicator {
    position: absolute;
    z-index: 1;
    left: -9px;
    top: -4px;
    background-color: white;
    border-radius: 10px;
    line-height: normal;
}

.worksheetProcessItemStatusIndicator:before {
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
}

.worksheetProcessItem.completed > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemImageContainer > .worksheetProcessItemStatusIndicator {
    color: #74bd00;
}

.worksheetProcessItem.failed > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemImageContainer > .worksheetProcessItemStatusIndicator {
    color: red;
}

.worksheetProcessItemNotificationIndicator {
    display: inline-block;
    position: absolute;
    right: -8px;
    top: -4px;
    min-width: 18px;
    padding: 3px 1px;
}

.worksheetProcessItemImageContainer {
    position: relative;
    float: left;
    display: block;
    z-index: 1;
}

.worksheetProcessItemImage {
    padding: 0;
    display: block;
    border-radius: 4px;
    background-size: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

.worksheetProcessItemHeadingContainer {
    display: block;
    overflow:hidden;
    position: relative;
    height: inherit;
}

.worksheetProcessItemHeadingInnerContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: normal;
}

.worksheetProcessItemHeadingInnerContainer.noSubHeading.noSchedule {
    margin-top: -9px;
    top:50%;
}

.worksheetProcessItemHeadingInnerContainer.hasSubHeading.noSchedule, .worksheetProcessItemHeadingInnerContainer.noSubHeading.hasSchedule {
    margin-top: -16px;
    top:50%;
}

.worksheetProcessItemHeading {
    display:  block;
    font-size: 1.2em;
    font-weight: 600;
    overflow:hidden;
    text-overflow: ellipsis;
    line-height:18px;
}

.worksheetProcessItemScheduledContainer {
    line-height: 15px;
}

.worksheetProcessItemScheduledIcon {
    margin-right: 5px;
}

.worksheetProcessItemScheduledText {
    display: inline-block;
    font-size: 0.9em;
}

.worksheetProcessItemSubHeading {
    overflow:hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
    color: #656565;
    line-height: 15px;
}

.worksheetProcessItemSubHeadingPart {
    display: inline-block;
    padding: 0;
}

.worksheetProcessItemSubHeadingPart.controlContainer{
    border: none;
}

.worksheetProcessItemSubHeadingPart.syncLink {
    cursor: pointer;
    padding: 9px 0;
}

.worksheetProcessItemSubHeadingPart ~ .worksheetProcessItemSubHeadingPart {
    margin-left: 2px;
}

.worksheetProcessCompletedItem {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.worksheetProcessCompletedItem > .worksheetProcessItemHeading {
    line-height: 20px;
}

.worksheetProcessFlowLines {
    position: absolute;
    display: block;
    z-index: 1;
}

.worksheetProcessLine {
    border: none;
    border-width: 2px;
    border-color: #000;
    border-color: rgba(0,0,0,0.35);
    position: absolute;
    display: block;
}

.worksheetProcessFlowLines.completed > .worksheetProcessVerticalLine > .worksheetProcessLine, .worksheetProcessFlowLines.completed > .worksheetProcessHorizontalLine > .worksheetProcessLine {
    border-color: #97CA97;
}

.worksheetProcessFlowLines.completed > .worksheetProcessVerticalLine > .worksheetProcessLineEnd {
    color: #97CA97;
}

.worksheetProcessVerticalLine > .worksheetProcessLine {
    border-left-style: solid;
}

.worksheetProcessHorizontalLine > .worksheetProcessLine {
    border-top-style: dashed;
}

.worksheetProcessLineEnd {
    position:absolute;
    display: block;
    color: #000;
    color: rgba(0,0,0,0.35);
}

.worksheetProcessCompletedLineEnd {
    border-style: solid;
    border-width: 2px;
}

.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemImageContainer > .worksheetProcessItemImage,
.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemHeading,
.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemHeadingContainer > .worksheetProcessItemHeading,
.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemHeadingContainer > .worksheetProcessItemScheduledContainer,
.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemHeadingContainer > .worksheetProcessItemSubHeading,
.worksheetProcessCompletedItem.disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}

.worksheetProcessItem.disabled.hasJobId > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemHeadingContainer > .worksheetProcessItemSubHeading {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.worksheetProcessItem.disabled > .worksheetProcessItemOuterContainer > .worksheetProcessItemInnerContainer > .worksheetProcessItemImageContainer > .worksheetProcessItemImage {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.worksheetProcessJobSpinner {
    position: absolute;
	top: 50%;
    margin-top: -16px;
    opacity: 0.5;
    right: 26px;
}
/*
IMPORTANT:
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
classes should alter those!
*/

/*
* TechnologyOne Change History
* ----------------------------
*  12 Apr 2013 - AndyP - Added sticky footer row styles
*/
.frozen {
  position: absolute;
  top:0px;
  left:0px;
  z-index:2;
}

.frozen .slick-footerrow-columns {
  background-color:#fff;
}

.frozen-border {
  border-right:3px solid #ddd;
  box-shadow: 0 -2px 0 2px #ccc;
}

.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
  width: 100%;
  overflow: hidden;
  border-left: 0px;
}

.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
  position: relative;
  white-space: nowrap;
  cursor: default;
  overflow: hidden;
}

.slick-header-column.ui-state-default {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 22px;
  margin: 0;
  padding: 4px;
  border-right: 1px solid silver;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  float: left;
}

.slick-headerrow-column.ui-state-default, .slick-footerrow-column.ui-state-default {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 16px;
  line-height: 16px;
  margin: 0;
  padding: 4px;
  border-right: 0px;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  float: left;
}

.slick-sort-indicator {
  display: inline-block;
  width: 8px;
  height: 5px;
  margin-left: 4px;
}

.slick-sort-indicator-desc {
  background: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/sort-desc.gif);
}

.slick-sort-indicator-asc {
  background: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/sort-asc.gif);
}

.slick-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  cursor: col-resize;
  width: 4px;
  right: 0px;
  top: 0;
  height: 100%;
}

.slick-sortable-placeholder {
  background: silver;
}

.grid-canvas {
  position: relative;
  outline: 0;
}

.slick-row.ui-widget-content, .slick-row.ui-state-active {
  position: absolute;
  width: 100%;
}

.slick-cell, .slick-headerrow-column, .slick-footerrow-column {
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  z-index: 1;
  padding: 1px 2px 2px 1px;
  margin: 0;
  white-space: nowrap;
  cursor: default;
}

.slick-headerrow-column, .slick-footerrow-column {
  border: 1px solid transparent;
  border-bottom-color: silver;
}

.slick-group {
}

.slick-group-toggle {
  display: inline-block;
}

.slick-cell.highlighted {
  background: lightskyblue;
  background: rgba(0, 0, 255, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.slick-cell.flashing {
  border: 1px solid red !important;
}

.slick-cell.editable {
  z-index: 11;
  overflow: visible;
  background: white;
  border-color: black;
  border-style: solid;
}

.slick-cell:focus {
  outline: none;
}

.slick-reorder-proxy {
  display: inline-block;
  background: blue;
  opacity: 0.15;
  filter: alpha(opacity = 15);
  cursor: move;
}

.slick-reorder-guide {
  display: inline-block;
  height: 2px;
  background: blue;
  opacity: 0.7;
  filter: alpha(opacity = 70);
}

.slick-selection {
  z-index: 10;
  position: absolute;
  border: 2px dashed black;
}


.slick-footerrow-columns {
    font-weight: bold;
    border-top: solid 1px #e6e6e6;
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/#default#vml);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	     -o-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	     -o-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/#default#vml);
	display: inline-block;
	position: absolute;
	}

.leaflet-control {
	display: inline;
	}

.leaflet-popup-tip {
	/*width: 21px;*/
	_width: 27px;
	/*margin: 0 auto;*/
	_margin-top: -3px;

	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	}
.leaflet-popup-tip-container {
	margin-top: -1px;
	}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	border: 1px solid #999;
	}
.leaflet-popup-content-wrapper {
	zoom: 1;
	}

.leaflet-control-zoom,
.leaflet-control-layers {
	border: 3px solid #999;
	}
.leaflet-control-layers-toggle {
	}
.leaflet-control-attribution,
.leaflet-control-layers,
.leaflet-control-scale-line {
	background: white;
	}
.leaflet-zoom-box {
	filter: alpha(opacity=50);
	}
.leaflet-control-attribution {
	border-top: 1px solid #bbb;
	border-left: 1px solid #bbb;
	}

/* ================================================================== */
/* Toolbars
/* ================================================================== */

.leaflet-draw-section {
	position: relative;
}

.leaflet-draw-toolbar {
	margin-top: 12px;
}

.leaflet-draw-toolbar-top {
	margin-top: 0;
}

.leaflet-draw-toolbar-notop a:first-child {
	border-top-right-radius: 0;
}

.leaflet-draw-toolbar-nobottom a:last-child {
	border-bottom-right-radius: 0;
}

.leaflet-draw-toolbar a {
	background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/spritesheet.png');
	background-repeat: no-repeat;
}

.leaflet-retina .leaflet-draw-toolbar a {
	background-image: url('/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/spritesheet-2x.png');
	background-size: 270px 30px;
}

.leaflet-draw a {
	display: block;
	text-align: center;
	text-decoration: none;
}

/* ================================================================== */
/* Toolbar actions menu
/* ================================================================== */

.leaflet-draw-actions {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
	top: 0;
}

.leaflet-right .leaflet-draw-actions {
	right:26px;
	left:auto;
}

.leaflet-draw-actions li {
	display: inline-block;
}

.leaflet-draw-actions li:first-child a {
	border-left: none;
}

.leaflet-draw-actions li:last-child a {
	-webkit-border-radius: 0 4px 4px 0;
	        border-radius: 0 4px 4px 0;
}

.leaflet-right .leaflet-draw-actions li:last-child a {
	-webkit-border-radius: 0;
	        border-radius: 0;
}

.leaflet-right .leaflet-draw-actions li:first-child a {
	-webkit-border-radius: 4px 0 0 4px;
	        border-radius: 4px 0 0 4px;
}

.leaflet-draw-actions a {
	background-color: #919187;
	border-left: 1px solid #AAA;
	color: #FFF;
	font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
	line-height: 28px;
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
	height: 28px;
}

.leaflet-draw-actions-bottom {
	margin-top: 0;
	white-space: nowrap;
}

.leaflet-draw-actions-top {
	margin-top: 1px;
	white-space: nowrap;
}

.leaflet-draw-actions-top a,
.leaflet-draw-actions-bottom a {
	height: 27px;
	line-height: 27px;
}

.leaflet-draw-actions a:hover {
	background-color: #A0A098;
}

.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
	height: 26px;
	line-height: 26px;
}

/* ================================================================== */
/* Draw toolbar
/* ================================================================== */

.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
	background-position: -2px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
	background-position: -31px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
	background-position: -62px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-circle {
	background-position: -92px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-marker {
	background-position: -122px -2px;
}

/* ================================================================== */
/* Edit toolbar
/* ================================================================== */

.leaflet-draw-toolbar .leaflet-draw-edit-edit {
	background-position: -152px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove {
	background-position: -182px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
	background-position: -212px -2px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
	background-position: -242px -2px;
}

/* ================================================================== */
/* Drawing styles
/* ================================================================== */

.leaflet-mouse-marker {
	background-color: #fff;
	cursor: crosshair;
}

.leaflet-draw-tooltip {
	background: rgb(54, 54, 54);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid transparent;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
	color: #fff;
	font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin-left: 20px;
	margin-top: -21px;
	padding: 4px 8px;
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	z-index: 6;
}

.leaflet-draw-tooltip:before {
	border-right: 6px solid black;
	border-right-color: rgba(0, 0, 0, 0.5);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	content: "";
	position: absolute;
	top: 7px;
	left: -7px;
}

.leaflet-error-draw-tooltip {
	background-color: #F2DEDE;
	border: 1px solid #E6B6BD;
	color: #B94A48;
}

.leaflet-error-draw-tooltip:before {
	border-right-color: #E6B6BD;
}

.leaflet-draw-tooltip-single {
	margin-top: -12px
}

.leaflet-draw-tooltip-subtext {
	color: #f8d5e4;
}

.leaflet-draw-guide-dash {
	font-size: 1%;
	opacity: 0.6;
	position: absolute;
	width: 5px;
	height: 5px;
}

/* ================================================================== */
/* Edit styles
/* ================================================================== */

.leaflet-edit-marker-selected {
	background: rgba(254, 87, 161, 0.1);
	border: 4px dashed rgba(254, 87, 161, 0.6);
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}

.leaflet-edit-move {
	cursor: move;
}

.leaflet-edit-resize {
	cursor: pointer;
}

/* ================================================================== */
/* Old IE styles
/* ================================================================== */

.leaflet-oldie .leaflet-draw-toolbar {
	border: 3px solid #999;
}

.leaflet-oldie .leaflet-draw-toolbar a {
	background-color: #eee;
}

.leaflet-oldie .leaflet-draw-toolbar a:hover {
	background-color: #fff;
}

.leaflet-oldie .leaflet-draw-actions {
	left: 32px;
	margin-top: 3px;
}

.leaflet-oldie .leaflet-draw-actions li {
	display: inline;
	zoom: 1;
}

.leaflet-oldie .leaflet-edit-marker-selected {
	border: 4px dashed #fe93c2;
}

.leaflet-oldie .leaflet-draw-actions a {
	background-color: #999;
}

.leaflet-oldie .leaflet-draw-actions a:hover {
	background-color: #a5a5a5;
}

.leaflet-oldie .leaflet-draw-actions-top a {
	margin-top: 1px;
}

.leaflet-oldie .leaflet-draw-actions-bottom a {
	height: 28px;
	line-height: 28px;
}

.leaflet-oldie .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
	height: 27px;
	line-height: 27px;
}

.leaflet-control-zoom-fullscreen 
{
    background-image: url(/T1PROD/CiAnywhere/Web/PROD/Workplace/v-12.0.1540.0/t/$Base/images/icon-fullscreen.png);
}
.leaflet-container:-webkit-full-screen 
{
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}
.leaflet-pseudo-fullscreen 
{
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 99999;
}
/***
Spectrum Colorpicker v1.5.1
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative;
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 30px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -20px;
    right: 0;
    left: 0;
    height: 10px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container > * {
    display: none;
}
.sp-palette-only .sp-picker-container > .sp-button-container {
    display: block;
    text-align: right;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-palette-only.sp-container{
    flex-direction: column;
}

.sp-palette-only .sp-picker-container{
    padding-top: 0;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
   border-radius: 5px;
   height: 5px;
   width: 5px;
   border: 1px solid #fff;
   background: #000;
   cursor: pointer;
   position:absolute;
   top:0;
   left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #c4c4c4;
    padding: 0;
}

.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float:right;
    width: 155px;
    margin-bottom: 4px;
    margin-right: 5px;
}
.sp-initial-disabled  .sp-input-container {
    width: 70%;
}
.sp-input {
   border: 1px inset;
   padding: 5px !important;
   margin: 0;
   width: 100%;
   border-radius: 3px;
}

.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    position: relative;
    padding: 20px;
}
.sp-picker-container {
    width: 300px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 24px;
    margin: 2px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 28px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:flex;
    *zoom: 1;
    *display: inline;
    background: #eee;
    vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    position:relative;    
    height: 20px;
    margin-right: 5px;
    flex: 1;
    z-index: 0;
}

.sp-palette {
    *width: 270px;
    max-width: 270px;
}
.sp-palette .sp-thumb-el {
    /*width:16px;
    height: 16px;
    margin:2px 1px;*/
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: row;
}

.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el, .bg-transparent {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;    
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    border: solid 1px rgba(0, 0, 0, 0.05);
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}

/** Customisation */
.sp-palette-button-container {
    text-align: center;
    margin-top: 10px;
    float: none;
}

.sp-palette-toggle {
    width: 100%;
}


.phone .sp-container.colPalette {
    top: 50px !important;
}


@media (max-width: 500px) {
    .sp-container {
        flex-direction: column;    
    }    
    
    .sp-palette-container {
        border-right: transparent;
    }

}