.hierarchyViewAutoComplete {
    border: solid 1px;
    border-color: #15181e;
    background-color: #fff;
    width: 409px!important;
    display:table;
    border-collapse: collapse; 
    overflow: auto;
    max-height: 400px;
}
.hierarchyViewAutoComplete.nonHierarchyView {
    border: none;
}
.hierarchyViewAutoComplete table thead tr:hover {
    background-color: transparent;
}
.hierarchyViewAutoComplete .hierarchyViewAutoCompleteRow {
    display:table-row;
    border-color: #d6dbdd;
    border-bottom: solid 1px;
    height: 20px;
}
.hierarchyViewAutoComplete .hierarchyViewAutoCompleteCell {
    display:table-cell;
    color: #373a3f;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px;
}

.hierarchyViewAutoComplete li {
    font-family: Osans, Arial, sans-serif;
    font-size: 1.1em;
}

.hierarchyViewAutoComplete li:hover {
    cursor:pointer;
}

span.toggleView.hierarchy-view::before {
    content: "\E229";
}

.hierarchyView {
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hierarchyView .hierarchyViewContainer {
    height: 100%;
    overflow: hidden;
    text-align: center
}

.hierarchyView .draggableHierarchyViewTree {
    display: inline-block;
    font-size:12px;
    margin: 0 auto;
    width: 100%;
}

@-moz-document url-prefix() {
    .hierarchyView .draggableHierarchyViewTree {
        width: initial;
    }
}

.hierarchyView .hierarchyViewTree {
    height: 100%;
    display: table;
    margin: 0 auto;
    position: relative;
}

.hierarchyView .hierarchyViewTree > div {
    height: 100%;
}

.hierarchyView .hierarchyViewTree .navigatorContainer {
    display: none;
}

.hierarchyView ul.hierarchyViewNodes {
    padding-top: 1.6em;
    padding-bottom: 1.6em;
    position: relative;

       
}

.hierarchyView .hierarchyViewTree > div > .hierarchyViewNodes {
    height: 100%;
}

.hierarchyView li.hierarchyViewNode {
    display: table-cell;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding-top: 1.4em;
}

.hierarchyView li.hierarchyViewNode.topLevelNode {
    
}

.hierarchyView li.hierarchyViewNode .hierarchyViewNodeContainer {
        white-space: nowrap;
}

/*Tree connectors using ::before and ::after*/

.hierarchyView li.hierarchyViewNode:not(:only-of-type)::before, .hierarchyView li.hierarchyViewNode:not(:only-of-type)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 1.4em;
}

.hierarchyView li.hierarchyViewNode.topLevelNode::before, .hierarchyView li.hierarchyViewNode.topLevelNode::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: none;
}

.hierarchyView li.hierarchyViewNode:not(:only-of-type):last-of-type::before {
    left: 0;
}

.hierarchyView li.hierarchyViewNode::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}

.hierarchyView > div > ul > li.hierarchyViewNode {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
} 

 /*Remove left connector from first child and right connector from last child*/
.hierarchyView li.hierarchyViewNode:first-child::before, .hierarchyView li.hierarchyViewNode:last-child::after {
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.hierarchyView li.hierarchyViewNode:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 0.5em 0 0;
    -webkit-border-radius: 0 0.5em 0 0;
    -moz-border-radius: 0 0.5em 0 0;
}

.hierarchyView li.hierarchyViewNode:first-child::after {
    border-radius: 0.5em 0 0 0;
    -webkit-border-radius: 0.5em 0 0 0;
    -moz-border-radius: 0.5em 0 0 0;
}

.hierarchyView li.hierarchyViewNode.topLevelNode:last-child::before {
    border-right: none;
}


.hierarchyView li.hierarchyViewNode:only-of-type:after {
    content: '';
    position: absolute;
    top: 0;
    height: 1.5em;
    border-left: 1px solid #ccc;
    -webkit-border-radius: 0!important;
}

.hierarchyView li.hierarchyViewNode.topLevelNode:after {
    border: none;
}

.hierarchyView .hierarchyViewBaseActionForNew ul ul.hierarchyViewNodes::before {
    border: none;
}

/*Time to add downward connectors from parents*/
.hierarchyView ul ul.hierarchyViewNodes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 1.6em;
}

.hierarchyView ul.hierarchyViewNodes:empty {
    display: none;
}

.hierarchyViewNodeContainer {
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
    width:20em;
    padding:0.5em;
    padding-bottom: 4.3em;
    text-align:left;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    margin: 0 1em;
    z-index: 1;
}

.hierarchyViewNodeContainer.noNodeActions.noNodePopup {
    padding-bottom: 0;
}

.hierarchyViewNodeContainer:not(.noNodeActions), .hierarchyViewNodeContainer.dummyActions  {
    border-style: dashed;
    padding-top: 2.05em;
}



.hierarchyView li.hierarchyViewNode .hierarchyViewNodeContainer.locatorHighlight {
    z-index: 2;
}

.hierarchyViewNodeContainer {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.35);
}

/*--node card styles--*/

.hierarchyView .hierarchyViewNodeContainer:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    opacity:0.65;
}

.hierarchyViewNodeContainer .thumbnailItem {
    background-color:transparent;
    position:relative;
}

.hierarchyViewNodeContainer .thumbnailItem .gripper {
    display: none;
}

.hierarchyViewNodeContainer .imageSection .thumbnailImg {
    float:right;
    /*max-width:3.7em;
    max-height:3.7em;*/
    /*border: solid 1px #fff;
    overflow: visible;
    background: none;
    border: none;*/
}

.hierarchyViewNodeContainer .imageSection .thumbnailImg .sharedRole {
    max-width: none;
    line-height: 1.2em;
    min-height:0;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;
    bottom:0.1em;
    left: -1px;
    right: -1px;
}

.hierarchyViewNodeContainer .imageSection .thumbnailImg .imageText {
    max-width: none;
    min-height: 0;
    position: absolute;
    bottom: 2em;
    left: -1px;
    right: -1px;
    text-transform: uppercase;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.75);
}
.hierarchyViewNodeContainer .thumbnailImg img {
    box-sizing:border-box;
    display:inline-block;
    max-width: 7em!important;
    max-height: 7em!important;
    /*border-radius: 50%;
    background-color: #fff !important;
    border: solid 1px #fff;
    overflow: hidden;*/
}

/*.hierarchyViewNodeContainer .thumbnailItem .headingField {
    width: 80%
}*/

.hierarchyViewNodeContainer .thumbnailItem .headingField, 
.hierarchyViewPopup .stackedContainer > .controlContainer.headingField .editorField {
    font-weight:600;
    overflow: hidden;
    white-space: normal;
}

.hierarchyViewNodeContainer .thumbnailItem .identSection {
    font-size:0.9em;
    margin-bottom:0.5em;
}

.hierarchyViewNodeContainer .thumbnailItem .identSection.groupWithImageSection {
    padding-bottom:0.5em;
}

.hierarchyViewNodeContainer .thumbnailItem .identSection .editorLabel {
    color:#656565;
    padding-right:0;
}

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection {
    overflow: hidden;
}

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection.hidden {
    display: none;
}

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection.tagActionsSection {
    padding-top: 0.5em;
}

.hierarchyViewNodeContainer .thumbnailSection.mainSection > .thumbnailSection:not(.identSection) {
    margin-top: 0.1em;
}

