: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(--ciaColourPrimary);
    --ciaColourBackgroundButtonCancel: var(--ciaColourWhite);
    --ciaColourBorderButtonCancel: var(--ciaColourPrimary);

    --ciaColourContentButtonCancelOnHover: var(--ciaColourPrimaryHover);
    --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{
    /*-- SectionNotReady tokens ---------------------------------------------------*/
    --ciaColourContentSectionNotReady: #00A7FF; /*TODO: point to a primitive or design token */
}

/*-- AI-related tokens ---------------------------------------------------*/
.longRunningTaskTypeAIProcess{
    --ciaColourContentSectionNotReady: var(--ciaColourAIDefault);
}

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

}


/*---------------------------------------------------------------------
 * TYPOGRAPHY
 * Categories: Display, Heading, Body, Label, Meta
 * Variants: Small, Large, Strong
 ----------------------------------------------------------------------*/
@layer fontBase, fontCategories, fontVariants;

@layer fontBase{

    /*Note:
    body doesn't need a category class as the CSS definitions are applied on the <body> element and are inherited by all child elements.
    */
    :root {
        --ciaFontSizeXSmall: var(--ciaFontSizeBodyXSmall);
        --ciaFontSizeSmall: var(--ciaFontSizeBodySmall);
        --ciaFontSizeLarge: var(--ciaFontSizeBodyLarge);
        --ciaFontWeightStrong: var(--ciaFontWeightBodyStrong);
    }

    body{
        font-family: var(--ciaFontFamilyBody);
        font-size: var(--ciaFontSizeBodyDefault);
        font-weight: var(--ciaFontWeightBodyDefault);
        * {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
        }
    }
}


/* Default intermediate token values for each category */
@layer fontCategories{
    /* category classes */
    .fontBody{
        font-family: var(--ciaFontFamilyBody);
        font-size: var(--ciaFontSizeBodyDefault);
        font-weight: var(--ciaFontWeightBodyDefault);
    }

    .fontDisplay{
        font-size: var(--ciaFontSizeDisplayDefault);
        font-weight: var(--ciaFontWeightDisplayDefault);

        --ciaFontSizeSmall: var(--ciaFontSizeDisplaySmall);
        --ciaFontSizeLarge: var(--ciaFontSizeDisplayLarge);
        --ciaFontWeightStrong: var(--ciaFontWeightDisplayStrong);
    }

    .fontHeading{
        font-family: var(--ciaFontFamilyHeading);
        font-size: var(--ciaFontSizeHeadingDefault);
        font-weight: var(--ciaFontWeightHeadingDefault);

        --ciaFontSizeXSmall: var(--ciaFontSizeHeadingXSmall);
        --ciaFontSizeSmall: var(--ciaFontSizeHeadingSmall);
        --ciaFontSizeLarge: var(--ciaFontSizeHeadingLarge);
        --ciaFontWeightStrong: var(--ciaFontWeightHeadingStrong);
    }

    .fontLabel{
        font-size: var(--ciaFontSizeLabelDefault);
        font-weight: var(--ciaFontWeightLabelDefault);
        line-height: var(--ciaLineHeightLabel);

        --ciaFontSizeSmall: var(--ciaFontSizeLabelSmall);
        --ciaFontSizeLarge: var(--ciaFontSizeLabelDefault); /* there is no large font size for label */
        --ciaFontWeightStrong: var(--ciaFontWeightLabelStrong);
    }
    .fontMeta{
        font-size: var(--ciaFontSizeMetaDefault);
        font-weight: var(--ciaFontWeightMetaDefault);

        --ciaFontSizeSmall: var(--ciaFontSizeMetaSmall);
        --ciaFontSizeLarge: var(--ciaFontSizeMetaDefault); /* there is no large font size for meta */
        --ciaFontWeightStrong: var(--ciaFontWeightMetaStrong);
    }
}

@layer fontVariants{
    /* Context classes */
    .fontXSmall{
        font-size: var(--ciaFontSizeXSmall);
    }

    .fontSmall{
        font-size: var(--ciaFontSizeSmall);
    }

    .fontLarge{
        font-size: var(--ciaFontSizeLarge);
    }

    .fontStrong{
        font-weight: var(--ciaFontWeightStrong);
    }
}

