:root{
    /* The 8 colours generated from the theme main colour are not symetric. I.e --ciaColourThemeMain1 is darker than the main color*/
    --ciaColourMainDarkest: var(--ciaColourThemeDark1);
    --ciaColourMainDarker: var(--ciaColourThemeDark2);
    --ciaColourMainDark-50: var(--ciaColourThemeDark3);
    --ciaColourMainDark: var(--ciaColourThemeMain1);
    --ciaColourMain: var(--ciaColourThemeMainColor);
    --ciaColourMainLight: var(--ciaColourThemeMain2);
    --ciaColourMainLight-50: var(--ciaColourThemeMain3);
    --ciaColourMainLighter: var(--ciaColourThemeMain4);
    --ciaColourMainLightest: var(--ciaColourThemeMain5);

    --ciaColourWhite : #fff;
    --ciaColourBlack : #000000;

    --ciaColourGreenLight : #e2ead1;
    --ciaColourDarkGreenLight : #96C09E;
    --ciaColourGreen : #74bd00;
    --ciaColourGreenDark : #00661A;

    --ciaColourYellowLight : #ffe398;
    --ciaColourYellow : #ffc853;

    --ciaColourBlueLight : #c6dae8;
    --ciaColourDarkBlueLight : #C3C3DA;
    --ciaColourBlue : #325ea1;
    --ciaColourBlueDark : #000060;

    --ciaColourGrayLight : #c7c7c7;
    --ciaColourGray : #4b4b4b;

    --ciaColourPurpleLight : #d7bdd7;
    --ciaColourPurple : #660066;

    --ciaColourTealLight : #C9D9DD;
    --ciaColourTeal : #1E5E6D;

    --ciaColourOrangeLight : #fce2ce;
    --ciaColourOrange : #F2661F;

    --ciaColourRedLight: #eccdca;
    --ciaColourRed : #E53327;

    --ciaColourBrown : #8a6d3b;


}


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

    --ciaColourPrimary: var(--ciaColourThemePrimaryAction);

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

    --ciaColourTextBody: var(--ciaColourTextPrimary);

    --ciaColourSelection: var(--ciaColourThemeMain4);

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

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

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


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

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

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


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


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

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

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

:root{
    /*---------------------------------------------------------------------
     * BUTTON TOKENS
    ----------------------------------------------------------------------*/
    /*
     * STANDARD BUTTON
     */
    --ciaColourTextButton: var(--ciaColourBlack);
    --ciaColourBackgroundButton: var(--ciaColourMainLighter);
    --ciaColourBorderButton: var(--ciaColourThemeMain2);

    --ciaBorderRadiusButton: 3px;

    /*
     * PRIMARY BUTTON
     */
    --ciaColourTextPrimaryButton: var(--ciaColourWhite);
    --ciaColourBackgroundPrimaryButton: var(--ciaColourPrimary);
    --ciaColourBorderPrimaryButton: transparent;

    /*
     * SECONDARY BUTTON
     */
    --ciaColourTextSecondaryButton: var(--ciaColourPrimary);
    --ciaColourBackgroundSecondaryButton: var(--ciaColourWhite);
    --ciaColourBorderSecondaryButton: var(--ciaColourPrimary);

    /*
     * BUTTON ON HOVER (controls which looks like a button only on mouse hover)
     */
    --ciaColourTextButtonOnHover: var(--ciaColourPrimary);
    --ciaColourBackgroundButtonOnHover: unset;
    --ciaColourBorderButtonOnHover: transparent;

    /*---------------------------------------------------------------------
     * BORDER STYLE TOKENS
    ----------------------------------------------------------------------*/
    --ciaBoxStyleButton: none;
}