.hierarchyViewNodeContainer .thumbnailSection.mainSection > .thumbnailSection:not(.identSection).groupWithImageSection {
    margin-top: 0;
}

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection.imageSection {
    overflow: visible;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer {
    line-height:1.6em;
    min-height:1.6em;
    overflow:hidden;
    float:left;
    max-width:100%;
    box-sizing: border-box;
}
.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.hidden {
    display: none!important;
}

.hierarchyViewNodeContainer .dataFieldContainer.statusField {
    padding: 0 0.3em;
    margin-right: 0.1em;
}

.hierarchyViewNodeContainer .dataFieldContainer.statusField:first-child {
    margin-left: 0;
}

.hierarchyViewNodeContainer .thumbnailItem .mainSection .dataFieldContainer {
    padding:0.1em 0;
}

.hierarchyViewNodeContainer .thumbnailItem .mainSection .thumbnailSection.stacked > .dataFieldContainer{
   float:none;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.paddingT5 {
    padding-top:0.5em;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.paddingB5 {
    padding-bottom:0.5em;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.paddingTB5 {
    padding-top:0.5em;
    padding-bottom:0.5em;
}

/*.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.hierarchyStatus {
    font-size:0.9em;
}*/

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection.showFieldsSeparator > .dataFieldContainer:first-child {
    border-left: none;
    padding-left: 0;
}

.hierarchyViewNodeContainer .thumbnailItem .thumbnailSection.showFieldsSeparator .dataFieldContainer {
    border-left: 1px solid #ccc;
    padding: 0 5px;
}

.hierarchyViewNodeContainer .thumbnailItem  .dataFieldContainer .editorLabel {
    padding:0;
    padding-right:0.5em;
    width:auto;
    float:left;
    overflow:hidden;
}

.hierarchyViewNodeContainer .thumbnailItem  .dataFieldContainer .editorLabel label {
    line-height: normal;
}

.hierarchyViewNodeContainer .thumbnailItem .editorField {
    color:#656565;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height: normal;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.doubleHeight {
    height:2em;
}

.hierarchyViewNodeContainer .thumbnailItem .dataFieldContainer.doubleHeight .editorField {
    white-space:normal;
}

.hierarchyViewNodeContainer .thumbnailItem .hierarchyViewImageCountValueItem .editorField {
    color:#fff;
}
.hierarchyViewNodeContainer .thumbnailItem .hierarchyViewImageTextValueItem .editorField {
    color: #000;
}

.hierarchyViewNodeContainer .thumbnailItem .stacked > .editorLabel {
    float:none;
}

.hierarchyViewNodeContainer .thumbnailItem .headingField .editorField, 
.hierarchyViewPopup .stackedContainer > .controlContainer.headingField .editorField {
    color:initial;
}

.hierarchyViewNodeContainer.selected .thumbnailItem .headingField .editorField {
    color: inherit;
}

.hierarchyView .treeUpNavigator {
    z-index: 999;
    left: 50%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -10em;
    border-radius: 0 0 50px 50px;
    width: 20em;
    position: relative;
}

.hierarchyView .treeUpNavigator:hover {
    background-color: #ebedee;
}


.hierarchyView .treeUpNavigator .label {
    font-size:1.2em;
    display:block;
}

.hierarchyViewNode .treeDownNavigator {
   background-color:#fff;
}

.hierarchyView .hierarchyViewNode .treeDownNavigator {
    border: 1px solid #ccc;
    margin:0 auto;
    display:block;
    padding: 0.55em;
    line-height:1em;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.hierarchyView .treeDownNavigator .icon16 {
    width:1em;
    height:1em;
    line-height:1em;
    font-size:1em;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.hierarchyView .treeDownNavigator.extraNodeLevelButton:hover {
    cursor: inherit;
    background: transparent;
}

.hierarchyView .treeDownNavigator .icon16:before {
    content:"\E064";
    font-size:1em;
    line-height:1em;
}

.hierarchyView .treeDownNavigator.expanded .icon16:before {
    content:"\E063";
}

.hierarchyView .hierarchyViewTree .nodeActionsContainer {
    /*position:absolute;*/
    left:0.5em;
    bottom:0.5em;
}

.nodeActionsContainer .gripper, .nodeActionsContainer .hierarchyViewNodeDetailsLink {
    float: left;
}

.nodeActionsContainer .gripper {
    /*font-size: 1.4em;
    padding: 0.2em;*/
    /*margin-right: 1em;*/
    line-height: normal;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 7px;
    z-index: 1;
    opacity: 0.5;
}

.nodeActionsContainer .gripper:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}


.nodeActionsContainer .gripper .gripperDots {
    width: 30px;
    margin: 0 auto;
}

.nodeActionsContainer .gripper .dots {
    float: left;
    margin: 0 2px;
}

.nodeActionsContainer .gripper .dots:before, .nodeActionsContainer .gripper .dots:after {
    content: "";
    display: block;
    border: solid 1px;
}

.nodeActionsContainer .gripper .dots:before {
    margin-bottom: 3px;
}

/*.nodeActionsContainer .gripper.icon16:before {
    font-size: inherit;
    line-height: normal;
}*/

/*.nodeActionsContainer .gripper .lines {
    content: "";
    display: block;
    margin: 0.3em auto;
    padding: 0.3em;
    width: 64px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    opacity: 0.5;
}*/

/*.nodeActionsContainer .gripper:hover .lines {
    opacity: 0.85;
}*/

.hierarchyViewNodeContainer.extraNodeLevel .nodeActionsContainer .gripper, .hierarchyViewNodeContainer.noNodeActions .gripper {
    visibility: hidden;
}
.hierarchyView .hierarchyViewTree .hierarchyViewNodeDetailsLinkLink {
    
    display:block;
    text-decoration: none;
    opacity: 0.75;
    position: absolute;
    bottom: 0.5em;
}

.hierarchyView .hierarchyViewTree .hierarchyViewNodeDetailsLinkLink:hover {
    opacity: 1;
}

.hierarchyView .hierarchyViewTree .hierarchyViewNodeDetailsLinkLink .icon16 {
    /*font-size:1.6em;
    width: 1.6em;
    height: 1.6em;
    line-height: 1em;*/
    font-size: 1.8em;
    display: block;
    width: auto;
    height: auto;
    line-height: normal;
}

.hierarchyView .hierarchyViewTree .hierarchyViewNodeDetailsLinkLink > .icon16:before {
    content: "\E084";
}

/* Empty Hierarchy View */
.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew, .hierarchyView .hierarchyViewTree .hierarchyViewEmpty {
    top: 50%;
    position: absolute;
    margin-left: -10em;
    width: 44em;
    margin-left: -21.5em;
    margin-top: 21.5em;
}

#hierarchyViewBaseActionForNewMenu {
    float: left;
    margin: 0 1em;
}

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew .menuContainerH > ul > .dropDownControlContainer {
    margin: 0;
}

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew button {
    width: 20em;
    min-height: 15em;
    border-radius: 0;
    background-color: transparent;
    text-align: center;
    line-height: normal;
}

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew button img {
    display: block;
    margin: 0 auto;
    max-width: 5.5em;
    max-height: 5.5em;
}

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew button .buttonLabel {
    display: block;
    text-transform: uppercase;
    color: #656565;
    margin: 1em 0;
    line-height: normal;
} 

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew button:after {
    content: "\E147";
    font-size: 2.2em;
    display: block;
    font-family: iconGlyph;
    opacity: 0.35;
}

.hierarchyView .hierarchyViewTree .hierarchyViewBaseActionForNew button:hover:after {
    opacity: 0.75;
}


.hierarchyView .hierarchyViewTree .hierarchyViewEmpty .hierarchyViewEmptyGlyph {
    width: 100%;
    margin-bottom: 10px;
}

.hierarchyView .hierarchyViewTree .hierarchyViewEmpty .hierarchyViewEmptyMessage, .hierarchyView .hierarchyViewTree .hierarchyViewEmpty .hierarchyViewEmptyGlyph  {
    opacity: 0.35;
}

.hierarchyView .hierarchyViewTree .hierarchyViewEmpty .hierarchyViewEmptyMessage {
    line-height: 16px;
    font-size: 12px;
    text-align: center;
}

/*Hierarchy View node thumbs*/
.hierarchyView .hierarchyViewTree.nodeThumbs .hierarchyViewNodeContainer .thumbnailItem {
    padding-right:0;
}

.hierarchyViewNodeContainer .thumbnailItem .itemWrapper, .hierarchyViewNodeContainer:hover .thumbnailItem .itemWrapper {
    background: none;
}



.groupWithImageSection > .dataFieldContainer, 
.hierarchyView .hierarchyViewTree.nodeThumbs .hierarchyViewNodeContainer .thumbnailItem .headingField {
    width: 100%;
    box-sizing: border-box;
}

.nodeThumbs .secondarySection {
    position:absolute;
    /*border: solid 1px rgba(0, 0, 0, 0.05);*/
    /*padding: 0 0.5em;*/
    top: 0.5em;
    right: 0.5em;
    /*background-color: #fff;*/
}

.nodeThumbs .imageSection {
   padding:0.5em 0;
   position: relative;
}

.nodeThumbs .imageSection , .nodeThumbs .groupWithImageSection {
   background-color:rgba(0,0,0,0.05);
}

.nodeThumbs .groupWithImageSection .editorField, .nodeThumbs .groupWithImageSection .editorLabel, .nodeThumbs .headingField .editorField, 
.nodeThumbs .identSection {
   text-align:center;
   float:none;
}

.nodeThumbs .alignCenter .editorField, .nodeThumbs .alignCenter .editorLabel {
    float:none;
}

.nodeThumbs .identSection .editorField, .nodeThumbs .identSection .editorLabel {
    display:inline-block;
}

/*--Status Fields-*/



/*.dataFieldContainer.statusField .editorField, .dataFieldContainer.statusField .editorLabel {
    color: inherit;
}*/

.hierarchyViewTree .imageSection .thumbnailImg {
    border-radius: 50%;
    border: solid 1px #fff;
    position:relative;
}

.nodeThumbs .imageSection .thumbnailImg {
    float:none;
    display: block;
    top:0;
    right:0;
    margin:0 auto;
    max-width:7em;
    max-height:7em;
    overflow:visible;
    text-align: center;
    line-height:7em;
    overflow: hidden;
}

.nodeThumbs .summaryContainer .thumbnailAction {
    height: auto;
}



/*Hierarchy View Popup*/
.hierarchyViewPopup {
    z-index: 99999;
}

#HierarchyNodePopupRecordNavigator {
    /*z-index: 99999;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;*/
    float: none;
}

.hierarchyViewPopup .popup header {
    min-height: 20px;
    background: transparent;
}




/*-- HierarchyView Popup record navigator --*/

.hierarchyViewPopup .popup {
    position:relative;
    padding: 10px;
    padding-bottom: 50px;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator > span {
    line-height: 30px;
    color: #656565;
    font-weight: normal;
    border: solid 1px transparent;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .recordSelectorBtn {
    visibility: hidden;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator > div {
    /*display: block;
    margin-top: -30px;
    line-height: 30px;*/
    overflow: hidden;
    /*padding: 1px;*/
    /*float: left;*/
    margin-right: -15px;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .prev, .hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next {
    padding: 3px 6px;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 0.65;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .prev:hover, .hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next:hover {
    opacity: 1;
}


.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .prev[disabled], .hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next[disabled],
.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .prev[disabled]:hover, .hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next[disabled]:hover {
    opacity: 0.15;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next {
    float: right;
}

.hierarchyViewPopup #HierarchyNodePopupRecordNavigator .prev .icon16, .hierarchyViewPopup #HierarchyNodePopupRecordNavigator .next .icon16 {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
}

    
.hierarchyViewPopup .popup:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    opacity:0.75;
}

.hierarchyViewPopup .popupClose {
    box-shadow:none;
    opacity: 0.65;
}

.hierarchyViewPopup .popupClose > span:before {
    color:initial;
}

.hierarchyViewPopup .popup > header, .hierarchyViewPopup .popup > div {
    position:relative;
}

.hierarchyViewPopup .popup > header {
    margin-bottom: 10px !important;
}

.hierarchyViewPopup .popup .popupImage {
    float: right;
    padding: 10px;
    
}

.hierarchyViewPopup .popup .popupImage img {
    display:inline-block;
    vertical-align: top;
    /*border: solid 1px rgba(0,0,0,0.15);*/
}

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

.hierarchyViewPopup .suggestionPanePageHeading {
    text-align: left;
}

.hierarchyViewPopup .suggestionPanePageHeading .readonlyTextBoxSpan {
    color: inherit !important;
    padding-left: 0 !important;
}

.hierarchyViewPopup .fldTxtAlignLeft .readonlyTextBoxSpan {
    text-align: left !important;
}

.hierarchyViewPopup .controlContainer {
    padding: 0;
}

.hierarchyViewPopup .popup > footer button {
    position: relative;
}

.hierarchyViewPopup .popup > footer button, .hierarchyViewPopup .popup > footer a {
    min-width: initial;
    margin-right: 0;
    float: inherit;
}

.hierarchyView .hierarchyViewTree .treeUpNavigator:hover {
    cursor:pointer;
}

.hierarchyView .hierarchyViewTree li.hierarchyViewNode .hierarchyViewNodeContainer:not(.extraNodeLevel):hover {
    cursor:pointer;
}

.hierarchyView .hierarchyViewTree.passedKey li.hierarchyViewNode .hierarchyViewNodeContainer:not(.extraNodeLevel):hover {
    cursor:default;
}

.enquiryForm .detailsPanel .hierarchyView .hierarchyViewTree li.hierarchyViewNode .hierarchyViewNodeContainer:not(.extraNodeLevel):hover {
    cursor:default;
}

.relatedDataPortlet > .contents.maximisedHierarchyView, .detailsPanel.hasSectionsChange .contentContainer.maximisedHierarchyView {
    top: 0!important;
}

.relatedDataPortlet .views.maximisedHierarchyView {
    top: 0 !important;
}

.relatedDataPortlet.hasHeaderBar.headerBarVisible > .contents.maximisedHierarchyView {
    top: 0 !important;
}

.relatedDataPortlet .headerBar.maximisedHierarchyView {
    display: none;
}

.hierarchyView .hierarchyViewTree .dropZone {
    background: #5eb342!important;
    opacity: 0.5!important;
}

.hierarchyView #blockerContainer {
    position: absolute;
    top: -93px;
    width: 100%;
}

.hierarchyView #blockerMain {
    position: absolute;
    top: 62px;
    height: 30px;
    width: 100%;
    z-index: 1;
    padding: 6px;
    box-sizing: border-box;
}

.hierarchyView #blockerMain .watermark {
    display: block;
    text-align: center;
    bottom: 10px;
    position: absolute;
    width: 100%;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.hierarchyView #blockerContainer #blockerButtons .popupClose {
    float: right;
    position: relative;
    z-index: 99999;
    top: -17px;
}

.hierarchyView.blockerShown .hierarchyViewTree .hierarchyViewNodeContainer:hover {
    background-color: rgb(252, 219, 154)!important;
    opacity: 0.5!important;
}

.hierarchyView .hierarchyViewToolbar {
    z-index: 3;
}

.hierarchyView .hierarchyViewToolbar .toolbarButtons {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 5px;
    padding: 4px;
    border-radius: 3px;
    z-index: 3;
}

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

.hierarchyView .hierarchyViewToolbar .viewButtons:before {
    content: "";
    display: block;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.hierarchyView .hierarchyViewToolbar button {
    float:none;
    display:block;
    text-align:center;
    background:none;
    border: solid 1px transparent;
    box-shadow: none;
    color: #fff;
} 

.hierarchyView .hierarchyViewToolbar button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hierarchyViewFullScreen.viewFullScreen .glyph:before {
    content: "\E095";
}

.hierarchyViewFullScreen {
    margin-top: 4px;
    margin-bottom: 4px;
}

.hierarchyViewZoomIn {
    border-radius:3px 3px 0 0;
}

.hierarchyViewZoomOut {
    border-radius:0 0 3px 3px;
    margin-bottom: 4px;
}

.hierarchyViewZoomIn:hover, .hierarchyViewZoomOut:hover  {
    position:relative;
    z-index:1;
}

.hierarchyView .hierarchyViewToolbar .hierarchyViewZoomNavigator  {
    border-color: rgba(0,0,0,0.2);
}

.hierarchyView .hierarchyViewToolbar .hierarchyViewZoomNavigator.navigatorClosed {
    border-color: transparent;
}

/* Zoom Styling */
.hierarchyView .hierarchyViewTree.x1 { font-size:15%; }
.hierarchyView .hierarchyViewTree.x2 { font-size:30%; }
.hierarchyView .hierarchyViewTree.x3 { font-size:45%; }
.hierarchyView .hierarchyViewTree.x4 { font-size:60%; }
.hierarchyView .hierarchyViewTree.x5 { font-size:75%; }
.hierarchyView .hierarchyViewTree.x6 { font-size:90%; }
.hierarchyView .hierarchyViewTree.x7 { font-size:105%; }
.hierarchyView .hierarchyViewTree.x8 { font-size:120%; }
.hierarchyView .hierarchyViewTree.x9 { font-size:135%; }

.hierarchyView .hierarchyViewTree.x1 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x1 .treeUpNavigator .icon16 { font-size:8em; }
.hierarchyView .hierarchyViewTree.x2 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x2 .treeUpNavigator .icon16 { font-size:4em; }
.hierarchyView .hierarchyViewTree.x3 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x3 .treeUpNavigator .icon16 { font-size:3em; }
.hierarchyView .hierarchyViewTree.x4 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x4 .treeUpNavigator .icon16 { font-size:2em; }
.hierarchyView .hierarchyViewTree.x5 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x5 .treeUpNavigator .icon16 { font-size:1.6em; }
.hierarchyView .hierarchyViewTree.x6 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x6 .treeUpNavigator .icon16 { font-size:1.3em; }
.hierarchyView .hierarchyViewTree.x7 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x7 .treeUpNavigator .icon16 { font-size:1.2em; }
.hierarchyView .hierarchyViewTree.x8 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x8 .treeUpNavigator .icon16 { font-size:1.1em; }
.hierarchyView .hierarchyViewTree.x9 .treeDownNavigator .icon16, .hierarchyView .hierarchyViewTree.x9 .treeUpNavigator .icon16 { font-size:1.0em; }

/*.hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer { padding-bottom: 8.2em; }*/
.hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer button.primary { padding: 0; line-height: normal; }
.hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer button.primary .icon16, .hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer button.primary .iconSizeSmall { font-size: 5em;width: auto;height: auto;line-height: normal;margin: 0 0.1em; }

/*.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer { padding-bottom: 6em; }*/
.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary { padding: 0; }
.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary .icon16, .hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary .iconSizeSmall { font-size: 2em; }

/*.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer { padding-bottom: 6em; }*/
.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary { padding: 0; }
.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary .icon16, .hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer button.primary .iconSizeSmall { font-size: 3em; }

/*.hierarchyView .hierarchyViewTree.x3 .hierarchyViewNodeContainer { padding-bottom: 4.8em; }*/
.hierarchyView .hierarchyViewTree.x3 .hierarchyViewNodeContainer button.primary { padding: 0.2em; }

/*.hierarchyView .hierarchyViewTree.x4 .hierarchyViewNodeContainer { padding-bottom: 4em; }*/
.hierarchyView .hierarchyViewTree.x4 .hierarchyViewNodeContainer button.primary { padding: 0.2em; }


.hierarchyView .hierarchyViewTree.x1 .nodeActionsContainer .gripper { margin-right: 0;}
.hierarchyView .hierarchyViewTree.x2 .nodeActionsContainer .gripper { margin-right: 0.4em;}


.hierarchyView .hierarchyViewTree.x1 .nodeActionsContainer .icon16 { font-size: 6.5em; }
.hierarchyView .hierarchyViewTree.x2 .nodeActionsContainer .icon16 { font-size: 4em;  }
.hierarchyView .hierarchyViewTree.x3 .nodeActionsContainer .icon16 { font-size: 2.9em; }
.hierarchyView .hierarchyViewTree.x4 .nodeActionsContainer .icon16 { font-size: 2.7em; }
.hierarchyView .hierarchyViewTree.x5 .nodeActionsContainer .icon16 { font-size: 2.2em;padding: 0.15em; }
.hierarchyView .hierarchyViewTree.x6 .nodeActionsContainer .icon16 { font-size: 1.55em;padding: 0.3em; }
.hierarchyView .hierarchyViewTree.x7 .nodeActionsContainer .icon16 { font-size: 1.35em;padding: 0.3em; }
.hierarchyView .hierarchyViewTree.x8 .nodeActionsContainer .icon16 { font-size: 1.2em;padding: 0.3em; }
.hierarchyView .hierarchyViewTree.x9 .nodeActionsContainer .icon16 { font-size: 1.2em;padding: 0.19em; }


.hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer:not(.noNodeActions),.hierarchyView .hierarchyViewTree.x1 .hierarchyViewNodeContainer.dummyActions { padding-top: 7em; }
.hierarchyView .hierarchyViewTree.x1 .nodeActionsContainer .gripper { padding: 2px; }
.hierarchyView .hierarchyViewTree.x1 .nodeActionsContainer .gripperDots { width: 20px; }
.hierarchyView .hierarchyViewTree.x1 .nodeActionsContainer .gripper .dots { margin: 0 1px; }
.hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer:not(.noNodeActions), .hierarchyView .hierarchyViewTree.x2 .hierarchyViewNodeContainer.dummyActions { padding-top: 4em; }
.hierarchyView .hierarchyViewTree.x2 .nodeActionsContainer .gripper { padding: 2px; }
.hierarchyView .hierarchyViewTree.x2 .nodeActionsContainer .gripperDots { width: 20px; }
.hierarchyView .hierarchyViewTree.x2 .nodeActionsContainer .gripper .dots { margin: 0 1px; }
.hierarchyView .hierarchyViewTree.x3 .hierarchyViewNodeContainer:not(.noNodeActions), .hierarchyView .hierarchyViewTree.x3 .hierarchyViewNodeContainer.dummyActions { padding-top: 3.5em; }
.hierarchyView .hierarchyViewTree.x3 .nodeActionsContainer .gripper { padding: 5px; }
.hierarchyView .hierarchyViewTree.x4 .hierarchyViewNodeContainer:not(.noNodeActions), .hierarchyView .hierarchyViewTree.x4 .hierarchyViewNodeContainer.dummyActions { padding-top: 3.1em; }
.hierarchyView .hierarchyViewTree.x5 .hierarchyViewNodeContainer:not(.noNodeActions), .hierarchyView .hierarchyViewTree.x5 .hierarchyViewNodeContainer.dummyActions { padding-top: 2.4em; }

.x1 .x1Hide, .x2 .x2Hide { display: none !important; }
.x1 .imageSection, .x1 .headingField { font-size: 2em; }
.x2 .imageSection, .x2 .headingField { font-size: 1.5em; }

.hierarchyViewTree.x1 .hierarchyViewNodeContainer {
    padding-bottom: 7.3em;
}

.hierarchyView .extraNodeLevel .hierarchyViewNodeDetailsLink, .hierarchyView .extraNodeLevel .thumbnailItem {
    visibility: hidden;
}

.hierarchyView li.hierarchyViewNode .hierarchyViewNodeContainer.extraNodeLevel:after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    height: 110%;
}

.hierarchyView li.hierarchyViewNode .hierarchyViewNodeContainer.extraNodeLevel {
    border-color: #fff;
    box-shadow: none;
    position:relative;
    text-align: center;
    margin-bottom: 0.1em;
    background: none;
    border: solid 1px transparent;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNodeContainer.extraNodeLevel {
    border: none !important;
}

.hierarchyView .hierarchyViewNodeContainer.extraNodeLevel ul.dropDownControlContainer {
    visibility: hidden;
}

/* Hierarchy View Navigator */
.hierarchyView .outerHierarchyViewNavigatorContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 5px;
    border: 1px solid #bbc3c6;
    background-color: #fff;
    z-index: 3;
}

.hierarchyView .hierarchyViewNavigatorContainer {
    position: relative;
    overflow: hidden;
    font-size: 12px;
}

.hierarchyView .hierarchyViewNavigatorContainer .zoomViewArea {
    border: 1px solid #373a3f;
    z-index: 3;
    position: absolute;
}

.hierarchyView .hierarchyViewNavigatorContainer .zoomViewArea:hover {
    cursor:pointer;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator {
    display: table;
    margin: 0 auto;
    font-size: 0.03em;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNodes {
    display: table;
    margin: 0 auto;
}

.hierarchyView .hierarchyViewNavigatorContainer .topLevelNode {
    display: block;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator .treeDownNavigator {
    visibility: hidden;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator .extraNodeLevel {
    opacity: 0
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator .hierarchyViewNodeContainer {
    background-color: #50535a;
    border: none;
    box-shadow: none;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator .hierarchyViewNodeContainer.selected {
    background-color: #df6c00;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode:not(:only-of-type)::before, .hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode:not(:only-of-type)::after {
    border: none;    
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode::after {
    border: none;
}

.hierarchyView  .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode:last-child::before {
    border: none;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode:only-of-type:after {
    border: none;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator ul ul.hierarchyViewNodes::before {
    border: none;
}

.hierarchyView .hierarchyViewNavigatorContainer .hierarchyViewNavigator li.hierarchyViewNode .hierarchyViewNodeContainer.extraNodeLevel:after {
    border: none;
}

/* Hierarchy Node Action DropDown */
.hierarchyView .hierarchyViewNodeContainer ul.dropDownControlContainer {
    float: right;
    display: block;
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
}

.hierarchyView .hierarchyViewNodeContainer ul.dropDownControlContainer button.handle.more.primary {
    /*width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    padding: 0;*/
}

.hierarchyView .hierarchyViewNodeContainer ul.dropDownControlContainer button.handle.more.primary span.icon16 {
    /*font-size: 1em;
    margin: 0;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;*/
    position: relative;
}

.hierarchyView .hierarchyViewNodeContainer.dragHierarchyViewDragAndDropActionInProgress {
    z-index: 99999;
}

/*---Hierarchy Progress bar---*/
.relatedDataPortlet > .hierarchyProgessOverlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1;
    width: 100%;
}

.relatedDataPortlet .hierarchyProgessOverlay .hierarchyDurationSpinner,
.relatedDataPortlet .hierarchyProgessOverlay .hierarchyDurationSpinner .hierarchySpinner {
    display: block;
}

.hierarchyDurationSpinner {
    display: none;
    vertical-align: middle;
    font-size: 0.9em;
    position: absolute;
    padding: 10px;
    top: 25%;
    left: 7%;
    background-color: transparent !important;
    border-radius: 3px;
    color: #fff;
    z-index: 9999;
}

.hierarchySpinner 
{
    display: none;
    height: 48px;
    width:48px;
    margin: 0 auto;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderlrg.gif?v=12.0.253.0') no-repeat;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderspritedark.png?v=12.0.253.0') top left / 100% 100% no-repeat;
    background-size: 576px 48px;
    -webkit-animation: play48 .8s steps(12) infinite;
    -moz-animation: play48 .8s steps(12) infinite;
    -ms-animation: play48 .8s steps(12) infinite;
    -o-animation: play48 .8s steps(12) infinite;
    animation: play48 .8s steps(12) infinite;
}

.relatedDataPortlet  .hierarchyProgressContainer {
    width: 75%;
    height: 100%;
}

.relatedDataPortlet .hierarchyProgressContainerInner
{
    display: inherit;
    position: relative;
    left: 10%;
    bottom: 0;
    z-index: 0;
    top: 25%;
    border: 1px solid;
    border-color: #d6dbdd;
}

.relatedDataPortlet .hierarchyProgress
{
    width: 0;
    background-color: rgba(200,255,200,0.8);
    border-radius: 3px;
    z-index: 0;
    height: 66px;
}

.relatedDataPortlet .hierarchyProgressActionContainer
{
    left: 10%;
    bottom: 0;
    top: 27%;
    display: inherit;
    position: relative;
    text-align: center;
    z-index: 999999;
}

.relatedDataPortlet .hierarchyProgressCount
{
    color: #0f3367;
    font-size: medium;
}

.rdpActionBar .gridExportSelector .hierarchyViewPrint.icon16:before {
    content: "\E231";
}

.rdpActionBar .gridExportSelector .expHtmlHierarchyView.icon16:not(.expCloud):not(.expDownload):before {
    content: "\E347";
}

.rdpActionBar .gridExportSelector .expHtmlHierarchyView {
    left: 5px;
}

.hierarchyViewNodeContainer .dropdownControl .defaultAction.primary:before {
    display: none;
}

.hierarchyViewTree .hierarchyViewNodes button, .hierarchyViewTree .hierarchyViewNodes .buttonOnHover:hover {
    font-size: 1em;
}

/** --- Icon.css - Used in summary form **/
.iconControl {
    margin: 5px 0;
    color: initial;
    text-align: center;
    border: solid 1px rgba(0,0,0,0.05);
    box-shadow: 0px 1px 2px rgba(0,1,0,0.2);
    position: relative;
}

.iconControl.compositeText{
    font-size: 1em;
    line-height: initial;
    background-color: white;
}

.iconControl.glyph,
.iconControl.image{
    border: none;
    box-shadow: none;
}

.iconControl .text{ overflow: hidden; }

.iconControl .bannerTop, .iconControl .bottomLabel {
    position: absolute;
    left: 0;
    right: 0;
    line-height: 1.5em;
}

.iconControl .bannerTop{
    top: 0;
    margin: -1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.iconControl .bottomLabel{
    bottom: 0;
}

.iconControl.icon24 .text {  margin-top: 4px; }
.iconControl.icon16 .bannerTop, .iconControl.icon16 .bottomLabel,
.iconControl.icon24 .bannerTop, .iconControl.icon24 .bottomLabel{ display: none; }

.iconControl.icon32 .text {  margin-top: 8px; }
.iconControl.icon32 .bannerTop, .iconControl.icon32 .bottomLabel {  font-size: 0.5em; }

.iconControl.icon48 .text {  font-size: 2em; margin-top: 8px; }

.iconControl.icon64 .text, .iconControl.auto .text {  font-size: 2em; margin-top: 15px; }
.iconControl.icon64.noBanner .text, .iconControl.auto.noBanner .text  {    margin-top: 10px; }
.iconControl.icon64.noBottom .text, .iconControl.auto.noBottom .text {    margin-top: 20px; }

.iconControl.icon64{
    width: 64px;
    min-width: 64px;
}

.iconControl.auto{
    min-width: 64px;
    min-height: 64px;
}
.iconControl.auto .text{ padding: 0 5px;}

.iconControl.icon96 .text {  font-size: 3em; margin-top: 20px; }
.iconControl.icon96.noBanner .text{    margin-top: 10px; }
.iconControl.icon96.noBottom .text{    margin-top: 20px; }
.iconControl.icon96 .bannerTop, .iconControl.icon96 .bottomLabel { line-height: 2em; }

.iconControl.image > img{
    width: 100%;
    height: 100%;
}

/*colours - Todo - use css class */


.iconControl.date .bannerTop { background: #37bcee; }
.iconControl.week .bannerTop { background: #ae0000; }


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

.iFrameContainer.contentDownloadable {
    top: 35px;
}

.iFrameContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 700px;
    display: block;
}

.inlineTabContainer .iFrameContainer iframe{
    min-height: 0;
}

.iFrameDocOneEmailContainer {
    padding-top: 30px;
    min-height: 250px;
}

.iFrameContainer .iFrameOverlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.iFrameDocOnePlainTextPadding {
    padding-top: 50px;
}

.relatedDataPortlet.resizingInProgress .iFrameContainer .iFrameOverlay {
    display: block;
}

.iframePopOut {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/48/popout.png?v=12.0.253.0');
    width: 48px;
    height: 48px;
    display: none;
    float: right;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1;
}

.dwldContent > .icon16{
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/download.png?v=12.0.253.0');
}

/* Natural View */

.naturalViewSectionContainer
{
    height:100%;
    box-sizing: border-box;
}

.naturalViewSectionContainer.editablePanel.scrollContent > .content {
    border-top: none;
}

.naturalViewMenuActionsContainer {
    float: left;
    margin-left: 5px;
}

.naturalViewMenuActionsContainer.empty {
    display: none;
}

.naturalViewMenu > .icon16 {
    margin: 0 5px;
}

.naturalView {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
}

.naturalViewScaleWrapper {
    overflow: hidden;
    width: auto;
}

.naturalViewScaleWrapper > iframe
{
    -webkit-appearance: none;
    visibility: hidden;
    position: relative;
}

/* RDP Section Styling */

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

.relatedDataPortlet .documentPreview .content {
    position: absolute;
    top: 40px; /*leave space for the header*/
    bottom: 5px;
    left: 0px;
    right: 0px;
}

.relatedDataPortlet .documentPreview.noHeader .content,
.relatedDataPortlet .documentPreview.contentDownloadable .content
 {
    top: 10px;
}

.relatedDataPortlet .documentPreview .iFrameContainer .dwldContent {
    margin-top: -35px;
    margin-bottom: 5px;
    margin-right: 10px;
}


/* My Maintenance Styling */

.previewSection > .documentPreview, .previewSection > .documentPreview > .content {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

.previewSection > .documentPreview > .content > .iFrameContainer {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    height: 100%;
}

.previewSection > .documentPreview > .content > .iFrameContainer > iframe {
    position: relative;
    height: calc(100% - 4px); /* For some reason the iframe needs to be 4px less than its parent to not cause a scrollbar */
    min-height: initial;
}

.ifake {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.iframeLoadingLabelContainer{
    top: 50%;
    right: 50%;
    position: absolute;
}

.stationeryViewer {
    height: 100%;
}

.immediateUploadPanel:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac35.png?v=12.0.253.0');
    background-repeat: repeat;
}

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

.immediateUploadPanel button .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/import.png?v=12.0.253.0');
    float: left;
}

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

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

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

.itemChooser {
    border-style: solid  !important;
    border-width: 1px !important;
    border-color: transparent  !important;
}

.itemChooser.validationError {
    border-color: #d00  !important;
}

.itemChooserList {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.itemChooser.readonly > .itemChooserList {
    width: 100%;
}

.itemChooserHeaderLabel {
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    font-size: 0.9em;
    font-weight: 600;
}

.itemChooserHeaderLabel > .validationMessage {
    border: none;
    box-shadow: none;
    color: #d00;
    padding: 0 3px;
    line-height: 20px;
}

.itemChooserAvailableList {
    padding-right: 5px;
}

.itemChooser.readonly > .itemChooserAvailableList {
    display: none;
}

.itemChooserSelectedList {
    padding-left: 5px;
}

.itemChooser.readonly > .itemChooserSelectedList {
    padding-left: 0;
}

.itemChooserListHeader {
    vertical-align: middle;
    padding: 0 5px;
    height: 28px;
    line-height: 28px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-style: solid;
    border-width: 1px;
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad35opac.png?v=12.0.253.0');
    background-repeat:repeat-x, repeat-y;
    background-position:top left, -19px 0;
    font-size: 0.9em;
    font-weight: 600;
}

.itemChooserListItemContainer {
    overflow:auto;
    max-height: 300px;
}

.itemChooserItem {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 30px;
    line-height: 30px;
    padding: 1px 0;
    background-color: #fff;
}

.itemChooser.readonly .itemChooserItem {
    background-color: transparent;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
    background-repeat: repeat;
}

.itemChooserItemLine {
    padding: 0 5px;
}

.itemChooserItemAction {
    position:relative;
}

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

.engagingStyle .itemChooser .itemChooserHeaderLabel {
    font-size: 1.2em;
    font-weight: normal;
    color: #656565;
    opacity: 0.75;
    cursor: text;
}

/* Label */

.editorLabel, .editorLabelAutoWidth {
    display: block;
    vertical-align:top;
    padding: 4px 0;
}

.editorLabel {
    width:150px;
}

.editorLabelAutoWidth {
    width: auto;
}

.fullEnquiryLink .editorLabel {
    width: auto;
}

.controlContainer > .editorLabel, .controlContainer > .editorLabelAutoWidth {
    display:inline-block;
    padding: 0 5px 0 0;
}

.controlContainer > .editorLabel > label, .controlContainer > .editorLabelAutoWidth > label,
.controlContainer > .editorField > a {
    display: block;
    line-height: 20px;
    padding: 4px 0;
    border: solid 1px transparent;
    font-size: 0.9em;
    font-weight: 600;
}

.stackedContainer > .controlContainer > .editorLabel > label, .stackedContainer > .controlContainer > .editorLabelAutoWidth > label,
.stackedContainer > .controlContainer > .editorField > a {
    display: block;
    line-height: 14px;
    padding: 0 4px;
}

.stackedContainer > .controlContainer > .editorLabel > label, .stackedContainer > .controlContainer > .editorLabelAutoWidth > label {
    font-size: 0.9em;
    font-weight: 600;
    position: relative;
}

.controlContainer > .editorLabel > label > .labelInnerContainer {
    display: block;
    overflow: hidden;
    padding: 0;
}

.stackedContainer > .controlContainer > .editorField > a {
    font-size: 1.1em;
    padding-bottom: 2px;
}

.stackedContainer > .controlContainer.readonly > .editorLabel, .stackedContainer > .controlContainer.readonly > .editorLabelAutoWidth {
    cursor: default;
}

.editorLabel span, .checkBoxLabel
{
    padding-right:5px;
}

.editorLabel span.fieldRequired
{
    font-weight:bold;
    vertical-align:middle;
    line-height:8px;
}

.stackedContainer > .controlContainer > .editorLabel, .stackedContainer > .controlContainer > .editorLabelAutoWidth {
    display: block;
    padding: 0;
    cursor: text;
    width: auto;
}

.controlContainer.stacked > .editorLabel {
    display: block;
    width: auto;
}

.controlContainer.stacked > .editorLabel > label {
    display: inline-block;
    padding: 0;
    line-height: 16px;
}
/* Summary form styles override */

.summaryItem .controlContainer > .editorLabel > label, .summaryItem  .controlContainer > .editorLabelAutoWidth > label, .summaryItem  .controlContainer > .editorField > a {    
    padding: 2px 0;    
    line-height: normal;
}
.linkIcon {
    background-repeat: no-repeat;
    background-size: cover;
}

.serverActionLinkRedirectLink {
    display: none;
}
a {
    cursor:pointer;
    text-decoration:none;
}

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

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

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

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

.horizLayout > .editorLabelAutoWidth > .syncLink, .horizLayout > .editorLabel > .syncLink
{
    line-height:20px;
    padding: 4px 0;
    display: inline-block;
    border: solid 1px transparent;
}
@keyframes summaryLinePlaceHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

/* Tab Handle Classes  */
.tabHandle_LinkedTab.enabled:hover {
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

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

.tabHandle_LinkedTab > .summary > .summaryHeading > .summaryHeadingLabel {
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.tabHandle_LinkedTab .summaryLoadingPanel{
    display: none;
}

.tabHandle_LinkedTab.vert.loadSectionSummaryAsync .summaryLoadingPanel{
    display: block;
    width: 100%;
    min-height: 40px;
}

.tabHandle_LinkedTab .summaryLoadingPanel .summaryLinePlaceholder{
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: summaryLinePlaceHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    position: relative;
    padding: 7px;
    margin-top: 5px;
}

.tabHandle_LinkedTab .summaryLoadingPanel .summaryLinePlaceholder:first-child {
    margin-right: 30px;
}

.tabHandle_LinkedTab .summaryLoadingPanel .summaryLinePlaceholder:nth-child(2){
    margin-right: 60px;
}

/* Horizontal Tab Handle Classes */
.tabHandlesOuterContainer_LinkedTab.horiz {
    padding: 0;
    position:relative;
}

.tabHandlesOuterContainer_LinkedTab.horiz > .tabHandlesInnerContainer_LinkedTab {
    height: 45px;
    position:relative;
    overflow: hidden;
}

.tabHandle_LinkedTab.horiz {
    padding: 13px 10px;
    margin: 0;
    float: left;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
    text-align: center;
    min-width: 60px;
}

.tabHandle_LinkedTab.horiz > .summary {
    height: 16px;
}

.tabHandle_LinkedTab.horiz > .summary > .summaryImage {
    width: 16px;
    height: 16px;
}

.tabHandle_LinkedTab.horiz > .summary > .summaryImage ~ .summaryHeading {
    display: inline-block;
}

.tabHandle_LinkedTab.horiz > .summary > .summaryHeading > .summaryHeadingLabel {
    color: #000;
}


/* Vertical Tab Handle Classes */
.tabHandle_LinkedTab.vert {
    display: none;
    position: relative;
    text-align: left;
    background-image: none;
    background-repeat: repeat-x;
    background-position: 0 -30px;
    font-size: 1em;
    font-weight: normal;
    border-radius: 0;
    min-height: 40px;
    padding: 15px;

    border-right: solid 3px transparent;
}

.tabHandle_LinkedTab.vert:before {
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.1) 85%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 15%,rgba(0,0,0,0.1) 85%,rgba(0,0,0,0) 100%);
}

.tabHandle_LinkedTab.vert:first-child:before {
    display: none;
}

.tabHandle_LinkedTab.vert.visible {
    display: block;
}

.tabHandle_LinkedTab.vert.selected,
.tabHandle_LinkedTab.vert.selected:hover {
    background-image: none;
    background-color: #fff;
}

.tabHandle_LinkedTab.vert.disabled {
    opacity: 0.35;
}

.tabHandle_LinkedTab.vert > .summary > .summaryImage {
    float:left;
    margin-right:5px;
    width: 24px;
    height: 24px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryHeading > .summaryHeadingLabel > .mandatory {
    font-size: 0.7em;
    top: -5px;
    position: relative;
}

.tabHandle_LinkedTab.vert > .summary > .summaryHeading > .summaryHeadingIcon {
    margin-left:3px;
    position: relative;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine {
    font-size: 0.9em;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineLabel.indentLevel1 {
    padding-left: 10px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineLabel.indentLevel2 {
    padding-left: 20px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineLabel.indentLevel3 {
    padding-left: 30px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineValue {
    color: #656565;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineValue.floatRight {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .summaryLineValue.floatRight.isRating {
    max-width: initial;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLineColoured > .summaryLineLabel {
    padding: 0 5px;
    text-transform: capitalize;
    color: #fff;
    display: inline-block;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLineColoured,
.tabHandle_LinkedTab.vert > .summary > .summaryLineTag {
    padding: 3px 0;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLineColoured ~ .summaryLineTag,
.tabHandle_LinkedTab.vert > .summary > .summaryLineTag ~ .summaryLineColoured {
    padding: 1px 0 3px 0;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .tagCode {
    color: #fff;
    text-transform: uppercase;
    display:block;
    float:left;
    padding: 0 5px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryLine > .tagDesc {
    border-width: 1px;
    border-style: solid;
    border-left: none;
    background-color: #fff;
    display:block;
    float:left;
    padding: 0 5px;
}

.tabHandle_LinkedTab.vert > .summary > .summaryImage ~ .summaryHeading,
.tabHandle_LinkedTab.vert > .summary > .summaryImage ~ .summaryLine,
.tabHandle_LinkedTab.vert.loadSectionSummaryAsync > .summary > .summaryImage ~ .summaryLoadingPanel
{
    margin-left: 29px;
}


/* Section Not Ready */
.tabControl > .editablePanel > .content > .sectionNotReady {
    display:block;
    padding: 15px;
    border-radius: 10px;
}

.tabControl > .editablePanel > .content > .sectionNotReady > .processSpinner {
    border-radius: 32px;
    margin: 10px auto;
    padding: 0;
}

.tabControl > .editablePanel > .content > .sectionNotReady .literalText {
    color: #00A7FF;
    font-weight: 600;
    text-align: center;
}

.tabControl > .editablePanel > .content > .sectionNotReady .literalText .editorField{
    width: 100%;
}

.tabControl > .editablePanel > .content > .sectionNotReady .literalText .plainText{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sectionNotReadyProcessingText {
    font-size: 1.2em;
}

.sectionNotReadyProcessingSubText {
    font-size: 0.9em;
}


/* Section disabled */
.mainTabControl.hasDisabledSection{
    height: 100%;
}

.tabControl > .editablePanel.sectionDisabled {
    position: absolute;
    display:block;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.tabControl.inlineTabControl > .editablePanel.sectionDisabled {
    position: relative;
    height: 128px;
}

.tabControl > .editablePanel.sectionDisabled > .content{
    top: 30%;
    position: relative;
}

.tabControl.inlineTabControl > .editablePanel.sectionDisabled > .content {
    top: 0;
}

.tabControl > .editablePanel.sectionDisabled .sectionDisabledIcon{
    position: relative;
    width: 100%;
    color: #f36e6e;
}

.tabControl > .editablePanel.sectionDisabled .literalText {
    font-weight: 600;
    text-align: center;
    margin-top: 30px;
}

.tabControl > .editablePanel.sectionDisabled .literalText .editorField{
    width: 100%;
}

.tabControl > .editablePanel.sectionDisabled .literalText .plainText{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sectionDisabledText {
    font-size: 1.2em;
}

/* Worksheet Process Section */
.worksheetProcessSection > .editablePanel.scrollContent > .content {
    border-top: none;
}

.worksheetProcessSection > .editablePanel > .content > .worksheetProcess {
    padding: 0 10px;
}


/* Links Section */
.linksSection > .editablePanel > .content {
    padding-left: 10px;
    padding-right: 10px;
}

.linksSection > .editablePanel > .content > .link:hover, .linksSection > .editablePanel > .content > .panel > .fieldsContainer > .link:hover {
    background-color: #F3F3F3;
}

.linksSection > .editablePanel > .content > .link, .linksSection > .editablePanel > .content > .panel > .fieldsContainer > .link {
    line-height: 48px;
    height: 48px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: inherit;
    display:block;
    padding: 10px;
}

.linksSection > .editablePanel > .content > .link > .icon48, .linksSection > .editablePanel > .content > .panel > .fieldsContainer > .link > .icon48 {
    float: left;
    margin-right: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

/* Charts Section */
.chartsSection.inlineTabControl > .editablePanel > .content > .chartContainer.singleChart > .chartTitle {
    display: none;
}

.naturalViewSection.inlineTabControl, .previewSection.inlineTabControl, .documentPreviewSection.inlineTabControl {
    min-height: var(--ciaHeightMinInlineSectionHeight);
}

.linkedTabbedControl, .tabsContainer_LinkedTab {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.tabHandlesOuterContainer_LinkedTab {
    display: none;
}

.tabHandlesOuterContainer_LinkedTab.visible {
    display: block;
}

.tabHandlesOuterContainer_LinkedTab.vert {
    width: 250px;
    vertical-align: top;
    padding: 0;
    height: 100%;
    border-top: none;
    border-left: none;
    border-bottom: none;
    position:relative;
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    float:left;
}

.tabHandlesOuterContainer_LinkedTab.vert.collapsed{
    width:60px;
}

/* when collapsed, give last tabHandle some margin to avoid overlapping with expand/collapse button */
.tabHandlesOuterContainer_LinkedTab.vert.collapsed .tabHandlesInnerContainer_LinkedTab .tabHandle_LinkedTab:nth-last-child(2){
    margin-bottom:50px;
}

.tabHandlesOuterContainer_LinkedTab.vert.collapsed .tabsContainer_ExpandCollapse{
    left:30px;
}

.tabHandlesOuterContainer_LinkedTab.vert.collapsed .tabHandle_LinkedTab.vert {
    min-height:24px;
}

.tabHandlesOuterContainer_LinkedTab.vert.collapsed .tabHandle_LinkedTab .summary > *:not(.summaryImage){
    display:none;
}

.tabHandlesOuterContainer_LinkedTab.vert.collapsed .tabsContainerExpandCollapseButton:before {
    content: "\E246";
}

.tabsContainer_ExpandCollapse{
    position: absolute;
    bottom:15px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    left: 220px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabsContainer_ExpandCollapse .iconControl{
    background: transparent;
}

.tabsContainerExpandCollapseButton:before {
    content: "\E247";
}

.handleInitials{
    display:flex;
    justify-content: center;
    align-items: center;
    width:20px;
    height:20px;
    font-family: inherit;
    font-size: var(--ciaFontSize-default);
    padding:3px;
    color: #000;
}

@media (max-width: 800px) {
    .tabHandlesOuterContainer_LinkedTab.vert {
        width: 200px;
    }
}

.tabHandlesOuterContainer_LinkedTab.vert > .tabHandlesInnerContainer_LinkedTab {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(255,255,255,0.3);
}

.tabControlsOuterContainer_LinkedTab {
    position:relative;
    padding:0;
    overflow: hidden;
    background-color: #FFF;
}

.tabControlsInnerContainer_LinkedTab,
.tabHandlesOuterContainer_LinkedTab.vert ~ .tabControlsOuterContainer_LinkedTab,
.tabHandlesOuterContainer_LinkedTab.horiz.hidden ~ .tabControlsOuterContainer_LinkedTab,
.popupContainer_LinkedTab > .popup > .content > .popupContentInnerContainer {
    height: 100%;
}

.tabControlsInnerContainer_LinkedTab,
.popupContainer_LinkedTab > .popup > .content > .popupContentInnerContainer {
    overflow: hidden;
}

.tabControlsInnerContainer_LinkedTab > .tabControl,
.linkedTabControlsContainer > .tabControl {
    width: 100%;
    display: none;
    position: relative;
}

.ipad.safari .tabControlsInnerContainer_LinkedTab,
.ipad.safari .popupContainer_LinkedTab > .popup > .content > .popupContentInnerContainer,
.ipad.safari .tabControlsInnerContainer_LinkedTab > .tabControl,
.ipad.safari .linkedTabControlsContainer > .tabControl {
    -webkit-transform: translate3d(0, 0, 0);
}

.tabControlsInnerContainer_LinkedTab > .tabControl.selected,
.linkedTabControlsContainer > .tabControl.selected {
    display: block;
}

.linkedTabControlsContainer > .tabControl {
    float: left;
}

.linkedTabControlsContainer > .tabControl.active {
    display: block;
}

.linkedTabNavigationButton {
    margin-left: 10px;
}

.linkedTabNavigationButton.floatRight {
    margin-right: 10px;
}

.linkedTabControl .thumbnailItem.selected .headCol {
    color: #b65819;
    font-weight: bold;
}

.linkedTabControl.leftTabControl {
    padding-right: 5px;
    box-sizing: border-box;
}

.linkedTabControl.rightTabControl {
    padding-left: 5px;
    box-sizing: border-box;
}

.mainTabControl > .editablePanel > .content {
    overflow-x: hidden;
}

.tabControl > .editablePanel > .topActionPane > .previous > .buttonLabel, .tabControl > .editablePanel > .topActionPane > .next > .buttonLabel {
    min-width: 50px;
}

.tabControl.maximizedTab > .editablePanel > .linkedTabNavigationButton {
    display: none;
}


.tabHandlesMoreButton_LinkedTab {
    position: relative;
    float: right;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
}

.tabHandlesMoreButton_LinkedTab:hover {
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.tabHandlesMoreButton_LinkedTab > .dropdownControl > .dropdownControlButton {
    border: none;
    background: none;
    box-shadow: none;
    padding: 13px;
}

.associatedDropDownItemTabHandle_LinkedTab {
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}


/*  Inline Tabs */
.inlineTabContainerPanel > header > .linkedTabNavigationButton {
    padding: 1px;
    border: none;
    background: none;
    box-shadow: none;
    opacity: 0.5;
    margin-left: 0;
}

.inlineTabContainerPanel > header > .back.linkedTabNavigationButton {
    margin-left: -25px;
}

.inlineTabContainerPanel > header:hover > .linkedTabNavigationButton {
    opacity: 1;
}

.inlineTabContainerPanel > .expandable.collapsed > .expando {
    display: block !important;
}

.inlineTabContainerPanel > .expandable.collapsed > .linkedTabNavigationButton {
    display: none;
}

.inlineTabContainer::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.inlineTabContainer > .inlineTabControl {
    display: none;
    float: left;
    width: 100%;
    visibility: hidden;
    position: relative;
}

.inlineTabContainerPanel > .inlineTabContainer.hasTransition{
    position: relative;
    z-index: 1;
}

.inlineTabControl > .editablePanel {
    padding-top: 0;
    padding-bottom: 0;
}

.inlineTabControl > .editablePanel > .header {
    display: none;
}

.inlineTabControl.fixedSection > .editablePanel.hasHeader > .header:not(.hidden) {
    display: block;
}


.inlineTabControl > .editablePanel.noHeader.hasTopActions > .content {
    margin-top: 0;
}

.inlineTabControl > .editablePanel > .topActionPane {
    padding: 0;
}

.inlineTabContainerPanel.hasHeader > .inlineTabContainer > .inlineTabControl > .editablePanel > .topActionPane {
    margin-top: -44px;
}

.inlineTabContainerPanel.noHeader > .inlineTabContainer > .inlineTabControl > .editablePanel.hasHeader.hasTopActions > .header {
    display:block;
    visibility: hidden;
}

.inlineTabControl.active {
    display: block;
}

.inlineTabContainer > .inlineTabControl.displayedLinkedTabControl {
    visibility: visible;
}

.inlineTabControl > .editablePanel > .content > .fieldSet:first-child {
    margin-top: 0;
}

.inlineTabControl > .editablePanel > .topActionPane > .dropDownControlContainer > .dropdownControl > .dropdownControlButton > .glyph:before {
    font-size: 12px;
    line-height: 12px;
}

.inlineTabControl > .editablePanel > .topActionPane > .dropDownControlContainer:hover > .dropdownControl > .dropdownControlButton {
    opacity: 1;
}

.inlineTabContainer.performingTransition > .inlineTabControl > .editablePanel > .topActionPane {
    display:none;
}

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

.inlineTabContainerPanel > .overlay > .durationSpinner {
    margin-top: -34px;
    background-image: none;
    opacity: 0.25;
}


/* Section Not Ready */
.tabHandle_LinkedTab.vert.sectionNotReady {
    padding-right: 52px;
}

.tabHandle_LinkedTab.sectionNotReady > .processSpinner {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 20px;
    border-radius: 12px;
}


/* Side Bar Section */
.linkedTabbedControl.showSideBar.hasSideBar > .tabsContainer_LinkedTab {
    float: left;
    width: 100%;
}

.linkedTabbedControl.vert.showSideBar.hasSideBar > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .tabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl.linkedTabControlFullSize > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .rightTabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl > .editablePanel > .linkedTabNavigationButton.floatRight {
    margin-right: 30px;
    transition: margin 0.1s ease-in-out;
}

.linkedTabbedControl.vert.showSideBar.hasSideBar > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl > .editablePanel > .linkedTabNavigationButton.floatRight {
    margin-right: 40px;
}

.linkedTabbedControl.vert.showSideBar.hasSideBar.sideBarExpanded > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .tabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar.sideBarExpanded > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar.maximized > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .tabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar.maximized > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl > .editablePanel > .topActionPane,
.linkedTabbedControl.vert.showSideBar.hasSideBar.maximized > .tabsContainer_LinkedTab > .tabControlsOuterContainer_LinkedTab > .tabControlsInnerContainer_LinkedTab > .linkedTabControlsContainer > .tabControl > .editablePanel > .linkedTabNavigationButton.floatRight {
    margin-right: 0;
}

.waitingForSideBarToLoad {
    display:none !important;
}

.sideBarOuterContainer_LinkedTab {
    height:100%;
    display: none;
    position: relative;
}

.linkedTabbedControl.showSideBar.hasSideBar > .sideBarOuterContainer_LinkedTab {
    display: block;
    float: left;
    width: 0;
    box-sizing: border-box;
}

.linkedTabbedControl.showSideBar.hasSideBar > .sideBarOuterContainer_LinkedTab .sideBarSectionSwitcherContainer_LinkedTab {
    border-left: solid 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.sideBarOuterContainer_LinkedTab > .sideBarSectionSwitcherContainer_LinkedTab {
    display: none;
    height: 100%;
    position: relative;
}
.linkedTabbedControl.showSideBar.hasSideBar.sideBarExpanded > .sideBarOuterContainer_LinkedTab > .sideBarSectionSwitcherContainer_LinkedTab {
    display: block;
}

.sideBarSectionSwitcherContainer_LinkedTab > .overlay > .durationSpinner {
    background: none;
    opacity: 0.5;
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher > .sectionSwitcherTabsContainer > .sectionSwitcherTabControl > .editablePanel {
    padding-left: 10px;
    padding-right: 10px;
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher > .sectionSwitcherTabsContainer > .sectionSwitcherTabControl > .editablePanel > .topActionPane {
    margin-right: 25px;
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher > .sectionSwitcherTabsContainer > .sectionSwitcherTabControl > .editablePanel > .header {
    margin-right: 35px;
    display: block;
    height: 30px;
}

.sideBarSectionSwitcherContainer_LinkedTab.loading ~ .sideBarExpandCollapseButton_LinkedTab.collapse {
    z-index: 9005;
}

.sideBarExpandCollapseButton_LinkedTab {
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 10px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
}

.linkedTabbedControl.showSideBar.sideBarAlwaysExpanded .sideBarExpandCollapseButton_LinkedTab{
    display: none;
}

.sideBarExpandCollapseButton_LinkedTab:before {
    font-family: iconGlyph;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
}

.sideBarExpandCollapseButton_LinkedTab.collapse {
    right: 10px;
    z-index: 1;
    border-radius: 3px;
}

.sideBarExpandCollapseButton_LinkedTab.collapse:hover {
    background-color: rgba(0,0,0,0.2);
}

.sideBarExpandCollapseButton_LinkedTab.collapse:before {
    content: "\E246";
}

.sideBarExpandCollapseButton_LinkedTab.expand {
    left: -30px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.sideBarExpandCollapseButton_LinkedTab.expand:before {
    content: "\E247";
}

.linkedTabbedControl.maximized > .sideBarOuterContainer_LinkedTab > .sideBarExpandCollapseButton_LinkedTab {
    display: none;
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher div::-webkit-scrollbar-thumb:vertical,
.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher div::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(0,0,0,0.25);
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.35);
}

.sideBarSectionSwitcherContainer_LinkedTab > .sectionSwitcher div::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: none;
}

/* Linked Section Popup */
.popupContainer_LinkedTab > .popup > .content {
    padding: 0;
}

.popupContainer_LinkedTab > .popup > .content > .popupContentInnerContainer {
    width:100%;
}

.popupContentInnerContainer > .linkedTabControlsContainer {
    height:100%;
    width:100%;
}

.popupContentInnerContainer > .linkedTabControlsContainer > .tabControl {
    height:100%;
}

.popupContentInnerContainer > .linkedTabControlsContainer > .tabControl > .editablePanel {
    padding: 0;
}

.edit.showIcon > .buttonLabel {
    min-width: 0;
}

.maximizeSection > .icon16:before {
    content: "\E096";
}

.minimizeSection > .icon16:before {
    content: "\E095";
}

.attachmentsSection .attachments {
    min-height: 0;
    overflow: visible;
    height: inherit;
}

.naturalViewSection, .previewSection, .documentPreviewSection {
    height: 100%;
}


/* Related Data Portlet Section */
.relatedDataPortletSection > .editablePanel > .content{
    border-top: none;
}


/* Natural View Section */
.naturalViewSection.inlineTabControl, .previewSection.inlineTabControl, .documentPreviewSection.inlineTabControl {
    height: auto;
}

.naturalViewSection > .editablePanel > .topActionPane > .contentNavigator {
    float: left;
}

.naturalViewSection.inlineTabControl > .naturalViewSectionContainer, .naturalViewSection.rightTabControl > .naturalViewSectionContainer, .linkedTabControlFullSize ~ .naturalViewSection > .naturalViewSectionContainer {
    background: transparent;
}

.naturalViewSection.inlineTabControl > .editablePanel > .content > .naturalViewContainer > .iFrameContainer > .naturalViewScaleWrapper > .iFrame {
    min-height: 0;
    height: 70px;
}

.naturalViewSection.inlineTabControl > .editablePanel > .content > .naturalViewContainer > .iFrameContainer > .naturalViewScaleWrapper > .iFrame.loaded {
    height: auto;
}


/* Document Preview Section */
.documentPreviewSection > .editablePanel.image > .content {
    text-align: center;
}

.documentPreviewSection > .editablePanel.image > .content > img {
    max-width: 100%;
}

.pdfJsNotSupportedMessage {
    text-align:center;
    font-size: 1.1em;
    margin-top: 100px;
}

.sectionSwitcherSelected > .editablePanel > .content > .pdfJsNotSupportedMessage {
    color: #FFF;
}


/* Charts Section */
.chartsSection > .editablePanel > .content > .chartContainer {
    margin-top: 5px;
}

.chartsSection > .editablePanel > .content > .chartContainer:first-child {
    margin-top: 0;
}


/* Forms Section */
.formSection.mainTabControl > .editablePanel > .topActionPane > .formsPageCounter {
    line-height: 30px;
    margin-right: 5px;
    vertical-align: middle;
    padding: 0;
}


/* Analytics Section */
.analyticsSection > .editablePanel > .content > .iFrameContainer > .iFrame {
    min-height: 0;
}

.analyticsSection > .editablePanel > .content > .iFrameContainer {
    overflow: auto;
}

.analyticsSection > .editablePanel > .content > .iFrameContainer.autoWidth {
    width: 100% !important;
}

.linkItem {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.linkItem.enabled {
    cursor: pointer;
}

.linkItemOuterContainer {
    position: relative;
    padding: 10px;
}

.linkItemOuterContainer:focus {
    outline: none;
}

.linkItem.enabled:hover > .linkItemOuterContainer {
    background-color: #F3F3F3;
}

.linkItemInnerContainer {
    height: 48px;
    line-height: 48px;
}

.linkItem.hasJobId > .linkItemOuterContainer > .linkItemInnerContainer {
    margin-right: 58px;
}

.linkItemImageContainer {
    position: relative;
    float: left;
    display: block;
    z-index: 1;
    margin-right: 10px;
}

.linkItemImage {
    padding: 0;
    display: block;
    border-radius: 4px;
    background-size: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
    width: 48px;
    height: 48px;
}

.linkItemHeading {
    display:  block;
    vertical-align: top;
    font-size: 1.2em;
    font-weight: 600;
    overflow:hidden;
    text-overflow: ellipsis;
}

.linkItem.disabled > .linkItemOuterContainer > .linkItemInnerContainer > .linkItemImageContainer > .linkItemImage,
.linkItem.disabled > .linkItemOuterContainer > .linkItemInnerContainer > .linkItemHeading {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}

.linkItem.disabled > .linkItemOuterContainer > .linkItemInnerContainer > .linkItemImageContainer > .linkItemImage {
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
}

.linkItemJobSpinner {
    position: absolute;
	top: 50%;
    margin-top: -16px;
    opacity: 0.5;
    right: 26px;
}
.linksToFunctionsContainer {
    position: relative;
    overflow: hidden;
}

.linkToFunction {
    padding: 4px 10px;
    margin: 0;
    float: left;
    text-align: center;
    min-width: 60px;
    color: #fff;
}

.linkToFunction .notificationCount {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px;
    margin-left: 10px;
    line-height: 10px;
    min-width: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: none;
    position: relative;
    margin-top: -16px;
}

.linkToFunction.mainBGCol5 {
    color: #000;
}

.linkToFunction:hover:not(.mainBGCol5) {
    cursor: pointer;
}

.linkToFunctionImage {
    height:32px;
    width:32px;
    margin-right: 10px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

.linkToFunctionHeading {
    font-size: 1.1em;
    line-height: 32px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gridColumnChooser {
    padding: 0 10px;
}

   .listItemChooser > .header {
       line-height: 30px;
   }

    .listItemChooser > * {

        padding:5px 0;
    }

    .listItemChooser > .content {
        padding: 5px 10px;
        position: absolute;
        top: 45px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /*--------------- Header -----------------------*/
    .listItemChooser .header {
        /*border-bottom: solid 1px;*/
    }

    .listItemChooser .header h1 {
        font-size:1.2em;
        font-weight:normal;
        line-height:26px;
    }

    .listItemChooser .header > * {
        display: inline-block;
    }

    .listItemChooser .header button {
        float: right;
        margin-left: 5px;
        min-width:60px;
    }

   /*--------------- Content -----------------------*/
   .listItemChooser > .content > * {
       position: relative;
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        padding:0 20px;
        vertical-align:top;
       height: 100%;
    }

    .listItemChooser .selectedItems {
        float: right;
    }

   .listItemChooser button.columnChooserSearch {
        margin-right: 5px;
        display: inline-block;
   }

    /*------------ All Columns-------------*/

    /*.listItemChooser .allItems
    {
        width: 48%;
        vertical-align: top;
    } */

    /*-- Search Panel --*/
    .listItemChooser .searchPanel
    {
        position: relative;
        margin-bottom: 5px;
        white-space: nowrap;
    }

    .listItemChooser button.expando {
        position: absolute;
        top: 0px;
    }
    .listItemChooser .searchPanel button.expando {
         display: none;
    }

    .listItemChooser .categorise .searchPanel button.expando {
        display: block;
        margin-left:9px;
        padding: 2px;
        margin-top: 5px;
    }

    .listItemChooser .categorise .searchPanel button.expando .icon16:before {
        vertical-align: top;
    }

    .listItemChooser div.searchPanel div.searchInput {
        position: relative;
        display: inline-block;
        width: 30%;
    }

    .listItemChooser .categorise div.searchInput {
        margin-left: 41px;
    }

    .listItemChooser .searchInput input {
        width: 100%;
        height: 30px;
        padding-right: 30px;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .listItemChooser .searchInput .icon16 {
        position: absolute;
        top: 7px;
        right: 7px;
        opacity: 0.75;
    }

    .listItemChooser .searchInput .icon16:before {
        content: "\E044";
    }

    .listItemChooser .setSortOrder .icon16:before {
        content: "\E126";
    }

    .listItemChooser .searchPanel .searchInput input:focus {
        border-color: #939393;
    }


    .listItemChooser .actionButtons {
         position:relative;
        display: inline-block;
    }

    .listItemChooser button.categorise {
         border-bottom-right-radius: 0px;
         border-top-right-radius: 0px;
         margin-right: 0px;
    }

    .listItemChooser button.sort {
        margin-left: -2px;
        border-bottom-left-radius:0;
        border-top-left-radius:0;
        margin-right:5px;
    }


      .listItemChooser button.categorise, .listItemChooser button.categorise:hover,
      .listItemChooser button.sort, .listItemChooser button.sort:hover {
        border: solid 1px transparent;
    }

    .listItemChooser button.categorise:hover, .listItemChooser button.sort:hover,
    .listItemChooser .actionButtons button.selected {
        background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac60.png?v=12.0.253.0');
        opacity: 1;
    }

     /* Item and Category Label Text */

     .listItemChooser .itemsList.draggableList .item {
        cursor:move;
     }


     .listItemChooser .itemsList .item > span{
        margin-left: 35px;
        line-height:30px;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        overflow: hidden;
     }

     .listItemChooser .itemsList.draggableList .item > span {
        margin:0;


     }

     .listItemChooser .itemsList.draggableList .item:before {
        content:"";
        display:inline-block;
        float:left;
        width:30px;
        height:30px;
        margin-right: 5px;
        background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/gripper.png?v=12.0.253.0') no-repeat center;
     }

     #frozenLine {
        text-align: center;
        position: absolute;
        left: 30px;
        right: 10px;
        display: inline-block;
        border-bottom: 3px solid #ddd;
        box-shadow: 0 1px 0 0px #ccc;
     }

     .listItemChooser .categoryHeader {
         padding: 2px 4px;
         border-bottom: solid 1px rgba(0, 0, 0, 0.1);
         /*border-top:solid 1px #fff;
         border-bottom:solid 1px;*/
     }

     .listItemChooser .categoryHeader span {
         font-weight: 600;
         text-overflow: ellipsis;
         white-space: nowrap;
         display: block;
         overflow: hidden;
         /*line-height: 30px;
         margin-left: 35px;*/
     }

     .listItemChooser .categoryHeader .icon16 {
         font-weight: normal;
     }



     .listItemChooser .allItems .itemsList button.addItem,
     .listItemChooser .itemsList.draggableList .item > button.delete {
         /*background-image: none;
         border: none;
         border-radius: 50%;
         background-color: rgba(0, 0, 0, 0.35);
         padding: 0;
         margin: 7px 7px 0 14px;
         opacity: 0.35;*/
         margin-top: 4px;
         margin-right: 5px;
         padding: 2px;
     }

     .listItemChooser .itemsList.draggableList .item > button.delete .icon16 {
         /*color: #fff;
         font-size: 12px;*/
     }

     .listItemChooser .itemsList.draggableList .item > button.delete:hover {
         /*opacity: 1;*/
     }


     /* Item Category */


     .listItemChooser .allItems .itemsList button.addItem,
     .listItemChooser .itemsList.draggableList .item > button.delete {

     }

     .listItemChooser .allItems .itemsList button.addItem:hover,
     .listItemChooser .itemsList.draggableList .item > button.delete:hover {
         background-color: rgba(0, 0, 0, 0.35);
         color: #fff;
     }


     /*.listItemChooser .allItems .itemsList .item button.addItem {
        opacity:0.7;
     }

     .listItemChooser .allItems .itemsList .item:hover button.addItem {
        opacity:1;
     }*/

     .categoryHeaderLabel {
         margin-right: 30px;
     }


     .listItemChooser .itemCategory button.expando {
         position: relative;
         float: none;
         width: 100%;
         text-align: left;
         margin-top: 0;
         padding: 6px;
         border: solid 1px transparent;
     }

     .listItemChooser .itemCategory button.expando .icon16 {
         float: left;
         margin-right: 12px;
     }

     /*------------------ Selected Columns -------------------*/

     .listItemChooser .itemsList button,
     .listItemChooser .selectedItems .listHeader button.delete,
     .listItemChooser .selectedItems .setSortOrder  {
         float: right;
     }


     .listItemChooser .selectedItems .item.sortDesc .setSortOrder {
        background-image: none;
        background-color: #fff;
     }

     .listItemChooser .item.move {
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
     }

     .listItemChooser .selectedItems .itemsList button.move.down {
         margin-right: 15px;
     }

     /*----------------------- List Items ----------------------*/

     .listItemChooser .itemsList {
         overflow-y: scroll;
         border-style: solid;
         border-width: 1px;
         position: absolute;
         left: 20px;
         right: 20px;
         top: 40px;
         bottom: 10px;
         height: auto;
     }


    .listItemChooser .itemsList .noItems {
        position: absolute;
        top: 45%;
        width: 98%;
        text-align: center;
        min-height: 100px;
    }

    .listItemChooser .item {
        /*border-top:solid 1px #fff;*/
        border-bottom: solid 1px rgba(0,0,0,0.1);
        padding:2px 4px;
    }

    .listItemChooser .item:hover, .itemChooser .item:hover {
        background-color: var(--ciaColourBackgroundHighlightHover);
    }

    .listItemChooser .allItems .item {
        cursor:pointer;
    }

    .listItemChooser .allItems .item.restricted {
/*
        opacity:0.2;
        cursor: default;
*/
        display: none;
    }

    .listItemChooser .item.actionButton .icon16,
    .listItemChooser .itemCategory .categoryHeader .icon16 {
        margin: 0;
        vertical-align: top;
        line-height: 16px;
    }

    .listItemChooser .selectedItems .listHeader {
        position: relative;
        min-height: 30px;
        margin-bottom: 5px;
    }

    .listItemChooser .selectedItems .listHeader .title {
        padding-right: 30px;
    }

    .listItemChooser .selectedItems .title {
        padding: 7px 0 7px 0;
        line-height: 16px;
        text-overflow: ellipsis;
        margin-right: 116px;
        overflow: hidden;
        white-space: nowrap;
        font-weight: 600;
    }

     .listItemChooser .selectedItems .title > .smallText {
         font-weight: normal;
     }


     .listItemChooser .allItems .searchPanel button.addItem,
     .listItemChooser .selectedItems .listHeader button.delete {

        padding: 2px;
        right:10px;
        top:6px;
        font-size: 0.9em;
        /*border: none;
        border-radius: 10px;*/
        opacity: 0.75;
    }

    .listItemChooser .selectedItems .listHeader button.delete {
        position: absolute;
    }

    .listItemChooser .categorise .searchPanel button.expando:hover,
    .listItemChooser .allItems .searchPanel button.addItem:hover,
    .listItemChooser .selectedItems .listHeader button.delete:hover {
        opacity: 1;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.35);
    }


    .listItemChooser .hasRestrictCheckbox .itemsList {
        bottom: 40px;
    }

    .listItemChooser .restrictCheckbox {
        position:absolute;
        bottom:0px;
    }


    @media only screen and (device-width: 768px) and (orientation: landscape)
    {

      .listItemChooser .actionButtons {
          right:4px;
      }

      .listItemChooser .selectedItems .listHeader button.delete {
          right: 5px;
      }

    }

body.ipad.onCustomiseColumnDrag { /* iPad specific drag - where body tends to scroll while dragging an item. */
    position: fixed;
    width:100%;
    height: 100%;
    overscroll-behavior-y: contain;
    overflow: hidden;
}

.plainText, .htmlText, .paraText
{
    padding: 5px 0;
    word-break: break-word;
}

.sideBySideContainer .styleContainer + .paraText {
    line-height: 20px;
    padding: 4px 0;
    border: solid 1px transparent;
    margin-top: 4px;
}

.htmlText p, .htmlText ul, .htmlText ol {
    margin: 1em 0;
    line-height: 1.5em;
}

.htmlText ul, .htmlText ol {
    padding: 0 0 0 40px;
}

.htmlText ul ul, .htmlText ol ol, .htmlText ul ol, .htmlText ol ul  {
    margin: 0;
}

.htmlText ul {
    list-style-type: disc;
    list-style-position: inside;
}

.htmlText ol {
    list-style-type: decimal;
    list-style-position: inside;
}

.htmlText ol ul, .htmlText ul ul {
   list-style-type:circle;
}

.htmlText ol ol ul, .htmlText ol ul ul, .htmlText ul ol ul, .htmlText ul ul ul{
    list-style-type: square;
}

.literalText.controlContainer{
    padding: 0;
    overflow: hidden; /* do not allow contents to exceed the container - this helps with borders, background colours etc */
}
.literalText .editorLabelAutoWidth {
    display: inline-block;
}
.literalText.controlContainer.stackedStyle > .editorField{
    display: block;
}

.literalText.controlContainer > .editorField{
    padding: 4px 0;
    display: inline-block;
}

.literalText.controlContainer > .glyph{
    top:5px;
    position: relative;
    margin-right: 5px;
}

.literalText.controlContainer.dataFldPadding0 > .glyph{
    top: 0;
}

.literalText > * {
    box-sizing: border-box; /*inner elements may have paddings and widths. This ensures the widths are calculated correctly */
}

/* Summary form override */
.summaryForm .literalText.controlContainer > .editorField { padding: 2px 0; }
.summaryItem .rightContent .literalText .glyph { margin-right:0; }
.summaryItem .rightContent .literalText { margin-bottom:0; }


.consumerStyle .htmlText strong {
    font-family:inherit !important;
    font-size:inherit !important;
}


.map-control-toolbar-row > a {
    width: 26px;
    height: 26px;
    display: inline-block;
}

.leaflet-container a.map-control-tool-button {
    opacity: 0.85;
    color: black;
}

a.map-control-tool-button.map-control-toolbar-enabled {
    color: orangered;
    outline-style: none;
    opacity: 1;
    /*background-color: rgba(0, 0, 0, 0.15);*/
    /*border-radius: 4px;*/
}

a.map-control-tool-button {
    text-align: center;
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-family: 'iconGlyph';
    text-indent: 1px;
    background-image: none;
    padding-top: 0px;
    height: 24px;
}

.map-control-fullscreen > a::after {
    content: "\E039";
}

a.map-control-nav-rectangle::after {
    content: '\E302';
}


.map-control-selection-toggle-plus::after {
    content: '\E566';
    /*float: left;*/
    /*border-right:1px solid #ababab;*/
    /*opacity: 0.85;*/
}

.map-control-selection-toggle-minus::after {
    content: '\E567';
    /*opacity: 0.85;*/
}

.leaflet-bar {
    boarder: none;
}

.leaflet-bar > a.leaflet-control-zoom-fullscreen,
.leaflet-bar > a.map-control-zoom-rectangle-button,
.map-control-gps.leaflet-bar.leaflet-control > a,
.leaflet-control-layers.leaflet-control > a,
.map-control-entity-actions.leaflet-bar > a,
.map-control-layer-switcher-buttons.leaflet-bar > a,
.map-control-toolbar-row > a,
.map-control-selection-toggle > div {
    font-family: 'iconGlyph';
    background-size: auto 26px;
}

.map-control-nav-zoom-in::after {
    content: '\E146';
}

.map-control-nav-zoom-extent::after {
    content: '\F055' ;
}

.map-control-nav-zoom-out::after {
    content: '\2212';
}

div.map-controls-layer-switcher-menu-container {
    position: absolute;
    right: 40px;
}

div.map-controls-layer-switcher-menu-list {
    display: flex;
    flex-direction: column;
}

div.map-controls-layer-switcher-menu > form > div > label {
    display: flex;
    flex-direction: row;
}

.map-control-layer-switcher-buttons.leaflet-bar > a.map-control-layer-switcher-buttons-base-maps-button::after {
    content: '\E591';
}

.map-control-layer-switcher-buttons.leaflet-bar > a.map-control-layer-switcher-buttons-overlays-button::after {
    content: '\E255';
}

.map-control-fullscreen {
    float: right;
    border: none !important;
    background-clip: padding-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

.map-control-linktoenterprise {
    float: right;
    border: none !important;
    background-clip: padding-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

.map-control-indoormapcontrol {
    float: right;
    border: none !important;
    background-clip: padding-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

.map-control-toolbar-row > a.map-control-selection-clear::after {
    content: "\E572";
}

.map-control-fullscreen.map-control-fullscreen-shrink > a::after {
    content: "\F039";
}

.map-control-nav-gps-tracking::after {
    content: '\E581';
    color: dodgerblue;
}

.map-control-nav-gps-shown::after {
    content: '\E565';
    color: dodgerblue;
}

.map-control-nav-gps-off::after {
    content: '\E565';
    color: lightgray;
}

.leaflet-retina a.map-control-selection-point::after,
a.map-control-selection-point::after {
    content: '\E575';
}

.leaflet-retina a.map-control-selection-circle::after,
a.map-control-selection-circle::after {
    content: '\E576';
}

.leaflet-retina a.map-control-selection-rectangle::after,
a.map-control-selection-rectangle::after {
    content: '\E577';
}

.leaflet-retina a.map-control-selection-freeform::after,
a.map-control-selection-freeform::after {
    content: '\E578';
}

a.map-control-draw-polyline::after {
    content: '\E573';
}
a.map-control-draw-polygon::after {
    content: '\E574';
}
a.map-control-draw-rectangle::after {
    content: '\E558';
}
a.map-control-draw-marker::after {
    content: '\E215';
}

a.map-control-draw-remove.leaflet-disabled::after {
    content: '\E057';
    color: lightgray;
}

a.map-control-draw-remove::after,
a.map-control-entity-actions-remove::after {
    content: '\E057';
}

a.map-control-entity-actions-pin-location::after {
    content: '\E596';
}

a.map-control-entity-actions-pin-center::after {
    content: '\E597';
}

.map-control-layer-switcher-buttons.leaflet-bar > a.map-control-layer-switcher-buttons-base-maps-button::after {
    content: '\E591';
}

.map-control-layer-switcher-buttons.leaflet-bar > a.map-control-layer-switcher-buttons-overlays-button::after {
    content: '\E255';
}

.map-marker-bulb.map-marker-selected {
    border: solid orange;
}

.map-marker-bulb.map-marker-active {
    border: dashed orange;
}

.map-marker-bulb.map-marker-info {
    border: dashed lightblue;
}

.map-marker-tail-border.map-marker-info {
    border-color: lightblue transparent transparent transparent;
}

.map-marker-tail-border.map-marker-active {
    border-color: orange transparent transparent transparent;
}

.map-marker-tail-border.map-marker-selected {
    border-color: orange transparent transparent transparent;
}

.map-control-floor-controls {
}

.map-control-floor-control-hidden {
    display: none !important;
}

.map-control-floor-switcher {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 154px;
}

.map-control-floor-button {
    color: black;
    font-size: 15px !important;
    font-family: Osans, Arial, Verdana, sans-serif !important;
    text-indent: 1px;
    width: auto !important;
    border-width: thin !important;
}

.map-control-floor-selected-button {
    background: #df6c00 !important;
    color: white !important;
}

.map-control-indoor-map-button-enabled {
    color: orangered !important;
    outline-style: none;
    opacity: 1;
}

.map-control-close-button {
    background: #e6e6e6 !important;
    border-width: thin !important;
    font-size: 17px !important;
    display: block;
    padding: 0px 10px 2px 10px;
    margin: 0px 0px 2px 0px;
}

.map {
    height: inherit;
    box-sizing: border-box;
}

.mapContainer {
    z-index: 1;
    border: solid 1px #e6e6e6;
    display: block;
    padding: 3px;
    height: 100%;
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
}

.relatedDataPortlet .views > .mapContainer {
    border: none;
}

.mapContainerInner .leaflet-control-container .leaflet-bar {
    border: none;
}

.leaflet-control
{
    z-index: auto !important;
}



.mapContainerInner {
    position: relative;
    width: auto;
    height: 100%;
}

/* Gutter region on the right for tablet devices */
.tablet .fieldsContainer .map {
    margin-right: 25px;
}

.pinCurrent {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    background-color: #fff;
    padding: 4px;
}

.fullscreen > .pinCurrent {
    z-index: 999999;
}

.map-cluster-tiny {
    background-color: rgba(75, 190, 65, 0.8);
    margin-left: 0px;
    margin-top: 0px;
    width: 10px;
    height: 10px;
}

.map-cluster-small {
    background-color: rgba(180, 255, 160, 0.6);
}
.map-cluster-small div {
    background-color: rgba(75, 190, 65, 0.6);
    width: 20px;
    height: 20px;
}
.map-cluster-small span {
    line-height: 20px;
}

.map-cluster-medium {
    background-color: rgba(255, 220, 90, 0.6);
}
.map-cluster-medium div {
    background-color: rgba(230, 185, 15, 0.6);
    width: 28px;
    height: 28px;
}
.map-cluster-medium span {
    line-height: 28px;
}

.map-cluster-large {
    background-color: rgba(240, 110, 60, 0.6);
}
.map-cluster-large div {
    background-color: rgba(220, 95, 70, 0.8);
    width: 35px;
    height: 35px;
}
.map-cluster-large span {
    line-height: 35px;
}

.map-cluster-white {
    background-color: rgba(240, 240, 240, 0.6);
}

.map-cluster {
    background-clip: padding-box;
    border-radius: 30px;
}
.map-cluster div {
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 25px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.map-marker-bulb-outerborder {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 35px;
    top: -2px;
    left: 0;
    box-sizing: border-box;
}

.map-marker-tail-outerborder {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 13px 0 13px;
    top: 25px;
    left: 5px;
}

.map-marker-bulb {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 4px solid;
    border-color: white;
    border-radius: 32px;
    top: 0;
    left: 2px;
    box-sizing: border-box;
}


.map-marker-tail {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 5px 0 5px;
    top: 25px;
    left: 13px;
}

.map-marker-tail-border {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: white transparent transparent transparent;
    top: 25px;
    left: 8px;
}

.map-marker-tail-border.map-marker-selected {
    border-color: orange transparent transparent transparent;
}

.map-selection-info {
    background-color: rgba(255, 255, 255, 0.8);
}


/* Selection */

/* Based on styles from leaflet & leaflet draw */
.map-selection a {
    display: block;
    text-align: center;
    text-decoration: none;
}

/*.leaflet-top, .leaflet-bottom, .leaflet-control-layers.leaflet-control {*/
    /*z-index: auto !important;*/
/*}*/

div.map-selection-toolbar-top {
    margin-top: 0;
}

.map-spinner {
    float: left;
    display: block;
    background: url(https://cdn.t1cloud.com/cianywhere/content/base/images/loaderlbg.gif?v=12.0.253.0) no-repeat;
    height: 16px;
    width: 16px;
    margin-top: 10px;
}

.map-control-toolbar-section:last-child {
    border-bottom: none;
}
.map-control-toolbar-section {
    border-top: 1px solid #d6dbdd;
    padding: 3px 7px 0px 5px;
}

.map-control-toolbar-content-expander {
    border-bottom: none;
    background-color: #e6e6e6;
}
.map-control-toolbar-content {
    background-color: #FFF;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.map-control-toolbar-header {
    font: normal 9px 'Open Sans', Monaco, monospace;
    padding-bottom: 2px;
    color: #757575;
}

.map-control-toolbar-content-expander {
    height: 20px;
    width: 64px;
}
.map-control-toolbar-content-expander a {
    float: right;
    width: 16px;
    height: 16px;
    font-family: 'iconGlyph';
    opacity: 0.75;
}

.map-control-toolbar-content-expander a:hover {
    text-decoration: none;
    opacity: 1;
}

.map-control-toolbar-content-expander a:before {
    content: "\E063";
    font-size: 10px;
    color: #919187;
}

.map-control-toolbar-content-expander.map-controls-toolbar-content-expander-collapsed  a:before {
    content: "\E064";
    font-size: 10px;
    color: #919187;
}


.map-control-toolbar > .map-control-toolbar-actions {
    display: block;
    position: absolute;
    left: 64px;
    background-color: #919187;
    border-radius: 0 4px 4px 0;
}

.map-control-toolbar > div.map-control-toolbar-actions > a:first-child {
    border-left: none;
}

.map-control-toolbar > .map-control-toolbar-actions > a {
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #AAA;
    height: 28px;
    line-height: 28px;
    text-decoration: none;
    color: #FFF;
    white-space: nowrap;
}

.map-control-fullscreen {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    border-radius: 4px;
}

/*--Custom Sprite images--*/

.mapContainerInner .leaflet-control-container .leaflet-bar {
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    background-clip: padding-box;
}

.leaflet-bar.leaflet-control > a, .leaflet-bar.leaflet-control > a:hover, .leaflet-draw-toolbar.leaflet-bar > a,
 .leaflet-draw-toolbar.leaflet-bar > a:hover, .leaflet-control-layers.leaflet-control > a, .leaflet-control-layers.leaflet-control > a:hover,
  .map-control-entity-actions.leaflet-bar > a,  .map-control-entity-actions.leaflet-bar > a:hover  {
    /*width: 26px;*/
    /*height: 26px;*/
    /*line-height: 26px;*/
}


.map-control-selection-toggle {
    text-align: center;
    border: 1px solid #ababab;
    border-radius: 4px;
    height: 21px;
    width: 49px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.map-control-selection-toggle > div {
    width: 24px;
    height: 22px;
    display: inline-block;
}

.leaflet-touch .leaflet-control-layers.leaflet-control > a.leaflet-control-layers-toggle {

}

.leaflet-touch .leaflet-retina a.map-control-selection-point, a.map-control-selection-point::after {
}

.leaflet-touch .leaflet-retina a.map-control-selection-circle, a.map-control-selection-circle::after {
}

.leaflet-touch .leaflet-retina a.map-control-selection-rectangle, a.map-control-selection-rectangle::after {
}

.leaflet-touch .leaflet-retina a.map-control-selection-freeform, a.map-control-selection-freeform::after {
}

.leaflet-touch a.map-control-draw-polyline::after {
}
.leaflet-touch a.map-control-draw-polygon::after {
}
.leaflet-touch a.map-control-draw-rectangle::after {
}
.leaflet-touch a.map-control-draw-marker::after {
}
.leaflet-touch a.map-control-draw-remove.leaflet-disabled::after {
}
.leaflet-touch a.map-control-draw-remove::after {
}

.leaflet-touch a.map-control-entity-actions-pin-location::after {
}
.leaflet-touch a.map-control-entity-actions-pin-center::after {
}

.leaflet-control-layers.leaflet-control > a.leaflet-control-layers-toggle {
}
.map-control-fullscreen > a {
}
a.map-control-nav-rectangle {
}


.map-popup-left {
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
}

.map-popup-image {
    position: absolute;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    background-size: 28px;
    left: 14px;
    top: 18px;
}

.map-popup-image-border {
    float: left;
    width: 50px;
    height: 100%;
    border-right-width: 3px;
    border-right-style: solid;
    background-color: white;
}

.map-popup-main-text {
    padding-top: 7px;
    margin-left: 70px;
    white-space: nowrap;
    line-height: 16px;
}

.map-popup-layer-text {
    text-transform: uppercase;
}

.map-popup-title-text {
    font-size: 120%;
}

.map-popup-title-text, .map-popup-layer-text, .map-popup-id-text {
    text-overflow: ellipsis;
    overflow: hidden;
}

.map-popup-right {
    height: 100%;
    float: right;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.map-popup-left-rounded-right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.map-popup-right-button {
    float: left;
    width: 50px;
    height: 100%;
    box-sizing: border-box;
    border-left: 2px solid rgb(224, 224, 224);
}

.map-popup-right-button:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
}

.map-popup-actions-icon-wrapper {
    text-align: center;
    position: relative;
}

/* We use a slightly specific selector due to a really weird issue that iPad has where an unrelated
 * selector is sometimes applied in error. This is an issue on iPad. */
body div.leaflet-here .dropdownControl > .handle > .map-popup-actions-icon {
    line-height: 60px;
    margin: auto;
    border-bottom: none;
    padding: 0px;
    font-size: 16px;
    display: block;
}

.map-popup-right-button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.map-popup-right-button:last-child:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
}

.map-popup-details-icon {
    margin: auto;
    line-height: 60px;
}

.map-popup-details-icon:before {
    content: '\E061';
    color: grey;
    font-weight: bold;
}

/* New popup styles */

.map-list-popup-wrapper-single .map-list-popup-info {
    height: 47px;
}

.map-list-popup-wrapper-single .map-list-popup {
    height: 50px;
}

.map-list-popup-wrapper-single .map-list-popup-button > div {
    padding-top: 17px;
}

.map-list-popup-wrapper-single .map-list-popup-image {
    margin-top: 11px;
}

.map-list-popup-wrapper {
    -ms-overflow-style: scrollbar;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    max-height: 140px;
    border-radius: 7px;
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2);
}
.map-list-popup {
    padding: 0px 0px 0px 4px;
    border-bottom: 1px solid lightgrey;
    height: 40px;
}
.map-list-popup-image {
    width: 32px;
    height: 32px;
    float: left;
    padding: 0px 6px 0px 0px;
    margin-top: 5px;
    margin-left: 4px;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 32px 32px;
}
.map-list-popup-colour {
    float: left;
    height: 100%;
    width: 3px;
}
.map-list-popup-info {
    padding-left: 5px;
    float: left;
    width: 220px;
    height: 37px;
    padding-top: 3px;
    overflow: hidden;
    white-space: nowrap;
}
.map-list-popup-info-highlighted {
    border-right-width: 2px;
    border-right-style :solid;
    width: 219px;
}
.map-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-list-popup-buttons {
    float: right;
    height: 100%;
}
.map-list-popup-button {
    border-left: 1px solid lightgrey;
    height: 100%;
    float: left;
 }
.map-list-popup-button:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
 }
.map-list-popup-button > div {
    width: 30px;
    padding-top: 12px;
 }
.map-popup-actions-icon:before,
.map-list-popup-button-actions:before {
     content: var(--ciaIconDropdownMore);
     color: grey;
 }
 .map-list-popup-button-actions .handle {
     padding: 0px;
 }
 .map-list-popup-button-details:before {
     content: '\E061';
     color: grey;
     font-weight: bold;
 }

/* Sometimes the 'actions' for LeafletDraw buttons wrap in a very ugly way. */
ul.leaflet-draw-actions {
    white-space: nowrap;
}

/* Styles for the 'map messages' message */
div.map-control-map-messages {
    margin: auto;
    width: 60%;
    background: white;
    border-radius: 4px;
    margin-top: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid lightgrey;
    display: none;
    float: none;
}

/* Styles for the 'too many features' message */
div.map-control-too-many-features {
    margin: auto;
    width: 60%;
    background: white;
    border-radius: 4px;
    margin-top: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid lightgrey;
    display: block;
    float: none;
    z-index: 1000 !important;
}

/* Styles for the layer switcher */

.map-control-layer-switcher-buttons.leaflet-bar {
    float: right;
   }

/*.leaflet-touch .map-control-layer-switcher-buttons.leaflet-bar > a, .leaflet-touch .map-control-layer-switcher-buttons.leaflet-bar > a:hover, */
/*.map-control-layer-switcher-buttons.leaflet-bar > a, .map-control-layer-switcher-buttons.leaflet-bar > a:hover,*/
/*.map-control-fullscreen > a {*/
    /*width: 34px;*/
    /*height: 34px;*/
    /*line-height: 34px;*/
    /*background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/core/map/mapsprite64.png?v=12.0.253.0');*/
    /*background-size: auto 32px;*/
    /*display: block;*/
/*}*/


div.map-controls-layer-switcher-menu-header {
    text-align: center;
    color: black;
    font-weight: bold;
    cursor: default;
    padding-top: 7px;
}

div.map-controls-layer-switcher-menu > form > div > label > span {
    white-space: nowrap;
    vertical-align: bottom;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow-x: hidden;
    display: inline-block;
    width: 130px;
}

div.map-controls-layer-switcher-menu-close {
    position: absolute;
    top: 7px;
    right: 7px;
}

div.map-controls-layer-switcher-menu-close:before {
    content: '\E058';
}

div.map-controls-layer-switcher-menu {
    position: relative;
    background-color: white;
    border-radius: 4px;
    padding: 0px 20px 8px 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-bottom: 1px solid grey;
    min-width: 120px;
}

.map-controls-layer-switcher-layer-colour {
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid black;
    margin: 3px 0 0 5px;
    float: right;
}

/* Do not remove -- this is to force the map controls to render using the 3d codepath.
 * Without this, on WebKit browsers (which have a known issue with DOM/Canvas interactions)
 * such as Safari on iOS, will flake out and the controls won't appear unless you wait
 * ~ 10 seconds or tap on the DOM near the error (ie on the map). */
.leaflet-top, .leaflet-bottom {
    -webkit-transform: translate3d(0, 0, 0);
}

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

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

.menuContainerH .dropDownControlContainer > .dropdownControl > button > .notificationCount {
    position: relative;
    margin-top:-5px;
    font-size: 0.8em;
}

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


#googlefedlogininstructions, #googlefedloginappmaint, #facebookfedloginappmaint, #microsoftfedloginappmaint, #saml20fedloginappmaint
{
    margin-top: -10px;
}

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

.messagePanel
{
    position: relative;
    margin: 5px 0;
    padding-left: 40px;
    padding-top: 7px;
    padding-right: 5px;
    min-height:30px;
}

.messagePanel .iconContainer{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 5px 10px;
}

.messagePanelContents {
    padding-left: 8px;
    padding-bottom:10px;
    padding-top: 7px;
}

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

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

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

.naturalLanguageSearch.readonly .readOnlyNLValue {    
    white-space: pre-wrap;
    word-break: break-word;
}

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

.naturalLanguageSearch.isCriteriaBuilder {
    width: auto;
}

.naturalLanguageSearch.hidden {
    display: none;
}

.stackedContainer > .naturalLanguageSearch {
    float: none;
}

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

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

.stackedContainer .naturalLanguageSearch > .tbcEditorLabel {
    display: block;
}

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

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

.naturalLanguageSearch .readOnlyNLValue {
    padding: 5px;
}

.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 {
    height: 16px;
    margin-right: 26px;
    width: 408px;
}

.naturalLanguageSearch.isCriteriaBuilder.nlsfocused .naturalLanguageSearchInputWrapper textarea {
    height: 85px;
    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;
    background-color: transparent;
}

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

.hasClearButton > .inputClearButton {
    display: block !important;
    top: 5px;
    right: 75px;
}

/*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: 80px;
}
*/
.relatedDataPortlet .naturalLanguageSearch .naturalLanguageSearchInputWrapper textarea{
    height: 28px;
    min-height: 28px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 50px;
}

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

/*****/

.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-style: solid;
    border-width: 1px;
}

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

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

.naturalLanguageSearch.readonly > .tbcEditorLabel > label > .labelInnerContainer > .mandatory {
    display: none;
}

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

.builderhiding.handle {
    position: absolute;
    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;
}

.buildershowing.displayInline .nlsBgBlocker {
    display: none;
}

.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-style: solid;
    border-bottom-width: 1px;
    color: #656565;

}

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

.naturalLanguageSearch .suggestionPane a:hover {
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
}

.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.displayInline .naturalLanguageSearchBuilder
{
    box-shadow: none;
    position: relative;
}
.naturalLanguageSearch.displayInline
{
    position: relative;
}

.naturalLanguageSearch.displayInline .naturalLanguageSearchInputWrapper{
    display: none;
}

.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.displayInline .naturalLanguageSearchBuilder{
    z-index: unset; /* when displayed inline keep the z-index the same with the rest of controls */
}

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

.naturalLanguageSearch.buildershowing .naturalLanguageSearchBuilderBottomVinculum :not(.displayInline)
{
    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.displayInline.readonly .nlsCriteriaValueContainer div.nlsclose
{
    display: none;
}

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

.naturalLanguageSearch.buildershowing.displayInline.readonly .nlsCriteriaValueContainer div.nlsadd,
.naturalLanguageSearch.buildershowing.displayInline.readonly .keywords div.nlsadd
{
    display: none;
}

.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("https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/removereddark.png?v=12.0.253.0") 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('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac5.png?v=12.0.253.0');*/
    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;
    background-color: rgba(255, 255,255, 0.35);
    background-image: none;
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropdown.png?v=12.0.253.0');*/
    -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;
}

#NLSActionPanel button.displayInline {
    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;
}

  {
    display: none;
}

.naturalLanguageSearch.buildershowing.displayInline.readonly .picker.variable,
.naturalLanguageSearch.buildershowing.displayInline.readonly .inputClearButton,
.naturalLanguageSearch.buildershowing.displayInline.readonly .nlsbra,
.naturalLanguageSearch.buildershowing.displayInline.readonly .nlsungroup,
.naturalLanguageSearch.buildershowing.displayInline.readonly .nlsadd,
.naturalLanguageSearch.buildershowing.displayInline.readonly .nlscomma,
.naturalLanguageSearch.buildershowing.displayInline.readonly .nlselemcut
{
    display: none;
}

.naturalLanguageSearch.buildershowing.displayInline.readonly .textBoxControl.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton,
.naturalLanguageSearch.buildershowing.displayInline.readonly .textBoxControl.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    display: none;
}

/* 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 .naturalLanguageSearchBuilder .nlsCriteriaValueContainer .textBoxControl .editorField input,
    .naturalLanguageSearch .naturalLanguageSearchBuilder .nlsOperatorLabel
    {
        width: 150px;
    }

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

@media only screen and (max-height: 768px) {
    .naturalLanguageSearch .suggestionPane.shown,
    .naturalLanguageSearch .suggestionPaneWrapper.shown .suggestionPane{
        max-height: 200px;
    }
}


.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.deleted {
    display: none;
}

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

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

.recordSelector > .content > .recordList > .recordsLoading{
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

/*--Audit Details--*/

#AuditSummarySection {
    float: right;
    text-align:right;
    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 {
    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;
}

.notificationHeaderButton:hover > .buttonLabel {
    background-color: transparent;
}

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

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


/*--Consumer styles--*/

.consumerStyleWrapper .notification.wrapper {
    position:fixed;
}

.consumerStyleWrapper .notification.wrapper > div {
    padding-bottom:0;
}

.consumerStyleWrapper .notification .container .header {
    background:none;
    padding: 0;
    color: #606060; /*-- theme --colorNeutralDark --*/
}

.consumerStyleWrapper .notification .header .total {
    font-size:0.75rem;
}

.consumerStyleWrapper .notification .statusBar {
        display: flex;
        flex-direction: column;
        padding: 12px 0;
        align-items: center;
}

.consumerStyleWrapper .notification .statusBar.bgColLightRed {
    background-color:#FFE5E9;
}

.consumerStyleWrapper .notification .statusBar .glyph {
    left:auto;
    top:auto;
    margin:0;
    position:relative;
    min-width:20px;
    min-height:20px;
    width:20px;
    height:20px;
}

.consumerStyleWrapper .notification .statusBar .glyph:before {
    content:"";
    display: block;
    height:100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FEB6B6' d='M10,17 C6.1395,17 3,13.8605 3,10 C3,6.1395 6.1395,3 10,3 C13.8605,3 17,6.1395 17,10 C17,13.8605 13.8605,17 10,17'/%3E%3Cpath fill='%233B4E58' d='M12.8284271,11.4142136 L11.4142136,10 L12.8284271,8.58578644 C13.2187501,8.19546349 13.2194572,7.56260293 12.8284271,7.17157288 C12.4373971,6.78054283 11.8045365,6.78124993 11.4142136,7.17157288 L10,8.58578644 L8.58578644,7.17157288 C8.19475639,6.78054283 7.56189582,6.78124993 7.17157288,7.17157288 C6.78124993,7.56189582 6.78054283,8.19475639 7.17157288,8.58578644 L8.58578644,10 L7.17157288,11.4142136 C6.78124993,11.8045365 6.78054283,12.4373971 7.17157288,12.8284271 C7.56260293,13.2194572 8.19546349,13.2187501 8.58578644,12.8284271 L10,11.4142136 L11.4142136,12.8284271 C11.8052436,13.2194572 12.4381042,13.2187501 12.8284271,12.8284271 C13.2187501,12.4381042 13.2194572,11.8052436 12.8284271,11.4142136'/%3E%3Ccircle cx='10' cy='10' r='8' stroke='%233B4E58' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyleWrapper .notification .actions {
    padding:6px;
}



.consumerStyleWrapper .notification .actions > .copyTo {
    display:none;
}

.consumerStyleWrapper .notification .actions > .closeBtn .glyph {
    display:block;
    min-width:20px;
    min-height:20px;
    width:20px;
    height:20px;
}

.consumerStyleWrapper .notification .actions > .closeBtn .glyph:before {
    content:"";
    display:block;
    height:100%;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14.0005' y='4.58636' width='2' height='13.3108' rx='1' transform='rotate(45 14.0005 4.58636)' fill='%233B4E58'/%3E%3Crect x='15.4147' y='13.9985' width='2' height='13.3108' rx='1' transform='rotate(135 15.4147 13.9985)' fill='%233B4E58'/%3E%3C/svg%3E");`
}

.consumerStyleWrapper .notificationItem > .glyph {
    display:none;
}

.consumerStyleWrapper #NotificationMessagesContainer {
    max-height:198px;
    padding-bottom: 12px;
    box-sizing: border-box;
}

.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;
    /* align everything inside the overlay in the center*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel.sideBySideContainer,
.panel.alignContent{
    display: flex;
    flex-wrap: wrap;

    /*Vertical alignment to TOP*/
    align-items:flex-start;
}

.panel.sideBySideContainer.alignLeft,
.panel.alignContent.alignLeft{
    justify-content: flex-start;
    align-items: center;
}

.panel.sideBySideContainer.button.subsequentControl {
    margin-top: -5px;
}

.panel.sideBySideContainer.alignRight,
.panel.alignContent.alignRight{
    justify-content: flex-end;
}

.panel.sideBySideContainer.alignJustify,
.panel.alignContent.alignJustify{
    justify-content: space-between;
}


.panel.sideBySideContainer.alignJustify > .sideBySide {
    flex-grow: 1;
}

.panel.sideBySideContainer.alignJustify > .sideBySide > *,
.panel.sideBySideContainer.alignJustify > .sideBySide .tbcEditorField{
    width: 100%!important;
}

.panel.sideBySideContainer.alignCenter,
.panel.alignContent.alignCenter{
    justify-content: center;
}

.panel.sideBySideContainer .separatorPanel {
    align-self: stretch;
    width: 1px;
    margin: 5px;
    background-color: var(--ciaColourGrayLight);
}


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

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

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

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

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

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


/* Standard Style */

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

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

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

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

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

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

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

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


/* Engaging Style */

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

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

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

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

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

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

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

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

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

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

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

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

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


/* Workflow Styles */

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

.myWorkflowInbox .decisionPromptsPanel
{
    padding: 10px;
}

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

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

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

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

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





/*--Consumer Style--*/

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

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





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

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

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

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

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

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

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

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

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

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

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

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


.pdfViewerControl {
    max-height: 700px;
}



.pdfViewerControl iframe {
    height: 100%;
    width: 100%;
    display: flex;
}

.documentPreviewSection > .pdf > .content > .pdfViewerControl,
.detailsPanel .pdf > .content > .pdfViewerControl  {
    max-height: none;
    min-height: 75px;
    height: 100%;
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.pdfViewerErrorMessage  {
    position: absolute;
    text-align: center;
    left: 10px;
    right: 10px;
    font-size: 1.7em;
    line-height: 25px;
    top: 50%;
}

.sectionSwitcherTabControl > .editablePanel > .content > .pdfViewerControl > .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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/orbredex.png?v=12.0.253.0');
    background-repeat: no-repeat;
}

.picklistExtenderPanel .picklistExtenderFieldResult.picklistExtenderValid,
.picklistExtenderPanel .picklistExtenderValid .picklistExtenderResultDisplayField {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/orbgreentick.png?v=12.0.253.0');
    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;
}
.plannerViewer .extraThumbnailElements{
    display: none;
}

.plannerHeaderBlind {
    height: 141px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0;
    display: none;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.plannerHeaderBlind.displayed {
    opacity: 1;
}
.plannerHeaderBlind .helpActions {
    color: white;
    height: 100%;
    table-layout: fixed;
    border-spacing: 35px;
    border-collapse: separate;
}
.plannerHeaderBlind .helpActions tr {
    background-color: transparent !important;
}
.plannerHeaderBlind .helpActions .spacer {
    width: 80px;
    border: 0;
}
.plannerHeaderBlind .helpActions .schedule,
.plannerHeaderBlind .helpActions .unschedule {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    background: rgba(0,0,0,0.5);
    padding-top: 21px;
    cursor: pointer;
}

.plannerHeaderBlind .helpActionContents {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}
.plannerHeaderBlind .helpActionContents .backToActionsButton {
    background: rgba(0,0,0,0.5);
    width: 145px;
    text-align: center;
    padding: 10px 5px;
    margin: 8px;
    cursor: pointer;
    display: none;
}
.plannerHeaderBlind .helpActions .schedule,
.plannerHeaderBlind .helpActions .unschedule,
.plannerHeaderBlind .helpActionContents .backToActionsButton {
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.plannerHeaderBlind .helpActions .schedule:hover,
.plannerHeaderBlind .helpActions .unschedule:hover,
.plannerHeaderBlind .helpActionContents .backToActionsButton:hover {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
}
.plannerHeaderBlind .helpActionContents .backToActionsButton > * {
    display: inline-block;
}
.plannerHeaderBlind .helpActionContents .backToActionsButton .buttonText {
    margin-left: 4px;
}
.plannerHeaderBlind .helpActionContents .backToActionsButton .glyph {
    transform: rotate(-90deg);
}
.plannerHeaderBlind .helpActionContents .schedule ,
.plannerHeaderBlind .helpActionContents .unschedule {
    display: none;
}
.plannerHeaderBlind .actionDirection {
    width: 819px;
    height: 53px;
    border: 3px solid white;
    border-bottom: 0;
    position: absolute;
    bottom: 15px;
    left: 120px;
}
.plannerHeaderBlind .actionDirection > .endPoint {
    position: absolute;
}
.plannerHeaderBlind .actionDirection > .endPoint.dot {
    width: 19px;
    height: 19px;
    background: white;
    border-radius: 15px;
    bottom: 0;
}
.plannerHeaderBlind .actionDirection > .endPoint.dot.left {
    left: -11px;
}
.plannerHeaderBlind .actionDirection > .endPoint.dot.right {
    right: -10px;
}

.plannerHeaderBlind .actionDirection > .endPoint.arrow {
    border-top: 0;
    border-left: 0;
    bottom: 0;
}
.plannerHeaderBlind .actionDirection > .endPoint.arrow.left {
    left: -18px;
}
.plannerHeaderBlind .actionDirection > .endPoint.arrow.right {
    right: -1px;
}
.plannerHeaderBlind .actionDirection > .endPoint .label {
    color: white;
    position: absolute;
}
.plannerHeaderBlind .actionDirection > .endPoint.arrow  .glyph:before{
    font-size: 33px;
    color: white;
}
.plannerHeaderBlind .actionDirection > .endPoint.arrow .label {
    right: 11px;
}
.plannerHeaderBlind .actionDirection > .endPoint.left.arrow .label {
    top: -28px;
    left: 28px;
}
.plannerHeaderBlind .actionDirection > .endPoint.right.arrow .label {
    top: -28px;
}
.plannerHeaderBlind .actionDirection > .endPoint.right.arrow.schedule .label {
    /*top: 18px !important;*/
}
.plannerHeaderBlind .actionDirection > .endPoint.right.arrow.afterStartingColumn .label {
    right: 12px;
    top: -28px;
}

.plannerViewContainer {
    height: 100%;
}
.plannerViewContainer .plannerTitle {
    font-size: 20px;
}
.plannerViewContainer > .contents {
    height: 100%;
    position: relative;
}
.plannerViewContainer > .contents > * {
    position: absolute;
    top: -1px;
    bottom: 0;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.plannerViewContainer > .contents.planerViewerContentsWithHeader > * {
    top: 50px;
}

.plannerViewContainer .verticalShadow {
    width: 10px;
    height: 100%;
    -webkit-box-shadow: 6px 0 9px -3px rgba(0,0,0,0.6);
    box-shadow: 6px 0 9px -3px rgba(0,0,0,0.6);
    position: absolute;
    z-index: 1;
    top: 0px;
    right: -6px;
}
.unplannedItemsContainer {
    background-color: rgba(0, 0, 0, 0.02);
    z-index: 2;
}
.unplannedItemsContainer .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: -6px;
    bottom: 0;
    z-index: 3;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    display: none;
}
.unplannedItemsContainer .plannerItemGroup .actions {
    float: right;
    margin-top: -29px;
    margin-right: -2px;
    display: none;
}
.plannerItemGroup .selectorIcon {
    color: rgba(0,0,0,0.3);
    position: absolute;
    left: 8px;
    top: 3px;
    opacity: 0;
    z-index: 1;
}
.plannerItemGroup.addMode .thumbnailItem.moveDisabled .selectorIcon,
.plannerItemGroup.removeMode .thumbnailItem.moveDisabled .selectorIcon {
    display: none;
}
.plannerItemGroup .selectorIcon.scaleUp {
    transform: scale(1.3);
}
.plannerViewContainer .thumbnailItem.selectedForEditAction .selectorIcon span.glyph:before {
    color: rgba(0, 150, 0, 0.7) !important;
}
.unplannedItemGroup.selectionMode .selectorIcon,
.plannedItemGroup.selectionMode.removeMode .thumbnailItem:not(.moveDisabled) .selectorIcon {
    opacity: 1;
}
.plannerItemGroup .thumbnailItem .itemWrapper{
    border: 1px solid transparent;
    margin: 0;
}
.plannerItemGroup .groupHeading,
.plannerItemGroup .selectorIcon,
.plannerItemGroup .thumbnailItem,
.plannerItemGroup .thumbnailItem .itemWrapper,
.plannerViewContainer .contents > .plannedItemGroupsContainer .groupsContainerOverlay {
    -webkit-transition: all 0.3s ease-in-out !important;
    -moz-transition: all 0.3s ease-in-out !important;
    -ms-transition: all 0.3s ease-in-out !important;
    -o-transition: all 0.3s ease-in-out !important;
    transition: all 0.3s ease-in-out !important;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.plannerItemGroup .thumbnailItem.moveDisabled .itemWrapper {
    cursor: default;
}
.plannerItemGroup .groupContents {
    -webkit-transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    -moz-transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    -ms-transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    -o-transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.unplannedItemsContainer .thumbnailItem > * {
    z-index: 2;
}
.unplannedItemsContainer .plannerItemGroup.selectionMode .actions {
    display: inline-block;
}
.unplannedItemsContainer .plannerItemGroup .actions .unplannedItemGroupAddActionOk {
    margin-right: 5px;
    opacity: 0.5;
}
.unplannedItemsContainer .plannerItemGroup .actions .unplannedItemGroupAddActionOk.enabled {
    opacity: 1;
}
.unplannedItemsContainer .plannerItemGroup .actions .unplannedItemGroupAddActionCancel {
    display: none;
}
.unplannedItemsContainer .plannerItemGroup.selectionMode .groupHeading {
    height: 76px;
}
.unplannedItemsContainer .plannerItemGroup.selectionMode .thumbnailItem .itemWrapper,
.plannedItemGroup.selectionMode.removeMode .thumbnailItem .itemWrapper{
    padding-left: 62px;
}
.unplannedItemsContainer .plannerItemGroup.selectionMode .groupContents {
    top: 76px;
}
.plannedItemsContainer .plannerItemGroup.selectionMode.removeMode.hasRemovableItem .groupContents {
    top: 85px;
}
.plannerItemGroup .selectedItemsCount {
    color: rgba(255, 255, 255, 1);
    display: none;
    padding: 9px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.plannerItemGroup .selectedItemsCount.highlight {
    background-color: rgba(0, 150, 0, 0.6) !important;
}
.plannerItemGroup.selectionMode .selectedItemsCount {
    display: initial;
}
.plannerItemGroup .selectedItemsCount > *{
    display: inline-block;
}
.plannerItemGroup .selectedItemsCount .count {
    margin-right: 5px;
}
.plannerViewer {
    overflow: hidden;
}
.plannerViewer .unplannedItemsGroupCollapseButton {
    padding: 9px;
    border-top-right-radius: 3px;
    cursor: pointer;
    margin: -9px 0 0 -9px;
    display: inline-block;
    float: right;
}
.plannerViewer .unplannedItemGroup.detailsPrevented .unplannedItemsGroupCollapseButton {
    display: none;
}
.plannerViewer .unplannedItemsGroupCollapseButton:before {
    content: "\E247";
}
.plannerViewer .unplannedItemsGroupCollapseButton.clicked:before {
    content: "\E246";
}
.plannerViewer .unplannedItemsGroupCollapseButton:hover {
    color: white;
}

.plannerViewer.unplannedItemsContainerCollapsed .unplannedItemsContainer{
    -webkit-transform: translate3d(-197px, 0, 0);
    -moz-transform: translate3d(-197px, 0, 0);
    -ms-transform: translate3d(-197px, 0, 0);
    -o-transform: translate3d(-197px, 0, 0);
    transform: translate3d(-197px, 0, 0);
}
.plannerViewer.unplannedItemsContainerCollapsed .plannedItemGroupsContainer {
    left: 63px !important;
}
.plannerViewContainer .thumbnailItem{
    margin: 0 0 10px 0!important;
    box-sizing: border-box;
    margin-bottom: 10px !important;
    width: 100% !important;
    float: none !important;

    -webkit-transition: border-color 0.3s ease;
    -moz-transition: border-color 0.3s ease;
    -ms-transition: border-color 0.3s ease;
    -o-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.plannerItemGroup.addMode .thumbnailItem .navigatorContainer,
.plannerItemGroup.removeMode .thumbnailItem .navigatorContainer{
    display: none;
}
.plannerItemGroup.addMode .thumbnailItem .clickMessage,
.plannerItemGroup.removeMode .thumbnailItem .clickMessage{
    color: rgba(0, 0, 0, 0.1);
}
.plannerViewContainer .thumbnailItem .thumbnailBlind {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    text-align: center;
    display: none;
}
.plannedItemGroup.removeMode .thumbnailItem .thumbnailBlind,
.unplannedItemGroup.addMode .thumbnailItem .thumbnailBlind {
    display: block;
}
.plannedItemGroup.removeMode .thumbnailItem .secondarySection,
.unplannedItemGroup.addMode .thumbnailItem .secondarySection {
    background: rgba(0,0,0,0.0) !important;
}
.plannerViewContainer .thumbnailItem .thumbnailBlind .glyph {
    position: absolute;
    left: 0;
    top: 25px;
}
.plannerViewContainer .thumbnailItem .thumbnailBlind .glyph:before {
    font-size: 64px;
    color: rgba(255,255,255,0.8);
}
.plannerViewContainer .thumbnailItem .clickMessage {
    color: #007fe9;
    margin-bottom: 5px;
}
.plannerViewContainer .thumbnailItem.hasMessage .navigatorContainer {
    top: 40% !important;
}
.plannerViewContainer .thumbnailItem.hasMessage  .notificationHeaderButton{
    margin: 0 0 9px 9px;
}
.plannerViewContainer .thumbnailItem .navigatorContainer {
    top: 50% !important;
    margin-top: -10px !important;
}
.plannerViewContainer .thumbnailItem.dragging {
    border: 1px dashed rgb(0, 0, 0) !important;
    box-shadow: inset 0 0 5px 0px rgba(0,0,0,1);
}
.plannerViewContainer .thumbnailItem .draggingItemOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
}
.plannerViewContainer .thumbnailItem:last-child {
    margin-bottom: 0 !important;
}
/* Override some thumbnail styling - START */
.plannerViewContainer .thumbnailItem .secondarySection{
    padding-left: 3px !important;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent !important;
}
.plannerViewContainer .thumbnailItem .tagSection {
    float: left;
}
.plannerViewContainer .thumbnailItem .dropdownPanel {
    right: 0 !important;
}
.plannerViewContainer .thumbnailItem .thumbnailSection a {
    line-height: 16px !important;
    text-align: left !important;
}

.unplannedItemGroup.inDraggingMode .tagActionsSection .summaryContainer,
.unplannedItemGroup.detailsPrevented .tagActionsSection .summaryContainer,
.plannedItemGroupsContainer .plannerItemGroup.disabled .tagActionsSection {
    display: none !important;
}
/* Override some thumbnail styling - END */

.plannedItemGroupsContainer .horizontalScrollContainerForPlannedItemGroups {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: rgb(250, 250, 250);
}
.plannedItemsContainer {
    min-width: 100%;
    height: 100%;
    position: relative;
    width: auto;
    display: inline-block;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
}
.plannedItemsContainer .plannerItemGroup {
    margin-right: 9px;
    margin-left: 2px;

    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -ms-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 2;
}
.plannedItemsContainer .plannerItemGroup.selectionMode {
    z-index: 4;
}
.plannedItemsContainer .plannerItemGroup.selectionMode .groupHeading > .actions,
.plannedItemsContainer .plannerItemGroup.selectionMode .thumbnailItem .thumbnailAction {
    display: none !important;
}
.plannerItemGroup .editablePanel {
    max-width: none;
}
.plannerItemGroup .editablePanel,
.plannerItemGroup .editablePanel > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.plannerItemGroup.highlighted .groupHeading {
    background-color: rgba(223, 108, 0, 0.6);
    text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.plannerItemGroup.highlighted.highlightGreen .groupHeading {
    background-color: rgba(51, 153, 102, 0.6);
}
.plannerItemGroup.highlighted .groupHeading .extraLines li {
    color: rgba(245,245,245,1);
}

.plannerItemGroup.highlighted .groupContents {
    background-color: rgba(223, 108, 0, 0.15) !important;
}
.plannerItemGroup.highlighted.highlightGreen .groupContents {
    background-color: rgba(51, 153, 102, 0.15) !important;
}
.plannerItemGroup.highlighted .scrollableArea {
    border: 1px solid rgba(223, 108, 0, 0.1);
    border-bottom: 0;
}
.plannerItemGroup.highlighted.highlightGreen .scrollableArea {
    border-color: rgba(51, 153, 102, 0.1);
}
.plannerItemGroup .groupDefaultView {
    width: 261px;
    height: 100%;
    min-height: 100%;
}
.plannerItemGroup .scrollableArea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
    overflow-y: auto;
    border-bottom: 1px solid white !important;
    -webkit-overflow-scrolling: touch;
}
.plannerItemGroup.unplannedItemGroup .scrollableArea,
.plannerItemGroup.disabled .scrollableArea {
    bottom: 0;
}
.plannerItemGroup .scrollableArea .scrollContents {
    position: relative;
    min-height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.04);
}
.plannerItemGroup .groupToolbar {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    text-align: center;
    background-color: rgba(0,0,0,0.06);
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}
.plannerItemGroup .groupToolbar .cancelButton .label > * {
    display: none;
}
.plannerItemGroup.addMode .groupToolbar .cancelButton .label .cancelAdd{
    display: block;
}
.plannerItemGroup.removeMode .groupToolbar .cancelButton .label .cancelRemove{
    display: block;
}
.plannerItemGroup.selectionMode .groupToolbar {
    background-color: rgba(200,200,200,1);
}
.plannerItemGroup .groupToolbar .slideAnimationContainer {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.plannedItemGroup .groupToolbar .slideAnimationContainer .actions .addItemsButton {
    margin-right: 8px;
}
.plannedItemGroup .groupToolbar .slideAnimationContainer .actions .addItemsButton.hidden,
.plannedItemGroup .groupToolbar .slideAnimationContainer .actions .removeItemsButton.hidden{
    position: absolute;
    visibility: hidden;
}
.plannedItemGroup .groupToolbar .slideAnimationContainer .actions > * {
    width: 110px;
    display: inline-block;
}
.plannedItemGroup .groupToolbar .slideAnimationContainer .cancelButton {
    width: 100%;
    display: block;
}
.plannedItemGroup .groupToolbar .slideAnimationContainer .cancelButton.hidden {
    position: absolute;
    visibility: hidden;
}
.plannedItemGroup.addMode .groupToolbar .slideAnimationContainer,
.plannedItemGroup.removeMode .groupToolbar .slideAnimationContainer {
    -webkit-transform: translate3d(0, -36px, 0);
    -moz-transform: translate3d(0, -36px, 0);
    -ms-transform: translate3d(0, -36px, 0);
    -o-transform: translate3d(0, -36px, 0);
    transform: translate3d(0, -36px, 0);
}
.plannedItemGroup .groupToolbar .cancelButton {
    margin-top: 6px;
}
.plannerItemGroup .groupOverlay {
    position: absolute;
    background: rgba(0,0,0,0.2);
    border: 0;
    height: 100%;
    bottom: 0;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
}
.plannerItemGroup .groupInnerView {
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: justify;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.12);
    box-sizing: border-box;
}
.plannerItemGroup .groupInnerView > .innerViewContents {
    z-index: 1;
    top: 40px !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}
.plannerItemGroup .groupInnerView .innerViewControls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(0,0,0,0.1);

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -webkit-transform: translate3d(0, -32px, 0);
    -moz-transform: translate3d(0, -32px, 0);
    -ms-transform: translate3d(0, -32px, 0);
    -o-transform: translate3d(0, -32px, 0);
    transform: translate3d(0, -32px, 0);
}
.plannerItemGroup .groupInnerView .innerViewControls.show {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.plannerItemGroup .groupInnerView .innerViewControls > * {
    display: inline-block;
    cursor: pointer;
    margin: 5px;
}
.plannerItemGroup.animate .groupContents > .horizontalScrollContainer {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.plannerItemGroup.expanded .horizontalScrollContainer{
    -webkit-transform: translate3d(-265px, 0, 0) !important;
    -moz-transform: translate3d(-265px, 0, 0) !important;
    -ms-transform: translate3d(-265px, 0, 0) !important;
    -o-transform: translate3d(-265px, 0, 0) !important;
    transform: translate3d(-265px, 0, 0) !important;
}

.plannerItemGroup.disabled .groupContents::-webkit-scrollbar {
    width: 15px;
    background-color: rgba(0, 0, 0, 0.3);
}
.plannerItemGroup.disabled .groupContents::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
}
.plannedItemsContainer .plannerItemGroup:last-child {
    margin-right: 0;
}
.plannerViewContainer .contents > .unplannedItemsContainer {
    width: 255px;
}
.plannerViewContainer .contents > .unplannedItemsContainer .plannerItemGroup {
    border-radius: 0;
    z-index: 2;
}
.plannerViewContainer .contents > .plannedItemGroupsContainer {
    left: 260px;
    right: 0;
    padding:10px;
    border: 1px solid rgba(0,0,0,0.2);
    border-right: 0;
    border-left: 0;
}
.plannerViewContainer .contents > .plannedItemGroupsContainer .groupsContainerOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
}
.plannerViewContainer .contents > .plannedItemGroupsContainer .groupsContainerOverlay.displayed {
    opacity: 1;
    z-index: 3;
}

.plannedItemsContainer > * {
    display: inline-block;
}

.plannerItemGroup {
    width: 261px;
    height: 100%;
    background-color: white;
    position: relative;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    vertical-align: top;
}
.plannerItemGroup.newlyAdded .groupHeading{
    box-shadow: inset 0 0 15px rgba(223,108,0,0.2) !important;
}
.plannerItemGroup.newlyAdded .groupContents {
    box-shadow: inset 0 0 15px rgba(223,108,0,0.1) !important;
    background-color: rgba(223,108,0,0.1) !important;
}
.plannerItemGroup .groupContents .horizontalScrollContainer > * {
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.plannerItemGroup .groupContents .horizontalScrollContainer > .groupInnerView {
    display: none;
}
.plannerItemGroup .groupHeading{
    width: 100%;
    height: 40px;
    padding:12px 10px;
    background-color: rgba(0,0,0,0.3);
    box-sizing: border-box;
}
.plannerItemGroup .groupHeading > .count {
    float: right;
    background-color: rgba(0,0,0,0.1);
    border-radius: 2px;
    padding: 5px;
    color: white;
    font-weight: bold;
    margin-top: -4px;
    margin-right: -3px;
}
.plannerItemGroup .groupHeading .heading,
.plannerItemGroup .groupHeading .subheading {
    font-size: 14px;
    color: white;
}
.plannerItemGroup .groupHeading .heading {
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plannerItemGroup .groupHeading .subheading {
    margin-bottom: 7px;
}
.plannerItemGroup .groupHeading .editModeElements {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 31px;
    display: none;
}
.plannerItemGroup.removeMode.hasRemovableItem .groupHeading .editModeElements {
    display: block;
}
.plannerItemGroup .groupHeading .editModeElements .selectedItemsCount {
    position: absolute;
    left: 9px;
    bottom: 0;
    top: 0;
}
.plannerItemGroup .groupHeading .editModeElements .removeGroupItemAction {
    position: absolute;
    right: 6px;
    bottom: 0;
    top: 0;
}
.plannerItemGroup.unplannedItemGroup .groupHeading .subheading {
    display: inline-block;
    margin-top: 13px;
}
.plannerItemGroup.disabled .groupHeading {
    background-color: rgba(0, 0, 0, 0.4);
}
.plannerItemGroup.disabled .groupHeading .heading,
.plannerItemGroup.disabled .groupHeading .subheading,
.plannerItemGroup.disabled .groupHeading .count {
    color: rgba(255, 255, 255, 0.6);
}
.plannerItemGroup .groupContents {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.plannerItemGroup.hoveredToDropItem .groupContents{
    box-shadow: inset 0px 0px 13px 5px rgba(0,0,0,0.4);
}
.plannedItemsContainer .groupHeading {
    height:70px;
    padding: 10px 10px 5px 10px;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px;
    position: relative;
}
.plannedItemsContainer .plannerItemGroup.selectionMode.removeMode.hasRemovableItem .groupHeading {
    height: 85px;
}
.plannedItemsContainer .groupHeading .actions {
    position: absolute;
    top: 34px;
    right: 6px;
}
.plannerItemGroup.expanded .groupHeading .actions {
    display: none;
}

.plannedItemsContainer .groupHeading .removeButton {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    display: none;
    margin-top: -28px;
    float: right;
}
.plannedItemsContainer .groupHeading .removeButton .icon16 {
    position: absolute;
    top: -24px;
    right: 5px;
    font-size: 19px;
    color: rgba(255,0,0,0.8);
    border: 1px solid transparent;
}
.plannedItemsContainer .groupHeading .removeButton .icon16:before{
    content: "\E067";
}
.plannedItemsContainer .plannerItemGroup .groupHeading .removeButton:hover {
    border-color: rgba(255, 0, 0, 0.8);
}
.plannedItemsContainer .groupHeading .removeButton:hover .icon16 {
    font-size: 22px;
    right: 6px;
}
.plannedItemsContainer .groupContents {
    top: 70px;
}
.plannedItemsContainer .extraLines li {
    color: rgba(0, 0, 0, 0.4);
}
.plannerItemGroup.disabled .groupContents {

}
.plannerViewContainer .plannerActions {
    padding-left: 30px;
    padding-top: 1px;
}
.plannerViewContainer .plannerActions .dropdownControl button{
    border-radius: 3px;
}
.plannerViewContainer .plannerActions .dropdownControl .handle {
    margin-left: 5px;
}
.plannerViewContainer .plannerActions .dropdownControl .handle .icon16 {
    margin: 0 5px;
}
.plannerViewContainer .plannerActions li {
    text-align: left;
}
.plannerViewContainer .plannerActions .dropdownPanel li:first-child {
    display: none;
}
.plannerViewContainer .plannerActions li a {
    border: 0;
    background: none;
}
.plannerViewContainer .plannerActions li a .icon24 {
    display: none;
}
.plannerViewContainer .plannerActions .defaultAction:before {
    width: auto;
}

/* START - Styling for drag and drop */
.dummyForDragging {
    width: 240px;
    box-shadow: 5px 5px rgb(220,220,220);
}
.dummyForDragging .thumbnailViewControl{
    display: block;
}
.dummyForDragging .thumbnailViewContainer {
    position: relative;
}
.dummyForDragging .thumbnailItem {
    margin: 0!important;
    width: 100% !important;
}
.dummyForDragging .clickMessage,
.dummyForDragging .selectorIcon,
.dummyForDragging .tagActionsSection {
    display: none !important;
}
.plannerViewContainer .plannerItemGroup:not(.detailsPrevented) .thumbnailItem.draggable .itemWrapper:hover {
    border: 1px solid rgba(223, 108, 0, 0.7) !important;
    box-shadow: 0 1px 5px rgba(223, 108, 0,0.4);
}
.plannerViewContainer .thumbnailItem.dropped {
    border: 1px solid #df6c00 !important;
    box-shadow: 0 0 10px 0px #df6c00;
}

/* START - Planner viewer popup styling override*/
.popupOnEnquiryPlannerViewer {
    padding: 0;
}
.popupOnEnquiryPlannerViewer .header {
    display: none;
}
.popupOnEnquiryPlannerViewer section.dataEntryPanel {
    margin-top: 0 !important;
}
.popupOnEnquiryPlannerViewer section.dataEntryPanel header {
    padding: 10px;
    margin: 0 -10px;
}

.popupOnEnquiryPlannerViewer section.dataEntryPanel .categoryPanels,
.popupOnEnquiryPlannerViewer section.dataEntryPanel .dataEntryPanelSubPanel {
    margin-top: 0;
}

/* END - Planner viewer popup styling override*/

/* END - Styling for drag and drop */

.popupContainer, .coverLayer
{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:9003;
    background: rgba(0,0,0,0.4);
    padding:0 ;
    text-align:center;
}

.coverLayer {
    z-index: auto;
    bottom: 0;
}

.popupContainer > img
{
    position:relative;
    margin:200px auto;
    -webkit-box-shadow: 0 0 10px white, 0 0 40px white;
    box-shadow: 0 0 10px white, 0 0 40px white;
}

.phone .popup {
    /*
        .phone included since new workplace uses desktop components instead of phone for a more responsive design
        altering the .popup min-width affects all popups and causes styling issues
        until we can look into making popup more responsive this is required
     */
    min-width: 30%;
}

.popup
{
    position:relative;
    margin:0 auto;
    background: white;
    display:inline-block;
    text-align:left;
    min-height: 117px;
    min-width: 400px;
    max-width: 95%;
}

.popup.useAvailableHeight {
    top: 50%;
    display: block;
}

.popup, #MainContainer > .contentContainer.modalLayout {
    border: 1px solid rgba(0,0,0,0.75);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.popup.fixed {
    width:890px;
}

/*
  ##Device = Tablets, Ipads
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .popup.fixed {
        width: 690px;
    }
}

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

.popup.fixed table {
    white-space: nowrap;
}

.popup.useAvailableHeight > .content > .popupContentInnerContainer {
    height: 100%;
}

.popup.fixed > .content {
    min-height: 100px;
}

.popup > .content {
    min-width:20px;
    min-height:20px;
}

.popupClose, .popupMaximise {
    border: none;
    position:absolute;
    right:5px;
    top:5px;
    vertical-align:middle;
    background:none;
    opacity: 0.8;
    box-shadow: none;
    padding: 2px;
    border: solid 1px transparent;
}

.popupMaximise {
    right:40px;
}

body.easy .popupClose {
    opacity: 1;
}

.closeSelectionModeWindow {
    color: white;
    right: auto;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 0;
}

.closeSelectionModeWindow:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac10.png?v=12.0.253.0');
    background-repeat: repeat;
}

.closeSelectionWindow {
    color: white;
}

.popupClose:hover {
    opacity: 1;
}

.modalLayout .popupClose > span:before {
    content: "\E042";
}

.popup > header, .modalLayout > .header
{
    padding:5px 10px !important;
    margin: 0px !important;
}

.popup > header .title, .modalLayout > .header h3 {
    min-height: 30px;
    line-height: 30px;
    padding-right: 40px;
    font-size: 1.2em;
}

.modalLayout > .header h3 {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    font-weight:normal;
    text-align: center;
}

.popup > header .title {
    font-weight: 600;
}

.popup > .content
{
    padding:10px;
}

/*--Pick list styling--*/

.popup .tabbedControl .tabsContainer {
    padding-top: 0;
    margin-left: -10px;
    margin-right: -10px;
}

.popup .tabControl > * {
    padding-left: 10px;
    padding-right: 10px;
}

.picklistabHeading {
    min-height: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0 -10px;
}

.picklistSearchCriteria {
    padding:10px 0 10px 10px;
    margin: -10px -10px 0 -10px;
    border-bottom: solid 1px #e6e6e6;
}

.picklistSearchCriteria .editorLabel {
    display: none;
}

.tabControl .picklistSearchCriteria {
    margin: inherit;
}

.picklistSearchCriteria .picklistRetrieveButton {
    margin: 0 5px;
}

.popup > .content  .picklistPanel > .tabbedControl > .tabHandlesContainer > .tabHandle {
    padding: 10px;
    background-position: top left;
}

.popup > .content .picklistPanel .tabbedControl > .tabHandlesContainer > .tabHandle.selected, .popup > .content  .picklistPanel > .tabbedControl > .tabHandlesContainer > .tabHandle.selected:hover {
    background-image: none;
    border-bottom-color: transparent;
}

.picklistSearchCriteria .controlContainer {
    padding:0;
}

.picklistPanel > .tableContainer, .picklistExtenderStandardTab > .tableContainer {
    margin-bottom: 0;
}

.picklistRetrieveInput {
    height:20px;
    margin:0;
}

.popup > .content > header
{
    font-weight:bold;
    font-size:1.2em;
    margin-bottom:10px;
}

.form .popup .content section.borderTop.panel:first-of-type {
    border-top:none;
}

.popup > footer
{
    padding:0;
    font-size: 1em;
    border-top-style:solid;
    border-top-width: 1px;
    border-radius: 0 0 3px 3px;
    text-align:left;
    min-height: 50px;
    max-width: 100%;
}

.popup > footer > div
{
    padding:10px;
}

.popup > footer button, .popup > footer a
{
    margin-right: 5px;
    min-width:60px;
    float: left;
}

.popup > footer button:last-child
{
    margin-right: 0;
}

.popup .tableContents
{
    overflow-x: auto;
}

#diagnostics
{
    width:550px;
}

.buttonpane
{
    text-align: left;
    border-width: 1px 0 0 0;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
    border-top: 1px solid;
    background: white;
    color: #222;
}

.buttonpane > *
{
    float:right;
    margin-right:10px;
}

.popup .contentLayoutContainer {
    margin:0;
    -webkit-transition:all 0.2s ease-in-out;
    min-height: 0;
}

.popup .notification {
    margin-bottom:10px;
}

.popup.transparent{
    opacity: 0.1;
}

button.keepOpen{
    border: none;
    background: none;
    box-shadow: none;
}

button.keepOpen:before {
    font-family: 'iconGlyph';
    content: "\E145";
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
    display: inline-block;
}

button.keepOpen.checked:before{
    content: "\E140";
}


@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */

    .popup > .content.fixed {
        min-width:690px;
        width:690px;
    }
}

.popup .popupContentInnerContainer .textBoxControl .suggestionPaneWrapper{
    position: fixed!important;
    width: inherit;
    right: unset!important;
}

.popup .popupContentInnerContainer .textBoxControl .calendarContainer{
    position: fixed!important;
    right: unset!important;
}

/*--Popup consumer style--*/

.consumerStyleWrapper .popupContainer {
    overflow:auto;
    position:fixed;
}

.consumerStyle.popup {
    box-shadow:none;
    border:none;
    color:#3b4e58;
}

.consumerStyle.popup.fixed {
    margin-top:56px !important;
}

.consumerStyle.popup > header {
    background:none;
    padding: 16px 20px !important;
}

.consumerStyle.popup > footer {
    border:none;
    background-color:#f4f4f4;
}

.consumerStyle.popup > footer > div {
    display:flex;
    justify-content: flex-end;
    padding:12px 16px;
}

.consumerStyle.popup > footer button {
    min-width:120px;
    margin:0;
    text-shadow:none;
    box-shadow:none;
    border-color:transparent;
    padding:11px;
}

.consumerStyle.popup > footer button.ok {
    order:2;
    margin-left:16px;
}






.consumerStyle.popup > header .title {
    font-size:1rem;
    color:inherit;
    min-height: 20px;
    line-height: 20px;
}

.consumerStyle.popup > header .popupClose {
    top:14px;
    right:14px;
}

.consumerStyle.popup > header .popupClose:hover {
    border-color:inherit;
}

.consumerStyle.popup > header .popupClose .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%233B4E58' fill-rule='evenodd' d='M11.4141,10 L17.7071,3.707 C18.0981,3.316 18.0981,2.684 17.7071,2.293 C17.3161,1.902 16.6841,1.902 16.2931,2.293 L10.0001,8.586 L3.7071,2.293 C3.3161,1.902 2.6841,1.902 2.2931,2.293 C1.9021,2.684 1.9021,3.316 2.2931,3.707 L8.5861,10 L2.2931,16.293 C1.9021,16.684 1.9021,17.316 2.2931,17.707 C2.4881,17.902 2.7441,18 3.0001,18 C3.2561,18 3.5121,17.902 3.7071,17.707 L10.0001,11.414 L16.2931,17.707 C16.4881,17.902 16.7441,18 17.0001,18 C17.2561,18 17.5121,17.902 17.7071,17.707 C18.0981,17.316 18.0981,16.684 17.7071,16.293 L11.4141,10 Z'/%3E%3C/svg%3E");
}

.consumerStyle.popup > header .popupClose .glyph:before {
    display:none;
}

body .dhx_widget{
    font-family: inherit !important;
     font-weight: normal !important; 
     font-size: inherit !important; 
     line-height: inherit !important;
}
body .dhx_free_diagram{
    background-color: transparent;
}

.processDiagramControl, .diagramWrapper {
    height: 100%;
    max-height: 100%;
}

/* ----  DHX Shape Styles -----*/

.processNodeShape .bodycontainer{
    text-align: left;
    font-size: 10px;
    margin-right: 5px;
}

.dhx_property .tbcInputContainer{
    background: white;
}

.dhx_diagram_flow_shape .imgContainer > *{
    max-width:32px;
    margin: auto 5px;    
}

.dhx_diagram_org_item .shape_content-container .shape_content{
    font-size: 10px;
    text-align:left;   
    padding:5px;    
}

.shapesbar .dhx_diagram_flow_item .shape_content-container .shape_content ,
.shapesbar .dhx_diagram_flow_item .dhx_diagram_flow_shape .shapeSticky
{    
    font-size: 10px !important;
}



/* ----  Custom Shape Styles -----*/

/* CiProcess  */
.dhx_diagram_flow_shape .processNodeShape{
    border-radius: 15px;
    height: 100%;
    line-height:1.1em;
    text-decoration: none;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    background: #FFFFFF;
}

.dhx_diagram_flow_shape .processNodeShape > .errorNotification {    
    position: absolute;
    top: -10px;
    right: -10px;
    background:white;    
    border-radius: 50%;
    line-height: 20px;
}

#TipHolder{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
}
#TipHolder.shown{
    opacity: 1;
    visibility: visible;
    z-index: 9005;
}

.processNodeShape .action-icon {
    position: absolute;
    right: 10px;
    bottom:10px;
}
.processNodeShape .title, .processNodeShape .text{
    word-break:break-word; 
    white-space:pre-wrap;    
}

.customShapeProperty .editorLabel{
    width: 100%;
}

.customShapeProperty .attachmentIcon{
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    width: 60px;    
    display: inline-block;
    height: 60px;    
    padding: 15px;
}
.customShapeProperty .attachmentFileInput{
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}

.labelInnerContainer.section-title:empty{
    display: none;
}

/* CiText  */
.dhx_diagram_flow_shape .shapeCiText{
    white-space: nowrap;
    text-align:left;    
}

.shapesbar .shapeCiText{
    background: white;
    border: dashed 1px grey;
    padding: 10px;
    height: 100%;
}

/* textYesNo  */
.dhx_diagram_flow_shape .shapeYesNoText{
    padding: 5px;
    font-size: 9px;
    background: white;
    border: solid 1px rgba(33, 150, 243, 0.2);
}
/* CiYesNoText  */
.dhx_diagram_flow_shape .shapeCiStartEnd{
    border: solid 1px rgb(33, 150, 243);
    border-top-width:3px;
    border-radius: 5px;
    height: 100%;    
    color: white;
    justify-content: center;
}

/* Contact card  */

.dhx_diagram_flow_shape .shapeContact {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    padding: 10px 12px;
}
.dhx_diagram_flow_shape .shapeContact span {
    display: flex;
}
.dhx_diagram_flow_shape .shapeContact h3, .dhx_diagram_flow_shape .shapeContact p {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dhx_diagram_flow_shape .shapeContact_container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.dhx_diagram_flow_shape .shapeContact_img-container {
    min-width: 93px;
    width: 93px;
    margin-right: 12px;
}
.dhx_diagram_flow_shape .shapeContact_img-container img {
    width: inherit;
    height: auto;
}
.dhx_diagram_flow_shape .shapeContact_icon {
    height: 20px;
    width: 20px;
    margin-right: 4px;
}

/* Sticky note  */

.shapeSticky {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.shapeSticky.blue{
    background-image:url("https://cdn.t1cloud.com/cianywhere/content/base/images/processdiagram/blue.svg?v=12.0.253.0") ;
}
.shapeSticky.yellow{
    background-image:url("https://cdn.t1cloud.com/cianywhere/content/base/images/processdiagram/yellow.svg?v=12.0.253.0") ;
}
.shapeSticky span {
    text-align: center;
    width: 100%;
}

/****** Custom shape properties ******/

/* textbox style override */
.dhx_property input.textBoxControlInput:focus{ box-shadow: none; }
.dhx_property .tbcInputInnerContainer > .textBoxControlInput{ padding:5px; }
.dhx_property .tbcEditorField{ min-width:245px; }
.dhx_property .standardStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer,
.dhx_property button.tbcPicker {
    height: 40px;
}
/* copied from section-title */
.dhx_property .customShapeProperty .lblCol {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 8px 0;
    color: #909cad;
    line-height: 20px;
    margin: 0 0 4px;
    letter-spacing: .5px;
}

.editor .dhx_diagram {
    background-image:url("https://cdn.t1cloud.com/cianywhere/content/base/images/processdiagram/edit-ruler.svg?v=12.0.253.0") !important;
}

.actionTypeProperties .smryLabel {
    padding: 5px;
}

.actionTypeProperties .smryText {
    padding: 5px;
    font-style: italic;
    font-weight: bolder;
}

.actionTypeProperties button.editProperties {
    background: transparent;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
}


/**** Open function popup *****/
.processNodeProperties .actionTypePropertiesContainer.showInPopup{
    width: 750px;
}

.processNodeProperties .customShapeProperty.functionPicklist{
    width: 100%;
}
.processNodeProperties .customShapeProperty.functionPicklist .tbcEditorField{
    width: 700px !important;
}

.actionTypePropertiesContainer .showAdvanced{
    border: none;
    background: transparent;
    box-shadow: none;
    color: #1876d2;
    font-weight: bold;
}

.actionTypePropertiesContainer .showAdvanced .glyph:before {
    content: "\E045";
}

.actionTypePropertiesContainer .showAdvanced.expanded .glyph:before {
    content: "\F046";
}

.actionTypePropertiesContainer .advancedOptions .header{
    font-weight: bold;
    font-size:1.2em;
}

.actionTypePropertiesContainer .advancedOptions .headerText{
    line-height: 14px;
}

.actionTypePropertiesContainer .advancedOptions .step1,
.actionTypePropertiesContainer .advancedOptions .step2 {
    border-radius: 5px;
}

.actionTypePropertiesContainer .advancedOptions .leftContainer,
.actionTypePropertiesContainer .advancedOptions .rightContainer{
    display: inline-block;
}

.processNodeProperties .functionPreview,
.processNodeProperties .syncKeysClear,
.processNodeProperties .syncKeysPaste{
    background: transparent;
    box-shadow: none;
}

.actionTypePropertiesContainer .syncKeysContainer{
    min-height: 200px;
    margin-top: 20px;
}

.actionTypePropertiesContainer .syncKeysContainer tbody {
    display: block;
    overflow: auto;
    max-height: 200px;
}
.actionTypePropertiesContainer .syncKeysContainer thead,
.actionTypePropertiesContainer .syncKeysContainer tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
.actionTypePropertiesContainer .syncKeysContainer thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
.actionTypePropertiesContainer .syncKeysContainer tbody tr td{
    vertical-align: middle;
}
.actionTypePropertiesContainer .syncKeysContainer .syncKeyInput{
    border-color: #c4c4c4;
    border-radius: 3px;
    height: 30px;
    border-style: solid;
    border-width: 1px;
    width: 250px;
}
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemInput,
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    cursor: pointer;
}

.radioButtonControl.editable > .rbcEditorField > .rbcItem > input[type=radio],
.radioButtonControl.editable > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label {
    cursor: pointer;
}



/* Standard Style */

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

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

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

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

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem {
    min-height: 20px;
    display: flex;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]{
    -webkit-appearance: radio;
    width: auto;
    height: 16px;
    vertical-align: middle;
    box-shadow: none;
}

.standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .standardStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.standardStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    box-shadow: none;
    border-color: #656565;
}

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

.standardStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

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


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



/* Engaging Style */

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

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

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


/* Engaging Style - Standard Radio Button */

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

.engagingStyle > .radioButtonControl.rbcStandardType  > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: radio;
    width: auto;
    height: 17px;
    vertical-align: middle;
    box-shadow: none;
    transition:transform 0.1s ease;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    transform: scale(1.2);
}

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

.engagingStyle > .radioButtonControl.rbcStandardType.disabled > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    margin-left: 10px;
    display: inline-block;
    padding: 0;
    width: auto;
    opacity: .5 !important;
    font-size: 1.2em;
}

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



/* Engaging Style - Rating Stars */

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

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: none;
    width: 24px !important;
    border: none;
    box-shadow: none;
    color: #A5A5A5;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: none;
}

.easy .engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:focus {
    outline: dotted 2px #d64200;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem > input[type=radio] ,
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField:hover > .rbcItem > input[type=radio]  {
    transform: scale(1.2);
    color: #ffcb05;
}

.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover > input[type=radio] {
    transform: scale(1.4);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio],
.engagingStyle > .radioButtonControl.rbcRatingStars.editable > .rbcEditorField > .rbcItem:hover ~ .rbcItem > input[type=radio] {
    color: inherit;
    transform: scale(1);
}

.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.readonly > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio],
.engagingStyle > .radioButtonControl.rbcRatingStars.hasSelection.disabled > .rbcEditorField > .rbcItem.checked ~ .rbcItem > input[type=radio] {
    opacity: 0.35;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > input[type=radio]:before {
    content: "\E556";
    font-family: iconGlyph;
    display: block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    font-size: 24px;
    margin-bottom: 10px;
}

.engagingStyle > .radioButtonControl.rbcRatingStars > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    display: none;
}



/*--Consumer style - Standard type--*/

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem {
    display:flex;
    max-width: fit-content;
    line-height: 20px;
    padding: 8px 8px 8px 0;
    color: #3b4e58;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus  {
    outline: none;
}

.easy .consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio]:focus  {
    outline: dotted 2px #d64200 ;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > input[type=radio] {
    -webkit-appearance: radio;
    box-shadow: none;
    position: relative;
    background: #fff;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-width: 1px;
    border-color: #848e9c;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 50%;
    padding: 8px;
    transition: border-width 0.1s ease-in-out, border-color 0.1s ease-in-out/*, padding 0.1s ease-in-out*/;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:focus > input[type=radio] {
    outline: solid 1px #2D9CDB;
    outline-offset: 2px;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:hover > input[type=radio], .consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem:focus > input[type=radio] {
    border-width:2px;
    border-color:#3b4e58;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem.checked > input[type=radio] {
    border-width: 1px;
    border-color: #3b4e58;
    padding: 2px;
}

.consumerStyle > .radioButtonControl.rbcStandardType > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {

}

/*--Consumer Style - Segmented control--*/

.consumerStyle > .radioButtonControl {
    font-size:0.875rem;
    border: none;
}

.consumerStyle > .radioButtonControl > .rbcEditorLabel {
    display: block;
    color: #3b4e58;
    margin: 8px 0;
    line-height:24px;
}

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

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem {
    padding: 7px 8px;
    line-height: 20px;
    float: left;
    position: relative;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    margin-right: 4px;
    cursor:pointer;
    color:#3b4e58;
    border:solid 1px #cbcbcb; /*-- theme --colorGreyWarmLighter --*/
    border-radius: 6px !important;
    flex-grow: 1;
}

.easy .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:focus-within{
    outline: dotted 3px #d64200;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > input[type=radio]{
    height: 16px;
    width: 0 !important;
    -webkit-appearance:inherit;
    box-shadow: none;
    border-style: hidden;
    padding: 0 !important;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > input[type=radio]:focus{
    height: 16px;
    width: 0 !important;
    -webkit-appearance:inherit;
    box-shadow: none;
    border-style: hidden;
    padding: 0 !important;
    outline: none;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem {
    padding:10px;
    margin: auto;
    display: flex;
    float: none;
    border-radius:0;
}


.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked, .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:hover {
    z-index:1;
}

.consumerStyle > .radioButtonControl.readonly.rbcSegmentedControl > .rbcEditorField > .rbcItem:hover {
    cursor: not-allowed;
}

.consumerStyle > .radioButtonControl.editable.rbcSegmentedControl > .rbcEditorField > .rbcItem:hover {
    z-index:1;
    border-color: #3b4e58;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:focus {
    z-index:1;
    border-color:#3b4e58;
    outline-color:#3b4e58;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -2px;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem.checked:focus {
    z-index:1;
}





.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:first-child {
    border-radius:2px 0 0 2px;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:last-child {
    border-radius:0 2px 2px 0;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    flex: 1;
}

.consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel > label > span {
    text-align: center;
}


.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:first-child {
    border-radius:2px 2px 0 0;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem:last-child {
    border-radius:0 2px 2px;
}

.phone .consumerStyle > .radioButtonControl.rbcSegmentedControl > .rbcEditorField > .rbcItem > .rbcItemEditorLabel {
    flex: 1;
    margin: auto;
}

.radioButtonControl.rbcSegmentedControl > .rbcItemLabels
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.radioButtonControl.rbcSegmentedControl > .rbcEditorField
{
    display: flex;
}

.radioButtonControl > .rbcEditorField.rbcHorizontalLayout
{
    display: flex;
    flex-wrap: wrap;
}

.radioButtonControl > .rbcEditorField.rbcHorizontalLayout > .rbcItem
{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}





.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/moveright.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropleft.png?v=12.0.253.0') no-repeat center center;
    float:left;
    display:inline-block;
    height:25px;
    width:16px;
     margin-top: 7px;
     display: none;
}

.gridColumnGroupingPanelContainer .slidePrev:hover
{
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropleft.png?v=12.0.253.0') no-repeat center center;
    cursor: pointer;
}

.gridColumnGroupingPanelContainer .slideNext
{
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropright.png?v=12.0.253.0') no-repeat center center;
    float:right;
    display:inline-block;
    height:25px;
    width:16px;
     margin-top: 7px;
     display: none;
}

.gridColumnGroupingPanelContainer .slideNext:hover
{
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropright.png?v=12.0.253.0') 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 .gridActionBar .editorLabelAutoWidth
{
    margin:0 5px 0 3px;
    font-size: 1.2em;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/topbarsplitter.png?v=12.0.253.0') 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('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad35opac.png?v=12.0.253.0');
    background-repeat:repeat-x;
    background-position:top left;
}

.gridContainer table th
{
    padding: 0;
}


.dataTableContainer table th, .slideBar {
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad35opac.png?v=12.0.253.0'), url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac80.png?v=12.0.253.0');
    background-repeat:repeat-x, repeat-y;
    background-position:top left, -19px 0;
}

.dataTableContainer table tr th:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad54opac100.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plus.png?v=12.0.253.0');
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac15.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/ascending.png?v=12.0.253.0');
}
.ascending:hover .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/descending.png?v=12.0.253.0');
}

.descending .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/descending.png?v=12.0.253.0');
}
.descending:hover .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/ascending.png?v=12.0.253.0');
}

.notSorted:hover .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/ascending.png?v=12.0.253.0');
}


/* 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("https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/expandcollapseleft.png?v=12.0.253.0")  no-repeat center;
    }
   
   
   
/*--Common tag styles--*/

.rdpView .tagItem.noCode .tagDesc{
    border-left-width: 1px;
    background-color: #a5a5a5;
    color: #FFF;
    border-color: transparent;
}

.rdpView .tagItem .tagDesc{
    border-width: 1px;
    border-style: solid;
    border-left-width: 0px;
    padding: 0 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #fff;
}

.rdpView .tagItem .tagDesc,
.rdpView .tagItem .tagCode,
.rdpView .moreTags .handle{
    line-height: 16px;
}

.rdpView .tagItem .tagCode {
    color: white;
    height: 16px;
    vertical-align: top;
    text-transform: uppercase;
    padding: 0 3px;
    float: left;
}

.rdpView .tagItem:hover {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
    background-repeat: repeat;
}

.rdpView .tagItem {
    display: inline-block;
    margin-right: 5px;
    font-size: 0.9em;
}
.rdpView .moreTags .dropdownPanel > .tagItem {
    margin-bottom: 5px;
}

.rdpView .tagContainerUser, 
.rdpView .tagContainerProduct,
.rdpView .tagContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.rdpView .tagItem.countTag,
.rdpView .tagItem.categoryTag {
    color: #656565;
    background-color: rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

.rdpView .tagItem.countTag:hover,
.rdpView .tagItem.categoryTag:hover {
    background-image: none;
}

.rdpView .tagItem.countTag .tagCode, .rdpView .tagItem.countTag .tagDesc,
.rdpView .tagItem.categoryTag .tagCode, .rdpView .tagItem.categoryTag .tagDesc {
    background: none;
    border: solid 1px transparent;
    color: inherit;
    padding: 0 3px;
}

.rdpView .tagItem.countTag .tagDesc {
    font-weight: bold;
}

.rdpView .tagItem.categoryTag .tagDesc {
    display: none;
}


.rdpView .tagSection {
    height: 22px;
}

.rdpView .tagSection.inProcess {
    padding-right: 20px; /* make thead section a little bit narrower so when the thumbnail scrollbar is displayed and rdpView get narrower the More button won't jump down' */
}

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

.rdpView .moreTags{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0.9em;
}

.rdpView .moreTags .moreCount{
    border-style: solid;
    border-width: 1px;
}

.rdpView .moreTags.noTags{
    display: none;
}

.rdpView .moreTags .icon16 {
    color: #ffffff;
    background: #a5a5a5;
    border: solid 1px transparent;
    opacity: 0.75;
}

.rdpView .moreTags:hover >.handle > .icon16, 
.rdpView .moreTags.droppedDown >.handle > .icon16 {
    opacity: 1;
}

.rdpView .moreTags .moreCount{
    padding: 0 5px 0 5px;
    line-height: 16px;
    vertical-align: top;
    background-color: #fff;
    border-left: none;
    display: inline-block;
}

.rdpView .moreTags .dropdownPanel {
    display: none;
    position: absolute;
    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);
    z-index: 1;
}

.rdpView .moreTags .dropdownPanel.droppedDown {
    display: block;
}
.rdpView .moreTags .dropdownPanel .tagItem {
    margin-right: 0;
    float: left;
    clear: left;
}


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

.enquiryLeftActionBar .filter{
    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(https://cdn.t1cloud.com/cianywhere/content/base/images/loaderlbg.gif?v=12.0.253.0) no-repeat;
    height: 16px;
    width: 16px;
    margin-top: 10px;
}

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

.rowGroupExpander .icon16, .rowGroupExpander.collapsed .icon16
{
    background:  url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/expcolplusminus.png?v=12.0.253.0') no-repeat top left;
}

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

.rowGroupExpander.expanded .icon16
{
    background:  url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/expcolplusminus.png?v=12.0.253.0') 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: 35px;
}

.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.hasHeaderBar.rdpHeaderBarHidden > .contents,
.relatedDataPortlet.hasHeaderBar.rdpHeaderBarHidden.hasRdpActionBar.noRDPActions > .contents,
.relatedDataPortlet.hasHeaderBar.rdpHeaderBarHidden > .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.headerBarVisible > .headerBar {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
}

.relatedDataPortlet > .headerBar {
    display: none;
}

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

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

#EnquiryRelatedDataPortlet.relatedDataPortlet .headerBar #SearchPanel
{/* enquiry RDP should have the width 35%, everything else 50%*/
    width: 35%;
}

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

.relatedDataPortlet .headerBar .naturalLanguageSearch {
    padding: 0;
    float: left;
    height: 30px;
    width: 100%;
    box-sizing: border-box;
}

.relatedDataPortlet .headerBar .naturalLanguageSearch .naturalLanguageSearchInputWrapper {
    width: 100%;
    box-sizing: border-box;
    padding-right: 50px;
}

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


#SearchButton .buttonLabel {
     display: none;
}

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

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

.relatedDataPortlet .headerBar #SearchPanel > .searchButton {
    max-width: 50px; /*search button has a global margin right of -50 so make sure when browser has a zoom level != 100% the button is still displayed correctly*/
}

.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 .gridUnloadReloadSelector,
.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 .gridUnloadReloadSelector .chooser .downFill > .glyph:before {
    content: "\E234";
}

.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 .generateTemplate.icon16,
.rdpActionBar .gridImportExportSelector .expCSV.icon16,
.rdpActionBar .gridImportExportSelector .expFile.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 .generateTemplate.icon16:before,
.rdpActionBar .gridImportExportSelector .expFile.icon16:before,
.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: var(--ciaColourBackgroundHighlightHover);
}

.relatedDataPortlet .rdpActionBar .optionsSelector .dropdownPanel .dropdownPanelListItem.highlight {
    background-color: var(--ciaColourBackgroundHighlight);
}

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

.relatedDataPortlet .rdpActionBar .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 .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 .immediateUploadPanel:hover,
#ScheduleMaintenanceForm .flatStyle:hover
{
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac35.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/map.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac80.png?v=12.0.253.0');*/
    background-color: rgba(0, 0, 0, 0.03);
}

.relatedDataPortlet .dropDown.selected {
    /*background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac5.png?v=12.0.253.0');*/
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/import.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc1.png?v=12.0.253.0');

}

#FileDropTargetImage2 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc2.png?v=12.0.253.0');

}

#FileDropTargetImage3 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc3.png?v=12.0.253.0');

}

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/loadersml.gif?v=12.0.253.0') 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;
}

.relatedDataPortlet .dataEntryControls{
    display: inline-block;
    float: right;
}

.relatedDataPortlet .rdpBlockPanel{
    display: none;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 2;
    opacity: 0.8;
}


.relatedDataPortlet.blocked .rdpBlockPanel{
    display: block;
}

.relatedDataPortlet .rdpBlockPanel .rdpBlockContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    border-radius: 5px;
    padding: 10px;
    opacity: 1;
}

.relatedDataPortlet .rdpBlockPanel .rdpBlockContainer .rdpBlockIcon {
    font-size: 5em;
    line-height: 80px;
    text-align: center;
}

.relatedDataPortlet .rdpBlockPanel .rdpBlockContainer .rdpBlockText {
    line-height: 30px;
    text-align: center;
    font-weight: bold;
}

.relatedDataPortlet .rdpSummaryPanelContainer {
    height: 70px;
    position: absolute;
    right: 10px;
    top: -25px;
    min-height: 80px;
}

.tabControl .relatedDataPortlet .rdpSummaryPanelContainer{
    background-color: transparent;
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/removereddark.png?v=12.0.253.0') no-repeat center center;
}

.repeatingPanelNewButton > .icon16 {
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plusgreendark.png?v=12.0.253.0') 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;
}

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


.richTextControl .suggestionPaneWrapper {
    left: -1px;
    right: -1px;
    top: 60px;
    overflow: hidden;
}

.richTextControl .suggestionPaneWrapper .suggestionPane{
    overflow: auto;
}

.richTextControl.showQuickText .suggestionPaneWrapper{
    display: block;
}

.richTextControl.showQuickText .suggestionPaneWrapper .suggestionPaneAddQuickTextButtonInnerContainer{
    display: block;
}

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

.richTextControl .suggestionPane > table > tbody > .picklistDataRow {
    height: 36px;
}
.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;
}

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

.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.bulkActionMode.hideSummaryCounter .summaryCounter {
    display: none;
}

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

.selectionSummary.shoppingCartMode .summaryCounter {
    display: flex;
    background-color: transparent;
    padding: 4px;
    margin-right: 5px;
    border-width: 1px;
    border-style:solid;
}

.selectionSummary.shoppingCartMode .summaryCounter > .glyph {
    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;
    font-weight: bold;
    font-size: 1.2em;
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac20.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/cartsprite.png?v=12.0.253.0');
    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 .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 > .menuLinks16
{
    max-height: 430px;
    overflow-y:auto;
    overflow-x: hidden;
    width: 400px;
    -webkit-overflow-scrolling: touch;
}

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

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

.summaryListSelector.dropdownControl > .dropdownPanel {
    padding: 10px
}

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

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

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


.summaryListSelector.dropdownControl .dropdownPanel button .icon16{
    position: relative;
    margin-top: -1px;
}

.selectionSummary .dropdownControl .dropdownPanel .description
{
    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;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
}

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


.selectionSummary .selectionSummaryReview:hover,
.selectionSummary .selectionPanelDetailsHeader .removeAll:hover,
.selectionSummary .selectedItemDetails .updateQuantityForItem:hover{
    text-decoration: unset;
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plus.png?v=12.0.253.0');
    border: 1px solid green;
    height: 16px;
    width:16px;
}
.selectionSummary.shoppingCartMode .selectionSummaryReview{
    font-weight: bold;
}

/***** SELECTION PANEL HEADER AND FOOTER DEFINITIONS *******/
.selectionSummary .dropdownPanel .menuLinks16{
    float: none; /*no need for floating*/
}

.selectionSummary .selectionPanelDetailsHeader
{
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
}

.selectionSummary .dropdownPanel .separator{
    content: " ";
    height: 1px;
    display: block;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.2) 90%,rgba(0,0,0,0) 100%);
}

.selectionSummary .selectionPanelDetailsFooter
{
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
}

.selectionSummary .selectionPanelDetailsHeader .spLeftContainer,
.selectionSummary .selectionPanelDetailsHeader .spRightContainer{
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.selectionSummary .selectionPanelDetailsHeader .spLeftContainer .spSubHeader{
    padding-top: 20px;
}

.selectionSummary .selectionPanelDetailsHeader .spRightContainer .closePanelAction button{
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: solid 1px transparent;
    border-radius: 15px;
    box-shadow: none;
    text-shadow: none;
}

.selectionSummary .selectionPanelDetailsHeader .spRightContainer .removeAll{
    font-weight: bold;
    cursor: pointer;
}

.selectionSummary .selectionPanelDetailsFooter .spRightContainer{
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/***** SELECTED ITEMS DEFINITIONS *******/
.selectionSummary .selectedItem{
    display: flex;
    gap: 5px;
}

.selectionSummary .selectedItem .selectedItemDetails{
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.selectionSummary .selectedItem .selectedItemDetails .leftContent{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.selectionSummary .selectedItem .selectedItemDetails .header{
    font-size: 120%;
    font-weight: 600;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px 0;
}

.selectionSummary .selectedItem .selectedItemImage{
    display: block;
    text-align: center;
}

.selectionSummary .selectedItem .selectedItemAction{
    text-align: right;
}

.selectionSummary .selectedItem .selectedItemDetails .leftContentLines,
.selectionSummary .selectedItem .selectedItemDetails .rightContentLines{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.selectionSummary .selectedItem .selectedItemAction .removeItem
{
    position: relative;
    border: solid 1px transparent;
    border-radius: 15px;
    box-shadow: none;
    text-shadow: none;
    top: 0;
    right: 0;
}

.selectionSummary .selectedItem .selectedItemDetails .quantityInputContainer{
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    height: 30px;
    width: 80px;
    box-sizing: border-box;
}


.selectionSummary .selectedItem .selectedItemDetails .quantityInputContainer .quantityInput {
    border: none;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

.selectionSummary .selectedItem .selectedItemDetails .updateQuantityForItem{
    font-weight: bold;
    line-height: 30px;
    vertical-align: middle;
    opacity: 0.5;
    cursor: default;
}

.selectionSummary .selectedItem .selectedItemDetails .updateQuantityForItem.enabled {
    cursor: pointer;
    opacity: unset;
}

.selectionSummary.shoppingCartMode .selectedItem .selectedItemAction .removeItem > .icon16.glyph:before{
    content: "\E057";
}

.selectionSummary.bulkActionMode .selectedItem .selectedItemAction .removeItem > .icon16.glyph:before{
    content: "\E058";
}

.selectionSummary.shoppingCartMode > .dropdownControl > .dropdownPanel{
    max-width: 600px;
}

.selectionSummary .selectedItem .selectedItemDetails .leftContent {
    width: 70%;
}

.selectionSummary .selectedItem .selectedItemDetails .rightContent{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-between;
}

.selectionSummary .selectedItem .selectedItemDetails .quantityContainer{
    display: flex;
    gap: 5px;
    padding-top: 10px;
}

.selectionSummary .selectedItem .selectedItemDetails .quantityContainer >.quantityLabelContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.selectionSummary .selectedItem .selectedItemDetails .quantityContainer >.quantityLabelContainer > .quantityLabel {
    font-weight: bold;
}

.selectionSummary .selectedItem .selectedItemDetails .quantityContainer >.quantityInput{
    width: 60px;
    text-align: right;
}

.selectionSummary .selectedItem .rightContent .rightLine{
    text-align: right;
}

.selectionSummary .selectedItemImage{
    width: 64px;
    height: 64px;
}

.selectionSummary .selectedItemImage img{
    max-height: 100%;
    max-width: 100%;
}

.selectionSummary .selectedItemImage.loading{
    opacity: 0;
    transform: scale(0.5);
}

.selectionSummary .selectedItemImage .missingImagePlaceholder {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 48px;
    width: 48px;
    display: block;
}

.selectionSummary .selectedItemImage .missingImagePlaceholder.miGeneric {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/image.png?v=12.0.253.0');
}


.signaturePadStyleContainer
{
    margin-right: 20px;
    margin-bottom: 15px;
}

.SignaturePadContainer
{
    border: none;
}

.signaturePadLblCol
{
    margin-bottom: 10px;
}

.signaturePadCanvas
{
    background-color: var(--ciaColourBackgroundSignaturePad);
}

.signaturePadClearBtnCol
{
    margin-top: 5px;
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc1.png?v=12.0.253.0');  
 
}

#FileDropTargetImage2 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc2.png?v=12.0.253.0');
    
}

#FileDropTargetImage3 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/ecm/doc3.png?v=12.0.253.0');
    
}

.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(https://cdn.t1cloud.com/cianywhere/content/base/icons/48/no_image.png?v=12.0.253.0);
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac3.png?v=12.0.253.0');

}

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac3.png?v=12.0.253.0');
    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(https://cdn.t1cloud.com/cianywhere/content/base/images/loadersml.gif?v=12.0.253.0);
    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;
}*/


.slideBarControl
{
    margin-right: 20px;
    margin-bottom: 15px;
}

.slideBarControl .dhx_slider__tick-label
{
    font-size: 0.9em;
}
.statusBox 
{
    display:inline-block;
    width:110px;
    /*height:30px;*/
    border: solid 1px #0F3367;
    border-radius: 3px;
    background: #206bc7 url('https://cdn.t1cloud.com/cianywhere/content/base/images/buttonbg.png?v=12.0.253.0') 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);
}

.summaryPanelControl.analyticsContainer > .smryPanelContents {
    aspect-ratio: 16/9;
}

.summaryPanelControl.mainSmryPanel.wideColumn.analyticsContainer > .smryPanelContents {
    aspect-ratio: 16/3;
}

.summaryPanelControl.analyticsContainer > .smryPanelContents .iFrameContainer iframe{
    min-height: unset;
}

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




.freeFormatterIconNotification.freeFormatterIconNotificationHasMessages {
    cursor: pointer;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel {
    background: white;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationStatusBar {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 50px;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationStatusBar .glyph {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationMessagesContainer {
    padding-left: 60px;
    max-height: 30vh;
    overflow-y: auto;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationMessagesContainer .freeFormatterIconNotificationItem {
    border-top: solid 1px rgba(0, 0, 0, 0.05);
    line-height: 2em;
    margin-top: 5px;
    padding-top: 5px
}

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

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

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

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationActions {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationActions div:hover {
    opacity: 1;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationActions .tooltip {
    position: absolute;
    background: white;
    border-radius: 5px;
    display: none;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel .freeFormatterIconNotificationActions div:hover .tooltip{
    display: block;
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel {
    display: none;    
}

.freeFormatterIconNotification .freeFormatterIconNotificationPanel.shown {
    display: block;
}

.freeFormatterIconNotificationItem.error > .glyph:before { content:"\E185"; }
.freeFormatterIconNotificationItem.warning > .glyph:before { content: "\E221"; }
.freeFormatterIconNotificationItem.information > .glyph:before  { content:"\E084"; }

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad35opac.png?v=12.0.253.0'), url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac80.png?v=12.0.253.0');
    background-repeat: repeat-x, repeat-y;
    background-position: top left, -19px 0;
}

.slick-header .slick-header-column.ui-state-default {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-right: solid 1px transparent;
    overflow: visible;
}

.slick-header-column.gridColumnAlignRight{
    justify-content: flex-end;
}


.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('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad54opac100.png?v=12.0.253.0');
    background-repeat: repeat-x;*/
    background-color: rgba(0, 0, 0, 0.03);
}

.gridContainer .slick-cell {
    padding: 0 10px 2px 10px;
    border-right: none;
    border-left: none;
    border-top: none;
}

.displayDensityCompact .slick-viewport .slick-cell {

}
.slick-viewport .slick-cell.tagColumn{
    padding-top: 5px;
}
.slick-viewport .slick-cell.tagColumn.active{
    overflow: visible;
    z-index: 2; /* alow more tags dropdown to be displayed over the rest of the grid*/
}

.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.isBooleanValue {
    /* no margin right for checkboxes */
    margin-right: 0px;
}

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

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac35.png?v=12.0.253.0');
    background-repeat: repeat;
}
/* This style is already defined in slick.grid.css */
/*.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;
}

.gridContainer .slickGridContainer .slick-row.isDataRow.selected,
.gridContainer.readonly.zebraLayout .slick-row.isDataRow.odd.selected {
    background-color: var(--ciaColourBackgroundHighlight);
}

.gridContainer.supportsHover .slick-row.isDataRow .slick-cell:hover {
    cursor: pointer!important;
}

.gridContainer .slick-viewport .slick-row.gridRowMarkedToDeleted .slick-cell {
    background-color: #f2f3f4!important;
}

.gridContainer .slick-viewport .slick-row.gridRowMarkedToDeleted .slick-cell-checkboxsel input {
    visibility: hidden;
}

.gridContainer .slick-viewport .slick-row.gridRowMarkedToDeleted .slick-cell a {
    visibility: hidden;
}

.gridContainer .slick-viewport .slick-row.gridRowMarkedToDeleted .slick-cell:before {
    content: " ";
    position: absolute;
    left: 0; top: 50%; width: 100%;
    border-bottom: 1px solid #000;
}

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

.rowActionPanel thead th {
    border-left:none;
    border-right:none;
}

.gridContainer .slick-row.isDataRow .gridColumnEditable,
.gridContainer .slick-row.isDataRow.isLockedRow .slick-cell.gridCellEditable,
.gridContainer.editable .slick-row.isDataRow .slick-cell-checkboxsel {
    background-color: #fff;
}

.slick-viewport .slick-cell.editable {
    border-color: #e6e6e6;
}

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

.gridContainer.displayDensityDoubleHeight .iconCellContainer .glyph.iconComponent.iconSizeResponsive{
    font-size: 40px;
}

.gridContainer .iconCellContainer {
    box-sizing: border-box;
    display: flex;
}

.gridContainer.displayDensityComfortable .iconCellContainer{
    padding: 2px;
    height: 32px;
    width: 32px;
}

.gridContainer.displayDensityDoubleHeight .iconCellContainer{
    padding: 10px;
    height: 48px;
    width: 48px;
}

.gridContainer.displayDensityCompact .iconCellContainer{
    padding: 2px; /* compact view is only 24px height*/
    height: 24px;
    width: 24px;
}

.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.editable > .tbcEditorField > .tbcInputContainer.hasPicker.pickersThree {
    padding-right: 71px;
}

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

.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 > .tbcInputContainer.pickersThree > .tbcPicker {
    right: 47px;
}

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

.headerLines4 .slick-header-column.slick-header-column {
    height: 62px;
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/grid_bg_24.png?v=12.0.253.0');
    background-repeat: repeat;
}

.displayDensityComfortable .grid-canvas {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/grid_bg_32.png?v=12.0.253.0');
    background-repeat: repeat;
}

.displayDensityDoubleHeight .grid-canvas {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/grid_bg_48.png?v=12.0.253.0');
    background-repeat: repeat;
}

.slick-sort-indicator {
    position: absolute;
    right: 3px;
    top: 11px;
    cursor: pointer;
/*    background-image: var(--ciaIconSortUnselected);*/ /* hide the icon for the time being */
    opacity: 0.3;
    display: none;
}

.slick-column-menu-item:hover{
    background-color: var(--ciaColourBackgroundHighlightHover);
}

.slick-column-menu-item > .sortReset{
    background-image: var(--ciaIconSortUnselected) ;
}

.slick-sort-indicator.slick-sort-indicator-asc,
.slick-column-menu-item > .sortAsc{
    background-image: var(--ciaIconSortAsc);
    opacity: 1;
}

.slick-sort-indicator.slick-sort-indicator-desc,
.slick-column-menu-item > .sortDesc{
    background-image: var(--ciaIconSortDesc);
    opacity: 1;
}

.slick-header-column-sorted {
  font-style: inherit !important;
}

.slick-header-column-sorted .slick-sort-indicator{
    display: block;
}

.slick-header-column-sorted .slick-column-name{
    margin-right: 9px; /* sort icon is visible (absolute positioned) and it overlaps 9px the column name container*/
}

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

.slick-header-column.hasAdvancedMenu.ui-state-hover .slick-column-name,
.slick-header-column.hasAdvancedMenu.showAdvancedMenu .slick-column-name
/*,.slick-header-column.gridColumnAlignRight .slick-column-name - this prevents right-aligned column heading from jumping to left on hover*/
{
    padding-right: 16px; /* leave room for the contextual advanced menu icon shown on hover*/
}

.slick-column-name
{
    display: flex;
    overflow-x: hidden;
    overflow-y:visible;
    text-shadow: 0 1px 1px #fff;
    font-weight: 600;
    font-size: 0.9em;
    position: relative;
    top: -4px;/*the container has a padding of 4px and we want to be able to drag from the very top*/
    height: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
}

.slick-column-name .columnName{
    flex-shrink: 1;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 0;
}

.slick-header-column[id*="checkbox_selector"] > .slick-column-name {
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
    display: block;
}


@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: 48px;
}

.displayDensityComfortable .slick-cell {
    line-height: 32px;
}

.displayDensityCompact .slick-cell {
    line-height: 24px;
}

/*  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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/searchwatermark.png?v=12.0.253.0');
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/24/drilldownright-boxed.png?v=12.0.253.0');
    display: block;
}
*/
.gridContainer .addRemoveItem{
    position: absolute;
    top: 50%;
    margin-top:-6px;
    cursor: pointer;
}

.gridContainer .addRemoveItem.addItem .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plus.png?v=12.0.253.0');
    display: block;
}

.gridContainer .addRemoveItem.removeItem .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/minus.png?v=12.0.253.0');
    display: block;
}


 /*--Editable related data portlet--*/

.relatedDataPortlet .gridActionBar {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac35.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
}

.slick-group {
    /*background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac80.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/images/attachment.png?v=12.0.253.0');
}

.slick-cell div.attachmentInfo .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/attachmentinfo.png?v=12.0.253.0');
}

.slick-cell div.info .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/info.png?v=12.0.253.0');
}

.slick-cell.showSpinner {
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/images/pulsedot.gif?v=12.0.253.0') 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;
}

/**** tags ****/
.superGrid .tagContainer{
    display: flex;
}

.superGrid .tagContainer .tagItem {
    display: inline-block;
    margin: 0 5px 4px 0;
    font-size: 0.9em;
}

.superGrid .tagContainer .tagItem {
    display: inline-block;
    margin: 0 5px 4px 0;
    font-size: 0.9em;
}

.surveyWrapper{
    position: absolute;
    top: 0;
    left: 0;
    RIGHT: 0;
    background: rgba(0, 0, 0, 0.21);
    bottom: 0;
    transition: ease 0.3s;
    visibility: hidden;
    opacity: 0;
    display: flex;
    overflow: auto;
}
.surveyWrapper.shown{
    visibility: visible;
    z-index: 90001;
    opacity: 1;
}


.surveyWrapper .surveyContainer{
    max-width: 730px;
    background: white;
    box-shadow: 0 3px 5px #0000009e;
    border-radius: 5px;
    position: relative;
    color: #0f3367;
    transition: ease 0.3s;
    transform: scale(0.8);
    margin: 0 auto;
    height: max-content;
    align-self: center;
    overflow: hidden;
}
.surveyWrapper.shown .surveyContainer{
    transform: scale(1);
}

.surveyWrapper .surveyContainer > .header{
    background: rgba(0,0,0,0.05);
    padding: 20px 10px;
}

.surveyWrapper .surveyContainer .voteTitle{
    text-align:center;
}

.surveyWrapper .surveyContainer > .header h2{
    display: inline-block;
    font-size: 1.3em;
}
.surveyWrapper .surveyContainer > .header .closeBtn
{
    position: absolute;
    right: 5px;
    border-radius: 20px;
    border-color: transparent;
    padding: 8px;
    top: 8px;
    background:none;
    box-shadow:none;
}

.surveyWrapper .surveyContainer h3{
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1.5em;
    color: #0f3367;
}

.surveyWrapper .surveyContainer > .content{
    transition:transform 0.3s ease-in-out;
}
.surveyWrapper.sent .surveyContainer > .content{
    transform: translate(120%, 0px) skew(-15deg, 15deg);
    background: white;
    box-shadow: 0 0 3px #000000a6;
}

.surveyWrapper .voteButtons {
    text-align: center;
    padding: 20px 0;
    line-height: 1.5em;
}

.surveyWrapper .btnDislike > .glyph{
    transform: rotateZ(180deg) translateY(-5px);
}
.surveyWrapper .btnDislike{
    margin-left: 20px;
}

.surveyWrapper .voteButtons > button{
    padding: 15px 30px;
}

.surveyWrapper .feedBackMore, .surveyWrapper.showMore .voteContainer{
    visibility:hidden;
    position:absolute;
}
.surveyWrapper.showMore .feedBackMore{
    visibility:visible;
    position:relative;
}


.surveyWrapper .styleContainer.tbcStyleContainer{
    padding-bottom: 0;
}

.surveyWrapper .styleContainer.tbcStyleContainer .textBoxControl {
    background-color:rgba(0,0,0,0.02);
}

.surveyWrapper .surveyContainer footer{
    padding: 10px 0;
    text-align: center;
    background: rgba(0,0,0,0.1);
}

.surveyWrapper .surveyContainer footer > button{
    padding: 10px 40px;
}

.surveyWrapper.showMore .surveyContainer footer .btnBack,
.surveyWrapper.showMore .surveyContainer footer .btnSend
{
    visibility: visible;
}

.surveyWrapper .surveyContainer footer .btnBack,
.surveyWrapper .surveyContainer footer .btnSend
{
    visibility: hidden;
}

.surveyWrapper .surveyContainer footer .btnDismiss {
    margin-left: 45%;
}

.surveyWrapper .sentMessage{
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    flex-flow: column;
    width: 100%;
    justify-content: center;
    transition: 0.5s ease;
    opacity: 0;
    transform: scale(0.6);
    visibility: hidden;
    z-index: -1;
}
.surveyWrapper .sentMessage h3{
    font-size: 2em;
}

.surveyWrapper.sent .sentMessage{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.surveyWrapper .sentMessage .iconContainer{
    text-align: center;
}

.surveyWrapper .sentMessage .iconContainer > .glyph {
    width: 120px;
    display: inline-block;
    height: 120px;
    border-radius: 50%;
    transition: 0.5s ease-in;
    background: white;
    color:white;
}


.surveyWrapper.sent .sentMessage .iconContainer > .glyph{
    background: #a6cea2;
}

.surveyWrapper.sent footer {
    display:none;
}

.phone .feedbackButton {
    display:none;
}

.hasUserFeedback .portalLabels + .noWrap{
    padding-right: 80px;
}
.phone.hasUserFeedback .optionItem.feedbackButton{
    display:block;
}

/********* NPS Survey  ********/
.fbSurvey .voteButtons{
    height: 100px;
}

.showMore .voteButtons{
    height: auto;
}

.fbSurvey .voteButtons button{
    padding: 10px 15px;
    border-radius: 25px;
}

.fbSurvey .scale {
    height: 20px;
    width: 100%;
    top: 10px;
    position: relative;
    padding-left: 10px;
    color: white;
    font-weight: bolder;
    align-content: center;
    display: grid;
    font-size: medium;
}

.fbSurvey .scale p {
    position: absolute;
}

.fbSurvey .scaleLine {
    border: thin solid rgb(9, 181, 209);
}

.fbSurvey .scaleLine.h {
    width: 100%;
    top: 25px;
    position: relative;
    padding-left: 10px;
}

.fbSurvey .scaleLine.vL, .fbSurvey .scaleLine.vR {
    position: absolute;
    rotate: 90deg;
    bottom: -1px;
    display: inline;
    right: 95%;
    width: 5px;
}

.fbSurvey .scaleLine.vR {
    left: 95%;
}

.fbSurvey .scaleLine.vN {
    display: none;
}

.fbSurvey .scale .scaleText7, .fbSurvey .scale .scaleText9 {
    margin-left: 34px;
}

.fbSurvey .scale.Detractors {
    background-color: rgb(241, 73, 80);
}

.fbSurvey .scale.Passives {
    background-color: rgb(251, 176, 5);
}

.fbSurvey .scale.Promoters {
    background-color: rgb(0, 146, 69);
}

.fbSurvey .scale.Detractors.box0 {
    border-radius: 7px 0 0 7px;
}

.fbSurvey .scale.Promoters.box10 {
    border-radius: 0 7px 7px 0;
}

.fbSurvey .scaleDescriptions {
    position: absolute;
    margin-top: 30px;
    color: rgb(9, 181, 209);
    font-weight: 600;
    display: grid;
    font-size: small;
}

.fbSurvey .scaleDescriptions.txt3 {
    margin-left: -20px;
}

.fbSurvey .scaleDescriptions.txt7, .fbSurvey .scaleDescriptions.txt9 {
    margin-left: 20px;
}

.fbSurvey.surveyContainer .voteTitle, .fbSurvey.surveyContainer footer {
    text-align: left;
}

.fbSurvey.surveyContainer footer > button{
    margin-left:20px;
    border-radius: 25px;
}

.fbSurvey.surveyContainer .textBoxControl{
    width: 100%;
}

.fbSurvey .engagingStyle .rbcItemInput:before{
    margin: 4px 0 !important;
}

.fbSurvey .engagingStyle .rbcItemInput:after{
    margin-top: 8px !important;
}

.fbSurvey .engagingStyle .rbcItemEditorLabel{
    padding: 4px !important;
}

.fbSurvey .privacyDisclaimer {
    max-width: 670px;
    margin-top: 35px;
}

.surveyWrapper.showMore .privacyDisclaimer {
    margin-top: 10px;
}

.survey .surveyContainer .validationError{
    padding-top: 20px;
}

.survey .surveyContainer .validationError .validationMessage{
    position: absolute;
    top:0px;
    border: none;
    box-shadow: none;
    color: #D00;
    font-style: italic;
    font-weight: bold;
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/images/leftarrow.png?v=12.0.253.0') no-repeat center center;
    float:left;
    margin-left: -1px;
}

.tabbedControl > .previousTab.enabled:hover
{
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/leftarrowhover.png?v=12.0.253.0') no-repeat center center;
}

.tabbedControl > .nextTab
{
    background: url(https://cdn.t1cloud.com/cianywhere/content/base/images/rightarrow.png?v=12.0.253.0) no-repeat center center;
    float:right;
    margin-right: -1px;
}

.tabbedControl > .nextTab.enabled:hover
{
    background: url(https://cdn.t1cloud.com/cianywhere/content/base/images/rightarrowhover.png?v=12.0.253.0) 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('https://cdn.t1cloud.com/cianywhere/content/base/images/buttonbg.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationprevious.png?v=12.0.253.0') no-repeat center;
}

.tabHandle.recNavFuture span {
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationnext.png?v=12.0.253.0') 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('https://cdn.t1cloud.com/cianywhere/content/base/images/overdue11.png?v=12.0.253.0');
}

.saved .icon11 {
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/save11.png?v=12.0.253.0');
}


/*--- 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('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
    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-color: var(--ciaColourBorderTableCell);
    border-style:none;
    border-bottom-style:solid;
    border-bottom-width: 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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationfirst.png?v=12.0.253.0') no-repeat center;
}

.footer .lastPage .icon16
{
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationlast.png?v=12.0.253.0') no-repeat center;
}

.footer .nextPage .icon16
{
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationnext.png?v=12.0.253.0') no-repeat center;
}

.footer .prevPage .icon16
{
    background:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/paginationprevious.png?v=12.0.253.0') no-repeat center;
}

/*--vanilla table style--*/

.vanillaStyle .formActions {
    padding:0;
}

.vanillaStyle .tHeadings {
    background:none;
    border:none;
}

.vanillaStyle .trHighlight
{
    font-weight:bold;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.253.0');
    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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/close3.png?v=12.0.253.0');
}

.tagSelectorPanel .tagItem .editTag .icon16{
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/edit.png?v=12.0.253.0');
}

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/dropdown.png?v=12.0.253.0');
    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;
}
.stackedStyle .textBoxControl > .tbcEditorField  {
    white-space: pre-wrap;
    word-wrap: break-word;
}

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

/*--Consumer styles--*/
.consumerStyle.tbcStyleContainer {
    padding:12px 0;
}

.consumerStyle.tbcStyleContainer .tbcEditorLabel,
.consumerStyle.tbcStyleContainer .tbcEditorLabelAutoWidth {
    display: block;
    position: relative;
    font-size: 0.875rem;
    color: #404040;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.readonly .tbcEditorLabel {
    color: #757575;
}

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

.consumerStyle.tbcStyleContainer label {
    position: relative;
    display: inline-block;
    padding: 2px 2px 6px 0;
    line-height: 1rem;
}

.consumerStyle.tbcStyleContainer label > .charCount {
    display: none;
}

.consumerStyle.tbcStyleContainer .labelInnerContainer {
    cursor: default;
}

.consumerStyle.tbcStyleContainer .tbcEditorField {
    position: relative;
    display: inline-block;
    border:solid 1px #cbcbcb;
    border-radius: 2px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
    outline: none;
    font-size:0.875rem;
    color: #3b4e58;
    min-width: 150px;
}

.consumerStyle.tbcStyleContainer .tbcEditorField:hover,
.consumerStyle.tbcStyleContainer > .textBoxControl.active .tbcEditorField {
    border-color:#606060;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.readonly .tbcEditorField {
    border-color:transparent;
}

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

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

.consumerStyle.tbcStyleContainer .tbcInputInnerContainer {
    box-sizing: border-box;
    height: 100%;
    position: relative;
    width: 100%;
}

.consumerStyle.tbcStyleContainer .textBoxControlInput,
.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan {
    position: relative;
    color: inherit;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    padding: 0 8px;
    box-sizing: border-box;
    width: 100%;
    font-size:inherit;
    color:#383f58; /*---potentially needs to bind to theme colour--*/
    transition: padding 0.1s ease-in-out;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.multiLine .textBoxControlInput,
.consumerStyle.tbcStyleContainer > .textBoxControl.multiLine .readonlyTextBoxSpan {
    height:60px;
    line-height: 24px;
    color: inherit;
    background: none;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    padding: 4px 8px;
    box-sizing: border-box;
    width: 100%;
    resize: none;
    vertical-align: top;
    transition: all 0.1s ease-in-out;
}

.consumerStyle.tbcStyleContainer .textBoxControlInput.decimal,
.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan.decimal,
.consumerStyle.tbcStyleContainer .textBoxControlInput.long,
.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan.long,
.consumerStyle.tbcStyleContainer .textBoxControlInput.currency,
.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan.currency {
    text-align: left;
}

.consumerStyle.tbcStyleContainer .readonlyTextBoxSpan {
    padding:7px 8px;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.readonly .readonlyTextBoxSpan,
.consumerStyle.tbcStyleContainer > .textBoxControl.multiLine .readonlyTextBoxSpan {
    padding:0;
    line-height:normal;
    min-height: 24px;
}

.consumerStyle.tbcStyleContainer .inputClearButton {
    top: 0;
    right: 0;
    padding: 0;
    color:#cbcbcb;
    cursor: pointer;
    width: 40px;
    height: 100%;
    position: absolute;
    z-index: 2;
    align-items: center;
    justify-content: center;
}

.consumerStyle.tbcStyleContainer .inputClearButton:before {
    content:"";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' id='cancel'%3E%3Cg fill='%23606060' fill-rule='evenodd'%3E%3Cpath id='aja' d='M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14.0005' y='4.58636' width='2' height='13.3108' rx='1' transform='rotate(45 14.0005 4.58636)' fill='%233B4E58'/%3E%3Crect x='15.4147' y='13.9985' width='2' height='13.3108' rx='1' transform='rotate(135 15.4147 13.9985)' fill='%233B4E58'/%3E%3C/svg%3E");
    background-size:20px;
    background-position:center;
    display: block;
    width: 20px;
    height: 24px;
    line-height:20px;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty.active .inputClearButton,
.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty:hover .inputClearButton {
    display:none;
}

/*.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .inputClearButton,
.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty .tbcInputContainer:hover .inputClearButton,*/
.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty.active > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton,
.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notEmpty:hover > .tbcEditorField > .tbcInputContainer > .tbcInputInnerContainer > .inputClearButton {
    display:flex;
    top: 0;
    right: 0;
    margin: 0;
}

.consumerStyle.tbcStyleContainer .tbcPicker,
.consumerStyle.tbcStyleContainer [class*="icklistContextButton"],
.consumerStyle.tbcStyleContainer .timeContextButton,
.consumerStyle.tbcStyleContainer .expressionContextButton {
    position: absolute;
    padding: 0 10px;
    top: 0;
    right: 0;
    border: solid 1px transparent;
    color: #667985; /*---potentially needs to bind to theme colour--*/
    border-left:1px solid #cbcbcb;
    border-radius: 0 2px 2px 0;
    transition: opacity 0.1s ease;
    box-shadow: none;
    text-align: center;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
    cursor: default;
    margin: -1px -1px 0 0;
    background-image:none;
}

.consumerStyle.tbcStyleContainer .tbcPicker {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-radius: 0;
}

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

.consumerStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersTwo > .tbcPicker,
.consumerStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker.tbcP2 {
    right:41px;
    top:1px;
}

.consumerStyle > .textBoxControl > .tbcEditorField > .tbcInputContainer.pickersThree > .tbcPicker {
    right:71px;
    top:1px;
}

.consumerStyle.tbcStyleContainer .tbcPicker:hover,
.consumerStyle.tbcStyleContainer [class*="icklistContextButton"]:hover,
.consumerStyle.tbcStyleContainer .dateContextButton:hover {
    /*border-left-color: #3b4e58;*/ /*---potentially needs to bind to theme colour--*/
    /*background-color: #3b4e58;*/ /*---potentially needs to bind to theme colour--*/
    opacity: 1;
    outline: none;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-left-color 0.1s ease-in-out;
}

.consumerStyle.tbcStyleContainer .glyph {
    margin:0 auto;
    min-width:20px;
    min-height:20px;
    width:20px;
    height:20px;
    line-height:20px;
    background-size:cover;
    background-position:initial;
    background-image: none;
    display:block;
}

.consumerStyle.tbcStyleContainer button.tbcPicker:hover,
.consumerStyle.tbcStyleContainer [class*="icklistContextButton"]:hover {
    cursor:pointer;
    color:#fff;
}

.consumerStyle.tbcStyleContainer .tbcPicker.picklist > .glyph,
.consumerStyle.tbcStyleContainer .picklistContextButton > .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' %3E%3Cg fill='%23667895'%3E%3Cpath id='ala' d='M10 11.828l3.536-3.535a1 1 0 0 1 1.414 1.414l-4.243 4.243a1 1 0 0 1-1.414 0L5.05 9.707a1 1 0 0 1 1.414-1.414L10 11.828z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/*.consumerStyle.tbcStyleContainer > .textBoxControl.pickDate .tbcPicker.date > .glyph,*/
.consumerStyle.tbcStyleContainer .dateContextButton > .glyph,
.consumerStyle.tbcStyleContainer .dateTimeContextButton > .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23667895' stroke-width='2' transform='translate(1 1)'%3E%3Cpath d='M1.2,17 L16.8,17 C16.9047056,17 17,16.9022622 17,16.7692308 L17,3.23076923 C17,3.09773781 16.9047056,3 16.8,3 L1.2,3 C1.09529436,3 1,3.09773781 1,3.23076923 L1,16.7692308 C1,16.9022622 1.09529436,17 1.2,17 Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M1 7L17 7M5 2.36010674L5 .984619141M13 2.36010674L13 .984619141'/%3E%3C/g%3E%3Cg fill='%23667895'%3E%3Ccircle cx='6' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='6' cy='15' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='10' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='10' cy='15' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='14' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='14' cy='15' r='1' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyle.tbcStyleContainer > .textBoxControl.pickDate .tbcPicker.date:hover > .glyph,
.consumerStyle.tbcStyleContainer .dateContextButton:hover > .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23FFFFFF' stroke-width='2' transform='translate(1 1)'%3E%3Cpath d='M1.2,17 L16.8,17 C16.9047056,17 17,16.9022622 17,16.7692308 L17,3.23076923 C17,3.09773781 16.9047056,3 16.8,3 L1.2,3 C1.09529436,3 1,3.09773781 1,3.23076923 L1,16.7692308 C1,16.9022622 1.09529436,17 1.2,17 Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M1 7L17 7M5 2.36010674L5 .984619141M13 2.36010674L13 .984619141'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='6' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='6' cy='15' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='10' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='10' cy='15' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='14' cy='11' r='1' fill-rule='nonzero'/%3E%3Ccircle cx='14' cy='15' r='1' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyle.tbcStyleContainer .tbcPicker.picklist:hover .glyph,
.consumerStyle.tbcStyleContainer .picklistContextButton:hover .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' id='chevron-down'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath id='ala' d='M10 11.828l3.536-3.535a1 1 0 0 1 1.414 1.414l-4.243 4.243a1 1 0 0 1-1.414 0L5.05 9.707a1 1 0 0 1 1.414-1.414L10 11.828z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyle.tbcStyleContainer .tbcPicker.time > .glyph,
.consumerStyle.tbcStyleContainer .timeContextButton > .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' id='clock'%3E%3Cg fill='%23667895' fill-rule='evenodd'%3E%3Cpath id='aoa' d='M10 1c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9m0 16.2c-3.97 0-7.2-3.23-7.2-7.2S6.03 2.8 10 2.8s7.2 3.23 7.2 7.2-3.23 7.2-7.2 7.2m.9-7.573V5.5a.9.9 0 1 0-1.8 0V10c0 .24.095.468.264.636l2.7 2.7a.898.898 0 0 0 1.272 0 .899.899 0 0 0 0-1.272L10.9 9.627z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyle.tbcStyleContainer .tbcPicker.time:hover > .glyph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' id='clock'%3E%3Cg fill='%23FFFFFF' fill-rule='evenodd'%3E%3Cpath id='aoa' d='M10 1c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9m0 16.2c-3.97 0-7.2-3.23-7.2-7.2S6.03 2.8 10 2.8s7.2 3.23 7.2 7.2-3.23 7.2-7.2 7.2m.9-7.573V5.5a.9.9 0 1 0-1.8 0V10c0 .24.095.468.264.636l2.7 2.7a.898.898 0 0 0 1.272 0 .899.899 0 0 0 0-1.272L10.9 9.627z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.consumerStyle.tbcStyleContainer .picklistContextButton > .glyph:before,
.consumerStyle.tbcStyleContainer .tbcPicker.time > .glyph:before,
.consumerStyle.tbcStyleContainer > .textBoxControl.pickDate .tbcPicker.date > .glyph:before,
.consumerStyle.tbcStyleContainer .picklistContextButton > .glyph:before,
.consumerStyle.tbcStyleContainer .timeContextButton> .glyph:before,
.consumerStyle.tbcStyleContainer .tbcPicker.address .glyph:before {
    display:none;
}

.consumerStyle.tbcStyleContainer .tbcPicker.expression {
    font-weight:bold;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.notActive.validationError .tbcEditorLabel {
    color:inherit;
}

.consumerStyle.tbcStyleContainer > .textBoxControl.editable.notActive.validationError .tbcEditorField {
    border-color: #f74f63;
}

/* Multiselect mode */
.textBoxControl .multiSelectContainer{
    display: none;
}

.textBoxControl.multiselect .multiSelectContainer{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 5px;
}

.textBoxControl.multiselect .multiSelectContainer .multiSelectItem{
    display: flex;
    gap: 5px;
    border-radius: 5px;
    padding-right: 5px;
    background-color: var(--ciaColourBackgroundSelection);
    color: var(--ciaColourTextSelection);
}

.textBoxControl.multiselect .multiSelectContainer .multiSelectItem > .displayText{
    font-weight: bold;
    padding: 5px;
    text-wrap: nowrap;
}

.textBoxControl.multiselect .multiSelectContainer .multiSelectItem > .removeMultiSelectItem{
    padding-top: 5px;
}

.textBoxControl.readonly.multiselect .multiSelectContainer .multiSelectItem > .removeMultiSelectItem{
    display: none;
}

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

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

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

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

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

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

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

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

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

.tbcInputContainer, .tbcInputInnerContainer {
    position: relative;
}

.tbcInputContainer {
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tbcPicker > .icon16 {
    display: block;
}

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

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

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

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

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

.suggestionPaneWrapper.shown {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.suggestionItem:focus {
    outline: none;
}

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

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

.suggestionPanePageItemNext > .icon16 {
    display: block;
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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



/* Standard Style */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



/* Stacked Style */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



/* Engaging Styles */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***********************************************/
/*  Thumbnail item & components layouts        */
/***********************************************/

/*
    Use flex for thumbnail-like layouts.
    This will ensure that even if thumbnails have different heights, the browser will still try to allign them
*/

.thumbnailViewControl.thumbnailViewDefault .thumbnailItemsContainer,
.thumbnailViewControl.thumbnailViewNormal .thumbnailItemsContainer,
.thumbnailViewControl.thumbnailViewContact .thumbnailItemsContainer{
    display: flex;
    flex-wrap: wrap;
}

.thumbnailItem.imgLayoutRound .thumbnailImg > img,
.thumbnailItem.imgLayoutRound .thumbnailImg .missingImagePlaceholder{
    border-radius: 50%;
}

.thumbnailItem.itemLayoutTile .itemWrapper{
    border-radius: 15px; /* round corners */
}

/***********************************************/
.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/image.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miAppointment {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/appointment.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miAsset {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/asset.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miAward {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/award.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miBlankDocument {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/blankdocument.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miBusiness {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/business.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miClock {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/clock.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miCogs {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/cogs.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miContactDetails {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/contactdetails.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miDocument {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/document.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miEmail {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/email.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miEngagement {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/engagement.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miExcel {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/excel.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miFax {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/fax.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miFinancialDocument {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/financialdocument.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miFolder {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/folder.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miImage {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/image.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miImageMissing {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/imagemissing.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miImportFile {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/importfile.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miInvoice {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/invoice.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miLetter {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/letter.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miList {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/list.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miLocation {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/location.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miMail {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/mail.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miMan {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/man.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miManAndWoman {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/manandwoman.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miMap {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/map.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miMen {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/men.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miNote {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/note.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPDF {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/pdf.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPeople {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/people.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPerson {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/person.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPhone {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/phone.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPreview {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/preview.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miProduct {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/product.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miPurchaseOrder {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/purchaseorder.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miReceipt {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/receipt.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miReport {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/report.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miRequest {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/request.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miSmartFolder {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/smartfolder.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miSpatial {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/spatial.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miSpreadsheet {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/spreadsheet.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miSupplier {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/supplier.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miSuppliers {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/suppliers.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miTask {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/task.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miText {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/text.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miTimesheet {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/timesheet.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miTrophy {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/trophy.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miUnknown {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/unknowndocument.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miWoman {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/woman.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miWomen {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/women.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miWordDoc {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/worddoc.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miWorkflow {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/workflow.png?v=12.0.253.0');
}

.thumbnailImg .missingImagePlaceholder.miWorksheet {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/128/entities/worksheet.png?v=12.0.253.0');
}

/*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.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 .thumbnailItem.hasImage.smallImage > .itemWrapper > .thumbnailSection.mainSection,
.horizontal .thumbnailItem.hasImage.smallImage > .itemWrapper > .tagActionsSection {
    margin-left: 42px;
}

.horizontal .thumbnailItem.hasImage.mediumImage .itemWrapper > .thumbnailSection.mainSection,
.horizontal .thumbnailItem.hasImage.mediumImage .itemWrapper > .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 input[type="checkbox"] {
    height: 16px;
    width:16px;
    vertical-align: top;
    min-height: fit-content;
}


.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;
    text-overflow: ellipsis;
    overflow: hidden;
    border: none;
}

.thumbnailItem .dataLblFont150Percent .iconLabel,
.thumbnailItem .dataLblFont150Percent .editorLabel,
.thumbnailItem .dataFldFont150Percent .editorField,
.thumbnailItem .dataFldFont150Percent .editorField > span,
.thumbnailItem .dataLblFont200Percent .iconLabel,
.thumbnailItem .dataLblFont200Percent .editorLabel,
.thumbnailItem .dataFldFont200Percent .editorField,
.thumbnailItem .dataFldFont200Percent .editorField > span{
    line-height: initial!important;
}

.thumbnailItem .editorField,
.hoverViewContainer .thumbnailSection .editorField{
    white-space: nowrap;
}

.thumbnailItem .editorLabel label, .thumbnailItem .editorField .readonlyTextBoxSpan,
.hoverViewContainer label, .hoverViewContainer .editorField .readonlyTextBoxSpan {
    white-space: pre;
}

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


.thumbnailViewControl .navigatorContainer .detailsNavigator,
.thumbnailViewControl .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 .thumbnailSection.dynamicFieldsContainer a{

}

.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;
    margin-top: 5px;
}

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

/*--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;
}
.summaryContainer .quantityContainer > label{
    padding-right: 10px;
}


/*--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: pre;
    display: block;
}

.dataFieldContainer.headingField.doubleHeight .editorField span {
    white-space: pre;
}

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

.thumbnailItem .richTextControlContainer{
    pointer-events: none; /* RichText control hijacks the click events otherwise */
}


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

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

.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('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/minus.png?v=12.0.253.0');
    display: block;
}

.thumbnailViewControl .thumbnailItem .addRemoveItem.addItem .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/16/actions/plus.png?v=12.0.253.0');
    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 .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;
}

.thumbnailViewControl .thumbnailItem.itemClickable:hover > .itemWrapper {
    background-color: var(--ciaColourBackgroundHighlightHover);
}

.showsDetailsPane .itemWrapper,
.thumbnailItem.itemClickable > .itemWrapper {
    cursor: pointer;
}

.compact .thumbnailItem {
    float: left;
    width: 238px;
    height: auto;
    margin: 0;
    box-sizing: border-box;
}

.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,
.mq-sm .thumbnailItem {
    float: none;
    width: 75%;
}

.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 .thumbnailItem.hasImage > .itemWrapper > .thumbnailSection.mainSection,
.horizontal .thumbnailItem.hasImage > .itemWrapper > .tagActionsSection {
    margin-left: 120px;
}

.compact .thumbnailItem.showsDetailsPane .thumbnailSection.mainSection {
    margin-right: 20px;
    padding-right: 0;
}

/*--for Thumbnail view--*/

.compact .thumbnailItem.hasImage > .itemWrapper > .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 > .itemWrapper > .navigatorContainer {
    border-right-width: 3px;
    border-right-style: solid;
}


.thumbnailItem > .itemWrapper > .navigatorContainer > .bg {
    display: none;
    position: absolute;
    top: 50%;
    bottom: 0;
}

.horizontal .thumbnailItem > .itemWrapper > .navigatorContainer > .bg {
    display: block;
    right: -8px;
/*    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
*/
}

.horizontal .thumbnailItem.selected > .itemWrapper > .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;
 }

.thumbnailItem.clickPreview .imageSection .thumbnailImg:hover {
    cursor: pointer;
}

.thumbnailItem.clickPreview .imageSection .thumbnailImg:hover:before{
    content: '\E302';
    position: absolute;
    font-family: 'iconGlyph';
    font-size: 2rem;
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 40%);
    color: rgb(215, 215, 215);
}

.tile {
    z-index: 1;
}


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

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

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


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



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

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


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

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

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

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

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

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

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

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

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

.tile > .titleWrapper {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.disabled * {
    cursor: inherit;
}



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

.treeViewContainer{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow: auto;
}

.treeNode{
    margin-top: 0px;
    position: relative;
    margin-left: 17px;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
}

.treeNode > .childrenNodesContainer{
    display: none;
    padding-left: 25px;
}

.treeNode.expanded > .childrenNodesContainer {
    display: block;
}

/* Expand node button style */

.treeNode > .expandNode{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 0;
    opacity: 0.4;
    cursor: pointer;
}

.phone .treeNode > .expandNode {
    opacity: 1;
}

.expandNode > span.icon16 {
    position: absolute;
    margin-top: 5px;
    padding: 4px 0;
    margin-left: -8px;
    color: rgba(0,0,0,0.5);
    background: white;
    transition: 0.3s ease;
}

.treeNode > .expandNode > .icon16:before{
    content: "\E061";    
}

.treeNode.expanded > .expandNode > .icon16 {
    transform: rotate(90deg);    
}

.treeNode.expanded > .expandNode {
    left: 0;
    border-left: dotted 1px rgba(0, 0, 0, 0.15);
}

.treeNode:hover > .expandNode {
    opacity: 1;
}

.treeNode.isLeaf > .expandNode{
    display: none;
}
/* End of expand button */

.treeViewControl .treeNode > .itemWrapper{
    padding-left: 24px;
    position: relative;
}

.treeViewControl.bulkActionMode .treeNode > .itemWrapper{
    padding-left: 48px;
    border: none;
}

.treeNode.hasMoreData > .childrenNodesContainer{
    padding-bottom: 35px;
}

.treeNodesContainer > .readMoreData,
.treeNode > .childrenNodesContainer > .readMoreData{
    display: none;
    position: relative;
    text-align: center;
    padding: 5px 0 8px;
    cursor: pointer;
}

.treeNodesContainer.hasMoreData > .readMoreData,
.treeNode.hasMoreData > .childrenNodesContainer > .readMoreData{
    display: block;
}

.treeViewControl .addSelCont {
    position: absolute;
    top: 10px;
    left: 24px;
    z-index: 1;
}

.treeViewControl .navigatorContainer .detailsNavigator, .treeViewControl .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;
}

.treeViewControl .thumbnailItem .moreTags {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0.9em;
}

.treeViewControl .moreTags.noTags {
    display: none;  
}