/*
In legacy mode, just reduce the font label size to 10.8px (0.75 html default * 0.9 for label and grid heading).
*/
.legacyTypography{
    .fontLabel, .slick-header{
        --ciaFontSizeLabelDefault: calc(0.9 * var(--ciaFontSizeLabelSmall)); /* make it 10.8px as it was before*/
        font-size: var(--ciaFontSizeLabelDefault);
        font-weight: var(--ciaFontWeightStrong)
    }
}

: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);
    --ciaColourAIBase:       var(--ciaColourAIPurple500); /* base AI colour - should only be used for branding*/
    --ciaColourAIDefault:    var(--ciaColourAIPurple600);
    --ciaColourAIAccent:     var(--ciaColourAIPurple700);
    --ciaColourAIStrong:     var(--ciaColourAIPurple800);
    --ciaColourAIOpaque:     var(--ciaColourAIPurple900);

    /*-- COLOUR TOKENS ----------------------------------------------------*/
    --ciaColourContentBody: var(--ciaColourBlack);
    --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);
    --ciaColourBorderSubtle: var(--ciaColourNeutralCool200);

    --ciaColourContentSecondary: var(--ciaColourNeutralCool600);
    --ciaColourBackgroundSecondary: var(--ciaColourNeutralCool200);


    /*-- COLOUR STATUS TOKENS --------------------------------------------------------*/
    --ciaColourContentSuccess: var(--ciaColourUtilityGreen600);
    --ciaColourBackgroundSuccess: var(--ciaColourUtilityGreen100);
    --ciaColourBorderSuccess: var(--ciaColourUtilityGreen600);

    --ciaColourContentInfo: var(--ciaColourUtilityBlue600);
    --ciaColourBackgroundInfo: var(--ciaColourUtilityBlue100);
    --ciaColourBorderInfo: var(--ciaColourUtilityBlue600);

    --ciaColourContentWarning: var(--ciaColourUtilityOrange600);
    --ciaColourBackgroundWarning: var(--ciaColourUtilityOrange100);
    --ciaColourBorderWarning: var(--ciaColourUtilityOrange600);

    --ciaColourContentFail: var(--ciaColourUtilityRed600);
    --ciaColourBackgroundFail: var(--ciaColourUtilityRed100);
    --ciaColourBorderFail: var(--ciaColourUtilityRed600);

    /*-- COLOUR TOKENS --------------------------------------------------------*/
    --ciaColourContentSubtle: var(--ciaColourNeutralCool400);
    --ciaColourBackgroundSubtle: var(--ciaColourNeutralCool50);

    --ciaColourContentInverse: var(--ciaColourWhite);

    --ciaColourContentDefault: var(--ciaColourNeutralCool800);
    --ciaColourBackgroundDefault: var(--ciaColourWhite);
    --ciaColourBackgroundDefaultHover: var(--ciaColourNeutralCool100);
}

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