/*--------------------------------------------------------------------------
 * STYLE/LAYOUT COLOURS
 * Define only tokens different from the default style
---------------------------------------------------------------------------*/
.modernStyle {
    /*
     * STANDARD BUTTON
     */
    --ciaColourTextButton: var(--ciaColourBlack);
    --ciaColourBackgroundButton: var(--ciaColourWhite);
    --ciaColourBorderButton: var(--ciaColourThemeMain2);
    --ciaBorderRadiusButton: 10px;

    /*
     * PRIMARY BUTTON
     */
    --ciaColourTextPrimaryButton: var(--ciaColourPrimary);
    --ciaColourBackgroundPrimaryButton: var(--ciaColourWhite);
    --ciaColourBorderPrimaryButton: var(--ciaColourPrimary);

    /*
     * SECONDARY BUTTON
     */
    --ciaColourTextSecondaryButton: var(--ciaColourPrimary);
    --ciaColourBackgroundSecondaryButton: var(--ciaColourWhite);
    --ciaColourBorderSecondaryButton: var(--ciaColourPrimary);
    /*
     * BORDER STYLE TOKENS
     */
    --ciaBoxStyleButton: none;
}

/*
Placeholder for the dark layout
*/
.darkSide {
    /*
     * STANDARD BUTTON
     */
    --ciaColourTextButton: var(--ciaColourWhite);
    --ciaColourBackgroundButton: var(--ciaColourBlack);
    --ciaColourBorderButton: var(--ciaColourWhite);

    /*
     * PRIMARY BUTTON
     */
    --ciaColourTextPrimaryButton: var(--ciaColourWhite);
    --ciaColourBackgroundPrimaryButton: var(--ciaColourBlack);
    --ciaColourBorderPrimaryButton: var(--ciaColourWhite);

    /*
     * SECONDARY BUTTON
     */
    --ciaColourTextSecondaryButton: var(--ciaColourWhite);
    --ciaColourBackgroundSecondaryButton: var(--ciaColourBlack);
    --ciaColourBorderSecondaryButton: var(--ciaColourWhite);

    /*
     * BUTTON ON HOVER (controls which looks like a button only on mouse hover)
     */
    --ciaColourTextButtonOnHover: var(--ciaColourWhite);
    --ciaColourBackgroundButtonOnHover:var(--ciaColourBlack);
    --ciaColourBorderButtonOnHover: transparent;
}

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

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

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

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



html
{
    height:100%;
}

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

body.fastPageLoad.maxScreen
{
    background: none;
}

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

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

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

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

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

.flipBlocker {
    overflow: hidden;
}

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

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

.fixedWidth
{

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

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

.clearFixRWFloat:after {
    clear: right;
}

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

}

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

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

}

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


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

.contentLayoutContainer {
    min-height:100%;
}

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

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

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

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


/*-- Color Constants--*/

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


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


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

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

/*--Label Colour--*/

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

.editorLabel.summaryLineValue {
    color: #656565;
}

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

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

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

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



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



/* Footer */

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

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

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

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

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

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

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

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

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

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

/*--Various column layouts--*/

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

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

.hidden {   display: none; }

.height100pc { height: 100%; }




/*--Generic Padding classes--*/

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

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

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

.padding0I { padding: 0 !important; }

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

/*--Arrow indicators--*/

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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


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


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

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

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

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

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


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

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

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

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

/* Drragging elements */

.dragging
{
    z-index: 10000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

@media \0screen {



}



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


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

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

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

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

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

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

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


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


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

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

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


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


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

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

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

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

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

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

/* ripple out */


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

/*--Consumer styles--*/

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

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

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

.consumerStyleWrapper #C2FormContent {
    overflow: auto;
}

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

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

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

.consumerStyleWrapper .tabsContainer_LinkedTab {
    height: auto;
}

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

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

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

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

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

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

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

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

button, a.buttonStyle{
    color: var(--ciaColourTextButton);
    background-color: var(--ciaColourBackgroundButton);
    border: solid 1px var(--ciaColourBorderButton);
    box-shadow: var(--ciaBoxStyleButton);
    border-radius:var(--ciaBorderRadiusButton);
    line-height: 16px;
    padding:6px;
    cursor: pointer;
}

button.primary, a.buttonStyle.primary {
    color: var(--ciaColourTextPrimaryButton);
    background-color: var(--ciaColourBackgroundPrimaryButton);
    border: solid 1px var(--ciaColourBorderPrimaryButton);
}

button.secondary {
    color: var(--ciaColourTextSecondaryButton);
    background-color: var(--ciaColourBackgroundSecondaryButton);
    border: 1px solid var(--ciaColourBorderSecondaryButton);
}