@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-regular.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-regularitalic.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-regularitalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-medium.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-mediumitalic.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-bold.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-bolditalic.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-semibold.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-semibolditalic.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-light.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Square';
    src: url('../../Resources/Fonts/euclidsquare-lightitalic.woff2') format('woff2'),
         url('../../Resources/Fonts/euclidsquare-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Consolas';
    src: url('../../Resources/Fonts/consolas.woff2') format('woff2'),
        url('../../Resources/Fonts/consolas.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* Defines color and font variables used in the stylesheets. If expanding the template, keep the variables in a logical order, and add necessary descriptions. */

:root {
	
/*Redundant styles only used by MadCap Flare to stop displaying errors in the editor*/
	/*KX variables light theme*/
	--background-cli: #E7E9ED;
	--background-code-header: #F9FAFB;
	--background-nav1: #194387;
	--background-nav2: #fff;
	--background-brand-weak: #F1F6FD;
	--background-brand-weakest: #FBFDFE;
	--background-neutral-strong: #F4F5F7;
	--background-neutral-strongest: #E7E9ED;
	--background-neutral-weak: #FCFCFD;
	--background-neutral-weakest: #FFFFFF;
	--background-site: #fff;
 	--border-neutral-default: #CBCFD6;
	--border-neutral-weak: #E7E9ED;
	--border-table: #E7E9ED;
	--button-dark-background: #FFC300;
	--icon-brand-default: #3272D9;
	--icon-neutral-default: #565E6E;
	--inline-code-api: #FBFDFF;
	--text-brand-default: #2159B2;
	--text-brand-strong: #194387;
	--text-darkaccent-strong: #6A10A1;
	--text-lightaccent-strong: #094D57;
	--text-neutral-default: #404651;
	--text-neutral-inverted: #F9FAFB;
	--text-neutral-placeholder: #A5ABB8;
	--text-neutral-strong: #2B2F38;
	--text-neutral-strongest: #1A1D22;
	--text-neutral-weak: #565E6E;
	--text-neutral-weakest: #6D778A;
	--text-error-strong: #881328;
	--text-warning-strong: #653B04;
    /*branding*/
    --brand: #2159B2; /*This colour is used by default in the HTML5 header background. You can override this setting in the Skin file*/
    --dark: #404651; /*In HTML: h2, h3, h4; in A5: h4, h5; text links in the left-hand nav; search results: url cite; Menu toggle for an optional slide-out nav. */
  /*Note: #1e0055 is also used in the navigation svgs such as arrows.*/
    --light: #7f51b3; /*Search results: url*/
    --secondary: #0d47a1; /*Not used in the template*/
    --secondary-dark: #002171; /*p.dropDownSummary in all PDF outputs*/
    --secondary-light: #5472d3; /*Not used in the template*/
    --background: #ffffff; /*HTML site background*/
    --font-color:  #404651; /*Font color, shared by HTML and PDFs*/
    --custom-bullet: #2B2F38;

  /*colours for the notices*/

  --warning-background:  #FDF4F5;
  --warning-border:#EC8C9E;
  --information-background: #F8FBFE;
  --information-border:  #88ADE9;
  --note-background: #F3FCFD;
  --note-border: #15B8CF;
  --related-content-background: #FAFAFB;
  --related-content-border: #A5ABB8;
  --tip-background: #FCF8FF;
  --tip-border: #CF92F4;
  --important-background: #FFF8EF;
  --important-border: #EF9620;
  
  /*end of colours for the notices*/

  --footer-background: #ffffff;
  --footer-border: #E7E9ED;
  --footer-text: #6D778A;

  /* Scrollbar colors for code snippets */
  --scrollbar-track: var(--background-neutral-strongest);
  --scrollbar-thumb: var(--border-neutral-default);
  --scrollbar-thumb-hover: var(--text-neutral-weak);
/*End of redundant styles*/


	--font-family-brand: 'Euclid Square', sans-serif;
	--font-line-height: 24px;
    --font-html: "Euclid Square", sans-serif; /*Font in HTML*/
    --font-pdf: 'Aptos'; /*Font in PDFs*/
    --font-size-pdf: 11pt;
    --font-size-html: 16px;
    /*font for: code samples, user input, system output*/
    --font-code: "Consolas", monospace;
  /*HTML*/
  --link: #5472d3; /*Inline link anchors*/
  --link-hover: #4f2683; /*Inline link anchors on hover*/
  /*HTML - used for the extra menus you can insert in custom header*/
  --menu-dropdown: #664dc3;
  --menu-hover: #3e0bcc;
  /*PDF*/
  --booktitle: #4f2683; /*A heading with the title on PDF cover*/
  --booksubtitle: #404040; /*A paragraph with the subtitle on PDF cover*/
  --booksummary: #000000; /*A paragraph with the "Original instructions / Translated instructions" information*/
  --border-bottom: #404040; /*Borders in the A4, A5 page layout*/
  --border-top: #404040; /*Borders in the A4, A5 page layout*/
  /*common colours*/
  --alabaster: #fcfcfc; /*Drop-down backgrounds*/
  --black: #000000; /*Selected table borders across the whole project CSS, for details, run a search on the project as text*/
  --blue: #0068b3; /*HTML5: p.response and content of the language selector*/
  --dark-blue: #034694; /*HTML5: border of p.codeblock style*/
  --dark-gray: #333333; /*Legacy backgrounds in ResponsiveHelp.css*/
  --dim-gray: #696969; /*p.tocHeading in A3, p.TOC1 in A5, legacy elements in skins - for skin details, run a search on the project as text*/
  --draft-gray: #d3d3d3; /*PDFs: draft watermark; HTML: drop-down borders; search highlights; some styles in ResponsiveHelp.css*/
  --green: #008000; /*p.ulright*/
  --light-gray: #f9f9f9; /*HTML: background in left-hand nav*/
  --medium-gray: #a6a8aa; /*legacy elements in skins - for skin details, run a search on the project as text*/
  --red: #ff0000; /*p.ulwrong, p.comment, p.draftcomment, td.red*/
  --white: #ffffff; /*various elements like table borders, HTML portal structure, backgrounds - for a complete list, run a text search on the whole project*/
  --yellow: #ffff00; /*td.yellow*/
  /*styles for internal use*/
  --annotation-green: #00ff00;
}

:root[data-theme="light"] {
    
	/*KX variables light theme*/
	--background-code-header: #F9FAFB;
	--background-nav1: #194387;
	--background-nav2: #fff;
    --background-brand-default: #DAE6F9;
	--background-brand-weak: #F1F6FD;
	--background-brand-weakest: #FBFDFE;
	--background-neutral-strong: #F4F5F7;
	--background-neutral-strongest: #E7E9ED;
	--background-neutral-weak: #FCFCFD;
	--background-neutral-weakest: #FFFFFF;
	--background-site: #fff;
 	--border-neutral-default: #CBCFD6;
	--border-neutral-weak: #E7E9ED;
	--border-table: #E7E9ED;
	--icon-brand-default: #3272D9;
	--inline-code-api: #FBFDFF;
	--text-brand-default: #2159B2;
	--text-brand-strong: #194387;
	--text-darkaccent-strong: #6A10A1;
	--text-lightaccent-strong: #094D57;
	--text-neutral-default: #404651;
	--text-neutral-inverted: #F9FAFB;
	--text-neutral-placeholder: #A5ABB8;
	--text-neutral-strong: #2B2F38;
	--text-neutral-strongest: #1A1D22;
	--text-neutral-weak: #565E6E;
	--text-neutral-weakest: #6D778A;
	--text-error-strong: #881328;
	--text-warning-strong: #653B04;
    /*branding*/
    --brand: #2159B2; /*This colour is used by default in the HTML5 header background. You can override this setting in the Skin file*/
    --dark: #404651; /*In HTML: h2, h3, h4; in A5: h4, h5; text links in the left-hand nav; search results: url cite; Menu toggle for an optional slide-out nav. */
  /*Note: #1e0055 is also used in the navigation svgs such as arrows.*/
    --light: #7f51b3; /*Search results: url*/
    --secondary: #0d47a1; /*Not used in the template*/
    --secondary-dark: #002171; /*p.dropDownSummary in all PDF outputs*/
    --secondary-light: #5472d3; /*Not used in the template*/
    --background: #ffffff; /*HTML site background*/
    --font-color:  #404651; /*Font color, shared by HTML and PDFs*/
    --custom-bullet: #2B2F38;

  /*colours for the notices*/

  --warning-background:  #FDF4F5;
  --warning-border:#EC8C9E;
  --information-background: #F8FBFE;
  --information-border:  #88ADE9;
  --note-background: #F3FCFD;
  --note-border: #15B8CF;
  --related-content-background: #FAFAFB;
  --related-content-border: #A5ABB8;
  --tip-background: #FCF8FF;
  --tip-border: #CF92F4;
  --important-background: #FFF8EF;
  --important-border: #EF9620;
  
  /*end of colours for the notices*/

  --footer-background: #ffffff;
  --footer-border: #E7E9ED;
  --footer-text: #6D778A;

  /* Scrollbar colors for code snippets */
  --scrollbar-track: var(--background-neutral-strongest);
  --scrollbar-thumb: var(--border-neutral-default);
  --scrollbar-thumb-hover: var(--text-neutral-weak);
}

:root[data-theme="dark"] {
    /*KX variables dark theme*/
    --background-cli: #22252C;
    --background-code-header: #363C46;
    --background-nav1: #1A1D22;
    --background-nav2: #22252C;
    --background-brand-default: #584300;
    --background-brand-weak: #363C46;
    --background-brand-weakest: #404651;
    --background-neutral-strong: #2B2F38;
    --background-neutral-strongest: #363B47;
    --background-neutral-weak: #2B2F38;
	--background-neutral-weakest: #22252C;
    --background-site: #2B2F38;
    --border-neutral-default: #404651;
    --border-neutral-weak: #565E6E;
    --border-table: #404651;
    --icon-brand-default: #FFCB22;
	--icon-neutral-default: #F9FAFB;
	--inline-code-api: #22252C;
    --text-brand-default: #FFCB22;
    --text-brand-strong: #A7C8FF;
    --text-darkaccent-strong: #CF92F4;
    --text-lightaccent-strong: #15B8CF;
    --text-neutral-default: #E7E9ED;
	--text-neutral-inverted: #F9FAFB;
	--text-neutral-placeholder: #A5ABB8;
    --text-neutral-strong: #F9FAFB;
    --text-neutral-strongest: #FFFFFF;
    --text-neutral-weak: #CBCFD6;
	--text-neutral-weakest: #CBCFD6;
    --text-error-strong: #FF8FA3;
    --text-warning-strong: #FFB459;
    /*branding*/
    --brand: #88B5FF;
    --dark: #E7E9ED;
    --light: #B794E3;
    --secondary: #619AFF;
    --secondary-dark: #A7C8FF;
    --secondary-light: #619AFF;
    --background: #15171A;
    --font-color: #E7E9ED;
    --custom-bullet: #F4F5F7;
  	--footer-background: #ffffff;
  	--footer-border: #E7E9ED;
  	--footer-text: #6D778A;
    --link: #FFCB22;

    /*colours for the notices*/
    --warning-background: #1F181C;
    --warning-border: #881328;
    --information-background: #1B1F24;
    --information-border: #4B75C4;
    --note-background: #192125;
    --note-border: #15B8CF;
    --related-content-background: #191C20;
    --related-content-border: #565E6E;
    --tip-background: #1C1924;
    --tip-border: #CF92F4;
    --important-background: #241F18;
    --important-border: #EF9620;

    --footer-background: #2B2F38;
    --footer-border: #565E6E;

    /* Scrollbar colors for code snippets */
    --scrollbar-track: #22252C;      /* Darker background */
    --scrollbar-thumb: #404651;      /* Darker thumb */
    --scrollbar-thumb-hover: #565E6E; /* Thumb hover state */
}