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

    --ciaBorderRadiusButton: 3px;

    /*
     * PRIMARY ACTION BUTTON
     */
    --ciaColourContentButtonPrimary: var(--ciaColourWhite);
    --ciaColourBackgroundButtonPrimary: var(--ciaColourPrimary);
    --ciaColourBorderButtonPrimary: transparent;

    --ciaColourContentButtonPrimaryOnHover: var(--ciaColourWhite);
    --ciaColourBackgroundButtonPrimaryOnHover: var(--ciaColourPrimary);
    --ciaColourBorderButtonPrimaryOnHover: var(--ciaColourPrimaryHover);

    /*
     * SECONDARY ACTION BUTTON
     */
    --ciaColourContentButtonSecondary: var(--ciaColourPrimary);
    --ciaColourBackgroundButtonSecondary: var(--ciaColourWhite);
    --ciaColourBorderButtonSecondary: var(--ciaColourPrimary);

    --ciaColourContentButtonSecondaryOnHover: var(--ciaColourPrimaryHover);
    --ciaColourBackgroundButtonSecondaryOnHover: var(--ciaColourWhite);
    --ciaColourBorderButtonSecondaryOnHover: var(--ciaColourPrimary);

    /*
     * CANCEL ACTION BUTTON
     */
    --ciaColourContentButtonCancel: var(--ciaColourContentDefault);
    --ciaColourBackgroundButtonCancel: var(--ciaColourWhite);
    --ciaColourBorderButtonCancel: var(--ciaColourPrimary);

    --ciaColourContentButtonCancelOnHover: var(--ciaColourContentDefault);
    --ciaColourBackgroundButtonCancelOnHover: var(--ciaColourWhite);
    --ciaColourBorderButtonCancelOnHover: var(--ciaColourPrimary);

    /*
     * BUTTON ON HOVER
     */
    --ciaColourContentButtonOnHover: 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
     */
    --ciaColourContentButton: var(--ciaColourBlack);
    --ciaColourBackgroundButton: var(--ciaColourWhite);
    --ciaColourBorderButton: var(--ciaColourThemeMain2);
    --ciaBorderRadiusButton: 10px;

    /*
     * PRIMARY BUTTON
     */
    --ciaColourContentButtonPrimary: var(--ciaColourPrimary);
    --ciaColourBackgroundButtonPrimary: var(--ciaColourWhite);
    --ciaColourBorderButtonPrimary: var(--ciaColourPrimary);

    /*
     * SECONDARY BUTTON
     */
    --ciaColourContentButtonSecondary: var(--ciaColourPrimary);
    --ciaColourBackgroundButtonSecondary: var(--ciaColourWhite);
    --ciaColourBorderButtonSecondary: var(--ciaColourPrimary);
    /*
     * BORDER STYLE TOKENS
     */
    --ciaBoxStyleButton: none;
}

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

    /*
     * PRIMARY BUTTON
     */
    --ciaColourContentButtonPrimary: var(--ciaColourWhite);
    --ciaColourBackgroundButtonPrimary: var(--ciaColourBlack);
    --ciaColourBorderButtonPrimary: var(--ciaColourWhite);

    /*
     * SECONDARY BUTTON
     */
    --ciaColourContentButtonSecondary: var(--ciaColourWhite);
    --ciaColourBackgroundButtonSecondary: var(--ciaColourBlack);
    --ciaColourBorderButtonSecondary: var(--ciaColourWhite);

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

:root{
    /*---------------------------------------------------------------------
     * FORM TOKENS
    ----------------------------------------------------------------------*/
    --ciaColourBackgroundPage: var(--ciaColourWhite);
    --ciaColourBackgroundFormHeader: var(--ciaColourMainLightest);
}

.phone{
    --ciaColourBackgroundFormHeader: var(--ciaColourWhite);
}


:root{
    --ciaColourContentFunctionHeader: var(--ciaColourThemeGlobalHeaderText);
    --ciaColourBackgroundFunctionHeader: var(--ciaColourThemeGlobalHeaderBg);
}

:root{
    /******************************************
            Header tokens
    ******************************************/
    --ciaColourBackgroundPopupHeader: var(--ciaColourMainLightest);

    /******************************************
            Border tokens
    ******************************************/
    --ciaColourBorderPopup: rgba(0,0,0,0.75);

    /******************************************
            Content tokens
    ******************************************/
    --ciaColourBackgroundPopupContents: inherit;

    /******************************************
            Footer tokens
    ******************************************/
    --ciaColourBackgroundPopupFooter: var(--ciaColourMainLightest);
}

.aiLayout {
    --ciaColourBorderPopup: #C4CED7;
}

:root{
    /*---------------------------------------------------------------------
     * TEXTBOX TOKENS
    ----------------------------------------------------------------------*/
    --ciaColourContentTextBoxLabel : var(--ciaColourBlack);
    --ciaColourBorderTextBox : #afafaf;
}