/* Typography categories*/
:root{
    /* Display */
    --ciaFontSizeDisplayLarge: var(--ciaFontSize1000);
    --ciaFontSizeDisplayDefault: var(--ciaFontSize900);
    --ciaFontSizeDisplaySmall: var(--ciaFontSize700);
    --ciaFontWeightDisplayDefault: var(--ciaFontWeight600);
    --ciaFontWeightDisplayStrong: var(--ciaFontWeight700);
    --ciaLineHeightDisplay: var(--ciaLineHeight120);
    --ciaLetterSpacingDisplay: var(--ciaLetterSpacingMinus1);

    /* Heading */
    --ciaFontSizeHeadingLarge: var(--ciaFontSize600);
    --ciaFontSizeHeadingDefault: var(--ciaFontSize400);
    --ciaFontSizeHeadingSmall: var(--ciaFontSize300);
    --ciaFontSizeHeadingXSmall: var(--ciaFontSize200);
    --ciaFontWeightHeadingDefault: var(--ciaFontWeight600);
    --ciaFontWeightHeadingStrong: var(--ciaFontWeight700);
    --ciaLineHeightHeading: var(--ciaLineHeight120);
    --ciaLetterSpacingHeading: var(--ciaLetterSpacingDefault);
    --ciaTextTransformHeading: none;

    /* Body (default) */
    --ciaFontSizeBodyLarge: var(--ciaFontSize400);
    --ciaFontSizeBodyDefault: var(--ciaFontSize300);
    --ciaFontSizeBodySmall: var(--ciaFontSize200);
    --ciaFontSizeBodyXSmall: var(--ciaFontSize100);
    --ciaFontWeightBodyDefault: var(--ciaFontWeight400);
    --ciaFontWeightBodyStrong: var(--ciaFontWeight600);
    --ciaLineHeightBody: var(--ciaLineHeight150);
    --ciaLetterSpacingBody: var(--ciaLetterSpacingDefault);
    --ciaTextTransformBody: none;

    /* Label */
    --ciaFontSizeLabelDefault: var(--ciaFontSize300);
    --ciaFontSizeLabelSmall: var(--ciaFontSize200);
    --ciaFontWeightLabelDefault: var(--ciaFontWeight400);
    --ciaFontWeightLabelStrong: var(--ciaFontWeight600);
    --ciaLineHeightLabel: var(--ciaLineHeight150);
    --ciaLetterSpacingLabel: var(--ciaLetterSpacingDefault);
    --ciaTextTransformLabel: none;

    /* Meta */
    --ciaFontSizeMetaDefault: var(--ciaFontSize300);
    --ciaFontSizeMetaSmall: var(--ciaFontSize200);
    --ciaFontWeightMetaDefault: var(--ciaFontWeight500);
    --ciaFontWeightMetaStrong: var(--ciaFontWeight500);
    --ciaLineHeightMeta: var(--ciaLineHeight120);
    --ciaLetterSpacingMeta: var(--ciaLetterSpacingDefault);
    --ciaTextTransformMeta: uppercase;
}

/*
 * Phone typography tokens
 * define only values different from desktop
 */
.phone{
    /* Display - same as desktop */

    /* Heading */
    --ciaFontSizeHeadingDefault: var(--ciaFontSize500);
    --ciaFontSizeHeadingSmall: var(--ciaFontSize400);
    --ciaFontSizeHeadingXSmall: var(--ciaFontSize300);

    /* Body (default) */
    --ciaFontSizeBodyLarge: var(--ciaFontSize500);
    --ciaFontSizeBodyDefault: var(--ciaFontSize200); /* Note: according to the design document this should be -medium but currently default font size
                                                            on phone is 12px equivalent of -small primitive.
                                                           Changing default font size will likely have much larger impact on any fixed height/width containers
                                                           (i.e. many containers have 16px height and 250px label width)
                                                         */
    --ciaFontSizeBodySmall: var(--ciaFontSize300);

    /* Label */
    --ciaFontSizeLabelDefault: var(--ciaFontSize400);
    --ciaFontSizeLabelSmall: var(--ciaFontSize300);

    /* Meta */
    --ciaFontSizeMetaDefault: var(--ciaFontSize400);
    --ciaFontSizeMetaSmall: var(--ciaFontSize300);
}

:root{
    --ciaFontSizeLink: var(--ciaFontSize300);
    --ciaFontSizeDropDownItem: var(--ciaFontSize300);
    --ciaFontSizeHeading: var(--ciaFontSize300);

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

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

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

    --ciaFontWeightStatus: var(--ciaFontWeight700);
}