.textBoxControl.active.editable{
    --ciaColourBorderTextBox : var(--ciaColourBorderPrimary);
    &.hasAIGeneratedValue{
        --ciaColourContentTextBoxLabel : var(--ciaColourAIDefault);
        --ciaColourBorderTextBox : var(--ciaColourAIDefault);
        --ciaColourBackgroundAIAnnotation: var(--ciaColourAIDefault);
        --ciaColourContentAIAnnotation: var(--ciaColourWhite);
    }
}

.stackedStyle{
    --ciaColourBorderTextBox : #afafaf;
}

.standardStyle{
    --ciaColourBorderTextBox : #c4c4c4;
}

.engagingStyle{
    --ciaColourContentTextBoxLabel : #656565;
    .textBoxControl.active{
        --ciaColourBorderTextBox : var(--ciaColourPrimary);
        --ciaColourContentTextBoxLabel : var(--ciaColourPrimary);
    }
}

.consumerStyle{
    --ciaColourBorderTextBox : #cbcbcb;
    .textBoxControl.active,.tbcEditorField:hover
    {
        --ciaColourBorderTextBox : #606060;
    }
    .textBoxControl.hasAIGeneratedValue{
        .tbcEditorField:hover{
            --ciaColourBorderTextBox : var(--ciaColourAIDefault);
        }
    }

}


:root {
    /* Animation Variables */
    --ciaAnimationDuration: 300ms;
    --ciaAnimationTimingFunction: ease-in-out;
    --ciaAnimationIterationCount: 1;
    --ciaAnimationFillMode: forwards;
    --ciaAnimationDirection: normal;

    /* Slide Variables */
    --ciaAnimationSlideDistanceX: 0px;
    --ciaAnimationSlideDistanceY: 0px;
}


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

    --ciaColourPrimary: var(--ciaColourThemePrimaryAction);

    --ciaColourPrimaryHover: var(--ciaColourThemePrimaryActionBorderHover);


    /*-- AI COLOUR TOKENS -----------------------------------*/
    --ciaColourBackgroundAIMarker: #ECE3FF;
    --ciaColourBackgroundAIAnnotation: #EBE7FB;
    --ciaColourContentAIAnnotation: var(--ciaColourAIDefault);

    /*-- AI COLOUR TOKENS - Semantic  -----------------------*/
    --ciaColourAIFaint:      var(--ciaColourAIPurple100);
    --ciaColourAIBackground: var(--ciaColourAIPurple200);
    --ciaColourAISubtle:     var(--ciaColourAIPurple300);
    --ciaColourAIMuted:      var(--ciaColourAIPurple400);
    --ciaColourAIDefault:    var(--ciaColourAIPurple600);
    --ciaColourAIAccent:     var(--ciaColourAIPurple700);
    --ciaColourAIStrong:     var(--ciaColourAIPurple800);
    --ciaColourAIOpaque:     var(--ciaColourAIPurple900);

    /*-- COLOUR TOKENS ----------------------------------------------------*/
    --ciaColourContentDefault: #000;

    --ciaColourContentBody: var(--ciaColourContentDefault);

    --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);
    --ciaColourHandlerResize: var(--ciaColourPrimary);

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

    /*-- Selection ---------------------------------------------------------------------*/
    --ciaColourBackgroundSelection: var(--ciaColourSelection);
    --ciaColourContentSelection: var(--ciaColourContentPrimary);

    /*-- Tabs --------------------------------------------------------------------*/
    --ciaColourBackgroundTabsHandles : var(--ciaColourMainLightest);
    --ciaColourBackgroundTabHandleSelected : var(--ciaColourWhite);

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

    --ciaColourContentHeaderDropdown: var(--ciaColourGray);
    --ciaColourContentHeaderButton: var(--ciaColourThemeGlobalHeaderText);

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


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


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

    --ciaColourContentSuccess: #394a1e;
    --ciaColourBackgroundSuccess: #e2ead1;
    --ciaColourContentFail: #a30022;
    --ciaColourBackgroundFail: #ffb3c3;
}

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

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

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

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

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

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

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

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

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


/***** icon-related design tokens and components ********/
:root{
    --ciaIconSortAsc: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-asc.svg?v=12.0.113.0');
    --ciaIconSortDesc: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-desc.svg?v=12.0.113.0');
    --ciaIconSortUnselected: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-unselected.svg?v=12.0.113.0');
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.113.0');

    --ciaIconDropdownMore: "\E226";
    --ciaIconBorder-radius: 3px;
}


/**** AI Icons ****/
.inverseIcon{
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon-inverse.svg?v=12.0.113.0');
}

.dropdownPanelListItem .aiChip {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-label.svg?v=12.0.113.0');
}

.aiChip {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.113.0');
}

.aiDetailsPanel .aiIcon {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.113.0');
}


.aiValue .aiIcon{
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-value.svg?v=12.0.113.0');
}

.aiStatus .aiIcon {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-contents.svg?v=12.0.113.0');
}


/**** Layout definitions ****/
.defaultLayout{
    --ciaIconBorder-radius: 3px;
}

.modernLayout{
    --ciaIconBorder-radius: 50%;
}

/*** Dropdown exceptions ***/

.downFill,
.thumbnailSection .tagSection{
    --ciaIconDropdownMore: "\E045";
}

.viewSelectorControl{
    --ciaIconDropdownMore: "\E532";
}

.buttonGroup .downFill {
    --ciaIconDropdownMore: "\E226";
}



.selectionSummary.shoppingCartMode .summaryCounter{
    --ciaIconDropdownMore: "\E016";
}

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

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

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

    /* Attachment popup inner container sizes */
    --ciaWidthFileUploadPopupInnerContainer: 93vw;
    --ciaWidthMaxFileUploadPopupInnerContainer: 1000px;
    
    /* Summary panels */
    --ciaHeightSummaryPanelSmall: 240px;
    --ciaHeightSummaryPanelMedium: 480px;
    --ciaHeightSummaryPanelLarge: 720px;
}

: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 : #ffffff;
    --ciaColourBlack : #000000;

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

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

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

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

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

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

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

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

    --ciaColourBrown : #8a6d3b;

    /*-- AI COLOUR TOKENS ----------------------------------------------------*/
    --ciaColourAIPurple100: #f8faff;
    --ciaColourAIPurple200: #e8e7fb;
    --ciaColourAIPurple300: #c9cef7;
    --ciaColourAIPurple400: #a995f6;
    --ciaColourAIPurple500: #8868f6;
    --ciaColourAIPurple600: #6f31f1;
    --ciaColourAIPurple700: #5419c2;
    --ciaColourAIPurple800: #390f88;
    --ciaColourAIPurple900: #25075c;

    /*  Transparent Scales */

    /* combine H, S and L */
    --neutral: 204,14%,14%;
    --inverse: 210,27%,96%;
    --primary: var(--ciaColourPrimary);

    /* opacity tokens */
    --ciaOpacityFaint: .08;
    --ciaOpacitySubtle: .16;
    --ciaOpacityDisabled: .32;
    --ciaOpacityMuted: .40;
    --ciaOpacityMedium: .56;
    --ciaOpacityStrong: .64;
    --ciaOpacityOpaque: .80;

    /* transparent scales */
    /* neutral */
    --ciaOpacityNeutralFaint:    hsla(var(--neutral), var(--ciaOpacityFaint));
    --ciaOpacityNeutralSubtle:   hsla(var(--neutral), var(--ciaOpacitySubtle));
    --ciaOpacityNeutralDisabled: hsla(var(--neutral), var(--ciaOpacityDisabled));
    --ciaOpacityNeutralMuted:    hsla(var(--neutral), var(--ciaOpacityMuted));
    --ciaOpacityNeutralMedium:   hsla(var(--neutral), var(--ciaOpacityMedium));
    --ciaOpacityNeutralStrong:   hsla(var(--neutral), var(--ciaOpacityStrong));
    --ciaOpacityNeutralOpaque:   hsla(var(--neutral), var(--ciaOpacityOpaque));

    /* inverse */
    --ciaOpacityInverseFaint:    hsla(var(--inverse), var(--ciaOpacityFaint));
    --ciaOpacityInverseSubtle:   hsla(var(--inverse), var(--ciaOpacitySubtle));
    --ciaOpacityInverseDisabled: hsla(var(--inverse), var(--ciaOpacityDisabled));
    --ciaOpacityInverseMuted:    hsla(var(--inverse), var(--ciaOpacityMuted));
    --ciaOpacityInverseMedium:   hsla(var(--inverse), var(--ciaOpacityMedium));
    --ciaOpacityInverseStrong:   hsla(var(--inverse), var(--ciaOpacityStrong));
    --ciaOpacityInverseOpaque:   hsla(var(--inverse), var(--ciaOpacityOpaque));

    /* primary */
    --ciaOpacityPrimaryFaint:    rgba(var(--primary), var(--ciaOpacityFaint));
    --ciaOpacityPrimarySubtle:   rgba(var(--primary), var(--ciaOpacitySubtle));
    --ciaOpacityPrimaryDisabled: rgba(var(--primary), var(--ciaOpacityDisabled));
    --ciaOpacityPrimaryMuted:    rgba(var(--primary), var(--ciaOpacityMuted));
    --ciaOpacityPrimaryMedium:   rgba(var(--primary), var(--ciaOpacityMedium));
    --ciaOpacityPrimaryStrong:   rgba(var(--primary), var(--ciaOpacityStrong));
    --ciaOpacityPrimaryOpaque:   rgba(var(--primary), var(--ciaOpacityOpaque));
}


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

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

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

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

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



@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.113.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.113.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.113.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.113.0') format('woff');
}



html
{
    height:100%;
}

body
{
    margin:0 auto;
    padding:0;
    font-size:0.75em;
    color:var(--ciaColourContentBody);
    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.113.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;
}

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

.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(--ciaColourContentButton);
    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(--ciaColourContentButtonPrimary);
    background-color: var(--ciaColourBackgroundButtonPrimary);
    border: solid 1px var(--ciaColourBorderButtonPrimary);
}

button.secondary {
    color: var(--ciaColourContentButtonSecondary);
    background-color: var(--ciaColourBackgroundButtonSecondary);
    border: 1px solid var(--ciaColourBorderButtonSecondary);
}

button.hasInnerControls{
    display: flex;
    gap: 5px;
}