/* ideally we will have as little exceptions as possible */
/* within the filters panel, headings are to be uppercase */
.filterContent{
    --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.152.0');
    --ciaIconSortDesc: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-desc.svg?v=12.0.152.0');
    --ciaIconSortUnselected: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-unselected.svg?v=12.0.152.0');
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.152.0');

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


/**** AI Icons ****/
.dropdownPanelListItem .aiChip {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-label.svg?v=12.0.152.0');
}
.primaryAiAction .aiChip{
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle-inverse.svg?v=12.0.152.0');
}
.secondaryAiAction .aiChip {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.152.0');
}

.aiDetailsPanel .aiIcon, .plusPromo .aiIcon {
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.152.0');
}
.aiValue .aiIcon{
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.152.0');
}
.plusBanner{
    --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon-large.svg?v=12.0.152.0');
}

.aiStaticValue{
    .aiIcon {
        --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.152.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;

    /**** AI ****/
    --ciaIconAiSize: 16px;
    --ciaIconAiMargin: 4px;
}

/**** AI Icons ****/
.aiStaticValue, .primaryAiAction, .secondaryAiAction{
    --ciaIconAiSize: 12px;
}

.aiValue{
    --ciaIconAiSize: 8px;
}

.hasPicker .aiValue{
    /* there is no need for right-margin as the AI icon is followed by other elements */
    --ciaIconAiMargin: 0px;
}

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

    /* --- Neutral / Cool --- */
    --ciaColourNeutralCool50: #FBFCFC;
    --ciaColourNeutralCool100: #F2F4F6;
    --ciaColourNeutralCool200: #E1E5EA;
    --ciaColourNeutralCool400: #B4BFCB;
    --ciaColourNeutralCool600: #6C7781;
    --ciaColourNeutralCool800: #3E444A;

    /* --- Transparent --- */
    --ciaColourTransparentInverse32: rgba(235, 238, 241, var(--ciaOpacityDisabled));

    /*-- AI COLOUR TOKENS ----------------------------------------------------*/
    --ciaColourAIPurple100: #F8F5FF;
    --ciaColourAIPurple200: #EAE2FF;
    --ciaColourAIPurple300: #D1BDFF;
    --ciaColourAIPurple400: #AB7BFF;
    --ciaColourAIPurple500: #9747FF;
    --ciaColourAIPurple600: #8434ED;
    --ciaColourAIPurple700: #6D1AC9;
    --ciaColourAIPurple800: #540A9D;
    --ciaColourAIPurple900: #3B0071;

    /*-- UTILITY COLOUR TOKENS -----------------------------------------------*/
    --ciaColourUtilityGreen100:#F1FCF5;
    --ciaColourUtilityGreen200:#DDF9E7;
    --ciaColourUtilityGreen300:#93E7B7;
    --ciaColourUtilityGreen400:#64CE96;
    --ciaColourUtilityGreen500:#2CA66D;
    --ciaColourUtilityGreen600:#197E4F;
    --ciaColourUtilityGreen700:#136640;
    --ciaColourUtilityGreen800:#0A4A2D;
    --ciaColourUtilityGreen900:#032F1B;

    --ciaColourUtilityYellow200:#FEEFC7;
    --ciaColourUtilityYellow400:#FEBE10;

    --ciaColourUtilityBlue100:#F6FAFF;
    --ciaColourUtilityBlue200:#E4EFFF;
    --ciaColourUtilityBlue300:#ACD2FF;
    --ciaColourUtilityBlue400:#64B7FF;
    --ciaColourUtilityBlue500:#009AEA;
    --ciaColourUtilityBlue600:#0471AF;
    --ciaColourUtilityBlue700:#0A5E90;
    --ciaColourUtilityBlue800:#074469;
    --ciaColourUtilityBlue900:#042B45;

    --ciaColourUtilityPurple200:#EEE8F7;
    --ciaColourUtilityPurple600:#8C4BBC;

    --ciaColourUtilityTeal100:#F1FCFC;
    --ciaColourUtilityTeal200:#D1F8F8;
    --ciaColourUtilityTeal300:#94EDED;
    --ciaColourUtilityTeal400:#5FD8D8;
    --ciaColourUtilityTeal500:#199F9F;
    --ciaColourUtilityTeal600:#0C7A7A;
    --ciaColourUtilityTeal700:#0C6363;
    --ciaColourUtilityTeal800:#064848;
    --ciaColourUtilityTeal900:#032E2E;

    --ciaColourUtilityOrange100:#FFF8F5;
    --ciaColourUtilityOrange200:#FFE8DD;
    --ciaColourUtilityOrange300:#FFB18B;
    --ciaColourUtilityOrange400:#F07F00;
    --ciaColourUtilityOrange500:#CA6A00;
    --ciaColourUtilityOrange600:#A35607;
    --ciaColourUtilityOrange700:#824306;
    --ciaColourUtilityOrange800:#613105;
    --ciaColourUtilityOrange900:#421F03;

    --ciaColourUtilityRed100:#FDF1F2;
    --ciaColourUtilityRed200:#FADADD;
    --ciaColourUtilityRed300:#F4A7AE;
    --ciaColourUtilityRed400:#F06B7B;
    --ciaColourUtilityRed500:#EC3556;
    --ciaColourUtilityRed600:#BE2641;
    --ciaColourUtilityRed700:#9C1F36;
    --ciaColourUtilityRed800:#771426;
    --ciaColourUtilityRed900:#540A18;

    /*  Transparent Scales */

    /* combine H, S and L */
    --neutral: 135,148,161;
    --inverse: 180,191,203;
    --primary: var(--ciaColourPrimary);

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

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

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

    /* primary */
    --ciaOpacityPrimaryFaint:    rgba(var(--primary), var(--ciaOpacityFaint));
    --ciaOpacityPrimarySubtle:   rgba(var(--primary), var(--ciaOpacitySubtle));
    --ciaOpacityPrimaryLight:   rgba(var(--primary), var(--ciaOpacityLight));
    --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{
    /* family */
    --ciaFontFamilyBody: Osans, Arial, Verdana, sans-serif;
    --ciaFontFamilyHeading: Osans, Arial, Verdana, sans-serif;

    /*
        Size

        Use the browser root element font unit (for most browsers 1rem is 16px).
        This should allow us to better support zooming.

        Note:
        According to the design document the default body font size should be 14 px.
        The current default font size is 12px .
        Changing default font size will likely have much larger impact on any fixed height/width containers
        (i.e. many containers have 16px height and 250px label width)
    */
    --ciaFontBaseUnit_legacy: 0.85rem;    /* 13.7px - FontSize 300 (default body) is 12px*/
    --ciaFontBaseUnit_design: 1rem;       /* 16px   - FontSize 300 (default body) is 14px*/

    --ciaFontBaseUnit: var(--ciaFontBaseUnit_design);

    &:has(> body.fontLegacy) {
        --ciaFontBaseUnit: var(--ciaFontBaseUnit_legacy);
    }

    --ciaFontSize50: calc(var(--ciaFontBaseUnit) * 0.5);    /* design 8px - legacy 7px */
    --ciaFontSize100: calc(var(--ciaFontBaseUnit) * 0.625); /* design 10px - legacy 8.75px */
    --ciaFontSize200: calc(var(--ciaFontBaseUnit) * 0.75);  /* design 12px - legacy 10.5px*/
    --ciaFontSize300: calc(var(--ciaFontBaseUnit) * 0.875); /* design 14px - legacy 12px */
    --ciaFontSize400: calc(var(--ciaFontBaseUnit) * 1);     /* design 16px - legacy 13.7px */
    --ciaFontSize500: calc(var(--ciaFontBaseUnit) * 1.125); /* design 18px - legacy 15.75px */
    --ciaFontSize600: calc(var(--ciaFontBaseUnit) * 1.25);  /* design 20px - legacy 17.12px */
    --ciaFontSize700: calc(var(--ciaFontBaseUnit) * 1.5);   /* design 24px - legacy 22.5px */
    --ciaFontSize800: calc(var(--ciaFontBaseUnit) * 1.75);  /* design 28px - legacy 24px */
    --ciaFontSize900: calc(var(--ciaFontBaseUnit) * 2);     /* design 32px - legacy 27.4px */
    --ciaFontSize1000: calc(var(--ciaFontBaseUnit) * 2.5);  /* design 40px - legacy 24.25px */

    /* weight */
    --ciaFontWeight200: 200;
    --ciaFontWeight400: 400;
    --ciaFontWeight500: 500;
    --ciaFontWeight600: 600;
    --ciaFontWeight700: 700;

    /* line-height ratio */
    --ciaLineHeight120: 1.2;
    --ciaLineHeight150: 1.5;

    /* letter-spacing (px, with em equivalents for reference) */
    --ciaLetterSpacingDefault: 0;
    --ciaLetterSpacingMinus1: -1px;   /* ≈ -0.083em @12px, -0.05em @20px, -0.025em @40px */
    --ciaLetterSpacingHalf: 0.5px;    /* ≈ +0.036em @14px, +0.031em @16px */
}

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



body
{
    color:var(--ciaColourContentBody);
    min-height:500px;
    overflow-y:auto;
    -ms-touch-action: none;
    background-position: center;
}

body.fastPageLoad.maxScreen
{
    background: none;
}

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

/*-- 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;
    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 > .sideBySide.stackedStyle + .aiBadgeControl {
    margin-bottom: 8px;
}

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